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.

docs/swarm/ui.md

@@ -7,6 +7,10 @@ domain, covers host-level detail for one hive.
 
 ## What it shows
 
+The signed-in user's avatar sits at the right end of the header on every page.
+It opens a menu with the user's name and links to authelia's settings and
+sign-out pages; the hive dashboard and the per-agent page have the same menu.
+
 | route                                          | what                                                                                                                                                                                                                         |
 | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `/`                                            | the start page: the swarm's name over a digital-rain backdrop, plus a paperclip offering to set up an agent while no `ruth` exists (it opens the create form with `ruth` filled in); the swarm name in the header links here |

docs/web-ui/agent.md

@@ -70,6 +70,13 @@ at a given viewport width. Two columns:
     unprivileged process can't make directly).
   - **Inbox / todos pills** (`📬 inbox · N` / `📋 todos · N`): hidden
     when empty; selecting it opens the matching flyout in the side panel.
+  - **Profile avatar**: the signed-in user's initial, opening a popover with
+    their name and links to authelia's settings and sign-out pages, as on the
+    dashboard (`AgentUserMenu.tsx`). It shows only behind the gateway, where
+    the page shares the dashboard's origin and session; opened on the agent's
+    own port there is no sign-in and no avatar. The name comes from the
+    dashboard's `/api/whoami`, authelia's URL from the dashboard's
+    `/api/state`.
   - **Links badge** (`🔗`): opens a popover listing `↑ dashboard`
     (back-link to the host dashboard, `${dashboardBase}`)
     followed by this agent's `agent_links()`-sourced navigation (stats,

docs/web-ui/dashboard.md

@@ -24,6 +24,15 @@ dashboard tab strip.
   comes from `state.swarm_public_url`, which hive-c0re reads from
   `HIVE_SWARM_PUBLIC_URL` (set from `services.hyperhive.swarm.domain`);
   with no domain set there is no swarm entry. The standalone pages link back to `/`.
