fix(master): review fixes for newer-tag suggestions (#11)

## Summary

- Rebuilds the master's **Services** and **Agents** pages per the "Ledger" design: sidebar shell with live nav counts, machine filter and Live indicator; dark/light theme (follows the OS, toggle overrides); embedded Schibsted Grotesk and JetBrains Mono (fontsource 5.3.0, OFL).
- Services: Swarm grouped per cluster with its machines under it, offline banner ("Agent offline since HH:MM", browser-local), Simple Icons derived from the image ref (letter circle fallback), existing badges and mode switch restyled, client-side search, machine filter and Icon / Icon + text / Text toggle.
- Agents: Online / Offline / Never connected / Revoked, master version in the header with outdated agent versions marked, revoke via popover instead of `confirm()`, "Add agent" as a three-step panel that completes when the agent says hello (SSE `agents`).
- Store: migration `0005_agent_cluster.sql` persists each agent's `swarm_cluster_id` (needed to list a cluster's managers and its offline state after a master restart).
- SSE keepalive is now a named `ping` event so the Live indicator also shows the connection is alive. `revokeAgent` now publishes `agents`.

Closes #18

## Notes

- Workers never report a cluster id (Docker only sets `Swarm.Cluster` on managers), so their Swarm role shows "—". Fixing that needs a new hello field.
- Master binary grows by about 2.16 MB, almost all Simple Icons 16.35.0 path data (gzipped JSON, regenerated with `go generate ./internal/master/web/icons`). The agent binary does not import it.
- Jobs, Job and Service detail pages only get the new shell; their own artboards are out of scope, as are Update buttons, Update all, header stats and the drift badge.
- Unchanged: CSRF on every POST, `Cache-Control: no-store` on the token response, 401 + `HX-Redirect` without a session, no `template.HTML` on agent- or user-controlled values, no Node build step.

## Test plan

- [x] `go test ./...`, `go test -race ./internal/master/...`
- [x] `go test -tags integration ./internal/master/store/` against Postgres 17
- [x] `docker build`
- [x] Browser check on fake data: both themes, 1440 px and 390 px, add-agent flow through connect
- [ ] Services grouping and icons against real stacks and a real Swarm cluster
- [ ] "Agent offline since" after stopping an agent
- [ ] Theme toggle, search and machine filter across reloads and mode changes
- [ ] Add agent end to end with a real agent, Copy buttons
- [ ] Phone at 390 px

https://claude.ai/code/session_01GAZsp3P7Qto6JnhipxWUJQ
Reviewed-on: #29

CLAUDE.md

@@ -36,10 +36,12 @@ DATABASE_URL=postgres://... go test -tags integration ./internal/master/store/
 - `internal/master/config`   — env-var loading
 - `internal/master/store`    — Postgres access and migrations
 - `internal/master/hub`      — agent connections: auth, per-connection writer, routing, job reconcile on hello
-- `internal/master/registry` — HEAD-only digest lookup against a registry (go-containerregistry, `DOCKER_CONFIG` credentials)
-- `internal/master/poller`   — every `POLL_INTERVAL`: one lookup per followed `repo:tag`, sets the available version, starts auto jobs
+- `internal/master/registry` — HEAD-only digest lookup and tag listing against a registry (go-containerregistry, `DOCKER_CONFIG` credentials)
+- `internal/master/tagver`   — which tag is a newer version of a followed tag (pure functions)
+- `internal/master/poller`   — every `POLL_INTERVAL`: one lookup per followed `repo:tag`, sets the available version, starts auto jobs; one tag list per repo, sets the newer tag suggestion
 - `internal/master/jobs`     — decides whether a service may be updated and starts a job on the right agent
 - `internal/master/webhook`  — `POST /update`: records the available version, starts jobs for auto services, waits for them
+- `internal/master/web/icons` — embedded Simple Icons path data; slug derived from the image ref; regenerate with `go generate ./internal/master/web/icons`
 - `internal/master/web`, `webauth` — HTMX UI behind OIDC login, SSE signals
 - `internal/master/events`   — in-process publish/subscribe for UI refresh signals
 - `internal/master/model`    — domain types shared by the above
@@ -75,8 +77,16 @@ DATABASE_URL=postgres://... go test -tags integration ./internal/master/store/
 
 ## Gotchas
 
-- **Registry access is HEAD only** (`internal/master/registry`). Docker Hub counts a manifest
-  GET as a pull; the client never falls back to GET, and a test asserts this.
+- **Registry manifest access is HEAD only** (`internal/master/registry`). Docker Hub counts a
+  manifest GET as a pull; the client never GETs `/manifests/`, and a test asserts this. The
+  only GETs are the `/v2/` ping and `tags/list` (newer-tag detection, once per repo per cycle).
+- **`services.newer_ref` is a suggestion only**: no auto jobs, not even for auto services. The
+  poller writes it only on change; a failed tag list keeps the old value and never sets
+  `last_poll_error`. The UI re-checks it at render time with `tagver.Newer`, so a stale value
+  is hidden until the next cycle; it is also hidden when its repo is not the one the service
+  follows. The suggestion is computed from the service list read at the start of the cycle, so
+  if the service moved on meanwhile, the render-time check hides it. Tags with one numeric component or no digits (`7`, `pg16`,
+  `latest`) never get suggestions.
 - **`image_versions` uses `''` instead of NULL** for a missing tag or digest, so
   `UNIQUE (repo, tag, digest)` deduplicates. The webhook records `(repo, tag, '')`; that
   row is hidden from `RecentVersions` when a row with the same tag and a digest was first
@@ -162,6 +172,8 @@ DATABASE_URL=postgres://... go test -tags integration ./internal/master/store/
 - **Merge lock order is agent, then service rows by id** (as in inventory writes), and the
   duplicate row is deleted before the old row is updated, because `location_key` is unique
   and not deferrable. A removal racing a merge can be lost; the next snapshot fixes it.
+- **The SSE stream sends a named `ping` event every 25 s**; the sidebar Live indicator relies on it.
+- **Agents persist `swarm_cluster_id`.** Only managers report it, so workers show no role.
 
 ## References
 

README.md

@@ -143,6 +143,15 @@ multi-arch image the digest is the index digest, the same one `docker inspect` s
   it) and starts no job for that digest again, whether the job
   failed or the user rolled back afterwards. If the service already had a job when the
   digest was found, the next cycle tries again.
+- **Newer tags.** For a service that follows a version-like tag (`1.27.3`, `v1.2.3`,
+  `11.0-latest`; at least two numeric components), the master also lists the repo's tags
+  once per cycle (`GET /v2/<repo>/tags/list`, which Docker Hub does not count as a pull) and
+  suggests the highest tag with the same prefix, suffix and number of components and the
+  same major number, for example `gitea:1.27.3` gives `1.28.0` but never `2.0.0`. The
+  overview shows a "Newer tag" badge and the service page lists the tag under Versions, from
+  where you deploy it. It is a suggestion only: nothing is deployed automatically, not even
+  for **auto** services. Tags such as `latest`, `7` or `pg16` get no suggestion. A failed tag
+  list keeps the old suggestion and is only logged (`poll_tags_failed`).
 - **What is not polled.** Services that follow no tag (`repo@digest`), `build:` services, and
   services without a registry digest (locally built images). The service page says which.
   The updater's own services and plain containers are polled, so their badge works, but

cmd/master/main.go

