@andrian.yablonskyy/thub-coordinator 1.1.12 → 1.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@andrian.yablonskyy/thub-coordinator",
-  "version": "1.1.12",
+  "version": "1.1.13",
   "description": "TestHub Coordinator — job queue, resource registry, scheduler, heartbeat monitor, log/artifact store and web dashboard",
   "main": "src/server.js",
   "engines": {
@@ -19,7 +19,7 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@andrian.yablonskyy/thub-common": "^1.1.2",
+    "@andrian.yablonskyy/thub-common": "^1.1.3",
     "better-sqlite3": "^12.4.1",
     "express": "^5.1.0",
     "express-session": "^1.18.2",

package/public/css/thub.css

@@ -126,6 +126,78 @@
   pointer-events: auto;
 }
 
+/* Chip picker (runner card → Groups; public/js/tag-picker.js): chips and
+   a search box in one field, the matches in a dropdown under it. */
+.thub-tags {
+  position: relative;
+}
+
+.thub-tags-box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  min-height: calc(1.5em + 0.75rem + 2px);
+  height: auto;
+  cursor: text;
+}
+
+fieldset:disabled .thub-tags-box {
+  cursor: default;
+  background-color: var(--bs-secondary-bg);
+}
+
+.thub-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  max-width: 100%;
+  padding: 0.125rem 0.25rem 0.125rem 0.5rem;
+  border-radius: var(--bs-border-radius-sm);
+  background-color: var(--bs-secondary-bg);
+  border: 1px solid var(--bs-border-color);
+  font-size: 0.875rem;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+
+.thub-tag-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--bs-border-radius-sm);
+  background: none;
+  color: var(--bs-secondary-color);
+}
+
+.thub-tag-remove:hover,
+.thub-tag-remove:focus-visible {
+  background-color: var(--bs-tertiary-bg);
+  color: var(--bs-body-color);
+}
+
+.thub-tags-input {
+  flex: 1 1 8rem;
+  min-width: 8rem;
+  border: 0;
+  outline: 0;
+  padding: 0.125rem 0;
+  background: transparent;
+  color: inherit;
+}
+
+.thub-tags-menu {
+  width: 100%;
+  max-height: 15rem;
+  overflow-y: auto;
+  top: 100%;
+  left: 0;
+}
+
 /* USB devices: the lsusb output takes the rest of the modal's
    height — what the tallest other tab sets, at least 12rem — and scrolls in
    it. Its 0 basis keeps it from making the modal taller. */

package/public/js/tag-picker.js