+- **Profile menu**: the signed-in user's avatar at the right end of the
+  chrome (`user-menu.js`, the same component as the swarm UI's and the agent
+  page's). It opens a popover with the user's name and links to authelia's
+  settings and sign-out pages. The name comes from `/api/whoami`, which the
+  dashboard's nginx vhost proxies to authelia, and the links from
+  `state.authelia_public_url`, which hive-c0re reads from
+  `HIVE_AUTHELIA_PUBLIC_URL` (set from `services.hyperhive.swarm.authelia.url`).
+  If the name doesn't load the avatar shows a question mark, and without the URL the
+  popover has no links.
 - **Tab strip**: `◆ 4G3NTS ◆`, `◆ R3BU1LD QU3U3 ◆`, `◆ M3T4 1NPUTS ◆`,
   `◆ BUILD L0GS ◆`, `◆ K3PT ST4T3 ◆`. In-page tabs only — ST4TS
   lives on its own page, reached from the pages menu. Count pills on

frontend/packages/agent/src/Root.tsx

@@ -11,6 +11,7 @@ import { useApplyThemeOverride } from "@hive/shared/theme-apply.js";
 import { useApplyMotionOverride } from "@hive/shared/motion-apply.js";
 import { Header } from "./components/Header.js";
 import { MetaNav } from "./components/MetaNav.js";
+import { AgentUserMenu } from "./components/AgentUserMenu.js";
 import { ExpandDetailsSetting } from "./components/ExpandDetailsSetting.js";
 import { HideDebugSetting } from "@hive/shared/hide-debug-setting.js";
 import { StatusChips } from "./components/StatusChips.js";
@@ -176,6 +177,11 @@ export function Root() {
         <ExpandDetailsSetting />
         <HideDebugSetting />
       </SettingsMenu>
+      {state ? (
+        <AgentUserMenu
+          dashboardBase={resolveDashboardBase(state.dashboard_port)}
+        />
+      ) : null}
     </>
   );
   // Kept mounted regardless of `openPanel` (open/closed toggles just the

frontend/packages/agent/src/components/AgentUserMenu.tsx

@@ -0,0 +1,44 @@
+// <AgentUserMenu> — the profile menu (`@hive/shared/user-menu.js`) in this
+// page's header. Only behind the gateway: the page is then on the dashboard's
+// own origin, where the session cookie is valid and nginx proxies
+// `/api/whoami` to authelia. Opened directly on the agent's own port there is
+// no sign-in to show, so the page has no menu.
+//
+// Authelia's URL, for the settings and sign-out links, comes from the
+// dashboard's `/api/state` (`authelia_public_url`), the one place hive-c0re
+// states it.
+import { useEffect, useState } from "preact/hooks";
+import { UserMenu } from "@hive/shared/user-menu.js";
+import "@hive/shared/user-menu.css";
+import { isBehindGateway } from "../lib/dashboardBase.js";
+
+export function AgentUserMenu({ dashboardBase }: { dashboardBase: string }) {
+  const behind = isBehindGateway();
+  const [autheliaUrl, setAutheliaUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!behind) return;
+    let cancelled = false;
+    fetch(`${dashboardBase}api/state`)
+      .then((r) =>
+        r.ok ? r.json() : Promise.reject(new Error(`http ${r.status}`)),
+      )
+      .then((state: { authelia_public_url?: string | null }) => {
+        if (!cancelled) setAutheliaUrl(state.authelia_public_url ?? null);
+      })
+      .catch(() => {
+        /* cosmetic only: the menu then shows the name without the links */
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [behind, dashboardBase]);
+
+  if (!behind) return null;
+  return (
+    <UserMenu
+      whoamiUrl={`${dashboardBase}api/whoami`}
+      autheliaUrl={autheliaUrl}
+    />
+  );
+}

frontend/packages/agent/src/lib/dashboardBase.ts

@@ -4,8 +4,13 @@
 // a relative path. Behind the gateway this page lives at
 // `/agent/<name>/` on the dashboard's own origin (`location.origin`);
 // accessed directly, it's the same host on `dashboardPort`.
+/** Whether this page is served through the gateway, on the dashboard's origin. */
+export function isBehindGateway(): boolean {
+  return location.pathname.startsWith("/agent/");
+}
+
 export function resolveDashboardBase(dashboardPort: number): string {
-  return location.pathname.startsWith("/agent/")
+  return isBehindGateway()
     ? location.origin + "/"
     : `${location.protocol}//${location.hostname}:${dashboardPort}/`;
 }

frontend/packages/dashboard/src/dashboard.css

@@ -7,6 +7,7 @@
 @import "./system-sections.css";
 @import "@hive/shared/jobq-rollup.css";
 @import "@hive/shared/jobq-graph.css";
+@import "@hive/shared/user-menu.css";
 
 /* ─── tabbed dashboard chrome ──────────────────────────────────────
    Top-of-page sticky header with banner + tab strip. SSE stays
@@ -42,6 +43,12 @@ body.dashboard-shell {
   padding: 0.3em 1em;
   margin: 0 0 1em;
 }
+/* Profile menu (user-menu.js): the avatar at the right end of the chrome.
+   Its own look is `@hive/shared/user-menu.css`'s. */
+.user-menu-slot {
+  flex: none;
+  margin-left: auto;
+}
 /* Pages menu (links-menu.js): one icon button at the left of the chrome
    that opens a popover of the standalone pages and the swarm UI. Same
    shape as the swarm UI's LinksMenu — quiet until hovered or open. The

frontend/packages/dashboard/src/index.html

@@ -86,6 +86,8 @@
            menu at the left of this strip, not tabs — the strip holds only
            in-page tabs. -->
       </nav>
+      <!-- Profile menu: the signed-in user, filled by user-menu.js. -->
+      <div class="user-menu-slot" id="user-menu"></div>
     </header>
 
     <!-- Tab panes. createTabStrip (@hive/shared/tabs.js) keeps exactly one

frontend/packages/dashboard/src/tabs.js

@@ -40,6 +40,7 @@ import {
   syncKeptFromSnapshot,
 } from "./kept.js";
 import { renderLinksMenu } from "./links-menu.js";
+import { renderUserMenu } from "./user-menu.js";
 
 (() => {
   initStickyTop();
@@ -164,6 +165,7 @@ import { renderLinksMenu } from "./links-menu.js";
       renderContainers(s);
       renderKept();
       renderLinksMenu(s);
+      renderUserMenu(s);
       renderHiveRev(s.hyperhive_rev);
       restoreOpenDetails(openDetails);
       // No periodic refresh timer. Phase 6 covers every container

frontend/packages/dashboard/src/user-menu.js

@@ -0,0 +1,24 @@
+// Profile menu in the dashboard chrome, at the right of the tab strip: the
+// signed-in user's avatar, name, and links to authelia's settings and
+// sign-out. It is `@hive/shared`'s `UserMenu`, the same component the swarm UI
+// and the per-agent page mount, rendered with Preact like the job-queue
+// graph. `/api/whoami` is proxied to authelia by this dashboard's own nginx
+// vhost, so it needs no CORS; authelia's URL comes from `/api/state`.
+
+import { h, render } from "preact";
+import { UserMenu } from "@hive/shared/user-menu.js";
+import { $ } from "./common.js";
+
+/** (Re)render the menu into `#user-menu`. Safe to call on every state
+ *  refresh: Preact diffs the same component, so an open popover stays open. */
+export function renderUserMenu(state) {
+  const root = $("user-menu");
+  if (!root) return;
+  render(
+    h(UserMenu, {
+      whoamiUrl: "/api/whoami",
+      autheliaUrl: (state && state.authelia_public_url) || null,
+    }),
+    root,
+  );
+}

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

@@ -1,4 +1,4 @@
-/* <UserMenu> — same header icon-button + popover chrome as
+/* <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.

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

frontend/packages/swarm-ui/src/shell/UserMenu.tsx

@@ -1,33 +1,11 @@
-// <UserMenu> — the profile affordance in the 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. Same
-// icon-button + popover chrome as `SettingsMenu`/`LinksMenu` (own
-// stylesheet — see `SettingsMenu.css`'s note on why these stay separate).
-//
-// Identity: `auth_request` only ever answers yes/no, never *who*. This
-// learns "who" from authelia's own `GET /api/user/info`, proxied
-// same-origin at `/api/whoami` (see `swarm-ui.nix`) — no
-// swarm-controller code, a pure pass-through.
-//
-// Avatar: authelia has no photo field. Ships as a generated initials
-// avatar (self-contained, no third-party CDN call — gravatar was the
-// other option, rejected for leaking a hashed email on every load); a
-// real uploaded photo is a follow-up, not blocking this. Colour is a
-// deterministic pick from the same seven base16 chromatic slots the nav
-// accent cycles through (`AVATAR_ACCENTS`).
-//
-// "Authelia settings" / "log out" both build off the *same* base URL
-// `LinksMenu` already shows for "Authelia" (`GET /api/links`), not a
-// second source of the domain — `/settings` and `/logout` are appended
-// client-side, both real authelia routes (mara confirmed `/settings` is
-// the real path after the plain domain-root link landed short of it).
-import { useEffect, useRef, useState } from "preact/hooks";
-import "./UserMenu.css";
-
-interface WhoAmI {
-  displayName: string | null;
-  email: string | null;
-}
+// <UserMenu> in the swarm UI's header: the shared profile menu
+// (`@hive/shared/user-menu.js`) with authelia's URL filled in from
+// `GET /api/links`, the same source `LinksMenu` shows its "Authelia" entry
+// from. The name comes from `/api/whoami`, which `swarm-ui.nix` proxies to
+// authelia's own user info.
+import { useEffect, useState } from "preact/hooks";
+import { UserMenu as SharedUserMenu } from "@hive/shared/user-menu.js";
+import "@hive/shared/user-menu.css";
 
 interface ServiceLink {
   label: string;
@@ -35,58 +13,9 @@ interface ServiceLink {
   url: string;
 }
 
-// Same seven chromatic slots `Shell.tsx`'s `NAV_ITEMS` cycle through —
-// not imported from there directly: that list is route accents, this is
-// a name→colour pick, different domains that happen to share a palette.
-const AVATAR_ACCENTS = [
-  "var(--red)",
-  "var(--yellow)",
-  "var(--green)",
-  "var(--cyan)",
-  "var(--blue)",
-  "var(--purple)",
-  "var(--pink)",
-];
-
-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 — authelia wraps its API responses in a `{status, data}`
-// envelope; this is a cosmetic-only display (same "a fetch failure just
-// falls back" rule `Shell.tsx`'s own swarm-name fetch follows), so an
-// unexpected shape degrades to no name rather than a thrown error.
-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 };
-}
-
 export function UserMenu() {
-  const [who, setWho] = useState<WhoAmI | null>(null);
   const [autheliaUrl, setAutheliaUrl] = useState<string | null>(null);
-  const [open, setOpen] = useState(false);
-  const rootRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    fetch("/api/whoami")
-      .then((r) =>
-        r.ok ? r.json() : Promise.reject(new Error(`http ${r.status}`)),
-      )
-      .then((body) => setWho(parseWhoAmI(body)))
-      .catch(() => setWho(null)); // cosmetic only — see file-top comment
-  }, []);
-
-  // Reuses `LinksMenu`'s own data source rather than a second endpoint —
-  // see file-top comment.
   useEffect(() => {
     fetch("/api/links")
       .then((r) =>
@@ -99,78 +28,9 @@ export function UserMenu() {
         if (authelia) setAutheliaUrl(authelia.url);
       })
       .catch(() => {
-        /* cosmetic only — the menu just renders with no links */
+        /* cosmetic only: the menu then shows the name without the links */
       });
   }, []);
 
