@the-portland-company/shell 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # Changelog
 
+## 0.3.2 — 2026-05-13
+
+### Added
+
+- `<ShellChrome userAvatarUrl />` (and matching `<ShellProvider userAvatarUrl />` prop) — app-supplied avatar URL override for the header `<UserMenu />` avatar. When provided, takes precedence over the avatar URL on the Supabase session's `user_metadata.avatar_url`.
+
+### Fixed
+
+- `<UserMenu />` was rendering only `user.raw.user_metadata.avatar_url`, which missed app-specific avatar sources like `profile.avatar_url`, memoji selections persisted to localStorage, and branded default URLs. Apps with these fallback chains were seeing the initials placeholder instead of the user's portrait. Pass the resolved URL via `userAvatarUrl` to restore parity with the legacy chrome.
+
+## 0.3.1 — 2026-05-13
+
+Closes the last two visual gaps in the shell-v3 chrome vs production.
+
+### Fixed
+
+- **Header icon order**: Removed the `devNotesMenu` slot from
+  `<Header>`'s icon row. Previously the shell appended DevNotes (the
+  "Task" icon) AFTER `headerIconsSlot`, forcing it to the rightmost
+  position. That broke production order (Fuel → Stack → Bell → Task →
+  Support → Avatar). Apps must now inline DevNotesMenu inside
+  `headerIconsSlot` at the position they want. The `devNotesMenu` prop
+  on `<ShellChrome>` is still accepted for backward compat but is
+  ignored at render time.
+- **Sidebar footer commit info**: Replaced the plain-text
+  `"staging   v2.34.1   #51e4e3f"` row with a full port of the legacy
+  production `CommitCopyButton` (env chip + last-4 SHA + version +
+  optional diagnostics icon, plus a second-line byline `| Mon D |
+  firstName |`). Clicking the env chip copies the full SHA. Hovering
+  shows the full commit message body when `commitLog` is supplied.
+
+### Added
+
+- `<CommitCopyButton>` — new exported component. Ported from
+  `react/app/src/layouts/AuthenticatedLayout.tsx::CommitCopyButton`
+  (lines 3017–3284). Accepts `envNode` (pre-rendered chip),
+  `environmentLabel` (default styled chip — green/orange/red for
+  local/staging/production), `commit`, `version`, `commitDate`,
+  `commitAuthor`, `commitLog`, and `onDiagnosticsClick`. Used by the
+  shell's `<Sidebar>` footer; also exported for apps that want to mount
+  it elsewhere.
+- `ShellFooterValue.envNode?: ReactNode` — pre-rendered chip override
+  (useful when the app already has its own `EnvironmentBanner`).
+- `ShellFooterValue.onDiagnosticsClick?: () => void` — gates the
+  diagnostics icon. When unset, the icon is omitted.
+
+### Doc-only
+
+- `ShellProviderProps.support` doc no longer claims the shell renders
+  a `<SupportRequestButton />` automatically. It never did — apps wire
+  their own support trigger via `headerIconsSlot`.
+
 ## 0.3.0 — 2026-05-13
 
 Visual-parity rebuild. Ports the legacy production sidebar + header chrome

package/dist/index.cjs

@@ -1153,7 +1153,8 @@ function ShellProvider({
   linkedAccounts,
   support,
   devNotesMenu,
-  myProfileHref
+  myProfileHref,
+  userAvatarUrl
 }) {
   const [status, setStatus] = react$1.useState("loading");
   const [session, setSession] = react$1.useState(null);
@@ -1195,9 +1196,10 @@ function ShellProvider({
   const chrome = react$1.useMemo(
     () => ({
       devNotesMenu: devNotesMenu ?? null,
-      myProfileHref: myProfileHref ?? "/my-profile"
+      myProfileHref: myProfileHref ?? "/my-profile",
+      userAvatarUrl
     }),
-    [devNotesMenu, myProfileHref]
+    [devNotesMenu, myProfileHref, userAvatarUrl]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(ShellAuthContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(ShellMetaContext.Provider, { value: meta, children: /* @__PURE__ */ jsxRuntime.jsx(ShellOrgContext.Provider, { value: organization ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellLinkedAccountsContext.Provider, { value: linkedAccounts ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellSupportProviderContext.Provider, { value: support ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellModeContext.Provider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellNavItemsContext.Provider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellNavigationPreferenceContext.Provider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellRoleContext.Provider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellFooterContext.Provider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(ShellChromeContext.Provider, { value: chrome, children: /* @__PURE__ */ jsxRuntime.jsx(react.ChakraProvider, { theme: politogyTheme, children }) }) }) }) }) }) }) }) }) }) }) });
 }
