// experience-shell.jsx — app-shell pieces that sit ABOVE either experience.
//
// ProfileMenu is the circular avatar in the top-right of both the Policy
// Owner and Producer Co-pilot experiences. Clicking it opens a small
// overlay with one action — "Switch Helm experience" — which returns the
// user to the experience selector. (More profile actions can be added here
// later.) The switch is performed via a global callback the RootApp
// registers on window, so deeply-nested headers in either experience can
// trigger it without prop-drilling.
//
// This lives in a file we own (not one of the Claude Design handoff files)
// so future design re-syncs of the experience screens don't clobber it.
const { useState: useShellState, useRef: useShellRef, useEffect: useShellEffect, useLayoutEffect: useShellLayoutEffect } = React;
const SwitchIcon = () => (
);
const ProfileMenu = ({
initials = "—",
bg = "var(--helm-dark-green)",
fg = "var(--helm-white)",
size = 36,
name,
subtitle,
style,
}) => {
const [open, setOpen] = useShellState(false);
const btnRef = useShellRef(null);
const [pos, setPos] = useShellState(null);
// Anchor the popover to the avatar via fixed coordinates and render it in
// a portal on , so it floats above either experience's chrome
// regardless of stacking contexts (e.g. the PO chat panel, which would
// otherwise paint over a popover trapped inside the sticky nav).
useShellLayoutEffect(() => {
if (!open || !btnRef.current) return;
const r = btnRef.current.getBoundingClientRect();
setPos({ top: r.bottom + 10, right: Math.max(8, window.innerWidth - r.right) });
}, [open]);
// Close on scroll/resize so the floating popover never detaches from the avatar.
useShellEffect(() => {
if (!open) return;
const close = () => setOpen(false);
window.addEventListener("scroll", close, true);
window.addEventListener("resize", close);
return () => {
window.removeEventListener("scroll", close, true);
window.removeEventListener("resize", close);
};
}, [open]);
const switchExperience = () => {
setOpen(false);
if (typeof window.__helmSwitchExperience === "function") {
window.__helmSwitchExperience();
}
};
return (