@andrian.yablonskyy/thub-coordinator 1.0.37 → 1.0.38

package/views/help/_overview.pug

@@ -0,0 +1,118 @@
++section('overview', 'Product overview', 'info-circle')
+  p.
+    #[strong TestHub] is a small, self-hosted job network. It lets CI/CD pipelines and individual
+    developers run firmware and software tests on #[strong real hardware] or #[strong emulators]
+    that sit in a private lab behind a firewall. Nothing in the lab has to be reachable from outside.
+
+  .row.g-3.mb-3
+    .col-md-4
+      .card.h-100
+        .card-body
+          h3.h6.card-title
+            i.bi.bi-hdd-network.me-1
+            | Coordinator
+          p.card-text.small.mb-0.
+            This service. It holds the job queue and the resource registry, and runs the scheduler and
+            the heartbeat monitor. It stores logs and artifacts in SQLite plus a local directory,
+            and serves this dashboard. It's the only thing that needs a public HTTPS port.
+    .col-md-4
+      .card.h-100
+        .card-body
+          h3.h6.card-title
+            i.bi.bi-terminal.me-1
+            | Agent (#[code thub])
+          p.card-text.small.mb-0.
+            A CLI, and the only way to create jobs. The same #[code thub run] command works in a
+            GitHub Actions step and on a developer's laptop, so a CI failure can be reproduced exactly.
+    .col-md-4
+      .card.h-100
+        .card-body
+          h3.h6.card-title
+            i.bi.bi-motherboard.me-1
+            | Client (#[code thub-client])
+          p.card-text.small.mb-0.
+            A daemon (a systemd service) on a lab machine. Each instance owns one DUT slot. It connects
+            #[em outbound] to the Coordinator, picks up jobs, runs them and streams logs back.
+            Type #[strong HW] drives a physical board; type #[strong SW] runs a DUT emulator in Docker.
+
+  h3.h6 How a job flows
+  ol.small
+    li #[code thub run …] submits a job spec (type, labels, command, inputs) with an agent token.
+    li The Coordinator queues it (#[code QUEUED]) and the scheduler assigns it to an idle Client whose type, labels and group match.
+    li The Client accepts it, clones #[code --git-repo], downloads #[code --download-file] files and prepares the DUT (#[code PREPARING]).
+    li It runs #[code --command] with #[code sh -c], and output streams live to the Agent and the dashboard (#[code RUNNING]).
+    li The exit code is the verdict: #[code 0] = #[code PASSED], anything else = #[code FAILED]. JUnit files and artifacts are uploaded.
+    li The Agent exits with the verdict code, so a CI step passes or fails with it.
+
+  h3.h6 Key design rules
+  ul.small
+    li #[strong Clients only connect outbound] over HTTPS: registration, heartbeat, long-poll, logs, results. The lab firewall allows no inbound traffic.
+    li #[strong The Agent is the only way to create jobs.] CI and manual runs are identical.
+    li #[strong The Coordinator is the single source of truth.] It assigns a job inside a single SQLite transaction, so a job can never be assigned twice.
+    li #[strong A job is a command, not a script upload.] The Client runs your #[code --command] as its service user, never as root. Issue agent tokens only to trusted pipelines and people.
+
+  h3.h6 Resource and job states
+  .row.g-3.small
+    .col-md-6
+      table.table.table-sm.mb-0
+        thead
+          tr
+            th Resource
+            th Meaning
+        tbody
+          tr
+            td: code REGISTERED
+            td Just registered, no heartbeat yet
+          tr
+            td: code IDLE
+            td Online and free: schedulable
+          tr
+            td: code BUSY
+            td Running a job (#[code ci] / #[code cli]) or locked by hand (#[code local])
+          tr
+            td: code OUT_OF_SERVICE
+            td 3 heartbeats missed
+          tr
+            td: code MAINTENANCE
+            td Disabled by an admin
+    .col-md-6
+      table.table.table-sm.mb-0
+        thead
+          tr
+            th Job
+            th Meaning
+        tbody
+          tr
+            td: code QUEUED → ASSIGNED
+            td Waiting for, then bound to, a Client
+          tr
+            td: code PREPARING → RUNNING
+            td Inputs and DUT being prepared, then the command runs
+          tr
+            td: code PASSED / FAILED
+            td The command's exit code: 0, or non-zero
+          tr
+            td: code ERROR / TIMEOUT
+            td Infrastructure problem, or #[code --timeout] exceeded
+          tr
+            td: code CANCELED / LOST
+            td Canceled, or the Client went offline mid-job
+
++section('use-cases', 'Use cases', 'lightbulb')
+  -
+    const useCases = [
+      { icon: 'cpu', title: 'Hardware-in-the-loop CI', text: 'Every push builds firmware in the cloud, then a GitHub Actions test job runs `thub run --type hw --wait`: a lab Client flashes a real board through ST-Link, captures its UART, runs the tests and fails the pipeline on a non-zero exit.' },
+      { icon: 'pc-display', title: 'Emulator (SW) test farms', text: 'SW Clients on real or virtual Linux machines run each job’s DUT image (QEMU, Renode, a simulator) in a sandboxed Docker container. The tests talk to it at $THUB_DUT_HOST. Scale out by adding VMs.' },
+      { icon: 'person-workspace', title: 'Remote access for developers', text: 'Developers reproduce a CI failure on the exact bench it happened on (`--client lab-hw-01`) from home, with the same command CI ran, and stream the board’s console live.' },
+      { icon: 'lock', title: 'Shared benches without collisions', text: 'The scheduler hands out one job per bench. An engineer who needs a board by hand runs `thub-client lock` so nothing is scheduled there until `unlock`.' },
+      { icon: 'collection', title: 'Dedicated pools', text: 'Groups and labels (`board:nucleo-f401re`, `uart`) route jobs to the right hardware, e.g. a nightly pool separate from the PR pool.' },
+      { icon: 'box-seam', title: 'Any command-line test suite', text: 'Anything that runs from a shell and reports through its exit code: pytest, ctest, Robot Framework, a Dockerized test runner, a flashing and smoke-test script.' }
+    ]
+  .row.g-3
+    each uc in useCases
+      .col-md-6
+        .d-flex.gap-3
+          i.bi.fs-4.text-primary(class=`bi-${uc.icon}`)
+          div
+            h3.h6.mb-1= uc.title
+            p.small.text-body-secondary.mb-0!= uc.text.replace(/`([^`]+)`/g, '<code>$1</code>')

package/views/help/_quick-start.pug

@@ -0,0 +1,37 @@
++section('quick-start', 'Quick start', 'rocket-takeoff')
+  p Five steps from nothing to a first job. Every step links to its full section.
+  ol.thub-help-steps
+    li
+      strong Install the Coordinator
+      |  on a cloud VM behind an HTTPS reverse proxy (#[a(href="#coordinator") Coordinator setup]):
+      +code('Coordinator host').
+        sudo npm i -g @andrian.yablonskyy/thub-coordinator
+        thub-admin join-key generate          # → put it in clientJoinKey
+        nano ~/.config/thub/coordinator.json  # publicUrl, clientJoinKey
+        sudo systemctl restart thub-coordinator
+        thub-admin create-admin admin 'a-strong-password'
+    li
+      strong Install a Client
+      |  on each lab machine, with the same join key (#[a(href="#client-setup") Client setup]):
+      +code('Lab machine (Ubuntu 26.04)').
+        sudo apt install -y nodejs npm docker.io      # + stlink-tools openocd for HW
+        sudo npm i -g @andrian.yablonskyy/thub-client
+        nano ~/.config/thub/client.json               # coordinatorUrl, type, joinKey
+        sudo systemctl enable --now thub-client@client
+      | It shows up on #[a(href="/resources") Resources] by itself, usually within 10 s.
+    li
+      strong Issue an agent token
+      |  on #[a(href="/admin/agents") Agents] (admins), or on the Coordinator host with
+      |  #[code thub-admin agent add <name> --kind ci|cli]. The token is shown once.
+    li
+      strong Install and configure the Agent
+      |  (#[a(href="#agent-setup") Agent setup]):
+      +code('Developer machine').
+        npm i -g @andrian.yablonskyy/thub-agent
+        thub config set url #{coordinatorUrl}
+        thub config set token agt_…
+    li
+      strong Run a job
+      |  (#[a(href="#agent-cli") Agent CLI reference]):
+      +code('Developer machine').
+        thub run --type sw --command 'uname -a && echo hello from the lab' --wait

package/views/help/_troubleshooting.pug

@@ -0,0 +1,42 @@
++section('troubleshooting', 'Troubleshooting', 'life-preserver')
+  //- `…` in a question or answer marks a command or parameter: rendered as
+  //- <code>, with everything else HTML-escaped first (so `<instance>` shows as text).
+  -
+    const faq = [
+      ['A Client doesn\'t appear on Resources', 'Check `journalctl -u thub-client@<instance> -f`. A `503` at registration means the Coordinator has no `clientJoinKey`; a `401` means the `joinKey` differs. Also check that `coordinatorUrl` is reachable from the lab (`curl -sI <url>/login`).'],
+      ['A Client flaps or two machines show as one resource', 'Both use the same `.client-id` (a cloned VM or a shared config file). Delete `<varDir>/<instance>/.client-id` on one of them and restart it, or set a distinct `clientId`.'],
+      ['Name already in use (`409`)', 'Another live Client holds that name. Rename one of them in its config or from the resource card. A name held by an `OUT_OF_SERVICE` resource is reclaimed automatically.'],
+      ['The job is rejected with `422`', 'No registered Client can ever match its type, labels, group or client. Compare `thub resources` with your `--type`, `--board`/`--label` and `--group`.'],
+      ['The job stays `QUEUED`', 'Matching Clients are all `BUSY`, locked (`local`), in `MAINTENANCE` or offline, or the job is pinned with `--client`. It times out after `--timeout`.'],
+      ['`ERROR` during prepare', 'The clone, download or DUT image pull failed; the job log names the reason. For git, check the Client user\'s keys and `known_hosts` (`ssh -T git@<host>` as that user). For images, check the Client user\'s `docker login`.'],
+      ['Permission denied on `/dev/ttyUSB*` or `docker.sock`', 'Docker or the device groups were added after the Client was installed. Re-run `sudo npm i -g @andrian.yablonskyy/thub-client` so the unit gets the `dialout`/`plugdev`/`docker` groups, then restart.'],
+      ['A configured device is shown as missing', 'Check the `devpath` with `udevadm info -a -n <dev>`, then `thub-client udev --print`; restart the Client to regenerate the udev rules.'],
+      ['Job `LOST`', 'The Client missed 3 heartbeats (network, reboot, crash). With `requeueOnLost` the job is retried once on another Client.'],
+      ['A job can\'t write to `~` (read-only file system)', 'Under systemd the Client can only write to its state directory. Write to `$THUB_WORK_DIR`, and set `DOCKER_CONFIG` there for `docker login`.'],
+      ['Live logs don\'t stream through the proxy', 'Turn off response buffering for the Coordinator (nginx: `proxy_buffering off;`, Caddy: `flush_interval -1`).'],
+      ['Finding a job, resource, group or agent', 'Use the search box on its list page (press `/` to jump to it). Every word must match, e.g. `lab-hw-01 FAILED` or a git ref. Job search covers ids, users, resources, agents, commands, repos and `--meta`, but not `--env` values (secrets). On a job page, search the log above the log viewer: `Enter`/`Shift+Enter` step through matches.'],
+      ['Lists don\'t update by themselves (navbar shows Offline or Paused)', '`Paused`: you\'re editing something on the page (a field, the inline rename, a dialog); it resumes when you\'re done. `Offline`: the browser can\'t hold the `/live` stream open, often a proxy buffering it (nginx: `proxy_buffering off;`); reloading the page always shows current data. `Session ended`: sign in again. Background updates never extend the session\'s idle timeout.'],
+      ['Locked out of the dashboard', 'Restart the Coordinator once with `THUB_BOOTSTRAP_ADMIN_PASSWORD=<new>` (resets the `admin` user), then unset it.']
+    ]
+    const withCode = (text) => text
+      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+      .replace(/`([^`]+)`/g, '<code>$1</code>')
+  .accordion#help-faq
+    each item, i in faq
+      .accordion-item
+        h3.accordion-header
+          button.accordion-button.collapsed.small(
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target=`#faq-${i}`
+            aria-expanded="false"
+            aria-controls=`faq-${i}`
+          )
+            //- One inline box: .accordion-button is flex, which would drop
+            //- the spaces around <code>.
+            span!= withCode(item[0])
+        .accordion-collapse.collapse(id=`faq-${i}` data-bs-parent="#help-faq")
+          .accordion-body.small!= withCode(item[1])
+  p.small.text-body-secondary.mt-3.mb-0.
+    The full design reference (API, state machines, database schema) is in the project README. Everything
+    that happens is also recorded per job: open it from #[a(href="/jobs") Jobs] for its spec, timeline and log.

package/views/help/index.pug

@@ -0,0 +1,67 @@
+extends ../layout
+include _mixins
+
+block content
+  -
+    const toc = [
+      { id: 'overview', label: 'Product overview' },
+      { id: 'use-cases', label: 'Use cases' },
+      { id: 'quick-start', label: 'Quick start' },
+      { id: 'coordinator', label: 'Coordinator setup' },
+      { id: 'agent-setup', label: 'Agent setup' },
+      { id: 'client-setup', label: 'Client setup' },
+      { id: 'client-machines', label: 'Client machines (HW / SW)' },
+      { id: 'docker', label: 'Docker registry' },
+      { id: 'git', label: 'Git repositories' },
+      { id: 'agent-cli', label: 'Agent CLI reference' },
+      { id: 'env', label: 'Environment variables' },
+      { id: 'ci', label: 'CI/CD (GitHub Actions)' },
+      { id: 'troubleshooting', label: 'Troubleshooting' }
+    ]
+
+  .row.g-4
+    .col-lg-3.d-none.d-lg-block
+      .thub-help-toc.sticky-top
+        input.form-control.form-control-sm.mb-3#help-filter(
+          type="search"
+          placeholder="Filter help…"
+          aria-label="Filter help sections"
+        )
+        nav.nav.nav-pills.flex-column#help-toc
+          each item in toc
+            a.nav-link.py-1(href=`#${item.id}` data-help-toc=item.id)= item.label
+        p.small.text-body-secondary.mt-3.mb-0
+          | Coordinator v#{coordinatorVersion} · examples use
+          br
+          code.small= coordinatorUrl
+
+    .col-lg-9
+      .d-flex.flex-wrap.align-items-center.justify-content-between.gap-2.mb-3
+        h1.h3.mb-0 TestHub help
+        //- Small screens have no sidebar: jump menu + filter instead.
+        .d-lg-none.d-flex.gap-2.w-100
+          select.form-select.form-select-sm#help-jump(aria-label="Jump to section")
+            each item in toc
+              option(value=item.id)= item.label
+          input.form-control.form-control-sm#help-filter-sm(type="search" placeholder="Filter…" aria-label="Filter help sections")
+      p.lead.
+        Everything needed to run TestHub: what it is, how to install and configure the
+        Coordinator, Agent and Client, how to prepare lab machines, and how jobs use Docker,
+        git and environment variables.
+      p.text-body-secondary.small#help-no-match(hidden) No section matches the filter.
+
+      include _overview
+      include _quick-start
+      include _coordinator
+      include _agent-setup
+      include _client-setup
+      include _client-machines
+      include _docker
+      include _git
+      include _agent-cli
+      include _env
+      include _ci
+      include _troubleshooting
+
+block scripts
+  script(src="/js/help.js")

package/views/index.pug

@@ -6,7 +6,8 @@ include mixins/updates
 block content
   h1.h4.mb-2 Overview
 
-  .row.g-3.mb-4
+  //- data-live: swapped in place when it changes (public/js/live.js).
+  .row.g-3.mb-4(data-live="overview-stats")
     .col-md-4
       .card
         .card-body
@@ -23,7 +24,7 @@ block content
           h6.card-subtitle.mb-2.text-body-secondary Resources online
           p.display-6= `${onlineCount} / ${resources.length}`
 
-  .row.g-3
+  .row.g-3(data-live="overview-cards")
     each r in resources
       .col-sm-6.col-md-4.col-lg-3
         .card.h-100(role="button" tabindex="0" data-resource-card=`resource-card-${r.id}` class=`border-${{IDLE:'success',BUSY:'primary',OUT_OF_SERVICE:'danger',MAINTENANCE:'secondary',REGISTERED:'secondary'}[r.status] || 'secondary'}`)

package/views/jobs/list.pug

@@ -11,7 +11,9 @@ block content
         button.btn.btn-sm.btn-outline-warning(type="button" data-bs-toggle="modal" data-bs-target="#reset-queue-modal") Reset queue
         button.btn.btn-sm.btn-outline-danger.ms-1(type="button" data-bs-toggle="modal" data-bs-target="#clean-history-modal") Clean up database
 
-  form.row.g-2.mb-3(method="get")
+  form.row.g-2.mb-3(method="get" role="search")
+    .col-12.col-md-5.col-lg-4
+      +searchBox(filters.q, 'Search jobs: id, user, resource, command, repo…', list.urlFor({ q: '' }))
     .col-auto
       select.form-select.form-select-sm(name="state" onchange="this.form.submit()")
         option(value="") any state
@@ -25,7 +27,8 @@ block content
     .col-auto.ms-auto
       +pageSizePicker(list)
 
-  +listToolbar(list, 'jobs')
+  div(data-live="list-toolbar")
+    +listToolbar(list, 'jobs')
 
   table.table.table-hover.align-middle
     thead
@@ -39,7 +42,7 @@ block content
         +sortHeader(list, 'duration', 'Duration', 'desc')
         if canManage
           th
-    tbody
+    tbody(data-live="rows")
       each j in jobs
         tr
           td: a(href=`/jobs/${j.id}`)= j.id

package/views/layout.pug

@@ -7,7 +7,9 @@ html(lang="en" data-bs-theme=(user && user.theme) || "auto")
     link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css")
     link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css")
     link(rel="stylesheet" href="/css/thub.css")
-  body
+  //- liveTopics (routes.js): the page updates itself when these change
+  //- (public/js/live.js, services/live.js).
+  body(data-live-topics=user && liveTopics ? liveTopics : false)
     nav.navbar.navbar-expand-lg.bg-body-tertiary.border-bottom
       .container-fluid
         a.navbar-brand.d-flex.flex-column.lh-1.py-1(href="/")
@@ -42,6 +44,24 @@ html(lang="en" data-bs-theme=(user && user.theme) || "auto")
                 li.nav-item
                   a.nav-link(href="/admin/agents" class=active === 'agents' ? 'active' : '') Agents
           ul.navbar-nav
+            if user && liveTopics
+              //- Live-update status, driven by public/js/live.js.
+              li.nav-item.d-flex.align-items-center.me-3
+                span#thub-live.thub-live.small.text-body-secondary(data-state="connecting" title="Connecting to live updates…" role="status")
+                  span.thub-live-dot(aria-hidden="true")
+                  span.thub-live-label Live
+            if user
+              li.nav-item.d-flex.align-items-center.me-2
+                a.nav-link.d-flex.align-items-center(
+                  href="/help"
+                  class=active === 'help' ? 'active' : ''
+                  aria-current=active === 'help' ? 'page' : false
+                  data-bs-toggle="tooltip"
+                  data-bs-placement="bottom"
+                  data-bs-title="Product guide, setup and CLI reference"
+                )
+                  i.bi.bi-question-circle.me-1
+                  | Help
             if user && user.role === 'admin'
               li.nav-item.d-flex.align-items-center.me-2
                 form(method="post" action="/updates/check" onsubmit="this.querySelector('button').disabled = true; this.querySelector('i').className = 'spinner-border spinner-border-sm';")
@@ -171,6 +191,9 @@ html(lang="en" data-bs-theme=(user && user.theme) || "auto")
     script(src="/js/toasts.js")
     script(src="/js/copy-to-clipboard.js")
     script(src="/js/confirm.js")
+    script(src="/js/list-search.js")
+    if user && liveTopics
+      script(src="/js/live.js")
     if user && user.role === 'admin' && updates.coordinatorPending
       script(src="/js/update-watch.js")
     block scripts

package/views/mixins/list-controls.pug

@@ -16,6 +16,38 @@ mixin pageSizePicker(list)
       each s in list.pageSizes
         option(value=list.urlFor({ size: s }) selected=list.prefs.size === s)= s === 'all' ? 'All' : s
 
+//- Search box (?q=) for a list page: every word must match (routes.js,
+//- services/search.js). Goes inside a GET form — the Jobs filter form, or
+//- +searchForm on its own. `/` focuses it, Esc clears (public/js/list-search.js).
+mixin searchBox(q, placeholder, clearUrl)
+  .input-group.input-group-sm.thub-search
+    span.input-group-text
+      i.bi.bi-search
+    input.form-control(
+      type="search"
+      name="q"
+      value=q
+      placeholder=placeholder
+      aria-label=placeholder
+      maxlength="200"
+      autocomplete="off"
+      data-list-search
+      data-bs-toggle="tooltip"
+      data-bs-title="Press Enter to search · / to focus · Esc to clear"
+    )
+    if q
+      a.btn.btn-outline-secondary(href=clearUrl aria-label="Clear search" data-list-search-clear)
+        i.bi.bi-x-lg
+
+mixin searchForm(q, placeholder, clearUrl)
+  form.m-0(method="get" role="search")
+    +searchBox(q, placeholder, clearUrl)
+
+//- "matching “foo”" after a list's count, when a search is active.
+mixin searchNote(q)
+  if q
+    |  matching “#{q}”
+
 //- Shown above the table: "Showing 26–50 of 312 jobs" and the page links.
 mixin listToolbar(list, noun)
   - const p = list.pagination
@@ -25,6 +57,10 @@ mixin listToolbar(list, noun)
         | Showing #{p.from}–#{p.to} of #{p.total} #{noun}
       else
         | No #{noun}
+      +searchNote(list.q)
+      if list.q
+        |  · 
+        a(href=list.urlFor({ q: '' })) show all
     if p.pages > 1
       +pager(list)
 

package/views/mixins/log-viewer.pug

@@ -1,12 +1,34 @@
 mixin logViewer(jobId, jobActive)
-  .mb-2
-    select#stream-filter.form-select.form-select-sm.w-auto.d-inline-block
+  //- Stream filter + search (public/js/log-viewer.js): matches are
+  //- highlighted; Enter / Shift+Enter or the arrows step through them.
+  .d-flex.flex-wrap.align-items-center.gap-2.mb-2
+    select#stream-filter.form-select.form-select-sm.w-auto(aria-label="Log stream")
       option(value="") all streams
       option(value="uart") uart
       option(value="runner") runner
       option(value="flash") flash
       option(value="emulator") emulator
-  pre#log-viewer.bg-body-tertiary.p-3.rounded(
+    .input-group.input-group-sm.thub-search(role="search")
+      span.input-group-text
+        i.bi.bi-search
+      input#log-search.form-control(
+        type="search"
+        placeholder="Search log…"
+        aria-label="Search log"
+        autocomplete="off"
+        maxlength="200"
+        data-bs-toggle="tooltip"
+        data-bs-title="Enter: next match · Shift+Enter: previous · Esc: clear"
+      )
+      span#log-search-count.input-group-text.small(aria-live="polite" hidden)
+      button#log-search-prev.btn.btn-outline-secondary(type="button" aria-label="Previous match" disabled)
+        i.bi.bi-chevron-up
+      button#log-search-next.btn.btn-outline-secondary(type="button" aria-label="Next match" disabled)
+        i.bi.bi-chevron-down
+    .form-check.form-check-inline.small.mb-0
+      input#log-search-only.form-check-input(type="checkbox")
+      label.form-check-label(for="log-search-only") Display only matching lines
+  pre#log-viewer.bg-body-tertiary.p-3.rounded.position-relative(
     style="height: 420px; overflow-y: auto;"
     data-job-id=jobId
     data-job-active=jobActive ? 'true' : 'false'

package/views/mixins/resource.pug

@@ -322,7 +322,7 @@ mixin resourceCard(r, groupsById, returnTo)
               ) Connected USB devices
             
           .tab-content
-            .tab-pane.fade.show.active(id=`rc-${r.id}-details` role="tabpanel" aria-labelledby=`rc-${r.id}-details-tab` tabindex="0")
+            .tab-pane.fade.show.active(id=`rc-${r.id}-details` role="tabpanel" aria-labelledby=`rc-${r.id}-details-tab` tabindex="0" data-live=`rc-details-${r.id}`)
               +resourceDetails(r, groupsById, returnTo, local, external)
             +configPanes(r, returnTo)
             .tab-pane.fade(id=`rc-${r.id}-usb` role="tabpanel" aria-labelledby=`rc-${r.id}-usb-tab` tabindex="0")

package/views/resources/list.pug

@@ -6,15 +6,18 @@ include ../mixins/list-controls
 
 block content
   h1.h4.mb-3 Resources
-  p.text-body-secondary.small.
+  .d-flex.flex-wrap.align-items-center.gap-2.mb-3
+    +updatesToolbar('client', 'clients', '/resources')
+  p.text-body-secondary.small: i.
     Resources register themselves — start a Client with the shared join key and it appears here. Click a resource for its details, including IP addresses.
 
   .d-flex.flex-wrap.align-items-center.gap-2.mb-3
-    +updatesToolbar('client', 'clients', '/resources')
+    +searchForm(list.q, 'Search resources: name, label, group, status, IP…', list.urlFor({ q: '' }))
     .ms-auto
       +pageSizePicker(list)
 
-  +listToolbar(list, 'resources')
+  div(data-live="list-toolbar")
+    +listToolbar(list, 'resources')
 
   table.table.table-hover.align-middle
     thead
@@ -29,7 +32,7 @@ block content
         +sortHeader(list, 'heartbeat', 'Last heartbeat', 'desc')
         if user.role === 'admin'
           th Actions
-    tbody
+    tbody(data-live="rows")
       each r in resources
         tr(role="button" tabindex="0" data-resource-card=`resource-card-${r.id}`)
           td= r.name