@@ -1284,7 +1286,8 @@ function UserMenu() {
     myProfileHref,
     organizationSettingsHref,
     showContinueOnboarding,
-    onContinueOnboarding
+    onContinueOnboarding,
+    userAvatarUrl
   } = useShellChrome();
   const linked = useShellLinkedAccounts();
   const mode = useShellMode();
@@ -1295,7 +1298,7 @@ function UserMenu() {
   const menuListBorderColor = react.useColorModeValue("gray.200", "gray.700");
   if (status !== "authenticated" || !user) return null;
   const displayName = getUserDisplayName(user.raw);
-  const avatarUrl = avatarUrlFromUser(user);
+  const avatarUrl = userAvatarUrl ?? avatarUrlFromUser(user);
   const modeConfig = mode?.getModeConfig() ?? null;
   const currentOrg = org?.currentOrg ?? null;
   const linkedAccounts = linked?.linkedAccounts ?? [];
@@ -1450,8 +1453,7 @@ function Header({ onOpen, id }) {
     breadcrumbs,
     headerActions,
     headerIconsSlot,
-    brandLogoSrc,
-    devNotesMenu
+    brandLogoSrc
   } = useShellChrome();
   const mobileNavBg = react.useColorModeValue("white", "gray.900");
   const mobileNavBorderColor = react.useColorModeValue("gray.200", "gray.700");
@@ -1527,8 +1529,7 @@ function Header({ onOpen, id }) {
               },
               children: [
                 headerActions,
-                headerIconsSlot,
-                devNotesMenu
+                headerIconsSlot
               ]
             }
           ),
@@ -2184,6 +2185,237 @@ function ModePill() {
   ] }) });
 }
 var ModePill_default = ModePill;
