Frontend: live clocks, admin mode, backend actions; packaging polish

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.

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;

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 },
     ),

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;
 };