swarm-ui, hive dashboard, agent page: one profile menu with the signed-in user, avatar and authelia links

The swarm UI's user menu moves to @hive/shared and takes the whoami URL and
authelia's URL as props; the swarm UI keeps a thin wrapper, and the hive
dashboard and the per-agent page mount the same component. The dashboard's
nginx vhost proxies /api/whoami to authelia (the agent page is served from
the same vhost), and hive-c0re's state carries authelia_public_url, set from
services.hyperhive.swarm.authelia.url. The agent page shows the menu only
behind the gateway.

frontend/packages/shared/package.json

@@ -53,7 +53,9 @@
     "./motion-apply.js": "./src/settings/motion-apply.ts",
     "./settings-menu.js": "./src/settings/SettingsMenu.tsx",
     "./hide-debug-setting.js": "./src/settings/HideDebugSetting.tsx",
-    "./settings-menu.css": "./src/settings/SettingsMenu.css"
+    "./settings-menu.css": "./src/settings/SettingsMenu.css",
+    "./user-menu.js": "./src/user-menu/UserMenu.tsx",
+    "./user-menu.css": "./src/user-menu/UserMenu.css"
   },
   "files": [
     "src/"

frontend/packages/shared/src/user-menu/UserMenu.css

@@ -0,0 +1,92 @@
+/* <UserMenu> (@hive/shared) — same header icon-button + popover chrome as
+   `LinksMenu`/`SettingsMenu`, except the trigger is a round, accent-
+   coloured initials avatar rather than a glyph-on-transparent button —
+   this is the "who is this" affordance, the other two are quiet chrome.
+   Kept as its own stylesheet for the same reason `SettingsMenu.css`
+   gives: three small, independently-evolving popovers that happen to
+   look alike today, not one component with three skins. */
+.user-menu {
+  position: relative;
+}
+.user-menu-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75em;
+  height: 2.75em;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 1em;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  text-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.35);
+}
+.user-menu-button:hover,
+.user-menu-button[aria-expanded="true"] {
+  border-color: var(--fg);
+}
+.user-menu-popover {
+  position: absolute;
+  top: calc(100% + 0.4em);
+  right: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  min-width: 12em;
+  padding: 0.4em;
+  border: 1px solid var(--border);
+  border-radius: 0.5em;
+  background: var(--bg-elev);
+  box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.3);
+  animation: user-menu-popover-enter 140ms ease;
+}
+/* Mount-triggered, same shape as `LinksMenu.css`'s own version — see
+   its comment for why a keyframe (not a transition) is the right tool
+   here. */
+@keyframes user-menu-popover-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-0.25em) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .user-menu-popover {
+    animation: none;
+  }
+}
+:root[data-motion="reduce"] .user-menu-popover {
+  animation: none;
+}
+:root[data-motion="allow"] .user-menu-popover {
+  animation: user-menu-popover-enter 140ms ease;
+}
+.user-menu-name {
+  padding: 0.4em 0.6em 0.5em;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 0.3em;
+  color: var(--muted);
+  font-size: 0.85em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.user-menu-item {
+  display: flex;
+  align-items: center;
+  min-height: 2.75em;
+  padding: 0.4em 0.6em;
+  border-radius: 0.35em;
+  color: var(--fg);
+  text-decoration: none;
+  white-space: nowrap;
+}
+.user-menu-item:hover {
+  background: var(--bg);
+}

frontend/packages/shared/src/user-menu/UserMenu.tsx

@@ -0,0 +1,122 @@
+// <UserMenu> — the profile affordance in a header's top-right corner: an
+// initials avatar button opening a popover with the signed-in name, a link
+// to authelia's own account settings, and a sign-out link. The swarm UI, the
+// hive dashboard and the per-agent page all mount this one, so they look and
+// behave the same. Same icon-button + popover chrome as `SettingsMenu`.
+//
+// Who: `auth_request` only answers yes or no, never *who*. The name comes from
+// authelia's `GET /api/user/info`, which each UI's nginx vhost proxies at
+// `/api/whoami` on its own origin, so the browser sends the session cookie
+// and no CORS is involved. A fetch that fails leaves the avatar as a "?".
+//
+// Avatar: authelia has no photo field, so it is generated from the initials
+// (no third-party call: gravatar would leak a hashed e-mail on every load).
+//
+// Styles live in `@hive/shared/user-menu.css`, which the mounting page
+// imports or `@import`s itself: the dashboard's JS bundle loads `.css`
+// imports as text, so a component that imported it would not style there.
+import { useEffect, useRef, useState } from "preact/hooks";
+import {
+  accountLinks,
+  initialOf,
+  labelOf,
+  parseWhoAmI,
+  pickAccent,
+  type WhoAmI,
+} from "./identity.js";
+
+export function UserMenu({
+  whoamiUrl,
+  autheliaUrl,
+}: {
+  // Where the signed-in user is asked for, on this page's own origin.
+  whoamiUrl: string;
+  // Authelia's base URL, for the settings and sign-out links; none when it
+  // is not known, and the menu then shows only the name.
+  autheliaUrl: string | null;
+}) {
+  const [who, setWho] = useState<WhoAmI | null>(null);
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch(whoamiUrl)
+      .then((r) =>
+        r.ok ? r.json() : Promise.reject(new Error(`http ${r.status}`)),
+      )
+      .then((body) => {
+        if (!cancelled) setWho(parseWhoAmI(body));
+      })
+      .catch(() => {
+        if (!cancelled) setWho(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [whoamiUrl]);
+
+  // Close on an outside click or Escape, as `SettingsMenu` does.
+  useEffect(() => {
+    if (!open) return;
+    function onPointerDown(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node))
+        setOpen(false);
+    }
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+
+  const label = labelOf(who);
+  const links = accountLinks(autheliaUrl);
+
+  return (
+    <div class="user-menu" ref={rootRef}>
+      <button
+        type="button"
+        class="user-menu-button"
+        style={{ background: pickAccent(label ?? "operator") }}
+        aria-haspopup="true"
+        aria-expanded={open}
+        aria-label={label ? `signed in as ${label}` : "account"}
+        onClick={() => setOpen((v) => !v)}
+      >
+        {initialOf(label)}
+      </button>
+      {open ? (
+        <div class="user-menu-popover" role="menu">
+          {label ? <div class="user-menu-name">{label}</div> : null}
+          {links ? (
+            <>
+              <a
+                class="user-menu-item"
+                href={links.settings}
+                target="_blank"
+                rel="noreferrer"
+                role="menuitem"
+                onClick={() => setOpen(false)}
+              >
+                authelia settings
+              </a>
+              <a
+                class="user-menu-item"
+                href={links.logout}
+                role="menuitem"
+                onClick={() => setOpen(false)}
+              >
+                log out
+              </a>
+            </>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}

frontend/packages/shared/src/user-menu/identity.ts

@@ -0,0 +1,63 @@
+// What <UserMenu> shows of the signed-in user: the name and e-mail authelia
+// reports, the initials avatar built from them, and the authelia pages the
+// menu links. Pure, so the swarm UI's tests can run it.
+
+export interface WhoAmI {
+  displayName: string | null;
+  email: string | null;
+}
+
+// The seven chromatic theme colours the avatar is picked from, by name.
+const AVATAR_ACCENTS = [
+  "var(--red)",
+  "var(--yellow)",
+  "var(--green)",
+  "var(--cyan)",
+  "var(--blue)",
+  "var(--purple)",
+  "var(--pink)",
+];
+
+/** A colour for `seed`: the same name always gets the same one. */
+export function pickAccent(seed: string): string {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i++)
+    hash = (hash * 31 + seed.charCodeAt(i)) | 0;
+  return AVATAR_ACCENTS[Math.abs(hash) % AVATAR_ACCENTS.length];
+}
+
+/**
+ * Lenient parse of authelia's `GET /api/user/info`, which wraps its answer in
+ * a `{status, data}` envelope. The menu is cosmetic, so a shape that is not
+ * recognised gives no name rather than an error.
+ */
+export function parseWhoAmI(body: unknown): WhoAmI {
+  const record = (body ?? {}) as Record<string, unknown>;
+  const data = (record.data ?? record) as Record<string, unknown>;
+  const displayName =
+    typeof data.display_name === "string" ? data.display_name : null;
+  const emails = Array.isArray(data.emails) ? data.emails : null;
+  const email =
+    emails && typeof emails[0] === "string" ? (emails[0] as string) : null;
+  return { displayName, email };
+}
+
+/** The name to show: the display name, else the e-mail, else none. */
+export function labelOf(who: WhoAmI | null): string | null {
+  return who?.displayName || who?.email || null;
+}
+
+/** The letter in the avatar, or "?" when there is no name. */
+export function initialOf(label: string | null): string {
+  return label ? label.trim().charAt(0).toUpperCase() : "?";
+}
+
+/** Authelia's settings and sign-out pages under `autheliaUrl`, if it is known. */
+export function accountLinks(
+  autheliaUrl: string | null,
+): { settings: string; logout: string } | null {
+  if (!autheliaUrl) return null;
+  // The trailing slash comes off so `/settings` appends cleanly.
+  const base = autheliaUrl.replace(/\/+$/, "");
+  return { settings: `${base}/settings`, logout: `${base}/logout` };
+}