clavarium 0.2.377-next.1 → 0.2.378-next.1

package/npm-shrinkwrap.json

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

package/package.json

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

package/server/settingswords.mjs

@@ -101,7 +101,7 @@ export const SETTINGS_WORDS_FR = {
     'set-as-nobody': 'personne',
     /* The one list of assets (06-11, kit AssetList): its views, its one button, a group's head, what an empty one says. */
     'set-as-new': 'Nouveau', 'set-as-by-group': 'Groupes', 'set-as-by-type': 'Types', 'set-as-no-group': 'Sans groupe',
-    'set-as-fold': 'Replier', 'set-as-unfold': 'Déplier', 'set-as-group-open': 'Réglages de {name}', 'set-as-group-gear': 'Donner, renommer, supprimer',
+    'set-as-fold': 'Replier', 'set-as-unfold': 'Déplier', 'set-as-group-gear': 'Donner, renommer, supprimer',
     'set-as-group-empty': 'Vide : glissez un asset ici', 'set-as-all-grouped': 'Chaque asset est dans un groupe',
     'set-as-no-groups': 'Créez un groupe, puis glissez-y un asset',
     /* One asset opened (06-11, kit AssetPanel, AccessList): who has it, its kind, what a calendar's levels mean, delete. */
@@ -140,7 +140,6 @@ export const SETTINGS_WORDS_FR = {
     'set-as-card': '1 carte', 'set-as-cards': '{n} cartes', 'set-as-linked': 'lié : {list}',
     'set-as-to-send': 'À envoyer', 'set-as-to-send-sub': 'tous les dépôts, relus et envoyés ensemble', 'set-as-waiting': '{n} vous attendent',
     'set-as-none-given': 'Rien ne lui est encore donné.', 'set-as-no-match': 'Rien à ce nom.',
-    'set-as-group': 'Groupe', 'set-as-group-make': 'Créez-en un dans la vue « Groupes ».',
     'set-as-files': 'Fichiers', 'set-as-browse': 'Parcourir',
     'set-cx-mail': 'boîte mail', 'set-cx-calendar': 'agenda', 'set-cx-contacts': 'carnet d\'adresses', 'set-cx-files': 'dossier en ligne',
     /* External MCP servers (mcpx.mjs): the form, their tools, the rights in their own words. */
@@ -163,7 +162,16 @@ export const SETTINGS_WORDS_FR = {
     'set-acc-share': 'Partager avec un appareil…', 'set-acc-in-assets': 'Ouvrir dans Assets',
     'set-acc-used-1': 'Utilisé par 1 conversation : mettez « Aucun »', 'set-acc-used-n': 'Utilisé par {n} conversations : mettez « Aucun »',
     /* Give… (07-11, assets step 4): in a conversation's tab; Settings › Access one line; a secret's next start. */
-    'set-give-go': 'Donner', 'set-give-all': 'Elle a déjà chaque asset.', 'set-group-none-all': 'Tout à Aucun',
+    'set-give-go': 'Donner', 'set-give-all': 'Elle a déjà chaque asset.',
+    /* A group (07-11, assets step 5): opened in the asset panel, given to every member, made from any view. */
+    'set-group-new': 'Nouveau groupe', 'set-group-new-dots': 'Nouveau groupe…', 'set-group-name': 'Nom du groupe',
+    'set-group-add': 'Ajouter', 'set-group-cancel': 'Annuler', 'set-group-of': 'Groupe de {name}',
+    'set-group-in': 'Dans le groupe', 'set-group-has': '{has} sur {of}', 'set-group-per-asset': 'Le droit reste sur chaque asset.',
+    'set-group-empty-hint': 'Vide : choisissez ce groupe sur un asset.',
+    'set-group-rename': 'Renommer…', 'set-group-save': 'Renommer', 'set-group-remove': 'Retirer le groupe…',
+    'set-group-remove-q': 'Ses assets restent ; seul le groupe part.', 'set-group-remove-yes': 'Retirer',
+    'set-group-skipped-1': '1 ignoré : {why}', 'set-group-skipped-n': '{n} ignorés : {why}',
+    'set-group-only': '{kind}, {levels} seulement', 'set-group-no-device': '{kind}, pas pour un appareil',
     'set-acc-assets-1': '1 asset · voir', 'set-acc-assets-n': '{n} assets · voir', 'set-acc-asset-1': '1 asset', 'set-acc-asset-n': '{n} assets',
     'set-secret-next-on': '{name} : remis à son outil au prochain démarrage', 'set-secret-next-off': '{name} : plus remis dès son prochain démarrage',
     'set-files-list': 'Liste', 'set-files-icons': 'Icônes', 'set-files-empty': 'Ce dossier est vide.',

package/web/app.js

@@ -3858,21 +3858,6 @@
         for (const d of ['m3 17 2 2 4-4', 'm3 7 2 2 4-4', 'M13 6h8', 'M13 12h8', 'M13 18h8']) { const path = document.createElementNS(SVG, 'path'); path.setAttribute('d', d); svg.append(path); }
         return svg;
     }
-    const roundPlus = (label, onclick) => { const b = el('button', 'as-add', '+'); b.type = 'button'; b.setAttribute('aria-label', label); b.title = label; b.addEventListener('click', onclick); return b; };
-    /* One row, used by both the by-type and the by-group views. The icon
-       follows the item's own kind (a group mixes kinds). */
-    function assetRow(item, { chosen, choose }) {
-        const row = el('button', 'as-row'); row.type = 'button'; row.dataset.asset = item.key; row.dataset.name = item.name;
-        if (item.key === chosen) row.setAttribute('aria-current', 'true');
-        const name = el('b', '', item.name);
-        if (item.badge) { const badge = el('span', `as-badge${item.badgeTone ? ` ${item.badgeTone}` : ''}`, item.badge); if (item.badgeTitle) badge.title = item.badgeTitle; name.append(badge); }
-        const sub = el('small', item.tone ? `as-sub ${item.tone}` : 'as-sub', item.sub ?? '');
-        if (item.dot) { sub.classList.add('status-line'); sub.dataset.tone = item.dot; }
-        const words = el('span', 'as-words'); words.append(name, sub);
-        row.append(kindIcon(item.kind), words);
-        row.addEventListener('click', () => choose(item.key));
-        return row;
-    }
     /* AN ITEM OF THESE LISTS, as the kit's AssetCard takes it (06-11, assets step 2): its point when it asks for
        you (a secret soon or past, a mailbox failing), the shade of its line, who has it or its right. */
     const cardOf = (item) => ({ key: item.key, kind: item.kind, name: item.name, sub: item.sub ?? '', live: item.live,
@@ -3946,9 +3931,6 @@
         /* Once a finger's drag has begun, the page must not scroll under it. */
         holder.addEventListener('touchmove', (e) => { if (drag?.on) e.preventDefault(); }, { passive: false });
     }
-    /* The shortcut "give all": each member at the lightest real level for its type. */
-    const giveValue = (item, on) => (!on ? (item.target || item.kind !== 'secret' ? 'none' : 'off')
-        : item.target ? 'watch' : item.kind === 'secret' ? 'use' : 'read');
     async function applyMemberGrant(item, conversationName, value) {
         if (item.target) return grantTarget(item.target.id, conversationName, value);
         if (item.kind === 'secret') return handTo(conversationName, item.name, value === 'use', asErrId());
@@ -3968,14 +3950,15 @@
         bar.replaceChildren(KIT.Segmented({ options: [{ value: 'group', label: uiSaid('set-as-by-group', 'Groups') }, { value: 'type', label: uiSaid('set-as-by-type', 'Types') }], value: view, label: 'Arrange assets',
             onChange: (by) => { if (by === view) return; assetsBy = by; keepAssetsBy(); groupAdding = false; void paintAssets(); } }));
     }
-    /* "+ New group", above the groups: a name in place, then made and opened. */
+    /* "+ New group", above the list in either view (05-11, step 5: groups are made from any view): a name in place,
+       then made and opened. */
     function newGroupBar() {
         const addBar = el('div', 'as-group-new');
         if (groupAdding) {
             const form = el('form', 'as-group-form'); form.autocomplete = 'off';
-            const input = el('input'); input.placeholder = 'Group name'; input.maxLength = 40; input.setAttribute('aria-label', 'New group name');
-            const make = el('button', 'primary', 'Add'); make.type = 'submit';
-            const cancel = el('button', '', 'Cancel'); cancel.type = 'button'; cancel.addEventListener('click', () => { groupAdding = false; void paintAssets(); });
+            const input = el('input'); input.placeholder = uiSaid('set-group-name', 'Group name'); input.maxLength = 40; input.setAttribute('aria-label', input.placeholder);
+            const make = el('button', 'primary', uiSaid('set-group-add', 'Add')); make.type = 'submit';
+            const cancel = el('button', '', uiSaid('set-group-cancel', 'Cancel')); cancel.type = 'button'; cancel.addEventListener('click', () => { groupAdding = false; void paintAssets(); });
             form.append(input, make, cancel);
             form.addEventListener('submit', async (event) => {
                 event.preventDefault(); $('assets-error').hidden = true;
@@ -3985,112 +3968,128 @@
             });
             addBar.append(form);
             queueMicrotask(() => input.focus());
-        } else addBar.append(roundPlus('New group', () => { groupAdding = true; void paintAssets(); }), el('span', 'hint', 'New group'));
+        } else {
+            const word = uiSaid('set-group-new', 'New group');
+            const go = el('button', 'as-group-add'); go.type = 'button';
+            go.append(el('span', 'as-add', '+'), el('span', 'hint', word));
+            go.addEventListener('click', () => { groupAdding = true; void paintAssets(); });
+            addBar.append(go);
+        }
         return addBar;
     }
-    /* In an asset's detail: which group it is in. Moving it is a folder move
-       (it leaves any other group). New groups are made in the by-group view. */
-    function groupPicker(chosen, groups) {
-        const wrap = el('div', 'as-group-of'); wrap.append(el('span', 'as-group-of-label', uiSaid('set-as-group', 'Group')));
-        if (!groups.length) { wrap.append(el('small', 'hint', uiSaid('set-as-group-make', 'Make one in “By group”.'))); return wrap; }
-        const sel = el('select'); sel.setAttribute('aria-label', `Group for ${chosen.name}`);
-        const none = el('option', '', uiSaid('set-as-no-group', 'No group')); none.value = ''; sel.append(none);
-        const inId = groupOf(chosen.key, groups);
-        for (const g of groups) { const o = el('option', '', g.label); o.value = g.id; if (g.id === inId) o.selected = true; sel.append(o); }
-        if (!inId) none.selected = true;
-        sel.addEventListener('change', async () => {
+    /* AN ASSET'S GROUP, a chip on its head in the menu (kit GroupChip: « Home ▾ »): moving it is a folder move (it leaves any
+       other group); « New group… » makes one in place and puts it there. */
+    function groupChip(chosen, groups) {
+        const place = async (group) => {
             $('assets-error').hidden = true;
-            try { await post(`${API}/asset-groups/place`, { asset: chosen.key, group: sel.value || null }); }
+            try { await post(`${API}/asset-groups/place`, { asset: chosen.key, group }); }
             catch (error) { $('assets-error').textContent = error.message; $('assets-error').hidden = false; }
             void paintAssets();
-        });
-        wrap.append(sel);
-        return wrap;
+        };
+        return KIT.GroupChip({ groups, value: groupOf(chosen.key, groups), name: chosen.name, onPlace: place,
+            onMake: async (label) => {
+                $('assets-error').hidden = true;
+                let made;
+                try { made = await post(`${API}/asset-groups`, { label }); }
+                catch (error) { $('assets-error').textContent = error.message; $('assets-error').hidden = false; return false; }
+                await place(made.id);
+                return true;
+            } });
+    }
+    /* A GROUP OPENED (05-11, assets step 5): the same panel as an asset (kit AssetPanel). Who has it: a conversation or a
+       device given a level gets it on every member that takes it, « None » takes it from every member (kit groupFanOut);
+       those skipped are said once. A right stays stored asset by asset: the group is only a label. Then its members (each
+       opens), Rename, Remove (the assets stay). */
+    let groupSaid = null;
+    /* One holder's level of each member: { [key]: level }. */
+    function groupCurrent(members, row) {
+        if (String(row.id).startsWith('device:')) {
+            const grants = sharedDevices.find((d) => `device:${d.id}` === row.id)?.grants ?? [];
+            return Object.fromEntries(members.map((m) => [m.key, KIT.rightOf(KIT.rightsKey(m), grants.find((g) => g.asset === m.key)?.rights, 'device')]));
+        }
+        const name = String(row.id).slice('conversation:'.length);
+        return Object.fromEntries(members.map((m) => [m.key, KIT.rightOf(KIT.rightsKey(m), memberCurrent(m, name))]));
+    }
+    function groupHolders(members) {
+        const rows = [];
+        const has = (g) => (g.level === 'some' ? uiSaid('set-group-has', '{has} of {of}', { has: g.has, of: g.of }) : '');
+        /* Given in part: each member it has, with its right (as the old screen showed each one's level). */
+        const parts = (g, now) => (g.level === 'some' ? members.filter((m) => (now[m.key] ?? 'none') !== 'none').map((m) => ({ name: m.name, key: KIT.rightsKey(m), level: now[m.key] })) : undefined);
+        for (const c of conversations) {
+            const id = `conversation:${c.name}`;
+            const now = groupCurrent(members, { id });
+            const g = KIT.groupLevel(members, now, 'conversation');
+            if (c.phase !== 'ready' && g.level === 'none') continue;
+            rows.push({ id, name: shownName(c) || c.name, sub: has(g) || (c.toolLabel ?? ''), level: g.level, ready: c.phase === 'ready', parts: parts(g, now) });
+        }
+        for (const d of sharedDevices) {
+            if (!(d.grants ?? []).some((x) => members.some((m) => m.key === x.asset))) continue;
+            const id = `device:${d.id}`;
+            const now = groupCurrent(members, { id });
+            const g = KIT.groupLevel(members, now, 'device');
+            rows.push({ id, name: d.label ?? d.name ?? d.id, sub: has(g) || undefined, level: g.level, parts: parts(g, now) });
+        }
+        return rows;
+    }
+    async function setGroupAccess(group, members, row, level) {
+        const err = $('assets-error'); err.hidden = true;
+        const fan = KIT.groupFanOut({ members, level, holder: row.holder, current: groupCurrent(members, row) });
+        let ok = true;
+        for (const x of fan.give) {
+            if (row.holder === 'device') {
+                const id = String(row.id).slice('device:'.length);
+                try { if (x.stored) await post(`${API}/devices/${id}/give`, { asset: x.key, rights: x.stored }); else await post(`${API}/devices/${id}/take`, { asset: x.key }); }
+                catch (error) { sayAsErr(error); ok = false; }
+            } else await applyMemberGrant(x.m, String(row.id).slice('conversation:'.length), x.stored ?? x.level);
+            /* The first refusal stops it, said (a repository shared for writing asks its confirmation there). */
+            if (!ok || !err.hidden) { ok = false; break; }
+        }
+        if (row.holder === 'device') await readDevices();
+        groupSaid = { id: group.id, text: KIT.skippedSaid(fan.skip) };
+        await paintAssets();
+        return ok;
     }
-    /* A group's own detail: rename it, remove it (the assets stay), give the
-       whole group to a conversation at a level, and its members (each opens). */
-    function groupDetail(detail, group, items, back) {
+    function groupPanel(detail, group, items, { back, choose }) {
         const members = (group.members ?? []).map((k) => items.find((i) => i.key === k)).filter(Boolean);
-        const top = el('div', 'as-title');
-        const all = el('button', 'as-link as-back', '‹ Assets'); all.type = 'button'; all.addEventListener('click', () => { if (!nav.close('asset')) back(); });
-        const h = el('h2'); h.append(el('span', '', group.label), el('span', 'as-badge count', String(members.length)));
-        top.append(all, h);
-        detail.append(top);
-        const repaint = () => void paintAssets();
-        const openAsset = (key) => { placeAssetStep(); if (key !== assetOpen) groupGiveShow.clear(); assetOpen = key; remember(); void paintAssets(); };
-
-        /* GIVE THE GROUP: a block per conversation, a row per asset AT ITS OWN
-           level. Two shortcuts set or clear all at once (not a sticky state).
-           Rights stay stored per asset -- this is just a handy place to set them. */
-        const ready = conversations.filter((c) => c.phase === 'ready');
-        const isGiven = (c) => members.some((m) => !['none', 'off'].includes(memberCurrent(m, c.name)));
-        const shownConvs = ready.filter((c) => isGiven(c) || groupGiveShow.has(c.name));
-        const setAll = async (c, on) => { for (const m of members) { try { await applyMemberGrant(m, c.name, giveValue(m, on)); } catch { /* shown by the grant */ } } repaint(); };
-        const convBlock = (c) => {
-            const block = el('div', 'as-give-conv');
-            const head = el('div', 'as-give-head');
-            const giveAll = el('button', 'as-mini', 'Give all'); giveAll.type = 'button'; giveAll.addEventListener('click', () => setAll(c, true));
-            const clearAll = el('button', 'as-mini', uiSaid('set-group-none-all', 'All to None')); clearAll.type = 'button'; clearAll.addEventListener('click', () => setAll(c, false));
-            head.append(el('b', '', shownName(c)), el('span', 'as-give-acts', ''));
-            head.lastChild.append(giveAll, clearAll);
-            block.append(head);
-            for (const m of members) {
-                const line = el('div', 'as-give-row');
-                const nm = el('span', 'as-give-name'); nm.append(kindIcon(m.kind), el('span', '', m.name));
-                /* The one picker (kit RightsPicker, « None » first): the same levels as the asset's own panel. */
-                const pick = KIT.RightsPicker({ key: KIT.rightsKey(m), kind: m.kind, value: memberCurrent(m, c.name), label: `${m.name} for ${shownName(c)}`,
-                    onChange: async (level, stored) => { await applyMemberGrant(m, c.name, stored ?? level); repaint(); } });
-                if (pick) line.append(nm, pick); else line.append(nm);
-                block.append(line);
-            }
-            if (members.length === 0) block.append(el('p', 'hint', 'The group is empty.'));
-            return block;
-        };
-        detail.append(chapter('Give the group to a conversation'));
-        const giveBox = el('div', 'as-give');
-        for (const c of shownConvs) giveBox.append(convBlock(c));
-        if (shownConvs.length === 0) giveBox.append(el('p', 'hint', members.length ? 'Not given to any conversation yet.' : 'Add assets to the group first (open an asset, pick this group).'));
-        detail.append(giveBox);
-        /* Add a conversation to set up, even before any asset is given to it. */
-        const others = ready.filter((c) => !shownConvs.includes(c));
-        const addConv = el('button', 'as-link as-add-conv', '+ a conversation'); addConv.type = 'button';
-        const picker = el('div', 'as-pick'); picker.hidden = true;
-        for (const c of others) { const b = el('button', 'as-pick-conv', shownName(c)); b.type = 'button'; b.addEventListener('click', () => { groupGiveShow.add(c.name); repaint(); }); picker.append(b); }
-        if (others.length === 0) picker.append(el('p', 'hint', ready.length ? 'Every conversation is shown.' : 'No conversation is ready.'));
-        addConv.addEventListener('click', () => { picker.hidden = !picker.hidden; });
-        if (members.length) detail.append(addConv, picker);
-        const note = el('p', 'as-assoc hint');
-        note.append(el('b', '', 'Per asset'), document.createTextNode(': each keeps the levels of its own type (a mailbox reads, a secret is used, a connexion watches…). The two shortcuts just set or clear all at once; each row stays editable, and the right is stored per asset.'));
-        detail.append(note);
-
-        /* The assets in the group, each opens its own detail. */
-        detail.append(chapter('Assets in the group'));
-        const rowsBox = el('div', 'as-group-members');
-        for (const m of members) rowsBox.append(assetRow(m, { chosen: '', choose: openAsset }));
-        if (members.length === 0) rowsBox.append(el('p', 'hint', 'Open an asset and pick this group to put it here.'));
-        detail.append(rowsBox);
-
-        /* Rename, then remove (a plain link -- it only drops the grouping). */
-        detail.append(chapter('Name'));
-        const form = el('form', 'as-group-rename'); form.autocomplete = 'off';
-        const name = el('input'); name.value = group.label; name.maxLength = 40; name.setAttribute('aria-label', 'Group name');
-        const go = el('button', 'btn', 'Rename'); go.type = 'submit';
-        form.append(name, go);
-        form.addEventListener('submit', async (event) => {
-            event.preventDefault(); $('assets-error').hidden = true;
-            try { await post(`${API}/asset-groups/${group.id}/rename`, { label: name.value.trim() }); } catch (error) { $('assets-error').textContent = error.message; $('assets-error').hidden = false; }
-            repaint();
-        });
-        detail.append(form);
-        const remove = el('div', 'as-group-remove');
-        const del = el('button', 'as-remove-link', 'Remove the group'); del.type = 'button';
-        del.addEventListener('click', async () => {
-            $('assets-error').hidden = true;
-            try { await post(`${API}/asset-groups/${group.id}/remove`, {}); groupGiveShow.clear(); assetOpen = ''; remember(); } catch (error) { $('assets-error').textContent = error.message; $('assets-error').hidden = false; }
-            repaint();
+        if (groupSaid?.id !== group.id) groupSaid = null;
+        const parts = [];
+        if (members.length) {
+            const levels = { conversation: KIT.groupLevels(members, 'conversation'), device: KIT.groupLevels(members, 'device') };
+            const model = KIT.accessModel({ key: 'group', holders: groupHolders(members), levels });
+            parts.push(KIT.AccessList(model, { key: 'group', name: group.label, levels, onChange: (row, level) => setGroupAccess(group, members, row, level) }));
+            if (groupSaid?.text) parts.push(el('p', 'hint as-group-skipped', groupSaid.text));
+            parts.push(el('p', 'hint as-group-note', uiSaid('set-group-per-asset', 'A right stays on each asset.')));
+        }
+        const rows = el('div', 'as-group-members');
+        for (const m of members) rows.append(KIT.AssetCard(cardOf(m), { cls: 'as-row', onOpen: choose }));
+        if (!members.length) rows.append(el('p', 'hint', uiSaid('set-group-empty-hint', 'Empty: pick this group on an asset.')));
+        parts.push({ title: uiSaid('set-group-in', 'In the group'), body: [rows], cls: 'as-group-in' });
+        /* Rename in place; remove, asked in place: the assets stay, only the label goes. */
+        const rename = el('button', 'as-link as-group-rename-open', uiSaid('set-group-rename', 'Rename…')); rename.type = 'button';
+        rename.addEventListener('click', () => {
+            const form = el('form', 'as-group-rename'); form.autocomplete = 'off';
+            const name = el('input'); name.value = group.label; name.maxLength = 40; name.setAttribute('aria-label', uiSaid('set-group-name', 'Group name'));
+            const go = el('button', 'primary', uiSaid('set-group-save', 'Rename')); go.type = 'submit';
+            const keep = el('button', '', uiSaid('set-group-cancel', 'Cancel')); keep.type = 'button';
+            keep.addEventListener('click', () => { form.replaceWith(rename); });
+            form.append(name, go, keep);
+            form.addEventListener('submit', async (event) => {
+                event.preventDefault(); $('assets-error').hidden = true;
+                try { await post(`${API}/asset-groups/${group.id}/rename`, { label: name.value.trim() }); } catch (error) { $('assets-error').textContent = error.message; $('assets-error').hidden = false; return; }
+                void paintAssets();
+            });
+            rename.replaceWith(form); focusField(name);
         });
-        remove.append(del, el('p', 'hint', 'The assets stay; only the group is removed.'));
-        detail.append(remove);
+        const remove = KIT.AssetDelete({ label: uiSaid('set-group-remove', 'Remove group…'), lost: uiSaid('set-group-remove-q', 'Its assets stay; only the group goes.'), yes: uiSaid('set-group-remove-yes', 'Remove'),
+            onYes: async () => {
+                $('assets-error').hidden = true;
+                try { await post(`${API}/asset-groups/${group.id}/remove`, {}); assetOpen = ''; groupSaid = null; remember(); }
+                catch (error) { $('assets-error').textContent = error.message; $('assets-error').hidden = false; }
+                void paintAssets();
+            } });
+        const n = members.length;
+        const card = { key: `group:${group.id}`, kind: 'group', name: group.label, sub: uiSaid(n === 1 ? 'set-acc-asset-1' : 'set-acc-asset-n', n === 1 ? '1 asset' : '{n} assets', { n }) };
+        detail.append(KIT.AssetPanel(card, { back: { onBack: () => { if (!nav.close('asset')) back(); } }, parts, foot: [rename, remove], cls: 'as-group-panel' }));
     }
     const chapter = (title, ...extra) => { const head = el('div', 'as-chapter'); head.append(el('h3', '', title), ...extra); return head; };
     const boxSub = (box) => (!box ? '' : box.failure ? box.failure : uiSaid(box.messages === 1 ? 'set-as-message' : 'set-as-messages', box.messages === 1 ? '1 message' : '{n} messages', { n: box.messages }));
@@ -4891,12 +4890,8 @@
     let assetsBy = '';
     try { const kept = localStorage.getItem('clavarium-assets-by'); if (kept === 'group' || kept === 'type') assetsBy = kept; } catch { /* a private window */ }
     const keepAssetsBy = () => { try { localStorage.setItem('clavarium-assets-by', assetsBy); } catch { /* as above */ } };
-    /* The "+ New group" inline form being shown in the by-group view. */
+    /* The "+ New group" inline form being shown above the list. */
     let groupAdding = false;
-    /* Conversations shown in a group's "give" settings although none of its
-       assets is given to them yet (the owner just added them to set levels).
-       Cleared when the open group changes. */
-    const groupGiveShow = new Set();
     /* A binder opened in Assets: its screen, the card of the address (a reload); a card, a step (binderSteps). */
     let assetsView = null; let assetsAt = null;
     const assetsSteps = binderSteps(() => assetsView, { address: () => remember() });
@@ -5202,7 +5197,6 @@
         const copyBox = (chosen.kind === 'mailbox' || chosen.kind === 'folder') && !t;
         /* WHAT IT IS. */
         if (chosen.kind === 'mailbox' && !t) parts.push(el('p', chosen.box?.failure ? 'error' : 'hint', boxSub(chosen.box)));
-        if (inMenu && groups) parts.push(groupPicker(chosen, groups));
         /* ACTIONS TOO (02-11): a mailbox copied as files is read only; the same mailbox, connected live, can
            send, reply, move, flag -- within the rights given. Made here with its address and password (they
            stay on the server); only its sending server is asked, found from the address when known. */
@@ -5422,14 +5416,14 @@
             foot.push(there);
         }
         /* Its right said once: by its own row's picker when it has one (« Lire » pressed), else by the head's badge. */
-        const card = { ...cardOf(chosen), holders: undefined, right: inMenu || model?.here ? undefined : chosen.right, chips: chipsOf(chosen) };
+        const card = { ...cardOf(chosen), holders: undefined, right: inMenu || model?.here ? undefined : chosen.right, chips: [inMenu && groups && !own ? { node: groupChip(chosen, groups) } : null, ...chipsOf(chosen)] };
         /* A later paint began while this one read: it draws, not this one. */
         if (stale()) return;
         detail.append(KIT.AssetPanel(card, { back: back ? { onBack: () => { if (!nav.close('asset')) back(); } } : null, parts, foot }));
         if (gitHolder) await gitDetail(gitHolder, chosen.name, { place: inMenu, others: gits.length > 1 });
     }
     const ASSET_WORD = { folder: 'Folder', git: 'Repository', mailbox: 'Mailbox', agenda: 'Calendar', contacts: 'Contacts', secret: 'Secret', list: LISTS_WORD.one, acces: 'Access' };
-    /* Under its name: its kind (its group is the picker below it, in the menu). */
+    /* Under its name: its kind (its group, a chip before it, in the menu). */
     function chipsOf(chosen) {
         const kind = chosen.target ? (TETHER_CAT[chosen.target.kind] ?? 'acces') : chosen.kind;
         const word = uiSaid(`set-acc-kind-${kind}`, ASSET_WORD[kind] ?? kind);
@@ -5479,15 +5473,15 @@
         const allApprovals = Array.isArray(tether.approvals) ? tether.approvals : [];
         const onDemandes = !assetsAdding && !chosen && !chosenGroup && assetOpen === 'demandes:all';
         $('assets-as').dataset.open = chosen || chosenGroup || assetsAdding || onDemandes ? 'detail' : 'list';
-        const choose = (key) => { placeAssetStep(); if (key !== assetOpen) { groupGiveShow.clear(); clearAssetDetail(); } assetOpen = key; assetsAdding = ''; remoteEditing = false; remember(); void paintAssets(); };
+        const choose = (key) => { placeAssetStep(); if (key !== assetOpen) { groupSaid = null; clearAssetDetail(); } assetOpen = key; assetsAdding = ''; remoteEditing = false; remember(); void paintAssets(); };
         /* THE ONE LIST (kit AssetList), scope all: groups by default once one exists; who has each on its right. */
         const model = KIT.assetListModel({ items: items.map(cardOf), groups: assetGroups, scope: 'all', by: assetsBy, query: assetsQuery, folded: [...groupsFolded], kinds: assetKinds() });
         paintAssetsView(model.view);
         /* Above them all, once something waits: the owner reaches every call from here, not only by opening the
-           right connexion. Then, in the view by group, "+ New group". */
+           right connexion. Then "+ New group", in either view. */
         const pinned = [];
         if (allApprovals.length && !assetsQuery) pinned.push(pinnedCard({ key: 'demandes:all', kind: 'demandes', name: 'Demandes', sub: uiSaid('set-as-waiting', '{n} waiting for you', { n: allApprovals.length }), count: allApprovals.length }, { chosen: onDemandes ? 'demandes:all' : '', onOpen: choose, extra: 'demande-entry' }));
-        if (model.view === 'group') pinned.push(newGroupBar());
+        if (!assetsQuery || groupAdding) pinned.push(newGroupBar());
         paintAssetList($('assets-rows'), model, { chosen: chosen?.key ?? (chosenGroup ? `group:${chosenGroup.id}` : onDemandes ? 'demandes:all' : ''), onOpen: choose, pinned,
             onFold: (id) => { if (groupsFolded.has(id)) groupsFolded.delete(id); else groupsFolded.add(id); keepGroupsFolded(); void paintAssets(); },
             onGroup: (id) => choose(`group:${id}`), noMatch: uiSaid('set-as-no-match', 'Nothing by that name.') });
@@ -5504,7 +5498,7 @@
             if (kind) focusFirst(detail);
             return;
         }
-        if (chosenGroup) { groupDetail(detail, chosenGroup, items, back); return; }
+        if (chosenGroup) { groupPanel(detail, chosenGroup, items, { back, choose }); return; }
         if (onDemandes) {
             const body = [el('p', 'hint', 'Each is a Tether call its agent asked you to allow. Accept, and it runs; refuse, and it is told so.'),
                 allApprovals.length ? demandesList(allApprovals, { withWho: true, after: () => paintAssets() }) : el('p', 'hint', 'Nothing is waiting now.')];

package/web/kit.js

@@ -30,6 +30,8 @@
  *   AccessList     WHO HAS IT (06-11, assets step 3): a row per conversation or device, its RightsPicker; seen from one
  *                  conversation, its row first, then "Also with"; accessModel places the rows.
  *   AssetPanel     ONE ASSET OPENED, the same in the Assets menu and a conversation's tab: head, parts, foot (AssetDelete).
+ *                  A group of assets opens in it too (assets step 5): groupLevels, groupLevel, groupFanOut give a level
+ *                  to every member that takes it (skippedSaid: the others, said once); GroupChip, an asset's group ▾.
  *   AssetPicker    GIVE… (07-11, assets step 4): the one list of what a conversation has not yet, one chosen, its right,
  *                  then « Give »; a new asset below it (NewAsset). assetPickModel places the rows.
  *   RIGHTS         THE ONE TABLE of what an asset can be given at, by its kind and by who gets it (a
@@ -71,10 +73,12 @@
 
     /* A chip: { text, cls?, tone?: 'need' | 'note', icon?: 'room' | 'box', title? }. Empty: nothing. */
     function Chips(list = []) {
-        const shown = list.filter((c) => c && c.text !== undefined && c.text !== '');
+        const shown = list.filter((c) => c && (c.node || (c.text !== undefined && c.text !== '')));
         if (!shown.length) return null;
         const box = node('span', 'kit-chips');
         for (const c of shown) {
+            /* A chip that is a control of the page's (an asset's group ▾): placed as it is, a chip by its look. */
+            if (c.node) { addClass(c.node, 'kit-chip'); box.append(c.node); continue; }
             const chip = node('small', `kit-chip${c.cls ? ` ${c.cls}` : ''}`);
             if (c.tone) chip.dataset.tone = c.tone;
             if (c.icon) { const i = node('span', `kit-chip-ic kit-ic-${c.icon}`); i.setAttribute('aria-hidden', 'true'); chip.append(i); }
@@ -429,19 +433,24 @@
 
     /* AN ASSET'S SIGN, by its kind: the icon set's name (Lucide, icons.js), or '' for one drawn here (a binder).
        A live link (a connexion) takes the sign of what it links (a mailbox, a calendar); `acces`, any other. */
-    const ASSET_ICONS = { folder: 'folder', git: 'git-branch', mailbox: 'mail', agenda: 'calendar', contacts: 'user', secret: 'key-round', list: '', acces: 'link', give: 'plus', send: 'arrow-up', demandes: 'arrow-up', box: 'mic', device: 'smartphone', conversation: 'message-square' };
+    const ASSET_ICONS = { folder: 'folder', git: 'git-branch', mailbox: 'mail', agenda: 'calendar', contacts: 'user', secret: 'key-round', list: '', group: '', acces: 'link', give: 'plus', send: 'arrow-up', demandes: 'arrow-up', box: 'mic', device: 'smartphone', conversation: 'message-square' };
     const ASSET_KINDS = Object.keys(ASSET_ICONS);
-    /* A binder: the set has no such sign, so it is drawn here, in its style (was app.js listIcon). */
-    function listSign() {
+    /* A binder, a group of assets: the set has no such sign, so each is drawn here, in its style (was app.js listIcon;
+       a group, the layers of the Assets menu and the map). */
+    const OWN_SIGNS = {
+        list: ['m3 17 2 2 4-4', 'm3 7 2 2 4-4', 'M13 6h8', 'M13 12h8', 'M13 18h8'],
+        group: ['m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z', 'm22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65', 'm22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'],
+    };
+    function ownSign(kind) {
         const svg = svgNode('svg'); svg.setAttribute('viewBox', '0 0 24 24'); svg.setAttribute('aria-hidden', 'true');
-        for (const d of ['m3 17 2 2 4-4', 'm3 7 2 2 4-4', 'M13 6h8', 'M13 12h8', 'M13 18h8']) { const p = svgNode('path'); p.setAttribute('d', d); svg.append(p); }
+        for (const d of OWN_SIGNS[kind] ?? OWN_SIGNS.list) { const p = svgNode('path'); p.setAttribute('d', d); svg.append(p); }
         return svg;
     }
     function AssetIcon({ kind = 'folder', cls = '' } = {}) {
         const k = kind in ASSET_ICONS ? kind : 'folder';
         const box = node('span', `kit-asset-ic${cls ? ` ${cls}` : ''}`); box.dataset.kind = k; box.setAttribute('aria-hidden', 'true');
         const name = ASSET_ICONS[k];
-        const svg = name ? window.clavariumIcons?.icon?.(name) : listSign();
+        const svg = name ? window.clavariumIcons?.icon?.(name) : ownSign(k);
         if (svg) box.append(svg);
         return box;
     }
@@ -534,8 +543,9 @@
        to choose (a kind not given to that holder): null. */
     /* A CALENDAR, CONTACTS: given live, Read is Watch and Write is Propose (what Attach made of them) -- said on the picker. */
     const RIGHT_SAME = { agenda: { watch: 'read', propose: 'write' }, contacts: { watch: 'read', propose: 'write' } };
-    function RightsPicker({ key = '', kind = '', holder = 'conversation', value, level, label = '', cls = '', onChange = () => {} } = {}) {
-        const levels = rightsFor(key, holder);
+    function RightsPicker({ key = '', kind = '', holder = 'conversation', value, level, levels: given = null, label = '', cls = '', onChange = () => {} } = {}) {
+        /* `levels`: a group's (the levels its members take, groupLevels); else the kind's, from the table. */
+        const levels = given ?? rightsFor(key, holder);
         if (!levels.length) return null;
         const now = level ?? rightOf(key, value, holder);
         const options = levels.map((l) => ({ value: l, label: wordOf(key, l, 'pick') }));
@@ -714,8 +724,8 @@
     }
 
     /* The list drawn from its model. A row is an AssetCard (`rowCls` added: the page's handle on it); `pinned`,
-       rows above every section (what waits: To send, Demandes). `onOpen(key)`; a group's head folds it
-       (`onFold(id)`), its ⚙ opens it (`onGroup(id)`). `empty`: said when there is nothing at all; `noMatch`,
+       rows above every section (what waits: To send, Demandes). `onOpen(key)`; a group's row (05-11, assets step 5):
+       its ▾ folds it (`onFold(id)`), its name and count open it in the asset panel (`onGroup(id)`), who has it on its right. `empty`: said when there is nothing at all; `noMatch`,
        when a search finds nothing. `after(a)`: a node drawn under a row (Give…: the chosen one's right). */
     function AssetList(model, { chosen = '', onOpen = () => {}, onFold = () => {}, onGroup = () => {}, rowCls = '', pinned = [], empty = '', noMatch = '', after = null } = {}) {
         const box = node('div', 'kit-aslist'); box.dataset.view = model.view;
@@ -733,18 +743,18 @@
             if (s.group) {
                 if (s.folded) head.dataset.folded = 'true';
                 const toggle = node('button', 'kit-aslist-fold'); toggle.type = 'button';
-                if (`group:${s.group}` === chosen) toggle.setAttribute('aria-current', 'true');
                 toggle.setAttribute('aria-expanded', String(!s.folded));
+                toggle.setAttribute('aria-label', `${s.folded ? say('set-as-unfold', 'Unfold') : say('set-as-fold', 'Fold')} ${s.title}`);
                 toggle.title = s.folded ? say('set-as-unfold', 'Unfold') : say('set-as-fold', 'Fold');
-                toggle.append(node('span', 'kit-aslist-chev', s.folded ? '▸' : '▾'), node('h3', '', s.title), node('span', 'kit-aslist-n', String(s.items.length)));
+                toggle.append(node('span', 'kit-aslist-chev', s.folded ? '▸' : '▾'));
                 toggle.addEventListener('click', () => onFold(s.group));
-                head.append(toggle);
+                const open = node('button', 'kit-aslist-open'); open.type = 'button'; open.dataset.group = s.group;
+                if (`group:${s.group}` === chosen) open.setAttribute('aria-current', 'true');
+                open.title = say('set-as-group-gear', 'Give, rename, remove');
+                open.append(node('h3', '', s.title), node('span', 'kit-aslist-n', String(s.items.length)));
+                open.addEventListener('click', () => onGroup(s.group));
+                head.append(toggle, open);
                 if (s.holders?.length) head.append(Holders(s.holders));
-                const gear = node('button', 'kit-aslist-gear', '⚙'); gear.type = 'button';
-                gear.setAttribute('aria-label', say('set-as-group-open', 'Settings for {name}').replace('{name}', s.title));
-                gear.title = say('set-as-group-gear', 'Give, rename, remove');
-                gear.addEventListener('click', (e) => { e?.stopPropagation?.(); onGroup(s.group); });
-                head.append(gear);
             } else head.append(node('h3', '', s.title));
             sec.append(head);
             if (!s.folded) {
@@ -818,16 +828,19 @@
 
        accessModel: the rows placed, no page needed (tested alone).
          key      the table's key (rightsKey)       from    'conversation:x' when seen from it ('' : the Assets menu)
-         holders  [{ id: 'conversation:x' | 'device:y', name, sub?, value | level, ready?: false, hue? }]
+         holders  [{ id: 'conversation:x' | 'device:y', name, sub?, value | level, ready?: false, hue?, parts?: [{ name, key, level }] }]
        -> { here, given: [rows], others: [rows], count, said: '' | 'nobody' | 'everyone' | 'noready' } -- a row with its
           `holder` ('conversation' | 'device') and its `level`; a device is never offered (it is shared from its own sheet). */
     const holderOf = (id) => (String(id ?? '').startsWith('device:') ? 'device' : 'conversation');
-    function accessModel({ key = '', holders = [], from = '' } = {}) {
+    /* `levels`: a group's, by holder ({ conversation: [...], device: [...] }, groupLevels); its row's level may be 'some'
+       (part of its members, or not all at one level: no level pressed). */
+    function accessModel({ key = '', holders = [], from = '', levels = null } = {}) {
+        const levelsOf = (holder) => levels?.[holder] ?? rightsFor(key, holder);
         const rows = (holders ?? []).filter((h) => h && h.id).map((h) => {
             const holder = holderOf(h.id);
             const level = h.level ?? rightOf(key, h.value, holder);
-            return { ...h, holder, level: level in RIGHT_LEVELS ? level : 'none' };
-        }).filter((r) => rightsFor(key, r.holder).length > 0);
+            return { ...h, holder, level: level in RIGHT_LEVELS || (levels && level === 'some') ? level : 'none' };
+        }).filter((r) => levelsOf(r.holder).length > 0);
         const here = from ? rows.find((r) => r.id === from) ?? null : null;
         const rest = rows.filter((r) => r !== here);
         const given = [...rest.filter((r) => r.holder === 'conversation' && r.level !== 'none'), ...rest.filter((r) => r.holder === 'device' && r.level !== 'none')];
@@ -841,7 +854,7 @@
     /* The list drawn from its model. `onChange(row, level, stored)` sets one right (the picker waits on it); `kind`, the
        asset's own kind (a calendar's levels say what they mean); `actions`, more gestures under it (Share with a device…).
        Its old handles kept for the pages' tests: .as-chapter .as-add, .as-users, .as-picker, .given-row[data-conversation]. */
-    function AccessList(model, { key = '', kind = '', name = '', onChange = () => {}, actions = [] } = {}) {
+    function AccessList(model, { key = '', kind = '', name = '', levels = null, onChange = () => {}, actions = [] } = {}) {
         const box = node('section', 'kit-access');
         const head = node('div', 'as-chapter kit-access-head');
         head.append(node('h3', '', say('set-acc-title', 'Who has it')));
@@ -861,9 +874,15 @@
             const nm = node('span', 'kit-access-name', r.name);
             const sub = r.sub ?? (r.holder === 'device' ? say('set-acc-device', 'Device') : '');
             if (sub) nm.append(node('small', '', sub));
+            /* A group's row given in part: what it has of it, each member with its right (nothing hidden behind « 2 of 3 »). */
+            if (r.parts?.length) {
+                const has = node('span', 'kit-access-parts');
+                for (const p of r.parts) { const it = node('span', 'kit-access-part'); it.append(node('span', '', p.name), RightsBadge({ key: p.key, level: p.level })); has.append(it); }
+                nm.append(has);
+            }
             who.append(nm);
             line.append(who);
-            const pick = RightsPicker({ key, kind, holder: r.holder, level: r.level, label: say('set-acc-what', 'What {who} may do with {name}').replace('{who}', r.name).replace('{name}', name),
+            const pick = RightsPicker({ key, kind, holder: r.holder, level: r.level, levels: levels?.[r.holder] ?? null, label: say('set-acc-what', 'What {who} may do with {name}').replace('{who}', r.name).replace('{name}', name),
                 onChange: (level, stored) => onChange(r, level, stored) });
             if (pick) line.append(pick);
             return line;
@@ -887,6 +906,107 @@
         return box;
     }
 
+    /* A GROUP OF ASSETS (05-11, assets step 5): only a label its members carry (server groups.mjs); a right stays stored
+       asset by asset. « Give the group » is a shortcut: the level chosen for a conversation or a device is given to
+       every member that takes it, « None » takes it from every member; a member whose kind cannot take it is skipped,
+       and said once. A calendar's, contacts' Read is Watch, Write is Propose (RIGHT_SAME, as their own picker says).
+       Members: the page's items (rightsKey reads them); `current`: { [member key]: level } for one holder. */
+    const sameOf = (m) => (rightsKey(m) === 'connexion' ? RIGHT_SAME[m.kind] ?? null : null);
+    /* What a member gets for a group's level: its own level, or what it means for its kind; null: it cannot take it. */
+    function memberLevel(m, level, holder = 'conversation') {
+        const own = rightsFor(rightsKey(m), holder);
+        if (!own.length) return null;
+        if (own.includes(level)) return level;
+        const same = sameOf(m);
+        const as = same ? Object.keys(same).find((k) => same[k] === level) : null;
+        return as && own.includes(as) ? as : null;
+    }
+    /* The levels a group offers a holder: every level one of its members takes, in the table's order, « None » first.
+       A calendar's Watch, Propose are not offered again beside Read, Write (the same for it). */
+    function groupLevels(members = [], holder = 'conversation') {
+        const own = new Set((members ?? []).flatMap((m) => rightsFor(rightsKey(m), holder)));
+        const plain = new Set((members ?? []).filter((m) => !sameOf(m)).flatMap((m) => rightsFor(rightsKey(m), holder)));
+        const said = (l) => (members ?? []).some((m) => sameOf(m)?.[l] && plain.has(sameOf(m)[l]));
+        return own.size ? Object.keys(RIGHT_LEVELS).filter((l) => own.has(l) && (plain.has(l) || !said(l))) : [];
+    }
+    /* A holder's level of the group: the one all its members have (a calendar's Watch read as Read when the group offers
+       Read), 'none' when none has any, else 'some'; `has` of `of` its members that it can take have something. */
+    function groupLevel(members = [], current = {}, holder = 'conversation') {
+        const offered = groupLevels(members, holder);
+        const can = (members ?? []).filter((m) => rightsFor(rightsKey(m), holder).length);
+        const lv = can.map((m) => { const l = current[m.key] ?? 'none'; const as = sameOf(m)?.[l]; return as && offered.includes(as) ? as : l; });
+        const has = lv.filter((l) => l !== 'none').length;
+        const level = !has ? 'none' : has === can.length && new Set(lv).size === 1 ? lv[0] : 'some';
+        return { level, has, of: can.length };
+    }
+    /* THE FAN-OUT: one level for one holder -> each member's own grant (`give`: { m, key, level, stored }, only those it
+       changes), and those skipped (`skip`, by kind: { kind, n, levels }: what that kind takes). */
+    function groupFanOut({ members = [], level = 'none', holder = 'conversation', current = {} } = {}) {
+        const give = []; const skipped = [];
+        for (const m of members ?? []) {
+            const key = rightsKey(m);
+            const l = level === 'none' ? (rightsFor(key, holder).length ? 'none' : null) : memberLevel(m, level, holder);
+            if (!l) { if (level !== 'none') skipped.push(m); continue; }
+            if ((current[m.key] ?? 'none') === l) continue;
+            give.push({ m, key: m.key, level: l, stored: storedOf(key, l, holder) });
+        }
+        const skip = [];
+        for (const m of skipped) {
+            const k = m.kind ?? rightsKey(m);
+            const was = skip.find((x) => x.kind === k);
+            if (was) was.n++; else skip.push({ kind: k, n: 1, levels: rightsFor(rightsKey(m), holder).filter((l) => l !== 'none') });
+        }
+        return { give, skip };
+    }
+    /* Said once, under the group's « Who has it »: « 2 skipped: Secret, Use only ». */
+    const KIND_WORDS = { folder: 'Folder', git: 'Repository', mailbox: 'Mailbox', agenda: 'Calendar', contacts: 'Contacts', secret: 'Secret', list: 'Binder', acces: 'Access' };
+    function skippedSaid(skip = []) {
+        const n = skip.reduce((a, x) => a + x.n, 0);
+        if (!n) return '';
+        const why = skip.map((x) => {
+            const kind = say(`set-acc-kind-${x.kind}`, KIND_WORDS[x.kind] ?? x.kind);
+            return x.levels.length ? say('set-group-only', '{kind}, {levels} only').replace('{kind}', kind).replace('{levels}', x.levels.map((l) => rightWord(l, 'pick')).join(' / '))
+                : say('set-group-no-device', '{kind}, not for a device').replace('{kind}', kind);
+        }).join('; ');
+        return say(n === 1 ? 'set-group-skipped-1' : 'set-group-skipped-n', n === 1 ? '1 skipped: {why}' : '{n} skipped: {why}').replace('{n}', String(n)).replace('{why}', why);
+    }
+
+    /* AN ASSET'S GROUP, as a chip on its head (« Home ▾ »): no group, a group, or « New group… » -- made in place, then
+       the asset placed in it. `onPlace(id | null)`; `onMake(label)` (a promise; false or a throw: the name stays to fix). */
+    function GroupChip({ groups = [], value = '', name = '', onPlace = () => {}, onMake = () => {} } = {}) {
+        const box = node('span', 'kit-groupchip');
+        const sel = node('select', 'kit-groupchip-sel');
+        sel.setAttribute('aria-label', say('set-group-of', 'Group of {name}').replace('{name}', name));
+        const opt = (v, text) => { const o = node('option', '', text); o.value = v; sel.append(o); return o; };
+        opt('', say('set-as-no-group', 'No group'));
+        for (const g of groups ?? []) opt(g.id, g.label);
+        opt('+new', say('set-group-new-dots', 'New group…'));
+        const has = (groups ?? []).some((g) => g.id === value);
+        sel.value = has ? value : '';
+        for (const o of sel.children) if (o.value === sel.value) o.selected = true;
+        const form = node('form', 'kit-groupchip-form'); form.hidden = true; form.autocomplete = 'off';
+        const input = node('input'); input.maxLength = 40; input.placeholder = say('set-group-name', 'Group name'); input.setAttribute('aria-label', input.placeholder);
+        const add = node('button', 'primary', say('set-group-add', 'Add')); add.type = 'submit';
+        const cancel = node('button', '', say('set-group-cancel', 'Cancel')); cancel.type = 'button';
+        form.append(input, add, cancel);
+        const back = () => { form.hidden = true; sel.hidden = false; sel.value = has ? value : ''; };
+        cancel.addEventListener('click', back);
+        sel.addEventListener('change', async () => {
+            if (sel.value === '+new') { sel.hidden = true; form.hidden = false; input.focus?.(); return; }
+            sel.disabled = true;
+            try { await onPlace(sel.value || null); } finally { sel.disabled = false; }
+        });
+        form.addEventListener('submit', async (e) => {
+            e?.preventDefault?.();
+            const label = String(input.value ?? '').trim();
+            if (!label) { input.focus?.(); return; }
+            add.disabled = true;
+            try { if ((await onMake(label)) === false) add.disabled = false; } catch { add.disabled = false; }
+        });
+        box.append(sel, form);
+        return box;
+    }
+
     /* ONE ASSET OPENED (06-11, assets step 3): the same panel in the Assets menu and in a conversation's tab. Its head (an
        AssetCard head: sign, name, line, chips) under "‹ Assets" (a phone's way back), then its parts in order -- what it is,
        who has it (AccessList), what is in it (files, branches, cards) -- then its foot (rename, delete…).
@@ -944,6 +1064,7 @@
     window.clavariumKit = {
         collectModel,
         AssetIcon, AssetCard, Holders, MemberStack, memberStackModel, roomPatch, RightsBadge, RightsPicker, AssetList, assetListModel, AccessList, accessModel, AssetPanel, AssetDelete, AssetPicker, assetPickModel, RIGHT_SAME,
+        memberLevel, groupLevels, groupLevel, groupFanOut, skippedSaid, GroupChip,
         ASSET_ICONS, ASSET_KINDS, RIGHTS, RIGHT_LEVELS, MCP_WORDS, rightsKey, rightsFor, rightOf, storedOf, lightest, rightWord,
         shareSlices, ShareDonut, ShareKey,
         STATES, STATE_WORDS, stateOf, hueOf, initialOf, IDLE_MS, idleFor, idleWords, tidyList,

package/web/style.css

@@ -1168,37 +1168,29 @@ header .ic, #folders .ic { width: 18px; height: 18px; fill: none; stroke: curren
 .as-view { display: flex; margin-bottom: 4px; }
 .as-view .kit-seg { width: 100%; }
 .as-view .kit-seg > button { flex: 1 1 0; font-size: .8125rem; padding: 7px 8px; }
-/* The by-group view: make-a-group bar, its inline editor. */
+/* "+ New group" above the list (either view), its name in place; a group opened (assets step 5). */
 .as-group-new { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; }
-.as-group-new .hint { color: var(--ink2); }
+.as-group-add { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; padding: 0; min-height: 0 !important; font: inherit; }
+.as-group-add .as-add { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
+.as-group-add:hover .as-add { border-color: var(--brass); }
+.as-group-add .hint { color: var(--ink2); }
 .as-group-members { display: flex; flex-direction: column; gap: 2px; }
-/* Give the group: a block per conversation, a row per asset at its own level. */
-.as-give { display: flex; flex-direction: column; gap: 12px; }
-.as-give-conv { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
-.as-give-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
-.as-give-acts { display: flex; gap: 6px; }
-.as-mini { font-size: .75rem; padding: 3px 8px; border-radius: 7px; background: transparent; color: var(--ink2); }
-.as-mini:hover { border-color: var(--line); color: var(--ink); }
-.as-give-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; }
-.as-give-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
-.as-give-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.as-give-row .levels button { padding: 4px 9px; font-size: .75rem; }
-.as-add-conv { align-self: flex-start; }
-.as-pick { display: flex; flex-wrap: wrap; gap: 6px; }
-.as-pick-conv { font-size: .8125rem; padding: 5px 10px; border-radius: 8px; }
-.as-group-rename { display: flex; gap: 8px; align-items: center; }
-.as-group-rename input { flex: 1 1 8rem; min-width: 0; padding: 7px 10px; border-radius: 8px; }
-.as-group-remove { margin-top: 6px; }
-.as-remove-link { background: transparent; border: 0; color: var(--danger); text-decoration: underline; padding: 2px 0; font: inherit; font-size: .8125rem; }
-.as-group-remove .hint { margin: 2px 0 0; }
+.as-group-note, .as-group-skipped { margin: 4px 0 0; font-size: .8125rem; }
+.as-group-skipped { color: var(--brass-ink); }
+.as-group-rename { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1 1 100%; }
+.as-group-rename input { flex: 1 1 8rem; min-width: 0; padding: 6px 9px; border-radius: 8px; }
 .as-group-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
 .as-group-form input { flex: 1 1 8rem; min-width: 0; padding: 6px 9px; border-radius: 8px; }
 .as-group-form button { font-size: .8125rem; }
 .as-danger, button.as-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
-/* The group selector in an asset's detail. */
-.as-group-of { display: flex; align-items: center; gap: 10px; }
-.as-group-of-label { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
-.as-group-of select { padding: 6px 9px; border-radius: 8px; }
+/* An asset's group, a chip on its head (kit GroupChip): « Home ▾ », or « New group… » made in place. */
+.kit-groupchip.kit-chip { padding: 0; border: 0; overflow: visible; }
+.kit-groupchip-sel { font: inherit; font-size: .6875rem; line-height: 1.6; color: var(--ink2); background-color: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; min-height: 0 !important; max-width: 14rem; cursor: pointer; }
+.kit-groupchip-sel:hover { border-color: var(--brass); color: var(--ink); }
+.kit-groupchip-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
+.kit-groupchip-form[hidden] { display: none; }
+.kit-groupchip-form input { width: 10rem; min-width: 0; padding: 3px 8px; border-radius: 8px; font-size: .8125rem; }
+.kit-groupchip-form button { font-size: .75rem; padding: 3px 9px; }
 .as-chapter { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
 .as-add { width: 30px; height: 30px; min-height: 0 !important; min-width: 0 !important; padding: 0; border-radius: 50%; font-size: 1rem; line-height: 1; color: var(--brass-ink); background: transparent; flex: 0 0 auto; }
 .as-add:hover { border-color: var(--brass); }
@@ -2819,6 +2811,7 @@ button.kit-switch[aria-checked="true"]::after { left: 18px; background: var(--ok
 .kit-asset-ic[data-kind="agenda"], .kit-asset-ic[data-kind="contacts"] { color: color-mix(in srgb, var(--wait) 55%, var(--danger)); }
 .kit-asset-ic[data-kind="secret"], .kit-asset-ic[data-kind="acces"], .kit-asset-ic[data-kind="device"], .kit-asset-ic[data-kind="conversation"] { color: var(--ink2); }
 .kit-asset-ic[data-kind="list"] { color: var(--ok); }
+.kit-asset-ic[data-kind="group"] { color: var(--brass-ink); }
 .kit-asset { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; color: var(--ink); }
 .kit-asset-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
 .kit-asset-name { min-width: 0; margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -2876,14 +2869,14 @@ button.kit-switch[aria-checked="true"]::after { left: 18px; background: var(--ok
 .kit-aslist-sec { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; }
 .kit-aslist-head { display: flex; align-items: center; gap: 6px; min-height: 30px; }
 .kit-aslist-head h3 { margin: 0; padding: 4px 6px; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.kit-aslist-fold { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; justify-content: flex-start; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 2px 4px; min-height: 0 !important; }
+/* A group's row: ▾ folds it; its name and count open it (the asset panel); who has it on its right. */
+.kit-aslist-fold { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 0; min-width: 0 !important; min-height: 0 !important; }
 .kit-aslist-fold:hover { border-color: var(--line); }
-.kit-aslist-fold[aria-current="true"] { background: var(--panel); border-color: var(--line); }
+.kit-aslist-open { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; justify-content: flex-start; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 2px 4px; min-height: 30px !important; }
+.kit-aslist-open:hover { border-color: var(--line); }
+.kit-aslist-open[aria-current="true"] { background: var(--panel); border-color: var(--line); }
 .kit-aslist-chev { flex: none; width: 16px; text-align: center; color: var(--ink2); font-size: .75rem; }
 .kit-aslist-n { flex: none; font-size: .6875rem; font-weight: 600; padding: 0 7px; border-radius: 999px; background: var(--button); color: var(--ink); }
-.kit-aslist-gear { flex: none; width: 30px; height: 30px; min-width: 0 !important; min-height: 0 !important; padding: 0; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--ink2); font-size: 1rem; }
-.kit-aslist-gear:hover { border-color: var(--line); color: var(--ink); }
-@media (hover: hover) { .kit-aslist-gear { opacity: 0; } .kit-aslist-head:hover .kit-aslist-gear, .kit-aslist-gear:focus-visible, .kit-aslist-fold[aria-current="true"] ~ .kit-aslist-gear { opacity: 1; } }
 .kit-aslist-none, .kit-aslist-said { margin: 2px 8px 4px; font-size: .8125rem; }
 /* A line that asks for you keeps its shade: soon (warn), past or failing (bad). */
 .kit-asset-sub[data-tone="warn"] > .state-dot { background: var(--warn); }
@@ -2903,6 +2896,8 @@ button.kit-switch[aria-checked="true"]::after { left: 18px; background: var(--ok
 .kit-access-who > .kit-av { --kc-av: 26px; border-radius: 50%; }
 .kit-access-name { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
 .kit-access-name > small { color: var(--ink2); font-size: .75rem; }
+.kit-access-parts { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; font-size: .75rem; color: var(--ink2); }
+.kit-access-part { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
 .as-users.kit-access-here { border-color: color-mix(in srgb, var(--brass) 45%, var(--line)); background: color-mix(in srgb, var(--brass) 7%, var(--bar)); }
 .as-users > .kit-access-also { margin: 0; padding: 10px 16px 4px; border-top: 0; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
 .as-users > .kit-access-also + .given-row { border-top: 0; }