+function ActivityIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" })
+    }
+  );
+}
+function defaultEnvChip(label) {
+  if (!label) return null;
+  const lower = label.toLowerCase();
+  if (lower.includes("prod")) {
+    return { color: "#ef4444", bg: "#fee2e2", border: "#fecaca", name: label };
+  }
+  if (lower.includes("stag")) {
+    return { color: "#f97316", bg: "#ffedd5", border: "#fed7aa", name: label };
+  }
+  if (lower.includes("local") || lower.includes("dev")) {
+    return { color: "#22c55e", bg: "#dcfce7", border: "#bbf7d0", name: label };
+  }
+  return { color: "#6b7280", bg: "#f3f4f6", border: "#e5e7eb", name: label };
+}
+var PLACEHOLDER_SHA_VALUES = /* @__PURE__ */ new Set(["unknown", "n/a", "null", "undefined", ""]);
+function isMeaningfulCommit(value) {
+  if (typeof value !== "string") return false;
+  const trimmed = value.trim();
+  if (!trimmed) return false;
+  return !PLACEHOLDER_SHA_VALUES.has(trimmed.toLowerCase());
+}
+function isMeaningfulAuthor(value) {
+  if (typeof value !== "string") return false;
+  const trimmed = value.trim();
+  if (!trimmed) return false;
+  return !PLACEHOLDER_SHA_VALUES.has(trimmed.toLowerCase());
+}
+function getFirstName(value) {
+  if (!value) return "";
+  const stripped = value.replace(/<[^>]+>/g, "").trim();
+  if (!stripped) return "";
+  const [firstToken] = stripped.split(/\s+/);
+  return firstToken || stripped;
+}
+function CommitCopyButton({
+  envNode,
+  environmentLabel,
+  commit,
+  version = "",
+  commitDate = "",
+  commitAuthor = "",
+  commitLog = "",
+  onDiagnosticsClick
+}) {
+  const safeCommit = isMeaningfulCommit(commit) ? commit.trim() : "";
+  const { hasCopied, onCopy } = react.useClipboard(safeCommit);
+  const shortCommit = safeCommit ? safeCommit.slice(-4) : "";
+  const copiedAnimation = react$2.keyframes`
+    0% { opacity: 0; transform: translateY(6px); }
+    20% { opacity: 1; transform: translateY(0); }
+    100% { opacity: 0; transform: translateY(-8px); }
+  `;
+  const formattedDate = react$1.useMemo(() => {
+    if (!commitDate) return "";
+    const parsed = new Date(commitDate);
+    if (Number.isNaN(parsed.getTime())) return commitDate;
+    return parsed.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+  }, [commitDate]);
+  const metaLine = react$1.useMemo(() => {
+    const firstName = isMeaningfulAuthor(commitAuthor) ? getFirstName(commitAuthor) : "";
+    return [formattedDate, firstName].filter(Boolean).join(" | ");
+  }, [formattedDate, commitAuthor]);
+  const normalizedCommitLog = react$1.useMemo(() => {
+    if (commitLog?.trim()) {
+      return commitLog.replace(/\r\n/g, "\n").replace(/\\n/g, "\n");
+    }
+    return "";
+  }, [commitLog]);
+  const tooltipContent = normalizedCommitLog.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+    react.Box,
+    {
+      maxW: "600px",
+      width: "min(600px, 90vw)",
+      maxH: "80vh",
+      whiteSpace: "pre-wrap",
+      overflowY: "auto",
+      overflowX: "auto",
+      fontSize: "xs",
+      fontFamily: "mono",
+      wordBreak: "break-word",
+      children: normalizedCommitLog
+    }
+  ) : void 0;
+  const envChip = react$1.useMemo(() => {
+    if (envNode) return envNode;
+    const chip = defaultEnvChip(environmentLabel);
+    if (!chip) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      react.Box,
+      {
+        as: "span",
+        display: "inline-flex",
+        alignItems: "center",
+        px: "1.5",
+        py: "0.5",
+        borderWidth: "1px",
+        borderColor: chip.border,
+        bg: chip.bg,
+        color: chip.color,
+        borderRadius: "md",
+        fontSize: "2xs",
+        fontWeight: "600",
+        lineHeight: "1",
+        textTransform: "capitalize",
+        "aria-label": `Environment: ${chip.name}`,
+        children: chip.name
+      }
+    );
+  }, [envNode, environmentLabel]);
+  const showEnv = Boolean(envChip);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.VStack,
+    {
+      justify: "center",
+      align: "center",
+      borderRadius: "md",
+      py: 0.5,
+      px: 1,
+      position: "relative",
+      spacing: 0,
+      textAlign: "center",
+      w: "full",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { justify: "center", align: "center", gap: 2, whiteSpace: "nowrap", children: [
+          showEnv ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.Box, { flexShrink: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+              react.Tooltip,
+              {
+                label: tooltipContent,
+                isDisabled: !tooltipContent,
+                hasArrow: true,
+                placement: "top-start",
+                openDelay: 150,
+                closeOnClick: false,
+                shouldWrapChildren: true,
+                modifiers: [
+                  { name: "preventOverflow", options: { padding: 16 } },
+                  { name: "offset", options: { offset: [0, 12] } }
+                ],
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  react.Button,
+                  {
+                    variant: "unstyled",
+                    minW: "auto",
+                    h: "auto",
+                    p: 0,
+                    lineHeight: "1",
+                    color: "inherit",
+                    onClick: onCopy,
+                    "aria-label": "Copy commit ID",
+                    isDisabled: !safeCommit,
+                    children: envChip
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "2xs", color: "gray.300", flexShrink: 0, children: "|" })
+          ] }) : null,
+          shortCommit ? /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "2xs", color: hasCopied ? "green.500" : "gray.400", flexShrink: 0, children: shortCommit }) : null,
+          version ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            shortCommit ? /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "2xs", color: "gray.300", flexShrink: 0, children: "|" }) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "2xs", color: "gray.400", flexShrink: 0, children: [
+              "v",
+              version
+            ] })
+          ] }) : null,
+          onDiagnosticsClick ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "2xs", color: "gray.300", flexShrink: 0, children: "|" }),
+            /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip, { label: "Diagnostics", hasArrow: true, placement: "top", children: /* @__PURE__ */ jsxRuntime.jsx(
+              react.Button,
+              {
+                variant: "unstyled",
+                minW: "auto",
+                h: "auto",
+                p: 0,
+                lineHeight: "1",
+                color: "gray.400",
+                _hover: { color: "gray.600" },
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onDiagnosticsClick();
+                },
+                "aria-label": "Diagnostics",
+                children: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: ActivityIcon, boxSize: 3 })
+              }
+            ) })
+          ] }) : null
+        ] }),
+        metaLine ? /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "2xs", color: "gray.500", textAlign: "center", whiteSpace: "nowrap", children: [
+          "| ",
+          metaLine,
+          " |"
+        ] }) : null,
+        hasCopied && /* @__PURE__ */ jsxRuntime.jsx(
+          react.Box,
+          {
+            position: "absolute",
+            bottom: "100%",
+            mb: "6px",
+            px: "2",
+            py: "1",
+            fontSize: "xs",
+            bg: "gray.700",
+            color: "white",
+            borderRadius: "md",
+            animation: `${copiedAnimation} 0.9s ease-out`,
+            pointerEvents: "none",
+            children: "Copied"
+          }
+        )
+      ]
+    }
+  );
+}
 function Sidebar({ onClose, id }) {
   const { brandLogoSrc } = useShellChrome();
   const navItems = useShellNavItems()?.items ?? [];
@@ -2316,17 +2548,19 @@ function Sidebar({ onClose, id }) {
                   }
                 )
               ] }, `${l.label}-${idx}`)) }),
