@the-portland-company/shell 0.3.0 → 0.3.1

package/dist/index.d.cts

@@ -228,7 +228,26 @@ interface ShellFooterValue {
     commitLog?: string;
     version?: string;
     releaseName?: string;
+    /**
+     * Environment label rendered as a colored chip in the sidebar
+     * footer (e.g., 'production' = red, 'staging' = orange,
+     * 'local'/'development' = green).
+     */
     environmentLabel?: string;
+    /**
+     * Optional pre-rendered environment chip element. When supplied,
+     * <CommitCopyButton> renders this instead of building a default chip
+     * from `environmentLabel`. Use this when the app already has an
+     * <EnvironmentBanner> component it wants to drop in unchanged.
+     */
+    envNode?: ReactNode;
+    /**
+     * When set, <CommitCopyButton> renders a diagnostics icon next to
+     * the version that, when clicked, fires this handler. The shell
+     * does not navigate or open anything — apps wire whatever they want
+     * (modal, route, console dump).
+     */
+    onDiagnosticsClick?: () => void;
 }
 /** Props for the top-level ShellProvider. */
 interface ShellProviderProps {
@@ -245,7 +264,7 @@ interface ShellProviderProps {
     organization?: ShellOrganizationValue;
     /** If provided, UserMenu shows account switcher + add-account button. */
     linkedAccounts?: ShellLinkedAccountsValue;
-    /** If provided, shell renders <SupportRequestButton /> in the header. */
+    /** Drives the modal submission flow used by app-supplied support widgets. */
     support?: ShellSupportValue;
     /** Optional element rendered in the header (typically <DevNotesMenu /> from @the-portland-company/devnotes). */
     devNotesMenu?: ReactNode;
@@ -441,13 +460,16 @@ interface HeaderProps {
  *  2. headerActions (app-supplied React node, e.g., page action buttons).
  *  3. headerIconsSlot (app-supplied React node, e.g., FuelPopover,
  *     NewTextBellPopup, SystemAlertsMenu, NavigationToggleMenu,
- *     ImportProgressIndicator).
- *  4. DevNotesMenu (from useShellChrome().devNotesMenu).
- *  5. UserMenu (avatar + name/email VStack + chevron).
+ *     ImportProgressIndicator, DevNotesMenu, SupportRequestAction).
+ *  4. UserMenu (avatar + name/email VStack + chevron).
  *
  * NOTE: app-specific widgets stay in the app. The shell only renders
- * what the app passes through `headerActions` + `headerIconsSlot` +
- * `devNotesMenu`.
+ * what the app passes through `headerActions` + `headerIconsSlot`. As of
+ * v0.3.1, the shell no longer renders a separate `devNotesMenu` slot
+ * after `headerIconsSlot` — apps must inline DevNotesMenu inside
+ * `headerIconsSlot` so they have full control of icon ordering. The
+ * `devNotesMenu` prop on <ShellChrome> is still accepted for backward
+ * compat but is ignored.
  */
 declare function Header({ onOpen, id }: HeaderProps): react_jsx_runtime.JSX.Element;
 
@@ -591,6 +613,50 @@ declare function BrandIcon({ name, size, className, style, alt, basePath, }: Bra
  */
 declare function SupportRequestButton(): react_jsx_runtime.JSX.Element | null;
 
+interface CommitCopyButtonProps {
+    /**
+     * Pre-rendered environment chip (e.g., the app's own `EnvironmentBanner`).
+     * Takes precedence over `environmentLabel`. Click anywhere on the chip
+     * copies the full commit SHA.
+     */
+    envNode?: ReactNode;
+    /**
+     * Environment label (e.g., 'staging', 'production', 'local'). When
+     * `envNode` is not supplied, the component renders a default chip
+     * keyed off this label with appropriate background/border color.
+     */
+    environmentLabel?: string;
+    /** Full git commit SHA. Last 4 characters are rendered; click copies the full SHA. */
+    commit?: string;
+    /** App version, e.g., '2.34.1'. Renders as `v{version}`. */
+    version?: string;
+    /** ISO date string of the commit. Formatted as 'Mon D'. */
+    commitDate?: string;
+    /** Commit author name (e.g., 'Leland Smith'). First name is shown. */
+    commitAuthor?: string;
+    /** Full commit message body — shown as a tooltip over the env chip. */
+    commitLog?: string;
+    /**
+     * Optional click handler for the diagnostics icon. When unset, the
+     * icon is not rendered.
+     */
+    onDiagnosticsClick?: () => void;
+}
+/**
+ * Footer commit info pill. Ported from
+ * `react/app/src/layouts/AuthenticatedLayout.tsx::CommitCopyButton`
+ * (lines 3017–3284, 2026-05-13).
+ *
+ * Visual: two stacked rows.
+ *   Row 1: [env chip] | {last4 SHA} | v{version} | [diagnostics icon]
+ *   Row 2: | {Mon D} | {firstName} |  (only when date or author present)
+ *
+ * Clicking the env chip copies the full SHA via `useClipboard`, with a
+ * brief "Copied" toast that fades up. Hovering the env chip shows the
+ * full commit log in a tooltip.
+ */
+declare function CommitCopyButton({ envNode, environmentLabel, commit, version, commitDate, commitAuthor, commitLog, onDiagnosticsClick, }: CommitCopyButtonProps): react_jsx_runtime.JSX.Element;
+
 interface ShellChromeProps {
     children: ReactNode;
     /** Drives <OrgPill /> in the sidebar. */
@@ -722,4 +788,4 @@ declare function registerShellPrecache(opts?: RegisterShellPrecacheOptions): Pro
  */
 declare function buildSpeculationRules(currentApp: string, registry: AppRegistryEntry[]): string | null;
 
-export { AppLayout, type AppRegistryEntry, BrandIcon, BrandLogo, BreadcrumbBar, Card, Footer, GlobalUiIdProvider, Header, HeaderTabBar, type HeaderTabBarItem, ModePill, NavItem, OrgPill, OrgPill as OrgSelector, PageContainer, PageHeader, type ShellActiveRoleConfig, type ShellAuthStatus, type ShellAuthValue, ShellChrome, ShellChromeContext, type ShellChromeProps, type ShellChromeValue, ShellFooterContext, type ShellFooterLink, type ShellFooterValue, type ShellLinkedAccount, ShellLinkedAccountsContext, type ShellLinkedAccountsValue, type ShellModeConfig, ShellModeContext, type ShellModeValue, type ShellNavItem, ShellNavItemsContext, type ShellNavItemsValue, ShellNavigationPreferenceContext, type ShellNavigationPreferenceValue, ShellOrgContext, type ShellOrganization, type ShellOrganizationValue, ShellProvider, type ShellProviderProps, ShellRoleContext, type ShellRoleValue, type ShellSlots, type ShellSupportContext, ShellSupportProviderContext, type ShellSupportValue, type ShellUser, Sidebar, SupportRequestButton, UserMenu, buildSpeculationRules, getOrganizationBadgeLetters, getOrganizationBrandColor, getUserDisplayName, hexToRgba, lightenHexColor, normalizeHexColor, politogyTheme, registerShellPrecache, useAppRegistry, useCurrentApp, useShellAuth, useShellChrome, useShellFooter, useShellLinkedAccounts, useShellMode, useShellNavItems, useShellNavigationPreference, useShellOrganization, useShellRole, useShellSupport };
+export { AppLayout, type AppRegistryEntry, BrandIcon, BrandLogo, BreadcrumbBar, Card, CommitCopyButton, type CommitCopyButtonProps, Footer, GlobalUiIdProvider, Header, HeaderTabBar, type HeaderTabBarItem, ModePill, NavItem, OrgPill, OrgPill as OrgSelector, PageContainer, PageHeader, type ShellActiveRoleConfig, type ShellAuthStatus, type ShellAuthValue, ShellChrome, ShellChromeContext, type ShellChromeProps, type ShellChromeValue, ShellFooterContext, type ShellFooterLink, type ShellFooterValue, type ShellLinkedAccount, ShellLinkedAccountsContext, type ShellLinkedAccountsValue, type ShellModeConfig, ShellModeContext, type ShellModeValue, type ShellNavItem, ShellNavItemsContext, type ShellNavItemsValue, ShellNavigationPreferenceContext, type ShellNavigationPreferenceValue, ShellOrgContext, type ShellOrganization, type ShellOrganizationValue, ShellProvider, type ShellProviderProps, ShellRoleContext, type ShellRoleValue, type ShellSlots, type ShellSupportContext, ShellSupportProviderContext, type ShellSupportValue, type ShellUser, Sidebar, SupportRequestButton, UserMenu, buildSpeculationRules, getOrganizationBadgeLetters, getOrganizationBrandColor, getUserDisplayName, hexToRgba, lightenHexColor, normalizeHexColor, politogyTheme, registerShellPrecache, useAppRegistry, useCurrentApp, useShellAuth, useShellChrome, useShellFooter, useShellLinkedAccounts, useShellMode, useShellNavItems, useShellNavigationPreference, useShellOrganization, useShellRole, useShellSupport };

package/dist/index.d.ts

@@ -228,7 +228,26 @@ interface ShellFooterValue {
     commitLog?: string;
     version?: string;
     releaseName?: string;
+    /**
+     * Environment label rendered as a colored chip in the sidebar
+     * footer (e.g., 'production' = red, 'staging' = orange,
+     * 'local'/'development' = green).
+     */
     environmentLabel?: string;
+    /**
+     * Optional pre-rendered environment chip element. When supplied,
+     * <CommitCopyButton> renders this instead of building a default chip
+     * from `environmentLabel`. Use this when the app already has an
+     * <EnvironmentBanner> component it wants to drop in unchanged.
+     */
+    envNode?: ReactNode;
+    /**
+     * When set, <CommitCopyButton> renders a diagnostics icon next to
+     * the version that, when clicked, fires this handler. The shell
+     * does not navigate or open anything — apps wire whatever they want
+     * (modal, route, console dump).
+     */
+    onDiagnosticsClick?: () => void;
 }
 /** Props for the top-level ShellProvider. */
 interface ShellProviderProps {
@@ -245,7 +264,7 @@ interface ShellProviderProps {
     organization?: ShellOrganizationValue;
     /** If provided, UserMenu shows account switcher + add-account button. */
     linkedAccounts?: ShellLinkedAccountsValue;
-    /** If provided, shell renders <SupportRequestButton /> in the header. */
+    /** Drives the modal submission flow used by app-supplied support widgets. */
     support?: ShellSupportValue;
     /** Optional element rendered in the header (typically <DevNotesMenu /> from @the-portland-company/devnotes). */
     devNotesMenu?: ReactNode;
@@ -441,13 +460,16 @@ interface HeaderProps {
  *  2. headerActions (app-supplied React node, e.g., page action buttons).
  *  3. headerIconsSlot (app-supplied React node, e.g., FuelPopover,
  *     NewTextBellPopup, SystemAlertsMenu, NavigationToggleMenu,
- *     ImportProgressIndicator).
- *  4. DevNotesMenu (from useShellChrome().devNotesMenu).
- *  5. UserMenu (avatar + name/email VStack + chevron).
+ *     ImportProgressIndicator, DevNotesMenu, SupportRequestAction).
+ *  4. UserMenu (avatar + name/email VStack + chevron).
  *
  * NOTE: app-specific widgets stay in the app. The shell only renders
- * what the app passes through `headerActions` + `headerIconsSlot` +
- * `devNotesMenu`.
+ * what the app passes through `headerActions` + `headerIconsSlot`. As of
+ * v0.3.1, the shell no longer renders a separate `devNotesMenu` slot
+ * after `headerIconsSlot` — apps must inline DevNotesMenu inside
+ * `headerIconsSlot` so they have full control of icon ordering. The
+ * `devNotesMenu` prop on <ShellChrome> is still accepted for backward
+ * compat but is ignored.
  */
 declare function Header({ onOpen, id }: HeaderProps): react_jsx_runtime.JSX.Element;
 
@@ -591,6 +613,50 @@ declare function BrandIcon({ name, size, className, style, alt, basePath, }: Bra
  */
 declare function SupportRequestButton(): react_jsx_runtime.JSX.Element | null;
 
+interface CommitCopyButtonProps {
+    /**
+     * Pre-rendered environment chip (e.g., the app's own `EnvironmentBanner`).
+     * Takes precedence over `environmentLabel`. Click anywhere on the chip
+     * copies the full commit SHA.
+     */
+    envNode?: ReactNode;
+    /**
+     * Environment label (e.g., 'staging', 'production', 'local'). When
+     * `envNode` is not supplied, the component renders a default chip
+     * keyed off this label with appropriate background/border color.
+     */
+    environmentLabel?: string;
+    /** Full git commit SHA. Last 4 characters are rendered; click copies the full SHA. */
+    commit?: string;
+    /** App version, e.g., '2.34.1'. Renders as `v{version}`. */
+    version?: string;
+    /** ISO date string of the commit. Formatted as 'Mon D'. */
+    commitDate?: string;
+    /** Commit author name (e.g., 'Leland Smith'). First name is shown. */
+    commitAuthor?: string;
+    /** Full commit message body — shown as a tooltip over the env chip. */
+    commitLog?: string;
+    /**
+     * Optional click handler for the diagnostics icon. When unset, the
+     * icon is not rendered.
+     */
+    onDiagnosticsClick?: () => void;
+}
+/**
+ * Footer commit info pill. Ported from
+ * `react/app/src/layouts/AuthenticatedLayout.tsx::CommitCopyButton`
+ * (lines 3017–3284, 2026-05-13).
+ *
+ * Visual: two stacked rows.
+ *   Row 1: [env chip] | {last4 SHA} | v{version} | [diagnostics icon]
+ *   Row 2: | {Mon D} | {firstName} |  (only when date or author present)
+ *
+ * Clicking the env chip copies the full SHA via `useClipboard`, with a
+ * brief "Copied" toast that fades up. Hovering the env chip shows the
+ * full commit log in a tooltip.
+ */
+declare function CommitCopyButton({ envNode, environmentLabel, commit, version, commitDate, commitAuthor, commitLog, onDiagnosticsClick, }: CommitCopyButtonProps): react_jsx_runtime.JSX.Element;
+
 interface ShellChromeProps {
     children: ReactNode;
     /** Drives <OrgPill /> in the sidebar. */
@@ -722,4 +788,4 @@ declare function registerShellPrecache(opts?: RegisterShellPrecacheOptions): Pro
  */
 declare function buildSpeculationRules(currentApp: string, registry: AppRegistryEntry[]): string | null;
 
-export { AppLayout, type AppRegistryEntry, BrandIcon, BrandLogo, BreadcrumbBar, Card, Footer, GlobalUiIdProvider, Header, HeaderTabBar, type HeaderTabBarItem, ModePill, NavItem, OrgPill, OrgPill as OrgSelector, PageContainer, PageHeader, type ShellActiveRoleConfig, type ShellAuthStatus, type ShellAuthValue, ShellChrome, ShellChromeContext, type ShellChromeProps, type ShellChromeValue, ShellFooterContext, type ShellFooterLink, type ShellFooterValue, type ShellLinkedAccount, ShellLinkedAccountsContext, type ShellLinkedAccountsValue, type ShellModeConfig, ShellModeContext, type ShellModeValue, type ShellNavItem, ShellNavItemsContext, type ShellNavItemsValue, ShellNavigationPreferenceContext, type ShellNavigationPreferenceValue, ShellOrgContext, type ShellOrganization, type ShellOrganizationValue, ShellProvider, type ShellProviderProps, ShellRoleContext, type ShellRoleValue, type ShellSlots, type ShellSupportContext, ShellSupportProviderContext, type ShellSupportValue, type ShellUser, Sidebar, SupportRequestButton, UserMenu, buildSpeculationRules, getOrganizationBadgeLetters, getOrganizationBrandColor, getUserDisplayName, hexToRgba, lightenHexColor, normalizeHexColor, politogyTheme, registerShellPrecache, useAppRegistry, useCurrentApp, useShellAuth, useShellChrome, useShellFooter, useShellLinkedAccounts, useShellMode, useShellNavItems, useShellNavigationPreference, useShellOrganization, useShellRole, useShellSupport };
+export { AppLayout, type AppRegistryEntry, BrandIcon, BrandLogo, BreadcrumbBar, Card, CommitCopyButton, type CommitCopyButtonProps, Footer, GlobalUiIdProvider, Header, HeaderTabBar, type HeaderTabBarItem, ModePill, NavItem, OrgPill, OrgPill as OrgSelector, PageContainer, PageHeader, type ShellActiveRoleConfig, type ShellAuthStatus, type ShellAuthValue, ShellChrome, ShellChromeContext, type ShellChromeProps, type ShellChromeValue, ShellFooterContext, type ShellFooterLink, type ShellFooterValue, type ShellLinkedAccount, ShellLinkedAccountsContext, type ShellLinkedAccountsValue, type ShellModeConfig, ShellModeContext, type ShellModeValue, type ShellNavItem, ShellNavItemsContext, type ShellNavItemsValue, ShellNavigationPreferenceContext, type ShellNavigationPreferenceValue, ShellOrgContext, type ShellOrganization, type ShellOrganizationValue, ShellProvider, type ShellProviderProps, ShellRoleContext, type ShellRoleValue, type ShellSlots, type ShellSupportContext, ShellSupportProviderContext, type ShellSupportValue, type ShellUser, Sidebar, SupportRequestButton, UserMenu, buildSpeculationRules, getOrganizationBadgeLetters, getOrganizationBrandColor, getUserDisplayName, hexToRgba, lightenHexColor, normalizeHexColor, politogyTheme, registerShellPrecache, useAppRegistry, useCurrentApp, useShellAuth, useShellChrome, useShellFooter, useShellLinkedAccounts, useShellMode, useShellNavItems, useShellNavigationPreference, useShellOrganization, useShellRole, useShellSupport };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { extendTheme, Tooltip, ChakraProvider, useColorModeValue, Flex, Menu, MenuButton, HStack, Avatar, VStack, Text, Box, Portal, MenuList, MenuItem, MenuDivider, Badge, IconButton, Link as Link$1, Collapse, Skeleton, Button, Image, useDisclosure, useToast, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Textarea, ModalFooter, useClipboard } from '@chakra-ui/react';
+import { extendTheme, Tooltip, ChakraProvider, useColorModeValue, Flex, Menu, MenuButton, HStack, Avatar, VStack, Text, Box, Portal, MenuList, MenuItem, MenuDivider, Badge, IconButton, Link as Link$1, Collapse, Skeleton, Button, useClipboard, Icon, Image, useDisclosure, useToast, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Textarea, ModalFooter } from '@chakra-ui/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx2 from 'clsx';
 import { Link, useLocation, useNavigate, NavLink } from 'react-router-dom';
@@ -1444,8 +1444,7 @@ function Header({ onOpen, id }) {
     breadcrumbs,
     headerActions,
     headerIconsSlot,
-    brandLogoSrc,
-    devNotesMenu
+    brandLogoSrc
   } = useShellChrome();
   const mobileNavBg = useColorModeValue("white", "gray.900");
   const mobileNavBorderColor = useColorModeValue("gray.200", "gray.700");
@@ -1521,8 +1520,7 @@ function Header({ onOpen, id }) {
               },
               children: [
                 headerActions,
-                headerIconsSlot,
-                devNotesMenu
+                headerIconsSlot
               ]
             }
           ),
@@ -2178,6 +2176,237 @@ function ModePill() {
   ] }) });
 }
 var ModePill_default = ModePill;
+function ActivityIcon() {
+  return /* @__PURE__ */ 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__ */ 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 } = useClipboard(safeCommit);
+  const shortCommit = safeCommit ? safeCommit.slice(-4) : "";
+  const copiedAnimation = keyframes`
+    0% { opacity: 0; transform: translateY(6px); }
+    20% { opacity: 1; transform: translateY(0); }
+    100% { opacity: 0; transform: translateY(-8px); }
+  `;
+  const formattedDate = 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 = useMemo(() => {
+    const firstName = isMeaningfulAuthor(commitAuthor) ? getFirstName(commitAuthor) : "";
+    return [formattedDate, firstName].filter(Boolean).join(" | ");
+  }, [formattedDate, commitAuthor]);
+  const normalizedCommitLog = useMemo(() => {
+    if (commitLog?.trim()) {
+      return commitLog.replace(/\r\n/g, "\n").replace(/\\n/g, "\n");
+    }
+    return "";
+  }, [commitLog]);
+  const tooltipContent = normalizedCommitLog.length > 0 ? /* @__PURE__ */ jsx(
+    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 = useMemo(() => {
+    if (envNode) return envNode;
+    const chip = defaultEnvChip(environmentLabel);
+    if (!chip) return null;
+    return /* @__PURE__ */ jsx(
+      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__ */ jsxs(
+    VStack,
+    {
+      justify: "center",
+      align: "center",
+      borderRadius: "md",
+      py: 0.5,
+      px: 1,
+      position: "relative",
+      spacing: 0,
+      textAlign: "center",
+      w: "full",
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { justify: "center", align: "center", gap: 2, whiteSpace: "nowrap", children: [
+          showEnv ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Box, { flexShrink: 0, children: /* @__PURE__ */ jsx(
+              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__ */ jsx(
+                  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__ */ jsx(Text, { fontSize: "2xs", color: "gray.300", flexShrink: 0, children: "|" })
+          ] }) : null,
+          shortCommit ? /* @__PURE__ */ jsx(Text, { fontSize: "2xs", color: hasCopied ? "green.500" : "gray.400", flexShrink: 0, children: shortCommit }) : null,
+          version ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            shortCommit ? /* @__PURE__ */ jsx(Text, { fontSize: "2xs", color: "gray.300", flexShrink: 0, children: "|" }) : null,
+            /* @__PURE__ */ jsxs(Text, { fontSize: "2xs", color: "gray.400", flexShrink: 0, children: [
+              "v",
+              version
+            ] })
+          ] }) : null,
+          onDiagnosticsClick ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Text, { fontSize: "2xs", color: "gray.300", flexShrink: 0, children: "|" }),
+            /* @__PURE__ */ jsx(Tooltip, { label: "Diagnostics", hasArrow: true, placement: "top", children: /* @__PURE__ */ jsx(
+              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__ */ jsx(Icon, { as: ActivityIcon, boxSize: 3 })
+              }
+            ) })
+          ] }) : null
+        ] }),
+        metaLine ? /* @__PURE__ */ jsxs(Text, { fontSize: "2xs", color: "gray.500", textAlign: "center", whiteSpace: "nowrap", children: [
+          "| ",
+          metaLine,
+          " |"
+        ] }) : null,
+        hasCopied && /* @__PURE__ */ jsx(
+          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 ?? [];
@@ -2310,17 +2539,19 @@ function Sidebar({ onClose, id }) {
                   }
                 )
               ] }, `${l.label}-${idx}`)) }),
