feat: act on a host from its row, and fit its details on one screen

[stahnma]

Every everyday job on the dashboard started with the same detour: expand the host's row, scroll past the system information and the group editor, and find the button at the bottom right of a panel that ran the full width of the table. This moves the common actions onto the row and packs the expanded panel into three columns.

Task	Before	After
Check in a host	2 clicks + scroll	1
Run updates on a host	2	1
Reboot a host	3	2 (tick, Reboot)
See a host's pending packages	1 on a 10px chevron + scroll	1 anywhere on the row; packages are the first column
Change a host's groups	3 + scroll	1 per group

 ▸ giles  Debian 13  aarch64  192.168.1.139  [UPDATES (5)]  3d 6h  just now   [Check in] [Update] [☐|Reboot]
 ▾ funk   Fedora 44  x86_64   192.53.120.69  [UPDATES (1)]  1d19h  just now   [Check in] [Update] [☐|Reboot]
 ┌─ Pending updates 1 ────────────┬─ Host ───────────────┬─ Groups ──────────────────┐
 │ libssl3  3.0.15  trixie-sec…   │ Client 0.1.13        │ ☑ lab  ☐ media  ☐ dmz     │
 │                                │ CPU    EPYC 7713     │ ◆os:fedora ◆pkg:rpm       │
 │                                │ Cores 2 · RAM 4 GB   │             Remove host   │
 └────────────────────────────────┴──────────────────────┴───────────────────────────┘

Design notes

Row controls are always drawn, and disabled rather than hidden when they cannot act. A control the server does not offer at all is left out, so a fleet without remote updates never sees the column. One the server offers but the host has not opted into, or that has nothing to do, is disabled with the reason on hover. Every row keeps its buttons in the same place, so the column reads downward as "which hosts can I do this to". Hover-only buttons were considered and rejected: invisible on touch, and you cannot scan them.

Update is disabled on a host that reports nothing to install, except when its status is unknown. This is a behaviour change: before, the button was live on any opted-in host.

Reboot keeps its confirmation checkbox, now fused to the button and turning orange when armed. The tick no longer clears when a row collapses, because the control is no longer inside the panel that collapses. It clears when the reboot is sent or the box is unticked. The group-strip reboot keeps its labelled "Confirm reboot" checkbox: it acts on many hosts, so it says so in words.

The whole row opens the details, not just the chevron, which is now a <button> with aria-expanded so the keyboard can reach it. Clicks on row controls, and a click that ends a text selection, are left alone: copying an IP out of a row should not fold it.

One delegated listener for the table. The rows are rebuilt on every check-in from any host, so per-button addEventListener calls had to be re-run on every render. The handlers now take the element rather than the event.

The panel draws from the list payload at once. /api/systems already carries nearly everything the panel shows, so it renders immediately instead of blanking to "Loading…" on every expand. The full record is fetched behind it for the client version, and drawn into whichever panel is on screen when it lands.

Group membership saves on each tick. There's no Save button, and no half-finished edit to lose to a re-render. A host's boxes are held disabled while its save is in flight: a second tick computed from not-yet-refreshed groups would undo the first.

Removed: Expand all / Collapse all (with actions on the row there is little reason to open every panel), and the inline sort script in index.html, which reordered the DOM by hand only for app.js to re-render over it. Delete is now "Remove host", at the foot of the groups column, beside a "Silent for N days" note after a week of silence.

Look

The page is powder-coated steel (petrol in dark, aluminium in light), and status is label-maker tape in the colours real tape comes in: yellow for pending updates, red for security updates (replacing the pulsing badge), white for unknown. "Up to date" is quiet green text, since a healthy host needs no label. Archivo sets labels and Martian Mono sets anything a machine reported. Both are vendored under static/fonts (SIL OFL 1.1, license included), so a dashboard with no internet access still renders as designed. The --accent-* variable names are kept, so inline styles in app.js pick up the new palette. apidoc.html is untouched and keeps its own stylesheet.

Testing

make test and make build pass. No Go code changed.

Driven in headless Chromium (Playwright) against an isolated server: copied DB, throwaway ports, Consul pointed at a dead address. Feature flags and the POST endpoints were mocked. Checked with no page errors:

• clicking a row expands it,
• clicking a row button does not,
• Enter on the chevron expands,
• Check in switches to "Checking…",
• ticking reboot arms the button,
• the panel shows the package list.

Screenshots were taken in dark, light and phone widths.

Also installed on the dev host via ./localtest. The production server serves the new page, reports both features on, has 13 opted-in hosts, and logged no warnings after restart.

Not verified:

• Check in, update and reboot against real hosts from the new buttons; every request in the browser run was mocked.
• Save-on-tick for groups; the test DB had no hand-made groups.

Known rough edges:

• To fit the actions column at 1440px, long OS names like "Fedora Linux 44 (Server Edition)" wrap to two lines.
• On a phone the table still scrolls sideways, so row actions and the right side of an open panel need a horizontal scroll. A stacked-card layout would be its own change.