From 25e9d79aba4b13fa1567fa95e68bd3f28a9d6c7a Mon Sep 17 00:00:00 2001
From: Pim van Pelt <pim@ipng.ch>
Date: Sun, 12 Apr 2026 20:04:45 +0200
Subject: [PATCH] Frontend: live clocks, admin mode, backend actions; packaging
 polish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Builds on the maglev-frontend component introduced in 284b4cc with
quality-of-life improvements, an authenticated /admin surface, a
live-action control plane, and Debian packaging cleanup.

 - Backend state now renders live: maglevd's FrontendEvent synthetic
   from==to replay hydrates FrontendSnapshot.State on WatchEvents
   subscribe, and live transitions update both the in-process cache
   and every connected browser via a new applyFrontendTransition
   reducer. Shown as a StatusBadge next to the frontend name.
 - VPP connection state surfaces in the VPP zippy title as a
   green/red badge. Driven by vpp-connect / vpp-disconnect and by
   the steady stream of vpp-api-send/recv debug heartbeats so a
   silent VPP drop is caught within one debug-log tick.
 - Probe heartbeat dot becomes ❤️ while a probe is in flight and
   reverts to · on probe-done. Fixed-size wrapper so the emoji swap
   doesn't jiggle the row; both states share the same font-size.
 - Flash component replaced its subtle background-only fade with a
   scale-pop + yellow halo box-shadow + longer duration so
   weight/effective/state changes are unmissable on tiny numeric
   cells. Initial mount still skipped via defer so no flash on load.
 - Last-transition age is now a live countdown driven by a global
   1-second ticker signal (one timer, many subscribers). Two most
   significant units: 10m30s / 1h12m / 1d16h. Sub-second ages
   render as "now" to absorb clock skew between maglevd and the
   browser.
 - Event stream is now chronological (oldest at top) with tail-
   style auto-scroll, pause/resume, and the toolbar moved below the
   list. Row separators removed. Also shown only in /admin (see
   below) so /view stays a focused read-only surface.
 - Table nowrap so backend names like nginx0-frggh0 and the
   "last transition" header don't wrap. Frontends render in the
   order returned by ListFrontends instead of Go map iteration
   order so reload doesn't shuffle VIP order.
 - IPng logo in the header, clickable, links to the git repo.
   Header padding reduced so the logo can fill the bar up to the
   separator. Version + commit + build date shown in the brand area
   (fetched once from /view/api/version).
 - "view" / "admin" mode tag moved to sit just left of the admin
   toggle button so it reads as a pair.
 - Prettier wired in as the web-side fixstyle via a new
   fixstyle-web Make target that also runs from `make fixstyle`.
   Added .prettierrc.json and .prettierignore; 8 existing files
   were normalized in place.

 - Fixed a "20555d ago" rendering bug: maglevd's synthetic
   backend-replay events (from==to, at_unix_ns=0) were corrupting
   the local cache's LastTransition via applyBackendTransition.
   Backend synthetic events are now skipped entirely (refreshAll
   covers initial hydration for backends), while frontend synthetic
   events are still applied because FrontendInfo doesn't carry
   state — the event is the only source.

 - New MAGLEV_FRONTEND_USER / MAGLEV_FRONTEND_PASSWORD env vars.
   When both are set and non-empty, /admin/ becomes a basic-auth-
   protected SPA shell backed by the same embedded index.html as
   /view/. The SPA detects its base path via a new stores/mode.ts
   isAdmin constant and conditionally renders admin-only sections
   (currently: the Event Stream / DebugPanel). When disabled,
   /admin/ returns 404 (not 501) so operators who didn't configure
   it see no teasing affordance, and the SPA's admin-toggle button
   is hidden entirely via the admin_enabled flag on
   /view/api/version.
 - basicAuth uses crypto/subtle.ConstantTimeCompare for both user
   and password so timing can't distinguish a wrong username from
   a wrong password.

 - New POST /admin/api/{maglevd}/backend/{name}/{pause|resume|
   enable|disable} endpoint, gated by the same basic-auth
   middleware as the SPA shell. maglevClient.BackendAction wraps
   the four matching gRPC RPCs and returns a fresh BackendSnapshot;
   the same transition lands via WatchEvents so every connected
   browser converges through the normal reducer path.
 - BackendActionsMenu Solid component: kebab (⋮) button in a new
   trailing column rendered only in /admin. Click-outside and
   Escape close the popover (document listeners installed only
   while open). Actions are state-aware: up/down/unknown → pause,
   disable; paused → resume, disable; disabled → enable;
   removed → menu suppressed entirely. Busy indicator per action;
   errors render inline under the item list.
 - Structured audit log: every mutation logs an
   admin-backend-action record with maglevd / backend / action /
   resulting state.

 - Renamed debian/vpp-maglevd.service → debian/vpp-maglev.service
   to align naming with the new vpp-maglev-frontend.service
   sibling. postinst handles upgrades by stopping + disabling any
   lingering vpp-maglevd.service before enabling the renamed unit;
   prerm stops both (the frontend unit is installed but not
   enabled by default — operators opt in with systemctl enable).
 - New debian/vpp-maglev-frontend.service (hardened:
   NoNewPrivileges, ProtectSystem=strict, ProtectHome, PrivateTmp,
   no capabilities). Reads the same /etc/default/vpp-maglev
   conffile and expands MAGLEV_FRONTEND_ARGS via
   `ExecStart=/usr/bin/maglev-frontend $MAGLEV_FRONTEND_ARGS` so
   word-splitting works.
 - docs/maglev-frontend.8 manpage documenting flags, endpoints,
   and SSE reverse-proxy requirements.
 - build-deb.sh: drops the commit hash from the .deb filename
   (now vpp-maglev_<version>_<arch>.deb) and no longer takes the
   commit as a CLI arg. Binaries continue to carry the commit via
   -ldflags so `maglevd --version` et al are the authoritative
   "which build is running" answer.
---
 Makefile                                      |   4 +-
 README.md                                     |   6 +-
 cmd/frontend/client.go                        |  98 ++++++++++
 cmd/frontend/handlers.go                      | 125 +++++++++++-
 cmd/frontend/main.go                          |  14 +-
 cmd/frontend/types.go                         |  26 ++-
 .../web/dist/assets/index-9NmAul22.css        |   1 -
 .../web/dist/assets/index-AsNHMKdQ.js         |   1 +
 .../web/dist/assets/index-CrBeXDdb.css        |   1 +
 .../web/dist/assets/index-DZzDfClm.js         |   1 -
 .../web/dist/assets/logo-bimi-Bguc6E_L.svg    |   1 +
 cmd/frontend/web/dist/index.html              |   4 +-
 cmd/frontend/web/src/App.tsx                  |  51 +++--
 cmd/frontend/web/src/api/admin.ts             |  24 +++
 cmd/frontend/web/src/api/sse.ts               |   5 +
 cmd/frontend/web/src/assets/logo-bimi.svg     |   1 +
 .../web/src/components/BackendActionsMenu.tsx | 126 +++++++++++++
 cmd/frontend/web/src/components/Flash.tsx     |  61 ++++--
 cmd/frontend/web/src/components/Zippy.tsx     |   2 +-
 cmd/frontend/web/src/env.d.ts                 |   6 +
 cmd/frontend/web/src/stores/mode.ts           |   5 +
 cmd/frontend/web/src/stores/state.ts          |  59 ++++--
 cmd/frontend/web/src/stores/tick.ts           |  18 ++
 cmd/frontend/web/src/styles/theme.css         | 118 +++++++++++-
 cmd/frontend/web/src/types.ts                 |   9 +-
 cmd/frontend/web/src/views/BackendRow.tsx     |   9 +-
 cmd/frontend/web/src/views/FrontendCard.tsx   |  15 +-
 cmd/frontend/web/src/views/Overview.tsx       |   2 +-
 cmd/frontend/web/src/views/VPPInfoPanel.tsx   |  59 ++++--
 debian/build-deb.sh                           |  34 ++--
 debian/control.in                             |   7 +-
 debian/default.vpp-maglev                     |  22 ++-
 debian/postinst                               |  15 +-
 debian/prerm                                  |   6 +-
 debian/vpp-maglev-frontend.service            |  23 +++
 ...vpp-maglevd.service => vpp-maglev.service} |   0
 docs/maglev-frontend.8                        | 178 ++++++++++++++++++
 37 files changed, 1030 insertions(+), 107 deletions(-)
 delete mode 100644 cmd/frontend/web/dist/assets/index-9NmAul22.css
 create mode 100644 cmd/frontend/web/dist/assets/index-AsNHMKdQ.js
 create mode 100644 cmd/frontend/web/dist/assets/index-CrBeXDdb.css
 delete mode 100644 cmd/frontend/web/dist/assets/index-DZzDfClm.js
 create mode 100644 cmd/frontend/web/dist/assets/logo-bimi-Bguc6E_L.svg
 create mode 100644 cmd/frontend/web/src/api/admin.ts
 create mode 100644 cmd/frontend/web/src/assets/logo-bimi.svg
 create mode 100644 cmd/frontend/web/src/components/BackendActionsMenu.tsx
 create mode 100644 cmd/frontend/web/src/env.d.ts
 create mode 100644 cmd/frontend/web/src/stores/mode.ts
 create mode 100644 cmd/frontend/web/src/stores/tick.ts
 create mode 100644 debian/vpp-maglev-frontend.service
 rename debian/{vpp-maglevd.service => vpp-maglev.service} (100%)
 create mode 100644 docs/maglev-frontend.8

diff --git a/Makefile b/Makefile
index f52bc32..7702358 100644
--- a/Makefile
+++ b/Makefile
@@ -57,8 +57,8 @@ $(FRONTEND_WEB_DIST): $(FRONTEND_WEB_SRC)
 	cd cmd/frontend/web && npm install && npm run build
 
 pkg-deb: build-amd64 build-arm64
-	debian/build-deb.sh amd64 $(VERSION) $(COMMIT_HASH)
-	debian/build-deb.sh arm64 $(VERSION) $(COMMIT_HASH)
+	debian/build-deb.sh amd64 $(VERSION)
+	debian/build-deb.sh arm64 $(VERSION)
 
 test: $(GEN_FILES)
 	go test ./...
diff --git a/README.md b/README.md
index 71ad91f..8f041d7 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,9 @@ Requires Go 1.25+ and (for `make proto`) `protoc` with `protoc-gen-go` and
 
 Produces `vpp-maglev_<version>_amd64.deb` and `vpp-maglev_<version>_arm64.deb`
 in the `build/` directory by cross-compiling with `GOOS=linux GOARCH=<arch>`.
-Requires `dpkg-deb` (available on any Debian/Ubuntu host).
+Requires `dpkg-deb` (available on any Debian/Ubuntu host). The installed
+binaries report the exact git commit via `maglevd --version` (and
+similarly for `maglevc` / `maglev-frontend`).
 
 ## Running
 
@@ -23,7 +25,7 @@ After installing, the unit is enabled but not started automatically:
 
 ```sh
 # edit /etc/vpp-maglev/maglev.yaml, then:
-systemctl enable --now vpp-maglevd
+systemctl enable --now vpp-maglev
 ```
 
 Or run the server and client by hand:
diff --git a/cmd/frontend/client.go b/cmd/frontend/client.go
index 998eb3d..44c15a7 100644
--- a/cmd/frontend/client.go
+++ b/cmd/frontend/client.go
@@ -47,6 +47,7 @@ type cachedState struct {
 	HealthChecks     map[string]*HealthCheckSnapshot
 	HealthCheckOrder []string
 	VPPInfo          *VPPInfoSnapshot
+	VPPState         string // "", "connected", "disconnected"
 	LastRefresh      time.Time
 }
 
@@ -93,6 +94,37 @@ func (c *maglevClient) Close() {
 	_ = c.conn.Close()
 }
 
