@igstack/app-catalog-frontend-core 0.6.0 → 0.6.2

package/dist/esm/__tests__/modules/appCatalog/utils/mergeFrontendBuildId.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/modules/appCatalog/context/AppCatalogContext.js

@@ -15,6 +15,7 @@ import "@radix-ui/react-tooltip";
 import "../../../ui/empty.js";
 import "@tanstack/react-router";
 import "../../../ui/button.js";
+import { mergeFrontendBuildId } from "./mergeFrontendBuildId.js";
 const AppCatalogContext = createContext(void 0);
 function AppCatalogProvider({ children }) {
   var _a, _b;
@@ -30,14 +31,10 @@ function AppCatalogProvider({ children }) {
       approvalMethods: (data == null ? void 0 : data.approvalMethods) ?? [],
       persons: (data == null ? void 0 : data.persons) ?? [],
       groups: (data == null ? void 0 : data.groups) ?? [],
-      versions: {
-        ...data == null ? void 0 : data.versions,
-        ...uiSettings.frontendBuildId && {
-          frontend: {
-            displayName: uiSettings.frontendBuildId === "local" ? "local" : `#${uiSettings.frontendBuildId}`
-          }
-        }
-      }
+      versions: mergeFrontendBuildId(
+        (data == null ? void 0 : data.versions) ?? {},
+        uiSettings.frontendBuildId
+      )
     }),
     [
       data == null ? void 0 : data.approvalMethods,

package/dist/esm/modules/appCatalog/context/AppCatalogContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppCatalogContext.js","sources":["../../../../../src/modules/appCatalog/context/AppCatalogContext.tsx"],"sourcesContent":["import type {\n  AppApprovalMethod,\n  AppVersionInfo,\n  Group,\n  GroupingTagDefinition,\n  Person,\n  Resource,\n} from '@igstack/app-catalog-backend-core'\nimport { useQuery } from '@tanstack/react-query'\nimport type { ReactNode } from 'react'\nimport { createContext, use, useEffect, useMemo } from 'react'\nimport { ApiQueryMagazineAppCatalog } from '~/modules/appCatalog'\nimport { useUiSettings } from '~/context/UiSettingsContext'\n\nexport interface AppCatalogContextIface {\n  resources: Resource[]\n  isLoadingApps: boolean\n  tagsDefinitions: GroupingTagDefinition[]\n  approvalMethods: AppApprovalMethod[]\n  persons: Person[]\n  groups: Group[]\n  versions?: AppVersionInfo\n}\n\nexport const AppCatalogContext = createContext<\n  AppCatalogContextIface | undefined\n>(undefined)\n\ninterface AppCatalogProviderProps {\n  children: ReactNode\n}\n\nexport function AppCatalogProvider({ children }: AppCatalogProviderProps) {\n  const { data, isLoading: isLoadingApps } = useQuery(\n    ApiQueryMagazineAppCatalog.getAppCatalog(),\n  )\n  const uiSettings = useUiSettings()\n\n  const contextValue = useMemo<AppCatalogContextIface>(\n    () => ({\n      resources: data?.resources ?? [],\n      isLoadingApps,\n      tagsDefinitions: data?.tagsDefinitions ?? [],\n      approvalMethods: data?.approvalMethods ?? [],\n      persons: data?.persons ?? [],\n      groups: data?.groups ?? [],\n      versions: {\n        ...data?.versions,\n        ...(uiSettings.frontendBuildId && {\n          frontend: {\n            displayName:\n              uiSettings.frontendBuildId === 'local'\n                ? 'local'\n                : `#${uiSettings.frontendBuildId}`,\n          },\n        }),\n      },\n    }),\n    [\n      data?.approvalMethods,\n      data?.resources,\n      data?.tagsDefinitions,\n      data?.persons,\n      data?.groups,\n      data?.versions,\n      uiSettings.frontendBuildId,\n      isLoadingApps,\n    ],\n  )\n\n  // Update document title based on backend version\n  useEffect(() => {\n    if (data?.versions?.backend?.displayName === 'local') {\n      document.title = 'Local'\n    } else {\n      document.title = 'App Catalog'\n    }\n  }, [data?.versions?.backend?.displayName])\n\n  return <AppCatalogContext value={contextValue}>{children}</AppCatalogContext>\n}\n\nexport function useAppCatalogContext(): AppCatalogContextIface {\n  const context = use(AppCatalogContext)\n  if (!context) {\n    throw new Error(\n      'useAppCatalogContext must be used within AppCatalogProvider',\n    )\n  }\n  return context\n}\n"],"names":["_b","_a"],"mappings":";;;;;;;;;;;;;;;;;AAwBO,MAAM,oBAAoB,cAE/B,MAAS;AAMJ,SAAS,mBAAmB,EAAE,YAAqC;;AACxE,QAAM,EAAE,MAAM,WAAW,cAAA,IAAkB;AAAA,IACzC,2BAA2B,cAAA;AAAA,EAAc;AAE3C,QAAM,aAAa,cAAA;AAEnB,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL,YAAW,6BAAM,cAAa,CAAA;AAAA,MAC9B;AAAA,MACA,kBAAiB,6BAAM,oBAAmB,CAAA;AAAA,MAC1C,kBAAiB,6BAAM,oBAAmB,CAAA;AAAA,MAC1C,UAAS,6BAAM,YAAW,CAAA;AAAA,MAC1B,SAAQ,6BAAM,WAAU,CAAA;AAAA,MACxB,UAAU;AAAA,QACR,GAAG,6BAAM;AAAA,QACT,GAAI,WAAW,mBAAmB;AAAA,UAChC,UAAU;AAAA,YACR,aACE,WAAW,oBAAoB,UAC3B,UACA,IAAI,WAAW,eAAe;AAAA,UAAA;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,IAEF;AAAA,MACE,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,WAAW;AAAA,MACX;AAAA,IAAA;AAAA,EACF;AAIF,YAAU,MAAM;;AACd,UAAIA,OAAAC,MAAA,6BAAM,aAAN,gBAAAA,IAAgB,YAAhB,gBAAAD,IAAyB,iBAAgB,SAAS;AACpD,eAAS,QAAQ;AAAA,IACnB,OAAO;AACL,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,EAAC,wCAAM,aAAN,mBAAgB,YAAhB,mBAAyB,WAAW,CAAC;AAEzC,SAAO,oBAAC,mBAAA,EAAkB,OAAO,cAAe,SAAA,CAAS;AAC3D;AAEO,SAAS,uBAA+C;AAC7D,QAAM,UAAU,IAAI,iBAAiB;AACrC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;"}
+{"version":3,"file":"AppCatalogContext.js","sources":["../../../../../src/modules/appCatalog/context/AppCatalogContext.tsx"],"sourcesContent":["import type {\n  AppApprovalMethod,\n  AppVersionInfo,\n  Group,\n  GroupingTagDefinition,\n  Person,\n  Resource,\n} from '@igstack/app-catalog-backend-core'\nimport { useQuery } from '@tanstack/react-query'\nimport type { ReactNode } from 'react'\nimport { createContext, use, useEffect, useMemo } from 'react'\nimport { ApiQueryMagazineAppCatalog } from '~/modules/appCatalog'\nimport { useUiSettings } from '~/context/UiSettingsContext'\nimport { mergeFrontendBuildId } from '~/modules/appCatalog/context/mergeFrontendBuildId'\n\nexport interface AppCatalogContextIface {\n  resources: Resource[]\n  isLoadingApps: boolean\n  tagsDefinitions: GroupingTagDefinition[]\n  approvalMethods: AppApprovalMethod[]\n  persons: Person[]\n  groups: Group[]\n  versions?: AppVersionInfo\n}\n\nexport const AppCatalogContext = createContext<\n  AppCatalogContextIface | undefined\n>(undefined)\n\ninterface AppCatalogProviderProps {\n  children: ReactNode\n}\n\nexport function AppCatalogProvider({ children }: AppCatalogProviderProps) {\n  const { data, isLoading: isLoadingApps } = useQuery(\n    ApiQueryMagazineAppCatalog.getAppCatalog(),\n  )\n  const uiSettings = useUiSettings()\n\n  const contextValue = useMemo<AppCatalogContextIface>(\n    () => ({\n      resources: data?.resources ?? [],\n      isLoadingApps,\n      tagsDefinitions: data?.tagsDefinitions ?? [],\n      approvalMethods: data?.approvalMethods ?? [],\n      persons: data?.persons ?? [],\n      groups: data?.groups ?? [],\n      versions: mergeFrontendBuildId(\n        data?.versions ?? {},\n        uiSettings.frontendBuildId,\n      ),\n    }),\n    [\n      data?.approvalMethods,\n      data?.resources,\n      data?.tagsDefinitions,\n      data?.persons,\n      data?.groups,\n      data?.versions,\n      uiSettings.frontendBuildId,\n      isLoadingApps,\n    ],\n  )\n\n  // Update document title based on backend version\n  useEffect(() => {\n    if (data?.versions?.backend?.displayName === 'local') {\n      document.title = 'Local'\n    } else {\n      document.title = 'App Catalog'\n    }\n  }, [data?.versions?.backend?.displayName])\n\n  return <AppCatalogContext value={contextValue}>{children}</AppCatalogContext>\n}\n\nexport function useAppCatalogContext(): AppCatalogContextIface {\n  const context = use(AppCatalogContext)\n  if (!context) {\n    throw new Error(\n      'useAppCatalogContext must be used within AppCatalogProvider',\n    )\n  }\n  return context\n}\n"],"names":["_b","_a"],"mappings":";;;;;;;;;;;;;;;;;;AAyBO,MAAM,oBAAoB,cAE/B,MAAS;AAMJ,SAAS,mBAAmB,EAAE,YAAqC;;AACxE,QAAM,EAAE,MAAM,WAAW,cAAA,IAAkB;AAAA,IACzC,2BAA2B,cAAA;AAAA,EAAc;AAE3C,QAAM,aAAa,cAAA;AAEnB,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL,YAAW,6BAAM,cAAa,CAAA;AAAA,MAC9B;AAAA,MACA,kBAAiB,6BAAM,oBAAmB,CAAA;AAAA,MAC1C,kBAAiB,6BAAM,oBAAmB,CAAA;AAAA,MAC1C,UAAS,6BAAM,YAAW,CAAA;AAAA,MAC1B,SAAQ,6BAAM,WAAU,CAAA;AAAA,MACxB,UAAU;AAAA,SACR,6BAAM,aAAY,CAAA;AAAA,QAClB,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF;AAAA,MACE,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,WAAW;AAAA,MACX;AAAA,IAAA;AAAA,EACF;AAIF,YAAU,MAAM;;AACd,UAAIA,OAAAC,MAAA,6BAAM,aAAN,gBAAAA,IAAgB,YAAhB,gBAAAD,IAAyB,iBAAgB,SAAS;AACpD,eAAS,QAAQ;AAAA,IACnB,OAAO;AACL,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,EAAC,wCAAM,aAAN,mBAAgB,YAAhB,mBAAyB,WAAW,CAAC;AAEzC,SAAO,oBAAC,mBAAA,EAAkB,OAAO,cAAe,SAAA,CAAS;AAC3D;AAEO,SAAS,uBAA+C;AAC7D,QAAM,UAAU,IAAI,iBAAiB;AACrC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;"}

package/dist/esm/modules/appCatalog/context/mergeFrontendBuildId.d.ts

@@ -0,0 +1,15 @@
+import { AppVersionInfo } from '@igstack/app-catalog-backend-core';
+/**
+ * Merge the (natera-agnostic) frontend build id into the backend-provided
+ * version info's `frontend` slot.
+ *
+ * The build id is baked into the deployed JS bundle at build time (e.g. a CI
+ * pipeline id via a Vite env var). We PREPEND it to the resolved frontend-core
+ * npm version instead of replacing it, so the footer surfaces both:
+ *   `#<buildId> · <frontend-core version> (<sha>)`.
+ *
+ * - No build id → return versions unchanged.
+ * - build id === 'local' → show `local` (local dev, no meaningful SHA/version).
+ * - otherwise → prepend `#<buildId> · ` and preserve the version + sha + shaUrl.
+ */
+export declare function mergeFrontendBuildId(versions: AppVersionInfo, frontendBuildId: string | undefined): AppVersionInfo;

package/dist/esm/modules/appCatalog/context/mergeFrontendBuildId.js

@@ -0,0 +1,15 @@
+function mergeFrontendBuildId(versions, frontendBuildId) {
+  if (!frontendBuildId) return versions;
+  if (frontendBuildId === "local") {
+    return { ...versions, frontend: { displayName: "local" } };
+  }
+  const be = versions.frontend;
+  return {
+    ...versions,
+    frontend: be ? { ...be, displayName: `#${frontendBuildId} · ${be.displayName}` } : { displayName: `#${frontendBuildId}` }
+  };
+}
+export {
+  mergeFrontendBuildId
+};
+//# sourceMappingURL=mergeFrontendBuildId.js.map

package/dist/esm/modules/appCatalog/context/mergeFrontendBuildId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeFrontendBuildId.js","sources":["../../../../../src/modules/appCatalog/context/mergeFrontendBuildId.ts"],"sourcesContent":["import type { AppVersionInfo } from '@igstack/app-catalog-backend-core'\n\n/**\n * Merge the (natera-agnostic) frontend build id into the backend-provided\n * version info's `frontend` slot.\n *\n * The build id is baked into the deployed JS bundle at build time (e.g. a CI\n * pipeline id via a Vite env var). We PREPEND it to the resolved frontend-core\n * npm version instead of replacing it, so the footer surfaces both:\n *   `#<buildId> · <frontend-core version> (<sha>)`.\n *\n * - No build id → return versions unchanged.\n * - build id === 'local' → show `local` (local dev, no meaningful SHA/version).\n * - otherwise → prepend `#<buildId> · ` and preserve the version + sha + shaUrl.\n */\nexport function mergeFrontendBuildId(\n  versions: AppVersionInfo,\n  frontendBuildId: string | undefined,\n): AppVersionInfo {\n  if (!frontendBuildId) return versions\n  if (frontendBuildId === 'local') {\n    return { ...versions, frontend: { displayName: 'local' } }\n  }\n  const be = versions.frontend\n  return {\n    ...versions,\n    frontend: be\n      ? { ...be, displayName: `#${frontendBuildId} · ${be.displayName}` }\n      : { displayName: `#${frontendBuildId}` },\n  }\n}\n"],"names":[],"mappings":"AAeO,SAAS,qBACd,UACA,iBACgB;AAChB,MAAI,CAAC,gBAAiB,QAAO;AAC7B,MAAI,oBAAoB,SAAS;AAC/B,WAAO,EAAE,GAAG,UAAU,UAAU,EAAE,aAAa,UAAQ;AAAA,EACzD;AACA,QAAM,KAAK,SAAS;AACpB,SAAO;AAAA,IACL,GAAG;AAAA,IACH,UAAU,KACN,EAAE,GAAG,IAAI,aAAa,IAAI,eAAe,MAAM,GAAG,WAAW,OAC7D,EAAE,aAAa,IAAI,eAAe,GAAA;AAAA,EAAG;AAE7C;"}

package/dist/esm/modules/auth/AuthContext.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { use, createContext, useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, createContext, use } from "react";
 const AuthContext = createContext(void 0);
 const STORAGE_KEY = "ac_auth_user";
 function AuthProvider({ children }) {

package/dist/esm/modules/auth/AuthModalContext.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { use, createContext, useState, useMemo } from "react";
+import { useState, useMemo, createContext, use } from "react";
 const AuthModalContext = createContext(
   void 0
 );

package/dist/esm/routes/__root.js

@@ -3,11 +3,17 @@ import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
 import { RootErrorPage } from "../ui/components/error/RootErrorPage.js";
 import { NotFoundError } from "../ui/error/NotFoundError.js";
 import { LoadingScreen } from "../ui/layout/LoadingScreen.js";
+import { TopLevelProvidersForErrors } from "../ui/layout/TopLevelProvidersForErrors.js";
 const Route = createRootRouteWithContext()({
   component: RootRoute,
   errorComponent: RootErrorPage,
-  pendingComponent: () => /* @__PURE__ */ jsx(LoadingScreen, { label: "root pending" }),
-  notFoundComponent: () => /* @__PURE__ */ jsx(NotFoundError, {}),
+  // These fallbacks render MainLayout → Header → useAuth(), so they must be
+  // wrapped in the providers (Auth + AuthModal + Theme + Tooltip). The router
+  // renders pending/notFound OUTSIDE the route-component subtree, i.e. outside
+  // the app's TopLevelProviders — without this wrap they throw
+  // "useAuth must be used within AuthProvider" (see #6/#7).
+  pendingComponent: () => /* @__PURE__ */ jsx(TopLevelProvidersForErrors, { children: /* @__PURE__ */ jsx(LoadingScreen, { label: "root pending" }) }),
+  notFoundComponent: () => /* @__PURE__ */ jsx(TopLevelProvidersForErrors, { children: /* @__PURE__ */ jsx(NotFoundError, {}) }),
   wrapInSuspense: true
 });
 function RootRoute() {

package/dist/esm/routes/__root.js.map

@@ -1 +1 @@
-{"version":3,"file":"__root.js","sources":["../../../src/routes/__root.tsx"],"sourcesContent":["import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\nimport type { AcRouterContext } from '~/types/types'\nimport { RootErrorPage } from '~/ui/components/error/RootErrorPage'\nimport { NotFoundError } from '~/ui/error/NotFoundError'\nimport { LoadingScreen } from '~/ui/layout/LoadingScreen'\n\nexport const Route = createRootRouteWithContext<AcRouterContext>()({\n  component: RootRoute,\n  errorComponent: RootErrorPage,\n  pendingComponent: () => <LoadingScreen label=\"root pending\" />,\n  notFoundComponent: () => <NotFoundError />,\n  wrapInSuspense: true,\n})\n\nfunction RootRoute() {\n  return (\n    <div className=\"min-h-screen bg-base-200\">\n      <Outlet />\n      {import.meta.env.MODE === 'dev' ? <TanStackRouterDevtools /> : null}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;AAOO,MAAM,QAAQ,6BAA8C;AAAA,EACjE,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,kBAAkB,MAAM,oBAAC,eAAA,EAAc,OAAM,gBAAe;AAAA,EAC5D,mBAAmB,MAAM,oBAAC,eAAA,EAAc;AAAA,EACxC,gBAAgB;AAClB,CAAC;AAED,SAAS,YAAY;AACnB,SACE,qBAAC,OAAA,EAAI,WAAU,4BACb,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAO;AAAA,IACuD;AAAA,EAAA,GACjE;AAEJ;"}
+{"version":3,"file":"__root.js","sources":["../../../src/routes/__root.tsx"],"sourcesContent":["import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\nimport type { AcRouterContext } from '~/types/types'\nimport { RootErrorPage } from '~/ui/components/error/RootErrorPage'\nimport { NotFoundError } from '~/ui/error/NotFoundError'\nimport { LoadingScreen } from '~/ui/layout/LoadingScreen'\nimport { TopLevelProvidersForErrors } from '~/ui/layout/TopLevelProvidersForErrors'\n\nexport const Route = createRootRouteWithContext<AcRouterContext>()({\n  component: RootRoute,\n  errorComponent: RootErrorPage,\n  // These fallbacks render MainLayout → Header → useAuth(), so they must be\n  // wrapped in the providers (Auth + AuthModal + Theme + Tooltip). The router\n  // renders pending/notFound OUTSIDE the route-component subtree, i.e. outside\n  // the app's TopLevelProviders — without this wrap they throw\n  // \"useAuth must be used within AuthProvider\" (see #6/#7).\n  pendingComponent: () => (\n    <TopLevelProvidersForErrors>\n      <LoadingScreen label=\"root pending\" />\n    </TopLevelProvidersForErrors>\n  ),\n  notFoundComponent: () => (\n    <TopLevelProvidersForErrors>\n      <NotFoundError />\n    </TopLevelProvidersForErrors>\n  ),\n  wrapInSuspense: true,\n})\n\nfunction RootRoute() {\n  return (\n    <div className=\"min-h-screen bg-base-200\">\n      <Outlet />\n      {import.meta.env.MODE === 'dev' ? <TanStackRouterDevtools /> : null}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAQO,MAAM,QAAQ,6BAA8C;AAAA,EACjE,WAAW;AAAA,EACX,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMhB,kBAAkB,MAChB,oBAAC,4BAAA,EACC,8BAAC,eAAA,EAAc,OAAM,eAAA,CAAe,GACtC;AAAA,EAEF,mBAAmB,MACjB,oBAAC,4BAAA,EACC,UAAA,oBAAC,iBAAc,GACjB;AAAA,EAEF,gBAAgB;AAClB,CAAC;AAED,SAAS,YAAY;AACnB,SACE,qBAAC,OAAA,EAAI,WAAU,4BACb,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAO;AAAA,IACuD;AAAA,EAAA,GACjE;AAEJ;"}

package/dist/esm/ui/components/header/Header.d.ts

@@ -1,4 +1,8 @@
+import { AppVersionInfo } from '@igstack/app-catalog-backend-core';
 import { default as React } from 'react';
+export declare function VersionDisplay({ versions }: {
+    versions: AppVersionInfo;
+}): import("react/jsx-runtime").JSX.Element;
 export interface HeaderProps {
     middle?: React.ReactNode;
 }

package/dist/esm/ui/components/header/Header.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { Link } from "@tanstack/react-router";
 import { useQuery } from "@tanstack/react-query";
 import { LogOut } from "lucide-react";
@@ -13,32 +13,54 @@ import { useAuthModal } from "../../../modules/auth/AuthModalContext.js";
 import { Button } from "../../button.js";
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuItem } from "../../dropdown-menu.js";
 import { Skeleton } from "../../skeleton.js";
+function ShaSuffix({ version }) {
+  if (!version.sha) return null;
+  if (version.shaUrl) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: version.shaUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "text-muted-foreground hover:text-primary",
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            "(",
+            version.sha,
+            ")"
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+    " (",
+    version.sha,
+    ")"
+  ] });
+}
 function VersionItem({
   label,
   version
 }) {
-  if (version.url) {
-    return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", title: label, children: [
+    label,
+    ":",
+    " ",
+    version.url ? /* @__PURE__ */ jsx(
       "a",
       {
         href: version.url,
         target: "_blank",
         rel: "noopener noreferrer",
-        className: "text-xs text-primary hover:text-primary/80 transition-colors font-medium",
+        className: "text-primary hover:text-primary/80 transition-colors font-medium",
         onClick: (e) => e.stopPropagation(),
-        title: label,
-        children: [
-          label,
-          ": ",
-          version.displayName
-        ]
+        children: version.displayName
       }
-    );
-  }
-  return /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", title: label, children: [
-    label,
-    ": ",
-    version.displayName
+    ) : version.displayName,
+    /* @__PURE__ */ jsx(ShaSuffix, { version })
   ] });
 }
 function VersionDisplay({ versions }) {
@@ -154,6 +176,7 @@ function Header({ middle }) {
   ] });
 }
 export {
-  Header
+  Header,
+  VersionDisplay
 };
 //# sourceMappingURL=Header.js.map