-              (footer.version || footer.commit || footer.environmentLabel) && /* @__PURE__ */ jsxs(HStack, { spacing: 2, fontSize: "xs", color: "gray.500", wrap: "wrap", children: [
-                footer.environmentLabel ? /* @__PURE__ */ jsx(Text, { fontWeight: "semibold", children: footer.environmentLabel }) : null,
-                footer.version ? /* @__PURE__ */ jsxs(Text, { children: [
-                  "v",
-                  footer.version
-                ] }) : null,
-                footer.commit ? /* @__PURE__ */ jsxs(Text, { fontFamily: "mono", children: [
-                  "#",
-                  footer.commit.slice(-7)
-                ] }) : null
-              ] })
+              (footer.version || footer.commit || footer.commitFull || footer.environmentLabel || footer.envNode) && /* @__PURE__ */ 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
+                }
+              )
             ] })
           }
         )
@@ -2739,6 +2970,6 @@ function buildSpeculationRules(currentApp, registry) {
   return JSON.stringify(payload);
 }
 
-export { AppLayout, BrandIcon, BrandLogo, BreadcrumbBar, Card, Footer, GlobalUiIdProvider, Header, HeaderTabBar, ModePill, NavItem, OrgPill, OrgPill as OrgSelector, PageContainer, PageHeader, ShellChrome, ShellChromeContext, ShellFooterContext, ShellLinkedAccountsContext, ShellModeContext, ShellNavItemsContext, ShellNavigationPreferenceContext, ShellOrgContext, ShellProvider, ShellRoleContext, ShellSupportProviderContext, Sidebar, SupportRequestButton, UserMenu, buildSpeculationRules, getOrganizationBadgeLetters, getOrganizationBrandColor, getUserDisplayName, hexToRgba, lightenHexColor, normalizeHexColor, politogyTheme, registerShellPrecache, useAppRegistry, useCurrentApp, useShellAuth, useShellChrome, useShellFooter, useShellLinkedAccounts, useShellMode, useShellNavItems, useShellNavigationPreference, useShellOrganization, useShellRole, useShellSupport };
+export { AppLayout, BrandIcon, BrandLogo, BreadcrumbBar, Card, CommitCopyButton, Footer, GlobalUiIdProvider, Header, HeaderTabBar, ModePill, NavItem, OrgPill, OrgPill as OrgSelector, PageContainer, PageHeader, ShellChrome, ShellChromeContext, ShellFooterContext, ShellLinkedAccountsContext, ShellModeContext, ShellNavItemsContext, ShellNavigationPreferenceContext, ShellOrgContext, ShellProvider, ShellRoleContext, ShellSupportProviderContext, Sidebar, SupportRequestButton, UserMenu, buildSpeculationRules, getOrganizationBadgeLetters, getOrganizationBrandColor, getUserDisplayName, hexToRgba, lightenHexColor, normalizeHexColor, politogyTheme, registerShellPrecache, useAppRegistry, useCurrentApp, useShellAuth, useShellChrome, useShellFooter, useShellLinkedAccounts, useShellMode, useShellNavItems, useShellNavigationPreference, useShellOrganization, useShellRole, useShellSupport };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map