-              (footer.version || footer.commit || footer.environmentLabel) && /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { spacing: 2, fontSize: "xs", color: "gray.500", wrap: "wrap", children: [
-                footer.environmentLabel ? /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontWeight: "semibold", children: footer.environmentLabel }) : null,
-                footer.version ? /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { children: [
-                  "v",
-                  footer.version
-                ] }) : null,
-                footer.commit ? /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontFamily: "mono", children: [
-                  "#",
-                  footer.commit.slice(-7)
-                ] }) : null
-              ] })
+              (footer.version || footer.commit || footer.commitFull || footer.environmentLabel || footer.envNode) && /* @__PURE__ */ jsxRuntime.jsx(
+                CommitCopyButton,
+                {
+                  envNode: footer.envNode,
+                  environmentLabel: footer.environmentLabel,
+                  commit: footer.commitFull ?? footer.commit,
+                  version: footer.version,
+                  commitDate: footer.commitDate,
+                  commitAuthor: footer.commitAuthor,
+                  commitLog: footer.commitLog,
+                  onDiagnosticsClick: footer.onDiagnosticsClick
+                }
+              )
             ] })
           }
         )
@@ -2680,7 +2914,8 @@ function ShellChrome({
   onContinueOnboarding,
   pageTitle,
   breadcrumbs,
-  headerActions
+  headerActions,
+  userAvatarUrl
 }) {
   const chrome = react$1.useMemo(
     () => ({
@@ -2693,7 +2928,8 @@ function ShellChrome({
       onContinueOnboarding,
       pageTitle,
       breadcrumbs,
-      headerActions
+      headerActions,
+      userAvatarUrl
     }),
     [
       devNotesMenu,
@@ -2705,7 +2941,8 @@ function ShellChrome({
       onContinueOnboarding,
       pageTitle,
       breadcrumbs,
-      headerActions
+      headerActions,
+      userAvatarUrl
     ]
   );
   const navItemsValue = react$1.useMemo(
@@ -2750,6 +2987,7 @@ exports.BrandIcon = BrandIcon;
 exports.BrandLogo = BrandLogo;
 exports.BreadcrumbBar = BreadcrumbBar;
 exports.Card = Card;
+exports.CommitCopyButton = CommitCopyButton;
 exports.Footer = Footer;
 exports.GlobalUiIdProvider = GlobalUiIdProvider;
 exports.Header = Header;