-  // Close on an outside click or Escape — identical pattern to
-  // `LinksMenu`/`SettingsMenu`.
-  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 = who?.displayName || who?.email || null;
-  const initial = label ? label.trim().charAt(0).toUpperCase() : "?";
-  const accent = pickAccent(label ?? "operator");
-  // Trailing slash normalised off so `/logout` appends cleanly
-  // regardless of whether the contributed link kept one (the `Authelia`
-  // entry does — see `swarm-authelia.nix` — but this isn't the only
-  // conceivable shape a future contributor's own URL could take).
-  const base = autheliaUrl?.replace(/\/+$/, "") ?? null;
-
-  return (
-    <div class="user-menu" ref={rootRef}>
-      <button
-        type="button"
-        class="user-menu-button"
-        style={{ background: accent }}
-        aria-haspopup="true"
-        aria-expanded={open}
-        aria-label={label ? `signed in as ${label}` : "account"}
-        onClick={() => setOpen((v) => !v)}
-      >
-        {initial}
-      </button>
-      {open ? (
-        <div class="user-menu-popover" role="menu">
-          {label ? <div class="user-menu-name">{label}</div> : null}
-          {base ? (
-            <>
-              <a
-                class="user-menu-item"
-                href={`${base}/settings`}
-                target="_blank"
-                rel="noreferrer"
-                role="menuitem"
-                onClick={() => setOpen(false)}
-              >
-                authelia settings
-              </a>
-              <a
-                class="user-menu-item"
-                href={`${base}/logout`}
-                role="menuitem"
-                onClick={() => setOpen(false)}
-              >
-                log out
-              </a>
-            </>
-          ) : null}
-        </div>
-      ) : null}
-    </div>
-  );
+  return <SharedUserMenu whoamiUrl="/api/whoami" autheliaUrl={autheliaUrl} />;
 }