+// BackendAction runs one of the four lifecycle operations on a backend.
+// Valid actions are "pause", "resume", "enable", and "disable". The
+// fresh backend snapshot returned by maglevd is converted and sent
+// back to the caller so the admin API handler can reply with the
+// post-mutation state in a single round-trip. The broadcast
+// WatchEvents stream will also deliver a transition event which the
+// local cache and every connected browser apply through the normal
+// reducer path — so the UI converges even if the HTTP response is
+// slow or dropped in flight.
+func (c *maglevClient) BackendAction(ctx context.Context, name, action string) (*BackendSnapshot, error) {
+	req := &grpcapi.BackendRequest{Name: name}
+	var bi *grpcapi.BackendInfo
+	var err error
+	switch action {
+	case "pause":
+		bi, err = c.api.PauseBackend(ctx, req)
+	case "resume":
+		bi, err = c.api.ResumeBackend(ctx, req)
+	case "enable":
+		bi, err = c.api.EnableBackend(ctx, req)
+	case "disable":
+		bi, err = c.api.DisableBackend(ctx, req)
+	default:
+		return nil, fmt.Errorf("unknown action %q", action)
+	}
+	if err != nil {
+		return nil, err
+	}
+	return backendFromProto(bi), nil
+}
+
 func (c *maglevClient) Start(ctx context.Context) {
 	go c.watchLoop(ctx)
 	go c.refreshLoop(ctx)
@@ -145,6 +177,7 @@ func (c *maglevClient) Snapshot() *StateSnapshot {
 		Backends:     make([]*BackendSnapshot, 0, len(c.cache.BackendsOrder)),
 		HealthChecks: make([]*HealthCheckSnapshot, 0, len(c.cache.HealthCheckOrder)),
 		VPPInfo:      c.cache.VPPInfo,
+		VPPState:     c.cache.VPPState,
 	}
 	for _, name := range c.cache.FrontendsOrder {
 		if f, ok := c.cache.Frontends[name]; ok {
@@ -214,6 +247,7 @@ func (c *maglevClient) refreshAll(ctx context.Context) error {
 	}
 
 	var vppInfo *VPPInfoSnapshot
+	vppState := "disconnected"
 	if vi, err := c.api.GetVPPInfo(rctx, &grpcapi.GetVPPInfoRequest{}); err == nil {
 		vppInfo = &VPPInfoSnapshot{
 			Version:       vi.GetVersion(),
@@ -222,9 +256,19 @@ func (c *maglevClient) refreshAll(ctx context.Context) error {
 			BoottimeNs:    vi.GetBoottimeNs(),
 			ConnecttimeNs: vi.GetConnecttimeNs(),
 		}
+		vppState = "connected"
 	}
 
 	c.mu.Lock()
+	// Frontend state comes from the FrontendEvent stream, not the
+	// FrontendInfo proto — carry any known state from the old cache over
+	// to the freshly-listed entries so a periodic refresh doesn't blank
+	// the state badges until the next live transition arrives.
+	for name, f := range frontends {
+		if old, ok := c.cache.Frontends[name]; ok && old.State != "" {
+			f.State = old.State
+		}
+	}
 	c.cache.Frontends = frontends
 	c.cache.FrontendsOrder = frontendsOrder
 	c.cache.Backends = backends
@@ -232,6 +276,7 @@ func (c *maglevClient) refreshAll(ctx context.Context) error {
 	c.cache.HealthChecks = healthchecks
 	c.cache.HealthCheckOrder = healthCheckOrder
 	c.cache.VPPInfo = vppInfo
+	c.cache.VPPState = vppState
 	c.cache.LastRefresh = time.Now()
 	c.mu.Unlock()
 	return nil
@@ -314,6 +359,7 @@ func (c *maglevClient) handleEvent(ev *grpcapi.Event) {
 		for _, a := range le.GetAttrs() {
 			attrs[a.GetKey()] = a.GetValue()
 		}
+		c.applyVPPLogHeartbeat(le.GetMsg())
 		payload, _ := json.Marshal(LogEventPayload{
 			Level: le.GetLevel(),
 			Msg:   le.GetMsg(),
@@ -360,6 +406,12 @@ func (c *maglevClient) handleEvent(ev *grpcapi.Event) {
 			return
 		}
 		tr := transitionFromProto(fe.GetTransition())
+		// Always update the cached state — synthetic from==to events on
+		// subscribe are how we learn the initial frontend state (there's
+		// no equivalent field in the FrontendInfo proto). Only publish
+		// genuine transitions to the browser so the debug panel doesn't
+		// show 'up → up' spam on every gRPC reconnect.
+		c.applyFrontendState(fe.GetFrontendName(), tr.To)
 		if tr.From == tr.To {
 			return
 		}
@@ -376,6 +428,52 @@ func (c *maglevClient) handleEvent(ev *grpcapi.Event) {
 	}
 }
 
+// applyFrontendState writes the given state into the cached frontend
+// snapshot. Called both by synthetic replay events on subscribe and by
+// live transitions afterwards.
+func (c *maglevClient) applyFrontendState(name, state string) {
+	c.mu.Lock()
+	defer c.mu.Unlock()
+	f, ok := c.cache.Frontends[name]
+	if !ok {
+		return
+	}
+	f.State = state
+}
+
+// applyVPPLogHeartbeat flips the cache.VPPState field based on the
+// event's msg. vpp-connect and vpp-api-{send,recv}* are treated as
+// "VPP is up" signals; vpp-disconnect flips to "down". Unrelated log
+// events are a no-op. Called from handleEvent under the client's
+// event-dispatch goroutine, so contention on mu is single-writer.
+func (c *maglevClient) applyVPPLogHeartbeat(msg string) {
+	var newState string
+	switch {
+	case msg == "vpp-connect":
+		newState = "connected"
+	case msg == "vpp-disconnect":
+		newState = "disconnected"
+	case strings.HasPrefix(msg, "vpp-api-send") || strings.HasPrefix(msg, "vpp-api-recv"):
+		newState = "connected"
+	default:
+		return
+	}
+	c.mu.Lock()
+	if c.cache.VPPState == newState {
+		c.mu.Unlock()
+		return
+	}
+	c.cache.VPPState = newState
+	c.mu.Unlock()
+	payload, _ := json.Marshal(VPPStatusPayload{State: newState})
+	c.broker.Publish(BrowserEvent{
+		Maglevd:  c.name,
+		Type:     "vpp-status",
+		AtUnixNs: time.Now().UnixNano(),
+		Payload:  payload,
+	})
+}
+
 func (c *maglevClient) applyBackendTransition(name string, tr *TransitionRecord) {
 	c.mu.Lock()
 	defer c.mu.Unlock()
diff --git a/cmd/frontend/handlers.go b/cmd/frontend/handlers.go
index 24a8453..b4149f3 100644
--- a/cmd/frontend/handlers.go
+++ b/cmd/frontend/handlers.go
@@ -3,6 +3,8 @@
 package main
 
 import (
+	"context"
+	"crypto/subtle"
 	"encoding/json"
 	"fmt"
 	"io/fs"
@@ -14,7 +16,18 @@ import (
 	buildinfo "git.ipng.ch/ipng/vpp-maglev/cmd"
 )
 
-func registerHandlers(mux *http.ServeMux, clients []*maglevClient, broker *Broker) {
+// adminCreds holds the basic-auth credentials for the /admin/ surface.
+// Enabled is true when both the user and password env vars were set
+// and non-empty at startup; when false, /admin/ is hidden entirely
+// (returns 404) so operators who never intended to expose it don't
+// see a teasing "unauthorized" response.
+type adminCreds struct {
+	User     string
+	Password string
+	Enabled  bool
+}
+
+func registerHandlers(mux *http.ServeMux, clients []*maglevClient, broker *Broker, admin adminCreds) {
 	byName := make(map[string]*maglevClient, len(clients))
 	for _, c := range clients {
 		byName[c.name] = c
@@ -26,9 +39,10 @@ func registerHandlers(mux *http.ServeMux, clients []*maglevClient, broker *Broke
 
 	mux.HandleFunc("/view/api/version", func(w http.ResponseWriter, _ *http.Request) {
 		writeJSON(w, VersionInfo{
-			Version: buildinfo.Version(),
-			Commit:  buildinfo.Commit(),
-			Date:    buildinfo.Date(),
+			Version:      buildinfo.Version(),
+			Commit:       buildinfo.Commit(),
+			Date:         buildinfo.Date(),
+			AdminEnabled: admin.Enabled,
 		})
 	})
 
@@ -62,10 +76,6 @@ func registerHandlers(mux *http.ServeMux, clients []*maglevClient, broker *Broke
 		serveSSE(w, r, broker)
 	})
 
-	mux.HandleFunc("/admin/", func(w http.ResponseWriter, _ *http.Request) {
-		http.Error(w, "admin mode not implemented", http.StatusNotImplemented)
-	})
-
 	// Static SPA served from the embedded dist fs, mounted under /view/.
 	staticFS, err := fs.Sub(webFS, "web/dist")
 	if err != nil {
@@ -74,6 +84,35 @@ func registerHandlers(mux *http.ServeMux, clients []*maglevClient, broker *Broke
 	}
 	fileServer := http.FileServer(http.FS(staticFS))
 	mux.Handle("/view/", http.StripPrefix("/view/", fileServer))
+
+	// /admin/ serves the same SPA shell behind basic auth when the
+	// credentials are configured. Only the index.html is served here —
+	// all JS, CSS, and assets are referenced via absolute /view/assets/
+	// URLs baked in by Vite, so they continue to load from the
+	// unauthenticated /view/ tree. Read-only API calls also go to
+	// /view/api/* unchanged. Mutation endpoints live under /admin/api/
+	// so the same basic-auth middleware covers every writing path.
+	if admin.Enabled {
+		indexBytes, ierr := fs.ReadFile(staticFS, "index.html")
+		if ierr != nil {
+			slog.Error("embed-index", "err", ierr)
+			return
+		}
+		serveIndex := http.HandlerFunc(func(w http.ResponseWriter, _ *http.Request) {
+			w.Header().Set("Content-Type", "text/html; charset=utf-8")
+			w.Header().Set("Cache-Control", "no-store")
+			_, _ = w.Write(indexBytes)
+		})
+		adminAPI := http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			handleAdminAPI(w, r, byName)
+		})
+		realm := "maglev-frontend admin"
+		// Register /admin/api/ before /admin/ so the more specific
+		// pattern wins in net/http's ServeMux.
+		mux.Handle("/admin/api/", basicAuth(realm, admin.User, admin.Password, adminAPI))
+		mux.Handle("/admin/", basicAuth(realm, admin.User, admin.Password, serveIndex))
+	}
+
 	mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
 		if r.URL.Path == "/" {
 			http.Redirect(w, r, "/view/", http.StatusFound)
@@ -83,6 +122,76 @@ func registerHandlers(mux *http.ServeMux, clients []*maglevClient, broker *Broke
 	})
 }
 
+// handleAdminAPI dispatches mutation requests under /admin/api/.
+//
+// Currently the only supported shape is:
+//
+//	POST /admin/api/{maglevd}/backend/{name}/{pause|resume|enable|disable}
+//
+// The response body is the fresh BackendSnapshot (JSON) returned by
+// maglevd. The WatchEvents stream also delivers a transition event
+// so every connected browser converges through the normal reducer
+// path — the POST response is primarily for the originating SPA to
+// learn about failures immediately. Errors from the gRPC side are
+// surfaced as 400 (bad request / unknown action / unknown target)
+// or 502 (maglevd returned an error).
+func handleAdminAPI(w http.ResponseWriter, r *http.Request, byName map[string]*maglevClient) {
+	if r.Method != http.MethodPost {
+		w.Header().Set("Allow", "POST")
+		http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+	parts := strings.Split(strings.TrimPrefix(r.URL.Path, "/admin/api/"), "/")
+	// Expect: {maglevd} "backend" {name} {action}
+	if len(parts) != 4 || parts[1] != "backend" {
+		http.NotFound(w, r)
+		return
+	}
+	maglevd, name, action := parts[0], parts[2], parts[3]
+	c, ok := byName[maglevd]
+	if !ok {
+		http.NotFound(w, r)
+		return
+	}
+	switch action {
+	case "pause", "resume", "enable", "disable":
+	default:
+		http.Error(w, fmt.Sprintf("unknown action %q", action), http.StatusBadRequest)
+		return
+	}
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+	snap, err := c.BackendAction(ctx, name, action)
+	if err != nil {
+		slog.Warn("admin-backend-action", "maglevd", maglevd, "backend", name, "action", action, "err", err)
+		http.Error(w, err.Error(), http.StatusBadGateway)
+		return
+	}
+	slog.Info("admin-backend-action",
+		"maglevd", maglevd, "backend", name, "action", action, "state", snap.State)
+	writeJSON(w, snap)
+}
+
+// basicAuth wraps a handler in an HTTP basic-auth check. Uses
+// subtle.ConstantTimeCompare to avoid leaking credential length or
+// content via response-timing side channels.
+func basicAuth(realm, user, password string, next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		u, p, ok := r.BasicAuth()
+		// Compare fixed-length byte slices so a wrong username takes
+		// the same time as a wrong password; only the boolean result
+		// matters.
+		uOK := subtle.ConstantTimeCompare([]byte(u), []byte(user)) == 1
+		pOK := subtle.ConstantTimeCompare([]byte(p), []byte(password)) == 1
+		if !ok || !uOK || !pOK {
+			w.Header().Set("WWW-Authenticate", fmt.Sprintf(`Basic realm=%q`, realm))
+			http.Error(w, "unauthorized", http.StatusUnauthorized)
+			return
+		}
+		next.ServeHTTP(w, r)
+	})
+}
+
 func writeJSON(w http.ResponseWriter, v any) {
 	w.Header().Set("Content-Type", "application/json")
 	enc := json.NewEncoder(w)
diff --git a/cmd/frontend/main.go b/cmd/frontend/main.go
index dabccb1..aca7bc1 100644
--- a/cmd/frontend/main.go
+++ b/cmd/frontend/main.go
@@ -69,8 +69,20 @@ func run() error {
 		slog.Info("maglevd-configured", "name", c.name, "address", c.address)
 	}
 
+	admin := adminCreds{
+		User:     os.Getenv("MAGLEV_FRONTEND_USER"),
+		Password: os.Getenv("MAGLEV_FRONTEND_PASSWORD"),
+	}
+	admin.Enabled = admin.User != "" && admin.Password != ""
+	if admin.Enabled {
+		slog.Info("admin-enabled", "user", admin.User)
+	} else {
+		slog.Info("admin-disabled",
+			"reason", "MAGLEV_FRONTEND_USER and MAGLEV_FRONTEND_PASSWORD must both be set and non-empty")
+	}
+
 	mux := http.NewServeMux()
-	registerHandlers(mux, clients, broker)
+	registerHandlers(mux, clients, broker, admin)
 
 	srv := &http.Server{
 		Addr:              *listen,
diff --git a/cmd/frontend/types.go b/cmd/frontend/types.go
index ec7f49e..a50c854 100644
--- a/cmd/frontend/types.go
+++ b/cmd/frontend/types.go
@@ -11,6 +11,10 @@ type StateSnapshot struct {
 	Backends     []*BackendSnapshot     `json:"backends"`
 	HealthChecks []*HealthCheckSnapshot `json:"healthchecks"`
 	VPPInfo      *VPPInfoSnapshot       `json:"vpp_info,omitempty"`
+	// VPPState is "connected", "disconnected", or "" (unknown). Updated
+	// from vpp-connect / vpp-disconnect / vpp-api-{send,recv} log
+	// events and re-seeded on every refreshAll tick.
+	VPPState string `json:"vpp_state,omitempty"`
 }
 
 // MaglevdInfo is the per-maglevd connection status record.
@@ -21,11 +25,13 @@ type MaglevdInfo struct {
 	LastError string `json:"last_error,omitempty"`
 }
 
-// VersionInfo is the build metadata of this maglev-frontend binary.
+// VersionInfo is the build metadata of this maglev-frontend binary
+// plus runtime capability flags the SPA needs to know at mount time.
 type VersionInfo struct {
-	Version string `json:"version"`
-	Commit  string `json:"commit"`
-	Date    string `json:"date"`
+	Version      string `json:"version"`
+	Commit       string `json:"commit"`
+	Date         string `json:"date"`
+	AdminEnabled bool   `json:"admin_enabled"`
 }
 
 type FrontendSnapshot struct {
@@ -36,6 +42,10 @@ type FrontendSnapshot struct {
 	Description string          `json:"description,omitempty"`
 	SrcIPSticky bool            `json:"src_ip_sticky"`
 	Pools       []*PoolSnapshot `json:"pools"`
+	// State is the aggregated frontend state ("up" | "down" | "unknown")
+	// populated from FrontendEvent messages, including the synthetic
+	// from==to replay that maglevd sends on WatchEvents subscribe.
+	State string `json:"state,omitempty"`
 }
 
 type PoolSnapshot struct {
@@ -115,3 +125,11 @@ type MaglevdStatusPayload struct {
 	Connected bool   `json:"connected"`
 	LastError string `json:"last_error,omitempty"`
 }
+
+// VPPStatusPayload rides on a "vpp-status" BrowserEvent and tells the
+// SPA when the maglevd↔VPP connection flips. Emitted by the frontend's
+// log-event handler on vpp-connect / vpp-disconnect, and on the first
+// sighting of vpp-api-send/recv (which implies VPP is up).
+type VPPStatusPayload struct {
+	State string `json:"state"` // "connected" | "disconnected"
+}
diff --git a/cmd/frontend/web/dist/assets/index-9NmAul22.css b/cmd/frontend/web/dist/assets/index-9NmAul22.css
deleted file mode 100644
index b9a5008..0000000
--- a/cmd/frontend/web/dist/assets/index-9NmAul22.css
+++ /dev/null
@@ -1 +0,0 @@
-*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.4;color:var(--fg);background:var(--bg)}h1,h2,h3,h4,p,dl,dd,ol,ul{margin:0;padding:0}ol,ul{list-style:none}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:1px solid var(--border);border-radius:4px;padding:4px 8px;cursor:pointer}button:hover{background:var(--bg-soft)}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:4px 8px}code,pre,.mono{font-family:SF Mono,Menlo,Consolas,monospace}:root{--bg: #fafafa;--bg-soft: #f0f0f0;--bg-card: #ffffff;--fg: #1f2937;--fg-muted: #6b7280;--border: #e5e7eb;--accent: #2563eb;--state-up: #16a34a;--state-down: #dc2626;--state-paused: #2563eb;--state-disabled: #6b7280;--state-unknown: #eab308;--state-removed: #374151}.flash-target{display:inline-block;padding:0 4px;border-radius:3px}.app{max-width:1400px;margin:0 auto;padding:16px}.app-header{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--border);margin-bottom:16px}.brand strong{font-size:18px}.app-header .mode-tag{margin-left:auto;padding:2px 6px;border-radius:3px;background:var(--bg-soft);color:var(--fg-muted);font-size:11px;text-transform:uppercase}.brand .version{margin-left:8px;color:var(--fg-muted);font-family:SF Mono,Menlo,Consolas,monospace;font-size:11px;cursor:help}.admin-toggle{padding:4px 10px;border:1px solid var(--border);border-radius:4px;color:var(--accent)}.scope-selector{display:flex;gap:6px;flex-wrap:wrap}.scope-tab{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px}.scope-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}.scope-tab .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--state-down)}.scope-tab.connected .dot{background:var(--state-up)}.status-badge{display:inline-block;padding:2px 10px;border-radius:10px;font-size:12px;font-weight:500;color:#fff;text-transform:capitalize}.status-badge[data-state=up]{background:var(--state-up)}.status-badge[data-state=down]{background:var(--state-down)}.status-badge[data-state=paused]{background:var(--state-paused)}.status-badge[data-state=disabled]{background:var(--state-disabled)}.status-badge[data-state=unknown]{background:var(--state-unknown);color:#1f2937}.status-badge[data-state=removed]{background:var(--state-removed);text-decoration:line-through}.frontend-grid{display:grid;gap:16px;grid-template-columns:1fr}@media (min-width: 640px){.frontend-grid{grid-template-columns:1fr 1fr}}@media (min-width: 1024px){.frontend-grid{grid-template-columns:repeat(3,1fr)}}.frontend-card{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:12px}.frontend-header h2{font-size:16px;margin-bottom:4px}.frontend-meta{display:flex;gap:8px;color:var(--fg-muted);font-size:12px}.frontend-meta .proto{text-transform:uppercase;font-weight:600}.frontend-desc{font-size:12px;color:var(--fg-muted);margin-top:4px}.tag{display:inline-block;padding:1px 6px;border-radius:3px;background:var(--bg-soft);color:var(--fg-muted);font-size:11px;margin-left:4px}.pool-block{margin-top:12px}.pool-name{font-size:13px;color:var(--fg-muted);margin-bottom:4px}.backend-table th,.backend-table td{white-space:nowrap}.backend-table th{font-size:11px;color:var(--fg-muted);text-transform:uppercase;border-bottom:1px solid var(--border)}.backend-table .numeric{text-align:right}.backend-row td{border-bottom:1px solid var(--border);font-size:13px}.backend-row .backend-name{font-weight:500}.backend-row .backend-address,.backend-row .age{color:var(--fg-muted);font-family:SF Mono,Menlo,Consolas,monospace;font-size:12px}.probe-heartbeat{display:inline-block;width:16px;height:14px;line-height:14px;margin-right:6px;text-align:center;font-size:10px;color:var(--state-disabled);overflow:hidden;vertical-align:middle}.probe-heartbeat.in-flight{color:inherit}.banner{padding:8px 12px;border-radius:4px;margin-bottom:12px;font-size:13px}.banner.warn{background:#fef3c7;color:#92400e}.banner.err{background:#fee2e2;color:#991b1b}.loading,.empty{color:var(--fg-muted);padding:16px}.zippy{margin-top:16px;border:1px solid var(--border);border-radius:6px;background:var(--bg-card)}.zippy summary{padding:8px 12px;cursor:pointer;font-weight:500}.zippy-body{padding:8px 12px;border-top:1px solid var(--border)}.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px}.kv dt{color:var(--fg-muted)}.debug-toolbar{display:flex;gap:12px;align-items:center;margin-top:8px;font-size:12px}.debug-toolbar .count{margin-left:auto;color:var(--fg-muted)}.event-tail{max-height:320px;overflow:auto;font-family:SF Mono,Menlo,Consolas,monospace;font-size:11px;line-height:1.5}.event-row{padding:2px 4px;white-space:pre-wrap;word-break:break-all}.event-row.event-backend{color:var(--state-up)}.event-row.event-frontend{color:var(--accent)}.event-row.event-log{color:var(--fg-muted)}.event-row.event-maglevd-status{color:var(--state-down)}.event-row.event-sync{color:var(--state-paused);font-weight:500}
diff --git a/cmd/frontend/web/dist/assets/index-AsNHMKdQ.js b/cmd/frontend/web/dist/assets/index-AsNHMKdQ.js
new file mode 100644
index 0000000..453dc5a
--- /dev/null
+++ b/cmd/frontend/web/dist/assets/index-AsNHMKdQ.js
@@ -0,0 +1 @@
+(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))r(s);new MutationObserver(s=>{for(const l of s)if(l.type==="childList")for(const i of l.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&r(i)}).observe(document,{childList:!0,subtree:!0});function n(s){const l={};return s.integrity&&(l.integrity=s.integrity),s.referrerPolicy&&(l.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?l.credentials="include":s.crossOrigin==="anonymous"?l.credentials="omit":l.credentials="same-origin",l}function r(s){if(s.ep)return;s.ep=!0;const l=n(s);fetch(s.href,l)}})();const Je=!1,Xe=(e,t)=>e===t,I=Symbol("solid-proxy"),pe=Symbol("solid-track"),re={equals:Xe};let Ce=Te;const D=1,se=2,Oe={owned:null,cleanups:null,context:null,owner:null};var v=null;let he=null,ze=null,y=null,w=null,N=null,de=0;function ne(e,t){const n=y,r=v,s=e.length===0,l=t===void 0?r:t,i=s?Oe:{owned:null,cleanups:null,context:l?l.context:null,owner:l},o=s?e:()=>e(()=>L(()=>z(i)));v=i,y=null;try{return q(o,!0)}finally{y=n,v=r}}function _(e,t){t=t?Object.assign({},re,t):re;const n={value:e,observers:null,observerSlots:null,comparator:t.equals||void 0},r=s=>(typeof s=="function"&&(s=s(n.value)),Le(n,s));return[Ne.bind(n),r]}function S(e,t,n){const r=ve(e,t,!1,D);Z(r)}function Y(e,t,n){Ce=nt;const r=ve(e,t,!1,D);r.user=!0,N?N.push(r):Z(r)}function R(e,t,n){n=n?Object.assign({},re,n):re;const r=ve(e,t,!0,0);return r.observers=null,r.observerSlots=null,r.comparator=n.equals||void 0,Z(r),Ne.bind(r)}function Qe(e){return q(e,!1)}function L(e){if(y===null)return e();const t=y;y=null;try{return e()}finally{y=t}}function Ye(e,t,n){const r=Array.isArray(e);let s,l=n&&n.defer;return i=>{let o;if(r){o=Array(e.length);for(let f=0;f<e.length;f++)o[f]=e[f]()}else o=e();if(l)return l=!1,i;const a=L(()=>t(o,s,i));return s=o,a}}function Ze(e){Y(()=>L(e))}function Pe(e){return v===null||(v.cleanups===null?v.cleanups=[e]:v.cleanups.push(e)),e}function $e(){return y}function Ne(){if(this.sources&&this.state)if(this.state===D)Z(this);else{const e=w;w=null,q(()=>ie(this),!1),w=e}if(y){const e=this.observers?this.observers.length:0;y.sources?(y.sources.push(this),y.sourceSlots.push(e)):(y.sources=[this],y.sourceSlots=[e]),this.observers?(this.observers.push(y),this.observerSlots.push(y.sources.length-1)):(this.observers=[y],this.observerSlots=[y.sources.length-1])}return this.value}function Le(e,t,n){let r=e.value;return(!e.comparator||!e.comparator(r,t))&&(e.value=t,e.observers&&e.observers.length&&q(()=>{for(let s=0;s<e.observers.length;s+=1){const l=e.observers[s],i=he&&he.running;i&&he.disposed.has(l),(i?!l.tState:!l.state)&&(l.pure?w.push(l):N.push(l),l.observers&&je(l)),i||(l.state=D)}if(w.length>1e6)throw w=[],new Error},!1)),t}function Z(e){if(!e.fn)return;z(e);const t=de;et(e,e.value,t)}function et(e,t,n){let r;const s=v,l=y;y=v=e;try{r=e.fn(t)}catch(i){return e.pure&&(e.state=D,e.owned&&e.owned.forEach(z),e.owned=null),e.updatedAt=n+1,Be(i)}finally{y=l,v=s}(!e.updatedAt||e.updatedAt<=n)&&(e.updatedAt!=null&&"observers"in e?Le(e,r):e.value=r,e.updatedAt=n)}function ve(e,t,n,r=D,s){const l={fn:e,state:r,updatedAt:null,owned:null,sources:null,sourceSlots:null,cleanups:null,value:t,owner:v,context:v?v.context:null,pure:n};return v===null||v!==Oe&&(v.owned?v.owned.push(l):v.owned=[l]),l}function le(e){if(e.state===0)return;if(e.state===se)return ie(e);if(e.suspense&&L(e.suspense.inFallback))return e.suspense.effects.push(e);const t=[e];for(;(e=e.owner)&&(!e.updatedAt||e.updatedAt<de);)e.state&&t.push(e);for(let n=t.length-1;n>=0;n--)if(e=t[n],e.state===D)Z(e);else if(e.state===se){const r=w;w=null,q(()=>ie(e,t[0]),!1),w=r}}function q(e,t){if(w)return e();let n=!1;t||(w=[]),N?n=!0:N=[],de++;try{const r=e();return tt(n),r}catch(r){n||(N=null),w=null,Be(r)}}function tt(e){if(w&&(Te(w),w=null),e)return;const t=N;N=null,t.length&&q(()=>Ce(t),!1)}function Te(e){for(let t=0;t<e.length;t++)le(e[t])}function nt(e){let t,n=0;for(t=0;t<e.length;t++){const r=e[t];r.user?e[n++]=r:le(r)}for(t=0;t<n;t++)le(e[t])}function ie(e,t){e.state=0;for(let n=0;n<e.sources.length;n+=1){const r=e.sources[n];if(r.sources){const s=r.state;s===D?r!==t&&(!r.updatedAt||r.updatedAt<de)&&le(r):s===se&&ie(r,t)}}}function je(e){for(let t=0;t<e.observers.length;t+=1){const n=e.observers[t];n.state||(n.state=se,n.pure?w.push(n):N.push(n),n.observers&&je(n))}}function z(e){let t;if(e.sources)for(;e.sources.length;){const n=e.sources.pop(),r=e.sourceSlots.pop(),s=n.observers;if(s&&s.length){const l=s.pop(),i=n.observerSlots.pop();r<s.length&&(l.sourceSlots[i]=r,s[r]=l,n.observerSlots[r]=i)}}if(e.tOwned){for(t=e.tOwned.length-1;t>=0;t--)z(e.tOwned[t]);delete e.tOwned}if(e.owned){for(t=e.owned.length-1;t>=0;t--)z(e.owned[t]);e.owned=null}if(e.cleanups){for(t=e.cleanups.length-1;t>=0;t--)e.cleanups[t]();e.cleanups=null}e.state=0}function rt(e){return e instanceof Error?e:new Error(typeof e=="string"?e:"Unknown error",{cause:e})}function Be(e,t=v){throw rt(e)}const st=Symbol("fallback");function ke(e){for(let t=0;t<e.length;t++)e[t]()}function lt(e,t,n={}){let r=[],s=[],l=[],i=0,o=t.length>1?[]:null;return Pe(()=>ke(l)),()=>{let a=e()||[],f=a.length,u,c;return a[pe],L(()=>{let p,$,m,C,M,k,A,x,T;if(f===0)i!==0&&(ke(l),l=[],r=[],s=[],i=0,o&&(o=[])),n.fallback&&(r=[st],s[0]=ne(te=>(l[0]=te,n.fallback())),i=1);else if(i===0){for(s=new Array(f),c=0;c<f;c++)r[c]=a[c],s[c]=ne(b);i=f}else{for(m=new Array(f),C=new Array(f),o&&(M=new Array(f)),k=0,A=Math.min(i,f);k<A&&r[k]===a[k];k++);for(A=i-1,x=f-1;A>=k&&x>=k&&r[A]===a[x];A--,x--)m[x]=s[A],C[x]=l[A],o&&(M[x]=o[A]);for(p=new Map,$=new Array(x+1),c=x;c>=k;c--)T=a[c],u=p.get(T),$[c]=u===void 0?-1:u,p.set(T,c);for(u=k;u<=A;u++)T=r[u],c=p.get(T),c!==void 0&&c!==-1?(m[c]=s[u],C[c]=l[u],o&&(M[c]=o[u]),c=$[c],p.set(T,c)):l[u]();for(c=k;c<f;c++)c in m?(s[c]=m[c],l[c]=C[c],o&&(o[c]=M[c],o[c](c))):s[c]=ne(b);s=s.slice(0,i=f),r=a.slice(0)}return s});function b(p){if(l[c]=p,o){const[$,m]=_(c);return o[c]=m,t(a[c],$)}return t(a[c])}}}function g(e,t){return L(()=>e(t||{}))}const it=e=>`Stale read from <${e}>.`;function V(e){const t="fallback"in e&&{fallback:()=>e.fallback};return R(lt(()=>e.each,e.children,t||void 0))}function E(e){const t=e.keyed,n=R(()=>e.when,void 0,void 0),r=t?n:R(n,void 0,{equals:(s,l)=>!s==!l});return R(()=>{const s=r();if(s){const l=e.children;return typeof l=="function"&&l.length>0?L(()=>l(t?s:()=>{if(!L(r))throw it("Show");return n()})):l}return e.fallback},void 0,void 0)}const B=e=>R(()=>e());function ot(e,t,n){let r=n.length,s=t.length,l=r,i=0,o=0,a=t[s-1].nextSibling,f=null;for(;i<s||o<l;){if(t[i]===n[o]){i++,o++;continue}for(;t[s-1]===n[l-1];)s--,l--;if(s===i){const u=l<r?o?n[o-1].nextSibling:n[l-o]:a;for(;o<l;)e.insertBefore(n[o++],u)}else if(l===o)for(;i<s;)(!f||!f.has(t[i]))&&t[i].remove(),i++;else if(t[i]===n[l-1]&&n[o]===t[s-1]){const u=t[--s].nextSibling;e.insertBefore(n[o++],t[i++].nextSibling),e.insertBefore(n[--l],u),t[s]=n[l]}else{if(!f){f=new Map;let c=o;for(;c<l;)f.set(n[c],c++)}const u=f.get(t[i]);if(u!=null)if(o<u&&u<l){let c=i,b=1,p;for(;++c<s&&c<l&&!((p=f.get(t[c]))==null||p!==u+b);)b++;if(b>u-o){const $=t[i];for(;o<u;)e.insertBefore(n[o++],$)}else e.replaceChild(n[o++],t[i++])}else i++;else t[i++].remove()}}}const Ae="_$DX_DELEGATE";function at(e,t,n,r={}){let s;return ne(l=>{s=l,t===document?e():d(t,e(),t.firstChild?null:void 0,n)},r.owner),()=>{s(),t.textContent=""}}function h(e,t,n,r){let s;const l=()=>{const o=document.createElement("template");return o.innerHTML=e,o.content.firstChild},i=()=>(s||(s=l())).cloneNode(!0);return i.cloneNode=i,i}function we(e,t=window.document){const n=t[Ae]||(t[Ae]=new Set);for(let r=0,s=e.length;r<s;r++){const l=e[r];n.has(l)||(n.add(l),t.addEventListener(l,ut))}}function P(e,t,n){n==null?e.removeAttribute(t):e.setAttribute(t,n)}function ct(e,t){t==null?e.removeAttribute("class"):e.className=t}function _e(e,t,n){return L(()=>e(t,n))}function d(e,t,n,r){if(n!==void 0&&!r&&(r=[]),typeof t!="function")return oe(e,t,r,n);S(s=>oe(e,t(),s,n),r)}function ut(e){let t=e.target;const n=`$$${e.type}`,r=e.target,s=e.currentTarget,l=a=>Object.defineProperty(e,"target",{configurable:!0,value:a}),i=()=>{const a=t[n];if(a&&!t.disabled){const f=t[`${n}Data`];if(f!==void 0?a.call(t,f,e):a.call(t,e),e.cancelBubble)return}return t.host&&typeof t.host!="string"&&!t.host._$host&&t.contains(e.target)&&l(t.host),!0},o=()=>{for(;i()&&(t=t._$host||t.parentNode||t.host););};if(Object.defineProperty(e,"currentTarget",{configurable:!0,get(){return t||document}}),e.composedPath){const a=e.composedPath();l(a[0]);for(let f=0;f<a.length-2&&(t=a[f],!!i());f++){if(t._$host){t=t._$host,o();break}if(t.parentNode===s)break}}else o();l(r)}function oe(e,t,n,r,s){for(;typeof n=="function";)n=n();if(t===n)return n;const l=typeof t,i=r!==void 0;if(e=i&&n[0]&&n[0].parentNode||e,l==="string"||l==="number"){if(l==="number"&&(t=t.toString(),t===n))return n;if(i){let o=n[0];o&&o.nodeType===3?o.data!==t&&(o.data=t):o=document.createTextNode(t),n=F(e,n,r,o)}else n!==""&&typeof n=="string"?n=e.firstChild.data=t:n=e.textContent=t}else if(t==null||l==="boolean")n=F(e,n,r);else{if(l==="function")return S(()=>{let o=t();for(;typeof o=="function";)o=o();n=oe(e,o,n,r)}),()=>n;if(Array.isArray(t)){const o=[],a=n&&Array.isArray(n);if(me(o,t,n,s))return S(()=>n=oe(e,o,n,r,!0)),()=>n;if(o.length===0){if(n=F(e,n,r),i)return n}else a?n.length===0?xe(e,o,r):ot(e,n,o):(n&&F(e),xe(e,o));n=o}else if(t.nodeType){if(Array.isArray(n)){if(i)return n=F(e,n,r,t);F(e,n,null,t)}else n==null||n===""||!e.firstChild?e.appendChild(t):e.replaceChild(t,e.firstChild);n=t}}return n}function me(e,t,n,r){let s=!1;for(let l=0,i=t.length;l<i;l++){let o=t[l],a=n&&n[e.length],f;if(!(o==null||o===!0||o===!1))if((f=typeof o)=="object"&&o.nodeType)e.push(o);else if(Array.isArray(o))s=me(e,o,a)||s;else if(f==="function")if(r){for(;typeof o=="function";)o=o();s=me(e,Array.isArray(o)?o:[o],Array.isArray(a)?a:[a])||s}else e.push(o),s=!0;else{const u=String(o);a&&a.nodeType===3&&a.data===u?e.push(a):e.push(document.createTextNode(u))}}return s}function xe(e,t,n=null){for(let r=0,s=t.length;r<s;r++)e.insertBefore(t[r],n)}function F(e,t,n,r){if(n===void 0)return e.textContent="";const s=r||document.createTextNode("");if(t.length){let l=!1;for(let i=t.length-1;i>=0;i--){const o=t[i];if(s!==o){const a=o.parentNode===e;!l&&!i?a?e.replaceChild(s,o):e.insertBefore(s,n):a&&o.remove()}else l=!0}}else e.insertBefore(s,n);return[s]}async function De(e){const t=await fetch(e,{credentials:"same-origin"});if(!t.ok)throw new Error(`${e}: ${t.status} ${t.statusText}`);return await t.json()}function Ie(){return De("/view/api/state")}function ft(){return De("/view/api/version")}const ae=Symbol("store-raw"),U=Symbol("store-node"),O=Symbol("store-has"),Me=Symbol("store-self");function Fe(e){let t=e[I];if(!t&&(Object.defineProperty(e,I,{value:t=new Proxy(e,ht)}),!Array.isArray(e))){const n=Object.keys(e),r=Object.getOwnPropertyDescriptors(e);for(let s=0,l=n.length;s<l;s++){const i=n[s];r[i].get&&Object.defineProperty(e,i,{enumerable:r[i].enumerable,get:r[i].get.bind(t)})}}return t}function W(e){let t;return e!=null&&typeof e=="object"&&(e[I]||!(t=Object.getPrototypeOf(e))||t===Object.prototype||Array.isArray(e))}function K(e,t=new Set){let n,r,s,l;if(n=e!=null&&e[ae])return n;if(!W(e)||t.has(e))return e;if(Array.isArray(e)){Object.isFrozen(e)?e=e.slice(0):t.add(e);for(let i=0,o=e.length;i<o;i++)s=e[i],(r=K(s,t))!==s&&(e[i]=r)}else{Object.isFrozen(e)?e=Object.assign({},e):t.add(e);const i=Object.keys(e),o=Object.getOwnPropertyDescriptors(e);for(let a=0,f=i.length;a<f;a++)l=i[a],!o[l].get&&(s=e[l],(r=K(s,t))!==s&&(e[l]=r))}return e}function ce(e,t){let n=e[t];return n||Object.defineProperty(e,t,{value:n=Object.create(null)}),n}function Q(e,t,n){if(e[t])return e[t];const[r,s]=_(n,{equals:!1,internal:!0});return r.$=s,e[t]=r}function dt(e,t){const n=Reflect.getOwnPropertyDescriptor(e,t);return!n||n.get||!n.configurable||t===I||t===U||(delete n.value,delete n.writable,n.get=()=>e[I][t]),n}function Re(e){$e()&&Q(ce(e,U),Me)()}function gt(e){return Re(e),Reflect.ownKeys(e)}const ht={get(e,t,n){if(t===ae)return e;if(t===I)return n;if(t===pe)return Re(e),n;const r=ce(e,U),s=r[t];let l=s?s():e[t];if(t===U||t===O||t==="__proto__")return l;if(!s){const i=Object.getOwnPropertyDescriptor(e,t);$e()&&(typeof l!="function"||e.hasOwnProperty(t))&&!(i&&i.get)&&(l=Q(r,t,l)())}return W(l)?Fe(l):l},has(e,t){return t===ae||t===I||t===pe||t===U||t===O||t==="__proto__"?!0:($e()&&Q(ce(e,O),t)(),t in e)},set(){return!0},deleteProperty(){return!0},ownKeys:gt,getOwnPropertyDescriptor:dt};function H(e,t,n,r=!1){if(!r&&e[t]===n)return;const s=e[t],l=e.length;n===void 0?(delete e[t],e[O]&&e[O][t]&&s!==void 0&&e[O][t].$()):(e[t]=n,e[O]&&e[O][t]&&s===void 0&&e[O][t].$());let i=ce(e,U),o;if((o=Q(i,t,s))&&o.$(()=>n),Array.isArray(e)&&e.length!==l){for(let a=e.length;a<l;a++)(o=i[a])&&o.$();(o=Q(i,"length",l))&&o.$(e.length)}(o=i[Me])&&o.$()}function Ue(e,t){const n=Object.keys(t);for(let r=0;r<n.length;r+=1){const s=n[r];H(e,s,t[s])}}function bt(e,t){if(typeof t=="function"&&(t=t(e)),t=K(t),Array.isArray(t)){if(e===t)return;let n=0,r=t.length;for(;n<r;n++){const s=t[n];e[n]!==s&&H(e,n,s)}H(e,"length",r)}else Ue(e,t)}function J(e,t,n=[]){let r,s=e;if(t.length>1){r=t.shift();const i=typeof r,o=Array.isArray(e);if(Array.isArray(r)){for(let a=0;a<r.length;a++)J(e,[r[a]].concat(t),n);return}else if(o&&i==="function"){for(let a=0;a<e.length;a++)r(e[a],a)&&J(e,[a].concat(t),n);return}else if(o&&i==="object"){const{from:a=0,to:f=e.length-1,by:u=1}=r;for(let c=a;c<=f;c+=u)J(e,[c].concat(t),n);return}else if(t.length>1){J(e[r],t,[r].concat(n));return}s=e[r],n=[r].concat(n)}let l=t[0];typeof l=="function"&&(l=l(s,n),l===s)||r===void 0&&l==null||(l=K(l),r===void 0||W(s)&&W(l)&&!Array.isArray(l)?Ue(s,l):H(e,r,l))}function pt(...[e,t]){const n=K(e||{}),r=Array.isArray(n),s=Fe(n);function l(...i){Qe(()=>{r&&i.length===1?bt(n,i[0]):J(n,i)})}return[s,l]}const ue=new WeakMap,Ve={get(e,t){if(t===ae)return e;const n=e[t];let r;return W(n)?ue.get(n)||(ue.set(n,r=new Proxy(n,Ve)),r):n},set(e,t,n){return H(e,t,K(n)),!0},deleteProperty(e,t){return H(e,t,void 0,!0),!0}};function ee(e){return t=>{if(W(t)){let n;(n=ue.get(t))||ue.set(t,n=new Proxy(t,Ve)),e(n)}return t}}const[$t,mt]=_(0);setInterval(()=>mt(e=>e+1),5e3);const[fe,G]=pt({byName:{}});function We(e){const t={};for(const n of e)t[n.maglevd.name]=n;G({byName:t})}function yt(e,t){G(ee(n=>{const r=n.byName[e];if(!r)return;const s=r.backends.find(l=>l.name===t.backend);s&&(s.state=t.transition.to,s.last_transition=t.transition,s.transitions||(s.transitions=[]),s.transitions.push(t.transition),s.transitions.length>20&&(s.transitions=s.transitions.slice(s.transitions.length-20)))}))}function vt(e,t){G(ee(n=>{const r=n.byName[e];if(!r)return;const s=r.frontends.find(l=>l.name===t.frontend);s&&(s.state=t.transition.to)}))}function wt(e,t){G(ee(n=>{const r=n.byName[e];r&&(r.vpp_state=t)}))}function _t(e,t){G(ee(n=>{const r=n.byName[e];r&&(r.maglevd.connected=t.connected,r.maglevd.last_error=t.last_error)}))}function be(e,t,n){G(ee(r=>{const s=r.byName[e];if(!s)return;const l=s.backends.find(i=>i.address===t);if(l)for(const i of s.frontends)for(const o of i.pools)for(const a of o.backends)a.name===l.name&&(a.effective_weight=n)}))}function St(e){if($t(),!e||!e.at_unix_ns||e.at_unix_ns<=0)return"";const t=Date.now()-e.at_unix_ns/1e6,n=Math.floor(t/1e3);if(n<=1)return"now";const r=n%60,s=Math.floor(n/60);if(s<1)return`${n}s ago`;const l=s%60,i=Math.floor(s/60);if(i<1)return`${l}m${r}s ago`;const o=i%24,a=Math.floor(i/24);return a<1?`${i}h${l}m ago`:`${a}d${o}h ago`}const Ee=500,[ye,kt]=_([]);function At(e){kt(t=>{const n=[...t,e];return n.length>Ee?n.slice(n.length-Ee):n})}function xt(){const e=new EventSource("/view/api/events");return e.onmessage=t=>{try{const n=JSON.parse(t.data);Et(n)}catch(n){console.error("sse parse error",n,t.data)}},e.addEventListener("resync",async()=>{try{const t=await Ie();We(t)}catch(t){console.error("resync refetch failed",t)}}),e.onerror=t=>{console.debug("sse error, browser will reconnect",t)},e}function Et(e){switch(At(e),e.type){case"backend":yt(e.maglevd,e.payload);break;case"frontend":vt(e.maglevd,e.payload);break;case"maglevd-status":_t(e.maglevd,e.payload);break;case"vpp-status":wt(e.maglevd,e.payload.state);break;case"log":Ct(e.maglevd,e.payload);break}}function Ct(e,t){if(!t.msg.startsWith("vpp-lb-sync-as-"))return;const n=t.attrs??{},r=n.address;if(r)switch(t.msg){case"vpp-lb-sync-as-added":be(e,r,Number(n.weight??0));break;case"vpp-lb-sync-as-removed":be(e,r,0);break;case"vpp-lb-sync-as-weight-updated":be(e,r,Number(n.to??0));break}}const[ge,Ke]=_(void 0);var Ot=h("<nav class=scope-selector>"),Pt=h("<button class=scope-tab><span class=dot>");const Nt=()=>{const e=()=>Object.keys(fe.byName).sort();return(()=>{var t=Ot();return d(t,g(V,{get each(){return e()},children:n=>{const r=()=>fe.byName[n],s=()=>r()?.maglevd.connected??!1;return(()=>{var l=Pt();return l.firstChild,l.$$click=()=>Ke(n),d(l,n,null),S(i=>{var o=ge()===n,a=!!s(),f=!s(),u=r()?.maglevd.address??"";return o!==i.e&&l.classList.toggle("active",i.e=o),a!==i.t&&l.classList.toggle("connected",i.t=a),f!==i.a&&l.classList.toggle("disconnected",i.a=f),u!==i.o&&P(l,"title",i.o=u),i},{e:void 0,t:void 0,a:void 0,o:void 0}),l})()}})),t})()};we(["click"]);var Lt=h("<span class=status-badge>");const He=e=>(()=>{var t=Lt();return d(t,()=>e.label??e.state),S(()=>P(t,"data-state",e.state)),t})();var Tt=h("<span class=probe-heartbeat>");const jt=e=>{const[t,n]=_(!1);return Y(()=>{const r=ye();if(r.length===0)return;const s=r[r.length-1];if(s.type!=="log"||s.maglevd!==e.maglevd)return;const l=s.payload;l.attrs?.backend===e.backend&&(l.msg==="probe-start"?n(!0):l.msg==="probe-done"&&n(!1))}),(()=>{var r=Tt();return d(r,()=>t()?"❤️":"·"),S(()=>r.classList.toggle("in-flight",!!t())),r})()};var Bt=h("<span class=flash-target>");const X=e=>{let t;return Y(Ye(()=>e.value,()=>{t?.animate([{transform:"scale(1)",backgroundColor:"#facc15",boxShadow:"0 0 0 2px #facc15",offset:0},{transform:"scale(1.35)",backgroundColor:"#facc15",boxShadow:"0 0 0 4px #facc15",offset:.18},{transform:"scale(1)",backgroundColor:"#facc15",boxShadow:"0 0 0 2px #facc15",offset:.5},{transform:"scale(1)",backgroundColor:"transparent",boxShadow:"0 0 0 0 transparent",offset:1}],{duration:1500,easing:"ease-out"})},{defer:!0})),(()=>{var n=Bt(),r=t;return typeof r=="function"?_e(r,n):t=n,d(n,()=>e.children??e.value),n})()};async function Dt(e,t,n){const r=`/admin/api/${encodeURIComponent(e)}/backend/${encodeURIComponent(t)}/${n}`,s=await fetch(r,{method:"POST",credentials:"same-origin"});if(!s.ok){const l=(await s.text()).trim();throw new Error(l||`${s.status} ${s.statusText}`)}return await s.json()}var It=h("<p class=kebab-error>"),Mt=h("<div class=kebab-menu role=menu>"),Ft=h('<div class=kebab-wrap><button type=button class=kebab-btn aria-haspopup=menu title="backend actions">⋮'),Rt=h("<button type=button class=kebab-item role=menuitem>");function Ut(e){switch(e){case"up":case"down":case"unknown":return[{label:"pause",action:"pause"},{label:"disable",action:"disable"}];case"paused":return[{label:"resume",action:"resume"},{label:"disable",action:"disable"}];case"disabled":return[{label:"enable",action:"enable"}];default:return[]}}const Vt=e=>{const[t,n]=_(!1),[r,s]=_(),[l,i]=_();let o;const a=()=>Ut(e.state);Y(()=>{if(!t())return;const u=b=>{o&&(o.contains(b.target)||n(!1))},c=b=>{b.key==="Escape"&&n(!1)};document.addEventListener("mousedown",u),document.addEventListener("keydown",c),Pe(()=>{document.removeEventListener("mousedown",u),document.removeEventListener("keydown",c)})});const f=async u=>{s(u),i(void 0);try{await Dt(e.maglevd,e.backend,u),n(!1)}catch(c){i(`${c}`)}finally{s(void 0)}};return g(E,{get when(){return a().length>0},get children(){var u=Ft(),c=u.firstChild,b=o;return typeof b=="function"?_e(b,u):o=u,c.$$click=p=>{p.stopPropagation(),n($=>!$)},d(u,g(E,{get when(){return t()},get children(){var p=Mt();return d(p,g(V,{get each(){return a()},children:$=>(()=>{var m=Rt();return m.$$click=()=>f($.action),d(m,(()=>{var C=B(()=>r()===$.action);return()=>C()?`${$.label}…`:$.label})()),S(()=>m.disabled=r()!==void 0),m})()}),null),d(p,g(E,{get when(){return l()},get children(){var $=It();return d($,l),$}}),null),p}}),null),S(()=>P(c,"aria-expanded",t())),u}})};we(["click"]);const j=window.location.pathname.startsWith("/admin");var Wt=h("<td class=actions>"),Kt=h("<tr class=backend-row><td class=backend-name></td><td class=backend-address></td><td></td><td class=numeric></td><td class=numeric></td><td class=age>"),Ht=h("<span class=tag>[disabled]");const qt=e=>{const t=()=>e.backend;return(()=>{var n=Kt(),r=n.firstChild,s=r.nextSibling,l=s.nextSibling,i=l.nextSibling,o=i.nextSibling,a=o.nextSibling;return d(r,g(jt,{get maglevd(){return e.maglevd},get backend(){return t().name}}),null),d(r,()=>t().name,null),d(r,(()=>{var f=B(()=>!t().enabled);return()=>f()&&Ht()})(),null),d(s,()=>t().address),d(l,g(X,{get value(){return t().state},get children(){return g(He,{get state(){return t().state}})}})),d(i,g(X,{get value(){return e.poolBackend.weight}})),d(o,g(X,{get value(){return e.poolBackend.effective_weight}})),d(a,()=>St(t().last_transition)),d(n,g(E,{when:j,get children(){var f=Wt();return d(f,g(Vt,{get maglevd(){return e.maglevd},get backend(){return t().name},get state(){return t().state}})),f}}),null),S(()=>P(n,"data-state",t().state)),n})()};var Gt=h("<section class=frontend-card><header class=frontend-header><h2></h2><div class=frontend-meta><span class=addr>:</span><span class=proto>"),Jt=h("<span class=tag>sticky"),Xt=h("<p class=frontend-desc>"),zt=h("<th class=actions>"),Qt=h("<div class=pool-block><h3 class=pool-name>pool: </h3><table class=backend-table><thead><tr><th>backend</th><th>address</th><th>state</th><th class=numeric>weight</th><th class=numeric>effective</th><th>last transition</th></tr></thead><tbody>");const Yt=e=>{const t=()=>Object.fromEntries(e.snap.backends.map(r=>[r.name,r])),n=()=>e.frontend;return(()=>{var r=Gt(),s=r.firstChild,l=s.firstChild,i=l.nextSibling,o=i.firstChild,a=o.firstChild,f=o.nextSibling;return d(l,()=>n().name,null),d(l,g(X,{get value(){return n().state??"unknown"},get children(){return g(He,{get state(){return n().state??"unknown"}})}}),null),d(o,()=>n().address,a),d(o,()=>n().port,null),d(f,()=>n().protocol.toUpperCase()),d(i,(()=>{var u=B(()=>!!n().src_ip_sticky);return()=>u()&&Jt()})(),null),d(s,(()=>{var u=B(()=>!!n().description);return()=>u()&&(()=>{var c=Xt();return d(c,()=>n().description),c})()})(),null),d(r,g(V,{get each(){return n().pools},children:u=>(()=>{var c=Qt(),b=c.firstChild;b.firstChild;var p=b.nextSibling,$=p.firstChild,m=$.firstChild,C=m.firstChild,M=C.nextSibling,k=M.nextSibling,A=k.nextSibling,x=A.nextSibling;x.nextSibling;var T=$.nextSibling;return d(b,()=>u.name,null),d(m,g(E,{when:j,get children(){return zt()}}),null),d(T,g(V,{get each(){return u.backends},children:te=>{const Se=t()[te.name];return Se?g(qt,{get maglevd(){return e.snap.maglevd.name},backend:Se,poolBackend:te}):null}})),c})()}),null),r})()};var Zt=h("<details class=zippy><summary></summary><div class=zippy-body>");const qe=e=>(()=>{var t=Zt(),n=t.firstChild,r=n.nextSibling;return d(n,()=>e.title),d(r,()=>e.children),S(()=>t.open=e.open),t})();var en=h("<span class=vpp-badge>"),tn=h("<span class=zippy-title>VPP"),nn=h("<p class=empty>No VPP information available."),rn=h("<dl class=kv><dt>version</dt><dd></dd><dt>build date</dt><dd></dd><dt>pid</dt><dd></dd><dt>booted</dt><dd></dd><dt>connected</dt><dd>");const sn=e=>{const t=()=>e.info?.boottime_ns?new Date(e.info.boottime_ns/1e6).toISOString():"",n=()=>e.info?.connecttime_ns?new Date(e.info.connecttime_ns/1e6).toISOString():"",r=()=>e.state==="connected"?"connected":"disconnected",s=(()=>{var l=tn();return l.firstChild,d(l,g(X,{get value(){return r()},get children(){var i=en();return d(i,r),S(()=>P(i,"data-state",r())),i}}),null),l})();return g(qe,{title:s,get children(){return g(E,{get when(){return e.info},get fallback(){return nn()},children:l=>(()=>{var i=rn(),o=i.firstChild,a=o.nextSibling,f=a.nextSibling,u=f.nextSibling,c=u.nextSibling,b=c.nextSibling,p=b.nextSibling,$=p.nextSibling,m=$.nextSibling,C=m.nextSibling;return d(a,()=>l().version),d(u,()=>l().build_date),d(b,()=>l().pid),d($,t),d(C,n),i})()})}})};var ln=h("<main class=overview>"),on=h("<p class=empty>No maglevd selected."),an=h('<div class="banner warn"> disconnected'),cn=h("<div class=frontend-grid>");const un=()=>{const e=()=>{const t=ge();return t?fe.byName[t]:void 0};return(()=>{var t=ln();return d(t,g(E,{get when(){return e()},get fallback(){return on()},children:n=>[g(E,{get when(){return!n().maglevd.connected},get children(){var r=an(),s=r.firstChild;return d(r,()=>n().maglevd.name,s),d(r,(()=>{var l=B(()=>!!n().maglevd.last_error);return()=>l()&&`: ${n().maglevd.last_error}`})(),null),r}}),(()=>{var r=cn();return d(r,g(V,{get each(){return n().frontends},children:s=>g(Yt,{get snap(){return n()},frontend:s})})),r})(),g(sn,{get info(){return n().vpp_info},get state(){return n().vpp_state}})]})),t})()};var fn=h("<ol class=event-tail>"),dn=h("<div class=debug-toolbar><label><input type=checkbox>all maglevds</label><button></button><span class=count> events"),gn=h("<li>");const hn=()=>{const[e,t]=_(!1),[n,r]=_(!1),[s,l]=_([]),i=R(()=>{const f=n()?s():ye();if(e())return f;const u=ge();return u?f.filter(c=>c.maglevd===u):f}),o=()=>{n()?r(!1):(l([...ye()]),r(!0))};let a;return Y(()=>{i(),!n()&&a&&(a.scrollTop=a.scrollHeight)}),g(qe,{title:"Event stream",get children(){return[(()=>{var f=fn(),u=a;return typeof u=="function"?_e(u,f):a=f,d(f,g(V,{get each(){return i()},children:c=>(()=>{var b=gn();return d(b,()=>$n(c)),S(p=>{var $=`event-row event-${c.type}`,m=!!bn(c);return $!==p.e&&ct(b,p.e=$),m!==p.t&&b.classList.toggle("event-sync",p.t=m),p},{e:void 0,t:void 0}),b})()})),f})(),(()=>{var f=dn(),u=f.firstChild,c=u.firstChild,b=u.nextSibling,p=b.nextSibling,$=p.firstChild;return c.addEventListener("change",m=>t(m.currentTarget.checked)),b.$$click=o,d(b,()=>n()?"resume":"pause"),d(p,()=>i().length,$),S(()=>c.checked=e()),f})()]}})};function bn(e){return e.type!=="log"?!1:e.payload.msg.startsWith("vpp-lb-sync-")}function pn(e){if(!e)return"";const t=["vip","protocol","port","address","weight","from","to","encap","src-ip-sticky","flush"],n=[],r=new Set;for(const s of t)s in e&&(n.push(`${s}=${e[s]}`),r.add(s));for(const[s,l]of Object.entries(e))r.has(s)||n.push(`${s}=${l}`);return n.join(" ")}function $n(e){const t=new Date(e.at_unix_ns/1e6).toISOString().substring(11,23),n=`[${e.maglevd}]`;switch(e.type){case"backend":{const r=e.payload;return`${t} ${n} backend ${r.backend}: ${r.transition.from} → ${r.transition.to}`}case"frontend":{const r=e.payload;return`${t} ${n} frontend ${r.frontend}: ${r.transition.from} → ${r.transition.to}`}case"log":{const r=e.payload;if(r.msg.startsWith("vpp-lb-sync-"))return`${t} ${n} ${r.msg} ${pn(r.attrs)}`.trimEnd();const s=r.attrs?Object.entries(r.attrs).map(([l,i])=>`${l}=${i}`).join(" "):"";return`${t} ${n} ${r.level} ${r.msg} ${s}`.trimEnd()}case"maglevd-status":return`${t} ${n} maglevd status: ${JSON.stringify(e.payload)}`;default:return`${t} ${n} ${e.type}`}}we(["click"]);const mn="/view/assets/logo-bimi-Bguc6E_L.svg";var yn=h("<span class=mode-tag>"),vn=h("<a class=admin-toggle>"),wn=h('<div class=app><header class=app-header><div class=brand><a class=brand-logo href=https://git.ipng.ch/ipng/vpp-maglev/ target=_blank rel=noopener title="vpp-maglev on git.ipng.ch"><img alt=IPng></a><strong>maglev'),_n=h("<span class=version> (<!>)"),Sn=h('<div class="banner err">'),kn=h("<p class=loading>Loading…");const An=()=>{const[e,t]=_(),[n,r]=_();Ze(async()=>{try{const[l,i]=await Promise.all([Ie(),ft()]);We(l),r(i),!ge()&&l.length>0&&Ke(l[0].maglevd.name),xt()}catch(l){t(`${l}`)}});const s=()=>n()?.admin_enabled===!0;return(()=>{var l=wn(),i=l.firstChild,o=i.firstChild,a=o.firstChild,f=a.firstChild;return a.nextSibling,P(f,"src",mn),d(o,(()=>{var u=B(()=>!!n());return()=>u()&&(()=>{var c=_n(),b=c.firstChild,p=b.nextSibling;return p.nextSibling,d(c,()=>n().version,b),d(c,()=>n().commit,p),S(()=>P(c,"title",`commit ${n().commit} · built ${n().date}`)),c})()})(),null),d(i,g(Nt,{}),null),d(i,g(E,{get when(){return j||s()},get children(){var u=yn();return d(u,j?"admin":"view"),u}}),null),d(i,g(E,{get when(){return s()},get children(){var u=vn();return P(u,"href",j?"/view/":"/admin/"),P(u,"title",j?"exit admin mode":"enter admin mode"),d(u,j?"exit admin":"admin…"),u}}),null),d(l,(()=>{var u=B(()=>!!e());return()=>u()&&(()=>{var c=Sn();return d(c,e),c})()})(),null),d(l,(()=>{var u=B(()=>!e()&&Object.keys(fe.byName).length===0);return()=>u()&&kn()})(),null),d(l,g(un,{}),null),d(l,g(E,{when:j,get children(){return g(hn,{})}}),null),l})()},Ge=document.getElementById("root");if(!Ge)throw new Error("no #root element");at(()=>g(An,{}),Ge);
diff --git a/cmd/frontend/web/dist/assets/index-CrBeXDdb.css b/cmd/frontend/web/dist/assets/index-CrBeXDdb.css
new file mode 100644
index 0000000..fb631e1
--- /dev/null
+++ b/cmd/frontend/web/dist/assets/index-CrBeXDdb.css
@@ -0,0 +1 @@
+*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.4;color:var(--fg);background:var(--bg)}h1,h2,h3,h4,p,dl,dd,ol,ul{margin:0;padding:0}ol,ul{list-style:none}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:1px solid var(--border);border-radius:4px;padding:4px 8px;cursor:pointer}button:hover{background:var(--bg-soft)}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:4px 8px}code,pre,.mono{font-family:SF Mono,Menlo,Consolas,monospace}:root{--bg: #fafafa;--bg-soft: #f0f0f0;--bg-card: #ffffff;--fg: #1f2937;--fg-muted: #6b7280;--border: #e5e7eb;--accent: #2563eb;--state-up: #16a34a;--state-down: #dc2626;--state-paused: #2563eb;--state-disabled: #6b7280;--state-unknown: #eab308;--state-removed: #374151}.flash-target{display:inline-block;padding:0 4px;border-radius:3px;transform-origin:center center;will-change:transform,background-color,box-shadow}.backend-row td{overflow:visible}.app{max-width:1400px;margin:0 auto;padding:16px}.app-header{display:flex;align-items:center;gap:16px;padding:4px 0;border-bottom:1px solid var(--border);margin-bottom:16px}.brand{display:flex;align-items:center;gap:8px}.brand strong{font-size:18px}.brand-logo{display:inline-flex;align-items:center}.brand-logo img{height:56px;width:56px;display:block}.brand-logo:hover img{opacity:.8}.app-header .mode-tag{margin-left:auto;padding:2px 6px;border-radius:3px;background:var(--bg-soft);color:var(--fg-muted);font-size:11px;text-transform:uppercase}.brand .version{margin-left:8px;color:var(--fg-muted);font-family:SF Mono,Menlo,Consolas,monospace;font-size:11px;cursor:help}.admin-toggle{padding:4px 10px;border:1px solid var(--border);border-radius:4px;color:var(--accent)}.scope-selector{display:flex;gap:6px;flex-wrap:wrap}.scope-tab{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px}.scope-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}.scope-tab .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--state-down)}.scope-tab.connected .dot{background:var(--state-up)}.status-badge{display:inline-block;padding:2px 10px;border-radius:10px;font-size:12px;font-weight:500;color:#fff;text-transform:capitalize}.status-badge[data-state=up]{background:var(--state-up)}.status-badge[data-state=down]{background:var(--state-down)}.status-badge[data-state=paused]{background:var(--state-paused)}.status-badge[data-state=disabled]{background:var(--state-disabled)}.status-badge[data-state=unknown]{background:var(--state-unknown);color:#1f2937}.status-badge[data-state=removed]{background:var(--state-removed);text-decoration:line-through}.frontend-grid{display:grid;gap:16px;grid-template-columns:1fr}@media (min-width: 640px){.frontend-grid{grid-template-columns:1fr 1fr}}@media (min-width: 1024px){.frontend-grid{grid-template-columns:repeat(3,1fr)}}.frontend-card{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:12px}.frontend-header h2{font-size:16px;margin-bottom:4px;display:flex;align-items:center;gap:8px}.frontend-meta{display:flex;gap:8px;color:var(--fg-muted);font-size:12px}.frontend-meta .proto{text-transform:uppercase;font-weight:600}.frontend-desc{font-size:12px;color:var(--fg-muted);margin-top:4px}.tag{display:inline-block;padding:1px 6px;border-radius:3px;background:var(--bg-soft);color:var(--fg-muted);font-size:11px;margin-left:4px}.pool-block{margin-top:12px}.pool-name{font-size:13px;color:var(--fg-muted);margin-bottom:4px}.backend-table th,.backend-table td{white-space:nowrap}.backend-table th{font-size:11px;color:var(--fg-muted);text-transform:uppercase;border-bottom:1px solid var(--border)}.backend-table .numeric{text-align:right}.backend-row td{border-bottom:1px solid var(--border);font-size:13px}.backend-row .backend-name{font-weight:500}.backend-row .backend-address,.backend-row .age{color:var(--fg-muted);font-family:SF Mono,Menlo,Consolas,monospace;font-size:12px}.backend-table th.actions,.backend-row td.actions{width:24px;padding:0 4px;text-align:center}.kebab-wrap{position:relative;display:inline-block}.kebab-btn{width:20px;height:20px;padding:0;line-height:1;font-size:16px;color:var(--fg-muted);border:1px solid transparent;background:transparent;cursor:pointer;border-radius:3px}.kebab-btn:hover,.kebab-btn[aria-expanded=true]{color:var(--fg);background:var(--bg-soft);border-color:var(--border)}.kebab-menu{position:absolute;top:22px;right:0;z-index:20;min-width:120px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;box-shadow:0 4px 12px #0000001f;padding:4px 0}.kebab-item{display:block;width:100%;padding:6px 12px;border:none;background:transparent;text-align:left;cursor:pointer;font-size:13px;color:var(--fg)}.kebab-item:hover{background:var(--bg-soft)}.kebab-item:disabled{color:var(--fg-muted);cursor:wait}.kebab-error{padding:4px 12px 8px;color:var(--state-down);font-size:11px;font-family:SF Mono,Menlo,Consolas,monospace;max-width:260px;white-space:normal}.probe-heartbeat{display:inline-block;width:16px;height:14px;line-height:14px;margin-right:6px;text-align:center;font-size:10px;color:var(--state-disabled);overflow:hidden;vertical-align:middle}.probe-heartbeat.in-flight{color:inherit}.banner{padding:8px 12px;border-radius:4px;margin-bottom:12px;font-size:13px}.banner.warn{background:#fef3c7;color:#92400e}.banner.err{background:#fee2e2;color:#991b1b}.loading,.empty{color:var(--fg-muted);padding:16px}.zippy{margin-top:16px;border:1px solid var(--border);border-radius:6px;background:var(--bg-card)}.zippy summary{padding:8px 12px;cursor:pointer;font-weight:500}.zippy-body{padding:8px 12px;border-top:1px solid var(--border)}.zippy-title{display:inline-flex;align-items:center;gap:10px}.vpp-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500;text-transform:lowercase;color:#fff}.vpp-badge[data-state=connected]{background:var(--state-up)}.vpp-badge[data-state=disconnected]{background:var(--state-down)}.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px}.kv dt{color:var(--fg-muted)}.debug-toolbar{display:flex;gap:12px;align-items:center;margin-top:8px;font-size:12px}.debug-toolbar .count{margin-left:auto;color:var(--fg-muted)}.event-tail{max-height:320px;overflow:auto;font-family:SF Mono,Menlo,Consolas,monospace;font-size:11px;line-height:1.5}.event-row{padding:2px 4px;white-space:pre-wrap;word-break:break-all}.event-row.event-backend{color:var(--state-up)}.event-row.event-frontend{color:var(--accent)}.event-row.event-log{color:var(--fg-muted)}.event-row.event-maglevd-status{color:var(--state-down)}.event-row.event-sync{color:var(--state-paused);font-weight:500}
diff --git a/cmd/frontend/web/dist/assets/index-DZzDfClm.js b/cmd/frontend/web/dist/assets/index-DZzDfClm.js
deleted file mode 100644
index 5a269ad..0000000
--- a/cmd/frontend/web/dist/assets/index-DZzDfClm.js
+++ /dev/null
@@ -1 +0,0 @@
-(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))r(s);new MutationObserver(s=>{for(const l of s)if(l.type==="childList")for(const i of l.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&r(i)}).observe(document,{childList:!0,subtree:!0});function n(s){const l={};return s.integrity&&(l.integrity=s.integrity),s.referrerPolicy&&(l.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?l.credentials="include":s.crossOrigin==="anonymous"?l.credentials="omit":l.credentials="same-origin",l}function r(s){if(s.ep)return;s.ep=!0;const l=n(s);fetch(s.href,l)}})();const He=!1,qe=(e,t)=>e===t,L=Symbol("solid-proxy"),he=Symbol("solid-track"),Q={equals:qe};let Ae=Ee;const N=1,Y=2,ke={owned:null,cleanups:null,context:null,owner:null};var m=null;let fe=null,Ge=null,b=null,v=null,E=null,ie=0;function z(e,t){const n=b,r=m,s=e.length===0,l=t===void 0?r:t,i=s?ke:{owned:null,cleanups:null,context:l?l.context:null,owner:l},o=s?e:()=>e(()=>C(()=>H(i)));m=i,b=null;try{return V(o,!0)}finally{b=n,m=r}}function k(e,t){t=t?Object.assign({},Q,t):Q;const n={value:e,observers:null,observerSlots:null,comparator:t.equals||void 0},r=s=>(typeof s=="function"&&(s=s(n.value)),Oe(n,s));return[xe.bind(n),r]}function _(e,t,n){const r=$e(e,t,!1,N);J(r)}function oe(e,t,n){Ae=et;const r=$e(e,t,!1,N);r.user=!0,E?E.push(r):J(r)}function I(e,t,n){n=n?Object.assign({},Q,n):Q;const r=$e(e,t,!0,0);return r.observers=null,r.observerSlots=null,r.comparator=n.equals||void 0,J(r),xe.bind(r)}function Je(e){return V(e,!1)}function C(e){if(b===null)return e();const t=b;b=null;try{return e()}finally{b=t}}function Xe(e,t,n){const r=Array.isArray(e);let s,l=n&&n.defer;return i=>{let o;if(r){o=Array(e.length);for(let f=0;f<e.length;f++)o[f]=e[f]()}else o=e();if(l)return l=!1,i;const a=C(()=>t(o,s,i));return s=o,a}}function ze(e){oe(()=>C(e))}function Qe(e){return m===null||(m.cleanups===null?m.cleanups=[e]:m.cleanups.push(e)),e}function ge(){return b}function xe(){if(this.sources&&this.state)if(this.state===N)J(this);else{const e=v;v=null,V(()=>ee(this),!1),v=e}if(b){const e=this.observers?this.observers.length:0;b.sources?(b.sources.push(this),b.sourceSlots.push(e)):(b.sources=[this],b.sourceSlots=[e]),this.observers?(this.observers.push(b),this.observerSlots.push(b.sources.length-1)):(this.observers=[b],this.observerSlots=[b.sources.length-1])}return this.value}function Oe(e,t,n){let r=e.value;return(!e.comparator||!e.comparator(r,t))&&(e.value=t,e.observers&&e.observers.length&&V(()=>{for(let s=0;s<e.observers.length;s+=1){const l=e.observers[s],i=fe&&fe.running;i&&fe.disposed.has(l),(i?!l.tState:!l.state)&&(l.pure?v.push(l):E.push(l),l.observers&&Ce(l)),i||(l.state=N)}if(v.length>1e6)throw v=[],new Error},!1)),t}function J(e){if(!e.fn)return;H(e);const t=ie;Ye(e,e.value,t)}function Ye(e,t,n){let r;const s=m,l=b;b=m=e;try{r=e.fn(t)}catch(i){return e.pure&&(e.state=N,e.owned&&e.owned.forEach(H),e.owned=null),e.updatedAt=n+1,Ne(i)}finally{b=l,m=s}(!e.updatedAt||e.updatedAt<=n)&&(e.updatedAt!=null&&"observers"in e?Oe(e,r):e.value=r,e.updatedAt=n)}function $e(e,t,n,r=N,s){const l={fn:e,state:r,updatedAt:null,owned:null,sources:null,sourceSlots:null,cleanups:null,value:t,owner:m,context:m?m.context:null,pure:n};return m===null||m!==ke&&(m.owned?m.owned.push(l):m.owned=[l]),l}function Z(e){if(e.state===0)return;if(e.state===Y)return ee(e);if(e.suspense&&C(e.suspense.inFallback))return e.suspense.effects.push(e);const t=[e];for(;(e=e.owner)&&(!e.updatedAt||e.updatedAt<ie);)e.state&&t.push(e);for(let n=t.length-1;n>=0;n--)if(e=t[n],e.state===N)J(e);else if(e.state===Y){const r=v;v=null,V(()=>ee(e,t[0]),!1),v=r}}function V(e,t){if(v)return e();let n=!1;t||(v=[]),E?n=!0:E=[],ie++;try{const r=e();return Ze(n),r}catch(r){n||(E=null),v=null,Ne(r)}}function Ze(e){if(v&&(Ee(v),v=null),e)return;const t=E;E=null,t.length&&V(()=>Ae(t),!1)}function Ee(e){for(let t=0;t<e.length;t++)Z(e[t])}function et(e){let t,n=0;for(t=0;t<e.length;t++){const r=e[t];r.user?e[n++]=r:Z(r)}for(t=0;t<n;t++)Z(e[t])}function ee(e,t){e.state=0;for(let n=0;n<e.sources.length;n+=1){const r=e.sources[n];if(r.sources){const s=r.state;s===N?r!==t&&(!r.updatedAt||r.updatedAt<ie)&&Z(r):s===Y&&ee(r,t)}}}function Ce(e){for(let t=0;t<e.observers.length;t+=1){const n=e.observers[t];n.state||(n.state=Y,n.pure?v.push(n):E.push(n),n.observers&&Ce(n))}}function H(e){let t;if(e.sources)for(;e.sources.length;){const n=e.sources.pop(),r=e.sourceSlots.pop(),s=n.observers;if(s&&s.length){const l=s.pop(),i=n.observerSlots.pop();r<s.length&&(l.sourceSlots[i]=r,s[r]=l,n.observerSlots[r]=i)}}if(e.tOwned){for(t=e.tOwned.length-1;t>=0;t--)H(e.tOwned[t]);delete e.tOwned}if(e.owned){for(t=e.owned.length-1;t>=0;t--)H(e.owned[t]);e.owned=null}if(e.cleanups){for(t=e.cleanups.length-1;t>=0;t--)e.cleanups[t]();e.cleanups=null}e.state=0}function tt(e){return e instanceof Error?e:new Error(typeof e=="string"?e:"Unknown error",{cause:e})}function Ne(e,t=m){throw tt(e)}const nt=Symbol("fallback");function ye(e){for(let t=0;t<e.length;t++)e[t]()}function rt(e,t,n={}){let r=[],s=[],l=[],i=0,o=t.length>1?[]:null;return Qe(()=>ye(l)),()=>{let a=e()||[],f=a.length,u,c;return a[he],C(()=>{let p,y,w,P,T,S,A,x,D;if(f===0)i!==0&&(ye(l),l=[],r=[],s=[],i=0,o&&(o=[])),n.fallback&&(r=[nt],s[0]=z(Ke=>(l[0]=Ke,n.fallback())),i=1);else if(i===0){for(s=new Array(f),c=0;c<f;c++)r[c]=a[c],s[c]=z(h);i=f}else{for(w=new Array(f),P=new Array(f),o&&(T=new Array(f)),S=0,A=Math.min(i,f);S<A&&r[S]===a[S];S++);for(A=i-1,x=f-1;A>=S&&x>=S&&r[A]===a[x];A--,x--)w[x]=s[A],P[x]=l[A],o&&(T[x]=o[A]);for(p=new Map,y=new Array(x+1),c=x;c>=S;c--)D=a[c],u=p.get(D),y[c]=u===void 0?-1:u,p.set(D,c);for(u=S;u<=A;u++)D=r[u],c=p.get(D),c!==void 0&&c!==-1?(w[c]=s[u],P[c]=l[u],o&&(T[c]=o[u]),c=y[c],p.set(D,c)):l[u]();for(c=S;c<f;c++)c in w?(s[c]=w[c],l[c]=P[c],o&&(o[c]=T[c],o[c](c))):s[c]=z(h);s=s.slice(0,i=f),r=a.slice(0)}return s});function h(p){if(l[c]=p,o){const[y,w]=k(c);return o[c]=w,t(a[c],y)}return t(a[c])}}}function $(e,t){return C(()=>e(t||{}))}const st=e=>`Stale read from <${e}>.`;function q(e){const t="fallback"in e&&{fallback:()=>e.fallback};return I(rt(()=>e.each,e.children,t||void 0))}function ve(e){const t=e.keyed,n=I(()=>e.when,void 0,void 0),r=t?n:I(n,void 0,{equals:(s,l)=>!s==!l});return I(()=>{const s=r();if(s){const l=e.children;return typeof l=="function"&&l.length>0?C(()=>l(t?s:()=>{if(!C(r))throw st("Show");return n()})):l}return e.fallback},void 0,void 0)}const j=e=>I(()=>e());function lt(e,t,n){let r=n.length,s=t.length,l=r,i=0,o=0,a=t[s-1].nextSibling,f=null;for(;i<s||o<l;){if(t[i]===n[o]){i++,o++;continue}for(;t[s-1]===n[l-1];)s--,l--;if(s===i){const u=l<r?o?n[o-1].nextSibling:n[l-o]:a;for(;o<l;)e.insertBefore(n[o++],u)}else if(l===o)for(;i<s;)(!f||!f.has(t[i]))&&t[i].remove(),i++;else if(t[i]===n[l-1]&&n[o]===t[s-1]){const u=t[--s].nextSibling;e.insertBefore(n[o++],t[i++].nextSibling),e.insertBefore(n[--l],u),t[s]=n[l]}else{if(!f){f=new Map;let c=o;for(;c<l;)f.set(n[c],c++)}const u=f.get(t[i]);if(u!=null)if(o<u&&u<l){let c=i,h=1,p;for(;++c<s&&c<l&&!((p=f.get(t[c]))==null||p!==u+h);)h++;if(h>u-o){const y=t[i];for(;o<u;)e.insertBefore(n[o++],y)}else e.replaceChild(n[o++],t[i++])}else i++;else t[i++].remove()}}}const we="_$DX_DELEGATE";function it(e,t,n,r={}){let s;return z(l=>{s=l,t===document?e():d(t,e(),t.firstChild?null:void 0,n)},r.owner),()=>{s(),t.textContent=""}}function g(e,t,n,r){let s;const l=()=>{const o=document.createElement("template");return o.innerHTML=e,o.content.firstChild},i=()=>(s||(s=l())).cloneNode(!0);return i.cloneNode=i,i}function Pe(e,t=window.document){const n=t[we]||(t[we]=new Set);for(let r=0,s=e.length;r<s;r++){const l=e[r];n.has(l)||(n.add(l),t.addEventListener(l,at))}}function M(e,t,n){n==null?e.removeAttribute(t):e.setAttribute(t,n)}function ot(e,t){t==null?e.removeAttribute("class"):e.className=t}function Te(e,t,n){return C(()=>e(t,n))}function d(e,t,n,r){if(n!==void 0&&!r&&(r=[]),typeof t!="function")return te(e,t,r,n);_(s=>te(e,t(),s,n),r)}function at(e){let t=e.target;const n=`$$${e.type}`,r=e.target,s=e.currentTarget,l=a=>Object.defineProperty(e,"target",{configurable:!0,value:a}),i=()=>{const a=t[n];if(a&&!t.disabled){const f=t[`${n}Data`];if(f!==void 0?a.call(t,f,e):a.call(t,e),e.cancelBubble)return}return t.host&&typeof t.host!="string"&&!t.host._$host&&t.contains(e.target)&&l(t.host),!0},o=()=>{for(;i()&&(t=t._$host||t.parentNode||t.host););};if(Object.defineProperty(e,"currentTarget",{configurable:!0,get(){return t||document}}),e.composedPath){const a=e.composedPath();l(a[0]);for(let f=0;f<a.length-2&&(t=a[f],!!i());f++){if(t._$host){t=t._$host,o();break}if(t.parentNode===s)break}}else o();l(r)}function te(e,t,n,r,s){for(;typeof n=="function";)n=n();if(t===n)return n;const l=typeof t,i=r!==void 0;if(e=i&&n[0]&&n[0].parentNode||e,l==="string"||l==="number"){if(l==="number"&&(t=t.toString(),t===n))return n;if(i){let o=n[0];o&&o.nodeType===3?o.data!==t&&(o.data=t):o=document.createTextNode(t),n=B(e,n,r,o)}else n!==""&&typeof n=="string"?n=e.firstChild.data=t:n=e.textContent=t}else if(t==null||l==="boolean")n=B(e,n,r);else{if(l==="function")return _(()=>{let o=t();for(;typeof o=="function";)o=o();n=te(e,o,n,r)}),()=>n;if(Array.isArray(t)){const o=[],a=n&&Array.isArray(n);if(pe(o,t,n,s))return _(()=>n=te(e,o,n,r,!0)),()=>n;if(o.length===0){if(n=B(e,n,r),i)return n}else a?n.length===0?_e(e,o,r):lt(e,n,o):(n&&B(e),_e(e,o));n=o}else if(t.nodeType){if(Array.isArray(n)){if(i)return n=B(e,n,r,t);B(e,n,null,t)}else n==null||n===""||!e.firstChild?e.appendChild(t):e.replaceChild(t,e.firstChild);n=t}}return n}function pe(e,t,n,r){let s=!1;for(let l=0,i=t.length;l<i;l++){let o=t[l],a=n&&n[e.length],f;if(!(o==null||o===!0||o===!1))if((f=typeof o)=="object"&&o.nodeType)e.push(o);else if(Array.isArray(o))s=pe(e,o,a)||s;else if(f==="function")if(r){for(;typeof o=="function";)o=o();s=pe(e,Array.isArray(o)?o:[o],Array.isArray(a)?a:[a])||s}else e.push(o),s=!0;else{const u=String(o);a&&a.nodeType===3&&a.data===u?e.push(a):e.push(document.createTextNode(u))}}return s}function _e(e,t,n=null){for(let r=0,s=t.length;r<s;r++)e.insertBefore(t[r],n)}function B(e,t,n,r){if(n===void 0)return e.textContent="";const s=r||document.createTextNode("");if(t.length){let l=!1;for(let i=t.length-1;i>=0;i--){const o=t[i];if(s!==o){const a=o.parentNode===e;!l&&!i?a?e.replaceChild(s,o):e.insertBefore(s,n):a&&o.remove()}else l=!0}}else e.insertBefore(s,n);return[s]}async function je(e){const t=await fetch(e,{credentials:"same-origin"});if(!t.ok)throw new Error(`${e}: ${t.status} ${t.statusText}`);return await t.json()}function Le(){return je("/view/api/state")}function ct(){return je("/view/api/version")}const ne=Symbol("store-raw"),F=Symbol("store-node"),O=Symbol("store-has"),De=Symbol("store-self");function Be(e){let t=e[L];if(!t&&(Object.defineProperty(e,L,{value:t=new Proxy(e,dt)}),!Array.isArray(e))){const n=Object.keys(e),r=Object.getOwnPropertyDescriptors(e);for(let s=0,l=n.length;s<l;s++){const i=n[s];r[i].get&&Object.defineProperty(e,i,{enumerable:r[i].enumerable,get:r[i].get.bind(t)})}}return t}function R(e){let t;return e!=null&&typeof e=="object"&&(e[L]||!(t=Object.getPrototypeOf(e))||t===Object.prototype||Array.isArray(e))}function U(e,t=new Set){let n,r,s,l;if(n=e!=null&&e[ne])return n;if(!R(e)||t.has(e))return e;if(Array.isArray(e)){Object.isFrozen(e)?e=e.slice(0):t.add(e);for(let i=0,o=e.length;i<o;i++)s=e[i],(r=U(s,t))!==s&&(e[i]=r)}else{Object.isFrozen(e)?e=Object.assign({},e):t.add(e);const i=Object.keys(e),o=Object.getOwnPropertyDescriptors(e);for(let a=0,f=i.length;a<f;a++)l=i[a],!o[l].get&&(s=e[l],(r=U(s,t))!==s&&(e[l]=r))}return e}function re(e,t){let n=e[t];return n||Object.defineProperty(e,t,{value:n=Object.create(null)}),n}function G(e,t,n){if(e[t])return e[t];const[r,s]=k(n,{equals:!1,internal:!0});return r.$=s,e[t]=r}function ft(e,t){const n=Reflect.getOwnPropertyDescriptor(e,t);return!n||n.get||!n.configurable||t===L||t===F||(delete n.value,delete n.writable,n.get=()=>e[L][t]),n}function Ie(e){ge()&&G(re(e,F),De)()}function ut(e){return Ie(e),Reflect.ownKeys(e)}const dt={get(e,t,n){if(t===ne)return e;if(t===L)return n;if(t===he)return Ie(e),n;const r=re(e,F),s=r[t];let l=s?s():e[t];if(t===F||t===O||t==="__proto__")return l;if(!s){const i=Object.getOwnPropertyDescriptor(e,t);ge()&&(typeof l!="function"||e.hasOwnProperty(t))&&!(i&&i.get)&&(l=G(r,t,l)())}return R(l)?Be(l):l},has(e,t){return t===ne||t===L||t===he||t===F||t===O||t==="__proto__"?!0:(ge()&&G(re(e,O),t)(),t in e)},set(){return!0},deleteProperty(){return!0},ownKeys:ut,getOwnPropertyDescriptor:ft};function W(e,t,n,r=!1){if(!r&&e[t]===n)return;const s=e[t],l=e.length;n===void 0?(delete e[t],e[O]&&e[O][t]&&s!==void 0&&e[O][t].$()):(e[t]=n,e[O]&&e[O][t]&&s===void 0&&e[O][t].$());let i=re(e,F),o;if((o=G(i,t,s))&&o.$(()=>n),Array.isArray(e)&&e.length!==l){for(let a=e.length;a<l;a++)(o=i[a])&&o.$();(o=G(i,"length",l))&&o.$(e.length)}(o=i[De])&&o.$()}function Me(e,t){const n=Object.keys(t);for(let r=0;r<n.length;r+=1){const s=n[r];W(e,s,t[s])}}function ht(e,t){if(typeof t=="function"&&(t=t(e)),t=U(t),Array.isArray(t)){if(e===t)return;let n=0,r=t.length;for(;n<r;n++){const s=t[n];e[n]!==s&&W(e,n,s)}W(e,"length",r)}else Me(e,t)}function K(e,t,n=[]){let r,s=e;if(t.length>1){r=t.shift();const i=typeof r,o=Array.isArray(e);if(Array.isArray(r)){for(let a=0;a<r.length;a++)K(e,[r[a]].concat(t),n);return}else if(o&&i==="function"){for(let a=0;a<e.length;a++)r(e[a],a)&&K(e,[a].concat(t),n);return}else if(o&&i==="object"){const{from:a=0,to:f=e.length-1,by:u=1}=r;for(let c=a;c<=f;c+=u)K(e,[c].concat(t),n);return}else if(t.length>1){K(e[r],t,[r].concat(n));return}s=e[r],n=[r].concat(n)}let l=t[0];typeof l=="function"&&(l=l(s,n),l===s)||r===void 0&&l==null||(l=U(l),r===void 0||R(s)&&R(l)&&!Array.isArray(l)?Me(s,l):W(e,r,l))}function gt(...[e,t]){const n=U(e||{}),r=Array.isArray(n),s=Be(n);function l(...i){Je(()=>{r&&i.length===1?ht(n,i[0]):K(n,i)})}return[s,l]}const se=new WeakMap,Fe={get(e,t){if(t===ne)return e;const n=e[t];let r;return R(n)?se.get(n)||(se.set(n,r=new Proxy(n,Fe)),r):n},set(e,t,n){return W(e,t,U(n)),!0},deleteProperty(e,t){return W(e,t,void 0,!0),!0}};function me(e){return t=>{if(R(t)){let n;(n=se.get(t))||se.set(t,n=new Proxy(t,Fe)),e(n)}return t}}const[le,ae]=gt({byName:{}});function Re(e){const t={};for(const n of e)t[n.maglevd.name]=n;ae({byName:t})}function pt(e,t){ae(me(n=>{const r=n.byName[e];if(!r)return;const s=r.backends.find(l=>l.name===t.backend);s&&(s.state=t.transition.to,s.last_transition=t.transition,s.transitions||(s.transitions=[]),s.transitions.push(t.transition),s.transitions.length>20&&(s.transitions=s.transitions.slice(s.transitions.length-20)))}))}function bt(e,t){ae(me(n=>{const r=n.byName[e];r&&(r.maglevd.connected=t.connected,r.maglevd.last_error=t.last_error)}))}function ue(e,t,n){ae(me(r=>{const s=r.byName[e];if(!s)return;const l=s.backends.find(i=>i.address===t);if(l)for(const i of s.frontends)for(const o of i.pools)for(const a of o.backends)a.name===l.name&&(a.effective_weight=n)}))}function $t(e){if(!e||!e.at_unix_ns||e.at_unix_ns<=0)return"";const t=Date.now()-e.at_unix_ns/1e6,n=Math.floor(t/1e3);if(n<60)return`${n}s ago`;const r=Math.floor(n/60);if(r<60)return`${r}m ago`;const s=Math.floor(r/60);return s<48?`${s}h ago`:`${Math.floor(s/24)}d ago`}const Se=500,[be,mt]=k([]);function yt(e){mt(t=>{const n=[...t,e];return n.length>Se?n.slice(n.length-Se):n})}function vt(){const e=new EventSource("/view/api/events");return e.onmessage=t=>{try{const n=JSON.parse(t.data);wt(n)}catch(n){console.error("sse parse error",n,t.data)}},e.addEventListener("resync",async()=>{try{const t=await Le();Re(t)}catch(t){console.error("resync refetch failed",t)}}),e.onerror=t=>{console.debug("sse error, browser will reconnect",t)},e}function wt(e){switch(yt(e),e.type){case"backend":pt(e.maglevd,e.payload);break;case"frontend":e.maglevd,e.payload;break;case"maglevd-status":bt(e.maglevd,e.payload);break;case"log":_t(e.maglevd,e.payload);break}}function _t(e,t){if(!t.msg.startsWith("vpp-lb-sync-as-"))return;const n=t.attrs??{},r=n.address;if(r)switch(t.msg){case"vpp-lb-sync-as-added":ue(e,r,Number(n.weight??0));break;case"vpp-lb-sync-as-removed":ue(e,r,0);break;case"vpp-lb-sync-as-weight-updated":ue(e,r,Number(n.to??0));break}}const[ce,Ue]=k(void 0);var St=g("<nav class=scope-selector>"),At=g("<button class=scope-tab><span class=dot>");const kt=()=>{const e=()=>Object.keys(le.byName).sort();return(()=>{var t=St();return d(t,$(q,{get each(){return e()},children:n=>{const r=()=>le.byName[n],s=()=>r()?.maglevd.connected??!1;return(()=>{var l=At();return l.firstChild,l.$$click=()=>Ue(n),d(l,n,null),_(i=>{var o=ce()===n,a=!!s(),f=!s(),u=r()?.maglevd.address??"";return o!==i.e&&l.classList.toggle("active",i.e=o),a!==i.t&&l.classList.toggle("connected",i.t=a),f!==i.a&&l.classList.toggle("disconnected",i.a=f),u!==i.o&&M(l,"title",i.o=u),i},{e:void 0,t:void 0,a:void 0,o:void 0}),l})()}})),t})()};Pe(["click"]);var xt=g("<span class=status-badge>");const Ot=e=>(()=>{var t=xt();return d(t,()=>e.label??e.state),_(()=>M(t,"data-state",e.state)),t})();var Et=g("<span class=probe-heartbeat>");const Ct=e=>{const[t,n]=k(!1);return oe(()=>{const r=be();if(r.length===0)return;const s=r[r.length-1];if(s.type!=="log"||s.maglevd!==e.maglevd)return;const l=s.payload;l.attrs?.backend===e.backend&&(l.msg==="probe-start"?n(!0):l.msg==="probe-done"&&n(!1))}),(()=>{var r=Et();return d(r,()=>t()?"❤️":"·"),_(()=>r.classList.toggle("in-flight",!!t())),r})()};var Nt=g("<span class=flash-target>");const de=e=>{let t;return oe(Xe(()=>e.value,()=>{t?.animate([{backgroundColor:"#fefe27"},{backgroundColor:"transparent"}],{duration:1e3,easing:"ease-out"})},{defer:!0})),(()=>{var n=Nt(),r=t;return typeof r=="function"?Te(r,n):t=n,d(n,()=>e.children??e.value),n})()};var Pt=g("<tr class=backend-row><td class=backend-name></td><td class=backend-address></td><td></td><td class=numeric></td><td class=numeric></td><td class=age>"),Tt=g("<span class=tag>[disabled]");const jt=e=>{const t=()=>e.backend;return(()=>{var n=Pt(),r=n.firstChild,s=r.nextSibling,l=s.nextSibling,i=l.nextSibling,o=i.nextSibling,a=o.nextSibling;return d(r,$(Ct,{get maglevd(){return e.maglevd},get backend(){return t().name}}),null),d(r,()=>t().name,null),d(r,(()=>{var f=j(()=>!t().enabled);return()=>f()&&Tt()})(),null),d(s,()=>t().address),d(l,$(de,{get value(){return t().state},get children(){return $(Ot,{get state(){return t().state}})}})),d(i,$(de,{get value(){return e.poolBackend.weight}})),d(o,$(de,{get value(){return e.poolBackend.effective_weight}})),d(a,()=>$t(t().last_transition)),_(()=>M(n,"data-state",t().state)),n})()};var Lt=g("<section class=frontend-card><header class=frontend-header><h2></h2><div class=frontend-meta><span class=addr>:</span><span class=proto>"),Dt=g("<span class=tag>sticky"),Bt=g("<p class=frontend-desc>"),It=g("<div class=pool-block><h3 class=pool-name>pool: </h3><table class=backend-table><thead><tr><th>backend</th><th>address</th><th>state</th><th class=numeric>weight</th><th class=numeric>effective</th><th>last transition</th></tr></thead><tbody>");const Mt=e=>{const t=()=>Object.fromEntries(e.snap.backends.map(r=>[r.name,r])),n=()=>e.frontend;return(()=>{var r=Lt(),s=r.firstChild,l=s.firstChild,i=l.nextSibling,o=i.firstChild,a=o.firstChild,f=o.nextSibling;return d(l,()=>n().name),d(o,()=>n().address,a),d(o,()=>n().port,null),d(f,()=>n().protocol.toUpperCase()),d(i,(()=>{var u=j(()=>!!n().src_ip_sticky);return()=>u()&&Dt()})(),null),d(s,(()=>{var u=j(()=>!!n().description);return()=>u()&&(()=>{var c=Bt();return d(c,()=>n().description),c})()})(),null),d(r,$(q,{get each(){return n().pools},children:u=>(()=>{var c=It(),h=c.firstChild;h.firstChild;var p=h.nextSibling,y=p.firstChild,w=y.nextSibling;return d(h,()=>u.name,null),d(w,$(q,{get each(){return u.backends},children:P=>{const T=t()[P.name];return T?$(jt,{get maglevd(){return e.snap.maglevd.name},backend:T,poolBackend:P}):null}})),c})()}),null),r})()};var Ft=g("<details class=zippy><summary></summary><div class=zippy-body>");const We=e=>(()=>{var t=Ft(),n=t.firstChild,r=n.nextSibling;return d(n,()=>e.title),d(r,()=>e.children),_(()=>t.open=e.open),t})();var Rt=g("<dl class=kv><dt>version</dt><dd></dd><dt>build date</dt><dd></dd><dt>pid</dt><dd></dd><dt>booted</dt><dd></dd><dt>connected</dt><dd>");const Ut=e=>{if(!e.info)return null;const t=e.info,n=t.boottime_ns?new Date(t.boottime_ns/1e6).toISOString():"",r=t.connecttime_ns?new Date(t.connecttime_ns/1e6).toISOString():"";return $(We,{title:"VPP information",get children(){var s=Rt(),l=s.firstChild,i=l.nextSibling,o=i.nextSibling,a=o.nextSibling,f=a.nextSibling,u=f.nextSibling,c=u.nextSibling,h=c.nextSibling,p=h.nextSibling,y=p.nextSibling;return d(i,()=>t.version),d(a,()=>t.build_date),d(u,()=>t.pid),d(h,n),d(y,r),s}})};var Wt=g("<main class=overview>"),Vt=g("<p class=empty>No maglevd selected."),Kt=g('<div class="banner warn"> disconnected'),Ht=g("<div class=frontend-grid>");const qt=()=>{const e=()=>{const t=ce();return t?le.byName[t]:void 0};return(()=>{var t=Wt();return d(t,$(ve,{get when(){return e()},get fallback(){return Vt()},children:n=>[$(ve,{get when(){return!n().maglevd.connected},get children(){var r=Kt(),s=r.firstChild;return d(r,()=>n().maglevd.name,s),d(r,(()=>{var l=j(()=>!!n().maglevd.last_error);return()=>l()&&`: ${n().maglevd.last_error}`})(),null),r}}),(()=>{var r=Ht();return d(r,$(q,{get each(){return n().frontends},children:s=>$(Mt,{get snap(){return n()},frontend:s})})),r})(),$(Ut,{get info(){return n().vpp_info}})]})),t})()};var Gt=g("<ol class=event-tail>"),Jt=g("<div class=debug-toolbar><label><input type=checkbox>all maglevds</label><button></button><span class=count> events"),Xt=g("<li>");const zt=()=>{const[e,t]=k(!1),[n,r]=k(!1),[s,l]=k([]),i=I(()=>{const f=n()?s():be();if(e())return f;const u=ce();return u?f.filter(c=>c.maglevd===u):f}),o=()=>{n()?r(!1):(l([...be()]),r(!0))};let a;return oe(()=>{i(),!n()&&a&&(a.scrollTop=a.scrollHeight)}),$(We,{title:"Event stream",get children(){return[(()=>{var f=Gt(),u=a;return typeof u=="function"?Te(u,f):a=f,d(f,$(q,{get each(){return i()},children:c=>(()=>{var h=Xt();return d(h,()=>Zt(c)),_(p=>{var y=`event-row event-${c.type}`,w=!!Qt(c);return y!==p.e&&ot(h,p.e=y),w!==p.t&&h.classList.toggle("event-sync",p.t=w),p},{e:void 0,t:void 0}),h})()})),f})(),(()=>{var f=Jt(),u=f.firstChild,c=u.firstChild,h=u.nextSibling,p=h.nextSibling,y=p.firstChild;return c.addEventListener("change",w=>t(w.currentTarget.checked)),h.$$click=o,d(h,()=>n()?"resume":"pause"),d(p,()=>i().length,y),_(()=>c.checked=e()),f})()]}})};function Qt(e){return e.type!=="log"?!1:e.payload.msg.startsWith("vpp-lb-sync-")}function Yt(e){if(!e)return"";const t=["vip","protocol","port","address","weight","from","to","encap","src-ip-sticky","flush"],n=[],r=new Set;for(const s of t)s in e&&(n.push(`${s}=${e[s]}`),r.add(s));for(const[s,l]of Object.entries(e))r.has(s)||n.push(`${s}=${l}`);return n.join(" ")}function Zt(e){const t=new Date(e.at_unix_ns/1e6).toISOString().substring(11,23),n=`[${e.maglevd}]`;switch(e.type){case"backend":{const r=e.payload;return`${t} ${n} backend ${r.backend}: ${r.transition.from} → ${r.transition.to}`}case"frontend":{const r=e.payload;return`${t} ${n} frontend ${r.frontend}: ${r.transition.from} → ${r.transition.to}`}case"log":{const r=e.payload;if(r.msg.startsWith("vpp-lb-sync-"))return`${t} ${n} ${r.msg} ${Yt(r.attrs)}`.trimEnd();const s=r.attrs?Object.entries(r.attrs).map(([l,i])=>`${l}=${i}`).join(" "):"";return`${t} ${n} ${r.level} ${r.msg} ${s}`.trimEnd()}case"maglevd-status":return`${t} ${n} maglevd status: ${JSON.stringify(e.payload)}`;default:return`${t} ${n} ${e.type}`}}Pe(["click"]);var en=g("<div class=app><header class=app-header><div class=brand><strong>maglev</strong></div><span class=mode-tag></span><a class=admin-toggle>"),tn=g("<span class=version> (<!>)"),nn=g('<div class="banner err">'),rn=g("<p class=loading>Loading…");const X=window.location.pathname.startsWith("/admin"),sn=()=>{const[e,t]=k(),[n,r]=k();return ze(async()=>{try{const[s,l]=await Promise.all([Le(),ct()]);Re(s),r(l),!ce()&&s.length>0&&Ue(s[0].maglevd.name),vt()}catch(s){t(`${s}`)}}),(()=>{var s=en(),l=s.firstChild,i=l.firstChild;i.firstChild;var o=i.nextSibling,a=o.nextSibling;return d(i,(()=>{var f=j(()=>!!n());return()=>f()&&(()=>{var u=tn(),c=u.firstChild,h=c.nextSibling;return h.nextSibling,d(u,()=>n().version,c),d(u,()=>n().commit,h),_(()=>M(u,"title",`commit ${n().commit} · built ${n().date}`)),u})()})(),null),d(l,$(kt,{}),o),d(o,X?"admin":"view"),M(a,"href",X?"/view/":"/admin/"),M(a,"title",X?"exit admin mode":"enter admin mode"),d(a,X?"exit admin":"admin…"),d(s,(()=>{var f=j(()=>!!e());return()=>f()&&(()=>{var u=nn();return d(u,e),u})()})(),null),d(s,(()=>{var f=j(()=>!e()&&Object.keys(le.byName).length===0);return()=>f()&&rn()})(),null),d(s,$(qt,{}),null),d(s,$(zt,{}),null),s})()},Ve=document.getElementById("root");if(!Ve)throw new Error("no #root element");it(()=>$(sn,{}),Ve);
diff --git a/cmd/frontend/web/dist/assets/logo-bimi-Bguc6E_L.svg b/cmd/frontend/web/dist/assets/logo-bimi-Bguc6E_L.svg
new file mode 100644
index 0000000..1e2175b
--- /dev/null
+++ b/cmd/frontend/web/dist/assets/logo-bimi-Bguc6E_L.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!-- Created with Inkscape (http://www.inkscape.org/) --><svg xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" version="1.2" width="800" height="800" viewBox="0 0 800 800" baseProfile="tiny-ps"><title>IPng BIMI v1</title><defs id="defs45"><rect x="934.77606" y="2752.8728" width="85.759277" height="548.85938" id="rect6241"></rect></defs><g id="g47"><path d="M 579.13104,648.4498 C 499.56538,613.61321 449.82091,596.76482 378.18862,572.80261 268.32664,540.6276 176.71796,527.08545 89.616111,519.5763 c -24.145634,-2.08163 -44.36835,-4.62227 -56.74742,-8.52497 -1.570156,-0.58073 -2.137493,-1.0352 -2.043644,-1.09771 0,0 0.129242,-0.18141 2.225603,-0.44997 176.44609,-22.00754 314.47904,-33.22783 479.6108,-13.64394 44.12303,5.45647 82.12954,13.44838 103.72517,19.45518 39.83117,11.07896 79.5812,26.12547 145.38945,55.09583 v 0 l -62.74013,28.69995 c -3.1412,1.40783 -9.92766,-1.03774 -53.51992,-18.08725 -50.81738,-19.8825 -104.34455,-36.18247 -144.32545,-42.06323 -2.5363,-0.36075 -48.21718,-5.73927 -49.79016,-2.55739 52.40111,13.4038 147.60797,46.67518 208.63829,79.81038 0.21989,0.12174 0.24094,0.10801 -0.0272,0.23536 -79.85331,31.94875 0.0272,-0.23536 -79.85331,31.94875 -0.58434,0.20503 -0.58465,0.21227 -1.02719,0.0525 z m 191.9406,-112.29102 c -3.49721,-1.22417 -5.79146,-2.21913 -8.69183,-3.17336 -41.14503,-15.5899 -83.13568,-31.04021 -152.63333,-49.17538 -77.29487,-16.72117 -100.67737,-15.62091 -167.52564,-22.61379 -1.44452,-0.14911 -2.0996,-0.29148 -2.17154,-0.47189 -0.18843,-0.47246 0.55179,-3.21511 1.49421,-5.53624 2.77358,-6.83133 6.92073,-11.5344 14.46334,-16.40194 5.77433,-3.72644 12.73064,-6.53891 19.71962,-7.97271 1.04789,-0.215 2.24823,-0.46554 2.66738,-0.55677 1.90185,-0.41396 10.6889,-1.3318 15.62328,-1.63196 3.08672,-0.18772 13.26895,-0.18752 17.33805,0 6.96072,0.32144 16.83418,1.3612 21.52965,2.26729 8.02095,1.54781 9.8735,1.82604 11.29003,1.69557 3.08722,-0.2843 5.24647,-2.54828 6.24698,-6.54995 0.70985,-2.83918 0.65832,-6.09941 -0.21151,-13.38338 -1.09031,-9.1302 -2.04419,-11.81644 -5.30894,-14.95071 -3.27402,-3.14315 -7.47184,-5.41378 -16.58923,-8.97319 -6.77149,-2.64352 -9.82258,-4.12585 -12.5473,-6.09589 -1.69027,-1.2221 -2.37541,-1.86652 -3.26581,-3.072 -1.84097,-2.49224 -2.43945,-4.35703 -2.41259,-7.5167 0.0321,-3.76513 1.32972,-7.53128 4.99042,-14.4834 3.06961,-5.82955 6.81337,-11.79075 9.78674,-15.58338 3.97264,-5.06732 11.04988,-12.10533 15.28055,-15.19589 0.42975,-0.31397 1.63009,-1.1962 2.66735,-1.96051 3.08262,-2.27135 5.16536,-3.66791 7.88764,-5.28897 3.73466,-2.22389 4.09821,-2.4481 6.14055,-3.78689 2.01417,-1.32037 4.2544,-3.44834 4.46,-4.2365 0.24475,-0.93846 -1.51824,-1.95135 -5.17528,-2.97331 -4.25783,-1.18984 -10.28152,-1.53254 -15.04693,-0.85606 -4.11237,0.58378 -11.56791,2.18575 -16.31076,3.50471 -0.98418,0.27368 -2.81821,0.78263 -4.0757,1.13104 -1.25749,0.34839 -2.50069,0.70428 -2.76264,0.79088 -0.262,0.0865 -1.63379,0.49918 -3.04847,0.91686 -3.70925,1.09515 -8.45776,2.52993 -10.00271,3.02236 -3.51836,1.12139 -9.15486,2.63959 -11.94462,3.21729 -5.41252,1.12078 -6.60087,1.27323 -9.92446,1.27323 -4.59709,0 -7.1633,-0.87345 -9.66878,-3.29092 -3.02515,-2.91892 -4.14842,-6.20256 -6.65104,-19.44359 -1.22867,-6.50077 -1.73983,-7.94886 -3.20219,-9.07169 -1.00151,-0.76892 -1.84512,-0.99357 -3.76399,-1.00229 -3.08062,-0.014 -6.54512,0.7317 -14.19433,3.0552 -4.51119,1.37032 -12.00596,4.05963 -14.95643,5.36676 -0.62875,0.27855 -2.08629,0.89764 -3.23898,1.37577 -4.65793,1.93206 -18.4736,8.9021 -23.39065,11.80063 -0.70917,0.41806 -1.31589,0.76008 -1.34829,0.76008 -0.075,0 -3.77716,2.17465 -5.86551,3.44543 -2.90166,1.76565 -8.34311,5.26159 -13.21695,8.49139 -1.25749,0.83331 -2.8546,1.89157 -3.54916,2.3517 -4.27535,2.83223 -8.11326,5.58169 -10.6242,7.6112 -0.87922,0.71063 -1.86521,1.49394 -2.19108,1.7407 -0.74523,0.56428 -3.19594,2.58211 -3.45047,2.84094 -0.10476,0.10656 -0.57633,0.51644 -1.04789,0.91085 -0.86879,0.72664 -3.44323,2.9631 -5.71123,4.9615 -23.08718,22.36093 -40.82881,44.64723 -65.92722,60.81245 -28.19844,15.65393 -58.46751,26.84661 -89.0665,35.6609 -41.68202,11.69849 -81.09264,20.42159 -122.984459,29.45192 -21.680243,5.5282 -29.9137,5.03067 -50.947969,12.40502 14.951295,-13.53027 36.975241,-24.58518 53.227809,-34.1504 C 163.38141,405.50073 213.3142,397.1501 277.77068,338.78844 c 1.91856,-1.57598 5.21183,-4.55798 8.00665,-7.24985 3.12073,-3.00575 3.36721,-3.25885 7.50782,-7.70966 1.31328,-1.4117 3.3652,-3.59795 4.55986,-4.85835 1.97043,-2.07893 3.65279,-3.98555 8.56891,-9.71114 2.20328,-2.56608 7.49507,-8.2966 10.58055,-11.45777 5.10299,-5.22816 6.55536,-6.77177 9.83821,-10.45622 0.98824,-1.10917 1.84375,-2.05793 1.90115,-2.10835 0.0574,-0.0504 0.91486,-0.99916 1.90551,-2.10834 5.76254,-6.45193 7.80096,-8.37599 16.37714,-15.45834 4.27702,-3.53204 11.2111,-8.62127 15.12453,-11.10055 1.51421,-0.95928 5.53868,-3.23289 5.72251,-3.23289 0.0403,0 0.96259,-0.40558 2.04935,-0.90131 2.9381,-1.34019 4.58118,-1.94431 8.83494,-3.24839 3.42305,-1.04941 9.60243,-2.60738 13.71801,-3.45863 2.83171,-0.58568 11.61133,-2.69177 13.14642,-3.1536 10.81626,-3.254 20.89113,-9.30067 29.26348,-17.56318 3.51154,-3.46545 6.39222,-6.99301 11.50948,-14.09399 6.41515,-8.90201 7.37708,-10.07086 13.97496,-16.98113 3.54663,-3.71453 10.99039,-10.61582 13.29949,-12.33024 0.29843,-0.22158 0.62833,-0.49321 0.73312,-0.60361 0.1048,-0.11041 0.87644,-0.73569 1.71474,-1.3895 6.21812,-4.84952 13.15975,-8.69296 19.24331,-10.6546 3.98301,-1.28432 6.01249,-1.6647 8.7643,-1.64264 6.32371,0.0506 11.97348,4.63722 15.43632,12.53139 1.9383,4.41859 3.83373,10.54541 5.13823,16.60874 0.25506,1.18551 0.72668,3.35172 1.04809,4.81382 0.3214,1.46209 0.70649,3.31834 0.85577,4.12501 0.49188,2.65799 1.2017,6.74203 1.62507,9.35004 0.42914,2.64383 1.87179,10.59339 2.86121,15.76673 2.3859,12.47474 4.96022,20.72426 8.59338,27.53778 2.67715,5.0206 4.9284,7.21116 8.16807,7.94785 5.25876,1.19583 10.1364,-1.86594 21.77553,-13.66888 3.89349,-3.94828 4.77084,-4.86159 6.51614,-6.78336 0.73263,-0.80666 1.38134,-1.50793 1.44158,-1.55834 0.0602,-0.0504 1.14353,-1.20542 2.40728,-2.56668 2.72783,-2.93834 5.99639,-6.02929 7.58449,-7.17243 1.04994,-0.75573 1.59957,-1.09319 3.26146,-2.00245 2.01024,-1.09986 6.63878,-2.30434 9.59921,-2.49799 6.35739,-0.41585 12.05368,3.16482 17.58662,11.05486 6.4448,9.19038 10.91581,20.49105 12.6842,32.05981 1.1605,7.59167 1.36723,11.15003 1.64571,28.32511 0.21231,13.09296 0.74535,18.27461 2.66864,25.94177 0.71826,2.86326 2.7898,9.37098 3.32653,10.45005 0.10024,0.20165 0.43847,0.9993 0.75154,1.77253 1.59761,3.94617 4.05718,8.23459 6.6409,11.57886 1.69629,2.19568 4.97228,5.48249 8.05165,8.07828 2.22357,1.87436 2.97174,2.47045 7.61308,6.06515 10.30872,7.98416 33.81774,31.22171 41.12658,41.97137 16.06197,28.44254 14.60612,38.27117 34.79875,63.81164 3.97192,5.01739 7.70053,9.78693 8.40193,10.74762 0.69201,0.94763 6.23113,8.3746 7.43962,9.97514 2.86039,3.78823 6.26015,8.94277 9.25053,14.02506 4.4148,7.50323 6.22909,11.36941 8.22295,17.22439 1.17465,3.44936 1.81393,4.98408 2.26232,8.38323 0.75463,6.4895 -0.67097,5.36665 -1.82686,4.94652 z" id="path149" fill="#802000" stroke-width="0.186895" fill-opacity="1"></path><text xml:space="preserve" id="text6239" font-size="533.333px" font-family="'Arial Rounded MT Bold'"></text></g></svg>
\ No newline at end of file
diff --git a/cmd/frontend/web/dist/index.html b/cmd/frontend/web/dist/index.html
index 1bfb99a..fb071c8 100644
--- a/cmd/frontend/web/dist/index.html
+++ b/cmd/frontend/web/dist/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>maglev</title>
-    <script type="module" crossorigin src="/view/assets/index-DZzDfClm.js"></script>
-    <link rel="stylesheet" crossorigin href="/view/assets/index-9NmAul22.css">
+    <script type="module" crossorigin src="/view/assets/index-AsNHMKdQ.js"></script>
+    <link rel="stylesheet" crossorigin href="/view/assets/index-CrBeXDdb.css">
   </head>
   <body>
     <div id="root"></div>
diff --git a/cmd/frontend/web/src/App.tsx b/cmd/frontend/web/src/App.tsx
index 70e2645..2ee1613 100644
--- a/cmd/frontend/web/src/App.tsx
+++ b/cmd/frontend/web/src/App.tsx
@@ -1,4 +1,4 @@
-import { createSignal, onMount, type Component } from "solid-js";
+import { Show, createSignal, onMount, type Component } from "solid-js";
 import { fetchAllState, fetchVersion } from "./api/rest";
 import { openEventStream } from "./api/sse";
 import { replaceAll, state } from "./stores/state";
@@ -7,8 +7,8 @@ import ScopeSelector from "./components/ScopeSelector";
 import Overview from "./views/Overview";
 import DebugPanel from "./views/DebugPanel";
 import type { VersionInfo } from "./types";
-
-const isAdmin = window.location.pathname.startsWith("/admin");
+import logoUrl from "./assets/logo-bimi.svg";
+import { isAdmin } from "./stores/mode";
 
 const App: Component = () => {
   const [error, setError] = createSignal<string | undefined>();
@@ -28,10 +28,24 @@ const App: Component = () => {
     }
   });
 
+  // The admin toggle is only shown when the server reports that admin
+  // credentials are configured. Without this gate, we'd link operators
+  // to a /admin/ URL that returns 404 and surprise them.
+  const adminAvailable = () => version()?.admin_enabled === true;
+
   return (
     <div class="app">
       <header class="app-header">
         <div class="brand">
+          <a
+            class="brand-logo"
+            href="https://git.ipng.ch/ipng/vpp-maglev/"
+            target="_blank"
+            rel="noopener"
+            title="vpp-maglev on git.ipng.ch"
+          >
+            <img src={logoUrl} alt="IPng" />
+          </a>
           <strong>maglev</strong>
           {version() && (
             <span class="version" title={`commit ${version()!.commit} · built ${version()!.date}`}>
@@ -40,21 +54,34 @@ const App: Component = () => {
           )}
         </div>
         <ScopeSelector />
-        <span class="mode-tag">{isAdmin ? "admin" : "view"}</span>
-        <a
-          class="admin-toggle"
-          href={isAdmin ? "/view/" : "/admin/"}
-          title={isAdmin ? "exit admin mode" : "enter admin mode"}
-        >
-          {isAdmin ? "exit admin" : "admin…"}
-        </a>
+        <Show when={isAdmin || adminAvailable()}>
+          <span class="mode-tag">{isAdmin ? "admin" : "view"}</span>
+        </Show>
+        <Show when={adminAvailable()}>
+          <a
+            class="admin-toggle"
+            href={isAdmin ? "/view/" : "/admin/"}
+            title={isAdmin ? "exit admin mode" : "enter admin mode"}
+          >
+            {isAdmin ? "exit admin" : "admin…"}
+          </a>
+        </Show>
       </header>
 
       {error() && <div class="banner err">{error()}</div>}
       {!error() && Object.keys(state.byName).length === 0 && <p class="loading">Loading…</p>}
 
       <Overview />
-      <DebugPanel />
+
+      {/* Admin-only sections — everything below this line is hidden on
+          /view/ and only rendered when the SPA was loaded at /admin/.
+          The basic-auth gate on /admin/ means only authenticated users
+          ever reach this branch. Future admin-only features drop in
+          here, one per <Show> block, so the /view-vs-/admin diff stays
+          localized and reviewable. */}
+      <Show when={isAdmin}>
+        <DebugPanel />
+      </Show>
     </div>
   );
 };
diff --git a/cmd/frontend/web/src/api/admin.ts b/cmd/frontend/web/src/api/admin.ts
new file mode 100644
index 0000000..3397bcd
--- /dev/null
+++ b/cmd/frontend/web/src/api/admin.ts
@@ -0,0 +1,24 @@
+import type { BackendSnapshot } from "../types";
+
+export type BackendAction = "pause" | "resume" | "enable" | "disable";
+
+// Run one of the four backend lifecycle operations on the given
+// maglevd. Returns the fresh BackendSnapshot from the server so the
+// caller can update the store immediately; the WatchEvents stream
+// will also deliver a transition event which the normal reducer
+// applies, so the store converges even if this HTTP response is
+// slow. Throws on non-2xx with the server's error body as the
+// message, which is enough signal for a toast/alert to surface.
+export async function runBackendAction(
+  maglevd: string,
+  backend: string,
+  action: BackendAction,
+): Promise<BackendSnapshot> {
+  const url = `/admin/api/${encodeURIComponent(maglevd)}/backend/${encodeURIComponent(backend)}/${action}`;
+  const r = await fetch(url, { method: "POST", credentials: "same-origin" });
+  if (!r.ok) {
+    const body = (await r.text()).trim();
+    throw new Error(body || `${r.status} ${r.statusText}`);
+  }
+  return (await r.json()) as BackendSnapshot;
+}
diff --git a/cmd/frontend/web/src/api/sse.ts b/cmd/frontend/web/src/api/sse.ts
index 8d20d55..1ff70be 100644
--- a/cmd/frontend/web/src/api/sse.ts
+++ b/cmd/frontend/web/src/api/sse.ts
@@ -4,6 +4,7 @@ import type {
   FrontendEventPayload,
   LogEventPayload,
   MaglevdStatusPayload,
+  VPPStatusPayload,
 } from "../types";
 import { fetchAllState } from "./rest";
 import {
@@ -11,6 +12,7 @@ import {
   applyBackendTransition,
   applyFrontendTransition,
   applyMaglevdStatus,
+  applyVPPStatus,
   replaceAll,
 } from "../stores/state";
 import { pushEvent } from "../stores/events";
@@ -62,6 +64,9 @@ function dispatch(ev: BrowserEvent) {
     case "maglevd-status":
       applyMaglevdStatus(ev.maglevd, ev.payload as MaglevdStatusPayload);
       break;
+    case "vpp-status":
+      applyVPPStatus(ev.maglevd, (ev.payload as VPPStatusPayload).state);
+      break;
     case "log":
       applyLogEvent(ev.maglevd, ev.payload as LogEventPayload);
       break;
diff --git a/cmd/frontend/web/src/assets/logo-bimi.svg b/cmd/frontend/web/src/assets/logo-bimi.svg
new file mode 100644
index 0000000..1e2175b
--- /dev/null
+++ b/cmd/frontend/web/src/assets/logo-bimi.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!-- Created with Inkscape (http://www.inkscape.org/) --><svg xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" version="1.2" width="800" height="800" viewBox="0 0 800 800" baseProfile="tiny-ps"><title>IPng BIMI v1</title><defs id="defs45"><rect x="934.77606" y="2752.8728" width="85.759277" height="548.85938" id="rect6241"></rect></defs><g id="g47"><path d="M 579.13104,648.4498 C 499.56538,613.61321 449.82091,596.76482 378.18862,572.80261 268.32664,540.6276 176.71796,527.08545 89.616111,519.5763 c -24.145634,-2.08163 -44.36835,-4.62227 -56.74742,-8.52497 -1.570156,-0.58073 -2.137493,-1.0352 -2.043644,-1.09771 0,0 0.129242,-0.18141 2.225603,-0.44997 176.44609,-22.00754 314.47904,-33.22783 479.6108,-13.64394 44.12303,5.45647 82.12954,13.44838 103.72517,19.45518 39.83117,11.07896 79.5812,26.12547 145.38945,55.09583 v 0 l -62.74013,28.69995 c -3.1412,1.40783 -9.92766,-1.03774 -53.51992,-18.08725 -50.81738,-19.8825 -104.34455,-36.18247 -144.32545,-42.06323 -2.5363,-0.36075 -48.21718,-5.73927 -49.79016,-2.55739 52.40111,13.4038 147.60797,46.67518 208.63829,79.81038 0.21989,0.12174 0.24094,0.10801 -0.0272,0.23536 -79.85331,31.94875 0.0272,-0.23536 -79.85331,31.94875 -0.58434,0.20503 -0.58465,0.21227 -1.02719,0.0525 z m 191.9406,-112.29102 c -3.49721,-1.22417 -5.79146,-2.21913 -8.69183,-3.17336 -41.14503,-15.5899 -83.13568,-31.04021 -152.63333,-49.17538 -77.29487,-16.72117 -100.67737,-15.62091 -167.52564,-22.61379 -1.44452,-0.14911 -2.0996,-0.29148 -2.17154,-0.47189 -0.18843,-0.47246 0.55179,-3.21511 1.49421,-5.53624 2.77358,-6.83133 6.92073,-11.5344 14.46334,-16.40194 5.77433,-3.72644 12.73064,-6.53891 19.71962,-7.97271 1.04789,-0.215 2.24823,-0.46554 2.66738,-0.55677 1.90185,-0.41396 10.6889,-1.3318 15.62328,-1.63196 3.08672,-0.18772 13.26895,-0.18752 17.33805,0 6.96072,0.32144 16.83418,1.3612 21.52965,2.26729 8.02095,1.54781 9.8735,1.82604 11.29003,1.69557 3.08722,-0.2843 5.24647,-2.54828 6.24698,-6.54995 0.70985,-2.83918 0.65832,-6.09941 -0.21151,-13.38338 -1.09031,-9.1302 -2.04419,-11.81644 -5.30894,-14.95071 -3.27402,-3.14315 -7.47184,-5.41378 -16.58923,-8.97319 -6.77149,-2.64352 -9.82258,-4.12585 -12.5473,-6.09589 -1.69027,-1.2221 -2.37541,-1.86652 -3.26581,-3.072 -1.84097,-2.49224 -2.43945,-4.35703 -2.41259,-7.5167 0.0321,-3.76513 1.32972,-7.53128 4.99042,-14.4834 3.06961,-5.82955 6.81337,-11.79075 9.78674,-15.58338 3.97264,-5.06732 11.04988,-12.10533 15.28055,-15.19589 0.42975,-0.31397 1.63009,-1.1962 2.66735,-1.96051 3.08262,-2.27135 5.16536,-3.66791 7.88764,-5.28897 3.73466,-2.22389 4.09821,-2.4481 6.14055,-3.78689 2.01417,-1.32037 4.2544,-3.44834 4.46,-4.2365 0.24475,-0.93846 -1.51824,-1.95135 -5.17528,-2.97331 -4.25783,-1.18984 -10.28152,-1.53254 -15.04693,-0.85606 -4.11237,0.58378 -11.56791,2.18575 -16.31076,3.50471 -0.98418,0.27368 -2.81821,0.78263 -4.0757,1.13104 -1.25749,0.34839 -2.50069,0.70428 -2.76264,0.79088 -0.262,0.0865 -1.63379,0.49918 -3.04847,0.91686 -3.70925,1.09515 -8.45776,2.52993 -10.00271,3.02236 -3.51836,1.12139 -9.15486,2.63959 -11.94462,3.21729 -5.41252,1.12078 -6.60087,1.27323 -9.92446,1.27323 -4.59709,0 -7.1633,-0.87345 -9.66878,-3.29092 -3.02515,-2.91892 -4.14842,-6.20256 -6.65104,-19.44359 -1.22867,-6.50077 -1.73983,-7.94886 -3.20219,-9.07169 -1.00151,-0.76892 -1.84512,-0.99357 -3.76399,-1.00229 -3.08062,-0.014 -6.54512,0.7317 -14.19433,3.0552 -4.51119,1.37032 -12.00596,4.05963 -14.95643,5.36676 -0.62875,0.27855 -2.08629,0.89764 -3.23898,1.37577 -4.65793,1.93206 -18.4736,8.9021 -23.39065,11.80063 -0.70917,0.41806 -1.31589,0.76008 -1.34829,0.76008 -0.075,0 -3.77716,2.17465 -5.86551,3.44543 -2.90166,1.76565 -8.34311,5.26159 -13.21695,8.49139 -1.25749,0.83331 -2.8546,1.89157 -3.54916,2.3517 -4.27535,2.83223 -8.11326,5.58169 -10.6242,7.6112 -0.87922,0.71063 -1.86521,1.49394 -2.19108,1.7407 -0.74523,0.56428 -3.19594,2.58211 -3.45047,2.84094 -0.10476,0.10656 -0.57633,0.51644 -1.04789,0.91085 -0.86879,0.72664 -3.44323,2.9631 -5.71123,4.9615 -23.08718,22.36093 -40.82881,44.64723 -65.92722,60.81245 -28.19844,15.65393 -58.46751,26.84661 -89.0665,35.6609 -41.68202,11.69849 -81.09264,20.42159 -122.984459,29.45192 -21.680243,5.5282 -29.9137,5.03067 -50.947969,12.40502 14.951295,-13.53027 36.975241,-24.58518 53.227809,-34.1504 C 163.38141,405.50073 213.3142,397.1501 277.77068,338.78844 c 1.91856,-1.57598 5.21183,-4.55798 8.00665,-7.24985 3.12073,-3.00575 3.36721,-3.25885 7.50782,-7.70966 1.31328,-1.4117 3.3652,-3.59795 4.55986,-4.85835 1.97043,-2.07893 3.65279,-3.98555 8.56891,-9.71114 2.20328,-2.56608 7.49507,-8.2966 10.58055,-11.45777 5.10299,-5.22816 6.55536,-6.77177 9.83821,-10.45622 0.98824,-1.10917 1.84375,-2.05793 1.90115,-2.10835 0.0574,-0.0504 0.91486,-0.99916 1.90551,-2.10834 5.76254,-6.45193 7.80096,-8.37599 16.37714,-15.45834 4.27702,-3.53204 11.2111,-8.62127 15.12453,-11.10055 1.51421,-0.95928 5.53868,-3.23289 5.72251,-3.23289 0.0403,0 0.96259,-0.40558 2.04935,-0.90131 2.9381,-1.34019 4.58118,-1.94431 8.83494,-3.24839 3.42305,-1.04941 9.60243,-2.60738 13.71801,-3.45863 2.83171,-0.58568 11.61133,-2.69177 13.14642,-3.1536 10.81626,-3.254 20.89113,-9.30067 29.26348,-17.56318 3.51154,-3.46545 6.39222,-6.99301 11.50948,-14.09399 6.41515,-8.90201 7.37708,-10.07086 13.97496,-16.98113 3.54663,-3.71453 10.99039,-10.61582 13.29949,-12.33024 0.29843,-0.22158 0.62833,-0.49321 0.73312,-0.60361 0.1048,-0.11041 0.87644,-0.73569 1.71474,-1.3895 6.21812,-4.84952 13.15975,-8.69296 19.24331,-10.6546 3.98301,-1.28432 6.01249,-1.6647 8.7643,-1.64264 6.32371,0.0506 11.97348,4.63722 15.43632,12.53139 1.9383,4.41859 3.83373,10.54541 5.13823,16.60874 0.25506,1.18551 0.72668,3.35172 1.04809,4.81382 0.3214,1.46209 0.70649,3.31834 0.85577,4.12501 0.49188,2.65799 1.2017,6.74203 1.62507,9.35004 0.42914,2.64383 1.87179,10.59339 2.86121,15.76673 2.3859,12.47474 4.96022,20.72426 8.59338,27.53778 2.67715,5.0206 4.9284,7.21116 8.16807,7.94785 5.25876,1.19583 10.1364,-1.86594 21.77553,-13.66888 3.89349,-3.94828 4.77084,-4.86159 6.51614,-6.78336 0.73263,-0.80666 1.38134,-1.50793 1.44158,-1.55834 0.0602,-0.0504 1.14353,-1.20542 2.40728,-2.56668 2.72783,-2.93834 5.99639,-6.02929 7.58449,-7.17243 1.04994,-0.75573 1.59957,-1.09319 3.26146,-2.00245 2.01024,-1.09986 6.63878,-2.30434 9.59921,-2.49799 6.35739,-0.41585 12.05368,3.16482 17.58662,11.05486 6.4448,9.19038 10.91581,20.49105 12.6842,32.05981 1.1605,7.59167 1.36723,11.15003 1.64571,28.32511 0.21231,13.09296 0.74535,18.27461 2.66864,25.94177 0.71826,2.86326 2.7898,9.37098 3.32653,10.45005 0.10024,0.20165 0.43847,0.9993 0.75154,1.77253 1.59761,3.94617 4.05718,8.23459 6.6409,11.57886 1.69629,2.19568 4.97228,5.48249 8.05165,8.07828 2.22357,1.87436 2.97174,2.47045 7.61308,6.06515 10.30872,7.98416 33.81774,31.22171 41.12658,41.97137 16.06197,28.44254 14.60612,38.27117 34.79875,63.81164 3.97192,5.01739 7.70053,9.78693 8.40193,10.74762 0.69201,0.94763 6.23113,8.3746 7.43962,9.97514 2.86039,3.78823 6.26015,8.94277 9.25053,14.02506 4.4148,7.50323 6.22909,11.36941 8.22295,17.22439 1.17465,3.44936 1.81393,4.98408 2.26232,8.38323 0.75463,6.4895 -0.67097,5.36665 -1.82686,4.94652 z" id="path149" fill="#802000" stroke-width="0.186895" fill-opacity="1"></path><text xml:space="preserve" id="text6239" font-size="533.333px" font-family="'Arial Rounded MT Bold'"></text></g></svg>
\ No newline at end of file
diff --git a/cmd/frontend/web/src/components/BackendActionsMenu.tsx b/cmd/frontend/web/src/components/BackendActionsMenu.tsx
new file mode 100644
index 0000000..37dc641
--- /dev/null
+++ b/cmd/frontend/web/src/components/BackendActionsMenu.tsx
@@ -0,0 +1,126 @@
+import { For, Show, createEffect, createSignal, onCleanup, type Component } from "solid-js";
+import { runBackendAction, type BackendAction } from "../api/admin";
+
+type Props = {
+  maglevd: string;
+  backend: string;
+  state: string;
+};
+
+type MenuItem = {
+  label: string;
+  action: BackendAction;
+};
+
+// Action set available per current backend state. Only the actions
+// that make sense for the current state are shown — e.g. "resume" is
+// meaningless on a running backend, and "enable" is meaningless on
+// anything except a disabled one. A backend in the "removed" state
+// has no actionable operations, so the whole kebab is suppressed.
+function itemsForState(state: string): MenuItem[] {
+  switch (state) {
+    case "up":
+    case "down":
+    case "unknown":
+      return [
+        { label: "pause", action: "pause" },
+        { label: "disable", action: "disable" },
+      ];
+    case "paused":
+      return [
+        { label: "resume", action: "resume" },
+        { label: "disable", action: "disable" },
+      ];
+    case "disabled":
+      return [{ label: "enable", action: "enable" }];
+    default:
+      return [];
+  }
+}
+
+const BackendActionsMenu: Component<Props> = (props) => {
+  const [open, setOpen] = createSignal(false);
+  const [busy, setBusy] = createSignal<BackendAction | undefined>();
+  const [error, setError] = createSignal<string | undefined>();
+  let wrapRef: HTMLDivElement | undefined;
+
+  const items = () => itemsForState(props.state);
+
+  // Close on outside-click or Escape. The effect only installs its
+  // document listeners while the menu is open, so there's no cost on
+  // the typical closed-at-rest state.
+  createEffect(() => {
+    if (!open()) return;
+    const onMouseDown = (e: MouseEvent) => {
+      if (!wrapRef) return;
+      if (!wrapRef.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onMouseDown);
+    document.addEventListener("keydown", onKey);
+    onCleanup(() => {
+      document.removeEventListener("mousedown", onMouseDown);
+      document.removeEventListener("keydown", onKey);
+    });
+  });
+
+  const run = async (action: BackendAction) => {
+    setBusy(action);
+    setError(undefined);
+    try {
+      await runBackendAction(props.maglevd, props.backend, action);
+      setOpen(false);
+    } catch (err) {
+      setError(`${err}`);
+    } finally {
+      setBusy(undefined);
+    }
+  };
+
+  // If there are no valid actions for the current state, render
+  // nothing — the surrounding <td> stays an empty cell, no "dead"
+  // kebab tempting clicks.
+  return (
+    <Show when={items().length > 0}>
+      <div class="kebab-wrap" ref={wrapRef}>
+        <button
+          type="button"
+          class="kebab-btn"
+          aria-haspopup="menu"
+          aria-expanded={open()}
+          title="backend actions"
+          onClick={(e) => {
+            e.stopPropagation();
+            setOpen((v) => !v);
+          }}
+        >
+          {"\u22EE"}
+        </button>
+        <Show when={open()}>
+          <div class="kebab-menu" role="menu">
+            <For each={items()}>
+              {(item) => (
+                <button
+                  type="button"
+                  class="kebab-item"
+                  role="menuitem"
+                  disabled={busy() !== undefined}
+                  onClick={() => run(item.action)}
+                >
+                  {busy() === item.action ? `${item.label}…` : item.label}
+                </button>
+              )}
+            </For>
+            <Show when={error()}>
+              <p class="kebab-error">{error()}</p>
+            </Show>
+          </div>
+        </Show>
+      </div>
+    </Show>
+  );
+};
+
+export default BackendActionsMenu;
diff --git a/cmd/frontend/web/src/components/Flash.tsx b/cmd/frontend/web/src/components/Flash.tsx
index c8769a3..743be2e 100644
--- a/cmd/frontend/web/src/components/Flash.tsx
+++ b/cmd/frontend/web/src/components/Flash.tsx
@@ -1,20 +1,28 @@
 import { createEffect, on, type Component, type JSX } from "solid-js";
 
 type Props = {
-  // value is only used for change detection. When it changes the
-  // wrapper runs a 1s flash animation.
+  // value is used solely for change detection. When it changes the
+  // wrapper runs a short attention-grabbing animation.
   value: string | number | boolean;
-  // When children are provided they are rendered inside the wrapper
-  // instead of the raw value. Useful for wrapping e.g. <StatusBadge>
-  // so the pill animates on state change while still showing itself.
+  // When children are provided they render inside the wrapper instead
+  // of the raw value. Useful for wrapping e.g. <StatusBadge> so the
+  // pill animates on state change while still showing itself.
   children?: JSX.Element;
 };
 
-// Flash plays a 1s yellow-to-transparent background animation every
-// time `value` changes. The initial mount is skipped (defer: true) so
-// nothing flashes on page load. Uses the Web Animations API so repeated
-// changes reliably re-trigger even when the new value arrives while a
-// previous animation is still running.
+// Flash plays a scale-pop + yellow glow every time `value` changes. The
+// scale component is the primary "something changed" signal — human
+// peripheral vision is tuned to motion, so a brief 1.35× bounce draws
+// the eye far more reliably than a static background-color change on a
+// tiny numeric cell. A box-shadow halo extends the colored area beyond
+// the text bounds so the effect reads even on 1–3 character values, and
+// the fade-back after-glow gives late glances a chance to catch which
+// field moved. Initial mount is skipped via defer so nothing flashes on
+// page load.
+//
+// The Web Animations API supersedes any still-running animation on the
+// same element, so repeat changes re-trigger cleanly without needing a
+// forced reflow.
 const Flash: Component<Props> = (props) => {
   let el: HTMLSpanElement | undefined;
 
@@ -22,10 +30,35 @@ const Flash: Component<Props> = (props) => {
     on(
       () => props.value,
       () => {
-        el?.animate([{ backgroundColor: "#fefe27" }, { backgroundColor: "transparent" }], {
-          duration: 1000,
-          easing: "ease-out",
-        });
+        el?.animate(
+          [
+            {
+              transform: "scale(1)",
+              backgroundColor: "#facc15",
+              boxShadow: "0 0 0 2px #facc15",
+              offset: 0,
+            },
+            {
+              transform: "scale(1.35)",
+              backgroundColor: "#facc15",
+              boxShadow: "0 0 0 4px #facc15",
+              offset: 0.18,
+            },
+            {
+              transform: "scale(1)",
+              backgroundColor: "#facc15",
+              boxShadow: "0 0 0 2px #facc15",
+              offset: 0.5,
+            },
+            {
+              transform: "scale(1)",
+              backgroundColor: "transparent",
+              boxShadow: "0 0 0 0 transparent",
+              offset: 1,
+            },
+          ],
+          { duration: 1500, easing: "ease-out" },
+        );
       },
       { defer: true },
     ),
diff --git a/cmd/frontend/web/src/components/Zippy.tsx b/cmd/frontend/web/src/components/Zippy.tsx
index d4de960..3a9d6c1 100644
--- a/cmd/frontend/web/src/components/Zippy.tsx
+++ b/cmd/frontend/web/src/components/Zippy.tsx
@@ -1,7 +1,7 @@
 import type { Component, JSX } from "solid-js";
 
 type Props = {
-  title: string;
+  title: JSX.Element;
   open?: boolean;
   children: JSX.Element;
 };
diff --git a/cmd/frontend/web/src/env.d.ts b/cmd/frontend/web/src/env.d.ts
new file mode 100644
index 0000000..a9d3704
--- /dev/null
+++ b/cmd/frontend/web/src/env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module "*.svg" {
+  const url: string;
+  export default url;
+}
diff --git a/cmd/frontend/web/src/stores/mode.ts b/cmd/frontend/web/src/stores/mode.ts
new file mode 100644
index 0000000..eb4e236
--- /dev/null
+++ b/cmd/frontend/web/src/stores/mode.ts
@@ -0,0 +1,5 @@
+// isAdmin is fixed at page-load based on the URL. The SAME App.tsx
+// drives both /view/* and /admin/* — importing this constant lets any
+// component render admin-only affordances (e.g. the backend actions
+// kebab) without prop-drilling through the whole render tree.
+export const isAdmin = window.location.pathname.startsWith("/admin");
diff --git a/cmd/frontend/web/src/stores/state.ts b/cmd/frontend/web/src/stores/state.ts
index 32c30c2..e064b09 100644
--- a/cmd/frontend/web/src/stores/state.ts
+++ b/cmd/frontend/web/src/stores/state.ts
@@ -6,6 +6,7 @@ import type {
   StateSnapshot,
   TransitionRecord,
 } from "../types";
+import { tick } from "./tick";
 
 // FrontendState keys snapshots by maglevd name. A single store drives the
 // whole UI; reducers produce() into the right branch.
@@ -49,12 +50,26 @@ export function applyBackendTransition(maglevd: string, p: BackendEventPayload)
   );
 }
 
-export function applyFrontendTransition(maglevd: string, _p: FrontendEventPayload) {
-  // Frontend roll-up state is computed per render in the current cut, so
-  // there is nothing to update in the store. Kept as a named reducer so
-  // the SSE dispatcher has one entry per event type and future frontend
-  // state fields have a single place to land.
-  void maglevd;
+export function applyFrontendTransition(maglevd: string, p: FrontendEventPayload) {
+  setState(
+    produce((s) => {
+      const snap = s.byName[maglevd];
+      if (!snap) return;
+      const fe = snap.frontends.find((x) => x.name === p.frontend);
+      if (!fe) return;
+      fe.state = p.transition.to;
+    }),
+  );
+}
+
+export function applyVPPStatus(maglevd: string, state: string) {
+  setState(
+    produce((s) => {
+      const snap = s.byName[maglevd];
+      if (!snap) return;
+      snap.vpp_state = state;
+    }),
+  );
 }
 
 export function applyMaglevdStatus(maglevd: string, p: MaglevdStatusPayload) {
@@ -95,13 +110,31 @@ export function applyBackendEffectiveWeight(maglevd: string, address: string, we
 // Helpers used by views.
 
 export function lastTransitionAge(t?: TransitionRecord): string {
+  // Subscribe to the 1s ticker so the age string updates live as a
+  // real-time countdown. No effect on layout — the age column is
+  // unwrapped so the Flash animation never fires for these periodic
+  // updates.
+  tick();
   if (!t || !t.at_unix_ns || t.at_unix_ns <= 0) return "";
   const ms = Date.now() - t.at_unix_ns / 1e6;
-  const s = Math.floor(ms / 1000);
-  if (s < 60) return `${s}s ago`;
-  const m = Math.floor(s / 60);
-  if (m < 60) return `${m}m ago`;
-  const h = Math.floor(m / 60);
-  if (h < 48) return `${h}h ago`;
-  return `${Math.floor(h / 24)}d ago`;
+  const totalSec = Math.floor(ms / 1000);
+  // Clock skew between maglevd and the browser, plus the fact that
+  // "1s ago" reads awkwardly, means anything at or below 1s is best
+  // rendered as "now". Also catches negative values from a future-
+  // skewed server clock.
+  if (totalSec <= 1) return "now";
+  // Render the two most significant units so fresh transitions show
+  // sub-minute detail ("10m30s") while older transitions round cleanly
+  // ("1d16h"). A single unit is shown only below one minute, since
+  // "Xs" has nothing smaller beneath it.
+  const s = totalSec % 60;
+  const totalMin = Math.floor(totalSec / 60);
+  if (totalMin < 1) return `${totalSec}s ago`;
+  const m = totalMin % 60;
+  const totalHr = Math.floor(totalMin / 60);
+  if (totalHr < 1) return `${m}m${s}s ago`;
+  const h = totalHr % 24;
+  const d = Math.floor(totalHr / 24);
+  if (d < 1) return `${totalHr}h${m}m ago`;
+  return `${d}d${h}h ago`;
 }
diff --git a/cmd/frontend/web/src/stores/tick.ts b/cmd/frontend/web/src/stores/tick.ts
new file mode 100644
index 0000000..369e9b0
--- /dev/null
+++ b/cmd/frontend/web/src/stores/tick.ts
@@ -0,0 +1,18 @@
+import { createSignal } from "solid-js";
+
+// Global 5-second ticker used by relative-time helpers so their output
+// renders as a live countdown. At this cadence the age column reads like
+// a real-time clock for fresh transitions ("5s ago", "6s ago", ...) and
+// the cost is a single reactive re-run per subscribed cell per second —
+// no network, no DOM allocation, just string formatting. Identical-value
+// updates (e.g. "2h ago" → "2h ago") are cheap because Solid's JSX
+// compiler skips DOM writes when the new text matches the old.
+//
+// Reading tick() inside any reactive expression subscribes that
+// expression to the ticker; when the interval fires, every subscriber
+// re-runs. One timer drives the whole app.
+const [tick, setTick] = createSignal(0);
+
+setInterval(() => setTick((t) => t + 1), 5_000);
+
+export { tick };
diff --git a/cmd/frontend/web/src/styles/theme.css b/cmd/frontend/web/src/styles/theme.css
index 1e52d58..6417c1f 100644
--- a/cmd/frontend/web/src/styles/theme.css
+++ b/cmd/frontend/web/src/styles/theme.css
@@ -19,6 +19,13 @@
   display: inline-block;
   padding: 0 4px;
   border-radius: 3px;
+  transform-origin: center center;
+  will-change: transform, background-color, box-shadow;
+}
+/* The box-shadow halo used by Flash can extend past the cell; make sure
+ * row cells don't clip it and the animation reads in full. */
+.backend-row td {
+  overflow: visible;
 }
 
 .app {
@@ -31,14 +38,31 @@
   display: flex;
   align-items: center;
   gap: 16px;
-  padding: 12px 0;
+  padding: 4px 0;
   border-bottom: 1px solid var(--border);
   margin-bottom: 16px;
 }
 
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
 .brand strong {
   font-size: 18px;
 }
+.brand-logo {
+  display: inline-flex;
+  align-items: center;
+}
+.brand-logo img {
+  height: 56px;
+  width: 56px;
+  display: block;
+}
+.brand-logo:hover img {
+  opacity: 0.8;
+}
 .app-header .mode-tag {
   margin-left: auto;
   padding: 2px 6px;
@@ -152,6 +176,9 @@
 .frontend-header h2 {
   font-size: 16px;
   margin-bottom: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 .frontend-meta {
   display: flex;
@@ -213,6 +240,75 @@
   font-family: "SF Mono", Menlo, Consolas, monospace;
   font-size: 12px;
 }
+.backend-table th.actions,
+.backend-row td.actions {
+  width: 24px;
+  padding: 0 4px;
+  text-align: center;
+}
+
+/* ---- kebab menu ---- */
+
+.kebab-wrap {
+  position: relative;
+  display: inline-block;
+}
+.kebab-btn {
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  line-height: 1;
+  font-size: 16px;
+  color: var(--fg-muted);
+  border: 1px solid transparent;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 3px;
+}
+.kebab-btn:hover,
+.kebab-btn[aria-expanded="true"] {
+  color: var(--fg);
+  background: var(--bg-soft);
+  border-color: var(--border);
+}
+.kebab-menu {
+  position: absolute;
+  top: 22px;
+  right: 0;
+  z-index: 20;
+  min-width: 120px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  padding: 4px 0;
+}
+.kebab-item {
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  border: none;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--fg);
+}
+.kebab-item:hover {
+  background: var(--bg-soft);
+}
+.kebab-item:disabled {
+  color: var(--fg-muted);
+  cursor: wait;
+}
+.kebab-error {
+  padding: 4px 12px 8px;
+  color: var(--state-down);
+  font-size: 11px;
+  font-family: "SF Mono", Menlo, Consolas, monospace;
+  max-width: 260px;
+  white-space: normal;
+}
 
 /* ---- probe heartbeat ---- */
 
@@ -281,6 +377,26 @@
   padding: 8px 12px;
   border-top: 1px solid var(--border);
 }
+.zippy-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+.vpp-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: lowercase;
+  color: white;
+}
+.vpp-badge[data-state="connected"] {
+  background: var(--state-up);
+}
+.vpp-badge[data-state="disconnected"] {
+  background: var(--state-down);
+}
 
 .kv {
   display: grid;
diff --git a/cmd/frontend/web/src/types.ts b/cmd/frontend/web/src/types.ts
index 7fa388b..fe87795 100644
--- a/cmd/frontend/web/src/types.ts
+++ b/cmd/frontend/web/src/types.ts
@@ -11,6 +11,7 @@ export type VersionInfo = {
   version: string;
   commit: string;
   date: string;
+  admin_enabled: boolean;
 };
 
 export type TransitionRecord = {
@@ -38,6 +39,7 @@ export type FrontendSnapshot = {
   description?: string;
   src_ip_sticky: boolean;
   pools: PoolSnapshot[];
+  state?: string; // "up" | "down" | "unknown"
 };
 
 export type BackendSnapshot = {
@@ -76,11 +78,12 @@ export type StateSnapshot = {
   backends: BackendSnapshot[];
   healthchecks: HealthCheckSnapshot[];
   vpp_info?: VPPInfoSnapshot;
+  vpp_state?: string; // "connected" | "disconnected" | ""
 };
 
 export type BrowserEvent = {
   maglevd: string;
-  type: "log" | "backend" | "frontend" | "maglevd-status" | "resync";
+  type: "log" | "backend" | "frontend" | "maglevd-status" | "vpp-status" | "resync";
   at_unix_ns: number;
   payload: unknown;
 };
@@ -105,3 +108,7 @@ export type MaglevdStatusPayload = {
   connected: boolean;
   last_error?: string;
 };
+
+export type VPPStatusPayload = {
+  state: string; // "connected" | "disconnected"
+};
diff --git a/cmd/frontend/web/src/views/BackendRow.tsx b/cmd/frontend/web/src/views/BackendRow.tsx
index a945329..f09815a 100644
--- a/cmd/frontend/web/src/views/BackendRow.tsx
+++ b/cmd/frontend/web/src/views/BackendRow.tsx
@@ -1,9 +1,11 @@
-import type { Component } from "solid-js";
+import { Show, type Component } from "solid-js";
 import type { BackendSnapshot, PoolBackendSnapshot } from "../types";
 import StatusBadge from "../components/StatusBadge";
 import ProbeHeartbeat from "../components/ProbeHeartbeat";
 import Flash from "../components/Flash";
+import BackendActionsMenu from "../components/BackendActionsMenu";
 import { lastTransitionAge } from "../stores/state";
+import { isAdmin } from "../stores/mode";
 
 type Props = {
   maglevd: string;
@@ -33,6 +35,11 @@ const BackendRow: Component<Props> = (props) => {
         <Flash value={props.poolBackend.effective_weight} />
       </td>
       <td class="age">{lastTransitionAge(b().last_transition)}</td>
+      <Show when={isAdmin}>
+        <td class="actions">
+          <BackendActionsMenu maglevd={props.maglevd} backend={b().name} state={b().state} />
+        </td>
+      </Show>
     </tr>
   );
 };
diff --git a/cmd/frontend/web/src/views/FrontendCard.tsx b/cmd/frontend/web/src/views/FrontendCard.tsx
index bf44ee3..061836d 100644
--- a/cmd/frontend/web/src/views/FrontendCard.tsx
+++ b/cmd/frontend/web/src/views/FrontendCard.tsx
@@ -1,6 +1,9 @@
-import { For, type Component } from "solid-js";
+import { For, Show, type Component } from "solid-js";
 import type { FrontendSnapshot, StateSnapshot } from "../types";
 import BackendRow from "./BackendRow";
+import StatusBadge from "../components/StatusBadge";
+import Flash from "../components/Flash";
+import { isAdmin } from "../stores/mode";
 
 type Props = {
   snap: StateSnapshot;
@@ -14,7 +17,12 @@ const FrontendCard: Component<Props> = (props) => {
   return (
     <section class="frontend-card">
       <header class="frontend-header">
-        <h2>{fe().name}</h2>
+        <h2>
+          {fe().name}
+          <Flash value={fe().state ?? "unknown"}>
+            <StatusBadge state={fe().state ?? "unknown"} />
+          </Flash>
+        </h2>
         <div class="frontend-meta">
           <span class="addr">
             {fe().address}:{fe().port}
@@ -38,6 +46,9 @@ const FrontendCard: Component<Props> = (props) => {
                   <th class="numeric">weight</th>
                   <th class="numeric">effective</th>
                   <th>last transition</th>
+                  <Show when={isAdmin}>
+                    <th class="actions" />
+                  </Show>
                 </tr>
               </thead>
               <tbody>
diff --git a/cmd/frontend/web/src/views/Overview.tsx b/cmd/frontend/web/src/views/Overview.tsx
index 552f92b..dbf7dcf 100644
--- a/cmd/frontend/web/src/views/Overview.tsx
+++ b/cmd/frontend/web/src/views/Overview.tsx
@@ -24,7 +24,7 @@ const Overview: Component = () => {
             <div class="frontend-grid">
               <For each={s().frontends}>{(fe) => <FrontendCard snap={s()} frontend={fe} />}</For>
             </div>
-            <VPPInfoPanel info={s().vpp_info} />
+            <VPPInfoPanel info={s().vpp_info} state={s().vpp_state} />
           </>
         )}
       </Show>
diff --git a/cmd/frontend/web/src/views/VPPInfoPanel.tsx b/cmd/frontend/web/src/views/VPPInfoPanel.tsx
index dbe375f..51e014c 100644
--- a/cmd/frontend/web/src/views/VPPInfoPanel.tsx
+++ b/cmd/frontend/web/src/views/VPPInfoPanel.tsx
@@ -1,28 +1,49 @@
-import type { Component } from "solid-js";
+import { Show, type Component } from "solid-js";
 import Zippy from "../components/Zippy";
+import Flash from "../components/Flash";
 import type { VPPInfoSnapshot } from "../types";
 
-type Props = { info?: VPPInfoSnapshot };
+type Props = {
+  info?: VPPInfoSnapshot;
+  state?: string; // "connected" | "disconnected" | ""
+};
 
 const VPPInfoPanel: Component<Props> = (props) => {
-  if (!props.info) return null;
-  const i = props.info;
-  const boot = i.boottime_ns ? new Date(i.boottime_ns / 1e6).toISOString() : "";
-  const conn = i.connecttime_ns ? new Date(i.connecttime_ns / 1e6).toISOString() : "";
+  const boot = () =>
+    props.info?.boottime_ns ? new Date(props.info.boottime_ns / 1e6).toISOString() : "";
+  const conn = () =>
+    props.info?.connecttime_ns ? new Date(props.info.connecttime_ns / 1e6).toISOString() : "";
+  const label = () => (props.state === "connected" ? "connected" : "disconnected");
+
+  const title = (
+    <span class="zippy-title">
+      VPP
+      <Flash value={label()}>
+        <span class="vpp-badge" data-state={label()}>
+          {label()}
+        </span>
+      </Flash>
+    </span>
+  );
+
   return (
-    <Zippy title="VPP information">
-      <dl class="kv">
-        <dt>version</dt>
-        <dd>{i.version}</dd>
-        <dt>build date</dt>
-        <dd>{i.build_date}</dd>
-        <dt>pid</dt>
-        <dd>{i.pid}</dd>
-        <dt>booted</dt>
-        <dd>{boot}</dd>
-        <dt>connected</dt>
-        <dd>{conn}</dd>
-      </dl>
+    <Zippy title={title}>
+      <Show when={props.info} fallback={<p class="empty">No VPP information available.</p>}>
+        {(i) => (
+          <dl class="kv">
+            <dt>version</dt>
+            <dd>{i().version}</dd>
+            <dt>build date</dt>
+            <dd>{i().build_date}</dd>
+            <dt>pid</dt>
+            <dd>{i().pid}</dd>
+            <dt>booted</dt>
+            <dd>{boot()}</dd>
+            <dt>connected</dt>
+            <dd>{conn()}</dd>
+          </dl>
+        )}
+      </Show>
     </Zippy>
   );
 };
diff --git a/debian/build-deb.sh b/debian/build-deb.sh
index 73391a8..1eccfca 100755
--- a/debian/build-deb.sh
+++ b/debian/build-deb.sh
@@ -1,15 +1,18 @@
 #!/bin/bash
 # Build a vpp-maglev Debian package for one architecture.
-# Usage: build-deb.sh <amd64|arm64> <version> <commit>
+# Usage: build-deb.sh <amd64|arm64> <version>
+#
+# The commit hash is baked into the binaries at link time via -ldflags
+# in the Makefile, so `maglevd --version` / `maglevc --version` /
+# `maglev-frontend --version` are the source of truth for "which
+# build". The .deb itself carries only the release version.
 set -euo pipefail
 
-ARCH="${1:?usage: build-deb.sh <amd64|arm64> <version> <commit>}"
-VERSION="${2:?usage: build-deb.sh <amd64|arm64> <version> <commit>}"
-COMMIT="${3:?usage: build-deb.sh <amd64|arm64> <version> <commit>}"
+ARCH="${1:?usage: build-deb.sh <amd64|arm64> <version>}"
+VERSION="${2:?usage: build-deb.sh <amd64|arm64> <version>}"
 
-FULL_VERSION="${VERSION}~${COMMIT}"
 REPO_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
-PKG="vpp-maglev_${FULL_VERSION}_${ARCH}"
+PKG="vpp-maglev_${VERSION}_${ARCH}"
 STAGING="$(mktemp -d)"
 trap 'rm -rf "$STAGING"' EXIT
 
@@ -26,15 +29,18 @@ install -d "$STAGING/etc/vpp-maglev"
 install -d "$STAGING/DEBIAN"
 
 # Binaries
-install -m 755 "$REPO_ROOT/build/${ARCH}/maglevd" "$STAGING/usr/sbin/maglevd"
-install -m 755 "$REPO_ROOT/build/${ARCH}/maglevc" "$STAGING/usr/bin/maglevc"
+install -m 755 "$REPO_ROOT/build/${ARCH}/maglevd"         "$STAGING/usr/sbin/maglevd"
+install -m 755 "$REPO_ROOT/build/${ARCH}/maglevc"         "$STAGING/usr/bin/maglevc"
+install -m 755 "$REPO_ROOT/build/${ARCH}/maglev-frontend" "$STAGING/usr/bin/maglev-frontend"
 
 # Man pages
-gzip -9 -c "$REPO_ROOT/docs/maglevd.8" > "$STAGING/usr/share/man/man8/maglevd.8.gz"
-gzip -9 -c "$REPO_ROOT/docs/maglevc.1" > "$STAGING/usr/share/man/man1/maglevc.1.gz"
+gzip -9 -c "$REPO_ROOT/docs/maglevd.8"         > "$STAGING/usr/share/man/man8/maglevd.8.gz"
+gzip -9 -c "$REPO_ROOT/docs/maglevc.1"         > "$STAGING/usr/share/man/man1/maglevc.1.gz"
+gzip -9 -c "$REPO_ROOT/docs/maglev-frontend.8" > "$STAGING/usr/share/man/man8/maglev-frontend.8.gz"
 
-# Systemd unit
-install -m 644 "$REPO_ROOT/debian/vpp-maglevd.service" "$STAGING/lib/systemd/system/vpp-maglevd.service"
+# Systemd units
+install -m 644 "$REPO_ROOT/debian/vpp-maglev.service"          "$STAGING/lib/systemd/system/vpp-maglev.service"
+install -m 644 "$REPO_ROOT/debian/vpp-maglev-frontend.service" "$STAGING/lib/systemd/system/vpp-maglev-frontend.service"
 
 # /etc/default/vpp-maglev  (conffile — dpkg won't overwrite on upgrade)
 install -m 644 "$REPO_ROOT/debian/default.vpp-maglev" "$STAGING/etc/default/vpp-maglev"
@@ -42,8 +48,8 @@ install -m 644 "$REPO_ROOT/debian/default.vpp-maglev" "$STAGING/etc/default/vpp-
 # /etc/vpp-maglev/maglev.yaml  (conffile)
 install -m 644 "$REPO_ROOT/debian/maglev.yaml" "$STAGING/etc/vpp-maglev/maglev.yaml"
 
-# DEBIAN/control  (version field uses full_version including commit)
-sed "s/@VERSION@/${FULL_VERSION}/;s/@ARCH@/${ARCH}/" \
+# DEBIAN/control
+sed "s/@VERSION@/${VERSION}/;s/@ARCH@/${ARCH}/" \
     "$REPO_ROOT/debian/control.in" > "$STAGING/DEBIAN/control"
 
 # DEBIAN/conffiles, postinst, prerm, postrm
diff --git a/debian/control.in b/debian/control.in
index bb88a62..c8640a9 100644
--- a/debian/control.in
+++ b/debian/control.in
@@ -5,10 +5,15 @@ Maintainer: Pim van Pelt <pim@ipng.ch>
 Section: net
 Priority: optional
 Depends: systemd, adduser
-Description: Maglev health-checker daemon and CLI client
+Description: Maglev health-checker daemon, CLI client, and web frontend
  maglevd monitors backends (HTTP, TCP, ICMP) with a rise/fall counter
  model and exposes their aggregated state over a gRPC API. Configuration
  is loaded from a YAML file and supports live reload via SIGHUP.
  .
  maglevc is an interactive CLI client for maglevd with tab completion,
  inline help, and one-shot mode for scripting.
+ .
+ maglev-frontend is an optional web dashboard that fans one or more
+ maglevd gRPC streams out to browsers over Server-Sent Events. It is
+ installed but not enabled by default; enable with:
+   systemctl enable --now vpp-maglev-frontend
diff --git a/debian/default.vpp-maglev b/debian/default.vpp-maglev
index 80f10d5..e061c45 100644
--- a/debian/default.vpp-maglev
+++ b/debian/default.vpp-maglev
@@ -1,6 +1,12 @@
-# Default settings for maglevd.
-# This file is sourced by /lib/systemd/system/vpp-maglevd.service.
-# After editing, run: systemctl restart vpp-maglevd
+# Default settings for the vpp-maglev package.
+# This file is sourced by:
+#   /lib/systemd/system/vpp-maglev.service
+#   /lib/systemd/system/vpp-maglev-frontend.service
+# After editing, restart the relevant unit(s):
+#   systemctl restart vpp-maglev
+#   systemctl restart vpp-maglev-frontend
+
+# ---- maglevd ---------------------------------------------------------------
 
 # Path to the YAML configuration file.
 MAGLEV_CONFIG=/etc/vpp-maglev/maglev.yaml
@@ -10,3 +16,13 @@ MAGLEV_CONFIG=/etc/vpp-maglev/maglev.yaml
 
 # Log level: debug, info, warn, error (default: info)
 #MAGLEV_LOG_LEVEL=info
+
+# ---- maglev-frontend -------------------------------------------------------
+# The web dashboard is installed but not enabled by default. Enable with
+#   systemctl enable --now vpp-maglev-frontend
+# after reviewing the arguments below.
+
+# Command-line arguments passed to /usr/bin/maglev-frontend. At minimum
+# -server is required (comma-separated list of maglevd gRPC addresses).
+# -listen controls the HTTP bind address. See maglev-frontend(8).
+MAGLEV_FRONTEND_ARGS="-server localhost:9090 -listen=:8080"
diff --git a/debian/postinst b/debian/postinst
index b44dd14..c5cb4c5 100644
--- a/debian/postinst
+++ b/debian/postinst
@@ -16,7 +16,20 @@ case "$1" in
             adduser --quiet maglevd vpp || true
         fi
 
+        # Upgrade path: older versions of this package shipped the
+        # daemon unit as vpp-maglevd.service. Stop and disable it so
+        # the rename to vpp-maglev.service takes effect cleanly; the
+        # old unit file itself is removed automatically because the
+        # new package no longer owns it.
+        if systemctl list-unit-files vpp-maglevd.service > /dev/null 2>&1; then
+            systemctl stop vpp-maglevd.service || true
+            systemctl disable vpp-maglevd.service || true
+        fi
+
         systemctl daemon-reload || true
-        systemctl enable vpp-maglevd.service || true
+        systemctl enable vpp-maglev.service || true
+        # vpp-maglev-frontend is intentionally NOT enabled here: the
+        # operator decides whether to expose the web dashboard. Enable
+        # with:  systemctl enable --now vpp-maglev-frontend
         ;;
 esac
diff --git a/debian/prerm b/debian/prerm
index c1f4aaa..2400c7a 100644
--- a/debian/prerm
+++ b/debian/prerm
@@ -2,7 +2,9 @@
 set -e
 case "$1" in
     remove|purge)
-        systemctl stop vpp-maglevd.service || true
-        systemctl disable vpp-maglevd.service || true
+        systemctl stop vpp-maglev.service || true
+        systemctl disable vpp-maglev.service || true
+        systemctl stop vpp-maglev-frontend.service || true
+        systemctl disable vpp-maglev-frontend.service || true
         ;;
 esac
diff --git a/debian/vpp-maglev-frontend.service b/debian/vpp-maglev-frontend.service
new file mode 100644
index 0000000..519acb4
--- /dev/null
+++ b/debian/vpp-maglev-frontend.service
@@ -0,0 +1,23 @@
+[Unit]
+Description=Maglev web frontend dashboard
+Documentation=man:maglev-frontend(8)
+After=network-online.target
+Wants=network-online.target
+
+[Service]
+User=maglevd
+Group=maglevd
+EnvironmentFile=/etc/default/vpp-maglev
+ExecStart=/usr/bin/maglev-frontend $MAGLEV_FRONTEND_ARGS
+Restart=on-failure
+RestartSec=5s
+Type=simple
+
+# Read-only presentation layer — needs no capabilities.
+NoNewPrivileges=yes
+ProtectSystem=strict
+ProtectHome=yes
+PrivateTmp=yes
+
+[Install]
+WantedBy=multi-user.target
diff --git a/debian/vpp-maglevd.service b/debian/vpp-maglev.service
similarity index 100%
rename from debian/vpp-maglevd.service
rename to debian/vpp-maglev.service
diff --git a/docs/maglev-frontend.8 b/docs/maglev-frontend.8
new file mode 100644
index 0000000..fd406c2
--- /dev/null
+++ b/docs/maglev-frontend.8
@@ -0,0 +1,178 @@
+.TH MAGLEV\-FRONTEND 8 "April 2026" "vpp\-maglev" "System Administration"
+.SH NAME
+maglev\-frontend \- web dashboard for one or more running maglevd instances
+.SH SYNOPSIS
+.B maglev\-frontend
+\fB\-server\fR \fIaddr\fR[,\fIaddr\fR...]
+[\fB\-listen\fR \fIaddr\fR]
+[\fB\-log\-level\fR \fIlevel\fR]
+[\fB\-version\fR]
+.SH DESCRIPTION
+.B maglev\-frontend
+is a single\-binary web dashboard that connects to one or more running
+.BR maglevd (8)
+instances over gRPC and renders a live view of frontends, backends,
+health checks, and VPP load\-balancer state. The SolidJS SPA is
+embedded into the Go binary via
+.BR embed.FS ,
+so no runtime file dependencies are required; pointing the binary at
+one or more maglevds with
+.B \-server
+is enough to serve the dashboard.
+.PP
+For each configured maglevd,
+.B maglev\-frontend
+maintains:
+.IP \(bu 2
+A long\-lived
+.B WatchEvents
+gRPC stream subscribed at
+.BR log_level=debug ,
+which delivers backend transitions, frontend transitions, per\-probe
+log records (used to drive the live probe heartbeat), and per\-mutation
+VPP LB sync records so the UI reflects every dataplane change in real
+time.
+.IP \(bu 2
+A 30\-second refresh loop that re\-fetches
+.BR ListFrontends / GetFrontend ,
+.BR ListBackends / GetBackend ,
+.BR ListHealthChecks / GetHealthCheck ,
+and
+.B GetVPPInfo
+as a safety net against missed events.
+.IP \(bu 2
+A 5\-second health probe that surfaces maglevd connection drops
+quickly and flips the scope\-selector indicator dot red.
+.PP
+Browsers connect to
+.B maglev\-frontend
+over HTTP. State is hydrated once via REST and then kept live via a
+Server\-Sent Events stream. Short SSE disconnects (nginx idle timeout,
+wifi flap, laptop wake) are handled silently via a 30\-second replay
+ring buffer; longer outages fall through to a full refetch. The SPA
+is stateless on reload so refreshing the page at any time returns a
+consistent view.
+.SH OPTIONS
+Each flag may also be supplied via an environment variable (shown in
+parentheses); the flag takes precedence.
+.TP
+.BI \-server " addr[,addr...]"
+Comma\-separated list of maglevd gRPC addresses. Required. Each
+entry is in
+.I host:port
+form; a short display name is derived from the hostname label (for
+IP literals the full address is used).
+.RI "(env: " MAGLEV_SERVERS )
+.TP
+.BI \-listen " addr"
+HTTP bind address for the dashboard.
+.RI "(default: " :8080 "; env: " MAGLEV_LISTEN )
+.TP
+.BI \-log\-level " level"
+Structured\-log verbosity:
+.BR debug ,
+.BR info ,
+.BR warn ,
+or
+.BR error .
+Affects
+.B maglev\-frontend 's
+own logs, not the log level it subscribes to on the upstream maglevd
+(which is always
+.BR debug
+so the probe heartbeat can animate).
+.RI "(default: " info "; env: " MAGLEV_LOG_LEVEL )
+.TP
+.B \-version
+Print version, commit hash, and build date, then exit.
+.SH HTTP ENDPOINTS
+.TP
+.I /view/
+Static SPA (HTML, JS, CSS, assets).
+.TP
+.I /view/api/maglevds
+JSON array describing the configured maglevds and their current
+connection status.
+.TP
+.I /view/api/state
+Full JSON state snapshot for every maglevd.
+.TP
+.I /view/api/state/{name}
+Full JSON state snapshot for a single maglevd.
+.TP
+.I /view/api/version
+Build version, commit hash, and build date.
+.TP
+.I /view/api/events
+Server\-Sent Events stream. Long\-lived HTTP/1.1 chunked response
+fanning out log, backend, frontend, maglevd\-status, and vpp\-status
+events to every connected browser. Supports
+.B Last\-Event\-ID
+replay from a 30\-second / 2000\-event ring buffer.
+.TP
+.I /healthz
+Liveness endpoint; returns 200 if the HTTP server is up.
+.TP
+.I /admin/
+Placeholder for a future basic\-auth mutation surface. Currently
+returns
+.B 501 Not Implemented .
+.SH REVERSE PROXY NOTES
+The SSE stream has a handful of operational requirements that every
+reverse proxy must satisfy:
+.IP \(bu 2
+Disable buffering on the events endpoint. Nginx honours
+.B X\-Accel\-Buffering: no
+(sent by
+.BR maglev\-frontend )
+but a global
+.B proxy_buffering off;
+in the server block is the more robust answer.
+.IP \(bu 2
+Raise
+.B proxy_read_timeout
+to at least
+.BR 300s
+so the stream isn't torn down between the 15\-second
+.B :\ ping
+heartbeats that
+.B maglev\-frontend
+sends.
+.IP \(bu 2
+Do not wrap the events endpoint in a gzip/brotli middleware — response
+compression buffers until its window fills and destroys the live\-stream
+property.
+.SH ENVIRONMENT
+.TP
+.B MAGLEV_SERVERS
+Default value of
+.BR \-server .
+.TP
+.B MAGLEV_LISTEN
+Default value of
+.BR \-listen .
+.TP
+.B MAGLEV_LOG_LEVEL
+Default value of
+.BR \-log\-level .
+.SH FILES
+.TP
+.I /etc/default/vpp-maglev
+Environment file sourced by the systemd unit before starting
+.BR maglev\-frontend .
+The same file is shared with
+.BR maglevd (8);
+the
+.B MAGLEV_FRONTEND_ARGS
+variable there is passed on the command line to
+.B maglev\-frontend .
+.SH SEE ALSO
+.BR maglevd (8),
+.BR maglevc (1)
+.SH "FULL DOCUMENTATION"
+.PP
+.RS
+https://git.ipng.ch/ipng/vpp-maglev/docs/user-guide.md
+.RE
+.SH AUTHOR
+Pim van Pelt <pim@ipng.ch>