package/dist/esm/ui/components/header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../../src/ui/components/header/Header.tsx"],"sourcesContent":["import type {\n  AppVersionInfo,\n  VersionInfo,\n} from '@igstack/app-catalog-backend-core'\nimport { Link } from '@tanstack/react-router'\nimport { useQuery } from '@tanstack/react-query'\nimport { LogOut } from 'lucide-react'\nimport React, { use } from 'react'\nimport AppCatalogLogo from '~/assets/app-catalog.svg?react'\nimport { useTRPC } from '~/api/infra/trpc'\nimport { ThemeSwitcher } from '~/components/ThemeSwitcher'\nimport { AppCatalogContext } from '~/modules/appCatalog/context/AppCatalogContext'\nimport {\n  useAuth,\n  useAuthActions,\n  useIsAuthenticated,\n  useUser,\n} from '~/modules/auth'\nimport { useAuthModal } from '~/modules/auth/AuthModalContext'\nimport { Button } from '~/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '~/ui/dropdown-menu'\nimport { Skeleton } from '~/ui/skeleton'\n\nfunction VersionItem({\n  label,\n  version,\n}: {\n  label: string\n  version: VersionInfo\n}) {\n  if (version.url) {\n    return (\n      <a\n        href={version.url}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className=\"text-xs text-primary hover:text-primary/80 transition-colors font-medium\"\n        onClick={(e) => e.stopPropagation()}\n        title={label}\n      >\n        {label}: {version.displayName}\n      </a>\n    )\n  }\n  return (\n    <span className=\"text-xs text-muted-foreground\" title={label}>\n      {label}: {version.displayName}\n    </span>\n  )\n}\n\nfunction VersionDisplay({ versions }: { versions: AppVersionInfo }) {\n  const isLocal =\n    versions.backend?.displayName === 'local' && !versions.coreVersion\n\n  if (isLocal) {\n    return (\n      <span className=\"text-xs text-muted-foreground\" title=\"Local\">\n        local\n      </span>\n    )\n  }\n\n  return (\n    <div className=\"flex flex-col gap-0.5\">\n      {versions.backend && (\n        <VersionItem label=\"Pipeline\" version={versions.backend} />\n      )}\n      {versions.coreVersion && (\n        <VersionItem label=\"Core\" version={versions.coreVersion} />\n      )}\n      {versions.frontend && (\n        <VersionItem label=\"FE\" version={versions.frontend} />\n      )}\n    </div>\n  )\n}\n\nexport interface HeaderProps {\n  middle?: React.ReactNode\n}\n\nexport function Header({ middle }: HeaderProps) {\n  const { isLoading } = useAuth()\n  const isAuthenticated = useIsAuthenticated()\n  const user = useUser()\n  const { logout, devLogin } = useAuthActions()\n  const { open: openLoginModal } = useAuthModal()\n  const appCatalogContextMaybe = use(AppCatalogContext)\n  const trpc = useTRPC()\n  const { data: providersData } = useQuery(\n    trpc.auth.getProviders.queryOptions(),\n  )\n\n  const handleLogout = async () => {\n    try {\n      await logout()\n    } catch (error) {\n      console.error('Logout failed:', error)\n    }\n  }\n\n  const handleLoginClick = () => {\n    // Preserve the current URL for redirect after login\n    const currentUrl = window.location.pathname + window.location.search\n    openLoginModal(currentUrl)\n  }\n\n  return (\n    <div className=\"flex items-center mb-4 pb-4 gap-4 border-b\">\n      <div className=\"flex items-center gap-4\">\n        <Link to=\"/\">\n          <div className=\"flex items-center gap-2\">\n            <AppCatalogLogo className=\"h-16 w-16\" />\n            <div className=\"flex flex-col\">\n              <span className=\"text-lg font-bold\">App Catalog</span>\n              {appCatalogContextMaybe?.versions && (\n                <VersionDisplay versions={appCatalogContextMaybe.versions} />\n              )}\n            </div>\n          </div>\n        </Link>\n      </div>\n      {middle && <div className=\"flex-1\">{middle}</div>}\n      <div className=\"flex items-center gap-3 ml-auto\">\n        <ThemeSwitcher />\n        {isLoading ? (\n          <Skeleton className=\"w-8 h-8 rounded-full\" />\n        ) : !isAuthenticated ? (\n          <div className=\"flex items-center gap-2\">\n            {providersData?.devLoginEnabled && (\n              <button\n                type=\"button\"\n                onClick={devLogin}\n                className=\"text-xs font-medium px-2 py-1 rounded bg-amber-500/20 text-amber-600 dark:text-amber-400 hover:bg-amber-500/30 border border-amber-500/30 cursor-pointer\"\n              >\n                DEV Login\n              </button>\n            )}\n            <button\n              type=\"button\"\n              onClick={handleLoginClick}\n              className=\"text-sm font-medium text-muted-foreground hover:text-foreground cursor-pointer\"\n            >\n              Login\n            </button>\n          </div>\n        ) : (\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"w-8 h-8 rounded-full p-0 hover:bg-accent hover:text-accent-foreground cursor-pointer\"\n                aria-label={`User menu for ${user?.name || 'User'}`}\n                data-testid=\"user-avatar-button\"\n              >\n                {user?.image ? (\n                  <img\n                    src={user.image}\n                    alt={user.name || 'User'}\n                    className=\"w-full h-full rounded-full object-cover\"\n                  />\n                ) : (\n                  <div className=\"flex items-center justify-center w-full h-full rounded-full bg-primary text-primary-foreground text-xs font-semibold\">\n                    {(user?.name || user?.email || '?').charAt(0).toUpperCase()}\n                  </div>\n                )}\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-56\">\n              <div className=\"px-2 py-3 flex items-center gap-3\">\n                {user?.image ? (\n                  <img\n                    src={user.image}\n                    alt={user.name || 'User'}\n                    className=\"w-10 h-10 rounded-full object-cover shrink-0\"\n                  />\n                ) : (\n                  <div className=\"flex items-center justify-center w-10 h-10 rounded-full bg-primary text-primary-foreground text-sm font-semibold shrink-0\">\n                    {(user?.name || user?.email || '?').charAt(0).toUpperCase()}\n                  </div>\n                )}\n                <div className=\"flex flex-col min-w-0\">\n                  <p className=\"text-xs text-muted-foreground truncate\">\n                    @{user?.email?.split('@')[0] || 'user'}\n                  </p>\n                  <p className=\"text-sm font-medium truncate\">\n                    {user?.name || 'User'}\n                  </p>\n                </div>\n              </div>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem onClick={handleLogout}>\n                <LogOut className=\"h-4 w-4 mr-2\" />\n                <span>Sign out</span>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["AppCatalogLogo"],"mappings":";;;;;;;;;;;;;;;AA6BA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AACF,GAGG;AACD,MAAI,QAAQ,KAAK;AACf,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,QAAQ;AAAA,QACd,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,QAClB,OAAO;AAAA,QAEN,UAAA;AAAA,UAAA;AAAA,UAAM;AAAA,UAAG,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxB;AACA,SACE,qBAAC,QAAA,EAAK,WAAU,iCAAgC,OAAO,OACpD,UAAA;AAAA,IAAA;AAAA,IAAM;AAAA,IAAG,QAAQ;AAAA,EAAA,GACpB;AAEJ;AAEA,SAAS,eAAe,EAAE,YAA0C;;AAClE,QAAM,YACJ,cAAS,YAAT,mBAAkB,iBAAgB,WAAW,CAAC,SAAS;AAEzD,MAAI,SAAS;AACX,+BACG,QAAA,EAAK,WAAU,iCAAgC,OAAM,SAAQ,UAAA,SAE9D;AAAA,EAEJ;AAEA,SACE,qBAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,IAAA,SAAS,WACR,oBAAC,aAAA,EAAY,OAAM,YAAW,SAAS,SAAS,SAAS;AAAA,IAE1D,SAAS,eACR,oBAAC,aAAA,EAAY,OAAM,QAAO,SAAS,SAAS,aAAa;AAAA,IAE1D,SAAS,YACR,oBAAC,aAAA,EAAY,OAAM,MAAK,SAAS,SAAS,SAAA,CAAU;AAAA,EAAA,GAExD;AAEJ;AAMO,SAAS,OAAO,EAAE,UAAuB;;AAC9C,QAAM,EAAE,UAAA,IAAc,QAAA;AACtB,QAAM,kBAAkB,mBAAA;AACxB,QAAM,OAAO,QAAA;AACb,QAAM,EAAE,QAAQ,SAAA,IAAa,eAAA;AAC7B,QAAM,EAAE,MAAM,eAAA,IAAmB,aAAA;AACjC,QAAM,yBAAyB,IAAI,iBAAiB;AACpD,QAAM,OAAO,QAAA;AACb,QAAM,EAAE,MAAM,cAAA,IAAkB;AAAA,IAC9B,KAAK,KAAK,aAAa,aAAA;AAAA,EAAa;AAGtC,QAAM,eAAe,YAAY;AAC/B,QAAI;AACF,YAAM,OAAA;AAAA,IACR,SAAS,OAAO;AACd,cAAQ,MAAM,kBAAkB,KAAK;AAAA,IACvC;AAAA,EACF;AAEA,QAAM,mBAAmB,MAAM;AAE7B,UAAM,aAAa,OAAO,SAAS,WAAW,OAAO,SAAS;AAC9D,mBAAe,UAAU;AAAA,EAC3B;AAEA,SACE,qBAAC,OAAA,EAAI,WAAU,8CACb,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,2BACb,UAAA,oBAAC,MAAA,EAAK,IAAG,KACP,UAAA,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,MAAA,oBAACA,eAAA,EAAe,WAAU,YAAA,CAAY;AAAA,MACtC,qBAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,qBAAoB,UAAA,eAAW;AAAA,SAC9C,iEAAwB,aACvB,oBAAC,gBAAA,EAAe,UAAU,uBAAuB,SAAA,CAAU;AAAA,MAAA,EAAA,CAE/D;AAAA,IAAA,EAAA,CACF,GACF,GACF;AAAA,IACC,UAAU,oBAAC,OAAA,EAAI,WAAU,UAAU,UAAA,QAAO;AAAA,IAC3C,qBAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,MAAA,oBAAC,eAAA,EAAc;AAAA,MACd,YACC,oBAAC,UAAA,EAAS,WAAU,uBAAA,CAAuB,IACzC,CAAC,kBACH,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,SAAA,+CAAe,oBACd;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YACX,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAIH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YACX,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED,EAAA,CACF,yBAEC,cAAA,EACC,UAAA;AAAA,QAAA,oBAAC,qBAAA,EAAoB,SAAO,MAC1B,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAY,kBAAiB,6BAAM,SAAQ,MAAM;AAAA,YACjD,eAAY;AAAA,YAEX,wCAAM,SACL;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK,KAAK;AAAA,gBACV,KAAK,KAAK,QAAQ;AAAA,gBAClB,WAAU;AAAA,cAAA;AAAA,YAAA,IAGZ,oBAAC,OAAA,EAAI,WAAU,wHACX,YAAA,6BAAM,UAAQ,6BAAM,UAAS,KAAK,OAAO,CAAC,EAAE,cAAY,CAC5D;AAAA,UAAA;AAAA,QAAA,GAGN;AAAA,QACA,qBAAC,qBAAA,EAAoB,OAAM,OAAM,WAAU,QACzC,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,qCACZ,UAAA;AAAA,aAAA,6BAAM,SACL;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK,KAAK;AAAA,gBACV,KAAK,KAAK,QAAQ;AAAA,gBAClB,WAAU;AAAA,cAAA;AAAA,YAAA,IAGZ,oBAAC,OAAA,EAAI,WAAU,6HACX,YAAA,6BAAM,UAAQ,6BAAM,UAAS,KAAK,OAAO,CAAC,EAAE,eAChD;AAAA,YAEF,qBAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,cAAA,qBAAC,KAAA,EAAE,WAAU,0CAAyC,UAAA;AAAA,gBAAA;AAAA,kBAClD,kCAAM,UAAN,mBAAa,MAAM,KAAK,OAAM;AAAA,cAAA,GAClC;AAAA,kCACC,KAAA,EAAE,WAAU,gCACV,WAAA,6BAAM,SAAQ,OAAA,CACjB;AAAA,YAAA,EAAA,CACF;AAAA,UAAA,GACF;AAAA,8BACC,uBAAA,EAAsB;AAAA,UACvB,qBAAC,kBAAA,EAAiB,SAAS,cACzB,UAAA;AAAA,YAAA,oBAAC,QAAA,EAAO,WAAU,eAAA,CAAe;AAAA,YACjC,oBAAC,UAAK,UAAA,WAAA,CAAQ;AAAA,UAAA,EAAA,CAChB;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"Header.js","sources":["../../../../../src/ui/components/header/Header.tsx"],"sourcesContent":["import type {\n  AppVersionInfo,\n  VersionInfo,\n} from '@igstack/app-catalog-backend-core'\nimport { Link } from '@tanstack/react-router'\nimport { useQuery } from '@tanstack/react-query'\nimport { LogOut } from 'lucide-react'\nimport React, { use } from 'react'\nimport AppCatalogLogo from '~/assets/app-catalog.svg?react'\nimport { useTRPC } from '~/api/infra/trpc'\nimport { ThemeSwitcher } from '~/components/ThemeSwitcher'\nimport { AppCatalogContext } from '~/modules/appCatalog/context/AppCatalogContext'\nimport {\n  useAuth,\n  useAuthActions,\n  useIsAuthenticated,\n  useUser,\n} from '~/modules/auth'\nimport { useAuthModal } from '~/modules/auth/AuthModalContext'\nimport { Button } from '~/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '~/ui/dropdown-menu'\nimport { Skeleton } from '~/ui/skeleton'\n\nfunction ShaSuffix({ version }: { version: VersionInfo }) {\n  if (!version.sha) return null\n  if (version.shaUrl) {\n    return (\n      <>\n        {' '}\n        <a\n          href={version.shaUrl}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"text-muted-foreground hover:text-primary\"\n          onClick={(e) => e.stopPropagation()}\n        >\n          ({version.sha})\n        </a>\n      </>\n    )\n  }\n  return <span className=\"text-muted-foreground\"> ({version.sha})</span>\n}\n\nfunction VersionItem({\n  label,\n  version,\n}: {\n  label: string\n  version: VersionInfo\n}) {\n  // Outer element is a <span> (not <a>) so the optional SHA link can be a\n  // sibling anchor without producing invalid nested <a> markup.\n  return (\n    <span className=\"text-xs text-muted-foreground\" title={label}>\n      {label}:{' '}\n      {version.url ? (\n        <a\n          href={version.url}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"text-primary hover:text-primary/80 transition-colors font-medium\"\n          onClick={(e) => e.stopPropagation()}\n        >\n          {version.displayName}\n        </a>\n      ) : (\n        version.displayName\n      )}\n      <ShaSuffix version={version} />\n    </span>\n  )\n}\n\nexport function VersionDisplay({ versions }: { versions: AppVersionInfo }) {\n  const isLocal =\n    versions.backend?.displayName === 'local' && !versions.coreVersion\n\n  if (isLocal) {\n    return (\n      <span className=\"text-xs text-muted-foreground\" title=\"Local\">\n        local\n      </span>\n    )\n  }\n\n  return (\n    <div className=\"flex flex-col gap-0.5\">\n      {versions.backend && (\n        <VersionItem label=\"Pipeline\" version={versions.backend} />\n      )}\n      {versions.coreVersion && (\n        <VersionItem label=\"Core\" version={versions.coreVersion} />\n      )}\n      {versions.frontend && (\n        <VersionItem label=\"FE\" version={versions.frontend} />\n      )}\n    </div>\n  )\n}\n\nexport interface HeaderProps {\n  middle?: React.ReactNode\n}\n\nexport function Header({ middle }: HeaderProps) {\n  const { isLoading } = useAuth()\n  const isAuthenticated = useIsAuthenticated()\n  const user = useUser()\n  const { logout, devLogin } = useAuthActions()\n  const { open: openLoginModal } = useAuthModal()\n  const appCatalogContextMaybe = use(AppCatalogContext)\n  const trpc = useTRPC()\n  const { data: providersData } = useQuery(\n    trpc.auth.getProviders.queryOptions(),\n  )\n\n  const handleLogout = async () => {\n    try {\n      await logout()\n    } catch (error) {\n      console.error('Logout failed:', error)\n    }\n  }\n\n  const handleLoginClick = () => {\n    // Preserve the current URL for redirect after login\n    const currentUrl = window.location.pathname + window.location.search\n    openLoginModal(currentUrl)\n  }\n\n  return (\n    <div className=\"flex items-center mb-4 pb-4 gap-4 border-b\">\n      <div className=\"flex items-center gap-4\">\n        <Link to=\"/\">\n          <div className=\"flex items-center gap-2\">\n            <AppCatalogLogo className=\"h-16 w-16\" />\n            <div className=\"flex flex-col\">\n              <span className=\"text-lg font-bold\">App Catalog</span>\n              {appCatalogContextMaybe?.versions && (\n                <VersionDisplay versions={appCatalogContextMaybe.versions} />\n              )}\n            </div>\n          </div>\n        </Link>\n      </div>\n      {middle && <div className=\"flex-1\">{middle}</div>}\n      <div className=\"flex items-center gap-3 ml-auto\">\n        <ThemeSwitcher />\n        {isLoading ? (\n          <Skeleton className=\"w-8 h-8 rounded-full\" />\n        ) : !isAuthenticated ? (\n          <div className=\"flex items-center gap-2\">\n            {providersData?.devLoginEnabled && (\n              <button\n                type=\"button\"\n                onClick={devLogin}\n                className=\"text-xs font-medium px-2 py-1 rounded bg-amber-500/20 text-amber-600 dark:text-amber-400 hover:bg-amber-500/30 border border-amber-500/30 cursor-pointer\"\n              >\n                DEV Login\n              </button>\n            )}\n            <button\n              type=\"button\"\n              onClick={handleLoginClick}\n              className=\"text-sm font-medium text-muted-foreground hover:text-foreground cursor-pointer\"\n            >\n              Login\n            </button>\n          </div>\n        ) : (\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"w-8 h-8 rounded-full p-0 hover:bg-accent hover:text-accent-foreground cursor-pointer\"\n                aria-label={`User menu for ${user?.name || 'User'}`}\n                data-testid=\"user-avatar-button\"\n              >\n                {user?.image ? (\n                  <img\n                    src={user.image}\n                    alt={user.name || 'User'}\n                    className=\"w-full h-full rounded-full object-cover\"\n                  />\n                ) : (\n                  <div className=\"flex items-center justify-center w-full h-full rounded-full bg-primary text-primary-foreground text-xs font-semibold\">\n                    {(user?.name || user?.email || '?').charAt(0).toUpperCase()}\n                  </div>\n                )}\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-56\">\n              <div className=\"px-2 py-3 flex items-center gap-3\">\n                {user?.image ? (\n                  <img\n                    src={user.image}\n                    alt={user.name || 'User'}\n                    className=\"w-10 h-10 rounded-full object-cover shrink-0\"\n                  />\n                ) : (\n                  <div className=\"flex items-center justify-center w-10 h-10 rounded-full bg-primary text-primary-foreground text-sm font-semibold shrink-0\">\n                    {(user?.name || user?.email || '?').charAt(0).toUpperCase()}\n                  </div>\n                )}\n                <div className=\"flex flex-col min-w-0\">\n                  <p className=\"text-xs text-muted-foreground truncate\">\n                    @{user?.email?.split('@')[0] || 'user'}\n                  </p>\n                  <p className=\"text-sm font-medium truncate\">\n                    {user?.name || 'User'}\n                  </p>\n                </div>\n              </div>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem onClick={handleLogout}>\n                <LogOut className=\"h-4 w-4 mr-2\" />\n                <span>Sign out</span>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["AppCatalogLogo"],"mappings":";;;;;;;;;;;;;;;AA6BA,SAAS,UAAU,EAAE,WAAqC;AACxD,MAAI,CAAC,QAAQ,IAAK,QAAO;AACzB,MAAI,QAAQ,QAAQ;AAClB,WACE,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA;AAAA,MACD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM,QAAQ;AAAA,UACd,QAAO;AAAA,UACP,KAAI;AAAA,UACJ,WAAU;AAAA,UACV,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,UACnB,UAAA;AAAA,YAAA;AAAA,YACG,QAAQ;AAAA,YAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAChB,GACF;AAAA,EAEJ;AACA,SAAO,qBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA;AAAA,IAAA;AAAA,IAAG,QAAQ;AAAA,IAAI;AAAA,EAAA,GAAC;AACjE;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AACF,GAGG;AAGD,SACE,qBAAC,QAAA,EAAK,WAAU,iCAAgC,OAAO,OACpD,UAAA;AAAA,IAAA;AAAA,IAAM;AAAA,IAAE;AAAA,IACR,QAAQ,MACP;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,QAAQ;AAAA,QACd,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,QAEjB,UAAA,QAAQ;AAAA,MAAA;AAAA,IAAA,IAGX,QAAQ;AAAA,IAEV,oBAAC,aAAU,QAAA,CAAkB;AAAA,EAAA,GAC/B;AAEJ;AAEO,SAAS,eAAe,EAAE,YAA0C;;AACzE,QAAM,YACJ,cAAS,YAAT,mBAAkB,iBAAgB,WAAW,CAAC,SAAS;AAEzD,MAAI,SAAS;AACX,+BACG,QAAA,EAAK,WAAU,iCAAgC,OAAM,SAAQ,UAAA,SAE9D;AAAA,EAEJ;AAEA,SACE,qBAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,IAAA,SAAS,WACR,oBAAC,aAAA,EAAY,OAAM,YAAW,SAAS,SAAS,SAAS;AAAA,IAE1D,SAAS,eACR,oBAAC,aAAA,EAAY,OAAM,QAAO,SAAS,SAAS,aAAa;AAAA,IAE1D,SAAS,YACR,oBAAC,aAAA,EAAY,OAAM,MAAK,SAAS,SAAS,SAAA,CAAU;AAAA,EAAA,GAExD;AAEJ;AAMO,SAAS,OAAO,EAAE,UAAuB;;AAC9C,QAAM,EAAE,UAAA,IAAc,QAAA;AACtB,QAAM,kBAAkB,mBAAA;AACxB,QAAM,OAAO,QAAA;AACb,QAAM,EAAE,QAAQ,SAAA,IAAa,eAAA;AAC7B,QAAM,EAAE,MAAM,eAAA,IAAmB,aAAA;AACjC,QAAM,yBAAyB,IAAI,iBAAiB;AACpD,QAAM,OAAO,QAAA;AACb,QAAM,EAAE,MAAM,cAAA,IAAkB;AAAA,IAC9B,KAAK,KAAK,aAAa,aAAA;AAAA,EAAa;AAGtC,QAAM,eAAe,YAAY;AAC/B,QAAI;AACF,YAAM,OAAA;AAAA,IACR,SAAS,OAAO;AACd,cAAQ,MAAM,kBAAkB,KAAK;AAAA,IACvC;AAAA,EACF;AAEA,QAAM,mBAAmB,MAAM;AAE7B,UAAM,aAAa,OAAO,SAAS,WAAW,OAAO,SAAS;AAC9D,mBAAe,UAAU;AAAA,EAC3B;AAEA,SACE,qBAAC,OAAA,EAAI,WAAU,8CACb,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,2BACb,UAAA,oBAAC,MAAA,EAAK,IAAG,KACP,UAAA,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,MAAA,oBAACA,eAAA,EAAe,WAAU,YAAA,CAAY;AAAA,MACtC,qBAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,qBAAoB,UAAA,eAAW;AAAA,SAC9C,iEAAwB,aACvB,oBAAC,gBAAA,EAAe,UAAU,uBAAuB,SAAA,CAAU;AAAA,MAAA,EAAA,CAE/D;AAAA,IAAA,EAAA,CACF,GACF,GACF;AAAA,IACC,UAAU,oBAAC,OAAA,EAAI,WAAU,UAAU,UAAA,QAAO;AAAA,IAC3C,qBAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,MAAA,oBAAC,eAAA,EAAc;AAAA,MACd,YACC,oBAAC,UAAA,EAAS,WAAU,uBAAA,CAAuB,IACzC,CAAC,kBACH,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,SAAA,+CAAe,oBACd;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YACX,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAIH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YACX,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED,EAAA,CACF,yBAEC,cAAA,EACC,UAAA;AAAA,QAAA,oBAAC,qBAAA,EAAoB,SAAO,MAC1B,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAY,kBAAiB,6BAAM,SAAQ,MAAM;AAAA,YACjD,eAAY;AAAA,YAEX,wCAAM,SACL;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK,KAAK;AAAA,gBACV,KAAK,KAAK,QAAQ;AAAA,gBAClB,WAAU;AAAA,cAAA;AAAA,YAAA,IAGZ,oBAAC,OAAA,EAAI,WAAU,wHACX,YAAA,6BAAM,UAAQ,6BAAM,UAAS,KAAK,OAAO,CAAC,EAAE,cAAY,CAC5D;AAAA,UAAA;AAAA,QAAA,GAGN;AAAA,QACA,qBAAC,qBAAA,EAAoB,OAAM,OAAM,WAAU,QACzC,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,qCACZ,UAAA;AAAA,aAAA,6BAAM,SACL;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK,KAAK;AAAA,gBACV,KAAK,KAAK,QAAQ;AAAA,gBAClB,WAAU;AAAA,cAAA;AAAA,YAAA,IAGZ,oBAAC,OAAA,EAAI,WAAU,6HACX,YAAA,6BAAM,UAAQ,6BAAM,UAAS,KAAK,OAAO,CAAC,EAAE,eAChD;AAAA,YAEF,qBAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,cAAA,qBAAC,KAAA,EAAE,WAAU,0CAAyC,UAAA;AAAA,gBAAA;AAAA,kBAClD,kCAAM,UAAN,mBAAa,MAAM,KAAK,OAAM;AAAA,cAAA,GAClC;AAAA,kCACC,KAAA,EAAE,WAAU,gCACV,WAAA,6BAAM,SAAQ,OAAA,CACjB;AAAA,YAAA,EAAA,CACF;AAAA,UAAA,GACF;AAAA,8BACC,uBAAA,EAAsB;AAAA,UACvB,qBAAC,kBAAA,EAAiB,SAAS,cACzB,UAAA;AAAA,YAAA,oBAAC,QAAA,EAAO,WAAU,eAAA,CAAe;AAAA,YACjC,oBAAC,UAAK,UAAA,WAAA,CAAQ;AAAA,UAAA,EAAA,CAChB;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igstack/app-catalog-frontend-core",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Frontend core library for App Catalog",
   "homepage": "https://github.com/lislon/app-catalog",
   "repository": {
@@ -134,8 +134,8 @@
     "vite-plugin-static-copy": "^3.1.4",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^4.1.2",
-    "@igstack/app-catalog-backend-core": "0.6.0",
-    "@igstack/app-catalog-shared-core": "0.6.0"
+    "@igstack/app-catalog-backend-core": "0.6.2",
+    "@igstack/app-catalog-shared-core": "0.6.2"
   },
   "peerDependencies": {
     "react": "19.1.2",
@@ -144,6 +144,7 @@
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.2.0"
   },
+  "gitHead": "dcc2b0acf435e115ec42861ec79064c6394b1ada",
   "scripts": {
     "build": "vite build",
     "build:lenient": "vite build --mode lenient",

package/src/__tests__/integration/harness/given.tsx

@@ -174,7 +174,14 @@ export async function given(
       const hasTanstackError = document.body.textContent.includes(
         'Something went wrong',
       )
-      if (!hasAlert && !hasTable && !hasSearchbox && !hasTanstackError) {
+      const hasNotFound = document.body.textContent.includes('404 Not Found')
+      if (
+        !hasAlert &&
+        !hasTable &&
+        !hasSearchbox &&
+        !hasTanstackError &&
+        !hasNotFound
+      ) {
         throw new Error('Still loading...')
       }
     },

package/src/__tests__/integration/notFoundRoute.integration.test.tsx

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+import { screen, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+
+import { given } from './harness/given'
+import { magazine } from './mock-backend/magazines'
+
+/**
+ * Regression for #7 (root cause in #6): the root route's `notFoundComponent`
+ * (`NotFoundError`) renders `MainLayout → Header → useAuth()`. Before the fix
+ * the fallback rendered OUTSIDE `AuthProvider`, so any unknown URL threw
+ * `useAuth must be used within AuthProvider` and the app showed its "Ooops!"
+ * error page instead of a clean 404.
+ */
+describe('Unknown URL renders NotFound without a useAuth error', () => {
+  it('shows the 404 page (not the useAuth error) for a bogus URL', async () => {
+    const { ui } = await given(magazine.full(), {
+      initialRoute: '/nonexistent-xyz',
+    })
+
+    // The clean NotFound UI is rendered.
+    await waitFor(() => {
+      expect(screen.getByText('404 Not Found')).toBeInTheDocument()
+    })
+
+    // And crucially: NO useAuth error surfaced. The header (which calls
+    // useAuth) must render inside a provider, so the global error page must
+    // not appear at all.
+    expect(
+      screen.queryByText(/useAuth must be used within AuthProvider/),
+    ).not.toBeInTheDocument()
+    expect(() => ui.globalError()).toThrow(/No global error found/)
+  })
+})

package/src/__tests__/modules/appCatalog/utils/mergeFrontendBuildId.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+import { mergeFrontendBuildId } from '~/modules/appCatalog/context/mergeFrontendBuildId'
+
+describe('mergeFrontendBuildId', () => {
+  it('returns versions unchanged when no build id', () => {
+    const versions = { frontend: { displayName: '0.4.0', sha: 'abc1234' } }
+    expect(mergeFrontendBuildId(versions, undefined)).toEqual(versions)
+  })
+
+  it('shows local (dropping SHA) when build id is local', () => {
+    const versions = { frontend: { displayName: '0.4.0', sha: 'abc1234' } }
+    const out = mergeFrontendBuildId(versions, 'local')
+    expect(out.frontend).toEqual({ displayName: 'local' })
+  })
+
+  it('prepends pipeline id while preserving fe-core version + sha + url', () => {
+    const versions = {
+      frontend: {
+        displayName: '0.4.0-alpha-x',
+        sha: 'abc1234',
+        shaUrl: 'https://github.com/lislon/app-catalog/commit/abc1234',
+      },
+    }
+    const out = mergeFrontendBuildId(versions, '12345')
+    expect(out.frontend?.displayName).toBe('#12345 · 0.4.0-alpha-x')
+    expect(out.frontend?.sha).toBe('abc1234')
+    expect(out.frontend?.shaUrl).toBe(
+      'https://github.com/lislon/app-catalog/commit/abc1234',
+    )
+  })
+
+  it('shows only pipeline id when backend gave no frontend slot', () => {
+    const out = mergeFrontendBuildId({}, '12345')
+    expect(out.frontend).toEqual({ displayName: '#12345' })
+  })
+
+  it('does not mutate the input', () => {
+    const versions = { frontend: { displayName: '0.4.0' } }
+    mergeFrontendBuildId(versions, '99')
+    expect(versions.frontend.displayName).toBe('0.4.0')
+  })
+})

package/src/__tests__/ui/components/header/VersionDisplay.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+
+import { VersionDisplay } from '~/ui/components/header/Header'
+
+describe('VersionDisplay footer', () => {
+  it('renders the frontend-core version and its short SHA as a commit link', () => {
+    render(
+      <VersionDisplay
+        versions={{
+          backend: { displayName: '#12345 (deadbee)' },
+          coreVersion: { displayName: 'be 0.4.0 / fe 0.3.1' },
+          frontend: {
+            displayName: '#12345 · 0.3.1-alpha-x',
+            sha: 'abc1234',
+            shaUrl: 'https://github.com/lislon/app-catalog/commit/abc1234',
+          },
+        }}
+      />,
+    )
+    // FE line shows pipeline id + fe-core version
+    expect(screen.getByText(/0\.3\.1-alpha-x/)).toBeInTheDocument()
+    // SHA rendered and linked to the commit
+    const shaLink = screen.getByText('(abc1234)').closest('a')
+    expect(shaLink).toHaveAttribute(
+      'href',
+      'https://github.com/lislon/app-catalog/commit/abc1234',
+    )
+    // Backend line carries the natera SHA suffix
+    expect(screen.getByText(/#12345 \(deadbee\)/)).toBeInTheDocument()
+  })
+
+  it('shows plain "local" for local dev', () => {
+    render(<VersionDisplay versions={{ backend: { displayName: 'local' } }} />)
+    expect(screen.getByText('local')).toBeInTheDocument()
+  })
+})

package/src/modules/appCatalog/context/AppCatalogContext.tsx

@@ -11,6 +11,7 @@ import type { ReactNode } from 'react'
 import { createContext, use, useEffect, useMemo } from 'react'
 import { ApiQueryMagazineAppCatalog } from '~/modules/appCatalog'
 import { useUiSettings } from '~/context/UiSettingsContext'
+import { mergeFrontendBuildId } from '~/modules/appCatalog/context/mergeFrontendBuildId'
 
 export interface AppCatalogContextIface {
   resources: Resource[]
@@ -44,17 +45,10 @@ export function AppCatalogProvider({ children }: AppCatalogProviderProps) {
       approvalMethods: data?.approvalMethods ?? [],
       persons: data?.persons ?? [],
       groups: data?.groups ?? [],
-      versions: {
-        ...data?.versions,
-        ...(uiSettings.frontendBuildId && {
-          frontend: {
-            displayName:
-              uiSettings.frontendBuildId === 'local'
-                ? 'local'
-                : `#${uiSettings.frontendBuildId}`,
-          },
-        }),
-      },
+      versions: mergeFrontendBuildId(
+        data?.versions ?? {},
+        uiSettings.frontendBuildId,
+      ),
     }),
     [
       data?.approvalMethods,

package/src/modules/appCatalog/context/mergeFrontendBuildId.ts

@@ -0,0 +1,31 @@
+import type { AppVersionInfo } from '@igstack/app-catalog-backend-core'
+
+/**
+ * Merge the (natera-agnostic) frontend build id into the backend-provided
+ * version info's `frontend` slot.
+ *
+ * The build id is baked into the deployed JS bundle at build time (e.g. a CI
+ * pipeline id via a Vite env var). We PREPEND it to the resolved frontend-core
+ * npm version instead of replacing it, so the footer surfaces both:
+ *   `#<buildId> · <frontend-core version> (<sha>)`.
+ *
+ * - No build id → return versions unchanged.
+ * - build id === 'local' → show `local` (local dev, no meaningful SHA/version).
+ * - otherwise → prepend `#<buildId> · ` and preserve the version + sha + shaUrl.
+ */
+export function mergeFrontendBuildId(
+  versions: AppVersionInfo,
+  frontendBuildId: string | undefined,
+): AppVersionInfo {
+  if (!frontendBuildId) return versions
+  if (frontendBuildId === 'local') {
+    return { ...versions, frontend: { displayName: 'local' } }
+  }
+  const be = versions.frontend
+  return {
+    ...versions,
+    frontend: be
+      ? { ...be, displayName: `#${frontendBuildId} · ${be.displayName}` }
+      : { displayName: `#${frontendBuildId}` },
+  }
+}

package/src/routes/__root.tsx

@@ -4,12 +4,26 @@ import type { AcRouterContext } from '~/types/types'
 import { RootErrorPage } from '~/ui/components/error/RootErrorPage'
 import { NotFoundError } from '~/ui/error/NotFoundError'
 import { LoadingScreen } from '~/ui/layout/LoadingScreen'
+import { TopLevelProvidersForErrors } from '~/ui/layout/TopLevelProvidersForErrors'
 
 export const Route = createRootRouteWithContext<AcRouterContext>()({
   component: RootRoute,
   errorComponent: RootErrorPage,
-  pendingComponent: () => <LoadingScreen label="root pending" />,
-  notFoundComponent: () => <NotFoundError />,
+  // These fallbacks render MainLayout → Header → useAuth(), so they must be
+  // wrapped in the providers (Auth + AuthModal + Theme + Tooltip). The router
+  // renders pending/notFound OUTSIDE the route-component subtree, i.e. outside
+  // the app's TopLevelProviders — without this wrap they throw
+  // "useAuth must be used within AuthProvider" (see #6/#7).
+  pendingComponent: () => (
+    <TopLevelProvidersForErrors>
+      <LoadingScreen label="root pending" />
+    </TopLevelProvidersForErrors>
+  ),
+  notFoundComponent: () => (
+    <TopLevelProvidersForErrors>
+      <NotFoundError />
+    </TopLevelProvidersForErrors>
+  ),
   wrapInSuspense: true,
 })
 

package/src/ui/components/header/Header.tsx

@@ -27,6 +27,27 @@ import {
 } from '~/ui/dropdown-menu'
 import { Skeleton } from '~/ui/skeleton'
 
+function ShaSuffix({ version }: { version: VersionInfo }) {
+  if (!version.sha) return null
+  if (version.shaUrl) {
+    return (
+      <>
+        {' '}
+        <a
+          href={version.shaUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-muted-foreground hover:text-primary"
+          onClick={(e) => e.stopPropagation()}
+        >
+          ({version.sha})
+        </a>
+      </>
+    )
+  }
+  return <span className="text-muted-foreground"> ({version.sha})</span>
+}
+
 function VersionItem({
   label,
   version,
@@ -34,28 +55,30 @@ function VersionItem({
   label: string
   version: VersionInfo
 }) {
-  if (version.url) {
-    return (
-      <a
-        href={version.url}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-xs text-primary hover:text-primary/80 transition-colors font-medium"
-        onClick={(e) => e.stopPropagation()}
-        title={label}
-      >
-        {label}: {version.displayName}
-      </a>
-    )
-  }
+  // Outer element is a <span> (not <a>) so the optional SHA link can be a
+  // sibling anchor without producing invalid nested <a> markup.
   return (
     <span className="text-xs text-muted-foreground" title={label}>
-      {label}: {version.displayName}
+      {label}:{' '}
+      {version.url ? (
+        <a
+          href={version.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-primary hover:text-primary/80 transition-colors font-medium"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {version.displayName}
+        </a>
+      ) : (
+        version.displayName
+      )}
+      <ShaSuffix version={version} />
     </span>
   )
 }
 
-function VersionDisplay({ versions }: { versions: AppVersionInfo }) {
+export function VersionDisplay({ versions }: { versions: AppVersionInfo }) {
   const isLocal =
     versions.backend?.displayName === 'local' && !versions.coreVersion