@@ -117,7 +117,7 @@ func run() error {
 
 	ui, err := web.New(st, agentHub, jobService, broker, web.Config{
 		AgentURL: cfg.AgentURL, MasterKey: fingerprint, AgentImage: cfg.AgentImage,
-		PollInterval: cfg.PollInterval,
+		PollInterval: cfg.PollInterval, Version: version,
 	}, logger)
 	if err != nil {
 		return err

docs/superpowers/specs/2026-10-12-master-agent-design.md

@@ -255,6 +255,11 @@ them. An agent recreating itself would kill the job it is running.
   HEAD-only and never downloads a manifest.
 - Credentials: a Docker `config.json` (as written by `docker login`) mounted into the
   master. No credential UI, no encryption in Postgres.
+- Newer version tags (e.g. `gitea:1.27.3` → `1.27.4`): for a followed tag with at least
+  two numeric components the poller lists the repo's tags once per cycle
+  (`GET /v2/<repo>/tags/list`) and stores the highest tag with the same prefix, suffix,
+  component count and major number in `services.newer_ref`. A suggestion only, never
+  deployed automatically; deploying it is the existing version pick.
 
 ## Webhook
 
@@ -364,10 +369,6 @@ Each phase ends with something that works on its own.
 
 ## Out of scope (later specs)
 
-- Detecting newer version *tags* for images we do not build (e.g. `gitea:1.27.3` →
-  `1.27.4`, `postgres:17.10`, `loki:3.4.2`). Requires listing tags and ordering them;
-  major upgrades such as Postgres 17 → 18 must never be automatic. Revisit after
-  checking the other two servers' stack files.
 - Notifications.
 - Export/import of a fleet configuration to restore a setup. The `services` table
   already holds what an export needs.

internal/e2e/agent_master_test.go

@@ -104,6 +104,19 @@ func (m *memStore) SetLastTagDigest(_ context.Context, id int64, digest string)
 	return nil
 }
 
+func (m *memStore) SetNewer(_ context.Context, id int64, ref string, at time.Time) error {
+	m.mu.Lock()
+	defer m.mu.Unlock()
+	svc, ok := m.svcRows[id]
+	if !ok {
+		return model.ErrNotFound
+	}
+	svc.NewerRef = ref
+	svc.NewerAt = &at
+	m.svcRows[id] = svc
+	return nil
+}
+
 // seedService adds a service row that jobs can be triggered for.
 func (m *memStore) seedService(svc model.Service) {
 	m.mu.Lock()

internal/e2e/versions_test.go

@@ -34,6 +34,9 @@ func (f *fixedRegistry) Digest(_ context.Context, ref string) (string, error) {
 	return f.digests[ref], nil
 }
 
+// Tags lists no tags, so no newer tag is ever suggested.
+func (f *fixedRegistry) Tags(context.Context, string) ([]string, error) { return nil, nil }
+
 func TestPickPinnedVersion(t *testing.T) {
 	env := newJobEnv(t)
 	env.store.seedVersion(model.ImageVersion{ID: 5, Repo: slusk, Tag: "1.3.0", Digest: "sha256:old130", Source: model.SourceRunning})

internal/imageref/imageref.go

@@ -33,6 +33,12 @@ func Parse(ref string) Ref {
 	return r
 }
 
+// IsRegistryHost reports whether the first path segment of a repository names
+// a registry: it contains a "." or ":" or is "localhost".
+func IsRegistryHost(segment string) bool {
+	return strings.ContainsAny(segment, ".:") || segment == "localhost"
+}
+
 // String reassembles the reference as repo[:tag][@digest].
 func (r Ref) String() string {
 	s := r.Repo

internal/imageref/imageref_test.go

@@ -29,6 +29,26 @@ func TestParse(t *testing.T) {
 	}
 }
 
+func TestIsRegistryHost(t *testing.T) {
+	cases := []struct {
+		in   string
+		want bool
+	}{
+		{"lscr.io", true},
+		{"localhost:5000", true},
+		{"localhost", true},
+		{"registry:5000", true},
+		{"gitea", false},
+		{"library", false},
+		{"", false},
+	}
+	for _, c := range cases {
+		t.Run(c.in, func(t *testing.T) {
+			assert.Equal(t, c.want, IsRegistryHost(c.in))
+		})
+	}
+}
+
 func TestIsDigest(t *testing.T) {
 	cases := []struct {
 		in   string

internal/master/jobs/jobs_test.go

@@ -411,6 +411,7 @@ func TestTriggerVersion_Ref(t *testing.T) {
 	}{
 		{"tag and digest", svc, model.ImageVersion{ID: 10, Repo: repo, Tag: "1.3.0", Digest: "sha256:old"}, repo + ":1.3.0@sha256:old", protocol.MinPinnedRefVersion},
 		{"tag only", svc, model.ImageVersion{ID: 10, Repo: repo, Tag: "main"}, repo + ":main", protocol.MinJobVersion},
+		{"digest-less version from the tag list", svc, model.ImageVersion{ID: 10, Repo: repo, Tag: "1.28.0", Source: model.SourceTags}, repo + ":1.28.0", protocol.MinJobVersion},
 		{"digest only", svc, model.ImageVersion{ID: 10, Repo: repo, Digest: "sha256:old"}, repo + "@sha256:old", protocol.MinPinnedRefVersion},
 		{"service that follows no tag", noTag, model.ImageVersion{ID: 10, Repo: repo, Tag: "1.3.0", Digest: "sha256:old"}, repo + ":1.3.0@sha256:old", protocol.MinPinnedRefVersion},
 	}

internal/master/model/model.go

@@ -29,9 +29,12 @@ type Agent struct {
 	Hostname     string
 	AgentVersion string
 	SwarmManager bool
-	LastSeenAt   *time.Time
-	RevokedAt    *time.Time
-	CreatedAt    time.Time
+	// SwarmClusterID is the Swarm cluster the agent's daemon was in when it last
+	// connected; "" outside a swarm.
+	SwarmClusterID string
+	LastSeenAt     *time.Time
+	RevokedAt      *time.Time
+	CreatedAt      time.Time
 }
 
 // Service is one service as last reported by an agent.
@@ -63,6 +66,11 @@ type Service struct {
 	AvailableSource string // SourceWebhook or SourcePoll; "" when AvailableRef is empty
 	AvailableAt     *time.Time
 	LastPollError   string // last registry error for the followed ref; "" when fine
+	// NewerRef is the newest repo:tag from the registry's tag list that
+	// tagver.Newer finds for the followed tag; "" if none. A suggestion only:
+	// it is never deployed automatically, not even for auto services.
+	NewerRef string
+	NewerAt  *time.Time // when NewerRef was first suggested; nil when NewerRef is empty
 	// LastTagDigest is the newest digest of the followed tag that was deployed
 	// or started: set when the poller starts an auto job, when it sees the service
 	// already running that digest, and when any plain tag job succeeds (the
@@ -92,6 +100,9 @@ const (
 	// SourceRunning is used by image_versions only: an agent reported the
 	// version as running.
 	SourceRunning = "running"
+	// SourceTags is used by image_versions only: the tag appeared in the
+	// registry's tag list as a newer tag.
+	SourceTags = "tags"
 )
 
 // Available is a newer ref reported for a service.
@@ -110,7 +121,7 @@ type ImageVersion struct {
 	Repo        string
 	Tag         string
 	Digest      string
-	Source      string // SourceWebhook, SourcePoll or SourceRunning: the first source that saw it
+	Source      string // SourceWebhook, SourcePoll, SourceRunning or SourceTags: the first source that saw it
 	FirstSeenAt time.Time
 }
 

internal/master/poller/poller.go

@@ -1,6 +1,8 @@
 // Package poller checks the registry for new digests of the tags the
 // services follow. A new digest becomes the service's available version, and
-// a service in auto mode gets an update job.
+// a service in auto mode gets an update job. It also lists the tags of the
+// repos whose followed tag looks like a version and suggests a newer one;
+// that suggestion never starts a job.
 package poller
 
 import (
@@ -11,14 +13,19 @@ import (
 	"sync"
 	"time"
 
+	"github.com/shcizo/package-updater/internal/imageref"
 	"github.com/shcizo/package-updater/internal/master/events"
 	"github.com/shcizo/package-updater/internal/master/jobs"
 	"github.com/shcizo/package-updater/internal/master/model"
+	"github.com/shcizo/package-updater/internal/master/tagver"
 )
 
 // lookupTimeout bounds one registry lookup.
 const lookupTimeout = 30 * time.Second
 
+// listTimeout bounds one tag listing, which may take several requests.
+const listTimeout = 60 * time.Second
+
 // maxErrorBytes caps the registry error stored in services.last_poll_error.
 const maxErrorBytes = 500
 
@@ -28,6 +35,7 @@ type Store interface {
 	GetService(ctx context.Context, id int64) (model.Service, error)
 	SetAvailable(ctx context.Context, id int64, a model.Available) error
 	SetLastTagDigest(ctx context.Context, id int64, digest string) error
+	SetNewer(ctx context.Context, id int64, ref string, at time.Time) error
 	SetPollError(ctx context.Context, ids []int64, msg string) error
 }
 
@@ -36,10 +44,11 @@ type Jobs interface {
 	Start(ctx context.Context, svc model.Service, req jobs.StartRequest) (model.Job, error)
 }
 
-// Registry looks up the digest a "repo:tag" ref points at. *registry.Client
-// satisfies it.
+// Registry looks up the digest a "repo:tag" ref points at and lists the tags
+// of a repo. *registry.Client satisfies it.
 type Registry interface {
 	Digest(ctx context.Context, ref string) (string, error)
+	Tags(ctx context.Context, repo string) ([]string, error)
 }
 
 // Publisher receives change signals. *events.Broker satisfies it.
@@ -49,7 +58,7 @@ type Publisher interface{ Publish(t events.Topic) }
 type Config struct {
 	Interval   time.Duration // time between the end of a cycle and the start of the next (POLL_INTERVAL)
 	FirstDelay time.Duration // wait before the first cycle; 1 minute in production
-	Workers    int           // registry lookups in flight at once; 4 in production
+	Workers    int           // registry requests in flight at once; 4 in production
 }
 
 // Poller runs polling cycles.
@@ -112,13 +121,16 @@ type lookup struct {
 // cycleStats is what one cycle did, for the poll_cycle log line.
 type cycleStats struct {
 	refs, ok, failed, suggested, jobs, skipped int
+	reposListed, tagsFailed, newer             int
 	wrote                                      bool
 }
 
 // Cycle runs one poll over all services. It looks up every distinct followed
 // ref once, with at most Config.Workers lookups at a time, then records the
-// results. Writing results and starting jobs is not cut short by ctx ending
-// during the lookups, so a job that was marked is always started.
+// results. Then it lists the tags of each repo that has a service following a
+// version-like tag, once per repo, and records newer tags. Writing results and
+// starting jobs is not cut short by ctx ending during the lookups, so a job
+// that was marked is always started.
 func (p *Poller) Cycle(ctx context.Context) {
 	began := p.now()
 	svcs, err := p.store.ListServices(ctx)
@@ -152,19 +164,30 @@ func (p *Poller) Cycle(ctx context.Context) {
 		}
 		p.record(write, l, byRef[l.ref], &stats)
 	}
-	if stats.wrote {
-		p.pub.Publish(events.Services)
-	}
+	// Publish after the digest phase too: listing tags can take a while and
+	// an "Update available" should not wait for it.
+	p.publishIfWrote(&stats)
+	p.syncNewer(ctx, write, svcs, &stats)
+	p.publishIfWrote(&stats)
 	p.log.Info("poll_cycle", "refs", stats.refs, "ok", stats.ok, "failed", stats.failed,
 		"suggested", stats.suggested, "jobs", stats.jobs, "skipped", stats.skipped,
+		"repos_listed", stats.reposListed, "tags_failed", stats.tagsFailed, "newer", stats.newer,
 		"duration_ms", p.now().Sub(began).Milliseconds())
 }
 
-// lookupAll asks the registry for every ref, Config.Workers at a time. It
-// returns the answers in ref order and stops starting new lookups once ctx
-// is done; refs never looked up are missing from the result.
-func (p *Poller) lookupAll(ctx context.Context, refs []string) []lookup {
-	results := make([]*lookup, len(refs))
+// publishIfWrote tells the browsers to refresh if a phase of the cycle wrote
+// anything, and starts the next phase with a clean slate.
+func (p *Poller) publishIfWrote(stats *cycleStats) {
+	if stats.wrote {
+		p.pub.Publish(events.Services)
+		stats.wrote = false
+	}
+}
+
+// forEach calls fn(i) for i in [0, n), Config.Workers at a time, and stops
+// starting new calls once ctx is done. It returns when all started calls
+// have returned.
+func (p *Poller) forEach(ctx context.Context, n int, fn func(i int)) {
 	next := make(chan int)
 	var wg sync.WaitGroup
 	for w := 0; w < p.cfg.Workers; w++ {
@@ -172,15 +195,12 @@ func (p *Poller) lookupAll(ctx context.Context, refs []string) []lookup {
 		go func() {
 			defer wg.Done()
 			for i := range next {
-				lctx, cancel := context.WithTimeout(ctx, lookupTimeout)
-				d, err := p.reg.Digest(lctx, refs[i])
-				cancel()
-				results[i] = &lookup{ref: refs[i], digest: d, err: err}
+				fn(i)
 			}
 		}()
 	}
 feed:
-	for i := range refs {
+	for i := 0; i < n; i++ {
 		select {
 		case next <- i:
 		case <-ctx.Done():
@@ -189,6 +209,19 @@ feed:
 	}
 	close(next)
 	wg.Wait()
+}
+
+// lookupAll asks the registry for every ref, Config.Workers at a time. It
+// returns the answers in ref order and stops starting new lookups once ctx
+// is done; refs never looked up are missing from the result.
+func (p *Poller) lookupAll(ctx context.Context, refs []string) []lookup {
+	results := make([]*lookup, len(refs))
+	p.forEach(ctx, len(refs), func(i int) {
+		lctx, cancel := context.WithTimeout(ctx, lookupTimeout)
+		d, err := p.reg.Digest(lctx, refs[i])
+		cancel()
+		results[i] = &lookup{ref: refs[i], digest: d, err: err}
+	})
 	var out []lookup
 	for _, r := range results {
 		if r != nil {
@@ -198,6 +231,118 @@ feed:
 	return out
 }
 
+// tagList is the registry's answer for the tags of one repo.
+type tagList struct {
+	repo string
+	tags []string
+	err  error
+}
+
+// listAll lists the tags of every repo like lookupAll looks up refs.
+func (p *Poller) listAll(ctx context.Context, repos []string) []tagList {
+	results := make([]*tagList, len(repos))
+	p.forEach(ctx, len(repos), func(i int) {
+		lctx, cancel := context.WithTimeout(ctx, listTimeout)
+		tags, err := p.reg.Tags(lctx, repos[i])
+		cancel()
+		results[i] = &tagList{repo: repos[i], tags: tags, err: err}
+	})
+	var out []tagList
+	for _, r := range results {
+		if r != nil {
+			out = append(out, *r)
+		}
+	}
+	return out
+}
+
+// Followed returns the repo and tag svc follows: a bare image follows
+// "latest", and a digest-only reference follows no tag.
+func Followed(svc model.Service) (repo, tag string) {
+	ref := imageref.Parse(jobs.FollowedRef(svc.ActualRef))
+	return ref.Repo, ref.Tag
+}
+
+// followedComparable returns the repo and tag svc follows. ok is false unless
+// svc is polled and the tag can have a newer tag.
+func followedComparable(svc model.Service) (repo, tag string, ok bool) {
+	if SkipReason(svc) != "" {
+		return "", "", false
+	}
+	repo, tag = Followed(svc)
+	return repo, tag, tagver.Comparable(tag)
+}
+
+// syncNewer lists the tags of every repo that has a service following a
+// version-like tag, once per repo, and stores the newer tag of each service.
+// A service whose tag cannot have a newer tag any more gets its suggestion
+// cleared; one whose repo could not be listed keeps it, unless it names
+// another repo than the service follows now. Nothing is written
+// when the value is unchanged. It never starts a job, not even for an auto
+// service: a newer tag may be a major step the user has not chosen.
+func (p *Poller) syncNewer(ctx, write context.Context, svcs []model.Service, stats *cycleStats) {
+	seen := map[string]bool{}
+	var repos []string
+	for _, svc := range svcs {
+		if repo, _, ok := followedComparable(svc); ok && svc.RemovedAt == nil && !seen[repo] {
+			seen[repo] = true
+			repos = append(repos, repo)
+		}
+	}
+	lists := map[string][]string{}
+	for _, l := range p.listAll(ctx, repos) {
+		if l.err != nil {
+			p.log.Warn("poll_tags_failed", "repo", l.repo, "error", truncate(l.err.Error()))
+			if ctx.Err() == nil { // cancelled mid-listing: not the registry's fault
+				stats.tagsFailed++
+			}
+			continue
+		}
+		stats.reposListed++
+		lists[l.repo] = l.tags
+	}
+
+	type repoTag struct{ repo, tag string }
+	newest := map[repoTag]string{}
+	for _, svc := range svcs {
+		if svc.RemovedAt != nil {
+			continue
+		}
+		want := ""
+		if repo, tag, ok := followedComparable(svc); ok {
+			tags, listed := lists[repo]
+			if !listed && imageref.Parse(svc.NewerRef).Repo == repo {
+				if svc.NewerRef != "" {
+					stats.newer++
+				}
+				continue // not listed this cycle: keep what is stored
+			}
+			if listed {
+				key := repoTag{repo, tag}
+				n, done := newest[key]
+				if !done {
+					n, _ = tagver.Newer(tag, tags)
+					newest[key] = n
+				}
+				if n != "" {
+					want = repo + ":" + n
+				}
+			}
+		}
+		if want != "" {
+			stats.newer++
+		}
+		if want == svc.NewerRef {
+			continue
+		}
+		if err := p.store.SetNewer(write, svc.ID, want, p.now()); err != nil {
+			p.log.Error("poll_set_newer_failed", "service_id", svc.ID, "ref", want, "error", err)
+			continue
+		}
+		stats.wrote = true
+	}
+}
+
 // record stores one lookup result for the services that follow l.ref.
 func (p *Poller) record(ctx context.Context, l lookup, svcs []model.Service, stats *cycleStats) {
 	if l.err != nil {

internal/master/poller/poller_test.go

@@ -30,6 +30,12 @@ type pollErrorCall struct {
 	msg string
 }
 
+type newerCall struct {
+	id  int64
+	ref string
+	at  time.Time
+}
+
 type lastTagCall struct {
 	id     int64
 	digest string
@@ -40,6 +46,7 @@ type fakeStore struct {
 	services   []model.Service
 	fresh      map[int64]model.Service // what GetService returns instead of the listed row
 	lastTag    []lastTagCall
+	newer      []newerCall
 	listErr    error
 	available  []availableCall
 	pollErrors []pollErrorCall
@@ -86,6 +93,21 @@ func (f *fakeStore) SetAvailable(ctx context.Context, id int64, a model.Availabl
 	return nil
 }
 
+// SetNewer records the call and, like the database, changes the row the
+// next cycle lists.
+func (f *fakeStore) SetNewer(ctx context.Context, id int64, ref string, at time.Time) error {
+	f.mu.Lock()
+	defer f.mu.Unlock()
+	f.ctxErrs = append(f.ctxErrs, ctx.Err())
+	f.newer = append(f.newer, newerCall{id, ref, at})
+	for i := range f.services {
+		if f.services[i].ID == id {
+			f.services[i].NewerRef = ref
+		}
+	}
+	return nil
+}
+
 func (f *fakeStore) SetPollError(ctx context.Context, ids []int64, msg string) error {
 	f.mu.Lock()
 	defer f.mu.Unlock()
@@ -125,6 +147,36 @@ type fakeRegistry struct {
 	started  chan struct{} // receives a value whenever a lookup starts, if set
 	release  chan struct{} // lookups wait for it to be closed, if set
 	onResult func()        // called after a lookup computed its answer
+
+	tags       map[string][]string // repo -> tags
+	tagErrs    map[string]error    // repo -> error
+	tagCalls   []string
+	tagStarted chan struct{} // receives a value whenever a tag listing starts, if set
+	tagRelease chan struct{} // tag listings wait for it to be closed, if set
+	onTags     func()        // called after a tag listing computed its answer
+}
+
+func (f *fakeRegistry) Tags(ctx context.Context, repo string) ([]string, error) {
+	f.mu.Lock()
+	f.tagCalls = append(f.tagCalls, repo)
+	f.mu.Unlock()
+	if f.tagStarted != nil {
+		f.tagStarted <- struct{}{}
+	}
+	if f.tagRelease != nil {
+		select {
+		case <-f.tagRelease:
+		case <-ctx.Done():
+			return nil, ctx.Err()
+		}
+	}
+	if f.onTags != nil {
+		f.onTags()
+	}
+	if err := f.tagErrs[repo]; err != nil {
+		return nil, err
+	}
+	return f.tags[repo], nil
 }
 
 func (f *fakeRegistry) Digest(ctx context.Context, ref string) (string, error) {
@@ -649,3 +701,222 @@ func TestSeedsTheTagDigestOfARunningService(t *testing.T) {
 	assert.Empty(t, j.starts, "the rollback stays")
 	assert.Len(t, st.lastTag, 1, "nothing more to seed")
 }
+
+// newTagRegistry returns a fake registry that lists tags by repo.
+func newTagRegistry(tags map[string][]string) *fakeRegistry {
+	return &fakeRegistry{digests: map[string]string{}, tags: tags}
+}
+
+// newerSvc is a polled service running tag of repo that already runs the
+// registry's digest, so the digest phase writes nothing.
+func newerSvc(id int64, repo, tag string) model.Service {
+	s := svc(id, repo+":"+tag)
+	s.ActualDigest = "sha256:new"
+	return s
+}
+
+// newerRegistry is newTagRegistry that also answers sha256:new for refs.
+func newerRegistry(tags map[string][]string, refs ...string) *fakeRegistry {
+	reg := newTagRegistry(tags)
+	for _, r := range refs {
+		reg.digests[r] = "sha256:new"
+	}
+	return reg
+}
+
+func TestNewerTagSuggested(t *testing.T) {
+	ref := repoB + ":1.27.3"
+	st := &fakeStore{services: []model.Service{newerSvc(1, repoB, "1.27.3")}}
+	reg := newerRegistry(map[string][]string{repoB: {"1.27.4", "1.28.0", "2.0.0", "latest", "1.28.1-rootless"}}, ref)
+	p, pub := newPoller(st, &fakeJobs{}, reg, Config{})
+
+	p.Cycle(context.Background())
+
+	assert.Equal(t, []newerCall{{1, repoB + ":1.28.0", time.Date(2026, 10, 13, 12, 0, 0, 0, time.UTC)}}, st.newer)
+	assert.Equal(t, []events.Topic{events.Services}, pub.topics)
+}
+
+func TestOneTagListPerRepo(t *testing.T) {
+	st := &fakeStore{services: []model.Service{
+		newerSvc(1, repoB, "1.27.3"),
+		newerSvc(2, repoB, "2.1.0"),
+		newerSvc(3, repoB, "1.27.3"),
+	}}
+	reg := newerRegistry(map[string][]string{repoB: {"2.1.1", "1.27.4"}},
+		repoB+":1.27.3", repoB+":2.1.0")
+	p, _ := newPoller(st, &fakeJobs{}, reg, Config{})
+
+	p.Cycle(context.Background())
+
+	assert.Equal(t, []string{repoB}, reg.tagCalls)
+	got := map[int64]string{}
+	for _, c := range st.newer {
+		got[c.id] = c.ref
+	}
+	assert.Equal(t, map[int64]string{1: repoB + ":1.27.4", 2: repoB + ":2.1.1", 3: repoB + ":1.27.4"}, got)
+}
+
+func TestNoTagListWithoutComparableTag(t *testing.T) {
+	built := newerSvc(5, repoB, "1.2.3")
+	built.Built = true
+	noDigest := newerSvc(6, repoB, "1.2.3")
+	noDigest.ActualDigest = ""
+	st := &fakeStore{services: []model.Service{
+		newerSvc(1, repoB, "latest"),
+		newerSvc(2, repoB, "7"),
+		newerSvc(3, repoB, "pg16"),
+		newerSvc(4, repoB+"@sha256:abc", ""),
+		built,
+		noDigest,
+	}}
+	st.services[3].ActualRef = repoB + "@sha256:abc"
+	reg := newTagRegistry(map[string][]string{repoB: {"1.2.4"}})
+	p, _ := newPoller(st, &fakeJobs{}, reg, Config{})
+
+	p.Cycle(context.Background())
+
+	assert.Empty(t, reg.tagCalls)
+	assert.Empty(t, st.newer)
+}
+
+func TestNewerClearedWhenNoCandidate(t *testing.T) {
+	s := newerSvc(1, repoB, "1.27.3")
+	s.NewerRef = repoB + ":1.27.4"
+	st := &fakeStore{services: []model.Service{s}}
+	reg := newerRegistry(map[string][]string{repoB: {"1.27.3", "2.0.0"}}, repoB+":1.27.3")
+	p, _ := newPoller(st, &fakeJobs{}, reg, Config{})
+
+	p.Cycle(context.Background())
+
+	assert.Equal(t, []newerCall{{1, "", time.Date(2026, 10, 13, 12, 0, 0, 0, time.UTC)}}, st.newer)
+}
+
+func TestNewerClearedWhenTagNoLongerComparable(t *testing.T) {
+	moved := newerSvc(1, repoB, "latest")
+	moved.NewerRef = repoB + ":1.27.4"
+	built := newerSvc(2, repoB, "1.27.3")
+	built.Built = true
+	built.NewerRef = repoB + ":1.27.4"
+	st := &fakeStore{services: []model.Service{moved, built}}
+	reg := newerRegistry(map[string][]string{repoB: {"1.27.4"}}, repoB+":latest")
+	p, pub := newPoller(st, &fakeJobs{}, reg, Config{})
+
+	p.Cycle(context.Background())
+
+	require.Len(t, st.newer, 2)
+	assert.Equal(t, "", st.newer[0].ref)
+	assert.Equal(t, "", st.newer[1].ref)
+	assert.Empty(t, reg.tagCalls)
+	assert.Equal(t, []events.Topic{events.Services}, pub.topics)
+}
+
+func TestTagListErrorKeepsNewerAndPollError(t *testing.T) {
+	s := newerSvc(1, repoB, "1.27.3")
+	s.NewerRef = repoB + ":1.27.4"
+	st := &fakeStore{services: []model.Service{s}}
+	reg := newerRegistry(nil, repoB+":1.27.3")
+	reg.tagErrs = map[string]error{repoB: errors.New("list x: registry answered 500 Internal Server Error")}
+	p, pub := newPoller(st, &fakeJobs{}, reg, Config{})
+
+	p.Cycle(context.Background())
+
+	assert.Empty(t, st.newer, "the stored suggestion stays")
+	assert.Empty(t, st.pollErrors, "a failed tag list is not a poll error")
+	assert.Empty(t, pub.topics)
+}
+
+func TestNewerIdempotent(t *testing.T) {
+	s := newerSvc(1, repoB, "1.27.3")
+	s.NewerRef = repoB + ":1.28.0"
+	st := &fakeStore{services: []model.Service{s}}
+	reg := newerRegistry(map[string][]string{repoB: {"1.28.0"}}, repoB+":1.27.3")
+	p, pub := newPoller(st, &fakeJobs{}, reg, Config{})
+
+	p.Cycle(context.Background())
+
+	assert.Empty(t, st.newer)
+	assert.Empty(t, pub.topics)
+}
+
+func TestNewerNeverStartsJobs(t *testing.T) {
+	s := newerSvc(1, repoB, "1.27.3")
+	s.UpdateMode = model.ModeAuto
+	st := &fakeStore{services: []model.Service{s}}
+	reg := newerRegistry(map[string][]string{repoB: {"1.27.4"}}, repoB+":1.27.3")
+	j := &fakeJobs{}
+	p, _ := newPoller(st, j, reg, Config{})
+
+	p.Cycle(context.Background())
+
+	require.Len(t, st.newer, 1)
+	assert.Empty(t, j.starts)
+}
+
+func TestNewerWritesSurviveCancel(t *testing.T) {
+	st := &fakeStore{services: []model.Service{newerSvc(1, repoB, "1.27.3")}}
+	ctx, cancel := context.WithCancel(context.Background())
+	reg := newerRegistry(map[string][]string{repoB: {"1.27.4"}}, repoB+":1.27.3")
+	reg.onTags = cancel
+	p, _ := newPoller(st, &fakeJobs{}, reg, Config{})
+
+	p.Cycle(ctx)
+
+	require.Len(t, st.newer, 1)
+	assert.NoError(t, st.ctxErrs[0], "the write does not see the cancelled context")
+}
+
+func TestCancelledListKeepsNewer(t *testing.T) {
+	s := newerSvc(1, repoB, "1.27.3")
+	s.NewerRef = repoB + ":1.27.4"
+	st := &fakeStore{services: []model.Service{s}}
+	reg := newerRegistry(map[string][]string{repoB: {"1.28.0"}}, repoB+":1.27.3")
+	reg.tagRelease = make(chan struct{})
+	reg.tagStarted = make(chan struct{}, 1)
+	p, pub := newPoller(st, &fakeJobs{}, reg, Config{})
+	ctx, cancel := context.WithCancel(context.Background())
+	done := make(chan struct{})
+	go func() { p.Cycle(ctx); close(done) }()
+	<-reg.tagStarted
+
+	cancel()
+
+	select {
+	case <-done:
+	case <-time.After(2 * time.Second):
+		t.Fatal("Cycle did not return after cancel")
+	}
+	assert.Empty(t, st.newer)
+	assert.Empty(t, pub.topics)
+}
+
+func TestFailedListClearsNewerFromAnotherRepo(t *testing.T) {
+	s := newerSvc(1, repoB, "1.27.3")
+	s.NewerRef = repoA + ":1.27.4"
+	st := &fakeStore{services: []model.Service{s}}
+	reg := newerRegistry(nil, repoB+":1.27.3")
+	reg.tagErrs = map[string]error{repoB: errors.New("list x: registry answered 500 Internal Server Error")}
+	p, _ := newPoller(st, &fakeJobs{}, reg, Config{})
+
+	p.Cycle(context.Background())
+
+	assert.Equal(t, []newerCall{{1, "", time.Date(2026, 10, 13, 12, 0, 0, 0, time.UTC)}}, st.newer)
+}
+
+func TestDigestWritesArePublishedBeforeTagsAreListed(t *testing.T) {
+	st := &fakeStore{services: []model.Service{svc(1, repoB+":1.27.3")}}
+	reg := newerRegistry(map[string][]string{repoB: {"1.27.3"}}, repoB+":1.27.3")
+	reg.tagRelease = make(chan struct{})
+	reg.tagStarted = make(chan struct{}, 1)
+	p, pub := newPoller(st, &fakeJobs{}, reg, Config{})
+	done := make(chan struct{})
+	go func() { p.Cycle(context.Background()); close(done) }()
+	<-reg.tagStarted
+
+	pub.mu.Lock()
+	published := append([]events.Topic(nil), pub.topics...)
+	pub.mu.Unlock()
+	assert.Equal(t, []events.Topic{events.Services}, published, "published while the listing is still blocked")
+
+	close(reg.tagRelease)
+	<-done
+}

internal/master/registry/registry.go

@@ -1,5 +1,6 @@
 // Package registry looks up the digest a tag points at in a container
-// registry, using HEAD requests only.
+// registry and lists the tags of a repository. Manifests are only ever
+// requested with HEAD.
 package registry
 
 import (
@@ -21,9 +22,10 @@ import (
 	"github.com/shcizo/package-updater/internal/imageref"
 )
 
-// Client looks up tag digests with HEAD requests only. Docker Hub counts a
-// GET of a manifest as a pull against the rate limit and a HEAD as nothing,
-// so Client never issues a manifest GET.
+// Client looks up tag digests and lists tags. Docker Hub counts a GET of a
+// manifest as a pull against the rate limit and a HEAD as nothing, so Client
+// never issues a manifest GET. The only GETs it sends are the /v2/ ping and
+// tags/list, which Docker Hub does not count as a pull.
 type Client struct {
 	keychain  authn.Keychain
 	userAgent string
@@ -65,16 +67,46 @@ func (c *Client) Digest(ctx context.Context, ref string) (string, error) {
 		remote.WithAuth(auth),
 		remote.WithUserAgent(c.userAgent))
 	if err != nil {
-		var terr *transport.Error
-		if errors.As(err, &terr) {
-			return "", fmt.Errorf("lookup %s: %s", r, describe(terr))
-		}
-		c.log.Warn("registry_lookup_failed", "ref", ref, "error", err)
-		return "", fmt.Errorf("lookup %s: %s", r, classify(err))
+		return "", c.lookupError("lookup", r.String(), ref, err)
 	}
 	return desc.Digest.String(), nil
 }
 
+// Tags returns every tag of repo ("host/path", or a Docker Hub name), in the
+// order the registry lists them. It sends GET /v2/<repo>/tags/list, following
+// the registry's pagination links. Errors are sanitised like Digest's.
+func (c *Client) Tags(ctx context.Context, repo string) ([]string, error) {
+	r, err := name.NewRepository(repo)
+	if err != nil {
+		return nil, fmt.Errorf("parse %s: %w", repo, err)
+	}
+	auth, err := c.keychain.Resolve(r)
+	if err != nil {
+		return nil, fmt.Errorf("list %s: %w", r, err)
+	}
+	tags, err := remote.List(r,
+		remote.WithContext(ctx),
+		remote.WithAuth(auth),
+		remote.WithUserAgent(c.userAgent))
+	if err != nil {
+		return nil, c.lookupError("list", r.String(), repo, err)
+	}
+	return tags, nil
+}
+
+// lookupError turns a failed registry request into an error that is safe to
+// show: a registry answer is described by its status and codes, anything
+// else by a fixed text. The full error goes to the log. verb and target
+// start the message; ref is what the log line names.
+func (c *Client) lookupError(verb, target, ref string, err error) error {
+	var terr *transport.Error
+	if errors.As(err, &terr) {
+		return fmt.Errorf("%s %s: %s", verb, target, describe(terr))
+	}
+	c.log.Warn("registry_request_failed", "ref", ref, "error", err)
+	return fmt.Errorf("%s %s: %s", verb, target, classify(err))
+}
+
 // classify returns a fixed text for an error that is not a registry answer.
 // ggcr copies registry-controlled text (token responses, authentication
 // challenges, redirect URLs, certificate names) into such errors, so none of

internal/master/registry/registry_test.go

@@ -134,6 +134,8 @@ func TestDigestIgnoresDigestSuffix(t *testing.T) {
 	assert.Equal(t, want, got)
 }
 
+// Digest asks the manifest endpoint with HEAD only; the one other request is
+// the GET /v2/ ping that every client sends first.
 func TestDigestUsesHeadOnly(t *testing.T) {
 	dockerConfig(t, "")
 	reg := newTestRegistry(t, "", "")
@@ -236,7 +238,7 @@ func TestCredsStoreWithoutHelperFailsTheLookup(t *testing.T) {
 }
 
 // A registry that leaves out Docker-Content-Digest must not make the client
-// retry with a manifest download, which Docker Hub counts as a pull.
+// retry with a manifest GET, which Docker Hub counts as a pull.
 func TestMissingDigestHeaderDoesNotFallBackToDownload(t *testing.T) {
 	dockerConfig(t, "")
 	var mu sync.Mutex
@@ -334,3 +336,101 @@ func TestClassify(t *testing.T) {
 		})
 	}
 }
+
+// pushTags stores a random index under each tag of repo.
+func (tr *testRegistry) pushTags(t *testing.T, repo string, tags ...string) {
+	t.Helper()
+	for _, tag := range tags {
+		tr.pushIndex(t, repo, tag)
+	}
+}
+
+// Digest and Tags together never GET a manifest: every manifest request is a
+// HEAD, and the only other requests are the /v2/ ping and tags/list.
+func TestNoManifestGet(t *testing.T) {
+	dockerConfig(t, "")
+	reg := newTestRegistry(t, "", "")
+	reg.pushTags(t, "team/app", "1.2", "1.3")
+	reg.reset()
+
+	_, err := newClient().Digest(context.Background(), reg.host+"/team/app:1.2")
+	require.NoError(t, err)
+	_, err = newClient().Tags(context.Background(), reg.host+"/team/app")
+	require.NoError(t, err)
+
+	reg.mu.Lock()
+	defer reg.mu.Unlock()
+	for _, r := range reg.requests {
+		switch {
+		case strings.Contains(r.path, "/manifests/"):
+			assert.Equal(t, http.MethodHead, r.method, r.path)
+		case r.path == "/v2/", r.path == "/v2/team/app/tags/list":
+			assert.Equal(t, http.MethodGet, r.method, r.path)
+		default:
+			assert.Failf(t, "unexpected request", "%s %s", r.method, r.path)
+		}
+	}
+}
+
+func TestTagsListsAllTags(t *testing.T) {
+	dockerConfig(t, "")
+	reg := newTestRegistry(t, "", "")
+	reg.pushTags(t, "team/app", "1.2", "1.3", "latest")
+
+	got, err := newClient().Tags(context.Background(), reg.host+"/team/app")
+
+	require.NoError(t, err)
+	assert.ElementsMatch(t, []string{"1.2", "1.3", "latest"}, got)
+}
+
+// ggcr's in-memory registry sends no Link header, so pagination is tested
+// against a handler that does.
+func TestTagsFollowsLinkPagination(t *testing.T) {
+	dockerConfig(t, "")
+	srv := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		switch {
+		case r.URL.Path == "/v2/":
+		case r.URL.Path == "/v2/a/b/tags/list" && r.URL.Query().Get("last") == "":
+			w.Header().Set("Link", `</v2/a/b/tags/list?last=1.3&n=2>; rel="next"`)
+			_, _ = w.Write([]byte(`{"name":"a/b","tags":["1.2","1.3"]}`))
+		case r.URL.Path == "/v2/a/b/tags/list":
+			_, _ = w.Write([]byte(`{"name":"a/b","tags":["1.4"]}`))
+		default:
+			w.WriteHeader(http.StatusNotFound)
+		}
+	}))
+	t.Cleanup(srv.Close)
+
+	got, err := newClient().Tags(context.Background(), strings.TrimPrefix(srv.URL, "http://")+"/a/b")
+
+	require.NoError(t, err)
+	assert.Equal(t, []string{"1.2", "1.3", "1.4"}, got)
+}
+
+func TestTagsUsesDockerConfigCredentials(t *testing.T) {
+	reg := newTestRegistry(t, "bot", "s3cret")
+	reg.pushIndex(t, "team/app", "1.2", remote.WithAuth(&authn.Basic{Username: "bot", Password: "s3cret"}))
+	auth := base64.StdEncoding.EncodeToString([]byte("bot:s3cret"))
+	dockerConfig(t, `{"auths":{"`+reg.host+`":{"auth":"`+auth+`"}}}`)
+
+	got, err := newClient().Tags(context.Background(), reg.host+"/team/app")
+
+	require.NoError(t, err)
+	assert.Equal(t, []string{"1.2"}, got)
+}
+
+func TestTagsErrorBodyDoesNotLeak(t *testing.T) {
+	dockerConfig(t, "")
+	srv := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		w.WriteHeader(http.StatusBadRequest)
+		_, _ = w.Write([]byte(`{"errors":[{"code":"NAME_UNKNOWN","message":"internal-secret-body"}]}`))
+	}))
+	t.Cleanup(srv.Close)
+	host := strings.TrimPrefix(srv.URL, "http://")
+
+	_, err := newClient().Tags(context.Background(), host+"/a/b")
+
+	require.Error(t, err)
+	assert.NotContains(t, err.Error(), "internal-secret-body")
+	assert.ErrorContains(t, err, "list "+host+"/a/b: registry answered 400 Bad Request")
+}

internal/master/store/agents.go

@@ -13,11 +13,11 @@ import (
 	"github.com/shcizo/package-updater/internal/protocol"
 )
 
-const agentColumns = `id, name, hostname, agent_version, swarm_manager, last_seen_at, revoked_at, created_at`
+const agentColumns = `id, name, hostname, agent_version, swarm_manager, swarm_cluster_id, last_seen_at, revoked_at, created_at`
 
 func scanAgent(row pgx.Row) (model.Agent, error) {
 	var a model.Agent
-	err := row.Scan(&a.ID, &a.Name, &a.Hostname, &a.AgentVersion, &a.SwarmManager, &a.LastSeenAt, &a.RevokedAt, &a.CreatedAt)
+	err := row.Scan(&a.ID, &a.Name, &a.Hostname, &a.AgentVersion, &a.SwarmManager, &a.SwarmClusterID, &a.LastSeenAt, &a.RevokedAt, &a.CreatedAt)
 	if errors.Is(err, pgx.ErrNoRows) {
 		return model.Agent{}, model.ErrNotFound
 	}
@@ -101,8 +101,8 @@ func (s *Store) RevokeAgent(ctx context.Context, id int64, at time.Time) ([]int6
 // RecordHello stores what the agent reported about itself on connect.
 func (s *Store) RecordHello(ctx context.Context, id int64, h protocol.Hello, at time.Time) error {
 	if _, err := s.pool.Exec(ctx,
-		`UPDATE agents SET hostname = $2, agent_version = $3, swarm_manager = $4, last_seen_at = $5 WHERE id = $1`,
-		id, h.Hostname, h.AgentVersion, h.SwarmManager, at); err != nil {
+		`UPDATE agents SET hostname = $2, agent_version = $3, swarm_manager = $4, swarm_cluster_id = $6, last_seen_at = $5 WHERE id = $1`,
+		id, h.Hostname, h.AgentVersion, h.SwarmManager, at, h.SwarmClusterID); err != nil {
 		return fmt.Errorf("record hello: %w", err)
 	}
 	return nil

internal/master/store/agents_integration_test.go

@@ -80,6 +80,7 @@ func TestAgents_RecordHelloAndMarkSeen(t *testing.T) {
 	assert.Equal(t, "swarm-mgr", agents[0].Hostname)
 	assert.Equal(t, "v1", agents[0].AgentVersion)
 	assert.True(t, agents[0].SwarmManager)
+	assert.Equal(t, "c1", agents[0].SwarmClusterID)
 	require.NotNil(t, agents[0].LastSeenAt)
 	assert.True(t, agents[0].LastSeenAt.Equal(at.Add(time.Minute)))
 }

internal/master/store/drift_merge_integration_test.go

@@ -275,6 +275,7 @@ func TestMergeService_MovesHistoryModeAndDesiredToTheNewLocation(t *testing.T) {
 	require.NoError(t, s.SetLastTagDigest(ctx, f.to, "sha256:fromto"))
 	require.NoError(t, s.SetAvailable(ctx, f.to, model.Available{Ref: sluskDrift + ":3", Digest: digNew, Source: model.SourcePoll, At: t0}))
 	require.NoError(t, s.SetPollError(ctx, []int64{f.to}, "registry down"))
+	require.NoError(t, s.SetNewer(ctx, f.to, sluskDrift+":3.1", t0))
 	// A job on the old row is finished, and awaiting_inventory is set on both.
 	before, err := s.GetService(ctx, f.from)
 	require.NoError(t, err)
@@ -297,6 +298,9 @@ func TestMergeService_MovesHistoryModeAndDesiredToTheNewLocation(t *testing.T) {
 	assert.Equal(t, sluskDrift+":3", got.AvailableRef)
 	assert.Equal(t, digNew, got.AvailableDigest)
 	assert.Equal(t, "registry down", got.LastPollError)
+	assert.Equal(t, sluskDrift+":3.1", got.NewerRef, "newer tag from the duplicate")
+	require.NotNil(t, got.NewerAt)
+	assert.True(t, t0.Equal(*got.NewerAt))
 	assert.Equal(t, before.LastTagDigest, got.LastTagDigest, "an existing last_tag_digest wins")
 
 	_, err = s.GetService(ctx, f.to)

internal/master/store/merge.go

@@ -106,9 +106,9 @@ type mergeRow struct {
 
 // MergeService moves the live service toID onto the removed service fromID:
 // the old row keeps its id, first_seen_at, update mode and desired ref, takes
-// the location and inventory of the live row (and its available suggestion),
-// becomes live, and the live row is deleted. The jobs of the live row move to
-// the old one. This is the only place a services row is deleted.
+// the location and inventory of the live row (and its available and newer-tag
+// suggestions), becomes live, and the live row is deleted. The jobs of the live
+// row move to the old one. This is the only place a services row is deleted.
 //
 // It returns *model.MergeRefusedError when the pair cannot be merged,
 // model.ErrJobActive when either row has a queued or running job,
@@ -195,12 +195,12 @@ func (s *Store) MergeService(ctx context.Context, fromID, toID int64) error {
 		SELECT agent_id, location_key, compose_project, compose_service, working_dir, config_files, built,
 		       swarm_cluster_id, swarm_service, container_name, image_repo, actual_ref, actual_digest, status, self,
 		       updated_at, available_ref, available_digest, available_source, available_at, last_poll_error,
-		       last_tag_digest
+		       last_tag_digest, newer_ref, newer_at
 		FROM services WHERE id = $1`, toID).Scan(
 		&t.AgentID, &t.LocationKey, &t.ComposeProject, &t.ComposeService, &t.WorkingDir, &t.ConfigFiles, &t.Built,
 		&t.SwarmClusterID, &t.SwarmService, &t.ContainerName, &t.ImageRepo, &t.ActualRef, &t.ActualDigest, &t.Status, &t.Self,
 		&t.UpdatedAt, &t.AvailableRef, &t.AvailableDigest, &t.AvailableSource, &t.AvailableAt, &t.LastPollError,
-		&lastTagDigest)
+		&lastTagDigest, &t.NewerRef, &t.NewerAt)
 	if err != nil {
 		return fmt.Errorf("merge: read new service: %w", err)
 	}
@@ -215,13 +215,14 @@ func (s *Store) MergeService(ctx context.Context, fromID, toID int64) error {
 			available_ref = $18, available_digest = $19, available_source = $20, available_at = $21,
 			last_poll_error = $22,
 			last_tag_digest = CASE WHEN last_tag_digest <> '' THEN last_tag_digest ELSE $23 END,
+			newer_ref = $24, newer_at = $25,
 			removed_at = NULL, awaiting_inventory = false
 		WHERE id = $1`,
 		fromID, t.AgentID, t.LocationKey, t.ComposeProject, t.ComposeService, t.WorkingDir,
 		t.ConfigFiles, t.Built, t.SwarmClusterID, t.SwarmService, t.ContainerName,
 		t.ImageRepo, t.ActualRef, t.ActualDigest, t.Status, t.Self, t.UpdatedAt,
 		t.AvailableRef, t.AvailableDigest, t.AvailableSource, t.AvailableAt,
-		t.LastPollError, lastTagDigest); err != nil {
+		t.LastPollError, lastTagDigest, t.NewerRef, t.NewerAt); err != nil {
 		return fmt.Errorf("merge: update old service: %w", err)
 	}
 	if err := tx.Commit(ctx); err != nil {

internal/master/store/migrations/0006_agent_cluster.sql

@@ -0,0 +1 @@
+ALTER TABLE agents ADD COLUMN swarm_cluster_id text NOT NULL DEFAULT '';

internal/master/store/migrations/0007_newer_tag.sql

@@ -0,0 +1,9 @@
+-- Newer version tag of the followed tag, found in the registry's tag list.
+-- A suggestion only: nothing deploys it automatically.
+ALTER TABLE services ADD COLUMN newer_ref text NOT NULL DEFAULT '';
+ALTER TABLE services ADD COLUMN newer_at  timestamptz;
+
+-- A suggested tag is recorded in image_versions with source 'tags'.
+ALTER TABLE image_versions DROP CONSTRAINT image_versions_source_check;
+ALTER TABLE image_versions ADD CONSTRAINT image_versions_source_check
+    CHECK (source IN ('webhook', 'poll', 'running', 'tags'));

internal/master/store/services.go

@@ -175,7 +175,7 @@ const serviceColumns = `s.id, s.kind, s.location_key, s.agent_id, COALESCE(a.nam
 	s.compose_project, s.compose_service, s.working_dir, s.config_files, s.built, s.swarm_cluster_id,
 	s.swarm_service, s.container_name, s.image_repo, s.desired_ref, s.actual_ref, s.actual_digest,
 	s.status, s.self, s.update_mode, s.available_ref, s.available_digest, s.available_source, s.available_at,
-	s.last_poll_error, s.last_tag_digest, s.awaiting_inventory, s.first_seen_at, s.updated_at, s.removed_at`
+	s.last_poll_error, s.newer_ref, s.newer_at, s.last_tag_digest, s.awaiting_inventory, s.first_seen_at, s.updated_at, s.removed_at`
 
 func scanService(row pgx.Row) (model.Service, error) {
 	var m model.Service
@@ -184,7 +184,7 @@ func scanService(row pgx.Row) (model.Service, error) {
 		&m.ComposeProject, &m.ComposeService, &m.WorkingDir, &m.ConfigFiles, &m.Built, &m.SwarmClusterID,
 		&m.SwarmService, &m.ContainerName, &m.ImageRepo, &m.DesiredRef, &m.ActualRef, &m.ActualDigest,
 		&m.Status, &m.Self, &m.UpdateMode, &m.AvailableRef, &m.AvailableDigest, &m.AvailableSource, &m.AvailableAt,
-		&m.LastPollError, &m.LastTagDigest, &m.AwaitingInventory, &m.FirstSeenAt, &m.UpdatedAt, &m.RemovedAt)
+		&m.LastPollError, &m.NewerRef, &m.NewerAt, &m.LastTagDigest, &m.AwaitingInventory, &m.FirstSeenAt, &m.UpdatedAt, &m.RemovedAt)
 	m.Kind = protocol.Kind(kind)
 	return m, err
 }
@@ -246,6 +246,33 @@ func (s *Store) SetAvailable(ctx context.Context, id int64, a model.Available) e
 	return nil
 }
 
+// SetNewer sets the service's newer-tag suggestion (model.Service.NewerRef);
+// ref "" clears it. A non-empty ref is also recorded in image_versions with
+// source "tags", in the same transaction, unless that (repo, tag) is already
+// there. The digest is unknown, so the row has none.
+func (s *Store) SetNewer(ctx context.Context, id int64, ref string, at time.Time) error {
+	tx, err := s.pool.Begin(ctx)
+	if err != nil {
+		return fmt.Errorf("set newer: begin: %w", err)
+	}
+	defer func() { _ = tx.Rollback(ctx) }()
+	if _, err := tx.Exec(ctx, `
+		UPDATE services SET newer_ref = $2, newer_at = CASE WHEN $2 = '' THEN NULL ELSE $3::timestamptz END
+		WHERE id = $1`, id, ref, at); err != nil {
+		return fmt.Errorf("set newer: %w", err)
+	}
+	if ref != "" {
+		p := imageref.Parse(ref)
+		if err := insertVersion(ctx, tx, p.Repo, p.Tag, "", model.SourceTags, at); err != nil {
+			return err
+		}
+	}
+	if err := tx.Commit(ctx); err != nil {
+		return fmt.Errorf("set newer: commit: %w", err)
+	}
+	return nil
+}
+
 // SetPollError sets last_poll_error on the given services; msg "" clears it.
 func (s *Store) SetPollError(ctx context.Context, ids []int64, msg string) error {
 	if len(ids) == 0 {
@@ -313,6 +340,23 @@ func (s *Store) GetImageVersion(ctx context.Context, id int64) (model.ImageVersi
 	return v, nil
 }
 
+// GetTagVersion returns the version row of repo and tag with an empty digest, which
+// SetNewer and the webhook create. Returns model.ErrNotFound if there is none.
+func (s *Store) GetTagVersion(ctx context.Context, repo, tag string) (model.ImageVersion, error) {
+	var v model.ImageVersion
+	err := s.pool.QueryRow(ctx, `
+		SELECT id, repo, tag, digest, source, first_seen_at FROM image_versions
+		WHERE repo = $1 AND tag = $2 AND digest = ''`, repo, tag,
+	).Scan(&v.ID, &v.Repo, &v.Tag, &v.Digest, &v.Source, &v.FirstSeenAt)
+	if errors.Is(err, pgx.ErrNoRows) {
+		return model.ImageVersion{}, model.ErrNotFound
+	}
+	if err != nil {
+		return model.ImageVersion{}, fmt.Errorf("get tag version: %w", err)
+	}
+	return v, nil
+}
+
 // SetUpdateMode sets the service's update mode (model.ModeManual or
 // model.ModeAuto). Returns model.ErrNotFound if the service does not exist
 // or is marked removed.

internal/master/store/versions_integration_test.go

@@ -214,3 +214,79 @@ func TestSetLastTagDigest(t *testing.T) {
 	require.Len(t, list, 1)
 	assert.Equal(t, "sha256:n1", list[0].LastTagDigest)
 }
+
+func TestSetNewer_SetsAndClears(t *testing.T) {
+	s := openTestStore(t)
+	ctx := context.Background()
+	_, svc := jobFixture(t, s, "a")
+
+	require.NoError(t, s.SetNewer(ctx, svc, sluskRepo+":1.5.0", t0))
+
+	got, err := s.GetService(ctx, svc)
+	require.NoError(t, err)
+	assert.Equal(t, sluskRepo+":1.5.0", got.NewerRef)
+	require.NotNil(t, got.NewerAt)
+	assert.True(t, t0.Equal(*got.NewerAt))
+	v, err := s.GetTagVersion(ctx, sluskRepo, "1.5.0")
+	require.NoError(t, err)
+	assert.Equal(t, model.SourceTags, v.Source)
+	assert.Empty(t, v.Digest)
+	assert.True(t, t0.Equal(v.FirstSeenAt))
+
+	require.NoError(t, s.SetNewer(ctx, svc, "", t0.Add(time.Hour)))
+
+	got, err = s.GetService(ctx, svc)
+	require.NoError(t, err)
+	assert.Empty(t, got.NewerRef)
+	assert.Nil(t, got.NewerAt)
+	_, err = s.GetTagVersion(ctx, sluskRepo, "1.5.0")
+	assert.NoError(t, err, "clearing the suggestion keeps the version")
+}
+
+func TestSetNewer_KeepsEarlierVersionSource(t *testing.T) {
+	s := openTestStore(t)
+	ctx := context.Background()
+	_, svc := jobFixture(t, s, "a")
+	require.NoError(t, s.SetAvailable(ctx, svc, model.Available{Ref: sluskRepo + ":1.5.0", Source: model.SourceWebhook, At: t0}))
+
+	require.NoError(t, s.SetNewer(ctx, svc, sluskRepo+":1.5.0", t0.Add(time.Hour)))
+
+	v, err := s.GetTagVersion(ctx, sluskRepo, "1.5.0")
+	require.NoError(t, err)
+	assert.Equal(t, model.SourceWebhook, v.Source)
+	assert.True(t, t0.Equal(v.FirstSeenAt))
+}
+
+func TestRecentVersions_TagsRowHiddenOnceDigestKnown(t *testing.T) {
+	s := openTestStore(t)
+	ctx := context.Background()
+	_, svc := jobFixture(t, s, "a")
+	require.NoError(t, s.SetNewer(ctx, svc, sluskRepo+":1.5.0", t0.Add(time.Minute)))
+	require.Len(t, versionsOf(t, s, sluskRepo), 2, "running 1.4.2 and the tags row")
+
+	require.NoError(t, s.SetAvailable(ctx, svc, model.Available{Ref: sluskRepo + ":1.5.0", Digest: "sha256:n1", Source: model.SourcePoll, At: t0.Add(2 * time.Minute)}))
+
+	var refs []string
+	for _, v := range versionsOf(t, s, sluskRepo) {
+		refs = append(refs, v.Ref())
+	}
+	assert.Equal(t, []string{sluskRepo + ":1.5.0@sha256:n1", sluskRepo + ":1.4.2@" + digD1}, refs)
+}
+
+func TestGetTagVersion(t *testing.T) {
+	s := openTestStore(t)
+	ctx := context.Background()
+	_, svc := jobFixture(t, s, "a")
+	require.NoError(t, s.SetNewer(ctx, svc, sluskRepo+":1.5.0", t0))
+
+	got, err := s.GetTagVersion(ctx, sluskRepo, "1.5.0")
+	require.NoError(t, err)
+	assert.Equal(t, sluskRepo+":1.5.0", got.Ref())
+
+	_, err = s.GetTagVersion(ctx, sluskRepo, "9.9.9")
+	assert.ErrorIs(t, err, model.ErrNotFound)
+	_, err = s.GetTagVersion(ctx, "other/repo", "1.5.0")
+	assert.ErrorIs(t, err, model.ErrNotFound)
+	_, err = s.GetTagVersion(ctx, sluskRepo, "1.4.2")
+	assert.ErrorIs(t, err, model.ErrNotFound, "a row with a digest is not a tag version")
+}

internal/master/tagver/tagver.go

@@ -0,0 +1,101 @@
+// Package tagver decides which tag of a repository is a newer version of the
+// tag a service follows, using only the shape of the tag names.
+package tagver
+
+import (
+	"regexp"
+	"strconv"
+	"strings"
+)
+
+// tagPattern splits a tag into a prefix without digits, a dotted numeric
+// part and whatever follows it. "v1.2.3-alpine" gives "v", "1.2.3", "-alpine".
+var tagPattern = regexp.MustCompile(`^([^0-9]*)([0-9]+(?:\.[0-9]+)*)(.*)$`)
+
+// cosignPattern matches the tags cosign pushes next to an image to store its
+// signature, attestation or SBOM. They look like versions to a naive check.
+// The pattern is taken from Diun (crazy-max/diun, MIT, pkg/registry/tags.go).
+var cosignPattern = regexp.MustCompile(`^sha256-[0-9a-f]{64}(\.att|\.sbom|\.sig)?$`)
+
+// parsed is a tag split into its parts.
+type parsed struct {
+	prefix, suffix string
+	nums           []int
+}
+
+// parse splits tag. It returns false for a cosign tag, a tag without digits
+// and a numeric component that does not fit an int.
+func parse(tag string) (parsed, bool) {
+	if cosignPattern.MatchString(tag) {
+		return parsed{}, false
+	}
+	m := tagPattern.FindStringSubmatch(tag)
+	if m == nil {
+		return parsed{}, false
+	}
+	var nums []int
+	for _, part := range strings.Split(m[2], ".") {
+		n, err := strconv.Atoi(part)
+		if err != nil {
+			return parsed{}, false
+		}
+		nums = append(nums, n)
+	}
+	return parsed{prefix: m[1], suffix: m[3], nums: nums}, true
+}
+
+// Comparable reports whether tag can ever get a newer tag: it splits into
+// prefix, numeric part and suffix, has at least two numeric components, and
+// is not a cosign artifact tag. A tag with one component ("7", "pg16",
+// "8-bookworm") is a moving tag, not a version.
+func Comparable(tag string) bool {
+	p, ok := parse(tag)
+	return ok && len(p.nums) >= 2
+}
+
+// Newer returns the highest candidate that is newer than current, and false
+// when there is none. A candidate qualifies when it has the same prefix and
+// suffix and the same number of components as current, the same first
+// component, and a greater numeric part. Of two candidates with the same
+// numeric value the lexically smaller string wins, so the result does not
+// depend on the order of candidates. A tag such as "name2-v1.2.3", where a
+// digit comes before the version, is not comparable.
+func Newer(current string, candidates []string) (string, bool) {
+	cur, ok := parse(current)
+	if !ok || len(cur.nums) < 2 {
+		return "", false
+	}
+	best, found := "", false
+	var bestNums []int
+	for _, c := range candidates {
+		p, ok := parse(c)
+		if !ok || p.prefix != cur.prefix || p.suffix != cur.suffix ||
+			len(p.nums) != len(cur.nums) || p.nums[0] != cur.nums[0] {
+			continue
+		}
+		if compare(p.nums, cur.nums) <= 0 {
+			continue
+		}
+		if !found {
+			best, bestNums, found = c, p.nums, true
+			continue
+		}
+		if cmp := compare(p.nums, bestNums); cmp > 0 || (cmp == 0 && c < best) {
+			best, bestNums = c, p.nums
+		}
+	}
+	return best, found
+}
+
+// compare compares two numeric parts of equal length.
+func compare(a, b []int) int {
+	for i := range a {
+		switch {
+		case a[i] < b[i]:
+			return -1
+		case a[i] > b[i]:
+			return 1
+		}
+	}
+	return 0
+}

internal/master/tagver/tagver_test.go

@@ -0,0 +1,71 @@
+package tagver
+
+import (
+	"strings"
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+)
+
+func TestComparable(t *testing.T) {
+	sig := "sha256-" + strings.Repeat("a", 64) + ".sig"
+	tests := []struct {
+		tag  string
+		want bool
+	}{
+		{"latest", false},
+		{"release", false},
+		{"stable", false},
+		{"edge", false},
+		{"alpine", false},
+		{"7", false},
+		{"7-alpine", false},
+		{"8-bookworm", false},
+		{"pg16", false},
+		{"14-vectorchord0.4.3-pgvectors0.2.0", false},
+		{"name2-v1.2.3", false},
+		{sig, false},
+		{"99999999999999999999.1", false},
+		{"1.2", true},
+		{"1.2.3", true},
+		{"v1.2.3", true},
+		{"11.0-latest", true},
+	}
+	for _, tt := range tests {
+		t.Run(tt.tag, func(t *testing.T) {
+			assert.Equal(t, tt.want, Comparable(tt.tag))
+		})
+	}
+}
+
+func TestNewer(t *testing.T) {
+	tests := []struct {
+		name       string
+		current    string
+		candidates []string
+		want       string
+		ok         bool
+	}{
+		{"highest within major", "1.2.3", []string{"1.2.4", "1.3.0", "2.0.0", "1.2.4-rc1", "1.3", "v1.2.4"}, "1.3.0", true},
+		{"v prefix kept", "v1.2.3", []string{"1.2.4", "v1.2.4"}, "v1.2.4", true},
+		{"name prefix kept", "name-v1.2.3", []string{"v1.2.4", "name-v1.2.4"}, "name-v1.2.4", true},
+		{"suffix kept", "11.0-latest", []string{"11.1", "11.1-latest"}, "11.1-latest", true},
+		{"two components", "7.0", []string{"8.0", "7.0.1", "7.2", "7.1"}, "7.2", true},
+		{"equal is not newer", "1.2.3", []string{"1.2.3"}, "", false},
+		{"older is not newer", "1.2.3", []string{"1.2.2", "1.1.9"}, "", false},
+		{"numeric not lexical", "1.9.0", []string{"1.10.0"}, "1.10.0", true},
+		{"empty candidates", "1.2.3", nil, "", false},
+		{"moving tag", "latest", []string{"1.2.3"}, "", false},
+		{"single component", "7", []string{"8"}, "", false},
+		{"digit before version", "name2-v1.2.3", []string{"name2-v1.2.4"}, "", false},
+		{"cosign tag ignored", "1.2.3", []string{"sha256-" + strings.Repeat("0", 64) + ".sig"}, "", false},
+		{"equal value picks smaller string", "1.2.3", []string{"1.02.4", "1.2.4"}, "1.02.4", true},
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			got, ok := Newer(tt.current, tt.candidates)
+			assert.Equal(t, tt.ok, ok)
+			assert.Equal(t, tt.want, got)
+		})
+	}
+}

internal/master/web/icons/LICENSE-simple-icons.md

@@ -0,0 +1,30 @@
+# CC0 1.0 Universal
+
+## Statement of Purpose
+
+The laws of most jurisdictions throughout the world automatically confer exclusive Copyright and Related Rights (defined below) upon the creator and subsequent owner(s) (each and all, an “owner”) of an original work of authorship and/or a database (each, a “Work”).
+
+Certain owners wish to permanently relinquish those rights to a Work for the purpose of contributing to a commons of creative, cultural and scientific works (“Commons”) that the public can reliably and without fear of later claims of infringement build upon, modify, incorporate in other works, reuse and redistribute as freely as possible in any form whatsoever and for any purposes, including without limitation commercial purposes. These owners may contribute to the Commons to promote the ideal of a free culture and the further production of creative, cultural and scientific works, or to gain reputation or greater distribution for their Work in part through the use and efforts of others.
+
+For these and/or other purposes and motivations, and without any expectation of additional consideration or compensation, the person associating CC0 with a Work (the “Affirmer”), to the extent that he or she is an owner of Copyright and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and publicly distribute the Work under its terms, with knowledge of his or her Copyright and Related Rights in the Work and the meaning and intended legal effect of CC0 on those rights.
+
+1. Copyright and Related Rights. A Work made available under CC0 may be protected by copyright and related or neighboring rights (“Copyright and Related Rights”). Copyright and Related Rights include, but are not limited to, the following:
+    1. the right to reproduce, adapt, distribute, perform, display, communicate, and translate a Work;
+    2. moral rights retained by the original author(s) and/or performer(s);
+    3. publicity and privacy rights pertaining to a person’s image or likeness depicted in a Work;
+    4. rights protecting against unfair competition in regards to a Work, subject to the limitations in paragraph 4(i), below;
+    5. rights protecting the extraction, dissemination, use and reuse of data in a Work;
+    6. database rights (such as those arising under Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, and under any national implementation thereof, including any amended or successor version of such directive); and
+    7. other similar, equivalent or corresponding rights throughout the world based on applicable law or treaty, and any national implementations thereof.
+
+2. Waiver. To the greatest extent permitted by, but not in contravention of, applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and unconditionally waives, abandons, and surrenders all of Affirmer’s Copyright and Related Rights and associated claims and causes of action, whether now known or unknown (including existing as well as future claims and causes of action), in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the “Waiver”). Affirmer makes the Waiver for the benefit of each member of the public at large and to the detriment of Affirmer’s heirs and successors, fully intending that such Waiver shall not be subject to revocation, rescission, cancellation, termination, or any other legal or equitable action to disrupt the quiet enjoyment of the Work by the public as contemplated by Affirmer’s express Statement of Purpose.
+
+3. Public License Fallback. Should any part of the Waiver for any reason be judged legally invalid or ineffective under applicable law, then the Waiver shall be preserved to the maximum extent permitted taking into account Affirmer’s express Statement of Purpose. In addition, to the extent the Waiver is so judged Affirmer hereby grants to each affected person a royalty-free, non transferable, non sublicensable, non exclusive, irrevocable and unconditional license to exercise Affirmer’s Copyright and Related Rights in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the “License”). The License shall be deemed effective as of the date CC0 was applied by Affirmer to the Work. Should any part of the License for any reason be judged legally invalid or ineffective under applicable law, such partial invalidity or ineffectiveness shall not invalidate the remainder of the License, and in such case Affirmer hereby affirms that he or she will not (i) exercise any of his or her remaining Copyright and Related Rights in the Work or (ii) assert any associated claims and causes of action with respect to the Work, in either case contrary to Affirmer’s express Statement of Purpose.
+
+4. Limitations and Disclaimers.
+    1. No trademark or patent rights held by Affirmer are waived, abandoned, surrendered, licensed or otherwise affected by this document.
+    2. Affirmer offers the Work as-is and makes no representations or warranties of any kind concerning the Work, express, implied, statutory or otherwise, including without limitation warranties of title, merchantability, fitness for a particular purpose, non infringement, or the absence of latent or other defects, accuracy, or the present or absence of errors, whether or not discoverable, all to the greatest extent permissible under applicable law.
+    3. Affirmer disclaims responsibility for clearing rights of other persons that may apply to the Work or any use thereof, including without limitation any person’s Copyright and Related Rights in the Work. Further, Affirmer disclaims responsibility for obtaining any necessary consents, permissions or other rights required for any use of the Work.
+    4. Affirmer understands and acknowledges that Creative Commons is not a party to this document and has no duty or obligation with respect to this CC0 or use of the Work.
+
+For more information, please see <https://creativecommons.org/publicdomain/zero/1.0>.

internal/master/web/icons/gen/main.go

@@ -0,0 +1,128 @@
+// Command gen builds simple-icons.json.gz, the icon data the icons package
+// embeds. It downloads the pinned simple-icons npm tarball, checks its
+// sha256 and writes a gzipped JSON object {slug: svg path data}. The output
+// is deterministic. It writes into the current directory; run it with
+//
+//	go generate ./internal/master/web/icons
+package main
+
+import (
+	"archive/tar"
+	"bytes"
+	"compress/gzip"
+	"crypto/sha256"
+	"encoding/hex"
+	"encoding/json"
+	"fmt"
+	"io"
+	"net/http"
+	"os"
+	"path"
+	"regexp"
+	"strings"
+)
+
+const (
+	tarballURL    = "https://registry.npmjs.org/simple-icons/-/simple-icons-16.35.0.tgz"
+	tarballSHA256 = "20ebead4f6bc93464812a5e260d19fc4d84772e5eeff69a6fbea263ca2441c5f"
+)
+
+var pathData = regexp.MustCompile(`<path d="([^"]+)"`)
+
+func main() {
+	if err := run(); err != nil {
+		fmt.Fprintln(os.Stderr, "gen:", err)
+		os.Exit(1)
+	}
+}
+
+func run() error {
+	tgz, err := download(tarballURL)
+	if err != nil {
+		return err
+	}
+	if sum := sha256.Sum256(tgz); hex.EncodeToString(sum[:]) != tarballSHA256 {
+		return fmt.Errorf("sha256 mismatch for %s: got %x, want %s", tarballURL, sum, tarballSHA256)
+	}
+	icons, license, err := extract(tgz)
+	if err != nil {
+		return err
+	}
+	var js bytes.Buffer
+	enc := json.NewEncoder(&js)
+	enc.SetEscapeHTML(false)
+	if err := enc.Encode(icons); err != nil { // map keys are written sorted
+		return err
+	}
+	var gz bytes.Buffer
+	zw, err := gzip.NewWriterLevel(&gz, gzip.BestCompression)
+	if err != nil {
+		return err
+	}
+	if _, err := zw.Write(js.Bytes()); err != nil { // the header has no name and a zero mtime
+		return err
+	}
+	if err := zw.Close(); err != nil {
+		return err
+	}
+	if err := os.WriteFile("simple-icons.json.gz", gz.Bytes(), 0o644); err != nil {
+		return err
+	}
+	if err := os.WriteFile("LICENSE-simple-icons.md", license, 0o644); err != nil {
+		return err
+	}
+	fmt.Printf("wrote %d icons\n", len(icons))
+	return nil
+}
+
+func download(url string) ([]byte, error) {
+	resp, err := http.Get(url)
+	if err != nil {
+		return nil, err
+	}
+	defer resp.Body.Close()
+	if resp.StatusCode != http.StatusOK {
+		return nil, fmt.Errorf("GET %s: %s", url, resp.Status)
+	}
+	return io.ReadAll(resp.Body)
+}
+
+// extract returns the path data of every package/icons/*.svg by slug, and
+// package/LICENSE.md.
+func extract(tgz []byte) (icons map[string]string, license []byte, err error) {
+	zr, err := gzip.NewReader(bytes.NewReader(tgz))
+	if err != nil {
+		return nil, nil, err
+	}
+	tr := tar.NewReader(zr)
+	icons = map[string]string{}
+	for {
+		h, err := tr.Next()
+		if err == io.EOF {
+			break
+		}
+		if err != nil {
+			return nil, nil, err
+		}
+		switch {
+		case h.Name == "package/LICENSE.md":
+			if license, err = io.ReadAll(tr); err != nil {
+				return nil, nil, err
+			}
+		case path.Dir(h.Name) == "package/icons" && strings.HasSuffix(h.Name, ".svg"):
+			svg, err := io.ReadAll(tr)
+			if err != nil {
+				return nil, nil, err
+			}
+			m := pathData.FindAllSubmatch(svg, -1)
+			if len(m) != 1 {
+				return nil, nil, fmt.Errorf("%s: want exactly one <path>, found %d", h.Name, len(m))
+			}
+			icons[strings.TrimSuffix(path.Base(h.Name), ".svg")] = string(m[0][1])
+		}
+	}
+	if license == nil || len(icons) == 0 {
+		return nil, nil, fmt.Errorf("tarball has no LICENSE.md or no icons")
+	}
+	return icons, license, nil
+}

internal/master/web/icons/icons.go

@@ -0,0 +1,109 @@
+// Package icons maps container image references to brand icons from the
+// Simple Icons set (CC0, see LICENSE-simple-icons.md). Only the master's UI
+// imports it, so the agent binary does not carry the data.
+package icons
+
+import (
+	"bytes"
+	"compress/gzip"
+	_ "embed"
+	"encoding/json"
+	"strings"
+	"sync"
+
+	"github.com/shcizo/package-updater/internal/imageref"
+)
+
+//go:generate go run ./gen
+
+//go:embed simple-icons.json.gz
+var data []byte
+
+var (
+	once  sync.Once
+	paths map[string]string
+)
+
+// aliases maps a normalised image name to the Simple Icons slug that differs
+// from it.
+var aliases = map[string]string{
+	"postgres":    "postgresql",
+	"goauthentik": "authentik",
+	"traefik":     "traefikproxy",
+	"node":        "nodedotjs",
+	"mongo":       "mongodb",
+}
+
+// skipNamespaces are registry namespaces that name a publisher, not a product.
+var skipNamespaces = map[string]bool{"library": true, "linuxserver": true, "bitnami": true, "hotio": true}
+
+// suffixes are stripped from the last path segment to find the product name
+// ("authentik-server" is authentik).
+var suffixes = []string{"-server", "-web", "-api", "-worker", "-agent"}
+
+func load() {
+	once.Do(func() {
+		paths = map[string]string{}
+		zr, err := gzip.NewReader(bytes.NewReader(data))
+		if err != nil {
+			return
+		}
+		_ = json.NewDecoder(zr).Decode(&paths)
+	})
+}
+
+// Path returns the SVG path data (24x24 viewBox) of the icon with this Simple
+// Icons slug.
+func Path(slug string) (string, bool) {
+	load()
+	p, ok := paths[slug]
+	return p, ok
+}
+
+// Count returns how many icons are embedded.
+func Count() int {
+	load()
+	return len(paths)
+}
+
+// ForImage returns the slug of the icon that best matches the image
+// reference, or "" when there is none. It tries the last path segment, that
+// segment without a role suffix, and the namespace, in that order.
+func ForImage(ref string) string {
+	segs := strings.Split(imageref.Parse(ref).Repo, "/")
+	if len(segs) > 1 && imageref.IsRegistryHost(segs[0]) {
+		segs = segs[1:]
+	}
+	last := segs[len(segs)-1]
+	candidates := []string{last}
+	for _, s := range suffixes {
+		if base, ok := strings.CutSuffix(last, s); ok && base != "" {
+			candidates = append(candidates, base)
+			break
+		}
+	}
+	if len(segs) > 1 && !skipNamespaces[segs[len(segs)-2]] {
+		candidates = append(candidates, segs[len(segs)-2])
+	}
+	for _, c := range candidates {
+		slug := normalise(c)
+		if a, ok := aliases[slug]; ok {
+			slug = a
+		}
+		if _, ok := Path(slug); ok {
+			return slug
+		}
+	}
+	return ""
+}
+
+// normalise lowercases s and keeps only a-z and 0-9, the form of Simple Icons slugs.
+func normalise(s string) string {
+	var b strings.Builder
+	for _, r := range strings.ToLower(s) {
+		if r >= 'a' && r <= 'z' || r >= '0' && r <= '9' {
+			b.WriteRune(r)
+		}
+	}
+	return b.String()
+}

internal/master/web/icons/icons_test.go

@@ -0,0 +1,46 @@
+package icons
+
+import (
+	"regexp"
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+)
+
+func TestForImage(t *testing.T) {
+	cases := []struct {
+		ref, want string
+	}{
+		{"gitea/gitea:1.27.3", "gitea"},
+		{"ghcr.io/goauthentik/server:2026.8.2", "authentik"},
+		{"postgres:17.10", "postgresql"},
+		{"grafana/loki:3.4.2", "grafana"},
+		{"docker.n8n.io/n8nio/n8n:1.112.4", "n8n"},
+		{"lscr.io/linuxserver/prowlarr:latest", ""},
+		{"localhost:5000/foo:v1", ""},
+		{"gitea.shcizo.se/shcizo/slusk:v0.8.1", ""},
+	}
+	for _, c := range cases {
+		t.Run(c.ref, func(t *testing.T) {
+			assert.Equal(t, c.want, ForImage(c.ref))
+		})
+	}
+}
+
+// safePath is a strict allowlist for what an embedded path may contain, since
+// the paths are written into the page's HTML.
+var safePath = regexp.MustCompile(`^[MmLlHhVvCcSsQqTtAaZz0-9.,\- e]+$`)
+
+func TestEmbeddedSet(t *testing.T) {
+	assert.Greater(t, Count(), 3000)
+	for slug, p := range paths {
+		if !safePath.MatchString(p) {
+			t.Errorf("icon %q has unexpected characters in its path", slug)
+		}
+	}
+	p, ok := Path("gitea")
+	assert.True(t, ok)
+	assert.NotEmpty(t, p)
+	_, ok = Path("no-such-icon")
+	assert.False(t, ok)
+}

internal/master/web/ledger_test.go

@@ -0,0 +1,127 @@
+package web
+
+import (
+	"bufio"
+	"context"
+	"io"
+	"net/http"
+	"net/url"
+	"strings"
+	"testing"
+	"time"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+func TestEvents_SendsPingWhenIdle(t *testing.T) {
+	old := pingInterval
+	pingInterval = 20 * time.Millisecond
+	t.Cleanup(func() { pingInterval = old })
+	srv, _, _, _ := newTestServer(t)
+	ctx, cancel := context.WithCancel(context.Background())
+	defer cancel()
+	req, err := http.NewRequestWithContext(ctx, http.MethodGet, srv.URL+"/events", nil)
+	require.NoError(t, err)
+	resp, err := http.DefaultClient.Do(req)
+	require.NoError(t, err)
+	defer resp.Body.Close()
+
+	reader := bufio.NewReader(resp.Body)
+	for {
+		line, err := reader.ReadString('\n')
+		require.NoError(t, err)
+		if strings.HasPrefix(line, "event:") {
+			assert.Equal(t, "event: ping\n", line, "the Live box counts a named event; a comment would not reach the browser's listeners")
+			return
+		}
+	}
+}
+
+func TestCreateAgent_ValidationShowsInsideTheAddPanel(t *testing.T) {
+	srv, _, _, _ := newTestServer(t)
+	resp, err := http.PostForm(srv.URL+"/agents", url.Values{"name": {"node-2"}})
+	require.NoError(t, err)
+	defer resp.Body.Close()
+	body, _ := io.ReadAll(resp.Body)
+	assert.Equal(t, http.StatusConflict, resp.StatusCode)
+	assert.Contains(t, string(body), `class="drawer"`)
+	assert.Contains(t, string(body), `value="node-2"`, "the typed name is kept")
+	assert.NotContains(t, string(body), "pua_", "no token is shown")
+}
+
+func TestNavFragment(t *testing.T) {
+	srv, _, _, _ := newTestServer(t)
+	cases := []struct {
+		query, want, notWant string
+	}{
+		{"?section=agents", `<a href="/agents" class="cur" aria-current="page">Agents <span class="n">1/3</span>`, `<a href="/" class="cur"`},
+		{"?section=services", `<a href="/" class="cur" aria-current="page">Services <span class="n">4</span>`, `<a href="/agents" class="cur"`},
+		{"?section=bogus", `<a href="/jobs">Jobs</a>`, `class="cur"`},
+	}
+	for _, c := range cases {
+		t.Run(c.query, func(t *testing.T) {
+			code, body := get(t, srv, "/fragments/nav"+c.query)
+			assert.Equal(t, http.StatusOK, code)
+			assert.NotContains(t, body, "<html")
+			assert.Contains(t, body, c.want)
+			assert.NotContains(t, body, c.notWant)
+		})
+	}
+	_, body := get(t, srv, "/agents")
+	assert.Contains(t, body, `hx-get="/fragments/nav?section=agents"`, "every page refreshes the sidebar on services and agents events")
+	assert.Contains(t, body, `hx-trigger="sse:services, sse:agents"`)
+}
+
+func TestAgentConnectFragment(t *testing.T) {
+	cases := []struct {
+		name     string
+		path     string
+		online   bool
+		wantCode int
+		want     []string
+		notWant  []string
+	}{
+		{"never connected waits", "/fragments/agents/5/connect", false, http.StatusOK, []string{"Waiting for fresh", `action="/agents/5/revoke"`}, []string{"Connected", "add-steps"}},
+		{"online is connected", "/fragments/agents/5/connect", true, http.StatusOK, []string{"Connected · ", `id="add-steps" hx-swap-oob="innerHTML"`}, []string{"Waiting", "revoke"}},
+		{"seen before is connected", "/fragments/agents/3/connect", false, http.StatusOK, []string{"Connected · node-3.lan · v1.3.2"}, []string{"Waiting"}},
+		{"unknown", "/fragments/agents/99/connect", false, http.StatusNotFound, nil, nil},
+		{"revoked", "/fragments/agents/4/connect", false, http.StatusNotFound, nil, nil},
+		{"bad id", "/fragments/agents/abc/connect", false, http.StatusBadRequest, nil, nil},
+	}
+	for _, c := range cases {
+		t.Run(c.name, func(t *testing.T) {
+			srv, _, hub, _, _ := newTestEnv(t)
+			hub.mu.Lock()
+			hub.online[5] = c.online
+			hub.mu.Unlock()
+			code, body := get(t, srv, c.path)
+			assert.Equal(t, c.wantCode, code)
+			for _, w := range c.want {
+				assert.Contains(t, body, w)
+			}
+			for _, w := range c.notWant {
+				assert.NotContains(t, body, w)
+			}
+			assert.NotContains(t, body, "pua_", "the token is never sent again")
+		})
+	}
+}
+
+func TestStatic_FontsAndAppJS(t *testing.T) {
+	srv, _, _, _ := newTestServer(t)
+	for _, path := range []string{
+		"/static/app.js", "/static/app.css",
+		"/static/schibsted-grotesk-latin-wght-normal.woff2", "/static/jetbrains-mono-latin-wght-normal.woff2",
+		"/static/OFL-schibsted-grotesk.txt", "/static/OFL-jetbrains-mono.txt",
+	} {
+		code, _ := get(t, srv, path)
+		assert.Equal(t, http.StatusOK, code, path)
+	}
+	_, css := get(t, srv, "/static/app.css")
+	assert.NotContains(t, css, "fonts.googleapis.com", "fonts are served by the master")
+	assert.Contains(t, css, "format('woff2')")
+	_, page := get(t, srv, "/")
+	assert.NotContains(t, page, "fonts.googleapis.com")
+	assert.Contains(t, page, `src="/static/app.js"`)
+}

internal/master/web/server.go

@@ -10,6 +10,7 @@ import (
 	"log/slog"
 	"net/http"
 	"regexp"
+	"slices"
 	"strconv"
 	"strings"
 	"time"
@@ -17,6 +18,7 @@ import (
 	"github.com/shcizo/package-updater/internal/agenttoken"
 	"github.com/shcizo/package-updater/internal/master/events"
 	"github.com/shcizo/package-updater/internal/master/model"
+	"github.com/shcizo/package-updater/internal/master/web/icons"
 	"github.com/shcizo/package-updater/internal/master/webauth"
 	"github.com/shcizo/package-updater/internal/protocol"
 )
@@ -36,6 +38,9 @@ var agentNamePattern = regexp.MustCompile(`^[a-z0-9][a-z0-9-]{0,62}$`)
 type Store interface {
 	ListServices(ctx context.Context) ([]model.Service, error)
 	GetService(ctx context.Context, id int64) (model.Service, error)
+	// GetTagVersion returns the version of repo with this tag and no digest;
+	// model.ErrNotFound if there is none.
+	GetTagVersion(ctx context.Context, repo, tag string) (model.ImageVersion, error)
 	// RecentVersions returns up to limit versions of repo the master has
 	// seen, most recently first seen first.
 	RecentVersions(ctx context.Context, repo string, limit int) ([]model.ImageVersion, error)
@@ -87,12 +92,14 @@ type Broker interface {
 	Publish(t events.Topic)
 }
 
-// Config holds values shown in the "add agent" snippet and on the service page.
+// Config holds values shown in the "add agent" snippet, on the agents page and
+// on the service page.
 type Config struct {
 	AgentURL     string // what agents dial, e.g. wss://10.0.0.5:8090/agent
 	MasterKey    string // the master's fingerprint
 	AgentImage   string
 	PollInterval time.Duration // shown as "every <interval>" on the service page
+	Version      string        // the master's build version; agents on another version are marked old
 }
 
 // Server renders the UI.
@@ -110,9 +117,9 @@ type Server struct {
 // New parses the templates. Each page is its own template set so every page
 // can define its own "content" block.
 func New(store Store, hub Hub, jobs Jobs, broker Broker, cfg Config, log *slog.Logger) (*Server, error) {
-	funcs := template.FuncMap{"shortRef": shortRef, "duration": jobDuration, "followsNoTag": followsNoTag}
+	funcs := template.FuncMap{"shortRef": shortRef, "duration": jobDuration, "followsNoTag": followsNoTag, "middle": middle}
 	pages := map[string]*template.Template{}
-	for _, page := range []string{"overview.html", "agents.html", "agent_created.html", "service.html", "jobs.html", "job.html"} {
+	for _, page := range []string{"overview.html", "agents.html", "service.html", "jobs.html", "job.html"} {
 		t, err := template.New(page).Funcs(funcs).ParseFS(assets, "templates/layout.html", "templates/"+page)
 		if err != nil {
 			return nil, fmt.Errorf("parse %s: %w", page, err)
@@ -142,25 +149,63 @@ func (s *Server) Register(mux *http.ServeMux, protect func(http.Handler) http.Ha
 	route("GET /fragments/jobs/{id}", s.jobFragment)
 	route("GET /agents", s.agents)
 	route("GET /fragments/agents", s.agentsFragment)
+	route("GET /fragments/agents/{id}/connect", s.agentConnectFragment)
+	route("GET /fragments/nav", s.navFragment)
 	route("POST /agents", s.createAgent)
 	route("POST /agents/{id}/revoke", s.revokeAgent)
 	route("GET /events", s.events)
 }
 
+// navData is what the sidebar shows on every page.
+type navData struct {
+	Section      string // services, jobs or agents; "" for none
+	Services     int
+	AgentsOnline int
+	AgentsTotal  int // agents that are not revoked
+}
+
+// spriteIcon is one icon of the sprite the services fragment carries.
+type spriteIcon struct {
+	Slug string
+	Path string
+}
+
+// sections maps a page to the sidebar entry that is current on it.
+var sections = map[string]string{
+	"overview.html": "services", "service.html": "services",
+	"jobs.html": "jobs", "job.html": "jobs",
+	"agents.html": "agents",
+}
+
 type pageData struct {
-	Title   string
-	CSRF    string
-	Groups  []serviceGroup
+	Title  string
+	CSRF   string
+	Nav    navData
+	Groups []serviceGroup
+	// ServiceCount is how many services the groups hold.
+	ServiceCount int
+	// Sprite holds the icons the groups use, so the page carries only those.
+	Sprite  []spriteIcon
 	Agents  []agentRow
 	Error   string
 	Created model.Agent
 	Snippet string
 
+	// AddStep is the step of the "add agent" panel: 0 closed, 1 name,
+	// 2 deploy (Created, Token, MasterKey and Snippet are set).
+	AddStep       int
+	FormName      string // what was typed in step 1
+	Token         string
+	MasterKey     string
+	Connected     bool   // the agent Created has connected
+	MasterVersion string // the master's build version; "" if unknown
+
 	Service     model.Service
 	ConfigFiles []string
 	Reason      string // why Service cannot be updated; "" when it can
 	AutoBlocked string // why Service cannot be set to auto; "" when it can
 	Versions    []versionRow
+	NewerTag    string // Service's newer tag while it still holds; "" otherwise
 	Polling     string // what the service page says about registry polling
 	PollFailed  bool   // Polling is the last registry error
 	// RestoreBlocked is why a drifted Service cannot be restored; "" when it
@@ -178,6 +223,58 @@ func (s *Server) base(r *http.Request, title string) pageData {
 	return pageData{Title: title, CSRF: sess.CSRFToken}
 }
 
+// page renders a full page: the sidebar numbers are looked up and put in data.
+func (s *Server) page(w http.ResponseWriter, r *http.Request, status int, page string, data pageData) {
+	nav, err := s.navData(r.Context(), sections[page])
+	if err != nil {
+		s.fail(w, err)
+		return
+	}
+	data.Nav = nav
+	s.render(w, status, page, "layout", data)
+}
+
+// navData counts what the sidebar shows next to its entries.
+func (s *Server) navData(ctx context.Context, section string) (navData, error) {
+	nav := navData{Section: section}
+	services, err := s.store.ListServices(ctx)
+	if err != nil {
+		return nav, err
+	}
+	nav.Services = len(services)
+	agents, err := s.store.ListAgents(ctx)
+	if err != nil {
+		return nav, err
+	}
+	for _, a := range agents {
+		if a.RevokedAt != nil {
+			continue
+		}
+		nav.AgentsTotal++
+		if s.hub.Online(a.ID) {
+			nav.AgentsOnline++
+		}
+	}
+	return nav, nil
+}
+
+// navFragment renders the sidebar entries. The page asks for it with its own
+// section so the current entry stays marked.
+func (s *Server) navFragment(w http.ResponseWriter, r *http.Request) {
+	section := r.URL.Query().Get("section")
+	if section != "services" && section != "jobs" && section != "agents" {
+		section = ""
+	}
+	nav, err := s.navData(r.Context(), section)
+	if err != nil {
+		s.fail(w, err)
+		return
+	}
+	data := s.base(r, "")
+	data.Nav = nav
+	s.render(w, http.StatusOK, "overview.html", "nav", data)
+}
+
 func (s *Server) render(w http.ResponseWriter, status int, page, block string, data pageData) {
 	w.Header().Set("Content-Type", "text/html; charset=utf-8")
 	w.WriteHeader(status)
@@ -192,17 +289,41 @@ func (s *Server) serviceData(r *http.Request) (pageData, error) {
 	if err != nil {
 		return data, err
 	}
-	data.Groups = groupServices(services, s.autoBlocked)
+	agents, err := s.store.ListAgents(r.Context())
+	if err != nil {
+		return data, err
+	}
+	data.Groups = groupServices(services, agents, s.hub.Online, s.autoBlocked)
+	data.ServiceCount = len(services)
+	data.Sprite = spriteFor(data.Groups)
 	return data, nil
 }
 
+// spriteFor collects the icons the groups' rows use, each once.
+func spriteFor(groups []serviceGroup) []spriteIcon {
+	var sprite []spriteIcon
+	seen := map[string]bool{}
+	for _, g := range groups {
+		for _, row := range g.Services {
+			if row.Icon == "" || seen[row.Icon] {
+				continue
+			}
+			seen[row.Icon] = true
+			if path, ok := icons.Path(row.Icon); ok {
+				sprite = append(sprite, spriteIcon{Slug: row.Icon, Path: path})
+			}
+		}
+	}
+	return sprite
+}
+
 func (s *Server) overview(w http.ResponseWriter, r *http.Request) {
 	data, err := s.serviceData(r)
 	if err != nil {
 		s.fail(w, err)
 		return
 	}
-	s.render(w, http.StatusOK, "overview.html", "layout", data)
+	s.page(w, r, http.StatusOK, "overview.html", data)
 }
 
 func (s *Server) servicesFragment(w http.ResponseWriter, r *http.Request) {
@@ -211,7 +332,7 @@ func (s *Server) servicesFragment(w http.ResponseWriter, r *http.Request) {
 		s.fail(w, err)
 		return
 	}
-	s.render(w, http.StatusOK, "overview.html", "services", data)
+	s.render(w, http.StatusOK, "overview.html", "services-fragment", data)
 }
 
 // autoBlocked returns the reason svc cannot be set to auto mode, or "".
@@ -271,6 +392,17 @@ func (s *Server) serviceDetail(r *http.Request, id int64) (pageData, error) {
 	if err != nil {
 		return data, err
 	}
+	data.NewerTag = newerTag(svc)
+	if data.NewerTag != "" && !slices.ContainsFunc(versions, func(v model.ImageVersion) bool { return v.Tag == data.NewerTag && v.Digest == "" }) {
+		// The suggested tag can be older than the listed versions; it must
+		// still be pickable.
+		v, err := s.store.GetTagVersion(r.Context(), svc.ImageRepo, data.NewerTag)
+		if err == nil {
+			versions = append(versions, v)
+		} else if !errors.Is(err, model.ErrNotFound) {
+			return data, err
+		}
+	}
 	data.Versions = versionRows(versions, svc.ActualDigest)
 	data.Polling, data.PollFailed = pollingStatus(svc, s.cfg.PollInterval)
 	data.Jobs, err = s.store.ListJobs(r.Context(), model.JobFilter{ServiceID: id, Limit: serviceJobsLimit})
@@ -308,7 +440,7 @@ func (s *Server) servicePage(w http.ResponseWriter, r *http.Request) {
 		s.failLookup(w, err)
 		return
 	}
-	s.render(w, http.StatusOK, "service.html", "layout", data)
+	s.page(w, r, http.StatusOK, "service.html", data)
 }
 
 func (s *Server) serviceJobsFragment(w http.ResponseWriter, r *http.Request) {
@@ -470,7 +602,7 @@ func (s *Server) renderServiceError(w http.ResponseWriter, r *http.Request, id i
 		return
 	}
 	data.Error = msg
-	s.render(w, status, "service.html", "layout", data)
+	s.page(w, r, status, "service.html", data)
 }
 
 // setMode switches a service between manual and auto. Manual is always
@@ -528,7 +660,7 @@ func (s *Server) jobsPage(w http.ResponseWriter, r *http.Request) {
 		s.fail(w, err)
 		return
 	}
-	s.render(w, http.StatusOK, "jobs.html", "layout", data)
+	s.page(w, r, http.StatusOK, "jobs.html", data)
 }
 
 func (s *Server) jobsFragment(w http.ResponseWriter, r *http.Request) {
@@ -559,7 +691,7 @@ func (s *Server) jobData(w http.ResponseWriter, r *http.Request) (pageData, bool
 
 func (s *Server) jobPage(w http.ResponseWriter, r *http.Request) {
 	if data, ok := s.jobData(w, r); ok {
-		s.render(w, http.StatusOK, "job.html", "layout", data)
+		s.page(w, r, http.StatusOK, "job.html", data)
 	}
 }
 
@@ -571,23 +703,28 @@ func (s *Server) jobFragment(w http.ResponseWriter, r *http.Request) {
 
 func (s *Server) agentData(r *http.Request) (pageData, error) {
 	data := s.base(r, "Agents")
+	data.MasterVersion = s.cfg.Version
 	agents, err := s.store.ListAgents(r.Context())
 	if err != nil {
 		return data, err
 	}
 	for _, a := range agents {
-		data.Agents = append(data.Agents, agentRow{Agent: a, Online: s.hub.Online(a.ID)})
+		data.Agents = append(data.Agents, newAgentRow(a, s.hub.Online(a.ID), s.cfg.Version))
 	}
 	return data, nil
 }
 
+// agents shows the agent list; with ?add=1 the "add agent" panel is open.
 func (s *Server) agents(w http.ResponseWriter, r *http.Request) {
 	data, err := s.agentData(r)
 	if err != nil {
 		s.fail(w, err)
 		return
 	}
-	s.render(w, http.StatusOK, "agents.html", "layout", data)
+	if r.URL.Query().Get("add") == "1" {
+		data.AddStep = 1
+	}
+	s.page(w, r, http.StatusOK, "agents.html", data)
 }
 
 func (s *Server) agentsFragment(w http.ResponseWriter, r *http.Request) {
@@ -596,13 +733,41 @@ func (s *Server) agentsFragment(w http.ResponseWriter, r *http.Request) {
 		s.fail(w, err)
 		return
 	}
-	s.render(w, http.StatusOK, "agents.html", "agents", data)
+	if data.Nav, err = s.navData(r.Context(), "agents"); err != nil {
+		s.fail(w, err)
+		return
+	}
+	s.render(w, http.StatusOK, "agents.html", "agents-fragment", data)
+}
+
+// agentConnectFragment is the last step of the "add agent" panel: it says
+// whether the agent that was just added has connected. It never repeats the
+// token.
+func (s *Server) agentConnectFragment(w http.ResponseWriter, r *http.Request) {
+	id, ok := pathID(w, r)
+	if !ok {
+		return
+	}
+	agents, err := s.store.ListAgents(r.Context())
+	if err != nil {
+		s.fail(w, err)
+		return
+	}
+	i := slices.IndexFunc(agents, func(a model.Agent) bool { return a.ID == id && a.RevokedAt == nil })
+	if i < 0 {
+		http.Error(w, "not found", http.StatusNotFound)
+		return
+	}
+	data := s.base(r, "Agents")
+	data.Created = agents[i]
+	data.Connected = s.hub.Online(id) || agents[i].LastSeenAt != nil
+	s.render(w, http.StatusOK, "agents.html", "connect", data)
 }
 
 func (s *Server) createAgent(w http.ResponseWriter, r *http.Request) {
 	name := strings.TrimSpace(r.FormValue("name"))
 	if !agentNamePattern.MatchString(name) {
-		s.agentsWithError(w, r, http.StatusBadRequest, "Agent names use lowercase letters, digits and dashes.")
+		s.agentsWithError(w, r, http.StatusBadRequest, name, "Agent names use lowercase letters, digits and dashes.")
 		return
 	}
 	token, err := agenttoken.Generate()
@@ -612,28 +777,39 @@ func (s *Server) createAgent(w http.ResponseWriter, r *http.Request) {
 	}
 	agent, err := s.store.CreateAgent(r.Context(), name, agenttoken.Hash(token))
 	if errors.Is(err, model.ErrConflict) {
-		s.agentsWithError(w, r, http.StatusConflict, fmt.Sprintf("An agent named %q already exists.", name))
+		s.agentsWithError(w, r, http.StatusConflict, name, fmt.Sprintf("An agent named %q already exists.", name))
 		return
 	}
 	if err != nil {
 		s.fail(w, err)
 		return
 	}
-	data := s.base(r, "Agent created")
-	data.Created = agent
-	data.Snippet = agentSnippet(s.cfg, token)
-	w.Header().Set("Cache-Control", "no-store") // the page shows the one-time token
-	s.render(w, http.StatusOK, "agent_created.html", "layout", data)
-}
-
-func (s *Server) agentsWithError(w http.ResponseWriter, r *http.Request, status int, msg string) {
 	data, err := s.agentData(r)
 	if err != nil {
 		s.fail(w, err)
 		return
 	}
+	data.AddStep = 2
+	data.Created = agent
+	data.Token = token
+	data.MasterKey = s.cfg.MasterKey
+	data.Snippet = agentSnippet(s.cfg, token)
+	w.Header().Set("Cache-Control", "no-store") // the page shows the one-time token
+	s.page(w, r, http.StatusOK, "agents.html", data)
+}
+
+// agentsWithError shows the agent list with the "add agent" panel open at
+// its first step, name kept and msg under the field.
+func (s *Server) agentsWithError(w http.ResponseWriter, r *http.Request, status int, name, msg string) {
+	data, err := s.agentData(r)
+	if err != nil {
+		s.fail(w, err)
+		return
+	}
+	data.AddStep = 1
+	data.FormName = name
 	data.Error = msg
-	s.render(w, status, "agents.html", "layout", data)
+	s.page(w, r, status, "agents.html", data)
 }
 
 func (s *Server) revokeAgent(w http.ResponseWriter, r *http.Request) {
@@ -648,6 +824,7 @@ func (s *Server) revokeAgent(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	s.hub.Disconnect(id)
+	s.broker.Publish(events.Agents)   // the agent list and the sidebar change
 	s.broker.Publish(events.Services) // the agent's services were marked removed
 	s.broker.Publish(events.Jobs)     // the agent's active jobs were failed
 	for _, jobID := range failedJobs {
@@ -656,6 +833,9 @@ func (s *Server) revokeAgent(w http.ResponseWriter, r *http.Request) {
 	http.Redirect(w, r, "/agents", http.StatusSeeOther)
 }
 
+// pingInterval is how often an idle event stream sends "event: ping".
+var pingInterval = 25 * time.Second
+
 // events streams change signals as Server-Sent Events. htmx's SSE extension
 // turns "event: services" into a refetch of the services fragment. The event
 // carries no state, so a dropped signal is recovered by the next one.
@@ -675,7 +855,7 @@ func (s *Server) events(w http.ResponseWriter, r *http.Request) {
 		s.log.Error("sse_flush_unsupported", "error", err)
 		return
 	}
-	keepalive := time.NewTicker(25 * time.Second)
+	keepalive := time.NewTicker(pingInterval)
 	defer keepalive.Stop()
 	for {
 		var msg string
@@ -685,7 +865,7 @@ func (s *Server) events(w http.ResponseWriter, r *http.Request) {
 		case t := <-ch:
 			msg = fmt.Sprintf("event: %s\ndata: changed\n\n", t)
 		case <-keepalive.C:
-			msg = ": keepalive\n\n"
+			msg = "event: ping\ndata: ok\n\n" // keeps proxies open; the Live box in the sidebar counts it
 		}
 		if _, err := fmt.Fprint(w, msg); err != nil {
 			return

internal/master/web/server_test.go

@@ -221,30 +221,46 @@ func newTestEnv(t *testing.T) (*httptest.Server, *fakeStore, *fakeHub, *events.B
 // the service page shows.
 func newTestEnvPolling(t *testing.T, pollInterval time.Duration) (*httptest.Server, *fakeStore, *fakeHub, *events.Broker, *fakeJobs) {
 	t.Helper()
-	agentID := int64(2)
+	return newTestEnvConfig(t, func(c *Config) { c.PollInterval = pollInterval })
+}
+
+// newTestEnvVersion is newTestEnv with version as the master's build version.
+func newTestEnvVersion(t *testing.T, version string) (*httptest.Server, *fakeStore, *fakeHub, *events.Broker, *fakeJobs) {
+	t.Helper()
+	return newTestEnvConfig(t, func(c *Config) { c.Version = version })
+}
+
+// newTestEnvConfig is newTestEnv with edit applied to the UI's Config.
+func newTestEnvConfig(t *testing.T, edit func(*Config)) (*httptest.Server, *fakeStore, *fakeHub, *events.Broker, *fakeJobs) {
+	t.Helper()
+	agentID, offlineAgentID := int64(2), int64(3)
 	store := &fakeStore{
 		created: map[string]string{"node-2": "x"},
 		services: []model.Service{
 			{ID: 1, Kind: protocol.KindCompose, ComposeProject: "slusk", ComposeService: "web", AgentID: &agentID, AgentName: "node-2",
 				ActualRef: "gitea.shcizo.se/shcizo/slusk:1.4.2", Status: "running", UpdateMode: "manual"},
-			{ID: 2, Kind: protocol.KindSwarm, SwarmService: "jellyfin_jellyfin",
+			{ID: 2, Kind: protocol.KindSwarm, SwarmService: "jellyfin_jellyfin", SwarmClusterID: "c1abcdefgh",
 				ActualRef: "lscr.io/linuxserver/jellyfin@sha256:0f42497a69fa0441bfd5f9d6bba8694f2a656ec984e571d0ac04c6dd91250039", Status: "degraded", UpdateMode: "manual"},
 			{ID: 3, Kind: protocol.KindContainer, ContainerName: "updater-agent", AgentID: &agentID, AgentName: "node-2",
 				ActualRef: "pu:1", Status: "running", UpdateMode: "manual", Self: true},
+			{ID: 4, Kind: protocol.KindCompose, ComposeProject: "media", ComposeService: "radarr", AgentID: &offlineAgentID, AgentName: "node-3",
+				ActualRef: "lscr.io/linuxserver/radarr:latest", Status: "running", UpdateMode: "manual"},
 		},
 		agents: []model.Agent{
-			{ID: 2, Name: "node-2", Hostname: "node-2"},
-			{ID: 3, Name: "node-3"},
+			{ID: 2, Name: "node-2", Hostname: "node-2.lan", AgentVersion: "v1.4.0", SwarmManager: true, SwarmClusterID: "c1abcdefgh", LastSeenAt: ptr(time.Now().UTC())},
+			{ID: 3, Name: "node-3", Hostname: "node-3.lan", AgentVersion: "v1.3.2", LastSeenAt: ptr(time.Date(2026, 10, 12, 13, 51, 0, 0, time.UTC))},
 			{ID: 4, Name: "old", RevokedAt: ptr(time.Now())},
+			{ID: 5, Name: "fresh"},
 		},
 	}
 	hub := &fakeHub{online: map[int64]bool{2: true}}
 	broker := events.NewBroker()
 	jobs := &fakeJobs{}
-	s, err := New(store, hub, jobs, broker, Config{
+	cfg := Config{
 		AgentURL: "wss://10.0.0.5:8090/agent", MasterKey: "sha256:abc", AgentImage: "gitea.shcizo.se/shcizo/package-updater:latest",
-		PollInterval: pollInterval,
-	}, slog.New(slog.NewTextHandler(io.Discard, nil)))
+	}
+	edit(&cfg)
+	s, err := New(store, hub, jobs, broker, cfg, slog.New(slog.NewTextHandler(io.Discard, nil)))
 	require.NoError(t, err)
 	mux := http.NewServeMux()
 	s.Register(mux, func(h http.Handler) http.Handler {
@@ -279,13 +295,44 @@ func TestOverview_GroupsServicesPerMachineAndSwarm(t *testing.T) {
 	code, body := get(t, srv, "/")
 	assert.Equal(t, http.StatusOK, code)
 	assert.Contains(t, body, "<html")
-	assert.Contains(t, body, "node-2")
-	assert.Contains(t, body, "Swarm")
-	assert.Contains(t, body, "slusk/web")
-	assert.Contains(t, body, "jellyfin_jellyfin")
+	assert.Contains(t, body, ">Swarm</h2>", "one cluster is just called Swarm")
+	assert.Contains(t, body, `title="c1abcdefgh"`, "the full cluster id is the hover text")
+	assert.Contains(t, body, "managers node-2")
+	assert.Contains(t, body, ">node-2</h2>")
+	assert.Contains(t, body, `<span class="nmt">web</span>`)
+	assert.Contains(t, body, `<span class="stk">slusk</span>`)
+	assert.Contains(t, body, "jellyfin_jellyfin", "Swarm service names are shown as they are")
 	assert.Contains(t, body, "sha256:0f42497a69fa…", "digests are shortened")
-	assert.Contains(t, body, "managed outside")
-	assert.Less(t, strings.Index(body, "node-2"), strings.Index(body, "Swarm"), "machines before Swarm")
+	assert.Contains(t, body, "Managed outside")
+	assert.Less(t, strings.Index(body, ">Swarm</h2>"), strings.Index(body, ">node-2</h2>"), "a cluster is followed by its managers' machines")
+	assert.Contains(t, body, `class="sub" data-machine="agent-2"`, "the machine filter lists the manager under the cluster")
+}
+
+func TestOverview_OfflineGroupShowsSince(t *testing.T) {
+	srv, store, hub, _, _ := newTestEnv(t)
+	_, body := get(t, srv, "/")
+	assert.Regexp(t, `Agent offline since <time datetime="2026-10-12T13:51:00Z">13:51</time> · showing last known state`, body)
+	assert.NotContains(t, body, "No manager online", "the cluster has a connected manager")
+
+	hub.mu.Lock()
+	hub.online[2] = false
+	hub.mu.Unlock()
+	_, body = get(t, srv, "/")
+	since := store.agents[0].LastSeenAt.Format("2006-01-02T15:04:05Z07:00")
+	assert.Contains(t, body, `No manager online since <time datetime="`+since+`">`)
+	assert.Contains(t, body, ` · showing last known state`)
+}
+
+func TestOverview_IconOrLetter(t *testing.T) {
+	srv, store, _, _, _ := newTestEnv(t)
+	store.services[0].ActualRef = "gitea/gitea:1.27.3"
+	for _, path := range []string{"/", "/fragments/services"} {
+		_, body := get(t, srv, path)
+		assert.Contains(t, body, `<symbol id="si-gitea"`, path)
+		assert.Equal(t, 1, strings.Count(body, `<symbol id="si-gitea"`), "the sprite holds each icon once: "+path)
+		assert.Contains(t, body, `href="#si-gitea"`, path)
+		assert.Contains(t, body, `class="ltr lc-`, "services without an icon get a letter: "+path)
+	}
 }
 
 func TestServicesFragment_IsNotAFullPage(t *testing.T) {
@@ -293,15 +340,64 @@ func TestServicesFragment_IsNotAFullPage(t *testing.T) {
 	code, body := get(t, srv, "/fragments/services")
 	assert.Equal(t, http.StatusOK, code)
 	assert.NotContains(t, body, "<html")
-	assert.Contains(t, body, "slusk/web")
+	assert.Contains(t, body, `title="slusk/web"`)
+	assert.Contains(t, body, `id="machines" hx-swap-oob`, "the machine filter in the sidebar is refreshed with the rows")
 }
 
 func TestAgentsPage_ShowsConnectionState(t *testing.T) {
 	srv, _, _, _ := newTestServer(t)
 	_, body := get(t, srv, "/agents")
-	assert.Regexp(t, regexp.MustCompile(`node-2[\s\S]*online`), body)
-	assert.Regexp(t, regexp.MustCompile(`node-3[\s\S]*offline`), body)
-	assert.Regexp(t, regexp.MustCompile(`old[\s\S]*revoked`), body)
+	assert.Regexp(t, regexp.MustCompile(`node-2[\s\S]*Online`), body)
+	assert.Regexp(t, regexp.MustCompile(`node-3[\s\S]*Offline`), body)
+	assert.Regexp(t, regexp.MustCompile(`old[\s\S]*Revoked`), body)
+	assert.Regexp(t, regexp.MustCompile(`fresh[\s\S]*Never connected`), body)
+	assert.Contains(t, body, "Manager")
+	assert.Contains(t, body, "3 machines", "revoked agents are not counted")
+	assert.NotContains(t, body, `class="drawer"`, "the add panel is closed by default")
+}
+
+func TestAgentsFragment_RefreshesHeaderCount(t *testing.T) {
+	srv, _, _, _ := newTestServer(t)
+	code, body := get(t, srv, "/fragments/agents")
+	assert.Equal(t, http.StatusOK, code)
+	assert.Contains(t, body, `id="agents-sub" hx-swap-oob="true">3 machines`)
+}
+
+func TestAgentsPage_RevokeUsesPopover(t *testing.T) {
+	srv, _, _, _ := newTestServer(t)
+	_, body := get(t, srv, "/agents")
+	assert.Contains(t, body, `<details class="rv" data-id="2">`)
+	assert.Contains(t, body, `action="/agents/2/revoke"`)
+	assert.NotContains(t, body, "confirm(")
+	assert.NotContains(t, body, `action="/agents/4/revoke"`, "a revoked agent cannot be revoked again")
+}
+
+func TestAgentsPage_MasterVersionAndOldAgent(t *testing.T) {
+	cases := []struct {
+		name, version string
+		wantOld       bool
+	}{
+		{"other version is old", "v1.4.0", true},
+		{"dev master marks nothing", "dev", false},
+		{"unknown master version marks nothing", "", false},
+	}
+	for _, c := range cases {
+		t.Run(c.name, func(t *testing.T) {
+			srv, _, _, _, _ := newTestEnvVersion(t, c.version)
+			_, body := get(t, srv, "/agents")
+			assert.Equal(t, c.version != "", strings.Contains(body, "master "+c.version))
+			assert.Equal(t, c.wantOld, strings.Contains(body, `<div class="ver old">`+"<span class=\"k\">Agent</span>v1.3.2"), "node-3 runs v1.3.2")
+			assert.NotContains(t, body, `<div class="ver old"><span class="k">Agent</span>v1.4.0`, "node-2 is current")
+		})
+	}
+}
+
+func TestAgentsPage_AddPanelOpensWithQuery(t *testing.T) {
+	srv, _, _, _ := newTestServer(t)
+	_, body := get(t, srv, "/agents?add=1")
+	assert.Contains(t, body, `class="drawer"`)
+	assert.Contains(t, body, `<form method="post" action="/agents"`)
+	assert.Contains(t, body, `name="csrf_token" value="csrf"`)
 }
 
 func TestCreateAgent_ShowsSnippetOnceAndStoresHash(t *testing.T) {
@@ -319,6 +415,10 @@ func TestCreateAgent_ShowsSnippetOnceAndStoresHash(t *testing.T) {
 	assert.Contains(t, string(body), "MASTER_KEY: sha256:abc")
 	assert.Contains(t, string(body), "MASTER_URL: wss://10.0.0.5:8090/agent")
 	assert.Contains(t, string(body), "shown only once")
+	assert.Contains(t, string(body), `<pre id="snippet">`)
+	assert.Contains(t, string(body), `data-copy="`+token+`"`)
+	assert.Contains(t, string(body), `hx-get="/fragments/agents/9/connect"`, "step 3 waits for the agent")
+	assert.Contains(t, string(body), ">node-3</b>", "the agent list is still on the page")
 }
 
 func TestCreateAgent_Validation(t *testing.T) {
@@ -358,16 +458,16 @@ func TestRevokeAgent_RevokesAndDisconnects(t *testing.T) {
 	assert.Equal(t, int64(2), store.revoked())
 	assert.Equal(t, int64(2), hub.lastDisconnected(), "a revoked agent must be cut off immediately")
 	var got []events.Topic
-	for len(got) < 4 {
+	for len(got) < 5 {
 		select {
 		case topic := <-ch:
 			got = append(got, topic)
 		default:
-			t.Fatalf("revoke published %v, want services, jobs and one topic per failed job", got)
+			t.Fatalf("revoke published %v, want agents, services, jobs and one topic per failed job", got)
 		}
 	}
-	assert.ElementsMatch(t, []events.Topic{events.Services, events.Jobs, events.JobTopic(5), events.JobTopic(6)}, got,
-		"the overview drops the agent's services; job lists and open job pages show the failures")
+	assert.ElementsMatch(t, []events.Topic{events.Agents, events.Services, events.Jobs, events.JobTopic(5), events.JobTopic(6)}, got,
+		"the agent list and sidebar change; the overview drops the agent's services; job lists and open job pages show the failures")
 }
 
 func TestRevokeAgent_BadID(t *testing.T) {
@@ -650,16 +750,19 @@ func TestOverview_ShowsModeToggleAndAvailableBadge(t *testing.T) {
 	srv, store, _, _, jobs := newTestEnv(t)
 	store.services[0].AvailableRef = "gitea.shcizo.se/shcizo/slusk:1.5.0"
 	store.services[1].UpdateMode = "auto"
-	jobs.autoErr = &model.NotUpdatableError{Reason: model.ReasonSelf}
+	jobs.autoErr = &model.NotUpdatableError{Reason: model.ReasonBuilt}
 
 	for _, path := range []string{"/", "/fragments/services"} {
 		_, body := get(t, srv, path)
 		assert.Contains(t, body, `action="/services/1/mode"`, path)
 		assert.Contains(t, body, `name="csrf_token" value="csrf"`, path)
 		assert.Contains(t, body, `name="return" value="overview"`, path)
-		assert.Contains(t, body, `class="badge badge-update" title="gitea.shcizo.se/shcizo/slusk:1.5.0"`, path)
-		assert.Contains(t, body, `<input type="hidden" name="mode" value="manual">`, "auto services toggle to manual: "+path)
-		assert.Contains(t, body, `disabled>Make auto</button> <span class="muted">`+model.ReasonSelf+`</span>`, "blocked manual services get a disabled button: "+path)
+		assert.Contains(t, body, `class="tag f-up" title="gitea.shcizo.se/shcizo/slusk:1.5.0">Update available<em>1.5.0</em>`, path)
+		assert.Contains(t, body, `<input type="hidden" name="mode" value="manual">`+"\n"+`        <button type="submit" class="sw" role="switch" aria-checked="true">`, "auto services toggle to manual: "+path)
+		assert.Contains(t, body, `<input type="hidden" name="mode" value="auto">`, "manual services toggle to auto: "+path)
+		assert.Contains(t, body, `aria-checked="false" disabled title="`+model.ReasonBuilt+`">`, "blocked manual services get a disabled switch: "+path)
+		assert.Contains(t, body, `<span class="na">`+model.ReasonBuilt+`</span>`, "and say why: "+path)
+		assert.Contains(t, body, `<span class="na">n/a</span>`, "services managed outside have no switch: "+path)
 	}
 }
 
@@ -684,3 +787,34 @@ func TestServicePage_AutoBlockedDisablesToggle(t *testing.T) {
 	_, body := get(t, srv, "/services/1")
 	assert.Contains(t, body, "Auto unavailable: "+model.ReasonContainer+".")
 }
+
+// GetTagVersion returns the digest-less version of repo with this tag.
+func (f *fakeStore) GetTagVersion(_ context.Context, repo, tag string) (model.ImageVersion, error) {
+	for _, v := range f.versions {
+		if v.Repo == repo && v.Tag == tag && v.Digest == "" {
+			return v, nil
+		}
+	}
+	return model.ImageVersion{}, model.ErrNotFound
+}
+
+func TestOverview_ShowsNewerTagChipBesideUpdateChip(t *testing.T) {
+	srv, store, _, _, _ := newTestEnv(t)
+	store.services[0].AvailableRef = "gitea.shcizo.se/shcizo/slusk:1.4.2"
+	store.services[0].NewerRef = "gitea.shcizo.se/shcizo/slusk:1.5.0"
+
+	for _, path := range []string{"/", "/fragments/services"} {
+		_, body := get(t, srv, path)
+		assert.Contains(t, body, `class="tag f-newer" title="gitea.shcizo.se/shcizo/slusk:1.5.0">Newer tag<em>1.5.0</em>`, path)
+		assert.Contains(t, body, `class="tag f-up"`, path)
+	}
+}
+
+func TestOverview_HidesStaleNewerTag(t *testing.T) {
+	srv, store, _, _, _ := newTestEnv(t)
+	store.services[0].NewerRef = "gitea.shcizo.se/shcizo/slusk:1.4.1" // not newer than 1.4.2
+
+	_, body := get(t, srv, "/")
+
+	assert.NotContains(t, body, "f-newer")
+}

internal/master/web/static/OFL-jetbrains-mono.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) JetBrainsMono-Italic[wght].ttf: Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

internal/master/web/static/OFL-schibsted-grotesk.txt

@@ -0,0 +1,93 @@
+Copyright 2023 The Schibsted-Grotesk Project Authors (https://github.com/schibsted/schibsted-grotesk) SchibstedGrotesk-Italic[wght].ttf: Copyright 2023 The Schibsted-Grotesk Project Authors (https://github.com/schibsted/schibsted-grotesk)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

internal/master/web/static/app.css

@@ -1,34 +1,221 @@
-:root { --bg: #111418; --fg: #e6e8eb; --muted: #8a929c; --line: #262b31; --ok: #3fb950; --warn: #d29922; --bad: #f85149; --accent: #58a6ff; }
-@media (prefers-color-scheme: light) {
-  :root { --bg: #ffffff; --fg: #1f2328; --muted: #59636e; --line: #d1d9e0; --ok: #1a7f37; --warn: #9a6700; --bad: #cf222e; --accent: #0969da; }
+@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url(/static/schibsted-grotesk-latin-wght-normal.woff2) format('woff2')}
+@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(/static/jetbrains-mono-latin-wght-normal.woff2) format('woff2')}
+
+/* Ledger. Tokens live on <html class="app">; a script in <head> adds t-light before first paint. */
+.app{color-scheme:dark;--bg:#0f1218;--side:#0b0d12;--card:#151a23;--hover:#171c26;--line:#232a37;--line2:#323a4a;--fg:#e7eaf1;--mut:#a0a9bb;--dim:#828ba0;--blue:#74a8ff;--bluebg:rgba(116,168,255,.12);--orange:#ffa262;--orangebg:rgba(255,162,98,.12);--green:#62d4a0;--red:#ff7d88;--redbg:rgba(255,125,136,.10);--violet:#c5a9ff;--violetbg:rgba(197,169,255,.12);--l0:#74a8ff;--l1:#c5a9ff;--l2:#5fd0e0;--l3:#f29bd0;--onblue:#06142e;--term:#080a0e;--shadow:0 12px 32px rgba(0,0,0,.5);--sans:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;min-height:100vh;background:var(--bg);color:var(--fg);font:14px/1.45 var(--sans)}
+.app.t-light{color-scheme:light;--bg:#f7f8fa;--side:#eceff4;--card:#ffffff;--hover:#f0f2f6;--line:#dde1e8;--line2:#c6ccd7;--fg:#121620;--mut:#4b5468;--dim:#5c6579;--blue:#2156c8;--bluebg:rgba(33,86,200,.08);--orange:#a84b0b;--orangebg:rgba(200,96,20,.09);--green:#177649;--red:#b32a3b;--redbg:rgba(179,42,59,.07);--violet:#6943c1;--violetbg:rgba(105,67,193,.08);--l0:#2156c8;--l1:#6943c1;--l2:#0b7285;--l3:#a8306f;--onblue:#ffffff;--term:#121620;--shadow:0 12px 32px rgba(20,30,50,.16)}
+*{box-sizing:border-box}
+body{margin:0}
+[hidden]{display:none !important}
+a{color:var(--blue)}a:hover{color:var(--fg)}
+button,input{font-family:inherit}
+:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
+
+/* Shell */
+.shell{display:flex;flex-wrap:wrap;min-height:100vh}
+.side{flex:0 0 232px;background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:28px;padding:20px 14px}
+.brand{display:flex;align-items:center;gap:10px;font:700 15px var(--sans);letter-spacing:-.01em;padding:0 8px;color:var(--fg);text-decoration:none}
+.brand svg{color:var(--blue)}
+.snav{display:flex;flex-direction:column;gap:2px}
+.snav a,.mlist a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:6px;color:var(--mut);text-decoration:none;font-weight:500}
+.snav a:hover,.mlist a:hover{background:var(--hover);color:var(--fg)}
+.snav a.cur,.mlist a.cur{background:var(--card);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
+.snav .n,.mlist .n{margin-left:auto;font:12px var(--mono);color:var(--dim)}
+.slabel{font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--dim);padding:0 8px 6px}
+.mlist{display:flex;flex-direction:column;gap:2px}
+.mlist .sub{padding-left:22px;font-size:13px}
+.mdot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
+.mdot.off{background:transparent;box-shadow:inset 0 0 0 1.5px var(--red)}
+.sw-icon{width:7px;height:7px;flex:none;border-radius:2px;box-shadow:inset 0 0 0 1.5px var(--blue)}
+.livebox{margin-top:auto;padding:10px 8px;border-top:1px solid var(--line);font-size:12px;color:var(--mut);display:flex;flex-direction:column;gap:2px}
+.livebox b{display:flex;align-items:center;gap:8px;color:var(--fg);font-weight:600}
+.pulse{width:8px;height:8px;border-radius:50%;background:var(--green);animation:breathe 2.4s ease-in-out infinite}
+.livebox.down .pulse{background:var(--red);animation:none}
+@keyframes breathe{0%{box-shadow:0 0 0 0 rgba(98,212,160,.45)}50%{box-shadow:0 0 0 5px rgba(98,212,160,0)}}
+.sfoot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
+.sfoot form{margin:0}
+.work{flex:999 1 640px;min-width:0;display:flex;flex-wrap:wrap}
+.main{flex:999 1 520px;min-width:0;padding:28px 36px 48px;container-type:inline-size}
+.sprite{position:absolute;width:0;height:0;overflow:hidden}
+
+/* Page header, buttons */
+.hdr{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 24px;margin-bottom:18px}
+.hdr h1{margin:0;font:700 34px/1 var(--sans);letter-spacing:-.025em}
+.hdr .sub{font-size:14px;color:var(--mut)}
+.hdr .end{margin-left:auto}
+.btn,button:not([class]){height:32px;padding:0 14px;border-radius:6px;border:1px solid var(--line2);background:var(--card);color:var(--fg);font:600 13px var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none}
+.btn:hover,button:not([class]):hover{border-color:var(--dim);color:var(--fg)}
+button:not([class]):disabled{opacity:.5;cursor:not-allowed}
+.btn.pri,.btn.pri:hover{background:var(--blue);border-color:var(--blue);color:var(--onblue)}
+.btn.sm{height:28px;padding:0 10px;font-size:12.5px}
+.btn.quiet{border-color:transparent;background:transparent;color:var(--mut)}
+.btn.quiet:hover{color:var(--fg)}
+.btn.red{color:var(--red);border-color:var(--line2);background:transparent}
+.btn.redfill,.btn.redfill:hover{background:var(--red);border-color:var(--red);color:#1d0408}
+summary.btn{list-style:none}
+summary.btn::-webkit-details-marker{display:none}
+
+/* Overview */
+.tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:8px}
+.search{flex:0 1 340px;min-width:220px;display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:6px;background:var(--card);border:1px solid var(--line2);color:var(--dim)}
+.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--fg);font-size:14px}
+.search input::placeholder{color:var(--dim)}
+.tools .end{margin-left:auto;display:flex;align-items:center;gap:10px}
+.tools .lbl{font-size:12.5px;color:var(--dim)}
+.seg{display:inline-flex;padding:2px;border-radius:7px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line2)}
+.seg button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:5px;background:transparent;color:var(--mut);font:500 12.5px var(--sans);cursor:pointer}
+.seg button:hover{color:var(--fg)}
+.seg button[aria-pressed=true]{background:var(--hover);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line2)}
+.grp{margin-top:28px}
+.gh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding-bottom:8px;border-bottom:2px solid var(--fg)}
+.gh h2{margin:0;font:700 20px var(--sans);letter-spacing:-.015em}
+.gh .kind{font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
+.gh .meta{font-size:13px;color:var(--dim)}
+.gh .warn{font-size:13px;color:var(--red);font-weight:500}
+.gh .count{margin-left:auto;font:12px var(--mono);color:var(--dim)}
+.grp.offline .gh{border-bottom-color:var(--line2)}
+.grp.offline .row{color:var(--dim)}
+.row{position:relative;display:grid;grid-template-columns:minmax(200px,1.4fr) minmax(200px,2fr) 130px minmax(160px,1.5fr) minmax(104px,150px);align-items:center;column-gap:18px;min-height:42px;padding:0 6px;border-bottom:1px solid var(--line)}
+.row:hover{background:var(--hover)}
+.nm{display:flex;align-items:center;gap:8px;min-width:0}
+.nm a{display:inline-flex;align-items:center;gap:10px;min-width:0;color:var(--fg);font-weight:600;text-decoration:none;white-space:nowrap}
+.nm a:hover .nmt{text-decoration:underline;text-underline-offset:3px}
+.nm .nmt{overflow:hidden;text-overflow:ellipsis}
+.nm .stk{font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.ico{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line2);color:var(--fg)}
+.ico svg{fill:currentColor}
+.ltr{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:700 12.5px var(--sans)}
+.lc-0{color:var(--l0);background:color-mix(in srgb,var(--l0) 18%,transparent)}
+.lc-1{color:var(--l1);background:color-mix(in srgb,var(--l1) 18%,transparent)}
+.lc-2{color:var(--l2);background:color-mix(in srgb,var(--l2) 18%,transparent)}
+.lc-3{color:var(--l3);background:color-mix(in srgb,var(--l3) 18%,transparent)}
+.grp.offline .ico,.grp.offline .ltr{opacity:.65}
+.d-icon .nmt,.d-icon .stk{display:none}
+.d-text .ico,.d-text .ltr{display:none}
+.ver{display:flex;min-width:0;font:12.5px var(--mono);color:var(--dim);white-space:nowrap}
+.ver .r{overflow:hidden;text-overflow:ellipsis;min-width:0}
+.ver .t{flex:none}
+.ver b{color:var(--fg);font-weight:500}
+.st{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;white-space:nowrap}
+.st svg{flex:none}
+.st circle{fill:currentColor}
+.s-running{color:var(--green)}.s-degraded{color:var(--orange)}.s-stopped{color:var(--dim)}.s-unknown{color:var(--dim)}
+.s-stopped circle,.s-unknown circle{fill:none}
+.flags{display:flex;flex-wrap:wrap;gap:6px}
+.tag{font:500 12px/20px var(--sans);padding:0 8px;border-radius:999px;white-space:nowrap}
+.tag em{font:500 11.5px var(--mono);font-style:normal;margin-left:6px}
+.tag em:empty{display:none}
+.f-up{color:var(--orange);background:var(--orangebg)}
+.f-newer em{color:var(--orange)}
+.f-err{color:var(--red);background:var(--redbg)}
+.f-newer,.f-notag{color:var(--mut);box-shadow:inset 0 0 0 1px var(--line2)}
+.f-out{color:var(--dim);box-shadow:inset 0 0 0 1px var(--line)}
+.mode{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
+.mode form{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
+.sw{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;font:inherit;font-size:13px;color:var(--mut);cursor:pointer}
+.sw i{flex:none;width:30px;height:18px;border-radius:999px;background:var(--line2);position:relative;transition:background .15s}
+.sw i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--fg);transition:transform .15s}
+.sw[aria-checked=true] i{background:var(--blue)}
+.sw[aria-checked=true] i::after{transform:translateX(12px);background:var(--onblue)}
+.sw[aria-checked=true]{color:var(--blue);font-weight:600}
+.sw:disabled{opacity:.55;cursor:not-allowed}
+.na{font-size:12.5px;color:var(--dim)}
+.nomatch{padding:24px 6px;color:var(--dim)}
+
+/* Agents */
+.hdr.ruled{padding-bottom:16px;border-bottom:2px solid var(--fg);margin-bottom:0}
+.agent{position:relative;display:grid;grid-template-columns:minmax(150px,1fr) 130px 90px 110px 120px 84px;grid-template-areas:"id st ver mgr last act";align-items:center;column-gap:18px;padding:16px 6px;border-bottom:1px solid var(--line)}
+.agent .id{grid-area:id}
+.agent .id b{display:block;font:700 16px var(--sans)}
+.agent .id span{font:12.5px var(--mono);color:var(--dim)}
+.agent .stc{grid-area:st}.agent .ver{grid-area:ver;display:block;font:13px var(--mono);color:var(--mut)}.agent .mgr{grid-area:mgr;font-size:13px;color:var(--mut)}.agent .last{grid-area:last;font-size:13px;color:var(--mut)}.agent .act{grid-area:act;display:flex;justify-content:flex-end}
+.agent .k{display:block;font:600 10.5px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-bottom:2px}
+.agent .ver.old{color:var(--orange)}
+.agent .st{font-size:13.5px;font-weight:600}
+.agent .st i{width:8px;height:8px;border-radius:50%;background:currentColor}
+.a-on{color:var(--green)}.a-off{color:var(--red)}.a-never,.a-revoked{color:var(--dim)}
+.a-off i,.a-never i{background:transparent !important;box-shadow:inset 0 0 0 1.5px currentColor}
+/* After the .agent rules: a container query adds no specificity, so it must come later to win. */
+@container (max-width:760px){
+  .agent{grid-template-columns:1fr auto;grid-template-areas:"id st" "ver mgr" "last act";row-gap:10px}
+}
+.pop{position:absolute;right:6px;top:calc(100% - 8px);z-index:5;width:360px;padding:14px 16px;border-radius:8px;background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow);font-size:13px;color:var(--mut)}
+.pop::before{content:"";position:absolute;top:-6px;right:30px;width:10px;height:10px;background:var(--card);border-left:1px solid var(--line2);border-top:1px solid var(--line2);transform:rotate(45deg)}
+.pop h4{margin:0 0 4px;font:700 14px var(--sans);color:var(--fg)}
+.pop p{margin:0 0 12px}
+.pop .acts{display:flex;gap:8px;justify-content:flex-end;margin:0}
+.drawer{flex:1 1 440px;min-width:0;max-width:520px;border-left:1px solid var(--line2);background:var(--card);padding:28px 28px 40px;display:flex;flex-direction:column;gap:18px}
+.dh{display:flex;align-items:center;gap:12px}
+.dh h2{margin:0;font:700 20px var(--sans);letter-spacing:-.015em}
+.dh .x{margin-left:auto}
+.steps{display:flex;gap:8px;font-size:12.5px;color:var(--dim)}
+.steps span{display:flex;align-items:center;gap:6px}
+.steps b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font:600 11px var(--mono);box-shadow:inset 0 0 0 1px var(--line2)}
+.steps .done{color:var(--green)}.steps .done b{box-shadow:none;background:var(--green);color:var(--bg)}
+.steps .now{color:var(--fg)}.steps .now b{box-shadow:none;background:var(--blue);color:var(--onblue)}
+.steps .sep{width:16px;height:1px;background:var(--line2)}
+.dform{display:flex;flex-direction:column;gap:18px;margin:0}
+.field{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--mut)}
+.field input{height:36px;padding:0 12px;border-radius:6px;border:1px solid var(--line2);background:var(--bg);color:var(--fg);font:500 14px var(--mono)}
+.field small{color:var(--dim);font-size:12.5px}
+.namebox{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:6px;background:var(--bg);font-size:13.5px}
+.namebox code{font:500 14px var(--mono);color:var(--fg)}
+.notice{display:flex;gap:10px;padding:12px 14px;border-radius:6px;background:var(--orangebg);color:var(--fg);font-size:13.5px}
+.notice svg{flex:none;color:var(--orange);margin-top:1px}
+.code{border-radius:6px;background:var(--term);overflow:hidden}
+.code-h{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 6px 12px;border-bottom:1px solid #1d2230;font:12px var(--mono);color:#8d96a8}
+.code pre{margin:0;padding:12px;border:0;color:#cdd3df;font:12px/1.6 var(--mono);overflow-x:auto}
+.secret{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px 12px;font-size:13px;color:var(--mut)}
+.secret code{font:12.5px var(--mono);color:var(--fg);overflow-wrap:anywhere}
+.df{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:auto}
+.df form{margin:0}
+.df > span{margin-right:auto;font-size:13px;color:var(--mut);display:flex;align-items:center;gap:8px}
+.df .ok{color:var(--green)}
+.spin{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line2);border-top:2px solid var(--blue);box-sizing:border-box;animation:spin 1s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+
+/* Pages that keep the plain markup: service, jobs, job */
+h1{font:700 34px/1.1 var(--sans);letter-spacing:-.025em;margin:0 0 18px}
+h2{font:700 20px var(--sans);letter-spacing:-.015em;margin:28px 0 8px}
+table{width:100%;border-collapse:collapse;margin-bottom:24px}
+th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
+th{color:var(--mut);font-weight:500}
+code,pre{font:13px var(--mono)}
+pre{padding:12px;border:1px solid var(--line);border-radius:6px;overflow-x:auto}
+.badge{font-size:12px;color:var(--mut);border:1px solid var(--line);padding:0 6px;border-radius:8px}
+.status-running{color:var(--green)}
+.status-degraded,.status-unknown{color:var(--orange)}
+.status-stopped{color:var(--red)}
+.error{color:var(--red)}
+.warning{color:var(--orange)}
+.muted{color:var(--dim)}
+.status-job-succeeded{color:var(--green)}
+.status-job-queued,.status-job-running{color:var(--orange)}
+.status-job-failed{color:var(--red)}
+table.details{width:auto}
+table.details th{padding-right:24px}
+pre.log{white-space:pre-wrap}
+
+@media (max-width:760px){
+  .side{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 16px;border-right:0;border-bottom:1px solid var(--line)}
+  #snav{order:3;width:100%}
+  .snav{flex-direction:row;overflow-x:auto}
+  .snav a{padding:10px 12px}
+  .snav .n{margin-left:4px}
+  .mblock{display:none}
+  .livebox{margin:0 0 0 auto;border:0;padding:0}
+  .livebox #live-age{display:none}
+  .main{padding:20px 16px 40px}
+  .hdr h1{font-size:28px}
+  .hdr .end,.tools .end{margin-left:0}
+  .search{flex:1 1 100%}
+  .btn,button:not([class]){height:44px}
+  .btn.sm{height:36px}
+  .row{grid-template-columns:1fr auto;grid-template-areas:"nm st" "ver ver" "fl fl" "mode mode";row-gap:8px;padding:12px 4px}
+  .nm{grid-area:nm}.stc{grid-area:st}.row .ver{grid-area:ver}.flags{grid-area:fl}.mode{grid-area:mode}
+  .flags:empty{display:none}
+  .agent{grid-template-columns:1fr auto;grid-template-areas:"id st" "ver mgr" "last act";row-gap:10px}
+  .drawer{order:-1;max-width:none;border-left:0;border-bottom:1px solid var(--line2);padding:20px 16px}
+  .pop{left:0;right:0;width:auto}
+  table{display:block;overflow-x:auto}
 }
-* { box-sizing: border-box; }
-body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 system-ui, sans-serif; }
-nav { display: flex; gap: 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
-nav form { margin-left: auto; }
-main { padding: 16px; max-width: 1200px; margin: 0 auto; }
-a { color: var(--accent); }
-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
-th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
-th { color: var(--muted); font-weight: 500; }
-code, pre { font: 13px ui-monospace, monospace; }
-pre { padding: 12px; border: 1px solid var(--line); overflow-x: auto; }
-.badge { font-size: 12px; color: var(--muted); border: 1px solid var(--line); padding: 0 6px; border-radius: 8px; }
-.status-running { color: var(--ok); }
-.status-degraded, .status-unknown { color: var(--warn); }
-.status-stopped { color: var(--bad); }
-.error { color: var(--bad); }
-.warning { color: var(--warn); }
-form.inline { display: flex; gap: 8px; margin-bottom: 16px; }
-@media (max-width: 600px) { table { display: block; overflow-x: auto; } }
-.muted { color: var(--muted); }
-.status-job-succeeded { color: var(--ok); }
-.status-job-queued, .status-job-running { color: var(--warn); }
-.status-job-failed { color: var(--bad); }
-table.details { width: auto; }
-table.details th { padding-right: 24px; }
-pre.log { white-space: pre-wrap; }
-.badge-update { color: var(--warn); border-color: var(--warn); }
-.badge-error { color: var(--bad); border-color: var(--bad); }
-form.mode { display: inline; margin-left: 8px; }
-form.mode button { font-size: 12px; padding: 0 6px; }

internal/master/web/static/app.js

@@ -0,0 +1,226 @@
+// Behaviour the server-rendered pages need in the browser: theme, display
+// mode, search and machine filter, the Live box, local times, copy buttons and
+// the revoke popovers. The pages work without it; htmx and the SSE extension
+// do the live updates. Everything stored in the browser is wrapped in
+// try/catch because storage can be blocked.
+(function () {
+  'use strict';
+  var root = document.documentElement;
+
+  function load(area, key) {
+    try { return window[area].getItem(key); } catch (e) { return null; }
+  }
+  function save(area, key, value) {
+    try { window[area].setItem(key, value); } catch (e) { /* storage is blocked */ }
+  }
+  function each(selector, fn) {
+    Array.prototype.forEach.call(document.querySelectorAll(selector), fn);
+  }
+
+  // Theme: the head script set the initial class; the toggle overrides it.
+  var colorScheme = window.matchMedia ? window.matchMedia('(prefers-color-scheme: light)') : null;
+  var themeButton = document.getElementById('theme-toggle');
+  if (themeButton) {
+    themeButton.addEventListener('click', function () {
+      var light = !root.classList.contains('t-light');
+      root.classList.toggle('t-light', light);
+      themeButton.setAttribute('aria-pressed', String(light));
+      save('localStorage', 'pu-theme', light ? 'light' : 'dark');
+    });
+    themeButton.setAttribute('aria-pressed', String(root.classList.contains('t-light')));
+  }
+  if (colorScheme && colorScheme.addEventListener) {
+    colorScheme.addEventListener('change', function (e) {
+      if (!load('localStorage', 'pu-theme')) root.classList.toggle('t-light', e.matches);
+    });
+  }
+
+  // Display mode: icon, icon + text, or text.
+  function setDisplay(mode) {
+    ['icon', 'both', 'text'].forEach(function (m) { root.classList.toggle('d-' + m, m === mode); });
+    each('[data-display]', function (b) { b.setAttribute('aria-pressed', String(b.dataset.display === mode)); });
+  }
+  setDisplay(root.classList.contains('d-icon') ? 'icon' : root.classList.contains('d-text') ? 'text' : 'both');
+
+  // Search and machine filter. The rows are all in the page; this hides them.
+  var filter = { q: '', machine: '' };
+  try {
+    var saved = JSON.parse(load('sessionStorage', 'pu-filter') || '{}');
+    if (typeof saved.q === 'string') filter.q = saved.q;
+    if (typeof saved.machine === 'string') filter.machine = saved.machine;
+  } catch (e) { /* ignore a broken saved filter */ }
+  var search = document.getElementById('q');
+  if (search) search.value = filter.q;
+
+  // The machine list is hidden on narrow screens; a filter that cannot be
+  // seen or cleared there is ignored. Search still applies.
+  var narrow = window.matchMedia ? window.matchMedia('(max-width:760px)') : null;
+
+  function applyFilter() {
+    var box = document.getElementById('services');
+    if (!box) return;
+    var groups = box.querySelectorAll('.grp');
+    var known = Array.prototype.some.call(groups, function (g) { return g.dataset.key === filter.machine; });
+    if (filter.machine && !known) filter.machine = '';
+    var machine = narrow && narrow.matches ? '' : filter.machine;
+    var q = filter.q.trim().toLowerCase();
+    var any = false;
+    Array.prototype.forEach.call(groups, function (g) {
+      var inMachine = !machine || g.dataset.key === machine;
+      var shown = 0;
+      Array.prototype.forEach.call(g.querySelectorAll('.row'), function (row) {
+        var match = inMachine && (!q || (row.dataset.search || '').indexOf(q) !== -1);
+        row.hidden = !match;
+        if (match) shown++;
+      });
+      g.hidden = shown === 0;
+      if (shown > 0) any = true;
+    });
+    var none = document.getElementById('nomatch');
+    if (none) none.hidden = any || groups.length === 0;
+    each('#machines a', function (a) {
+      var cur = a.dataset.machine === filter.machine;
+      a.classList.toggle('cur', cur);
+      if (cur) a.setAttribute('aria-current', 'true'); else a.removeAttribute('aria-current');
+    });
+  }
+  if (narrow && narrow.addEventListener) narrow.addEventListener('change', function () { applyFilter(); });
+  function saveFilter() { save('sessionStorage', 'pu-filter', JSON.stringify(filter)); }
+
+  if (search) {
+    search.addEventListener('input', function () { filter.q = search.value; saveFilter(); applyFilter(); });
+  }
+
+  // Live box: counts any event on the stream, including the server's ping.
+  var live = document.getElementById('live');
+  var liveAge = document.getElementById('live-age');
+  var lastEvent = null;
+  var down = false;
+  var wired = typeof WeakSet === 'function' ? new WeakSet() : null;
+  function touch() { lastEvent = Date.now(); }
+  document.addEventListener('htmx:sseOpen', function (e) {
+    var source = e.detail && e.detail.source;
+    touch();
+    down = false;
+    if (source && wired && !wired.has(source)) {
+      wired.add(source);
+      ['ping', 'services', 'agents', 'jobs'].forEach(function (name) { source.addEventListener(name, touch); });
+    }
+  });
+  document.addEventListener('htmx:sseError', function () { down = true; });
+  function renderLive() {
+    if (!live || !liveAge) return;
+    live.classList.toggle('down', down);
+    if (down) { liveAge.textContent = 'Reconnecting…'; return; }
+    if (lastEvent === null) { liveAge.textContent = 'connecting…'; return; }
+    var s = Math.max(0, Math.round((Date.now() - lastEvent) / 1000));
+    liveAge.textContent = 'last event ' + (s < 60 ? s + ' s ago' : Math.floor(s / 60) + ' min ago');
+  }
+
+  // Times: the server writes <time datetime="..."> with its own clock as
+  // fallback text; show them in the browser's time zone.
+  var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  function pad(n) { return (n < 10 ? '0' : '') + n; }
+  function localiseTimes() {
+    each('time[datetime]', function (t) {
+      var d = new Date(t.getAttribute('datetime'));
+      if (isNaN(d.getTime())) return;
+      var text;
+      if (t.hasAttribute('data-rel')) {
+        var min = Math.floor((Date.now() - d.getTime()) / 60000);
+        text = min < 1 ? 'just now' : min < 60 ? min + ' min ago' : min < 1440 ? Math.floor(min / 60) + ' h ago' : Math.floor(min / 1440) + ' d ago';
+        t.title = d.toLocaleString();
+      } else {
+        var clock = pad(d.getHours()) + ':' + pad(d.getMinutes());
+        text = d.toDateString() === new Date().toDateString() ? clock : months[d.getMonth()] + ' ' + d.getDate() + ' ' + clock;
+      }
+      if (t.textContent !== text) t.textContent = text;
+    });
+  }
+
+  // Copy buttons: data-copy holds the text, data-copy-target the id of the element to copy.
+  function flash(button, text) {
+    if (!button.dataset.label) button.dataset.label = button.textContent;
+    button.textContent = text;
+    setTimeout(function () { button.textContent = button.dataset.label; }, 2000);
+  }
+  function copyFallback(button, text) {
+    var target = button.dataset.copyTarget ? document.getElementById(button.dataset.copyTarget) : null;
+    if (target) {
+      var range = document.createRange();
+      range.selectNodeContents(target);
+      var selection = window.getSelection();
+      selection.removeAllRanges();
+      selection.addRange(range);
+      flash(button, 'Press Ctrl+C');
+      return;
+    }
+    var area = document.createElement('textarea');
+    area.value = text;
+    area.setAttribute('readonly', '');
+    area.style.position = 'fixed';
+    area.style.opacity = '0';
+    document.body.appendChild(area);
+    area.select();
+    var ok = false;
+    try { ok = document.execCommand('copy'); } catch (e) { /* not allowed */ }
+    document.body.removeChild(area);
+    flash(button, ok ? 'Copied' : 'Copy failed');
+  }
+
+  // Revoke popovers are <details>. A swap of the agent list would close them, so reopen those that were open.
+  var openRevokes = [];
+
+  document.addEventListener('click', function (e) {
+    var display = e.target.closest('[data-display]');
+    if (display) {
+      setDisplay(display.dataset.display);
+      save('localStorage', 'pu-display', display.dataset.display);
+      return;
+    }
+    var machine = e.target.closest('#machines a');
+    if (machine) {
+      e.preventDefault();
+      filter.machine = filter.machine === machine.dataset.machine ? '' : machine.dataset.machine;
+      saveFilter();
+      applyFilter();
+      return;
+    }
+    var close = e.target.closest('[data-close]');
+    if (close) {
+      var details = close.closest('details');
+      if (details) details.open = false;
+      return;
+    }
+    var copy = e.target.closest('[data-copy], [data-copy-target]');
+    if (copy) {
+      var text = copy.dataset.copy;
+      if (text === undefined) {
+        var el = document.getElementById(copy.dataset.copyTarget);
+        text = el ? el.textContent : '';
+      }
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(function () { flash(copy, 'Copied'); }, function () { copyFallback(copy, text); });
+      } else {
+        copyFallback(copy, text);
+      }
+    }
+  });
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape') each('details.rv[open]', function (d) { d.open = false; });
+  });
+  document.addEventListener('htmx:beforeSwap', function () {
+    openRevokes = [];
+    each('details.rv[open]', function (d) { openRevokes.push(d.dataset.id); });
+  });
+  document.addEventListener('htmx:afterSwap', function () {
+    each('details.rv', function (d) { if (openRevokes.indexOf(d.dataset.id) !== -1) d.open = true; });
+  });
+  document.addEventListener('htmx:afterSettle', function () { applyFilter(); localiseTimes(); });
+
+  applyFilter();
+  localiseTimes();
+  renderLive();
+  setInterval(renderLive, 1000);
+  setInterval(localiseTimes, 15000);
+})();

internal/master/web/templates/agent_created.html

@@ -1,6 +0,0 @@
-{{define "content"}}
-<h1>Agent "{{.Created.Name}}" created</h1>
-<p class="warning">The token is shown only once. Save this as <code>docker-compose.yml</code> on the machine and run <code>docker compose up -d</code>.</p>
-<pre>{{.Snippet}}</pre>
-<p><a href="/agents">Back to agents</a></p>
-{{end}}

internal/master/web/templates/agents.html

@@ -1,38 +1,108 @@
 {{define "content"}}
-<h1>Agents</h1>
-<form method="post" action="/agents" class="inline">
-  <input type="hidden" name="csrf_token" value="{{.CSRF}}">
-  <label>Name <input name="name" required placeholder="node-2"></label>
-  <button type="submit">Add agent</button>
-</form>
-{{if .Error}}<p class="error">{{.Error}}</p>{{end}}
+<div class="hdr ruled">
+  <h1>Agents</h1>
+  <span class="sub" id="agents-sub">{{template "agents-sub" .}}</span>
+  <div class="end"><a class="btn pri" href="/agents?add=1">Add agent</a></div>
+</div>
 <div id="agents" hx-get="/fragments/agents" hx-trigger="sse:agents" hx-swap="innerHTML">
   {{template "agents" .}}
 </div>
 {{end}}
 
-{{define "agents"}}
-<table>
-  <thead><tr><th>Name</th><th>Hostname</th><th>State</th><th>Version</th><th>Swarm manager</th><th>Last seen</th><th></th></tr></thead>
-  <tbody>
-  {{range .Agents}}
-    <tr>
-      <td>{{.Name}}</td>
-      <td>{{.Hostname}}</td>
-      <td>{{if .RevokedAt}}<span class="status status-stopped">revoked</span>{{else if .Online}}<span class="status status-running">online</span>{{else}}<span class="status status-degraded">offline</span>{{end}}</td>
-      <td>{{.AgentVersion}}</td>
-      <td>{{if .SwarmManager}}yes{{end}}</td>
-      <td>{{with .LastSeenAt}}{{.Format "2006-01-02 15:04"}}{{end}}</td>
-      <td>{{if not .RevokedAt}}
-        <form method="post" action="/agents/{{.ID}}/revoke" onsubmit="return confirm('Revoke {{.Name}}? It is disconnected immediately and must be added again to come back.')">
-          <input type="hidden" name="csrf_token" value="{{$.CSRF}}">
-          <button type="submit">Revoke</button>
-        </form>
-      {{end}}</td>
-    </tr>
-  {{else}}
-    <tr><td colspan="7">No agents yet.</td></tr>
-  {{end}}
-  </tbody>
-</table>
+{{define "agents-sub"}}{{.Nav.AgentsTotal}} {{if eq .Nav.AgentsTotal 1}}machine{{else}}machines{{end}}{{if .MasterVersion}} · master {{.MasterVersion}}{{end}}{{end}}
+
+{{/* What /fragments/agents returns: the list, and the header count swapped in out of band. */}}
+{{define "agents-fragment"}}
+{{template "agents" .}}
+<span class="sub" id="agents-sub" hx-swap-oob="true">{{template "agents-sub" .}}</span>
 {{end}}
+
+{{define "agents"}}
+{{range .Agents}}
+<div class="agent">
+  <div class="id"><b>{{.Name}}</b><span>{{.Hostname}}</span></div>
+  <div class="stc"><span class="st {{.StatusClass}}"><i></i>{{.Status}}</span></div>
+  <div class="ver{{if .VersionOld}} old{{end}}"><span class="k">Agent</span>{{.AgentVersion}}</div>
+  <div class="mgr"><span class="k">Swarm</span>{{.Role}}</div>
+  <div class="last"><span class="k">Last seen</span>{{if .Online}}now{{else}}{{with .LastSeenAt}}<time datetime="{{.Format "2006-01-02T15:04:05Z07:00"}}" data-rel>{{.Format "2006-01-02 15:04"}}</time>{{else}}—{{end}}{{end}}</div>
+  <div class="act">{{if not .RevokedAt}}
+    <details class="rv" data-id="{{.ID}}">
+      <summary class="btn sm red">Revoke</summary>
+      <div class="pop" role="dialog" aria-label="Confirm revoke">
+        <h4>Revoke {{.Name}}?</h4>
+        <p>Its token stops working immediately. Services on {{.Name}} keep running, but drop out of package-updater.</p>
+        <form method="post" action="/agents/{{.ID}}/revoke" class="acts">
+          <input type="hidden" name="csrf_token" value="{{$.CSRF}}">
+          <button type="button" class="btn sm quiet" data-close>Cancel</button>
+          <button type="submit" class="btn sm redfill">Revoke</button>
+        </form>
+      </div>
+    </details>
+  {{end}}</div>
+</div>
+{{else}}
+<p class="nomatch">No agents yet.</p>
+{{end}}
+{{end}}
+
+{{/* The "add agent" panel beside the list. Step 1 asks for a name, step 2 shows the one-time token, step 3 waits for the agent to connect. */}}
+{{define "drawer"}}
+{{if .AddStep}}
+<section class="drawer" aria-label="Add agent">
+  <div class="dh">
+    <h2>Add agent</h2>
+    <a class="btn sm quiet x" href="/agents" aria-label="Close">
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M3 3l8 8M11 3l-8 8"></path></svg>
+    </a>
+  </div>
+  {{if eq .AddStep 1}}
+  <div class="steps" id="add-steps">{{template "steps" 1}}</div>
+  <form method="post" action="/agents" class="dform">
+    <input type="hidden" name="csrf_token" value="{{.CSRF}}">
+    <label class="field">Name
+      <input name="name" required autofocus autocomplete="off" placeholder="node-2" value="{{.FormName}}">
+      <small>Lowercase letters, digits and dashes. Use the machine's name.</small>
+    </label>
+    {{if .Error}}<p class="error" role="alert">{{.Error}}</p>{{end}}
+    <div class="df">
+      <a class="btn quiet" href="/agents">Cancel</a>
+      <button type="submit" class="btn pri">Create agent</button>
+    </div>
+  </form>
+  {{else}}
+  <div class="steps" id="add-steps">{{template "steps" 2}}</div>
+  <div class="namebox"><span>Name</span><code>{{.Created.Name}}</code></div>
+  <div class="notice" role="note">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M8 1.8L15 14H1L8 1.8z"></path><path d="M8 6.5v3.5M8 12v.01"></path></svg>
+    <span><b>This token is shown only once.</b> Save the snippet as <code>docker-compose.yml</code> on the machine and run <code>docker compose up -d</code>.</span>
+  </div>
+  <div class="code">
+    <div class="code-h"><span>docker-compose.yml</span><button type="button" class="btn sm" data-copy-target="snippet">Copy</button></div>
+    <pre id="snippet">{{.Snippet}}</pre>
+  </div>
+  <div class="secret">
+    <span>Token</span><code>{{middle .Token}}</code><button type="button" class="btn sm" data-copy="{{.Token}}">Copy</button>
+    <span>Master key</span><code>{{middle .MasterKey}}</code><button type="button" class="btn sm" data-copy="{{.MasterKey}}">Copy</button>
+  </div>
+  <div class="df" id="connect" hx-get="/fragments/agents/{{.Created.ID}}/connect" hx-trigger="load, sse:agents" hx-swap="innerHTML">
+    {{template "connect" .}}
+  </div>
+  {{end}}
+</section>
+{{end}}
+{{end}}
+
+{{/* step is the one in progress (1 to 3); 4 marks all three as done. */}}
+{{define "steps"}}<span class="{{if gt . 1}}done{{else}}now{{end}}"><b>1</b>Name</span><span class="sep"></span><span class="{{if gt . 2}}done{{else if eq . 2}}now{{end}}"><b>2</b>Deploy</span><span class="sep"></span><span class="{{if gt . 3}}done{{else if eq . 3}}now{{end}}"><b>3</b>Connect</span>{{end}}
+
+{{/* Step 3. Until the agent has connected, Cancel revokes the token that was just created. */}}
+{{define "connect"}}{{if .Connected}}<span class="ok">Connected · {{.Created.Hostname}} · {{.Created.AgentVersion}}</span>
+<a class="btn pri" href="/agents">Done</a>
+<div id="add-steps" hx-swap-oob="innerHTML">{{template "steps" 4}}</div>
+{{else}}<span><span class="spin" aria-hidden="true"></span>Waiting for {{.Created.Name}}…</span>
+<form method="post" action="/agents/{{.Created.ID}}/revoke">
+  <input type="hidden" name="csrf_token" value="{{.CSRF}}">
+  <button type="submit" class="btn quiet">Cancel</button>
+</form>
+<a class="btn pri" href="/agents">Done</a>
+{{end}}{{end}}

internal/master/web/templates/layout.html

@@ -1,23 +1,62 @@
 {{define "layout"}}<!doctype html>
-<html lang="en">
+<html lang="en" class="app">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="dark light">
   <title>{{.Title}} · package-updater</title>
+  <script>
+    // Sets the theme and the display mode before first paint. app.js changes them later.
+    (function () {
+      var root = document.documentElement, theme = null, display = null;
+      try { theme = localStorage.getItem('pu-theme'); display = localStorage.getItem('pu-display'); } catch (e) {}
+      if (theme !== 'light' && theme !== 'dark') {
+        theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+      }
+      if (theme === 'light') root.classList.add('t-light');
+      root.classList.add(display === 'icon' || display === 'text' ? 'd-' + display : 'd-both');
+    })();
+  </script>
+  <link rel="preload" href="/static/schibsted-grotesk-latin-wght-normal.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="stylesheet" href="/static/app.css">
   <script src="/static/htmx.min.js"></script>
   <script src="/static/htmx-ext-sse.js"></script>
+  <script src="/static/app.js" defer></script>
 </head>
 <body hx-headers='{"X-CSRF-Token": "{{.CSRF}}"}' hx-ext="sse" sse-connect="/events">
-  <nav>
-    <a href="/">Services</a>
-    <a href="/jobs">Jobs</a>
-    <a href="/agents">Agents</a>
-    <form method="post" action="/auth/logout">
-      <input type="hidden" name="csrf_token" value="{{.CSRF}}">
-      <button type="submit">Log out</button>
-    </form>
-  </nav>
-  <main>{{template "content" .}}</main>
+  <div class="shell">
+    <aside class="side">
+      <div class="brand">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M3 6h14M3 10h9M3 14h6"></path><path d="M15 16V10m-2.5 2.5L15 10l2.5 2.5"></path></svg>
+        package-updater
+      </div>
+      <div id="snav" hx-get="/fragments/nav?section={{.Nav.Section}}" hx-trigger="sse:services, sse:agents" hx-swap="innerHTML">{{template "nav" .}}</div>
+      {{block "machines" .}}{{end}}
+      <div class="livebox" id="live">
+        <b><span class="pulse" aria-hidden="true"></span>Live</b>
+        <span id="live-age">connecting…</span>
+      </div>
+      <div class="sfoot">
+        <button type="button" class="btn sm quiet" id="theme-toggle">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="7" cy="7" r="5"></circle><path d="M7 2v10" ></path></svg>
+          Theme
+        </button>
+        <form method="post" action="/auth/logout">
+          <input type="hidden" name="csrf_token" value="{{.CSRF}}">
+          <button type="submit" class="btn sm quiet">Log out</button>
+        </form>
+      </div>
+    </aside>
+    <div class="work">
+      <main class="main">{{template "content" .}}</main>
+      {{block "drawer" .}}{{end}}
+    </div>
+  </div>
 </body>
 </html>{{end}}
+
+{{define "nav"}}<nav class="snav" aria-label="Main">
+  <a href="/"{{if eq .Nav.Section "services"}} class="cur" aria-current="page"{{end}}>Services <span class="n">{{.Nav.Services}}</span></a>
+  <a href="/jobs"{{if eq .Nav.Section "jobs"}} class="cur" aria-current="page"{{end}}>Jobs</a>
+  <a href="/agents"{{if eq .Nav.Section "agents"}} class="cur" aria-current="page"{{end}}>Agents <span class="n">{{.Nav.AgentsOnline}}/{{.Nav.AgentsTotal}}</span></a>
+</nav>{{end}}

internal/master/web/templates/overview.html

@@ -1,38 +1,104 @@
 {{define "content"}}
-<h1>Services</h1>
-<div id="services" hx-get="/fragments/services" hx-trigger="sse:services" hx-swap="innerHTML">
+<div class="hdr">
+  <h1>Services</h1>
+</div>
+<div class="tools">
+  <label class="search">
+    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="6.5" cy="6.5" r="5"></circle><path d="M10.3 10.3L14 14"></path></svg>
+    <input type="search" id="q" placeholder="Search services" aria-label="Search services" autocomplete="off">
+  </label>
+  <div class="end">
+    <span class="lbl" id="showlbl">Show</span>
+    <div class="seg" role="group" aria-labelledby="showlbl">
+      <button type="button" data-display="icon" aria-pressed="false">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="2" y="2" width="10" height="10" rx="2.5"></rect></svg>
+        Icon
+      </button>
+      <button type="button" data-display="both" aria-pressed="true">
+        <svg width="18" height="14" viewBox="0 0 18 14" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="1" y="3" width="8" height="8" rx="2"></rect><path d="M12 7h5"></path></svg>
+        Icon + text
+      </button>
+      <button type="button" data-display="text" aria-pressed="false">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M2 4.5h10M2 9.5h7"></path></svg>
+        Text
+      </button>
+    </div>
+  </div>
+</div>
+<div id="services" hx-get="/fragments/services" hx-trigger="sse:services, sse:agents" hx-swap="innerHTML">
   {{template "services" .}}
 </div>
 {{end}}
 
-{{define "services"}}
+{{/* The machine filter in the sidebar. The page defines it; the services fragment replaces its links out of band. */}}
+{{define "machines"}}
+<div class="mblock">
+  <div class="slabel">Machines</div>
+  <nav class="mlist" id="machines" aria-label="Filter by machine">{{template "machine-links" .}}</nav>
+</div>
+{{end}}
+
+{{define "machine-links"}}
+<a class="cur" href="/" aria-current="true" data-machine="">All <span class="n">{{.ServiceCount}}</span></a>
 {{range .Groups}}
-<section>
-  <h2>{{.Title}}</h2>
-  <table>
-    <thead><tr><th>Service</th><th>Image</th><th>Status</th><th>Mode</th></tr></thead>
-    <tbody>
-    {{range .Services}}
-      <tr>
-        <td><a href="/services/{{.ID}}">{{.DisplayName}}</a>{{if .Self}} <span class="badge">managed outside</span>{{end}}{{if .AvailableRef}} <span class="badge badge-update" title="{{.AvailableRef}}">update available</span>{{end}}{{if followsNoTag .Service}} <span class="badge">follows no tag</span>{{end}}{{if .LastPollError}} <span class="badge badge-error" title="{{.LastPollError}}">poll failed</span>{{end}}</td>
-        <td><code>{{shortRef .ActualRef}}</code></td>
-        <td class="status status-{{.Status}}">{{.Status}}</td>
-        <td>{{.UpdateMode}}
-          <form method="post" action="/services/{{.ID}}/mode" class="mode">
-            <input type="hidden" name="csrf_token" value="{{$.CSRF}}">
-            <input type="hidden" name="return" value="overview">
-            {{if eq .UpdateMode "auto"}}<input type="hidden" name="mode" value="manual">
-            <button type="submit">Make manual</button>
-            {{else}}<input type="hidden" name="mode" value="auto">
-            <button type="submit"{{if .AutoBlocked}} disabled{{end}}>Make auto</button>{{if .AutoBlocked}} <span class="muted">{{.AutoBlocked}}</span>{{end}}{{end}}
-          </form>
-        </td>
-      </tr>
-    {{end}}
-    </tbody>
-  </table>
+<a href="/"{{if .Sub}} class="sub"{{end}} data-machine="{{.Key}}">{{if .Cluster}}<span class="sw-icon" aria-hidden="true"></span>{{else}}<span class="mdot{{if .Offline}} off{{end}}" aria-hidden="true"></span>{{end}}{{.Title}} <span class="n">{{len .Services}}</span></a>
+{{end}}
+{{end}}
+
+{{/* What /fragments/services returns: the groups, and the machine filter swapped in out of band. */}}
+{{define "services-fragment"}}
+{{template "services" .}}
+<div id="machines" hx-swap-oob="innerHTML">{{template "machine-links" .}}</div>
+{{end}}
+
+{{define "services"}}
+{{if .Sprite}}<svg class="sprite" aria-hidden="true">{{range .Sprite}}<symbol id="si-{{.Slug}}" viewBox="0 0 24 24"><path fill="currentColor" d="{{.Path}}"/></symbol>{{end}}</svg>{{end}}
+{{range .Groups}}
+<section class="grp{{if .Offline}} offline{{end}}" data-key="{{.Key}}" aria-label="{{.Title}}">
+  <div class="gh">
+    <h2{{if .TitleHint}} title="{{.TitleHint}}"{{end}}>{{.Title}}</h2>
+    <span class="kind">{{.Kind}}</span>
+    {{if .Meta}}<span class="meta">{{.Meta}}</span>{{end}}
+    {{if .Offline}}<span class="warn">{{.OfflineLabel}}{{with .OfflineSince}} since <time datetime="{{.Format "2006-01-02T15:04:05Z07:00"}}">{{.Format "15:04"}}</time>{{end}} · showing last known state</span>{{end}}
+    <span class="count">{{len .Services}}</span>
+  </div>
+  {{range .Services}}
+  <div class="row" data-search="{{.Search}}">
+    <div class="nm">
+      <a href="/services/{{.ID}}" title="{{.DisplayName}}" aria-label="{{.DisplayName}}">
+        {{if .Icon}}<span class="ico" aria-hidden="true"><svg width="15" height="15" viewBox="0 0 24 24"><use href="#si-{{.Icon}}"></use></svg></span>{{else}}<span class="ltr {{.LetterClass}}" aria-hidden="true">{{.Letter}}</span>{{end}}
+        <span class="nmt">{{.Name}}</span>
+      </a>
+      {{if .Stack}}<span class="stk">{{.Stack}}</span>{{end}}
+    </div>
+    <div class="ver" title="{{.ActualRef}}"><span class="r">{{.Repo}}</span><span class="t"><b>{{.Tag}}</b>{{.Digest}}</span></div>
+    <div class="stc">
+      <span class="st {{.StatusClass}}"><svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="4" stroke="currentColor" stroke-width="1.5"></circle></svg>{{.StatusLabel}}</span>
+    </div>
+    <div class="flags">
+      {{if .AvailableRef}}<span class="tag f-up" title="{{.AvailableRef}}">Update available<em>{{.AvailableTag}}</em></span>{{end}}
+      {{if .NewerTag}}<span class="tag f-newer" title="{{.NewerRef}}">Newer tag<em>{{.NewerTag}}</em></span>{{end}}
+      {{if followsNoTag .Service}}<span class="tag f-notag">Follows no tag</span>{{end}}
+      {{if .LastPollError}}<span class="tag f-err" title="{{.LastPollError}}">Poll failed</span>{{end}}
+      {{if .Self}}<span class="tag f-out">Managed outside</span>{{end}}
+    </div>
+    <div class="mode">
+      {{if .Self}}<span class="na">n/a</span>
+      {{else}}<form method="post" action="/services/{{.ID}}/mode">
+        <input type="hidden" name="csrf_token" value="{{$.CSRF}}">
+        <input type="hidden" name="return" value="overview">
+        {{if eq .UpdateMode "auto"}}<input type="hidden" name="mode" value="manual">
+        <button type="submit" class="sw" role="switch" aria-checked="true"><i></i>Auto</button>
+        {{else}}<input type="hidden" name="mode" value="auto">
+        <button type="submit" class="sw" role="switch" aria-checked="false"{{if .AutoBlocked}} disabled title="{{.AutoBlocked}}"{{end}}><i></i>Manual</button>
+        {{if .AutoBlocked}}<span class="na">{{.AutoBlocked}}</span>{{end}}{{end}}
+      </form>{{end}}
+    </div>
+  </div>
+  {{end}}
 </section>
 {{else}}
-<p>No services reported yet. <a href="/agents">Add an agent</a> to get started.</p>
+<p>No services reported yet. <a href="/agents?add=1">Add an agent</a> to get started.</p>
 {{end}}
+<p class="nomatch" id="nomatch" hidden>No services match.</p>
 {{end}}

internal/master/web/templates/service.html

@@ -9,6 +9,7 @@
   <tr><th>Status</th><td class="status status-{{.Service.Status}}">{{.Service.Status}}</td></tr>
   {{if .Service.DesiredRef}}<tr><th>Desired image</th><td><code>{{shortRef .Service.DesiredRef}}</code></td></tr>{{end}}
   {{if .Service.AvailableRef}}<tr><th>Available</th><td><code>{{.Service.AvailableRef}}</code> <span class="muted">via {{.Service.AvailableSource}}{{with .Service.AvailableAt}}, {{.Format "2006-01-02 15:04"}}{{end}}</span></td></tr>{{end}}
+  {{if .NewerTag}}<tr><th>Newer tag</th><td><code>{{.Service.NewerRef}}</code> <span class="muted">from the registry's tag list{{with .Service.NewerAt}}, {{.Format "2006-01-02 15:04"}}{{end}}; deploy it from Versions</span></td></tr>{{end}}
   <tr><th>Mode</th><td>{{.Service.UpdateMode}}</td></tr>
   <tr><th>Polling</th><td{{if .PollFailed}} class="error"{{end}}>{{.Polling}}</td></tr>
   {{if .ConfigFiles}}<tr><th>Config files</th><td>{{range .ConfigFiles}}<code>{{.}}</code><br>{{end}}</td></tr>{{end}}

internal/master/web/versions_test.go

@@ -214,8 +214,58 @@ func TestOverview_ShowsFollowsNoTagAndPollFailedBadges(t *testing.T) {
 
 	for _, path := range []string{"/", "/fragments/services"} {
 		_, body := get(t, srv, path)
-		assert.Equal(t, 1, strings.Count(body, "follows no tag"), "only the digest-only Swarm service: "+path)
-		assert.Contains(t, body, `class="badge badge-error" title="head x: &#34;boom&#34; &lt;script&gt;">poll failed</span>`, path)
-		assert.Equal(t, 1, strings.Count(body, "poll failed"), path)
+		assert.Equal(t, 1, strings.Count(body, "Follows no tag"), "only the digest-only Swarm service: "+path)
+		assert.Contains(t, body, `class="tag f-err" title="head x: &#34;boom&#34; &lt;script&gt;">Poll failed</span>`, path)
+		assert.Equal(t, 1, strings.Count(body, "Poll failed"), path)
 	}
 }
+
+func TestServicePage_VersionPickerAppendsNewerTagBeyondLimit(t *testing.T) {
+	srv, store, _, _, _ := newTestEnv(t)
+	store.services[0].ImageRepo = sluskRepo
+	store.services[0].NewerRef = sluskRepo + ":1.5.0"
+	for i := int64(1); i <= 12; i++ {
+		store.versions = append(store.versions, model.ImageVersion{ID: i, Repo: sluskRepo, Tag: "t", Digest: "sha256:d", Source: "poll"})
+	}
+	store.versions = append(store.versions, model.ImageVersion{ID: 99, Repo: sluskRepo, Tag: "1.5.0", Source: "tags"})
+
+	_, body := get(t, srv, "/services/1")
+
+	assert.Equal(t, 11, strings.Count(body, `name="version"`), "the ten recent versions and the newer tag")
+	assert.Contains(t, body, `<input type="hidden" name="version" value="99">`)
+	assert.Contains(t, body, "<th>Newer tag</th>")
+}
+
+func TestServicePage_NewerTagAlreadyListedIsNotAppendedTwice(t *testing.T) {
+	srv, store, _, _, _ := newTestEnv(t)
+	store.services[0].ImageRepo = sluskRepo
+	store.services[0].NewerRef = sluskRepo + ":1.5.0"
+	store.versions = []model.ImageVersion{{ID: 31, Repo: sluskRepo, Tag: "1.5.0", Source: "tags"}}
+
+	_, body := get(t, srv, "/services/1")
+
+	assert.Equal(t, 1, strings.Count(body, `name="version"`))
+}
+
+func TestServicePage_PinnedRowOfTheNewerTagDoesNotHideThePlainRow(t *testing.T) {
+	srv, store, _, _, _ := newTestEnv(t)
+	store.services[0].ImageRepo = sluskRepo
+	store.services[0].NewerRef = sluskRepo + ":1.5.0"
+	store.versions = []model.ImageVersion{
+		{ID: 31, Repo: sluskRepo, Tag: "1.5.0", Digest: "sha256:d", Source: "poll"},
+		{ID: 32, Repo: sluskRepo, Tag: "1.5.0", Source: "tags"},
+	}
+
+	_, body := get(t, srv, "/services/1")
+
+	assert.Equal(t, 2, strings.Count(body, `name="version"`))
+	assert.Contains(t, body, `<input type="hidden" name="version" value="32">`)
+}
+
+func TestServicePage_NoNewerTagRowWithoutSuggestion(t *testing.T) {
+	srv, _, _, _, _ := newTestEnv(t)
+
+	_, body := get(t, srv, "/services/1")
+
+	assert.NotContains(t, body, "Newer tag")
+}

internal/master/web/views.go

@@ -1,58 +1,242 @@
 package web
 
 import (
+	"cmp"
+	"slices"
+	"strconv"
 	"strings"
 	"time"
+	"unicode/utf8"
 
 	"github.com/shcizo/package-updater/internal/imageref"
 	"github.com/shcizo/package-updater/internal/master/jobs"
 	"github.com/shcizo/package-updater/internal/master/model"
 	"github.com/shcizo/package-updater/internal/master/poller"
+	"github.com/shcizo/package-updater/internal/master/tagver"
+	"github.com/shcizo/package-updater/internal/master/web/icons"
 	"github.com/shcizo/package-updater/internal/protocol"
 )
 
+// serviceGroup is one block of the overview: a machine, a Swarm cluster or
+// the services whose agent is unknown.
 type serviceGroup struct {
-	Title    string
-	Services []serviceRow
+	Key       string // "agent-<id>", "swarm-<cluster id>" or "unknown"; the machine filter matches on it
+	Title     string
+	TitleHint string // hover text of the title; the full cluster id
+	Kind      string // "Machine" or "Swarm cluster"
+	Meta      string // hostname, or the cluster's managers
+	Cluster   bool
+	Sub       bool // a machine that belongs to the cluster shown above it
+	// Offline says the agent (or, for a cluster, every manager) is not
+	// connected, so the rows show the last known state.
+	Offline      bool
+	OfflineLabel string     // what the banner says before "since"
+	OfflineSince *time.Time // when the agent was last seen; nil if unknown
+	Services     []serviceRow
 }
 
-// serviceRow is a service as shown in the overview table.
+// serviceRow is a service as shown in the overview.
 type serviceRow struct {
 	model.Service
 	AutoBlocked string // why the service cannot be set to auto; "" when it can
+
+	Name         string // the service's own name, without its stack
+	Stack        string // the Compose project; "" for Swarm and plain containers
+	Repo         string // image repository without the registry host
+	Tag          string // ":tag", or ""
+	Digest       string // "@sha256:<12 hex>…" when the image has no tag, else ""
+	AvailableTag string // the tag of AvailableRef, or ""
+	NewerTag     string // the tag of NewerRef while it is still newer than the followed tag, or ""
+	Icon         string // Simple Icons slug; "" when there is no icon
+	Letter       string // shown instead of an icon
+	LetterClass  string // lc-0 .. lc-3
+	StatusLabel  string
+	StatusClass  string
+	Search       string // what the search box matches against, lowercased
 }
 
-// groupServices groups machine-bound services per agent and Swarm services
-// in one group, keeping the store's order (machines first, Swarm last).
-// autoBlocked is called for every service and returns the reason it cannot be
-// set to auto, or "" when it can.
-func groupServices(services []model.Service, autoBlocked func(model.Service) string) []serviceGroup {
-	var groups []serviceGroup
-	index := map[string]int{}
+// newServiceRow fills the display fields of a row.
+func newServiceRow(s model.Service, autoBlocked string) serviceRow {
+	r := serviceRow{Service: s, AutoBlocked: autoBlocked}
+	switch s.Kind {
+	case protocol.KindCompose:
+		r.Name, r.Stack = s.ComposeService, s.ComposeProject
+	case protocol.KindSwarm:
+		r.Name = s.SwarmService
+	default:
+		r.Name = s.ContainerName
+	}
+	r.Repo, r.Tag, r.Digest = imageParts(s.ActualRef)
+	r.AvailableTag = imageref.Parse(s.AvailableRef).Tag
+	r.NewerTag = newerTag(s)
+	r.Icon = icons.ForImage(s.ActualRef)
+	r.Letter = "?"
+	if first, _ := utf8.DecodeRuneInString(r.Name); first != utf8.RuneError {
+		r.Letter = strings.ToUpper(string(first))
+	}
+	r.LetterClass = letterClass(r.Name)
+	switch s.Status {
+	case "running":
+		r.StatusLabel, r.StatusClass = "Running", "s-running"
+	case "degraded":
+		r.StatusLabel, r.StatusClass = "Degraded", "s-degraded"
+	case "stopped":
+		r.StatusLabel, r.StatusClass = "Stopped", "s-stopped"
+	default:
+		r.StatusLabel, r.StatusClass = "Unknown", "s-unknown"
+	}
+	r.Search = strings.ToLower(strings.Join([]string{r.Name, r.Stack, r.Repo, strings.TrimPrefix(r.Tag, ":"), s.AgentName}, " "))
+	return r
+}
+
+// imageParts splits an image reference for display: the repository without
+// its registry host, ":tag", and a shortened digest that is only given when
+// there is no tag.
+func imageParts(ref string) (repo, tag, digest string) {
+	r := imageref.Parse(ref)
+	repo = r.Repo
+	if host, rest, ok := strings.Cut(repo, "/"); ok && (imageref.IsRegistryHost(host)) {
+		repo = rest
+	}
+	if r.Tag != "" {
+		return repo, ":" + r.Tag, ""
+	}
+	if r.Digest != "" {
+		return repo, "", "@" + shortDigest(r.Digest)
+	}
+	return repo, "", ""
+}
+
+// shortDigest shortens "sha256:<hex>" to 12 hex characters and an ellipsis.
+func shortDigest(d string) string {
+	if hex, ok := strings.CutPrefix(d, "sha256:"); ok && len(hex) > 12 {
+		return "sha256:" + hex[:12] + "…"
+	}
+	return d
+}
+
+// letterClass picks one of four colours from the name, so a service keeps
+// its colour.
+func letterClass(name string) string {
+	sum := 0
+	for i := 0; i < len(name); i++ {
+		sum += int(name[i])
+	}
+	return "lc-" + strconv.Itoa(sum%4)
+}
+
+// groupServices groups the services into one block per Swarm cluster and per
+// machine. A cluster comes first, followed by the machines that belong to it;
+// the remaining machines follow by name and the services whose agent is
+// unknown come last. Agents without services get no block. online says
+// whether an agent is connected; autoBlocked returns the reason a service
+// cannot be set to auto, or "".
+func groupServices(services []model.Service, agents []model.Agent, online func(int64) bool, autoBlocked func(model.Service) string) []serviceGroup {
+	agentByID := map[int64]model.Agent{}
+	for _, a := range agents {
+		agentByID[a.ID] = a
+	}
+	var clusterIDs []string
+	clusterRows := map[string][]serviceRow{}
+	clusterRowAgents := map[string]map[int64]bool{} // agents named by a cluster's rows
+	machineRows := map[int64][]serviceRow{}
+	var unknownRows []serviceRow
 	for _, s := range services {
-		title := s.AgentName
-		if s.Kind == protocol.KindSwarm {
-			title = "Swarm"
-		} else if title == "" {
-			title = "Unknown agent"
+		row := newServiceRow(s, autoBlocked(s))
+		_, known := agentByID[derefID(s.AgentID)]
+		switch {
+		case s.Kind == protocol.KindSwarm:
+			if _, seen := clusterRows[s.SwarmClusterID]; !seen {
+				clusterIDs = append(clusterIDs, s.SwarmClusterID)
+				clusterRowAgents[s.SwarmClusterID] = map[int64]bool{}
+			}
+			clusterRows[s.SwarmClusterID] = append(clusterRows[s.SwarmClusterID], row)
+			if s.AgentID != nil {
+				clusterRowAgents[s.SwarmClusterID][*s.AgentID] = true
+			}
+		case s.AgentID != nil && known:
+			machineRows[*s.AgentID] = append(machineRows[*s.AgentID], row)
+		default:
+			unknownRows = append(unknownRows, row)
 		}
-		i, ok := index[title]
-		if !ok {
-			i = len(groups)
-			index[title] = i
-			groups = append(groups, serviceGroup{Title: title})
+	}
+
+	machineIDs := make([]int64, 0, len(machineRows))
+	for id := range machineRows {
+		machineIDs = append(machineIDs, id)
+	}
+	slices.SortFunc(machineIDs, func(a, b int64) int {
+		return cmp.Or(cmp.Compare(agentByID[a].Name, agentByID[b].Name), cmp.Compare(a, b))
+	})
+	machine := func(id int64, sub bool) serviceGroup {
+		a := agentByID[id]
+		return serviceGroup{
+			Key: "agent-" + strconv.FormatInt(id, 10), Title: a.Name, Kind: "Machine", Meta: a.Hostname, Sub: sub,
+			Offline: !online(id), OfflineLabel: "Agent offline", OfflineSince: a.LastSeenAt, Services: machineRows[id],
 		}
-		groups[i].Services = append(groups[i].Services, serviceRow{Service: s, AutoBlocked: autoBlocked(s)})
+	}
+
+	var groups []serviceGroup
+	placed := map[int64]bool{}
+	for _, cid := range clusterIDs {
+		title := "Swarm"
+		if len(clusterIDs) > 1 {
+			title += " " + cid[:min(len(cid), 8)]
+		}
+		g := serviceGroup{
+			Key: "swarm-" + cid, Title: title, TitleHint: cid, Kind: "Swarm cluster", Cluster: true,
+			Offline: true, OfflineLabel: "No manager online", Services: clusterRows[cid],
+		}
+		var names []string
+		for _, a := range agents {
+			isManager := a.SwarmManager && a.SwarmClusterID == cid
+			if a.RevokedAt != nil || !(isManager || clusterRowAgents[cid][a.ID]) {
+				continue
+			}
+			names = append(names, a.Name)
+			if online(a.ID) {
+				g.Offline = false
+			}
+			if a.LastSeenAt != nil && (g.OfflineSince == nil || a.LastSeenAt.After(*g.OfflineSince)) {
+				g.OfflineSince = a.LastSeenAt
+			}
+		}
+		slices.Sort(names)
+		if len(names) > 0 {
+			g.Meta = "managers " + strings.Join(names, ", ")
+		}
+		groups = append(groups, g)
+		for _, id := range machineIDs {
+			if cid != "" && agentByID[id].SwarmClusterID == cid && !placed[id] {
+				placed[id] = true
+				groups = append(groups, machine(id, true))
+			}
+		}
+	}
+	for _, id := range machineIDs {
+		if !placed[id] {
+			groups = append(groups, machine(id, false))
+		}
+	}
+	if len(unknownRows) > 0 {
+		groups = append(groups, serviceGroup{
+			Key: "unknown", Title: "Unknown agent", Kind: "Machine", Offline: true, OfflineLabel: "Agent offline", Services: unknownRows,
+		})
 	}
 	return groups
 }
 
+func derefID(id *int64) int64 {
+	if id == nil {
+		return 0
+	}
+	return *id
+}
+
 // shortRef shortens a digest in an image reference to 12 hex characters.
 func shortRef(ref string) string {
 	r := imageref.Parse(ref)
-	if hex, ok := strings.CutPrefix(r.Digest, "sha256:"); ok && len(hex) > 12 {
-		r.Digest = "sha256:" + hex[:12] + "…"
-	}
+	r.Digest = shortDigest(r.Digest)
 	return r.String()
 }
 
@@ -62,6 +246,26 @@ func followsNoTag(svc model.Service) bool {
 	return jobs.FollowedRef(svc.ActualRef) == ""
 }
 
+// newerTag returns the tag of the service's newer-tag suggestion, or "" when
+// there is none or it no longer holds. The poller writes the suggestion once
+// per cycle, so after the service moved to another tag the stored value can
+// be stale until the next cycle; checking again here hides it meanwhile. A
+// suggestion from another repo than the service follows now is hidden too.
+func newerTag(s model.Service) string {
+	if s.RemovedAt != nil || s.NewerRef == "" {
+		return ""
+	}
+	newer := imageref.Parse(s.NewerRef)
+	repo, followed := poller.Followed(s)
+	if newer.Repo != repo {
+		return ""
+	}
+	if _, ok := tagver.Newer(followed, []string{newer.Tag}); !ok {
+		return ""
+	}
+	return newer.Tag
+}
+
 // versionRow is an image version as shown on the service page.
 type versionRow struct {
 	model.ImageVersion
@@ -101,9 +305,48 @@ func shortDuration(d time.Duration) string {
 	return s
 }
 
+// agentRow is an agent as shown on the agents page.
 type agentRow struct {
 	model.Agent
-	Online bool
+	Online      bool
+	Status      string // Online, Offline, Never connected or Revoked
+	StatusClass string
+	Role        string // Manager, Worker or "—"
+	VersionOld  bool   // the agent runs another version than the master
+}
+
+// newAgentRow fills the display fields of a row. masterVersion is the
+// master's build version; "dev" and "" never mark an agent as old.
+func newAgentRow(a model.Agent, online bool, masterVersion string) agentRow {
+	r := agentRow{Agent: a, Online: online}
+	switch {
+	case a.RevokedAt != nil:
+		r.Status, r.StatusClass = "Revoked", "a-revoked"
+	case online:
+		r.Status, r.StatusClass = "Online", "a-on"
+	case a.LastSeenAt == nil:
+		r.Status, r.StatusClass = "Never connected", "a-never"
+	default:
+		r.Status, r.StatusClass = "Offline", "a-off"
+	}
+	switch {
+	case a.SwarmManager:
+		r.Role = "Manager"
+	case a.SwarmClusterID != "":
+		r.Role = "Worker"
+	default:
+		r.Role = "—"
+	}
+	r.VersionOld = a.AgentVersion != "" && masterVersion != "" && masterVersion != "dev" && a.AgentVersion != masterVersion
+	return r
+}
+
+// middle shortens a long secret for display: its first 8 and last 4 characters.
+func middle(s string) string {
+	if len(s) <= 14 {
+		return s
+	}
+	return s[:8] + "…" + s[len(s)-4:]
 }
 
 // jobDuration is how long a job ran, or has been running; "" before it starts.

internal/master/web/views_test.go

@@ -0,0 +1,235 @@
+package web
+
+import (
+	"testing"
+	"time"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+
+	"github.com/shcizo/package-updater/internal/master/model"
+	"github.com/shcizo/package-updater/internal/protocol"
+)
+
+func TestImageParts(t *testing.T) {
+	cases := []struct {
+		ref, repo, tag, digest string
+	}{
+		{"postgres:17.10", "postgres", ":17.10", ""},
+		{"postgres", "postgres", "", ""},
+		{"gitea/gitea:1.27.3", "gitea/gitea", ":1.27.3", ""},
+		{"gitea.shcizo.se/shcizo/slusk:v0.8.1", "shcizo/slusk", ":v0.8.1", ""},
+		{"localhost:5000/foo:v1", "foo", ":v1", ""},
+		{"localhost/foo", "foo", "", ""},
+		{"lscr.io/linuxserver/jellyfin@sha256:0f42497a69fa0441bfd5f9d6bba8694f2a656ec984e571d0ac04c6dd91250039", "linuxserver/jellyfin", "", "@sha256:0f42497a69fa…"},
+		{"r/x:1.0@sha256:0f42497a69fa0441", "r/x", ":1.0", ""}, // the digest is hidden when there is a tag
+		{"r/x@sha256:abc", "r/x", "", "@sha256:abc"},
+	}
+	for _, c := range cases {
+		t.Run(c.ref, func(t *testing.T) {
+			repo, tag, digest := imageParts(c.ref)
+			assert.Equal(t, c.repo, repo)
+			assert.Equal(t, c.tag, tag)
+			assert.Equal(t, c.digest, digest)
+		})
+	}
+}
+
+func TestLetterClass(t *testing.T) {
+	assert.Equal(t, "lc-0", letterClass(""))
+	assert.Equal(t, "lc-1", letterClass("a"), "97 mod 4")
+	assert.Equal(t, letterClass("gitea"), letterClass("gitea"), "a name always gets the same colour")
+	for _, name := range []string{"gitea", "authentik-server", "ø", "n8n"} {
+		assert.Regexp(t, `^lc-[0-3]$`, letterClass(name))
+	}
+}
+
+func TestNewAgentRow(t *testing.T) {
+	seen := ptr(time.Now())
+	cases := []struct {
+		name          string
+		agent         model.Agent
+		online        bool
+		masterVersion string
+		status, role  string
+		old           bool
+	}{
+		{"online manager", model.Agent{SwarmManager: true, AgentVersion: "v1"}, true, "v1", "Online", "Manager", false},
+		{"offline worker on another version", model.Agent{SwarmClusterID: "c", AgentVersion: "v0", LastSeenAt: seen}, false, "v1", "Offline", "Worker", true},
+		{"never connected", model.Agent{}, false, "v1", "Never connected", "—", false},
+		{"revoked wins over online", model.Agent{RevokedAt: seen, LastSeenAt: seen}, true, "v1", "Revoked", "—", false},
+		{"dev master marks nothing", model.Agent{AgentVersion: "v0"}, true, "dev", "Online", "—", false},
+		{"agent without version", model.Agent{}, true, "v1", "Online", "—", false},
+	}
+	for _, c := range cases {
+		t.Run(c.name, func(t *testing.T) {
+			row := newAgentRow(c.agent, c.online, c.masterVersion)
+			assert.Equal(t, c.status, row.Status)
+			assert.Equal(t, c.role, row.Role)
+			assert.Equal(t, c.old, row.VersionOld)
+		})
+	}
+}
+
+func TestMiddle(t *testing.T) {
+	assert.Equal(t, "short", middle("short"))
+	assert.Equal(t, "pua_7Hq2…Ge5A", middle("pua_7Hq2mX9vKc4LwT8nRb3ZyF6dJp1sGe5A"))
+}
+
+func TestGroupServices(t *testing.T) {
+	at := func(h, m int) *time.Time { return ptr(time.Date(2026, 10, 12, h, m, 0, 0, time.UTC)) }
+	id := func(n int64) *int64 { return &n }
+	compose := func(sid int64, agent *int64, name string) model.Service {
+		return model.Service{ID: sid, Kind: protocol.KindCompose, AgentID: agent, ComposeProject: "p", ComposeService: name, ActualRef: "r/" + name + ":1"}
+	}
+	swarm := func(sid int64, cluster string, agent *int64) model.Service {
+		return model.Service{ID: sid, Kind: protocol.KindSwarm, SwarmClusterID: cluster, AgentID: agent, SwarmService: "s" + cluster}
+	}
+	noBlock := func(model.Service) string { return "" }
+	onlineSet := func(ids ...int64) func(int64) bool {
+		return func(a int64) bool {
+			for _, i := range ids {
+				if i == a {
+					return true
+				}
+			}
+			return false
+		}
+	}
+	titles := func(groups []serviceGroup) []string {
+		var out []string
+		for _, g := range groups {
+			out = append(out, g.Title)
+		}
+		return out
+	}
+
+	t.Run("empty", func(t *testing.T) {
+		assert.Empty(t, groupServices(nil, []model.Agent{{ID: 1, Name: "a"}}, onlineSet(), noBlock))
+	})
+
+	t.Run("agents without services get no group", func(t *testing.T) {
+		groups := groupServices([]model.Service{compose(1, id(1), "web")},
+			[]model.Agent{{ID: 1, Name: "a"}, {ID: 2, Name: "idle"}}, onlineSet(1, 2), noBlock)
+		assert.Equal(t, []string{"a"}, titles(groups))
+		assert.Equal(t, "agent-1", groups[0].Key)
+		assert.Equal(t, "Machine", groups[0].Kind)
+		assert.False(t, groups[0].Offline)
+	})
+
+	t.Run("services without a known agent are offline and last", func(t *testing.T) {
+		groups := groupServices(
+			[]model.Service{compose(1, nil, "orphan"), compose(2, id(7), "ghost"), compose(3, id(1), "web")},
+			[]model.Agent{{ID: 1, Name: "a"}}, onlineSet(1), noBlock)
+		assert.Equal(t, []string{"a", "Unknown agent"}, titles(groups))
+		unknown := groups[1]
+		assert.Equal(t, "unknown", unknown.Key)
+		assert.True(t, unknown.Offline)
+		assert.Nil(t, unknown.OfflineSince)
+		assert.Len(t, unknown.Services, 2)
+	})
+
+	t.Run("an offline agent says since when", func(t *testing.T) {
+		groups := groupServices([]model.Service{compose(1, id(1), "web")},
+			[]model.Agent{{ID: 1, Name: "a", Hostname: "a.lan", LastSeenAt: at(13, 51)}}, onlineSet(), noBlock)
+		require.Len(t, groups, 1)
+		assert.True(t, groups[0].Offline)
+		assert.Equal(t, "Agent offline", groups[0].OfflineLabel)
+		assert.Equal(t, at(13, 51), groups[0].OfflineSince)
+		assert.Equal(t, "a.lan", groups[0].Meta)
+	})
+
+	t.Run("a cluster is online when any manager is", func(t *testing.T) {
+		agents := []model.Agent{
+			{ID: 1, Name: "m1", SwarmManager: true, SwarmClusterID: "c1", LastSeenAt: at(10, 0)},
+			{ID: 2, Name: "m2", SwarmManager: true, SwarmClusterID: "c1", LastSeenAt: at(11, 0)},
+		}
+		groups := groupServices([]model.Service{swarm(1, "c1", nil)}, agents, onlineSet(2), noBlock)
+		require.Len(t, groups, 1)
+		assert.False(t, groups[0].Offline)
+		assert.Equal(t, "Swarm", groups[0].Title)
+		assert.Equal(t, "c1", groups[0].TitleHint)
+		assert.Equal(t, "Swarm cluster", groups[0].Kind)
+		assert.Equal(t, "managers m1, m2", groups[0].Meta)
+		assert.Equal(t, "swarm-c1", groups[0].Key)
+	})
+
+	t.Run("a cluster with no manager online has been offline since the latest manager was seen", func(t *testing.T) {
+		agents := []model.Agent{
+			{ID: 1, Name: "m1", SwarmManager: true, SwarmClusterID: "c1", LastSeenAt: at(10, 0)},
+			{ID: 2, Name: "m2", SwarmManager: true, SwarmClusterID: "c1", LastSeenAt: at(11, 0)},
+		}
+		groups := groupServices([]model.Service{swarm(1, "c1", nil)}, agents, onlineSet(), noBlock)
+		assert.True(t, groups[0].Offline)
+		assert.Equal(t, "No manager online", groups[0].OfflineLabel)
+		assert.Equal(t, at(11, 0), groups[0].OfflineSince)
+	})
+
+	t.Run("a revoked manager does not count", func(t *testing.T) {
+		agents := []model.Agent{
+			{ID: 1, Name: "gone", SwarmManager: true, SwarmClusterID: "c1", LastSeenAt: at(12, 0), RevokedAt: at(12, 5)},
+			{ID: 2, Name: "m2", SwarmManager: true, SwarmClusterID: "c1", LastSeenAt: at(9, 0)},
+		}
+		groups := groupServices([]model.Service{swarm(1, "c1", nil)}, agents, onlineSet(1), noBlock)
+		assert.True(t, groups[0].Offline, "the revoked manager is not connected for this purpose")
+		assert.Equal(t, "managers m2", groups[0].Meta)
+		assert.Equal(t, at(9, 0), groups[0].OfflineSince)
+	})
+
+	t.Run("managers are found through the rows when no agent reports the cluster", func(t *testing.T) {
+		agents := []model.Agent{{ID: 4, Name: "reporter", LastSeenAt: at(8, 0)}}
+		groups := groupServices([]model.Service{swarm(1, "c1", id(4))}, agents, onlineSet(4), noBlock)
+		assert.False(t, groups[0].Offline)
+		assert.Equal(t, "managers reporter", groups[0].Meta)
+	})
+
+	t.Run("order is cluster, its machines, other machines by name, unknown", func(t *testing.T) {
+		agents := []model.Agent{
+			{ID: 1, Name: "zeta"},
+			{ID: 2, Name: "mgr", SwarmManager: true, SwarmClusterID: "c1"},
+			{ID: 3, Name: "alpha"},
+			{ID: 4, Name: "mgr2", SwarmManager: true, SwarmClusterID: "c1"},
+		}
+		services := []model.Service{
+			compose(1, id(1), "a"), compose(2, id(2), "b"), compose(3, id(3), "c"),
+			compose(4, id(4), "d"), compose(5, nil, "e"), swarm(6, "c1", nil),
+		}
+		groups := groupServices(services, agents, onlineSet(1, 2, 3, 4), noBlock)
+		assert.Equal(t, []string{"Swarm", "mgr", "mgr2", "alpha", "zeta", "Unknown agent"}, titles(groups))
+		assert.Equal(t, []bool{false, true, true, false, false, false}, []bool{groups[0].Sub, groups[1].Sub, groups[2].Sub, groups[3].Sub, groups[4].Sub, groups[5].Sub})
+	})
+
+	t.Run("two clusters carry their ids in the titles", func(t *testing.T) {
+		groups := groupServices([]model.Service{swarm(1, "abcdefghijkl", nil), swarm(2, "xyz", nil)}, nil, onlineSet(), noBlock)
+		assert.Equal(t, []string{"Swarm abcdefgh", "Swarm xyz"}, titles(groups))
+		assert.Equal(t, "abcdefghijkl", groups[0].TitleHint)
+	})
+
+	t.Run("the auto-blocked reason is kept on the row", func(t *testing.T) {
+		groups := groupServices([]model.Service{compose(1, id(1), "web")}, []model.Agent{{ID: 1, Name: "a"}}, onlineSet(1),
+			func(model.Service) string { return "because" })
+		assert.Equal(t, "because", groups[0].Services[0].AutoBlocked)
+	})
+}
+
+func TestNewerTag(t *testing.T) {
+	removed := time.Now()
+	tests := []struct {
+		name string
+		svc  model.Service
+		want string
+	}{
+		{"newer", model.Service{ActualRef: "gitea/gitea:1.27.3", NewerRef: "gitea/gitea:1.28.0"}, "1.28.0"},
+		{"bare image follows latest", model.Service{ActualRef: "gitea/gitea", NewerRef: "gitea/gitea:1.28.0"}, ""},
+		{"stale after the tag changed", model.Service{ActualRef: "gitea/gitea:1.28.0", NewerRef: "gitea/gitea:1.28.0"}, ""},
+		{"stale after the tag moved past it", model.Service{ActualRef: "gitea/gitea:1.29.0", NewerRef: "gitea/gitea:1.28.0"}, ""},
+		{"other repo", model.Service{ActualRef: "redis:7.2.4", NewerRef: "bitnami/redis:7.2.5"}, ""},
+		{"removed", model.Service{ActualRef: "gitea/gitea:1.27.3", NewerRef: "gitea/gitea:1.28.0", RemovedAt: &removed}, ""},
+		{"empty", model.Service{ActualRef: "gitea/gitea:1.27.3"}, ""},
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			assert.Equal(t, tt.want, newerTag(tt.svc))
+		})
+	}
+}