vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

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

Browse source 
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.
This commit is contained in:
iris 2026-10-25 15:05:35 +01:00 • committed by mara
commit cd41e1d510
19 changed files with 417 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

92
frontend/packages/swarm-ui/src/shell/UserMenu.css
View file

@ -1,92 +0,0 @@
/* <UserMenu> — 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);
}

160
frontend/packages/swarm-ui/src/shell/UserMenu.tsx
View file

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

67
frontend/packages/swarm-ui/test/user-identity.test.mjs Normal file
View file

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