frontend/packages/swarm-ui/test/user-identity.test.mjs

@@ -0,0 +1,67 @@
+// What the profile menu shows of the signed-in user, shared by the swarm UI,
+// the hive dashboard and the per-agent page. Run by `npm test`.
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import {
+  accountLinks,
+  initialOf,
+  labelOf,
+  parseWhoAmI,
+  pickAccent,
+} from "../../shared/src/user-menu/identity.ts";
+
+test("authelia's user info is read from its {status, data} envelope or bare", () => {
+  const data = { display_name: "Mara", emails: ["mara@example.org"] };
+  assert.deepEqual(parseWhoAmI({ status: "OK", data }), {
+    displayName: "Mara",
+    email: "mara@example.org",
+  });
+  assert.deepEqual(parseWhoAmI(data), {
+    displayName: "Mara",
+    email: "mara@example.org",
+  });
+});
+
+test("a shape that is not recognised gives no name instead of an error", () => {
+  const none = { displayName: null, email: null };
+  assert.deepEqual(parseWhoAmI(null), none);
+  assert.deepEqual(parseWhoAmI("nope"), none);
+  assert.deepEqual(
+    parseWhoAmI({ data: { display_name: 3, emails: "x" } }),
+    none,
+  );
+  assert.deepEqual(parseWhoAmI({ data: { emails: [7] } }), none);
+});
+
+test("the label is the display name, else the e-mail, else none", () => {
+  assert.equal(labelOf({ displayName: "Mara", email: "m@x" }), "Mara");
+  assert.equal(labelOf({ displayName: "", email: "m@x" }), "m@x");
+  assert.equal(labelOf({ displayName: null, email: null }), null);
+  assert.equal(labelOf(null), null);
+});
+
+test("the avatar letter is the label's first, capitalised, or a question mark", () => {
+  assert.equal(initialOf("  mara"), "M");
+  assert.equal(initialOf(null), "?");
+  assert.equal(initialOf(""), "?");
+});
+
+test("a name always gets the same colour, one of the theme's", () => {
+  assert.equal(pickAccent("Mara"), pickAccent("Mara"));
+  assert.match(pickAccent("Mara"), /^var\(--[a-z]+\)$/);
+  const seen = new Set(
+    ["a", "b", "c", "d", "e", "f", "g", "h", "i"].map(pickAccent),
+  );
+  assert.ok(seen.size > 1, "different names do not all collapse to one colour");
+});
+
+test("the account links sit under authelia's URL whether or not it ends in a slash", () => {
+  const want = {
+    settings: "https://auth.example.org/settings",
+    logout: "https://auth.example.org/logout",
+  };
+  assert.deepEqual(accountLinks("https://auth.example.org/"), want);
+  assert.deepEqual(accountLinks("https://auth.example.org"), want);
+  assert.equal(accountLinks(null), null);
+  assert.equal(accountLinks(""), null);
+});