@@ -0,0 +1,200 @@
+/**
+ * @file        packages/coordinator/public/js/tag-picker.js
+ * @description Dashboard: a chip picker (the runner card's Groups tab) — chosen items as removable chips,
+ *              a search box that suggests the rest; each chip carries its own hidden form input
+ *
+ * @author      Andrian Yablonskyy
+ * @copyright   Copyright (c) 2026 Andrian Yablonskyy. All rights reserved.
+ *
+ * This file is part of TestHub and is proprietary and confidential.
+ * Unauthorized copying, modification, distribution, or use of this file,
+ * via any medium, is strictly prohibited without prior written permission
+ * from AdSystem.PRO.
+ */
+
+'use strict';
+
+// Markup (views/mixins/client-config.pug, groupsPane):
+//   [data-tag-picker data-tag-name data-options='[{value, label, hint}]']
+//     [data-tag-box] > span[data-tag=value] (label, hidden input, [data-tag-remove]) … input[data-tag-input]
+//     ul[data-tag-menu]
+// Typing filters the options not chosen yet (by name or comment); ↑/↓ move,
+// Enter or a click adds, Backspace in an empty box removes the last chip,
+// Esc closes the list (not the modal around it).
+(function (){
+  const MAX_SHOWN = 50,
+
+    pickerOf = (el) => el.closest('[data-tag-picker]'),
+    optionsOf = (picker) => {
+      try {
+        return JSON.parse(picker.dataset.options || '[]');
+      }
+      catch {
+        return [];
+      }
+    },
+    chosen = (picker) => new Set([...picker.querySelectorAll('[data-tag]')].map((t) => t.dataset.tag)),
+    menuOf = (picker) => picker.querySelector('[data-tag-menu]'),
+    inputOf = (picker) => picker.querySelector('[data-tag-input]');
+
+  function closeMenu(picker){
+    const menu = menuOf(picker);
+    menu.classList.remove('show');
+    menu.replaceChildren();
+    inputOf(picker)?.setAttribute('aria-expanded', 'false');
+  }
+
+  function openMenu(picker){
+    const input = inputOf(picker),
+      menu = menuOf(picker),
+      q = input.value.trim().toLowerCase(),
+      taken = chosen(picker),
+      matches = optionsOf(picker)
+        .filter((o) => !taken.has(o.value) && (!q || o.label.toLowerCase().includes(q) || o.hint.toLowerCase().includes(q)))
+        .slice(0, MAX_SHOWN);
+    menu.replaceChildren(...(matches.length ? matches.map((o, i) => {
+      const li = document.createElement('li'),
+        item = document.createElement('button');
+      item.type = 'button';
+      item.className = `dropdown-item${i === 0 ? ' active' : ''}`;
+      item.setAttribute('role', 'option');
+      item.dataset.tagOption = o.value;
+      item.tabIndex = -1;
+      item.append(document.createTextNode(o.label));
+      if (o.hint){
+        const hint = document.createElement('span');
+        hint.className = 'small text-body-secondary ms-2';
+        hint.textContent = o.hint;
+        item.append(hint);
+      }
+      li.append(item);
+      return li;
+    }) : [Object.assign(document.createElement('li'), {
+      className: 'dropdown-item-text small text-body-secondary',
+      textContent: optionsOf(picker).length === taken.size ? 'All groups are added' : 'No matching group'
+    })]));
+    menu.classList.add('show');
+    input.setAttribute('aria-expanded', 'true');
+  }
+
+  function addTag(picker, value){
+    const option = optionsOf(picker).find((o) => o.value === value);
+    if (!option || chosen(picker).has(value)){
+      return;
+    }
+    const chip = document.createElement('span'),
+      label = document.createElement('span'),
+      hidden = document.createElement('input'),
+      remove = document.createElement('button');
+    chip.className = 'thub-tag';
+    chip.dataset.tag = value;
+    label.textContent = option.label;
+    hidden.type = 'hidden';
+    hidden.name = picker.dataset.tagName;
+    hidden.value = value;
+    remove.type = 'button';
+    remove.className = 'thub-tag-remove';
+    remove.dataset.tagRemove = '';
+    remove.setAttribute('aria-label', `Remove ${option.label}`);
+    remove.innerHTML = '<i class="bi bi-x"></i>';
+    chip.append(label, hidden, remove);
+    const input = inputOf(picker);
+    input.before(chip);
+    input.value = '';
+    picker.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+
+  function removeTag(chip){
+    const picker = pickerOf(chip);
+    chip.remove();
+    picker.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+
+  const editable = (picker) => picker && inputOf(picker) && !picker.closest('fieldset')?.disabled;
+
+  document.addEventListener('click', (e) => {
+    const remove = e.target.closest('[data-tag-remove]'),
+      option = e.target.closest('[data-tag-option]'),
+      box = e.target.closest('[data-tag-box]'),
+      picker = pickerOf(e.target);
+    if (remove && editable(picker)){
+      removeTag(remove.closest('[data-tag]'));
+      // Focus back to the box, without opening the list over what's below.
+      picker.dataset.quiet = '1';
+      inputOf(picker).focus();
+      closeMenu(picker);
+    }
+    else if (option && editable(picker)){
+      addTag(picker, option.dataset.tagOption);
+      openMenu(picker);
+      inputOf(picker).focus();
+    }
+    else if (box && editable(picker)){
+      inputOf(picker).focus();
+    }
+    // A click anywhere else closes every open list.
+    document.querySelectorAll('[data-tag-picker]').forEach((p) => {
+      if (p !== picker){
+        closeMenu(p);
+      }
+    });
+  });
+
+  document.addEventListener('focusin', (e) => {
+    const picker = e.target.matches('[data-tag-input]') ? pickerOf(e.target) : null;
+    if (picker?.dataset.quiet){
+      delete picker.dataset.quiet;
+    }
+    else if (picker && editable(picker)){
+      openMenu(picker);
+    }
+  });
+
+  document.addEventListener('input', (e) => {
+    if (e.target.matches('[data-tag-input]')){
+      openMenu(pickerOf(e.target));
+    }
+  });
+
+  document.addEventListener('keydown', (e) => {
+    if (!e.target.matches('[data-tag-input]')){
+      return;
+    }
+    const picker = pickerOf(e.target),
+      menu = menuOf(picker),
+      items = [...menu.querySelectorAll('[data-tag-option]')],
+      at = items.findIndex((i) => i.classList.contains('active'));
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp'){
+      e.preventDefault();
+      if (!menu.classList.contains('show')){
+        return openMenu(picker);
+      }
+      if (items.length){
+        const next = (at + (e.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;
+        items.forEach((i, n) => i.classList.toggle('active', n === next));
+        items[next].scrollIntoView({ block: 'nearest' });
+      }
+    }
+    else if (e.key === 'Enter'){
+      e.preventDefault(); // never submits the form from here
+      if (at >= 0){
+        addTag(picker, items[at].dataset.tagOption);
+        openMenu(picker);
+      }
+    }
+    else if (e.key === 'Backspace' && !e.target.value){
+      const chips = picker.querySelectorAll('[data-tag]');
+      if (chips.length){
+        removeTag(chips[chips.length - 1]);
+        openMenu(picker);
+      }
+    }
+    else if (e.key === 'Escape' && menu.classList.contains('show')){
+      e.stopPropagation(); // the list closes, the modal stays
+      closeMenu(picker);
+    }
+    else if (e.key === 'Tab'){
+      closeMenu(picker);
+    }
+  }, true); // capture: ahead of the modal's own Esc handling
+})();

package/src/dev/virtual.js

@@ -100,8 +100,6 @@ const DEV_AGENT_NAME = 'virtual-agent',
     target: { type, labels: ['virtual'] },
     command: './ci/run.sh',
     downloads: [{ url: 'https://artifactory.example.com/fw-local/app/1.4.0-dev/app.bin' }],
-    ...(type === 'sw' ? { image: 'alpine:3.20' } : {}),
-    git: { url: 'https://github.com/yourorg/firmware-tests.git', ref: 'main', depth: 1 },
     ...(user ? { user } : {}),
     meta: { repo: 'yourorg/firmware', branch: 'main', virtual: true },
     ...extra
@@ -313,7 +311,7 @@ function startDevMode(services, config, env = process.env){
     '*** DEV MODE (DEV_MODE=1): virtual Clients virtual-sw-01 / virtual-hw-01 are running in-process' +
       `${seeded ? `, and ${seeded} past jobs + 3 live ones were seeded` : ''}.\n` +
       `*** Virtual agent token: ${DEV_AGENT_TOKEN}\n` +
-      `***   e.g. thub --url ${config.publicUrl} --token ${DEV_AGENT_TOKEN} run --type sw --docker-image alpine --command 'uname -a'`
+      `***   e.g. thub --url ${config.publicUrl} --token ${DEV_AGENT_TOKEN} run --type sw --command 'uname -a'`
   );
   return virtual;
 }

package/src/services/jobs.js

@@ -106,7 +106,7 @@ function createJobsService(db, { bus, events, registry, config }){
     // anyone who can see the list guess a secret one character at a time.
     SEARCH_SQL = [
       'jobs.id', 'jobs.state', 'jobs.source', 'jobs.message', 'r.name', 'jobs.resource_name', 'a.name',
-      ...['user', 'command', 'suite', 'image', 'git.url', 'git.ref', 'target.group', 'target.labels', 'downloads', 'args', 'meta']
+      ...['user', 'command', 'suite', 'target.group', 'target.labels', 'downloads', 'args', 'meta']
         .map((path) => `json_extract(jobs.spec, '$.${path}')`)
     ];
 
@@ -142,6 +142,12 @@ function createJobsService(db, { bus, events, registry, config }){
     return { rows: rows.map(rowToJob), pagination };
   }
 
+  // A job's user: the key's user's username, else the CI token's name.
+  function agentOwner(agentId){
+    const row = db.prepare('SELECT a.name, u.username FROM agents a LEFT JOIN users u ON u.id = a.user_id WHERE a.id = ?').get(agentId);
+    return row ? row.username || row.name : null;
+  }
+
   // The group an agent's jobs run in: its user's, or the CI token's own.
   function agentGroup(agentId){
     return db.prepare(
@@ -173,6 +179,13 @@ function createJobsService(db, { bus, events, registry, config }){
       throw Object.assign(new Error(`Invalid label: ${badLabels.join(', ')} — ${LABEL_RULE}`), { status: 400 });
     }
     spec.source = source;
+    // Who submitted it, from the key itself (never the Agent's say): the
+    // user's username, or the CI token's name.
+    const owner = agentOwner(agentId);
+    delete spec.user;
+    if (owner){
+      spec.user = owner;
+    }
     // The group is the agent's, set on the dashboard (§13.1) — whatever an
     // older Agent sent as `target.group` is replaced.
     const group = agentGroup(agentId);

package/test/groups-tab.test.js

@@ -66,9 +66,11 @@ test('Groups tab: in effect at once, sent to the Client as its next config revis
   assert.deepEqual(pending.file.groups.sort(), [nightly.id, pr.id].sort()); // the Client writes it to its file
   assert.match(await page(), /Groups of lab-sw-01 saved: 2 group\(s\) — in effect now/);
 
-  // The tab, with every group as a checkbox; no Groups line on Details any more.
+  // The tab: its groups as chips (each with its hidden input and ✕), the rest searchable; no Groups line on Details any more.
   const html = await page();
-  assert.match(html, new RegExp(`name="groups" value="${pr.id}" checked`));
+  assert.match(html, new RegExp(`<span class="thub-tag" data-tag="${pr.id}"><span>pr-pool</span><input type="hidden" name="groups" value="${pr.id}"`));
+  assert.match(html, /data-tag-input[^>]*placeholder="Add a group…"/);
+  assert.match(html, /data-options="[^"]*pull requests/); // searchable by name or comment
   assert.match(html, /data-config-tab="groups"/);
   assert.match(html, /not written to the Client yet/);
   assert.doesNotMatch(html, /<dt class="col-sm-4">Groups<\/dt>/);

package/test/list-prefs.test.js

@@ -65,19 +65,22 @@ test('jobs.page sorts and pages in SQL, with empty values last', () => {
     bus = new EventEmitter(),
     events = createEventsService(db),
     registry = createRegistryService(db, { bus, events }),
-    { agent } = createAgentsService(db, { events }).create({ name: 'ci', kind: 'ci' }),
+    agents = createAgentsService(db, { events }),
     config = { scheduler: { maxQueuedPerAgent: 100 }, jobs: { defaultTimeoutSec: 60, maxTimeoutSec: 60 } },
     jobs = createJobsService(db, { bus, events, registry, artifacts: {}, config });
   registry.registerAuto({ clientId: 'c', name: 'lab', type: 'sw', labels: [] });
 
-  const ids = ['carol', 'alice', null, 'bob'].map((user) =>
+  // A job's user is its key's (here: the CI token's name); 'old' stands for
+  // a job from before that, which has none.
+  const ids = ['carol', 'alice', 'old', 'bob'].map((name) =>
       jobs.create({
-        agentId: agent.id,
+        agentId: agents.create({ name, kind: 'ci' }).agent.id,
         source: 'cli',
-        spec: { target: { type: 'sw' }, command: './run.sh', ...(user ? { user } : {}) }
+        spec: { target: { type: 'sw' }, command: './run.sh' }
       }).id),
 
     byUser = (dir) => jobs.page({ sort: 'user', dir, size: 'all' }).rows.map((j) => j.spec.user ?? null);
+  db.prepare('UPDATE jobs SET spec = json_remove(spec, \'$.user\') WHERE id = ?').run(ids[2]);
   assert.deepEqual(byUser('asc'), ['alice', 'bob', 'carol', null]);
   assert.deepEqual(byUser('desc'), ['carol', 'bob', 'alice', null]);
 

package/test/scheduler.test.js

@@ -532,12 +532,16 @@ test('a removed Client re-registers as a fresh resource under the same name', ()
   assert.equal(again.name, 'lab-back');
 });
 
-test('a job-supplied Docker image runs on any matching SW Client (no opt-in any more)', () => {
+test('an SW job is just its command: git / --docker-image from an older Agent are refused, saying what to do', () => {
   const { registry, agents, jobs, scheduler } = buildTestServices(),
     { agent } = agents.create({ name: 'dev', kind: 'cli' }),
     r = registerResource(registry, { name: 'sw-any', type: 'sw' });
   registry.heartbeat(r.id, { state: 'idle' });
-  const job = jobs.create({ agentId: agent.id, source: 'cli', spec: { target: { type: 'sw', labels: [] }, image: 'alpine', command: './run.sh' } });
+  for (const extra of [{ image: 'alpine' }, { git: { url: 'https://git.lab/t.git' } }]){
+    assert.throws(() => jobs.create({ agentId: agent.id, source: 'cli', spec: { target: { type: 'sw', labels: [] }, command: './run.sh', ...extra } }),
+      /no longer supported — clone the repository or run docker in --command, passing credentials with --env/);
+  }
+  const job = jobs.create({ agentId: agent.id, source: 'cli', spec: { target: { type: 'sw', labels: [] }, command: 'docker run --rm alpine ./run.sh' } });
   scheduler.runPass();
   assert.equal(jobs.get(job.id).resource_id, r.id);
   // An older Client still reporting its sw settings: they're dropped.

package/test/search.test.js

@@ -65,8 +65,7 @@ test('jobs.page searches ids, users, resources, agents and spec fields — never
       source: 'ci',
       spec: {
         target: { type: 'sw' },
-        command: './ci/smoke.sh',
-        git: { url: 'git@github.com:yourorg/firmware-tests.git', ref: 'release/1.4' },
+        command: 'git clone --branch release/1.4 git@github.com:yourorg/firmware-tests.git . && ./ci/smoke.sh',
         meta: { ciJobId: '9165432107' },
         env: { API_TOKEN: 'hunter2-secret' }
       }
@@ -82,7 +81,7 @@ test('jobs.page searches ids, users, resources, agents and spec fields — never
   assert.deepEqual(ids(a.toLowerCase()), [a]); // job id, any case
   assert.deepEqual(ids('alice'), [m]); // user and agent name
   assert.deepEqual(ids('ci-firmware'), [a]); // agent name
-  assert.deepEqual(ids('firmware-tests release/1.4'), [a]); // git url + ref, both words
+  assert.deepEqual(ids('firmware-tests release/1.4'), [a]); // words of the command (its git clone), both
   assert.deepEqual(ids('9165432107'), [a]); // meta
   assert.deepEqual(ids('smoke alice'), []); // words must all match the same job
   assert.deepEqual(ids('regression_50%'), [m]); // % and _ are literal…

package/test/users.test.js

@@ -438,3 +438,17 @@ test('audit log: Timestamp, User (who did it — always), Action — from the da
     ['system', 'Unblocked dev']
   ]);
 });
+
+test('a job\'s user comes from its key: the username, or the CI token\'s name — never what the Agent sends', async (t) => {
+  const { services } = await start(t),
+    u = services.adminUsers,
+    dev = u.create({ username: 'dev', email: 'd@example.com', role: 'user' }, { by: 't' });
+  services.registry.registerAuto({ clientId: 'c', name: 'lab-sw-01', type: 'sw', labels: [] });
+  u.issueKey(dev.id, { by: 't' });
+  const devAgent = services.agents.list().find((a) => a.user_id === dev.id),
+    ci = services.agents.create({ name: 'ci-nightly', kind: 'ci' }).agent,
+    spec = { target: { type: 'sw' }, command: './t.sh', user: 'someone else' }, // an older Agent's --user
+    userOf = (agentId) => services.jobs.get(services.jobs.create({ agentId, source: 'cli', spec: { ...spec } }).id).spec.user;
+  assert.equal(userOf(devAgent.id), 'dev');
+  assert.equal(userOf(ci.id), 'ci-nightly');
+});

package/views/admin/agents.pug

@@ -87,23 +87,6 @@ block content
                 button.btn.btn-sm.btn-outline-danger(type="submit" aria-label=`Delete ${a.name}` data-bs-toggle="tooltip" data-bs-title="Delete the CI token")
                   i.bi.bi-trash
 
-            .modal(tabindex="-1" id=`editAgentModal-${a.id}` aria-labelledby=`editAgentTitle-${a.id}`)
-              .modal-dialog
-                .modal-content
-                  form(method="post" action=`/admin/agents/${a.id}/rename`)
-                    input(type="hidden" name="returnTo" value=list.pageUrl())
-                    .modal-header
-                      h5.modal-title(id=`editAgentTitle-${a.id}`) Edit agent
-                      button.btn-close(type="button" data-bs-dismiss="modal" aria-label="Close")
-                    .modal-body
-                      label.form-label(for=`agentName-${a.id}`) Name
-                      input.form-control(id=`agentName-${a.id}` type="text" name="name" value=a.name required maxlength="100")
-                      .form-text Only a label — the agent's token, and everything using it, keep working.
-                      label.form-label.mt-3(for=`agentGroup-${a.id}`) Group
-                      +groupSelect(`agentGroup-${a.id}`, a.group_id, groups)
-                    .modal-footer
-                      button.btn.btn-secondary(type="button" data-bs-dismiss="modal") Cancel
-                      button.btn.btn-primary(type="submit") Save
       else
         tr
           td.text-body-secondary(colspan="7")
@@ -113,6 +96,27 @@ block content
             else
               | No agents yet.
 
+  //- Edit windows: outside the table, which scrolls sideways in its own
+  //- box on phones and would trap them under what follows.
+  each a in agents
+    .modal(tabindex="-1" id=`editAgentModal-${a.id}` aria-labelledby=`editAgentTitle-${a.id}`)
+      .modal-dialog
+        .modal-content
+          form(method="post" action=`/admin/agents/${a.id}/rename`)
+            input(type="hidden" name="returnTo" value=list.pageUrl())
+            .modal-header
+              h5.modal-title(id=`editAgentTitle-${a.id}`) Edit agent
+              button.btn-close(type="button" data-bs-dismiss="modal" aria-label="Close")
+            .modal-body
+              label.form-label(for=`agentName-${a.id}`) Name
+              input.form-control(id=`agentName-${a.id}` type="text" name="name" value=a.name required maxlength="100")
+              .form-text Only a label — the agent's token, and everything using it, keep working.
+              label.form-label.mt-3(for=`agentGroup-${a.id}`) Group
+              +groupSelect(`agentGroup-${a.id}`, a.group_id, groups)
+            .modal-footer
+              button.btn.btn-secondary(type="button" data-bs-dismiss="modal") Cancel
+              button.btn.btn-primary(type="submit") Save
+
   .modal(tabindex="-1" id="addAgentModal")
     .modal-dialog
       .modal-content

package/views/admin/users.pug

@@ -161,50 +161,53 @@ block content
                 button.btn.btn-sm.btn-outline-danger(type="submit" aria-label="Delete" data-bs-toggle="tooltip" data-bs-title="Delete the user")
                   i.bi.bi-trash
 
-            //- Inside the actions cell (text-nowrap): wrap again in here.
-            .modal.text-start.text-wrap(tabindex="-1" id=`editUser-${u.id}` aria-labelledby=`editUserTitle-${u.id}`)
-              .modal-dialog
-                .modal-content
-                  form(method="post" action=`/admin/users/${u.id}`)
-                    input(type="hidden" name="returnTo" value=list.pageUrl())
-                    .modal-header
-                      h5.modal-title(id=`editUserTitle-${u.id}`)= `Edit ${u.username}`
-                      button.btn-close(type="button" data-bs-dismiss="modal" aria-label="Close")
-                    .modal-body
-                      .row.g-2
-                        .col-sm-6
-                          label.form-label(for=`u-${u.id}-username`) Username
-                          input.form-control(id=`u-${u.id}-username` name="username" value=u.username required maxlength="64" pattern="[A-Za-z0-9._@+\\-]{1,64}")
-                        .col-sm-6
-                          label.form-label(for=`u-${u.id}-email`) Email
-                          input.form-control(id=`u-${u.id}-email` type="email" name="email" value=u.email required)
-                        .col-sm-6
-                          label.form-label(for=`u-${u.id}-first`) First name
-                          input.form-control(id=`u-${u.id}-first` name="firstName" value=u.firstName || '')
-                        .col-sm-6
-                          label.form-label(for=`u-${u.id}-last`) Last name
-                          input.form-control(id=`u-${u.id}-last` name="lastName" value=u.lastName || '')
-                        .col-12
-                          label.form-label(for=`u-${u.id}-role`) Role
-                          //- A maintainer gives no roles but User; their own
-                          //- row shows theirs without a picker (and posts none).
-                          if roles.includes(u.role)
-                            +roleSelect(`u-${u.id}-role`, u.role)
-                          else
-                            input.form-control(id=`u-${u.id}-role` value=roleLabel(u.role) disabled)
-                            .form-text Only an admin can change a role.
-                          if !u.canUseDashboard && roles.length > 1
-                            .form-text Making them a maintainer or admin gives them a temporary password for the dashboard.
-                        .col-12
-                          label.form-label(for=`u-${u.id}-group`) Group
-                          +groupSelect(`u-${u.id}-group`, u.groupId, groups)
-                    .modal-footer
-                      button.btn.btn-secondary(type="button" data-bs-dismiss="modal") Cancel
-                      button.btn.btn-primary(type="submit") Save
       else
         tr
           td.text-body-secondary(colspan="6")= q || roleFilter ? 'No user matches.' : 'No users yet.'
 
+  //- Edit windows: outside the table, which scrolls sideways in its own
+  //- box on phones and would trap them under what follows.
+  each u in users
+    .modal.text-start.text-wrap(tabindex="-1" id=`editUser-${u.id}` aria-labelledby=`editUserTitle-${u.id}`)
+      .modal-dialog
+        .modal-content
+          form(method="post" action=`/admin/users/${u.id}`)
+            input(type="hidden" name="returnTo" value=list.pageUrl())
+            .modal-header
+              h5.modal-title(id=`editUserTitle-${u.id}`)= `Edit ${u.username}`
+              button.btn-close(type="button" data-bs-dismiss="modal" aria-label="Close")
+            .modal-body
+              .row.g-2
+                .col-sm-6
+                  label.form-label(for=`u-${u.id}-username`) Username
+                  input.form-control(id=`u-${u.id}-username` name="username" value=u.username required maxlength="64" pattern="[A-Za-z0-9._@+\\-]{1,64}")
+                .col-sm-6
+                  label.form-label(for=`u-${u.id}-email`) Email
+                  input.form-control(id=`u-${u.id}-email` type="email" name="email" value=u.email required)
+                .col-sm-6
+                  label.form-label(for=`u-${u.id}-first`) First name
+                  input.form-control(id=`u-${u.id}-first` name="firstName" value=u.firstName || '')
+                .col-sm-6
+                  label.form-label(for=`u-${u.id}-last`) Last name
+                  input.form-control(id=`u-${u.id}-last` name="lastName" value=u.lastName || '')
+                .col-12
+                  label.form-label(for=`u-${u.id}-role`) Role
+                  //- A maintainer gives no roles but User; their own
+                  //- row shows theirs without a picker (and posts none).
+                  if roles.includes(u.role)
+                    +roleSelect(`u-${u.id}-role`, u.role)
+                  else
+                    input.form-control(id=`u-${u.id}-role` value=roleLabel(u.role) disabled)
+                    .form-text Only an admin can change a role.
+                  if !u.canUseDashboard && roles.length > 1
+                    .form-text Making them a maintainer or admin gives them a temporary password for the dashboard.
+                .col-12
+                  label.form-label(for=`u-${u.id}-group`) Group
+                  +groupSelect(`u-${u.id}-group`, u.groupId, groups)
+            .modal-footer
+              button.btn.btn-secondary(type="button" data-bs-dismiss="modal") Cancel
+              button.btn.btn-primary(type="submit") Save
+
   //- The audit log: who did what to which account (web/routes.js auditRows).
   h2.h6.mt-4 Recent activity
   if audit.length

package/views/groups/list.pug

@@ -50,22 +50,26 @@ block content
                 )
                   button.btn.btn-sm.btn-outline-danger(type="submit") Delete
 
-              .modal(tabindex="-1" id=`editGroupModal-${g.id}`)
-                .modal-dialog
-                  .modal-content
-                    form(method="post" action=`/groups/${g.id}`)
-                      .modal-header
-                        h5.modal-title Edit group
-                        button.btn-close(type="button" data-bs-dismiss="modal")
-                      .modal-body
-                        .mb-3
-                          label.form-label Name
-                          input.form-control(type="text" name="name" value=g.name required)
-                        .mb-3
-                          label.form-label Comment
-                          textarea.form-control(name="comment" rows="2")= g.comment || ''
-                      .modal-footer
-                        button.btn.btn-primary(type="submit") Save
+    //- Edit windows: outside the table, which scrolls sideways in its own
+    //- box on phones and would trap them under what follows.
+    if canManage
+      each g in groups
+        .modal(tabindex="-1" id=`editGroupModal-${g.id}`)
+          .modal-dialog
+            .modal-content
+              form(method="post" action=`/groups/${g.id}`)
+                .modal-header
+                  h5.modal-title Edit group
+                  button.btn-close(type="button" data-bs-dismiss="modal")
+                .modal-body
+                  .mb-3
+                    label.form-label Name
+                    input.form-control(type="text" name="name" value=g.name required)
+                  .mb-3
+                    label.form-label Comment
+                    textarea.form-control(name="comment" rows="2")= g.comment || ''
+                .modal-footer
+                  button.btn.btn-primary(type="submit") Save
   else if q
     p.text-body-secondary
       | No group matches “#{q}”.