hive-c0re/src/dashboard/state_snapshot.rs

@@ -89,6 +89,12 @@ pub(super) struct StateSnapshot {
     /// `services.hyperhive.swarm.domain`. `None` when the domain is unset —
     /// the dashboard's pages menu then omits the swarm entry.
     swarm_public_url: Option<String>,
+    /// Browser URL of the swarm's SSO provider (authelia). Sourced from
+    /// `HIVE_AUTHELIA_PUBLIC_URL`, which the c0re NixOS module sets from
+    /// `services.hyperhive.swarm.authelia.url`. The profile menu links
+    /// authelia's settings and sign-out pages from it. `None` when the
+    /// variable is absent — the menu then shows the name without those links.
+    authelia_public_url: Option<String>,
     /// Human name of this single-host hive instance (e.g. `"pr1ma"`).
     /// Sourced from `HYPERHIVE_HIVE_NAME` env var, set by the c0re
     /// NixOS module from `services.hyperhive.hiveName`. `None` when
@@ -209,6 +215,9 @@ pub(super) async fn api_state(
         swarm_public_url: std::env::var("HIVE_SWARM_PUBLIC_URL")
             .ok()
             .filter(|s| !s.is_empty()),
+        authelia_public_url: std::env::var("HIVE_AUTHELIA_PUBLIC_URL")
+            .ok()
+            .filter(|s| !s.is_empty()),
         hive_name: std::env::var("HYPERHIVE_HIVE_NAME")
             .ok()
             .filter(|s| !s.is_empty()),

nix/host-modules/hive-c0re/environment.nix

@@ -122,6 +122,12 @@ in
   # a reading no correctly-built hive should ever have to make.
   HIVE_RESERVED_NAMES = lib.concatStringsSep " " (import ../../reserved-names.nix);
 }
+// {
+  # Browser URL of the swarm's SSO provider. The dashboard's and the agent
+  # page's profile menu link authelia's settings and sign-out pages from it.
+  # Always set: `swarm.authelia.url` has a default.
+  HIVE_AUTHELIA_PUBLIC_URL = config.services.hyperhive.swarm.authelia.url;
+}
 // lib.optionalAttrs (config.services.hyperhive.swarm.matrix.gatewayHost != null) {
   # Matrix homeserver URL for each agent's hive-matrix-daemon — the
   # gateway vhost (`chat.<swarm-domain>`). Forwarded to agents by meta.rs

nix/host-modules/hive-c0re/vhosts.nix

@@ -133,6 +133,25 @@ let
     };
   };
 
+  # Who is signed in, for the profile menu of the dashboard and the agent page
+  # (both are served from this vhost, so one location covers both). Authelia
+  # answers with the session's display name and e-mail; the swarm UI's
+  # `/api/whoami` (../swarm-ui.nix) is the same location. `=` exact match, so
+  # the `proxy_pass` URI replaces the request's, and it wins over `/api/`.
+  whoamiLocation = {
+    "= /api/whoami" = {
+      proxyPass = "https://${autheliaDomain}/api/user/info";
+      # nixpkgs appends its OWN `Host $host` after extraConfig, which would
+      # override verifiedProxyTo's — see the comment on verifiedProxyTo in
+      # ../hive-gateway/vhost-lib.nix.
+      recommendedProxySettings = false;
+      extraConfig = ''
+        ${dashboardAuth}
+        ${gatewayCfg.lib.verifiedProxyTo autheliaDomain}
+      '';
+    };
+  };
+
   # The subrequest `dashboardAuth` makes, the same as the swarm UI's
   # (../swarm-ui.nix), which documents the header set.
   autheliaLocation = {
@@ -182,7 +201,12 @@ in
           # `auth_request` cannot read.
           ${dashboardDomain} = {
             forceSSL = true;
-            locations = agentLocations // dashboardProxyLocation // swaggerUiLocations // autheliaLocation;
+            locations =
+              agentLocations
+              // dashboardProxyLocation
+              // whoamiLocation
+              // swaggerUiLocations
+              // autheliaLocation;
             # Per-agent location blocks, generated at runtime by
             # hive-c0re and written to /var/lib/hive-gateway/conf/agents.conf
             # on the host — the same machine nginx runs on. nginx parses