@igstack/app-catalog-frontend-core 6.5.1 → 6.6.0

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

@@ -8,6 +8,7 @@ import "clsx";
 import "tailwind-merge";
 import "next-themes";
 import "../../../ui/button.js";
+import "../../auth/AuthModalContext.js";
 import "@radix-ui/react-dialog";
 import "lucide-react";
 import "../../config/GlobalConfigContext.js";

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'\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;"}
+{"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/ui/catalog/AppDetailPanel.js

@@ -51,7 +51,7 @@ function AppDetailPanel({
         "aria-modal": "true",
         "aria-label": `${(subResource == null ? void 0 : subResource.displayName) ?? app.displayName} details`,
         tabIndex: -1,
-        className: "relative w-full max-w-[min(1120px,94vw)] rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200 outline-none",
+        className: "relative w-full max-w-[min(1120px,94vw)] overflow-hidden rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200 outline-none",
         children: [
           /* @__PURE__ */ jsx(
             "button",

package/dist/esm/modules/appCatalog/ui/catalog/AppDetailPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppDetailPanel.js","sources":["../../../../../../src/modules/appCatalog/ui/catalog/AppDetailPanel.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { X } from 'lucide-react'\nimport { useEffect, useLayoutEffect, useRef } from 'react'\nimport { useAppCatalogContext } from '../../context/AppCatalogContext'\nimport { SubResourceDetailPanel } from '../components/SubResourceDetailPanel'\nimport { AppDetails } from '../detail/AppDetails'\n\n/**\n * Centered detail card over the catalog (#38, item B). Renders the rich\n * AppDetails (access-hero, sub-resources, tiers) as a large centered modal card\n * over the catalog backdrop.\n *\n * When a sub-resource is selected (`?sub=<slug>` — e.g. the user clicked a\n * matched sub-resource row in the search results) the card shows that\n * sub-resource's own detail, with its two-step access chain and a back link to\n * the parent.\n *\n * Escape handling: this component does NOT globally bind Escape. Escape-to-close\n * is owned by AppDetails' own key handling (which first closes an open\n * screenshot gallery, then closes the card), so pressing Esc inside the gallery\n * returns to the card — not all the way to the home page (#38 Esc-stacking bug).\n */\nexport function AppDetailPanel({\n  app,\n  subResource,\n  onClose,\n  onAppClick,\n  onBackToParent,\n}: {\n  app: Resource\n  /** Selected child of `app`, when the URL carries `?sub=<slug>`. */\n  subResource?: Resource | null\n  onClose: () => void\n  onAppClick?: (app: Resource) => void\n  /** Clears `?sub=` and returns to the parent's detail. */\n  onBackToParent?: () => void\n}) {\n  const { approvalMethods } = useAppCatalogContext()\n  const dialogRef = useRef<HTMLDivElement>(null)\n\n  /**\n   * Centre the card ONCE when it opens, then hold that position.\n   *\n   * `my-auto` centred it on every render, so each panel height change pushed both\n   * edges and half the delta became upward movement of everything above it —\n   * including the tab strip, which moved 113px and took the control the user had\n   * just clicked with it (CLS 0.19, \"needs improvement\").\n   *\n   * Top-anchoring fixed the shift but looked wrong: a short card sat high on the\n   * page. So pin the centred offset instead. The card still opens centred, and\n   * anything that grows it afterwards extends downward only — which is what a\n   * reader expects when they open a tab with more in it.\n   *\n   * Only on open and on resize. Deliberately NOT on content change: reacting to\n   * content is precisely the bug.\n   */\n  useLayoutEffect(() => {\n    const card = dialogRef.current\n    const scroller = card?.parentElement\n    if (!card || !scroller) return\n\n    const pinCentre = () => {\n      card.style.marginTop = '0px'\n      const style = getComputedStyle(scroller)\n      const usable =\n        scroller.clientHeight -\n        parseFloat(style.paddingTop) -\n        parseFloat(style.paddingBottom)\n      const slack = usable - card.offsetHeight\n      // Negative slack means the card is already taller than the viewport; leave it\n      // at the top and let the overlay scroll, rather than pushing its head off.\n      card.style.marginTop = `${Math.max(0, Math.round(slack / 2))}px`\n    }\n\n    pinCentre()\n    window.addEventListener('resize', pinCentre)\n    return () => window.removeEventListener('resize', pinCentre)\n    // Keyed on the opened entry: a different card is a new open, and should\n    // re-centre for its own height.\n  }, [app.slug, subResource?.slug])\n\n  // Focus the dialog on mount so Esc hotkeys fire immediately, even when\n  // the card was opened by a mouse click (which leaves focus on the grid row).\n  //\n  // Unless something inside already took the caret — the Quick Jump field does,\n  // and it has the better claim: a child's effect runs before its parent's, so\n  // without this guard the card would take focus straight back off it.\n  //\n  // Runs again whenever the card navigates to another resource, keyed the same\n  // way the body below is: that navigation destroys whatever was focused (the\n  // \"View replacement\" button, a prerequisite's parent), and without this the\n  // caret would land on <body> — where the next Tab walks the catalog grid\n  // behind the scrim, since the card has no focus trap.\n  const shownSlug = subResource?.slug ?? app.slug\n  useEffect(() => {\n    const dialog = dialogRef.current\n    if (dialog && !dialog.contains(document.activeElement)) dialog.focus()\n  }, [shownSlug])\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 sm:p-6 md:p-10\">\n      {/* scrim */}\n      <button\n        type=\"button\"\n        aria-label=\"Close details panel\"\n        onClick={onClose}\n        className=\"fixed inset-0 -z-10 bg-black/40 backdrop-blur-[2px] animate-in fade-in\"\n      />\n      {/* centered card — wide enough for data tables (sub-resources have 5\n          columns incl. \"Access Contacts\"/\"AWS Account\" that wrapped at 760px);\n          prose inside AppDetails is width-capped separately so it stays\n          readable. Caps at 94vw so it never touches the edges. */}\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={`${subResource?.displayName ?? app.displayName} details`}\n        tabIndex={-1}\n        // Centred on open, then held — see the pin effect above. `my-auto` is\n        // deliberately absent: it re-centres on EVERY height change, which is the\n        // layout-shift bug.\n        className=\"relative w-full max-w-[min(1120px,94vw)] rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200 outline-none\"\n      >\n        <button\n          type=\"button\"\n          aria-label=\"Close\"\n          onClick={onClose}\n          className=\"absolute top-3 right-3 z-10 rounded-full p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors\"\n        >\n          <X className=\"size-4\" />\n        </button>\n        {/* Keyed by the resource on screen, so the body remounts when the card\n            navigates from one app to another (\"View replacement\", an access\n            prerequisite's parent) instead of updating in place. Everything\n            per-app inside it is component state with no reset of its own — the\n            roles table's expansion, the icon/screenshot error flags, a draft\n            source edit — and it used to arrive at the next app still carrying\n            the previous one's, plus the previous scroll offset.\n\n            The key is here and not on the outer dialog on purpose: that one\n            would restart the open animation and re-run the mount-focus effect\n            on every in-card navigation. */}\n        <div\n          key={shownSlug}\n          className=\"max-h-[85vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-7\"\n        >\n          {subResource ? (\n            <SubResourceDetailPanel\n              subResource={subResource}\n              parent={app}\n              approvalMethods={approvalMethods}\n              onBack={onBackToParent ?? onClose}\n            />\n          ) : (\n            <AppDetails\n              app={app}\n              onAppClick={onAppClick}\n              onClosePanel={onClose}\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAsBO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,QAAM,EAAE,gBAAA,IAAoB,qBAAA;AAC5B,QAAM,YAAY,OAAuB,IAAI;AAkB7C,kBAAgB,MAAM;AACpB,UAAM,OAAO,UAAU;AACvB,UAAM,WAAW,6BAAM;AACvB,QAAI,CAAC,QAAQ,CAAC,SAAU;AAExB,UAAM,YAAY,MAAM;AACtB,WAAK,MAAM,YAAY;AACvB,YAAM,QAAQ,iBAAiB,QAAQ;AACvC,YAAM,SACJ,SAAS,eACT,WAAW,MAAM,UAAU,IAC3B,WAAW,MAAM,aAAa;AAChC,YAAM,QAAQ,SAAS,KAAK;AAG5B,WAAK,MAAM,YAAY,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,CAAC,CAAC,CAAC;AAAA,IAC9D;AAEA,cAAA;AACA,WAAO,iBAAiB,UAAU,SAAS;AAC3C,WAAO,MAAM,OAAO,oBAAoB,UAAU,SAAS;AAAA,EAG7D,GAAG,CAAC,IAAI,MAAM,2CAAa,IAAI,CAAC;AAchC,QAAM,aAAY,2CAAa,SAAQ,IAAI;AAC3C,YAAU,MAAM;AACd,UAAM,SAAS,UAAU;AACzB,QAAI,UAAU,CAAC,OAAO,SAAS,SAAS,aAAa,UAAU,MAAA;AAAA,EACjE,GAAG,CAAC,SAAS,CAAC;AAEd,SACE,qBAAC,OAAA,EAAI,WAAU,yFAEb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,SAAS;AAAA,QACT,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAMZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,cAAW;AAAA,QACX,cAAY,IAAG,2CAAa,gBAAe,IAAI,WAAW;AAAA,QAC1D,UAAU;AAAA,QAIV,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,SAAS;AAAA,cACT,WAAU;AAAA,cAEV,UAAA,oBAAC,GAAA,EAAE,WAAU,SAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,UAaxB;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cAET,UAAA,cACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA,QAAQ;AAAA,kBACR;AAAA,kBACA,QAAQ,kBAAkB;AAAA,gBAAA;AAAA,cAAA,IAG5B;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA,cAAc;AAAA,gBAAA;AAAA,cAAA;AAAA,YAChB;AAAA,YAfG;AAAA,UAAA;AAAA,QAiBP;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"AppDetailPanel.js","sources":["../../../../../../src/modules/appCatalog/ui/catalog/AppDetailPanel.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { X } from 'lucide-react'\nimport { useEffect, useLayoutEffect, useRef } from 'react'\nimport { useAppCatalogContext } from '../../context/AppCatalogContext'\nimport { SubResourceDetailPanel } from '../components/SubResourceDetailPanel'\nimport { AppDetails } from '../detail/AppDetails'\n\n/**\n * Centered detail card over the catalog (#38, item B). Renders the rich\n * AppDetails (access-hero, sub-resources, tiers) as a large centered modal card\n * over the catalog backdrop.\n *\n * When a sub-resource is selected (`?sub=<slug>` — e.g. the user clicked a\n * matched sub-resource row in the search results) the card shows that\n * sub-resource's own detail, with its two-step access chain and a back link to\n * the parent.\n *\n * Escape handling: this component does NOT globally bind Escape. Escape-to-close\n * is owned by AppDetails' own key handling (which first closes an open\n * screenshot gallery, then closes the card), so pressing Esc inside the gallery\n * returns to the card — not all the way to the home page (#38 Esc-stacking bug).\n */\nexport function AppDetailPanel({\n  app,\n  subResource,\n  onClose,\n  onAppClick,\n  onBackToParent,\n}: {\n  app: Resource\n  /** Selected child of `app`, when the URL carries `?sub=<slug>`. */\n  subResource?: Resource | null\n  onClose: () => void\n  onAppClick?: (app: Resource) => void\n  /** Clears `?sub=` and returns to the parent's detail. */\n  onBackToParent?: () => void\n}) {\n  const { approvalMethods } = useAppCatalogContext()\n  const dialogRef = useRef<HTMLDivElement>(null)\n\n  /**\n   * Centre the card ONCE when it opens, then hold that position.\n   *\n   * `my-auto` centred it on every render, so each panel height change pushed both\n   * edges and half the delta became upward movement of everything above it —\n   * including the tab strip, which moved 113px and took the control the user had\n   * just clicked with it (CLS 0.19, \"needs improvement\").\n   *\n   * Top-anchoring fixed the shift but looked wrong: a short card sat high on the\n   * page. So pin the centred offset instead. The card still opens centred, and\n   * anything that grows it afterwards extends downward only — which is what a\n   * reader expects when they open a tab with more in it.\n   *\n   * Only on open and on resize. Deliberately NOT on content change: reacting to\n   * content is precisely the bug.\n   */\n  useLayoutEffect(() => {\n    const card = dialogRef.current\n    const scroller = card?.parentElement\n    if (!card || !scroller) return\n\n    const pinCentre = () => {\n      card.style.marginTop = '0px'\n      const style = getComputedStyle(scroller)\n      const usable =\n        scroller.clientHeight -\n        parseFloat(style.paddingTop) -\n        parseFloat(style.paddingBottom)\n      const slack = usable - card.offsetHeight\n      // Negative slack means the card is already taller than the viewport; leave it\n      // at the top and let the overlay scroll, rather than pushing its head off.\n      card.style.marginTop = `${Math.max(0, Math.round(slack / 2))}px`\n    }\n\n    pinCentre()\n    window.addEventListener('resize', pinCentre)\n    return () => window.removeEventListener('resize', pinCentre)\n    // Keyed on the opened entry: a different card is a new open, and should\n    // re-centre for its own height.\n  }, [app.slug, subResource?.slug])\n\n  // Focus the dialog on mount so Esc hotkeys fire immediately, even when\n  // the card was opened by a mouse click (which leaves focus on the grid row).\n  //\n  // Unless something inside already took the caret — the Quick Jump field does,\n  // and it has the better claim: a child's effect runs before its parent's, so\n  // without this guard the card would take focus straight back off it.\n  //\n  // Runs again whenever the card navigates to another resource, keyed the same\n  // way the body below is: that navigation destroys whatever was focused (the\n  // \"View replacement\" button, a prerequisite's parent), and without this the\n  // caret would land on <body> — where the next Tab walks the catalog grid\n  // behind the scrim, since the card has no focus trap.\n  const shownSlug = subResource?.slug ?? app.slug\n  useEffect(() => {\n    const dialog = dialogRef.current\n    if (dialog && !dialog.contains(document.activeElement)) dialog.focus()\n  }, [shownSlug])\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 sm:p-6 md:p-10\">\n      {/* scrim */}\n      <button\n        type=\"button\"\n        aria-label=\"Close details panel\"\n        onClick={onClose}\n        className=\"fixed inset-0 -z-10 bg-black/40 backdrop-blur-[2px] animate-in fade-in\"\n      />\n      {/* centered card — wide enough for data tables (sub-resources have 5\n          columns incl. \"Access Contacts\"/\"AWS Account\" that wrapped at 760px);\n          prose inside AppDetails is width-capped separately so it stays\n          readable. Caps at 94vw so it never touches the edges. */}\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={`${subResource?.displayName ?? app.displayName} details`}\n        tabIndex={-1}\n        // Centred on open, then held — see the pin effect above. `my-auto` is\n        // deliberately absent: it re-centres on EVERY height change, which is the\n        // layout-shift bug.\n        // `overflow-hidden` belongs on the rounded box: the scrolling child\n        // below carries the band's tint to its own square corners and paints\n        // them over this radius, so the card's top corners read as cut off.\n        className=\"relative w-full max-w-[min(1120px,94vw)] overflow-hidden rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200 outline-none\"\n      >\n        <button\n          type=\"button\"\n          aria-label=\"Close\"\n          onClick={onClose}\n          className=\"absolute top-3 right-3 z-10 rounded-full p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors\"\n        >\n          <X className=\"size-4\" />\n        </button>\n        {/* Keyed by the resource on screen, so the body remounts when the card\n            navigates from one app to another (\"View replacement\", an access\n            prerequisite's parent) instead of updating in place. Everything\n            per-app inside it is component state with no reset of its own — the\n            roles table's expansion, the icon/screenshot error flags, a draft\n            source edit — and it used to arrive at the next app still carrying\n            the previous one's, plus the previous scroll offset.\n\n            The key is here and not on the outer dialog on purpose: that one\n            would restart the open animation and re-run the mount-focus effect\n            on every in-card navigation. */}\n        <div\n          key={shownSlug}\n          className=\"max-h-[85vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-7\"\n        >\n          {subResource ? (\n            <SubResourceDetailPanel\n              subResource={subResource}\n              parent={app}\n              approvalMethods={approvalMethods}\n              onBack={onBackToParent ?? onClose}\n            />\n          ) : (\n            <AppDetails\n              app={app}\n              onAppClick={onAppClick}\n              onClosePanel={onClose}\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAsBO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,QAAM,EAAE,gBAAA,IAAoB,qBAAA;AAC5B,QAAM,YAAY,OAAuB,IAAI;AAkB7C,kBAAgB,MAAM;AACpB,UAAM,OAAO,UAAU;AACvB,UAAM,WAAW,6BAAM;AACvB,QAAI,CAAC,QAAQ,CAAC,SAAU;AAExB,UAAM,YAAY,MAAM;AACtB,WAAK,MAAM,YAAY;AACvB,YAAM,QAAQ,iBAAiB,QAAQ;AACvC,YAAM,SACJ,SAAS,eACT,WAAW,MAAM,UAAU,IAC3B,WAAW,MAAM,aAAa;AAChC,YAAM,QAAQ,SAAS,KAAK;AAG5B,WAAK,MAAM,YAAY,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,CAAC,CAAC,CAAC;AAAA,IAC9D;AAEA,cAAA;AACA,WAAO,iBAAiB,UAAU,SAAS;AAC3C,WAAO,MAAM,OAAO,oBAAoB,UAAU,SAAS;AAAA,EAG7D,GAAG,CAAC,IAAI,MAAM,2CAAa,IAAI,CAAC;AAchC,QAAM,aAAY,2CAAa,SAAQ,IAAI;AAC3C,YAAU,MAAM;AACd,UAAM,SAAS,UAAU;AACzB,QAAI,UAAU,CAAC,OAAO,SAAS,SAAS,aAAa,UAAU,MAAA;AAAA,EACjE,GAAG,CAAC,SAAS,CAAC;AAEd,SACE,qBAAC,OAAA,EAAI,WAAU,yFAEb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,SAAS;AAAA,QACT,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAMZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,cAAW;AAAA,QACX,cAAY,IAAG,2CAAa,gBAAe,IAAI,WAAW;AAAA,QAC1D,UAAU;AAAA,QAOV,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,SAAS;AAAA,cACT,WAAU;AAAA,cAEV,UAAA,oBAAC,GAAA,EAAE,WAAU,SAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,UAaxB;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cAET,UAAA,cACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA,QAAQ;AAAA,kBACR;AAAA,kBACA,QAAQ,kBAAkB;AAAA,gBAAA;AAAA,cAAA,IAG5B;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA,cAAc;AAAA,gBAAA;AAAA,cAAA;AAAA,YAChB;AAAA,YAfG;AAAA,UAAA;AAAA,QAiBP;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/esm/modules/appCatalog/ui/components/AccessRequestSection.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { ExternalLink, Settings, Users, Bot, Check, Copy, MoreHorizontal } from "lucide-react";
 import { useMemo, useCallback, useState, useRef, useEffect } from "react";
 import { Button } from "../../../../ui/button.js";
@@ -36,7 +36,13 @@ function RolesTable({
       /* @__PURE__ */ jsxs(TableBody, { children: [
         shown.map((role, idx) => /* @__PURE__ */ jsxs(TableRow, { children: [
           /* @__PURE__ */ jsx(TableCell, { className: "font-medium whitespace-nowrap", children: role.displayName }),
-          /* @__PURE__ */ jsx(TableCell, { className: "text-sm text-muted-foreground", children: role.description || "—" })
+          /* @__PURE__ */ jsxs(TableCell, { className: "text-sm text-muted-foreground", children: [
+            role.description || "—",
+            role.adminNotes && /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs italic text-muted-foreground/80", children: [
+              "Note: ",
+              role.adminNotes
+            ] })
+          ] })
         ] }, `${role.displayName}-${idx}`)),
         collapsible && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 2, className: "p-0", children: /* @__PURE__ */ jsxs(
           "button",
@@ -112,6 +118,12 @@ function CopyButton({
 }
 const UNDOCUMENTED_WITH_CONTACT = "Access process not documented yet — contact the owner below to find out.";
 const UNDOCUMENTED_WITHOUT_CONTACT = "Access process not documented yet, and no owner is listed for this app.";
+function AdminNotes({ notes }) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("h4", { className: "mb-2 text-sm font-medium", children: "Admin notes" }),
+    /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground prose prose-sm max-w-none", children: /* @__PURE__ */ jsx(MarkdownText, { children: notes }) })
+  ] });
+}
 function AccessBox({ children }) {
   return (
     // No frame and no heading. Both existed to mark this out as THE thing on a long
@@ -161,7 +173,10 @@ function AccessRequestSection({
     }
   }, [requestPrompt, copyToClipboard]);
   if (!accessRequest) {
-    return /* @__PURE__ */ jsx(AccessBox, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: UNDOCUMENTED_WITHOUT_CONTACT }) });
+    return /* @__PURE__ */ jsxs(AccessBox, { children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: UNDOCUMENTED_WITHOUT_CONTACT }),
+      app.notes && /* @__PURE__ */ jsx(AdminNotes, { notes: app.notes })
+    ] });
   }
   const isOpen = (approvalMethod == null ? void 0 : approvalMethod.type) === "noAccessRequired";
   const hasWrittenSteps = Boolean(
@@ -224,6 +239,7 @@ function AccessRequestSection({
     ] }),
     accessRequest.comments && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground prose prose-sm max-w-none", children: /* @__PURE__ */ jsx(MarkdownText, { children: accessRequest.comments }) }),
     accessRequest.roles && accessRequest.roles.length > 0 && /* @__PURE__ */ jsx(RolesTable, { roles: accessRequest.roles }),
+    app.notes && /* @__PURE__ */ jsx(AdminNotes, { notes: app.notes }),
     accessRequest.approverSlugs && accessRequest.approverSlugs.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h4", { className: "mb-2 text-sm font-medium", children: "Approvers" }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: accessRequest.approverSlugs.map((slug) => /* @__PURE__ */ jsx(PersonOrGroupBadge, { slug }, slug)) })

package/dist/esm/modules/appCatalog/ui/components/AccessRequestSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccessRequestSection.js","sources":["../../../../../../src/modules/appCatalog/ui/components/AccessRequestSection.tsx"],"sourcesContent":["import type {\n  AppAccessRequest,\n  AppApprovalMethod,\n  Resource,\n} from '@igstack/app-catalog-backend-core'\nimport {\n  Bot,\n  Check,\n  Copy,\n  ExternalLink,\n  MoreHorizontal,\n  Settings,\n  Users,\n} from 'lucide-react'\nimport type { ReactNode } from 'react'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Button } from '~/ui/button'\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '~/ui/accordion'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '~/ui/table'\nimport { MarkdownText } from './MarkdownText'\nimport { PersonOrGroupBadge } from './PersonBadge'\n\n// Constants\nconst COPY_FEEDBACK_DURATION = 2000\n\ninterface AccessRequestSectionProps {\n  app: Resource\n  approvalMethods: AppApprovalMethod[]\n}\n\n// Helper function for approval method icons\nfunction getApprovalMethodIcon(\n  type: 'service' | 'personTeam' | 'custom' | 'noAccessRequired' | 'unknown',\n) {\n  switch (type) {\n    case 'service':\n      return <Bot className=\"size-5 text-primary\" />\n    case 'personTeam':\n      return <Users className=\"size-5 text-primary\" />\n    case 'custom':\n    case 'noAccessRequired':\n    case 'unknown':\n      return <Settings className=\"size-5 text-primary\" />\n  }\n}\n\n/** Roles shown before the rest are folded behind the table's last row. */\nconst VISIBLE_ROLES = 5\n\n/**\n * The roles table. A long list (dozens of roles) pushed the approval steps off\n * screen, so beyond {@link VISIBLE_ROLES} the rest sit behind a toggle.\n */\nfunction RolesTable({\n  roles,\n}: {\n  roles: NonNullable<AppAccessRequest['roles']>\n}) {\n  const [expanded, setExpanded] = useState(false)\n  const collapsible = roles.length > VISIBLE_ROLES\n  const shown = collapsible && !expanded ? roles.slice(0, VISIBLE_ROLES) : roles\n\n  return (\n    <div>\n      <h4 className=\"mb-2 text-sm font-medium\">Available Roles</h4>\n      <div className=\"rounded-lg border\">\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead className=\"whitespace-nowrap\">Role</TableHead>\n              <TableHead>Description</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {shown.map((role, idx) => (\n              <TableRow key={`${role.displayName}-${idx}`}>\n                <TableCell className=\"font-medium whitespace-nowrap\">\n                  {role.displayName}\n                </TableCell>\n                {/* `adminNotes` is provisioning-only and never shown to\n                    the requester — only `description` belongs here. */}\n                <TableCell className=\"text-sm text-muted-foreground\">\n                  {role.description || '—'}\n                </TableCell>\n              </TableRow>\n            ))}\n            {/* The control is the table's last row, not a link under the\n                table: a table whose border closes under its last data row\n                reads as the complete list, and a standalone link below it\n                went unnoticed. Same shape the search results use for their\n                hidden sub-resources. */}\n            {collapsible && (\n              <TableRow>\n                <TableCell colSpan={2} className=\"p-0\">\n                  {/* A real <button> filling the cell: the whole row is\n                      clickable, and focus plus Enter/Space come from the\n                      platform rather than from a key handler on a <tr>. */}\n                  <button\n                    type=\"button\"\n                    aria-expanded={expanded}\n                    onClick={() => setExpanded((v) => !v)}\n                    // The focus ring is drawn INSIDE the border box: the\n                    // table's container is `overflow-x-auto`, which clips an\n                    // outline drawn outside it, and this button's edges are\n                    // flush with that clip box on three sides.\n                    className=\"flex w-full cursor-pointer items-center gap-2 p-2 text-left text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring\"\n                  >\n                    <MoreHorizontal className=\"size-4 shrink-0\" />\n                    {expanded\n                      ? 'Show fewer roles'\n                      : `Show all (${roles.length}) roles`}\n                  </button>\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n\n/**\n * Custom hook for handling copy-to-clipboard functionality with feedback\n * Includes proper cleanup to prevent memory leaks\n */\nfunction useCopyToClipboard() {\n  const [copiedId, setCopiedId] = useState<string | null>(null)\n  const [error, setError] = useState<string | null>(null)\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  // Cleanup timeout on unmount\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current)\n      }\n    }\n  }, [])\n\n  const copyToClipboard = useCallback(async (text: string, id: string) => {\n    // Clear existing timeout\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current)\n    }\n\n    try {\n      await navigator.clipboard.writeText(text)\n      setCopiedId(id)\n      setError(null)\n\n      // Set new timeout with cleanup\n      timeoutRef.current = setTimeout(() => {\n        setCopiedId(null)\n      }, COPY_FEEDBACK_DURATION)\n    } catch (err) {\n      console.error('Failed to copy to clipboard:', err)\n      setError('Failed to copy')\n\n      // Clear error after duration\n      timeoutRef.current = setTimeout(() => {\n        setError(null)\n      }, COPY_FEEDBACK_DURATION)\n    }\n  }, [])\n\n  return { copiedId, error, copyToClipboard }\n}\n\n/**\n * Reusable copy button component with accessibility\n */\ninterface CopyButtonProps {\n  onCopy: () => void\n  isCopied: boolean\n  ariaLabel: string\n  className?: string\n}\n\nfunction CopyButton({\n  onCopy,\n  isCopied,\n  ariaLabel,\n  className,\n}: CopyButtonProps) {\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"sm\"\n      onClick={onCopy}\n      className={className}\n      aria-label={ariaLabel}\n      title={isCopied ? 'Copied!' : 'Copy to clipboard'}\n    >\n      {isCopied ? (\n        <>\n          <Check className=\"h-3.5 w-3.5 text-green-600\" />\n          <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n            Copied to clipboard\n          </span>\n        </>\n      ) : (\n        <Copy className=\"h-3.5 w-3.5\" />\n      )}\n    </Button>\n  )\n}\n\n/**\n * Wording for an entry whose access route is not written down. Which one is\n * honest depends on whether a contact is actually rendered for the reader.\n */\nconst UNDOCUMENTED_WITH_CONTACT =\n  'Access process not documented yet — contact the owner below to find out.'\nconst UNDOCUMENTED_WITHOUT_CONTACT =\n  'Access process not documented yet, and no owner is listed for this app.'\n\n/**\n * The frame every access state renders into, including the empty one — an\n * entry with no access data still gets the heading, because a missing box\n * reads as \"nothing to do here\" rather than \"we have not documented this\".\n */\nfunction AccessBox({ children }: { children: ReactNode }) {\n  return (\n    // No frame and no heading. Both existed to mark this out as THE thing on a long\n    // scrolling card; now it is its own tab, so the tab's label already says what\n    // this is and the panel edge already bounds it. A box inside a box, under a\n    // heading that repeats the tab you just clicked, is two statements of the same\n    // fact and ink the reader has to look past.\n    // A stable anchor for tests, because neither of the old handles survives: the\n    // heading is gone, and a sub-resource page has no tab panel to read either.\n    // Text and structure both move; this does not.\n    <div data-access-section=\"\" className=\"space-y-4\">\n      {children}\n    </div>\n  )\n}\n\nexport function AccessRequestSection({\n  app,\n  approvalMethods,\n}: AccessRequestSectionProps) {\n  const { copiedId, copyToClipboard } = useCopyToClipboard()\n\n  // Sub-resources carry their access data as top-level fields (`approverSlugs`,\n  // `accessComments`, `ownerPersonSlug`) rather than in an `accessRequest`.\n  // Without this fallback the whole section rendered nothing for them: the\n  // person was told a request is needed and then shown no way to make one.\n  const accessRequest = useMemo((): AppAccessRequest | undefined => {\n    if (app.accessRequest) return app.accessRequest\n    const approverSlugs = [\n      ...new Set([\n        ...(app.approverSlugs ?? []),\n        ...(app.ownerPersonSlug ? [app.ownerPersonSlug] : []),\n      ]),\n    ]\n    if (approverSlugs.length === 0 && !app.accessComments) return undefined\n    // No approval method to name — the approvers below ARE the route.\n    return {\n      approvalMethodSlug: '',\n      approverSlugs,\n      comments: app.accessComments,\n    }\n  }, [\n    app.accessRequest,\n    app.approverSlugs,\n    app.ownerPersonSlug,\n    app.accessComments,\n  ])\n\n  const approvalMethod = approvalMethods.find(\n    (m) => m.slug === accessRequest?.approvalMethodSlug,\n  )\n\n  // Read through a plain binding rather than depending on\n  // `accessRequest?.requestPrompt` directly: the React Compiler cannot preserve a\n  // manual memo whose dependency is an optional-chained member expression, so it\n  // drops this useCallback and the button gets a new handler every render.\n  const requestPrompt = accessRequest?.requestPrompt\n  const handleCopyPrompt = useCallback(() => {\n    if (requestPrompt) {\n      copyToClipboard(requestPrompt, 'prompt')\n    }\n  }, [requestPrompt, copyToClipboard])\n\n  // Nothing is written down anywhere: no `accessRequest`, no approvers, no\n  // owner, no comments. This used to `return null`, so the card showed no\n  // \"How to get access\" box at all and the reader could not tell an\n  // undocumented entry from one that needs no request (#181). Keep the box and\n  // say plainly that we do not know.\n  if (!accessRequest) {\n    return (\n      <AccessBox>\n        <p className=\"text-sm text-muted-foreground\">\n          {UNDOCUMENTED_WITHOUT_CONTACT}\n        </p>\n      </AccessBox>\n    )\n  }\n\n  // Access UX (#31): some methods carry no clickable target — `noAccessRequired`\n  // (open), `unknown` (undocumented), and bare `custom` with no comments. The\n  // old UI rendered nothing for `custom`, leaving a blank/dead section. Instead\n  // surface an explicit, actionable line so the user is never stranded:\n  //  - open  → \"No request needed — just open it.\"\n  //  - unknown / undocumented custom → route them to the owner (shown below).\n  const isOpen = approvalMethod?.type === 'noAccessRequired'\n  const hasWrittenSteps = Boolean(\n    accessRequest.requestPrompt || accessRequest.comments,\n  )\n  const isUndocumented =\n    approvalMethod?.type === 'unknown' ||\n    (approvalMethod?.type === 'custom' && !hasWrittenSteps)\n  // \"the owner below\" is either the Approvers block in this box or the owner\n  // block further down the detail page, and BOTH are conditional — so an entry\n  // with neither was telling the reader to go and contact nobody.\n  const hasContact =\n    (accessRequest.approverSlugs?.length ?? 0) > 0 ||\n    Boolean(app.ownerPersonSlug)\n  // Two-step: has a primary request action AND follow-up post-approval steps\n  const isTwoStep = Boolean(\n    hasWrittenSteps && accessRequest.postApprovalInstructions,\n  )\n\n  return (\n    <AccessBox>\n      {isOpen && (\n        <p className=\"text-sm font-medium text-primary\">\n          ✓ Open to everyone — no request needed. Just open it.\n        </p>\n      )}\n\n      {isUndocumented && (\n        <p className=\"text-sm text-muted-foreground\">\n          {hasContact\n            ? UNDOCUMENTED_WITH_CONTACT\n            : UNDOCUMENTED_WITHOUT_CONTACT}\n        </p>\n      )}\n\n      {isTwoStep && (\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-xs font-bold text-primary bg-primary/10 rounded-full px-2.5 py-0.5\">\n            Step 1\n          </span>\n          <span className=\"text-xs text-muted-foreground\">Request access</span>\n        </div>\n      )}\n\n      {/* Approval Method */}\n      {approvalMethod && approvalMethod.type !== 'custom' && (\n        <div className=\"flex items-center gap-2\">\n          {approvalMethod.type === 'service' && approvalMethod.config.url ? (\n            <>\n              <a\n                href={approvalMethod.config.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"flex items-center gap-2 hover:text-primary transition-colors\"\n                title={approvalMethod.config.url}\n              >\n                <div>{getApprovalMethodIcon(approvalMethod.type)}</div>\n                <div className=\"font-medium\">{approvalMethod.displayName}</div>\n              </a>\n              <a\n                href={approvalMethod.config.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"text-muted-foreground hover:text-primary\"\n                title={approvalMethod.config.url}\n              >\n                <ExternalLink className=\"size-4\" />\n              </a>\n            </>\n          ) : (\n            <>\n              <div>{getApprovalMethodIcon(approvalMethod.type)}</div>\n              <div className=\"font-medium\">{approvalMethod.displayName}</div>\n            </>\n          )}\n        </div>\n      )}\n\n      {/* Request Prompt - Inline */}\n      {accessRequest.requestPrompt && (\n        <div className=\"text-sm inline-flex items-center gap-2\">\n          <span className=\"whitespace-nowrap shrink-0\">Request Prompt:</span>\n          <span className=\"prose prose-sm inline [&>*]:inline [&>*]:m-0\">\n            <MarkdownText>{accessRequest.requestPrompt}</MarkdownText>\n          </span>\n          <CopyButton\n            onCopy={handleCopyPrompt}\n            isCopied={copiedId === 'prompt'}\n            ariaLabel=\"Copy request prompt\"\n            className=\"h-6 w-6 p-0 shrink-0\"\n          />\n        </div>\n      )}\n\n      {/* Comments */}\n      {accessRequest.comments && (\n        <div className=\"text-sm text-muted-foreground prose prose-sm max-w-none\">\n          <MarkdownText>{accessRequest.comments}</MarkdownText>\n        </div>\n      )}\n\n      {accessRequest.roles && accessRequest.roles.length > 0 && (\n        <RolesTable roles={accessRequest.roles} />\n      )}\n\n      {/* Approvers */}\n      {accessRequest.approverSlugs &&\n        accessRequest.approverSlugs.length > 0 && (\n          <div>\n            <h4 className=\"mb-2 text-sm font-medium\">Approvers</h4>\n            <div className=\"flex flex-wrap gap-2\">\n              {accessRequest.approverSlugs.map((slug) => (\n                <PersonOrGroupBadge key={slug} slug={slug} />\n              ))}\n            </div>\n          </div>\n        )}\n\n      {/* Post-Approval Instructions */}\n      {accessRequest.postApprovalInstructions &&\n        (isTwoStep ? (\n          // Two-step apps: show Step 2 prominently, always expanded\n          <div className=\"space-y-2\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"text-xs font-bold text-primary bg-primary/10 rounded-full px-2.5 py-0.5\">\n                Step 2\n              </span>\n              <span className=\"text-xs text-muted-foreground\">\n                After approval\n              </span>\n            </div>\n            <div className=\"text-sm text-muted-foreground prose prose-sm max-w-none [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:list-disc [&_ul]:pl-5\">\n              <MarkdownText>\n                {accessRequest.postApprovalInstructions}\n              </MarkdownText>\n            </div>\n          </div>\n        ) : (\n          // Single-step apps: keep collapsible accordion (secondary info)\n          <Accordion type=\"single\" collapsible>\n            <AccordionItem\n              value=\"post-approval\"\n              className=\"border rounded-lg px-4\"\n            >\n              <AccordionTrigger className=\"text-sm hover:no-underline py-3\">\n                Post-Approval Instructions\n              </AccordionTrigger>\n              <AccordionContent className=\"pb-3\">\n                <div className=\"text-sm text-muted-foreground prose prose-sm max-w-none [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:list-disc [&_ul]:pl-5\">\n                  <MarkdownText>\n                    {accessRequest.postApprovalInstructions}\n                  </MarkdownText>\n                </div>\n              </AccordionContent>\n            </AccordionItem>\n          </Accordion>\n        ))}\n\n      {/* Documentation URLs — box level: they cover the whole process,\n          not one step, so they come after Step 2 */}\n      {accessRequest.urls && accessRequest.urls.length > 0 && (\n        <div>\n          <h4 className=\"mb-2 text-sm font-medium\">Documentation</h4>\n          <div className=\"flex flex-col gap-1.5\">\n            {accessRequest.urls.map((urlObj, idx) => (\n              <a\n                key={`${urlObj.url}-${idx}`}\n                href={urlObj.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"text-sm text-muted-foreground hover:text-primary inline-flex items-center gap-1.5\"\n              >\n                {urlObj.label || urlObj.url}\n                <ExternalLink className=\"size-3\" />\n              </a>\n            ))}\n          </div>\n        </div>\n      )}\n    </AccessBox>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AccessRequestSection.js","sources":["../../../../../../src/modules/appCatalog/ui/components/AccessRequestSection.tsx"],"sourcesContent":["import type {\n  AppAccessRequest,\n  AppApprovalMethod,\n  Resource,\n} from '@igstack/app-catalog-backend-core'\nimport {\n  Bot,\n  Check,\n  Copy,\n  ExternalLink,\n  MoreHorizontal,\n  Settings,\n  Users,\n} from 'lucide-react'\nimport type { ReactNode } from 'react'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Button } from '~/ui/button'\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '~/ui/accordion'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '~/ui/table'\nimport { MarkdownText } from './MarkdownText'\nimport { PersonOrGroupBadge } from './PersonBadge'\n\n// Constants\nconst COPY_FEEDBACK_DURATION = 2000\n\ninterface AccessRequestSectionProps {\n  app: Resource\n  approvalMethods: AppApprovalMethod[]\n}\n\n// Helper function for approval method icons\nfunction getApprovalMethodIcon(\n  type: 'service' | 'personTeam' | 'custom' | 'noAccessRequired' | 'unknown',\n) {\n  switch (type) {\n    case 'service':\n      return <Bot className=\"size-5 text-primary\" />\n    case 'personTeam':\n      return <Users className=\"size-5 text-primary\" />\n    case 'custom':\n    case 'noAccessRequired':\n    case 'unknown':\n      return <Settings className=\"size-5 text-primary\" />\n  }\n}\n\n/** Roles shown before the rest are folded behind the table's last row. */\nconst VISIBLE_ROLES = 5\n\n/**\n * The roles table. A long list (dozens of roles) pushed the approval steps off\n * screen, so beyond {@link VISIBLE_ROLES} the rest sit behind a toggle.\n */\nfunction RolesTable({\n  roles,\n}: {\n  roles: NonNullable<AppAccessRequest['roles']>\n}) {\n  const [expanded, setExpanded] = useState(false)\n  const collapsible = roles.length > VISIBLE_ROLES\n  const shown = collapsible && !expanded ? roles.slice(0, VISIBLE_ROLES) : roles\n\n  return (\n    <div>\n      <h4 className=\"mb-2 text-sm font-medium\">Available Roles</h4>\n      <div className=\"rounded-lg border\">\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead className=\"whitespace-nowrap\">Role</TableHead>\n              <TableHead>Description</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {shown.map((role, idx) => (\n              <TableRow key={`${role.displayName}-${idx}`}>\n                <TableCell className=\"font-medium whitespace-nowrap\">\n                  {role.displayName}\n                </TableCell>\n                {/* `adminNotes` is the provisioning detail — the directory\n                    group, the SSO app, the manual step. It reads as a note\n                    under the description because the person granting the role\n                    and the person asking for it read the same page. */}\n                <TableCell className=\"text-sm text-muted-foreground\">\n                  {role.description || '—'}\n                  {role.adminNotes && (\n                    <div className=\"mt-1 text-xs italic text-muted-foreground/80\">\n                      Note: {role.adminNotes}\n                    </div>\n                  )}\n                </TableCell>\n              </TableRow>\n            ))}\n            {/* The control is the table's last row, not a link under the\n                table: a table whose border closes under its last data row\n                reads as the complete list, and a standalone link below it\n                went unnoticed. Same shape the search results use for their\n                hidden sub-resources. */}\n            {collapsible && (\n              <TableRow>\n                <TableCell colSpan={2} className=\"p-0\">\n                  {/* A real <button> filling the cell: the whole row is\n                      clickable, and focus plus Enter/Space come from the\n                      platform rather than from a key handler on a <tr>. */}\n                  <button\n                    type=\"button\"\n                    aria-expanded={expanded}\n                    onClick={() => setExpanded((v) => !v)}\n                    // The focus ring is drawn INSIDE the border box: the\n                    // table's container is `overflow-x-auto`, which clips an\n                    // outline drawn outside it, and this button's edges are\n                    // flush with that clip box on three sides.\n                    className=\"flex w-full cursor-pointer items-center gap-2 p-2 text-left text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring\"\n                  >\n                    <MoreHorizontal className=\"size-4 shrink-0\" />\n                    {expanded\n                      ? 'Show fewer roles'\n                      : `Show all (${roles.length}) roles`}\n                  </button>\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n\n/**\n * Custom hook for handling copy-to-clipboard functionality with feedback\n * Includes proper cleanup to prevent memory leaks\n */\nfunction useCopyToClipboard() {\n  const [copiedId, setCopiedId] = useState<string | null>(null)\n  const [error, setError] = useState<string | null>(null)\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  // Cleanup timeout on unmount\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current)\n      }\n    }\n  }, [])\n\n  const copyToClipboard = useCallback(async (text: string, id: string) => {\n    // Clear existing timeout\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current)\n    }\n\n    try {\n      await navigator.clipboard.writeText(text)\n      setCopiedId(id)\n      setError(null)\n\n      // Set new timeout with cleanup\n      timeoutRef.current = setTimeout(() => {\n        setCopiedId(null)\n      }, COPY_FEEDBACK_DURATION)\n    } catch (err) {\n      console.error('Failed to copy to clipboard:', err)\n      setError('Failed to copy')\n\n      // Clear error after duration\n      timeoutRef.current = setTimeout(() => {\n        setError(null)\n      }, COPY_FEEDBACK_DURATION)\n    }\n  }, [])\n\n  return { copiedId, error, copyToClipboard }\n}\n\n/**\n * Reusable copy button component with accessibility\n */\ninterface CopyButtonProps {\n  onCopy: () => void\n  isCopied: boolean\n  ariaLabel: string\n  className?: string\n}\n\nfunction CopyButton({\n  onCopy,\n  isCopied,\n  ariaLabel,\n  className,\n}: CopyButtonProps) {\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"sm\"\n      onClick={onCopy}\n      className={className}\n      aria-label={ariaLabel}\n      title={isCopied ? 'Copied!' : 'Copy to clipboard'}\n    >\n      {isCopied ? (\n        <>\n          <Check className=\"h-3.5 w-3.5 text-green-600\" />\n          <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n            Copied to clipboard\n          </span>\n        </>\n      ) : (\n        <Copy className=\"h-3.5 w-3.5\" />\n      )}\n    </Button>\n  )\n}\n\n/**\n * Wording for an entry whose access route is not written down. Which one is\n * honest depends on whether a contact is actually rendered for the reader.\n */\nconst UNDOCUMENTED_WITH_CONTACT =\n  'Access process not documented yet — contact the owner below to find out.'\nconst UNDOCUMENTED_WITHOUT_CONTACT =\n  'Access process not documented yet, and no owner is listed for this app.'\n\n/**\n * The entry's own `adminNotes`, served as `Resource.notes`: the provisioning\n * route an approver follows — the pipeline to run, the group to grant. It is\n * about the whole request rather than one role, so it gets its own block.\n */\nfunction AdminNotes({ notes }: { notes: string }) {\n  return (\n    <div>\n      <h4 className=\"mb-2 text-sm font-medium\">Admin notes</h4>\n      <div className=\"text-sm text-muted-foreground prose prose-sm max-w-none\">\n        <MarkdownText>{notes}</MarkdownText>\n      </div>\n    </div>\n  )\n}\n\n/**\n * The frame every access state renders into, including the empty one — an\n * entry with no access data still gets the heading, because a missing box\n * reads as \"nothing to do here\" rather than \"we have not documented this\".\n */\nfunction AccessBox({ children }: { children: ReactNode }) {\n  return (\n    // No frame and no heading. Both existed to mark this out as THE thing on a long\n    // scrolling card; now it is its own tab, so the tab's label already says what\n    // this is and the panel edge already bounds it. A box inside a box, under a\n    // heading that repeats the tab you just clicked, is two statements of the same\n    // fact and ink the reader has to look past.\n    // A stable anchor for tests, because neither of the old handles survives: the\n    // heading is gone, and a sub-resource page has no tab panel to read either.\n    // Text and structure both move; this does not.\n    <div data-access-section=\"\" className=\"space-y-4\">\n      {children}\n    </div>\n  )\n}\n\nexport function AccessRequestSection({\n  app,\n  approvalMethods,\n}: AccessRequestSectionProps) {\n  const { copiedId, copyToClipboard } = useCopyToClipboard()\n\n  // Sub-resources carry their access data as top-level fields (`approverSlugs`,\n  // `accessComments`, `ownerPersonSlug`) rather than in an `accessRequest`.\n  // Without this fallback the whole section rendered nothing for them: the\n  // person was told a request is needed and then shown no way to make one.\n  const accessRequest = useMemo((): AppAccessRequest | undefined => {\n    if (app.accessRequest) return app.accessRequest\n    const approverSlugs = [\n      ...new Set([\n        ...(app.approverSlugs ?? []),\n        ...(app.ownerPersonSlug ? [app.ownerPersonSlug] : []),\n      ]),\n    ]\n    if (approverSlugs.length === 0 && !app.accessComments) return undefined\n    // No approval method to name — the approvers below ARE the route.\n    return {\n      approvalMethodSlug: '',\n      approverSlugs,\n      comments: app.accessComments,\n    }\n  }, [\n    app.accessRequest,\n    app.approverSlugs,\n    app.ownerPersonSlug,\n    app.accessComments,\n  ])\n\n  const approvalMethod = approvalMethods.find(\n    (m) => m.slug === accessRequest?.approvalMethodSlug,\n  )\n\n  // Read through a plain binding rather than depending on\n  // `accessRequest?.requestPrompt` directly: the React Compiler cannot preserve a\n  // manual memo whose dependency is an optional-chained member expression, so it\n  // drops this useCallback and the button gets a new handler every render.\n  const requestPrompt = accessRequest?.requestPrompt\n  const handleCopyPrompt = useCallback(() => {\n    if (requestPrompt) {\n      copyToClipboard(requestPrompt, 'prompt')\n    }\n  }, [requestPrompt, copyToClipboard])\n\n  // Nothing is written down anywhere: no `accessRequest`, no approvers, no\n  // owner, no comments. This used to `return null`, so the card showed no\n  // \"How to get access\" box at all and the reader could not tell an\n  // undocumented entry from one that needs no request (#181). Keep the box and\n  // say plainly that we do not know.\n  if (!accessRequest) {\n    return (\n      <AccessBox>\n        <p className=\"text-sm text-muted-foreground\">\n          {UNDOCUMENTED_WITHOUT_CONTACT}\n        </p>\n        {/* No request route written down, but a provisioning note still is:\n            that note is then the only thing on the page that says how the\n            access gets granted, so it cannot hang off `accessRequest`. */}\n        {app.notes && <AdminNotes notes={app.notes} />}\n      </AccessBox>\n    )\n  }\n\n  // Access UX (#31): some methods carry no clickable target — `noAccessRequired`\n  // (open), `unknown` (undocumented), and bare `custom` with no comments. The\n  // old UI rendered nothing for `custom`, leaving a blank/dead section. Instead\n  // surface an explicit, actionable line so the user is never stranded:\n  //  - open  → \"No request needed — just open it.\"\n  //  - unknown / undocumented custom → route them to the owner (shown below).\n  const isOpen = approvalMethod?.type === 'noAccessRequired'\n  const hasWrittenSteps = Boolean(\n    accessRequest.requestPrompt || accessRequest.comments,\n  )\n  const isUndocumented =\n    approvalMethod?.type === 'unknown' ||\n    (approvalMethod?.type === 'custom' && !hasWrittenSteps)\n  // \"the owner below\" is either the Approvers block in this box or the owner\n  // block further down the detail page, and BOTH are conditional — so an entry\n  // with neither was telling the reader to go and contact nobody.\n  const hasContact =\n    (accessRequest.approverSlugs?.length ?? 0) > 0 ||\n    Boolean(app.ownerPersonSlug)\n  // Two-step: has a primary request action AND follow-up post-approval steps\n  const isTwoStep = Boolean(\n    hasWrittenSteps && accessRequest.postApprovalInstructions,\n  )\n\n  return (\n    <AccessBox>\n      {isOpen && (\n        <p className=\"text-sm font-medium text-primary\">\n          ✓ Open to everyone — no request needed. Just open it.\n        </p>\n      )}\n\n      {isUndocumented && (\n        <p className=\"text-sm text-muted-foreground\">\n          {hasContact\n            ? UNDOCUMENTED_WITH_CONTACT\n            : UNDOCUMENTED_WITHOUT_CONTACT}\n        </p>\n      )}\n\n      {isTwoStep && (\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-xs font-bold text-primary bg-primary/10 rounded-full px-2.5 py-0.5\">\n            Step 1\n          </span>\n          <span className=\"text-xs text-muted-foreground\">Request access</span>\n        </div>\n      )}\n\n      {/* Approval Method */}\n      {approvalMethod && approvalMethod.type !== 'custom' && (\n        <div className=\"flex items-center gap-2\">\n          {approvalMethod.type === 'service' && approvalMethod.config.url ? (\n            <>\n              <a\n                href={approvalMethod.config.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"flex items-center gap-2 hover:text-primary transition-colors\"\n                title={approvalMethod.config.url}\n              >\n                <div>{getApprovalMethodIcon(approvalMethod.type)}</div>\n                <div className=\"font-medium\">{approvalMethod.displayName}</div>\n              </a>\n              <a\n                href={approvalMethod.config.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"text-muted-foreground hover:text-primary\"\n                title={approvalMethod.config.url}\n              >\n                <ExternalLink className=\"size-4\" />\n              </a>\n            </>\n          ) : (\n            <>\n              <div>{getApprovalMethodIcon(approvalMethod.type)}</div>\n              <div className=\"font-medium\">{approvalMethod.displayName}</div>\n            </>\n          )}\n        </div>\n      )}\n\n      {/* Request Prompt - Inline */}\n      {accessRequest.requestPrompt && (\n        <div className=\"text-sm inline-flex items-center gap-2\">\n          <span className=\"whitespace-nowrap shrink-0\">Request Prompt:</span>\n          <span className=\"prose prose-sm inline [&>*]:inline [&>*]:m-0\">\n            <MarkdownText>{accessRequest.requestPrompt}</MarkdownText>\n          </span>\n          <CopyButton\n            onCopy={handleCopyPrompt}\n            isCopied={copiedId === 'prompt'}\n            ariaLabel=\"Copy request prompt\"\n            className=\"h-6 w-6 p-0 shrink-0\"\n          />\n        </div>\n      )}\n\n      {/* Comments */}\n      {accessRequest.comments && (\n        <div className=\"text-sm text-muted-foreground prose prose-sm max-w-none\">\n          <MarkdownText>{accessRequest.comments}</MarkdownText>\n        </div>\n      )}\n\n      {accessRequest.roles && accessRequest.roles.length > 0 && (\n        <RolesTable roles={accessRequest.roles} />\n      )}\n\n      {/* After the roles, because the groups and pipelines it names are what\n          the roles above are granted through. */}\n      {app.notes && <AdminNotes notes={app.notes} />}\n\n      {/* Approvers */}\n      {accessRequest.approverSlugs &&\n        accessRequest.approverSlugs.length > 0 && (\n          <div>\n            <h4 className=\"mb-2 text-sm font-medium\">Approvers</h4>\n            <div className=\"flex flex-wrap gap-2\">\n              {accessRequest.approverSlugs.map((slug) => (\n                <PersonOrGroupBadge key={slug} slug={slug} />\n              ))}\n            </div>\n          </div>\n        )}\n\n      {/* Post-Approval Instructions */}\n      {accessRequest.postApprovalInstructions &&\n        (isTwoStep ? (\n          // Two-step apps: show Step 2 prominently, always expanded\n          <div className=\"space-y-2\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"text-xs font-bold text-primary bg-primary/10 rounded-full px-2.5 py-0.5\">\n                Step 2\n              </span>\n              <span className=\"text-xs text-muted-foreground\">\n                After approval\n              </span>\n            </div>\n            <div className=\"text-sm text-muted-foreground prose prose-sm max-w-none [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:list-disc [&_ul]:pl-5\">\n              <MarkdownText>\n                {accessRequest.postApprovalInstructions}\n              </MarkdownText>\n            </div>\n          </div>\n        ) : (\n          // Single-step apps: keep collapsible accordion (secondary info)\n          <Accordion type=\"single\" collapsible>\n            <AccordionItem\n              value=\"post-approval\"\n              className=\"border rounded-lg px-4\"\n            >\n              <AccordionTrigger className=\"text-sm hover:no-underline py-3\">\n                Post-Approval Instructions\n              </AccordionTrigger>\n              <AccordionContent className=\"pb-3\">\n                <div className=\"text-sm text-muted-foreground prose prose-sm max-w-none [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:list-disc [&_ul]:pl-5\">\n                  <MarkdownText>\n                    {accessRequest.postApprovalInstructions}\n                  </MarkdownText>\n                </div>\n              </AccordionContent>\n            </AccordionItem>\n          </Accordion>\n        ))}\n\n      {/* Documentation URLs — box level: they cover the whole process,\n          not one step, so they come after Step 2 */}\n      {accessRequest.urls && accessRequest.urls.length > 0 && (\n        <div>\n          <h4 className=\"mb-2 text-sm font-medium\">Documentation</h4>\n          <div className=\"flex flex-col gap-1.5\">\n            {accessRequest.urls.map((urlObj, idx) => (\n              <a\n                key={`${urlObj.url}-${idx}`}\n                href={urlObj.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"text-sm text-muted-foreground hover:text-primary inline-flex items-center gap-1.5\"\n              >\n                {urlObj.label || urlObj.url}\n                <ExternalLink className=\"size-3\" />\n              </a>\n            ))}\n          </div>\n        </div>\n      )}\n    </AccessBox>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/modules/appCatalog/ui/components/PersonBadge.js

@@ -11,6 +11,7 @@ import "tailwind-merge";
 import "next-themes";
 import "@tanstack/react-query";
 import "../../../../ui/button.js";
+import "../../../auth/AuthModalContext.js";
 import "@radix-ui/react-dialog";
 import "../../../config/GlobalConfigContext.js";
 import "../../../pluginCore/PluginManagerContext.js";

package/dist/esm/modules/appCatalog/ui/components/PersonBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"PersonBadge.js","sources":["../../../../../../src/modules/appCatalog/ui/components/PersonBadge.tsx"],"sourcesContent":["import type { Group } from '@igstack/app-catalog-backend-core'\nimport { Check, Copy, Mail, User, Users } from 'lucide-react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { Badge } from '~/ui/badge'\nimport { Popover, PopoverContent, PopoverTrigger } from '~/ui/popover'\nimport { useAppCatalogContext } from '~/modules/appCatalog'\nimport {\n  getGroupBySlug,\n  getPersonBySlug,\n} from '~/modules/appCatalog/utils/resolveHelpers'\n\ninterface PersonBadgeProps {\n  slug: string\n}\n\n/**\n * Person chip. Clicking it opens a small popover exposing BOTH the full name\n * and the email, each with its own copy button — so the user picks what to copy\n * (previously a single button copied only the email). Email also links to\n * mailto:. Falls back to just the name (no popover) when no email is known.\n */\nexport function PersonBadge({ slug }: PersonBadgeProps) {\n  const { persons } = useAppCatalogContext()\n  const person = getPersonBySlug(persons, slug)\n\n  const displayName = person\n    ? `${person.firstName} ${person.lastName}`.trim() || slug\n    : slug\n  const email = person?.email\n\n  // No email → nothing to pick between; render a plain, non-interactive chip.\n  if (!email) {\n    return (\n      <Badge\n        variant=\"outline\"\n        className=\"font-normal inline-flex items-center gap-1\"\n        title={displayName}\n      >\n        <User className=\"size-3\" />\n        {displayName}\n      </Badge>\n    )\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          className=\"inline-flex\"\n          title={`${displayName} · ${email}`}\n        >\n          <Badge\n            variant=\"outline\"\n            className=\"font-normal inline-flex items-center gap-1 cursor-pointer hover:border-primary transition-colors\"\n          >\n            <User className=\"size-3\" />\n            {displayName}\n            <Copy className=\"size-3 opacity-50\" />\n          </Badge>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-64 p-2\">\n        <CopyRow\n          icon={<User className=\"size-3.5\" />}\n          label=\"Name\"\n          value={displayName}\n        />\n        <CopyRow\n          icon={<Mail className=\"size-3.5\" />}\n          label=\"Email\"\n          value={email}\n          href={`mailto:${email}`}\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n\n/**\n * Chip for a slug that may name EITHER a Person or a Group (owner, approvers).\n * Resolves against both collections; falls back to the raw slug so an unknown\n * slug is still visible rather than silently dropped.\n */\nexport function PersonOrGroupBadge({ slug }: PersonBadgeProps) {\n  const { persons, groups } = useAppCatalogContext()\n\n  if (getPersonBySlug(persons, slug)) return <PersonBadge slug={slug} />\n\n  const group = getGroupBySlug(groups, slug)\n  if (!group) {\n    return (\n      <Badge variant=\"outline\" className=\"font-normal\" title={slug}>\n        {slug}\n      </Badge>\n    )\n  }\n\n  // No group email to copy → show each member as its own clickable/copyable\n  // chip instead of one opaque group chip.\n  if (!group.email && group.memberSlugs.length > 0) {\n    return (\n      <span className=\"inline-flex flex-wrap gap-1\">\n        {group.memberSlugs.map((memberSlug) => (\n          <PersonOrGroupBadge key={memberSlug} slug={memberSlug} />\n        ))}\n      </span>\n    )\n  }\n\n  return <GroupBadge group={group} />\n}\n\n/** Group chip: name, optional email, and the member names in a popover. */\nfunction GroupBadge({ group }: { group: Group }) {\n  const { persons } = useAppCatalogContext()\n  const memberNames = group.memberSlugs.map((s) => {\n    const p = getPersonBySlug(persons, s)\n    return p ? `${p.firstName} ${p.lastName}`.trim() || s : s\n  })\n  // Many groups (e.g. aws-maintainers-*) have no real displayName set — it's\n  // just their slug. Show the member names directly instead of the opaque\n  // slug so approvers stay recognizable at a glance, without a popover click.\n  const hasRealDisplayName =\n    group.displayName && group.displayName !== group.slug\n  const displayName = hasRealDisplayName\n    ? group.displayName!\n    : memberNames.length > 0\n      ? memberNames.join(', ')\n      : group.slug\n\n  if (!group.email && memberNames.length === 0) {\n    return (\n      <Badge\n        variant=\"outline\"\n        className=\"font-normal inline-flex items-center gap-1\"\n        title={displayName}\n      >\n        <Users className=\"size-3\" />\n        {displayName}\n      </Badge>\n    )\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button type=\"button\" className=\"inline-flex\" title={displayName}>\n          <Badge\n            variant=\"outline\"\n            className=\"font-normal inline-flex items-center gap-1 cursor-pointer hover:border-primary transition-colors\"\n          >\n            <Users className=\"size-3\" />\n            {displayName}\n            <Copy className=\"size-3 opacity-50\" />\n          </Badge>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-64 p-2\">\n        <CopyRow\n          icon={<Users className=\"size-3.5\" />}\n          label=\"Group\"\n          value={displayName}\n        />\n        {group.email && (\n          <CopyRow\n            icon={<Mail className=\"size-3.5\" />}\n            label=\"Email\"\n            value={group.email}\n            href={`mailto:${group.email}`}\n          />\n        )}\n        {memberNames.length > 0 && (\n          <div className=\"px-2 py-1.5\">\n            <span className=\"block text-[10px] uppercase tracking-wide text-muted-foreground\">\n              Members\n            </span>\n            <span className=\"block text-[13px]\">{memberNames.join(', ')}</span>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  )\n}\n\n/** One copyable field (label + value + copy button), value optionally a link. */\nfunction CopyRow({\n  icon,\n  label,\n  value,\n  href,\n}: {\n  icon: React.ReactNode\n  label: string\n  value: string\n  href?: string\n}) {\n  const [copied, setCopied] = useState(false)\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  useEffect(\n    () => () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current)\n    },\n    [],\n  )\n\n  const handleCopy = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      void navigator.clipboard.writeText(value)\n      setCopied(true)\n      if (timeoutRef.current) clearTimeout(timeoutRef.current)\n      timeoutRef.current = setTimeout(() => setCopied(false), 2000)\n    },\n    [value],\n  )\n\n  return (\n    <div className=\"flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted\">\n      <span className=\"text-muted-foreground shrink-0\">{icon}</span>\n      <span className=\"min-w-0 flex-1\">\n        <span className=\"block text-[10px] uppercase tracking-wide text-muted-foreground\">\n          {label}\n        </span>\n        {href ? (\n          <a\n            href={href}\n            className=\"block truncate text-[13px] text-primary hover:underline\"\n          >\n            {value}\n          </a>\n        ) : (\n          <span className=\"block truncate text-[13px]\">{value}</span>\n        )}\n      </span>\n      <button\n        type=\"button\"\n        onClick={handleCopy}\n        className=\"shrink-0 rounded p-1 text-muted-foreground hover:text-primary hover:bg-background transition-colors\"\n        title={copied ? 'Copied!' : `Copy ${label.toLowerCase()}`}\n        aria-label={`Copy ${label.toLowerCase()}`}\n      >\n        {copied ? (\n          <Check className=\"size-3.5 text-green-600\" />\n        ) : (\n          <Copy className=\"size-3.5\" />\n        )}\n      </button>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PersonBadge.js","sources":["../../../../../../src/modules/appCatalog/ui/components/PersonBadge.tsx"],"sourcesContent":["import type { Group } from '@igstack/app-catalog-backend-core'\nimport { Check, Copy, Mail, User, Users } from 'lucide-react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { Badge } from '~/ui/badge'\nimport { Popover, PopoverContent, PopoverTrigger } from '~/ui/popover'\nimport { useAppCatalogContext } from '~/modules/appCatalog'\nimport {\n  getGroupBySlug,\n  getPersonBySlug,\n} from '~/modules/appCatalog/utils/resolveHelpers'\n\ninterface PersonBadgeProps {\n  slug: string\n}\n\n/**\n * Person chip. Clicking it opens a small popover exposing BOTH the full name\n * and the email, each with its own copy button — so the user picks what to copy\n * (previously a single button copied only the email). Email also links to\n * mailto:. Falls back to just the name (no popover) when no email is known.\n */\nexport function PersonBadge({ slug }: PersonBadgeProps) {\n  const { persons } = useAppCatalogContext()\n  const person = getPersonBySlug(persons, slug)\n\n  const displayName = person\n    ? `${person.firstName} ${person.lastName}`.trim() || slug\n    : slug\n  const email = person?.email\n\n  // No email → nothing to pick between; render a plain, non-interactive chip.\n  if (!email) {\n    return (\n      <Badge\n        variant=\"outline\"\n        className=\"font-normal inline-flex items-center gap-1\"\n        title={displayName}\n      >\n        <User className=\"size-3\" />\n        {displayName}\n      </Badge>\n    )\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          className=\"inline-flex\"\n          title={`${displayName} · ${email}`}\n        >\n          <Badge\n            variant=\"outline\"\n            className=\"font-normal inline-flex items-center gap-1 cursor-pointer hover:border-primary transition-colors\"\n          >\n            <User className=\"size-3\" />\n            {displayName}\n            <Copy className=\"size-3 opacity-50\" />\n          </Badge>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-64 p-2\">\n        <CopyRow\n          icon={<User className=\"size-3.5\" />}\n          label=\"Name\"\n          value={displayName}\n        />\n        <CopyRow\n          icon={<Mail className=\"size-3.5\" />}\n          label=\"Email\"\n          value={email}\n          href={`mailto:${email}`}\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n\n/**\n * Chip for a slug that may name EITHER a Person or a Group (owner, approvers).\n * Resolves against both collections; falls back to the raw slug so an unknown\n * slug is still visible rather than silently dropped.\n */\nexport function PersonOrGroupBadge({ slug }: PersonBadgeProps) {\n  const { persons, groups } = useAppCatalogContext()\n\n  if (getPersonBySlug(persons, slug)) return <PersonBadge slug={slug} />\n\n  const group = getGroupBySlug(groups, slug)\n  if (!group) {\n    return (\n      <Badge variant=\"outline\" className=\"font-normal\" title={slug}>\n        {slug}\n      </Badge>\n    )\n  }\n\n  // No group email to copy → show each member as its own clickable/copyable\n  // chip instead of one opaque group chip.\n  if (!group.email && group.memberSlugs.length > 0) {\n    return (\n      <span className=\"inline-flex flex-wrap gap-1\">\n        {group.memberSlugs.map((memberSlug) => (\n          <PersonOrGroupBadge key={memberSlug} slug={memberSlug} />\n        ))}\n      </span>\n    )\n  }\n\n  return <GroupBadge group={group} />\n}\n\n/** Group chip: name, optional email, and the member names in a popover. */\nfunction GroupBadge({ group }: { group: Group }) {\n  const { persons } = useAppCatalogContext()\n  const memberNames = group.memberSlugs.map((s) => {\n    const p = getPersonBySlug(persons, s)\n    return p ? `${p.firstName} ${p.lastName}`.trim() || s : s\n  })\n  // Many groups (e.g. aws-maintainers-*) have no real displayName set — it's\n  // just their slug. Show the member names directly instead of the opaque\n  // slug so approvers stay recognizable at a glance, without a popover click.\n  const hasRealDisplayName =\n    group.displayName && group.displayName !== group.slug\n  const displayName = hasRealDisplayName\n    ? group.displayName!\n    : memberNames.length > 0\n      ? memberNames.join(', ')\n      : group.slug\n\n  if (!group.email && memberNames.length === 0) {\n    return (\n      <Badge\n        variant=\"outline\"\n        className=\"font-normal inline-flex items-center gap-1\"\n        title={displayName}\n      >\n        <Users className=\"size-3\" />\n        {displayName}\n      </Badge>\n    )\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button type=\"button\" className=\"inline-flex\" title={displayName}>\n          <Badge\n            variant=\"outline\"\n            className=\"font-normal inline-flex items-center gap-1 cursor-pointer hover:border-primary transition-colors\"\n          >\n            <Users className=\"size-3\" />\n            {displayName}\n            <Copy className=\"size-3 opacity-50\" />\n          </Badge>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-64 p-2\">\n        <CopyRow\n          icon={<Users className=\"size-3.5\" />}\n          label=\"Group\"\n          value={displayName}\n        />\n        {group.email && (\n          <CopyRow\n            icon={<Mail className=\"size-3.5\" />}\n            label=\"Email\"\n            value={group.email}\n            href={`mailto:${group.email}`}\n          />\n        )}\n        {memberNames.length > 0 && (\n          <div className=\"px-2 py-1.5\">\n            <span className=\"block text-[10px] uppercase tracking-wide text-muted-foreground\">\n              Members\n            </span>\n            <span className=\"block text-[13px]\">{memberNames.join(', ')}</span>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  )\n}\n\n/** One copyable field (label + value + copy button), value optionally a link. */\nfunction CopyRow({\n  icon,\n  label,\n  value,\n  href,\n}: {\n  icon: React.ReactNode\n  label: string\n  value: string\n  href?: string\n}) {\n  const [copied, setCopied] = useState(false)\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  useEffect(\n    () => () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current)\n    },\n    [],\n  )\n\n  const handleCopy = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      void navigator.clipboard.writeText(value)\n      setCopied(true)\n      if (timeoutRef.current) clearTimeout(timeoutRef.current)\n      timeoutRef.current = setTimeout(() => setCopied(false), 2000)\n    },\n    [value],\n  )\n\n  return (\n    <div className=\"flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted\">\n      <span className=\"text-muted-foreground shrink-0\">{icon}</span>\n      <span className=\"min-w-0 flex-1\">\n        <span className=\"block text-[10px] uppercase tracking-wide text-muted-foreground\">\n          {label}\n        </span>\n        {href ? (\n          <a\n            href={href}\n            className=\"block truncate text-[13px] text-primary hover:underline\"\n          >\n            {value}\n          </a>\n        ) : (\n          <span className=\"block truncate text-[13px]\">{value}</span>\n        )}\n      </span>\n      <button\n        type=\"button\"\n        onClick={handleCopy}\n        className=\"shrink-0 rounded p-1 text-muted-foreground hover:text-primary hover:bg-background transition-colors\"\n        title={copied ? 'Copied!' : `Copy ${label.toLowerCase()}`}\n        aria-label={`Copy ${label.toLowerCase()}`}\n      >\n        {copied ? (\n          <Check className=\"size-3.5 text-green-600\" />\n        ) : (\n          <Copy className=\"size-3.5\" />\n        )}\n      </button>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/modules/appCatalog/ui/components/QuickJumpBar.js

@@ -74,7 +74,10 @@ function QuickJumpBar({ app }) {
         // too, and a shell that stays unlit for two of its three ends reads as
         // if tabbing had left the control.
         "has-[:focus-visible]:border-ring has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-ring/25",
-        "sm:w-auto"
+        // `w-fit`, not `w-auto`: the row is a block-level flex box on its own
+        // line, so `auto` stretches it across the card and leaves the card's
+        // own white after Jump. Only `fit-content` shrink-wraps it.
+        "sm:w-fit"
       ),
       children: [
         jumps.length > 1 ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [

package/dist/esm/modules/appCatalog/ui/components/QuickJumpBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickJumpBar.js","sources":["../../../../../../src/modules/appCatalog/ui/components/QuickJumpBar.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { ChevronDown, ExternalLink } from 'lucide-react'\nimport React from 'react'\n\nimport { useUrlSyncedState } from '~/modules/appCatalog/hooks/useUrlSyncedState'\nimport {\n  buildQuickJumpUrl,\n  groupQuickJumps,\n  quickJumpFieldName,\n  quickJumpShortTitle,\n  quickJumpSlug,\n} from '~/modules/appCatalog/utils/quickJump'\nimport { cn } from '~/lib/utils'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n} from '~/ui/dropdown-menu'\n\n/** Whether the open button should stand down for this app's Quick Jump. */\nexport function hasQuickJumps(app: Resource): boolean {\n  return groupQuickJumps(app).some((group) => group.jumps.length > 0)\n}\n\n/**\n * One horizontal inset and one icon gap for every segment AND for the open\n * button, so the two seams either side of the field measure the same.\n *\n * Vertical padding is deliberately absent: height comes from a `min-h` on each\n * segment. Borrowing it from a sibling through `items-stretch` is what left the\n * picker a 20.5px tap target once it wrapped onto its own line, and what made the\n * row 33.5px on an app with jumps but 32px on an app without.\n */\nconst SEGMENT =\n  'inline-flex items-center gap-1.5 px-3 text-sm whitespace-nowrap'\n\n/** One focus ring per focusable segment, or tabbing the row never says where\n    you are: the shell's ring belongs to the field (below), these to the ends. */\nconst SEGMENT_FOCUS =\n  'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring'\n\n/**\n * The destination picker. Sized to the app's WIDEST short title (see the ghost\n * below), not to a constant: a constant was simultaneously 100px too narrow for\n * the long titles and three quarters empty on an app with one short one. Widest,\n * rather than current, is what keeps the field and Jump from sliding sideways\n * when the destination changes — the only thing the constant was protecting.\n *\n * Its own full-width line below `sm`, where the three segments together do not\n * fit in a phone's panel at all. It carries the short title — the full one is in\n * the menu, where you are choosing between systems.\n */\nconst PICKER = [\n  SEGMENT,\n  // `calc(var(--radius)_-_1px)` is the shell's radius less its own border, so the\n  // inner corners are concentric with the outer ones. Written out rather than\n  // interpolated from a constant: Tailwind reads these class names out of the\n  // source text, and a template hole is not a class name.\n  'w-full min-h-10 shrink-0 rounded-t-[calc(var(--radius)_-_1px)] border-b border-border bg-muted text-left font-semibold',\n  'sm:w-auto sm:min-h-8 sm:max-w-[min(20rem,100%)] sm:rounded-t-none sm:rounded-l-[calc(var(--radius)_-_1px)] sm:border-b-0',\n].join(' ')\n\nconst JUMP = [\n  SEGMENT,\n  'min-h-8 shrink-0 rounded-br-[calc(var(--radius)_-_1px)] border-l border-border font-bold sm:rounded-br-none sm:rounded-r-[calc(var(--radius)_-_1px)]',\n  SEGMENT_FOCUS,\n].join(' ')\n\n/**\n * The leap, as a free-standing button does it: it lifts onto its toes on\n * `:hover` and crouches on `:active`. Deliberately NOT an on-click animation —\n * these links open a new tab, which takes focus the same instant, so a keyframe\n * fired on click runs in a backgrounded tab and the user only sees it on the way\n * back.\n *\n * The transition has to name `translate` and `scale`: in Tailwind v4 those\n * utilities set those separate properties, which a `transform` transition never\n * sees.\n *\n * This belongs to the open button ALONE. Jump is welded into a bordered frame,\n * where the same lift covered the shell's top border along its whole width and\n * the crouch opened 3.5px of card above it while overhanging the bottom. A\n * segment presses inward instead — see `JUMP_FILL`.\n */\nexport const LEAP =\n  'origin-bottom transition-[background-color,translate,scale] duration-100 ease-out motion-safe:hover:-translate-y-[1.5px] motion-safe:active:translate-y-px motion-safe:active:scale-y-[0.92]'\n\n/**\n * The brand fill for a button that leaves for the app. Darkened, because\n * `--primary` under `--primary-foreground` measures 3.8:1 — below WCAG AA. 90%\n * measured 4.56:1, which clears AA by 0.06 at a size where bold does not count\n * as large text; 85% measures 5.19:1.\n *\n * A token-level fix would be better and is a brand decision, not this\n * component's: every filled button in the app inherits the same ratio.\n */\nexport const LEAVE_FILL = [\n  'bg-[color-mix(in_oklab,var(--color-primary)_85%,black)] text-primary-foreground',\n  'hover:bg-[color-mix(in_oklab,var(--color-primary)_75%,black)]',\n].join(' ')\n\n/**\n * The open button when the app also has a Quick Jump. A row holds exactly ONE\n * solid brand fill and it belongs on the submit — the one element in a\n * field-shaped control that has to announce \"this acts on what you typed\".\n * Sharing the fill made the two read as a single four-part blob.\n *\n * The button keeps its primacy through position and its self-describing label,\n * not through being the loudest thing in the row. The branch is decided by the\n * app's data, never by the input's value: the hierarchy must not flicker while\n * the user types.\n *\n * The border is not decoration. `--secondary` and the picker's `--muted` sit\n * 0.015 apart in lightness, so without it the button and the shell's first\n * segment read as one continuous panel straight across the gap — the same\n * failure again, in grey.\n */\nexport const QUIET_FILL =\n  'border border-border bg-secondary text-secondary-foreground hover:bg-accent hover:text-accent-foreground'\n\n/** Jump's fill: the leave fill, pressed inward rather than crouching. */\nconst JUMP_FILL = [\n  LEAVE_FILL,\n  'active:bg-[color-mix(in_oklab,var(--color-primary)_68%,black)]',\n  'active:shadow-[inset_0_2px_3px_rgb(0_0_0/0.22)]',\n  'transition-[background-color,box-shadow] duration-150 ease-out',\n].join(' ')\n\n/**\n * Quick Jump: `[ destination ▾ | id | Jump ]`, one control sitting next to the\n * app's own open button. The picker only names and swaps the destination; Jump\n * is the sole thing that navigates. Renders nothing for an app with no jumps.\n */\nexport function QuickJumpBar({ app }: { app: Resource }) {\n  const identities = React.useMemo(() => groupQuickJumps(app), [app])\n  const jumps = React.useMemo(\n    () => identities.flatMap((group) => group.jumps),\n    [identities],\n  )\n  // The chosen destination lives in the url (`?qj=tracker.view-case`), so a\n  // \"use this one\" link is shareable. Empty = the app's first jump.\n  const [slug, setSlug] = useUrlSyncedState<string>({\n    key: 'qj',\n    defaultValue: '',\n    encode: (value) => value || undefined,\n  })\n  const [value, setValue] = React.useState('')\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const hintId = React.useId()\n\n  // A typed id belongs to the app it was typed on.\n  React.useEffect(() => setValue(''), [jumps])\n\n  // Opening a card is a deliberate act, and this field is the one thing in the\n  // header you act on by typing — so it takes the caret, and you can open an app\n  // and enter an id without reaching for the mouse. Keyed on the app's jumps, so\n  // it re-applies when you move to another app inside the same mounted panel.\n  //\n  // `preventScroll`, or focusing an element inside the scrollable panel scrolls\n  // the panel to it. Not on a coarse pointer: there focus pops the virtual\n  // keyboard over half of what you just opened.\n  React.useEffect(() => {\n    if (window.matchMedia('(pointer: coarse)').matches) return\n    inputRef.current?.focus({ preventScroll: true })\n  }, [jumps])\n\n  // A `?qj=` naming another app's jump would silently resolve to this app's\n  // first one, leaving the url claiming something untrue.\n  React.useEffect(() => {\n    if (slug && !jumps.some((jump) => quickJumpSlug(jump) === slug)) setSlug('')\n  }, [jumps, slug, setSlug])\n\n  if (jumps.length === 0) return null\n\n  const selected =\n    jumps.find((jump) => quickJumpSlug(jump) === slug) ?? jumps[0]\n  if (!selected) return null\n\n  const trimmed = value.trim()\n  // Never null in practice: groupQuickJumps already dropped the jumps this app\n  // cannot build a url for.\n  const href =\n    (trimmed ? buildQuickJumpUrl(selected, trimmed, app.appUrl) : null) ??\n    undefined\n\n  // What the picker is sized to. Longest by characters rather than by measured\n  // text: close enough at one weight and one size, and it costs no layout pass.\n  const widest = jumps\n    .map(quickJumpShortTitle)\n    .reduce((longest, title) =>\n      title.length > longest.length ? title : longest,\n    )\n\n  return (\n    <div\n      className={cn(\n        'group flex w-full max-w-full flex-wrap items-stretch rounded-lg border border-input bg-card shadow-[inset_0_1px_2px_rgb(0_0_0/0.09)]',\n        // Any segment, not just the field: the picker and Jump are focusable\n        // too, and a shell that stays unlit for two of its three ends reads as\n        // if tabbing had left the control.\n        'has-[:focus-visible]:border-ring has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-ring/25',\n        'sm:w-auto',\n      )}\n    >\n      {jumps.length > 1 ? (\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            title={`${selected.title} — choose a destination`}\n            className={cn(\n              PICKER,\n              SEGMENT_FOCUS,\n              'cursor-pointer transition-colors hover:bg-accent',\n            )}\n          >\n            {/* The shown label and an invisible copy of the widest one share a\n                single grid cell, so the column is as wide as the widest and the\n                segment cannot change width when the destination changes.\n\n                The cap has to be on this box, not only on the segment: a\n                `max-width` on a flex item does not clamp that item's\n                max-content contribution, so the shell's own width would still\n                be computed from the uncapped label and leave dead card-coloured\n                space after Jump. */}\n            <span className=\"grid min-w-0 max-w-[296px]\">\n              {/* Caret inside the shown cell, immediately after the label — as\n                  a sibling of the whole box it would be stranded at the far\n                  edge on every destination but the widest, where it reads as\n                  the field's boundary and leaves the picker looking like a wide\n                  empty select. The ghost reserves its width instead. */}\n              <span className=\"flex min-w-0 items-center gap-1.5 [grid-area:1/1]\">\n                <span className=\"truncate\">\n                  {quickJumpShortTitle(selected)}\n                </span>\n                <ChevronDown className=\"size-4 shrink-0 text-foreground/70\" />\n              </span>\n              {/* Omitted when the widest destination is the one on screen: the\n                  shown cell already measures that wide, and a second copy of\n                  the same words is one a text query has to disambiguate. */}\n              {widest !== quickJumpShortTitle(selected) && (\n                <span\n                  aria-hidden\n                  // 16px caret + the 6px gap it sits behind.\n                  className=\"invisible h-0 pr-[22px] whitespace-nowrap [grid-area:1/1]\"\n                >\n                  {widest}\n                </span>\n              )}\n            </span>\n          </DropdownMenuTrigger>\n          {/* Portalled, never narrower than the trigger, and sized to its\n              content beyond that: the trigger ellipsises, the menu never does. */}\n          <DropdownMenuContent\n            align=\"start\"\n            sideOffset={6}\n            className=\"max-w-[min(90vw,34rem)] min-w-[var(--radix-dropdown-menu-trigger-width)]\"\n          >\n            <DropdownMenuRadioGroup\n              value={quickJumpSlug(selected)}\n              onValueChange={setSlug}\n            >\n              {identities.map((group) => (\n                <React.Fragment key={group.identity}>\n                  <DropdownMenuLabel className=\"px-2 py-1 text-[0.65rem] font-extrabold tracking-wider text-muted-foreground uppercase\">\n                    {group.identity}\n                  </DropdownMenuLabel>\n                  {group.jumps.map((jump) => (\n                    <DropdownMenuRadioItem\n                      key={quickJumpSlug(jump)}\n                      value={quickJumpSlug(jump)}\n                      // Concentric with the menu: 8px inside a 12px box with\n                      // 4px of padding.\n                      className=\"rounded-[8px] pl-7 whitespace-nowrap\"\n                    >\n                      {jump.title}\n                    </DropdownMenuRadioItem>\n                  ))}\n                </React.Fragment>\n              ))}\n            </DropdownMenuRadioGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      ) : (\n        <span title={selected.title} className={cn(PICKER, 'truncate')}>\n          {quickJumpShortTitle(selected)}\n        </span>\n      )}\n\n      {/* The field owns a positioning context so the hint below can be anchored\n          to it. The input is taken out of flow inside it: an `<input>` keeps an\n          intrinsic 20-character width that wins inside an auto-width flex row,\n          and the field's width is a design decision, not a font metric. */}\n      <div\n        className={cn(\n          'relative flex min-h-8 w-[170px] min-w-[120px] flex-[1_1_170px] border-border',\n          // Grows into the row's leftovers below `sm`, where it shares a line\n          // with Jump. It must NOT grow from `sm` up: the shell is auto-width\n          // there, so growing fills nothing but does hand the field the\n          // picker's clamped-away max-content overflow.\n          'sm:flex-[0_1_170px] sm:border-l',\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"text\"\n          // Namespaced per identity: the browser remembers values typed for this\n          // identifier and offers them on every app that asks for it.\n          name={quickJumpFieldName(selected.identity)}\n          autoComplete=\"on\"\n          aria-label={selected.identity}\n          // Bare identity, not \"Enter <identity>\": the verb costs ~40px of a\n          // 170px field that the longest identifiers need.\n          placeholder={selected.identity}\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n          // Selecting on focus rather than on click, or a second click inside\n          // could never place a caret.\n          onFocus={(e) => e.currentTarget.select()}\n          onKeyDown={(e) => {\n            if (e.key !== 'Enter' || !href) return\n            window.open(href, '_blank', 'noopener,noreferrer')\n          }}\n          className={cn(\n            'absolute inset-0 h-full w-full bg-transparent px-3 font-mono text-sm font-medium outline-none placeholder:font-sans placeholder:text-muted-foreground',\n            // Hovering the dormant Jump lights up the field it is waiting on.\n            'transition-[box-shadow,background-color] duration-150',\n            'group-has-[.qj-dormant:hover]:bg-ring/10 group-has-[.qj-dormant:hover]:shadow-[inset_0_0_0_2px_var(--color-ring)]',\n            'group-has-[.qj-dormant:hover]:placeholder:text-foreground',\n          )}\n        />\n\n        {/* Hovering a button that does nothing is someone asking why. The answer\n            points at the FIELD, not at the button under the cursor — which is\n            why it hangs off the field's own box rather than off a hard-coded\n            picker width that stopped being true once the picker was sized to its\n            content. The field lights up at the same time.\n\n            Not `aria-hidden`: it is the dormant button's description, which is\n            also why that button no longer carries a `title` saying the same\n            thing in different words. */}\n        <p\n          id={hintId}\n          className={cn(\n            'pointer-events-none absolute top-[calc(100%+0.5rem)] left-0 z-30 m-0 flex items-center rounded-md bg-foreground px-2 py-1 text-xs font-semibold whitespace-nowrap text-background',\n            'before:absolute before:-top-[3px] before:left-[0.9rem] before:size-2 before:rotate-45 before:rounded-[1px] before:bg-foreground',\n            // `translate`, not `transform`: v4 utilities set the separate\n            // `translate` property, which a transform transition never sees.\n            '-translate-y-[3px] opacity-0 transition-[opacity,translate] duration-150',\n            'group-has-[.qj-dormant:hover]:translate-y-0 group-has-[.qj-dormant:hover]:opacity-100',\n            'group-has-[.qj-dormant:focus-visible]:translate-y-0 group-has-[.qj-dormant:focus-visible]:opacity-100',\n          )}\n        >\n          Type a {selected.identity} here first\n        </p>\n      </div>\n\n      {/* A real <button> while dormant. An <a> without href is not focusable,\n          so the whole \"press it and it tells you to type\" behaviour — and the\n          hint's :focus-visible branch — would have been mouse-only. */}\n      {href ? (\n        <a\n          href={href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          // Title, not the url: the browser already puts the url in the\n          // status bar, and some of these are 250 characters long. It doubles\n          // as the full text when the picker has ellipsised it.\n          title={`Jump to ${selected.title}`}\n          className={cn(JUMP, JUMP_FILL)}\n        >\n          Jump\n          <ExternalLink className=\"size-3.5 shrink-0\" />\n        </a>\n      ) : (\n        <button\n          type=\"button\"\n          aria-describedby={hintId}\n          onClick={() => inputRef.current?.focus()}\n          // Tinted toward the action rather than greyed: on `bg-muted` it was\n          // the picker's twin, so the row read as two dropdowns around a\n          // field and nothing in it looked raised.\n          className={cn(\n            JUMP,\n            'qj-dormant cursor-text bg-primary/12 text-muted-foreground',\n          )}\n        >\n          Jump\n          <ExternalLink className=\"size-3.5 shrink-0\" />\n        </button>\n      )}\n    </div>\n  )\n}\n"],"names":["React","value"],"mappings":"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"}
+{"version":3,"file":"QuickJumpBar.js","sources":["../../../../../../src/modules/appCatalog/ui/components/QuickJumpBar.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { ChevronDown, ExternalLink } from 'lucide-react'\nimport React from 'react'\n\nimport { useUrlSyncedState } from '~/modules/appCatalog/hooks/useUrlSyncedState'\nimport {\n  buildQuickJumpUrl,\n  groupQuickJumps,\n  quickJumpFieldName,\n  quickJumpShortTitle,\n  quickJumpSlug,\n} from '~/modules/appCatalog/utils/quickJump'\nimport { cn } from '~/lib/utils'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n} from '~/ui/dropdown-menu'\n\n/** Whether the open button should stand down for this app's Quick Jump. */\nexport function hasQuickJumps(app: Resource): boolean {\n  return groupQuickJumps(app).some((group) => group.jumps.length > 0)\n}\n\n/**\n * One horizontal inset and one icon gap for every segment AND for the open\n * button, so the two seams either side of the field measure the same.\n *\n * Vertical padding is deliberately absent: height comes from a `min-h` on each\n * segment. Borrowing it from a sibling through `items-stretch` is what left the\n * picker a 20.5px tap target once it wrapped onto its own line, and what made the\n * row 33.5px on an app with jumps but 32px on an app without.\n */\nconst SEGMENT =\n  'inline-flex items-center gap-1.5 px-3 text-sm whitespace-nowrap'\n\n/** One focus ring per focusable segment, or tabbing the row never says where\n    you are: the shell's ring belongs to the field (below), these to the ends. */\nconst SEGMENT_FOCUS =\n  'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring'\n\n/**\n * The destination picker. Sized to the app's WIDEST short title (see the ghost\n * below), not to a constant: a constant was simultaneously 100px too narrow for\n * the long titles and three quarters empty on an app with one short one. Widest,\n * rather than current, is what keeps the field and Jump from sliding sideways\n * when the destination changes — the only thing the constant was protecting.\n *\n * Its own full-width line below `sm`, where the three segments together do not\n * fit in a phone's panel at all. It carries the short title — the full one is in\n * the menu, where you are choosing between systems.\n */\nconst PICKER = [\n  SEGMENT,\n  // `calc(var(--radius)_-_1px)` is the shell's radius less its own border, so the\n  // inner corners are concentric with the outer ones. Written out rather than\n  // interpolated from a constant: Tailwind reads these class names out of the\n  // source text, and a template hole is not a class name.\n  'w-full min-h-10 shrink-0 rounded-t-[calc(var(--radius)_-_1px)] border-b border-border bg-muted text-left font-semibold',\n  'sm:w-auto sm:min-h-8 sm:max-w-[min(20rem,100%)] sm:rounded-t-none sm:rounded-l-[calc(var(--radius)_-_1px)] sm:border-b-0',\n].join(' ')\n\nconst JUMP = [\n  SEGMENT,\n  'min-h-8 shrink-0 rounded-br-[calc(var(--radius)_-_1px)] border-l border-border font-bold sm:rounded-br-none sm:rounded-r-[calc(var(--radius)_-_1px)]',\n  SEGMENT_FOCUS,\n].join(' ')\n\n/**\n * The leap, as a free-standing button does it: it lifts onto its toes on\n * `:hover` and crouches on `:active`. Deliberately NOT an on-click animation —\n * these links open a new tab, which takes focus the same instant, so a keyframe\n * fired on click runs in a backgrounded tab and the user only sees it on the way\n * back.\n *\n * The transition has to name `translate` and `scale`: in Tailwind v4 those\n * utilities set those separate properties, which a `transform` transition never\n * sees.\n *\n * This belongs to the open button ALONE. Jump is welded into a bordered frame,\n * where the same lift covered the shell's top border along its whole width and\n * the crouch opened 3.5px of card above it while overhanging the bottom. A\n * segment presses inward instead — see `JUMP_FILL`.\n */\nexport const LEAP =\n  'origin-bottom transition-[background-color,translate,scale] duration-100 ease-out motion-safe:hover:-translate-y-[1.5px] motion-safe:active:translate-y-px motion-safe:active:scale-y-[0.92]'\n\n/**\n * The brand fill for a button that leaves for the app. Darkened, because\n * `--primary` under `--primary-foreground` measures 3.8:1 — below WCAG AA. 90%\n * measured 4.56:1, which clears AA by 0.06 at a size where bold does not count\n * as large text; 85% measures 5.19:1.\n *\n * A token-level fix would be better and is a brand decision, not this\n * component's: every filled button in the app inherits the same ratio.\n */\nexport const LEAVE_FILL = [\n  'bg-[color-mix(in_oklab,var(--color-primary)_85%,black)] text-primary-foreground',\n  'hover:bg-[color-mix(in_oklab,var(--color-primary)_75%,black)]',\n].join(' ')\n\n/**\n * The open button when the app also has a Quick Jump. A row holds exactly ONE\n * solid brand fill and it belongs on the submit — the one element in a\n * field-shaped control that has to announce \"this acts on what you typed\".\n * Sharing the fill made the two read as a single four-part blob.\n *\n * The button keeps its primacy through position and its self-describing label,\n * not through being the loudest thing in the row. The branch is decided by the\n * app's data, never by the input's value: the hierarchy must not flicker while\n * the user types.\n *\n * The border is not decoration. `--secondary` and the picker's `--muted` sit\n * 0.015 apart in lightness, so without it the button and the shell's first\n * segment read as one continuous panel straight across the gap — the same\n * failure again, in grey.\n */\nexport const QUIET_FILL =\n  'border border-border bg-secondary text-secondary-foreground hover:bg-accent hover:text-accent-foreground'\n\n/** Jump's fill: the leave fill, pressed inward rather than crouching. */\nconst JUMP_FILL = [\n  LEAVE_FILL,\n  'active:bg-[color-mix(in_oklab,var(--color-primary)_68%,black)]',\n  'active:shadow-[inset_0_2px_3px_rgb(0_0_0/0.22)]',\n  'transition-[background-color,box-shadow] duration-150 ease-out',\n].join(' ')\n\n/**\n * Quick Jump: `[ destination ▾ | id | Jump ]`, one control sitting next to the\n * app's own open button. The picker only names and swaps the destination; Jump\n * is the sole thing that navigates. Renders nothing for an app with no jumps.\n */\nexport function QuickJumpBar({ app }: { app: Resource }) {\n  const identities = React.useMemo(() => groupQuickJumps(app), [app])\n  const jumps = React.useMemo(\n    () => identities.flatMap((group) => group.jumps),\n    [identities],\n  )\n  // The chosen destination lives in the url (`?qj=tracker.view-case`), so a\n  // \"use this one\" link is shareable. Empty = the app's first jump.\n  const [slug, setSlug] = useUrlSyncedState<string>({\n    key: 'qj',\n    defaultValue: '',\n    encode: (value) => value || undefined,\n  })\n  const [value, setValue] = React.useState('')\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const hintId = React.useId()\n\n  // A typed id belongs to the app it was typed on.\n  React.useEffect(() => setValue(''), [jumps])\n\n  // Opening a card is a deliberate act, and this field is the one thing in the\n  // header you act on by typing — so it takes the caret, and you can open an app\n  // and enter an id without reaching for the mouse. Keyed on the app's jumps, so\n  // it re-applies when you move to another app inside the same mounted panel.\n  //\n  // `preventScroll`, or focusing an element inside the scrollable panel scrolls\n  // the panel to it. Not on a coarse pointer: there focus pops the virtual\n  // keyboard over half of what you just opened.\n  React.useEffect(() => {\n    if (window.matchMedia('(pointer: coarse)').matches) return\n    inputRef.current?.focus({ preventScroll: true })\n  }, [jumps])\n\n  // A `?qj=` naming another app's jump would silently resolve to this app's\n  // first one, leaving the url claiming something untrue.\n  React.useEffect(() => {\n    if (slug && !jumps.some((jump) => quickJumpSlug(jump) === slug)) setSlug('')\n  }, [jumps, slug, setSlug])\n\n  if (jumps.length === 0) return null\n\n  const selected =\n    jumps.find((jump) => quickJumpSlug(jump) === slug) ?? jumps[0]\n  if (!selected) return null\n\n  const trimmed = value.trim()\n  // Never null in practice: groupQuickJumps already dropped the jumps this app\n  // cannot build a url for.\n  const href =\n    (trimmed ? buildQuickJumpUrl(selected, trimmed, app.appUrl) : null) ??\n    undefined\n\n  // What the picker is sized to. Longest by characters rather than by measured\n  // text: close enough at one weight and one size, and it costs no layout pass.\n  const widest = jumps\n    .map(quickJumpShortTitle)\n    .reduce((longest, title) =>\n      title.length > longest.length ? title : longest,\n    )\n\n  return (\n    <div\n      className={cn(\n        'group flex w-full max-w-full flex-wrap items-stretch rounded-lg border border-input bg-card shadow-[inset_0_1px_2px_rgb(0_0_0/0.09)]',\n        // Any segment, not just the field: the picker and Jump are focusable\n        // too, and a shell that stays unlit for two of its three ends reads as\n        // if tabbing had left the control.\n        'has-[:focus-visible]:border-ring has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-ring/25',\n        // `w-fit`, not `w-auto`: the row is a block-level flex box on its own\n        // line, so `auto` stretches it across the card and leaves the card's\n        // own white after Jump. Only `fit-content` shrink-wraps it.\n        'sm:w-fit',\n      )}\n    >\n      {jumps.length > 1 ? (\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            title={`${selected.title} — choose a destination`}\n            className={cn(\n              PICKER,\n              SEGMENT_FOCUS,\n              'cursor-pointer transition-colors hover:bg-accent',\n            )}\n          >\n            {/* The shown label and an invisible copy of the widest one share a\n                single grid cell, so the column is as wide as the widest and the\n                segment cannot change width when the destination changes.\n\n                The cap has to be on this box, not only on the segment: a\n                `max-width` on a flex item does not clamp that item's\n                max-content contribution, so the shell's own width would still\n                be computed from the uncapped label and leave dead card-coloured\n                space after Jump. */}\n            <span className=\"grid min-w-0 max-w-[296px]\">\n              {/* Caret inside the shown cell, immediately after the label — as\n                  a sibling of the whole box it would be stranded at the far\n                  edge on every destination but the widest, where it reads as\n                  the field's boundary and leaves the picker looking like a wide\n                  empty select. The ghost reserves its width instead. */}\n              <span className=\"flex min-w-0 items-center gap-1.5 [grid-area:1/1]\">\n                <span className=\"truncate\">\n                  {quickJumpShortTitle(selected)}\n                </span>\n                <ChevronDown className=\"size-4 shrink-0 text-foreground/70\" />\n              </span>\n              {/* Omitted when the widest destination is the one on screen: the\n                  shown cell already measures that wide, and a second copy of\n                  the same words is one a text query has to disambiguate. */}\n              {widest !== quickJumpShortTitle(selected) && (\n                <span\n                  aria-hidden\n                  // 16px caret + the 6px gap it sits behind.\n                  className=\"invisible h-0 pr-[22px] whitespace-nowrap [grid-area:1/1]\"\n                >\n                  {widest}\n                </span>\n              )}\n            </span>\n          </DropdownMenuTrigger>\n          {/* Portalled, never narrower than the trigger, and sized to its\n              content beyond that: the trigger ellipsises, the menu never does. */}\n          <DropdownMenuContent\n            align=\"start\"\n            sideOffset={6}\n            className=\"max-w-[min(90vw,34rem)] min-w-[var(--radix-dropdown-menu-trigger-width)]\"\n          >\n            <DropdownMenuRadioGroup\n              value={quickJumpSlug(selected)}\n              onValueChange={setSlug}\n            >\n              {identities.map((group) => (\n                <React.Fragment key={group.identity}>\n                  <DropdownMenuLabel className=\"px-2 py-1 text-[0.65rem] font-extrabold tracking-wider text-muted-foreground uppercase\">\n                    {group.identity}\n                  </DropdownMenuLabel>\n                  {group.jumps.map((jump) => (\n                    <DropdownMenuRadioItem\n                      key={quickJumpSlug(jump)}\n                      value={quickJumpSlug(jump)}\n                      // Concentric with the menu: 8px inside a 12px box with\n                      // 4px of padding.\n                      className=\"rounded-[8px] pl-7 whitespace-nowrap\"\n                    >\n                      {jump.title}\n                    </DropdownMenuRadioItem>\n                  ))}\n                </React.Fragment>\n              ))}\n            </DropdownMenuRadioGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      ) : (\n        <span title={selected.title} className={cn(PICKER, 'truncate')}>\n          {quickJumpShortTitle(selected)}\n        </span>\n      )}\n\n      {/* The field owns a positioning context so the hint below can be anchored\n          to it. The input is taken out of flow inside it: an `<input>` keeps an\n          intrinsic 20-character width that wins inside an auto-width flex row,\n          and the field's width is a design decision, not a font metric. */}\n      <div\n        className={cn(\n          'relative flex min-h-8 w-[170px] min-w-[120px] flex-[1_1_170px] border-border',\n          // Grows into the row's leftovers below `sm`, where it shares a line\n          // with Jump. It must NOT grow from `sm` up: the shell is auto-width\n          // there, so growing fills nothing but does hand the field the\n          // picker's clamped-away max-content overflow.\n          'sm:flex-[0_1_170px] sm:border-l',\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"text\"\n          // Namespaced per identity: the browser remembers values typed for this\n          // identifier and offers them on every app that asks for it.\n          name={quickJumpFieldName(selected.identity)}\n          autoComplete=\"on\"\n          aria-label={selected.identity}\n          // Bare identity, not \"Enter <identity>\": the verb costs ~40px of a\n          // 170px field that the longest identifiers need.\n          placeholder={selected.identity}\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n          // Selecting on focus rather than on click, or a second click inside\n          // could never place a caret.\n          onFocus={(e) => e.currentTarget.select()}\n          onKeyDown={(e) => {\n            if (e.key !== 'Enter' || !href) return\n            window.open(href, '_blank', 'noopener,noreferrer')\n          }}\n          className={cn(\n            'absolute inset-0 h-full w-full bg-transparent px-3 font-mono text-sm font-medium outline-none placeholder:font-sans placeholder:text-muted-foreground',\n            // Hovering the dormant Jump lights up the field it is waiting on.\n            'transition-[box-shadow,background-color] duration-150',\n            'group-has-[.qj-dormant:hover]:bg-ring/10 group-has-[.qj-dormant:hover]:shadow-[inset_0_0_0_2px_var(--color-ring)]',\n            'group-has-[.qj-dormant:hover]:placeholder:text-foreground',\n          )}\n        />\n\n        {/* Hovering a button that does nothing is someone asking why. The answer\n            points at the FIELD, not at the button under the cursor — which is\n            why it hangs off the field's own box rather than off a hard-coded\n            picker width that stopped being true once the picker was sized to its\n            content. The field lights up at the same time.\n\n            Not `aria-hidden`: it is the dormant button's description, which is\n            also why that button no longer carries a `title` saying the same\n            thing in different words. */}\n        <p\n          id={hintId}\n          className={cn(\n            'pointer-events-none absolute top-[calc(100%+0.5rem)] left-0 z-30 m-0 flex items-center rounded-md bg-foreground px-2 py-1 text-xs font-semibold whitespace-nowrap text-background',\n            'before:absolute before:-top-[3px] before:left-[0.9rem] before:size-2 before:rotate-45 before:rounded-[1px] before:bg-foreground',\n            // `translate`, not `transform`: v4 utilities set the separate\n            // `translate` property, which a transform transition never sees.\n            '-translate-y-[3px] opacity-0 transition-[opacity,translate] duration-150',\n            'group-has-[.qj-dormant:hover]:translate-y-0 group-has-[.qj-dormant:hover]:opacity-100',\n            'group-has-[.qj-dormant:focus-visible]:translate-y-0 group-has-[.qj-dormant:focus-visible]:opacity-100',\n          )}\n        >\n          Type a {selected.identity} here first\n        </p>\n      </div>\n\n      {/* A real <button> while dormant. An <a> without href is not focusable,\n          so the whole \"press it and it tells you to type\" behaviour — and the\n          hint's :focus-visible branch — would have been mouse-only. */}\n      {href ? (\n        <a\n          href={href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          // Title, not the url: the browser already puts the url in the\n          // status bar, and some of these are 250 characters long. It doubles\n          // as the full text when the picker has ellipsised it.\n          title={`Jump to ${selected.title}`}\n          className={cn(JUMP, JUMP_FILL)}\n        >\n          Jump\n          <ExternalLink className=\"size-3.5 shrink-0\" />\n        </a>\n      ) : (\n        <button\n          type=\"button\"\n          aria-describedby={hintId}\n          onClick={() => inputRef.current?.focus()}\n          // Tinted toward the action rather than greyed: on `bg-muted` it was\n          // the picker's twin, so the row read as two dropdowns around a\n          // field and nothing in it looked raised.\n          className={cn(\n            JUMP,\n            'qj-dormant cursor-text bg-primary/12 text-muted-foreground',\n          )}\n        >\n          Jump\n          <ExternalLink className=\"size-3.5 shrink-0\" />\n        </button>\n      )}\n    </div>\n  )\n}\n"],"names":["React","value"],"mappings":"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"}

package/dist/esm/modules/appCatalog/ui/components/TierVariantsSection.js

@@ -12,6 +12,7 @@ import "tailwind-merge";
 import "next-themes";
 import "@tanstack/react-query";
 import "../../../../ui/button.js";
+import "../../../auth/AuthModalContext.js";
 import "@radix-ui/react-dialog";
 import "../../../config/GlobalConfigContext.js";
 import "../../../pluginCore/PluginManagerContext.js";

package/dist/esm/modules/appCatalog/ui/components/TierVariantsSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"TierVariantsSection.js","sources":["../../../../../../src/modules/appCatalog/ui/components/TierVariantsSection.tsx"],"sourcesContent":["import type {\n  AppAccessRequest,\n  AppApprovalMethod,\n  TierVariant,\n} from '@igstack/app-catalog-backend-core'\nimport { Bot, ExternalLinkIcon, Settings, Users } from 'lucide-react'\nimport { useState } from 'react'\nimport { MarkdownText } from './MarkdownText'\nimport { Badge } from '~/ui/badge'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '~/ui/table'\nimport { useAppCatalogContext } from '~/modules/appCatalog'\nimport { PersonOrGroupBadge } from './PersonBadge'\nimport { displayUrl } from '~/modules/appCatalog/utils/displayUrl'\n\ninterface TierVariantsSectionProps {\n  tiers: TierVariant[]\n}\n\nfunction getTierBadgeVariant(\n  tierSlug: string,\n): 'default' | 'secondary' | 'destructive' | 'outline' {\n  if (tierSlug === 'prod' || tierSlug === 'production') return 'destructive'\n  if (tierSlug === 'dev' || tierSlug === 'staging') return 'secondary'\n  if (tierSlug === 'preprod') return 'outline'\n  if (tierSlug === 'sandbox') return 'outline'\n  return 'outline'\n}\n\nfunction getTierBadgeClassName(tierSlug: string): string {\n  if (tierSlug === 'preprod')\n    return 'border-amber-400 bg-amber-100 text-amber-800 hover:bg-amber-200'\n  if (tierSlug === 'sandbox')\n    return 'border-gray-400 bg-gray-100 text-gray-700 hover:bg-gray-200'\n  return ''\n}\n\nfunction getTierDisplayLabel(tierSlug: string): string {\n  if (tierSlug === 'preprod') return 'Pre-Prod'\n  if (tierSlug === 'sandbox') return 'Sandbox'\n  if (tierSlug === 'prod' || tierSlug === 'production') return 'Prod'\n  if (tierSlug === 'dev') return 'Dev'\n  if (tierSlug === 'staging') return 'Staging'\n  return tierSlug\n}\n\nfunction getAccessIcon(type: string): React.ReactNode {\n  switch (type) {\n    case 'service':\n      return <Bot className=\"size-4 text-primary shrink-0\" />\n    case 'personTeam':\n      return <Users className=\"size-4 text-primary shrink-0\" />\n    default:\n      return <Settings className=\"size-4 text-primary shrink-0\" />\n  }\n}\n\n/** Compact inline access detail for a tier row */\nfunction TierAccessDetail({\n  accessRequest,\n  methods,\n}: {\n  accessRequest: AppAccessRequest\n  methods: AppApprovalMethod[]\n}) {\n  const [expanded, setExpanded] = useState(false)\n  const method = methods.find(\n    (m) => m.slug === accessRequest.approvalMethodSlug,\n  )\n\n  const hasExtra =\n    accessRequest.comments ||\n    accessRequest.urls?.length ||\n    accessRequest.approverSlugs?.length ||\n    accessRequest.postApprovalInstructions\n\n  return (\n    <div className=\"space-y-1\">\n      <div className=\"flex items-center gap-1.5\">\n        {method && getAccessIcon(method.type)}\n        {method?.type === 'service' && method.config.url ? (\n          <a\n            href={method.config.url}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"text-sm text-primary hover:underline inline-flex items-center gap-1\"\n          >\n            {method.displayName}\n            <ExternalLinkIcon className=\"size-3\" />\n          </a>\n        ) : (\n          <span className=\"text-sm\">\n            {method?.displayName ?? accessRequest.approvalMethodSlug}\n          </span>\n        )}\n        {hasExtra && (\n          <button\n            type=\"button\"\n            onClick={() => setExpanded(!expanded)}\n            className=\"text-xs text-muted-foreground hover:text-primary ml-1\"\n          >\n            {expanded ? 'less' : 'more...'}\n          </button>\n        )}\n      </div>\n      {expanded && (\n        <div className=\"pl-5 space-y-1.5 text-xs\">\n          {accessRequest.comments && (\n            <div className=\"text-muted-foreground prose prose-xs max-w-none\">\n              <MarkdownText>{accessRequest.comments}</MarkdownText>\n            </div>\n          )}\n          {accessRequest.urls && accessRequest.urls.length > 0 && (\n            <div className=\"flex flex-col gap-0.5\">\n              {accessRequest.urls.map((urlObj, idx) => (\n                <a\n                  key={`${urlObj.url}-${idx}`}\n                  href={urlObj.url}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  className=\"text-primary hover:underline inline-flex items-center gap-1\"\n                >\n                  {urlObj.label || displayUrl(urlObj.url)}\n                  <ExternalLinkIcon className=\"size-3\" />\n                </a>\n              ))}\n            </div>\n          )}\n          {accessRequest.approverSlugs &&\n            accessRequest.approverSlugs.length > 0 && (\n              <div className=\"flex flex-wrap gap-1\">\n                {accessRequest.approverSlugs.map((slug) => (\n                  <PersonOrGroupBadge key={slug} slug={slug} />\n                ))}\n              </div>\n            )}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport function TierVariantsSection({ tiers }: TierVariantsSectionProps) {\n  const { approvalMethods } = useAppCatalogContext()\n\n  if (tiers.length === 0) return null\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"text-sm font-medium\">Environment Tiers</div>\n      <div className=\"rounded-lg border\">\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead className=\"w-[100px]\">Tier</TableHead>\n              <TableHead>Name</TableHead>\n              <TableHead>URL</TableHead>\n              <TableHead>Access</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {tiers.map((tier) => (\n              <TableRow key={tier.tierSlug}>\n                <TableCell>\n                  <Badge\n                    variant={getTierBadgeVariant(tier.tierSlug)}\n                    className={getTierBadgeClassName(tier.tierSlug)}\n                  >\n                    {getTierDisplayLabel(tier.tierSlug)}\n                  </Badge>\n                </TableCell>\n                <TableCell className=\"font-medium\">\n                  {tier.displayName ?? tier.tierSlug}\n                </TableCell>\n                <TableCell>\n                  {tier.appUrl ? (\n                    <a\n                      href={tier.appUrl}\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      className=\"text-sm text-primary hover:underline inline-flex items-center gap-1\"\n                    >\n                      {displayUrl(tier.appUrl)}\n                      <ExternalLinkIcon className=\"size-3\" />\n                    </a>\n                  ) : (\n                    <span className=\"text-muted-foreground\">-</span>\n                  )}\n                </TableCell>\n                <TableCell>\n                  {tier.accessRequest ? (\n                    <TierAccessDetail\n                      accessRequest={tier.accessRequest}\n                      methods={approvalMethods}\n                    />\n                  ) : (\n                    <span className=\"text-muted-foreground\">Same as app</span>\n                  )}\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TierVariantsSection.js","sources":["../../../../../../src/modules/appCatalog/ui/components/TierVariantsSection.tsx"],"sourcesContent":["import type {\n  AppAccessRequest,\n  AppApprovalMethod,\n  TierVariant,\n} from '@igstack/app-catalog-backend-core'\nimport { Bot, ExternalLinkIcon, Settings, Users } from 'lucide-react'\nimport { useState } from 'react'\nimport { MarkdownText } from './MarkdownText'\nimport { Badge } from '~/ui/badge'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '~/ui/table'\nimport { useAppCatalogContext } from '~/modules/appCatalog'\nimport { PersonOrGroupBadge } from './PersonBadge'\nimport { displayUrl } from '~/modules/appCatalog/utils/displayUrl'\n\ninterface TierVariantsSectionProps {\n  tiers: TierVariant[]\n}\n\nfunction getTierBadgeVariant(\n  tierSlug: string,\n): 'default' | 'secondary' | 'destructive' | 'outline' {\n  if (tierSlug === 'prod' || tierSlug === 'production') return 'destructive'\n  if (tierSlug === 'dev' || tierSlug === 'staging') return 'secondary'\n  if (tierSlug === 'preprod') return 'outline'\n  if (tierSlug === 'sandbox') return 'outline'\n  return 'outline'\n}\n\nfunction getTierBadgeClassName(tierSlug: string): string {\n  if (tierSlug === 'preprod')\n    return 'border-amber-400 bg-amber-100 text-amber-800 hover:bg-amber-200'\n  if (tierSlug === 'sandbox')\n    return 'border-gray-400 bg-gray-100 text-gray-700 hover:bg-gray-200'\n  return ''\n}\n\nfunction getTierDisplayLabel(tierSlug: string): string {\n  if (tierSlug === 'preprod') return 'Pre-Prod'\n  if (tierSlug === 'sandbox') return 'Sandbox'\n  if (tierSlug === 'prod' || tierSlug === 'production') return 'Prod'\n  if (tierSlug === 'dev') return 'Dev'\n  if (tierSlug === 'staging') return 'Staging'\n  return tierSlug\n}\n\nfunction getAccessIcon(type: string): React.ReactNode {\n  switch (type) {\n    case 'service':\n      return <Bot className=\"size-4 text-primary shrink-0\" />\n    case 'personTeam':\n      return <Users className=\"size-4 text-primary shrink-0\" />\n    default:\n      return <Settings className=\"size-4 text-primary shrink-0\" />\n  }\n}\n\n/** Compact inline access detail for a tier row */\nfunction TierAccessDetail({\n  accessRequest,\n  methods,\n}: {\n  accessRequest: AppAccessRequest\n  methods: AppApprovalMethod[]\n}) {\n  const [expanded, setExpanded] = useState(false)\n  const method = methods.find(\n    (m) => m.slug === accessRequest.approvalMethodSlug,\n  )\n\n  const hasExtra =\n    accessRequest.comments ||\n    accessRequest.urls?.length ||\n    accessRequest.approverSlugs?.length ||\n    accessRequest.postApprovalInstructions\n\n  return (\n    <div className=\"space-y-1\">\n      <div className=\"flex items-center gap-1.5\">\n        {method && getAccessIcon(method.type)}\n        {method?.type === 'service' && method.config.url ? (\n          <a\n            href={method.config.url}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"text-sm text-primary hover:underline inline-flex items-center gap-1\"\n          >\n            {method.displayName}\n            <ExternalLinkIcon className=\"size-3\" />\n          </a>\n        ) : (\n          <span className=\"text-sm\">\n            {method?.displayName ?? accessRequest.approvalMethodSlug}\n          </span>\n        )}\n        {hasExtra && (\n          <button\n            type=\"button\"\n            onClick={() => setExpanded(!expanded)}\n            className=\"text-xs text-muted-foreground hover:text-primary ml-1\"\n          >\n            {expanded ? 'less' : 'more...'}\n          </button>\n        )}\n      </div>\n      {expanded && (\n        <div className=\"pl-5 space-y-1.5 text-xs\">\n          {accessRequest.comments && (\n            <div className=\"text-muted-foreground prose prose-xs max-w-none\">\n              <MarkdownText>{accessRequest.comments}</MarkdownText>\n            </div>\n          )}\n          {accessRequest.urls && accessRequest.urls.length > 0 && (\n            <div className=\"flex flex-col gap-0.5\">\n              {accessRequest.urls.map((urlObj, idx) => (\n                <a\n                  key={`${urlObj.url}-${idx}`}\n                  href={urlObj.url}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  className=\"text-primary hover:underline inline-flex items-center gap-1\"\n                >\n                  {urlObj.label || displayUrl(urlObj.url)}\n                  <ExternalLinkIcon className=\"size-3\" />\n                </a>\n              ))}\n            </div>\n          )}\n          {accessRequest.approverSlugs &&\n            accessRequest.approverSlugs.length > 0 && (\n              <div className=\"flex flex-wrap gap-1\">\n                {accessRequest.approverSlugs.map((slug) => (\n                  <PersonOrGroupBadge key={slug} slug={slug} />\n                ))}\n              </div>\n            )}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport function TierVariantsSection({ tiers }: TierVariantsSectionProps) {\n  const { approvalMethods } = useAppCatalogContext()\n\n  if (tiers.length === 0) return null\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"text-sm font-medium\">Environment Tiers</div>\n      <div className=\"rounded-lg border\">\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead className=\"w-[100px]\">Tier</TableHead>\n              <TableHead>Name</TableHead>\n              <TableHead>URL</TableHead>\n              <TableHead>Access</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {tiers.map((tier) => (\n              <TableRow key={tier.tierSlug}>\n                <TableCell>\n                  <Badge\n                    variant={getTierBadgeVariant(tier.tierSlug)}\n                    className={getTierBadgeClassName(tier.tierSlug)}\n                  >\n                    {getTierDisplayLabel(tier.tierSlug)}\n                  </Badge>\n                </TableCell>\n                <TableCell className=\"font-medium\">\n                  {tier.displayName ?? tier.tierSlug}\n                </TableCell>\n                <TableCell>\n                  {tier.appUrl ? (\n                    <a\n                      href={tier.appUrl}\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      className=\"text-sm text-primary hover:underline inline-flex items-center gap-1\"\n                    >\n                      {displayUrl(tier.appUrl)}\n                      <ExternalLinkIcon className=\"size-3\" />\n                    </a>\n                  ) : (\n                    <span className=\"text-muted-foreground\">-</span>\n                  )}\n                </TableCell>\n                <TableCell>\n                  {tier.accessRequest ? (\n                    <TierAccessDetail\n                      accessRequest={tier.accessRequest}\n                      methods={approvalMethods}\n                    />\n                  ) : (\n                    <span className=\"text-muted-foreground\">Same as app</span>\n                  )}\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/modules/appCatalog/ui/detail/AppDetails.js

@@ -13,6 +13,7 @@ import { useAppCatalogFilters } from "../context/AppCatalogFiltersContext.js";
 import { PersonBadge } from "../components/PersonBadge.js";
 import { useUser } from "../../../auth/AuthContext.js";
 import "@tanstack/react-query";
+import "../../../auth/AuthModalContext.js";
 import { InlineEditableField } from "../components/InlineEditableField.js";
 import { MarkdownText } from "../components/MarkdownText.js";
 import { ScreenshotGallery } from "../components/ScreenshotGallery.js";

package/dist/esm/modules/appCatalog/ui/detail/AppDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppDetails.js","sources":["../../../../../../src/modules/appCatalog/ui/detail/AppDetails.tsx"],"sourcesContent":["import type {\n  Resource,\n  SourceReference,\n} from '@igstack/app-catalog-backend-core'\nimport { useSearch } from '@tanstack/react-router'\nimport { CalendarPlus, Clock, ExternalLink, Plus, Trash2 } from 'lucide-react'\nimport React from 'react'\nimport { useHotkeys } from 'react-hotkeys-hook'\nimport { Badge } from '~/ui/badge'\nimport { Button } from '~/ui/button'\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '~/ui/accordion'\nimport { AccessRequestSection } from '../components/AccessRequestSection'\nimport { AccessPrerequisiteChain } from '../components/AccessPrerequisiteChain'\nimport { QuickJumpBar, hasQuickJumps } from '../components/QuickJumpBar'\nimport { useAppCatalogFilters } from '../context/AppCatalogFiltersContext'\nimport { PersonBadge } from '../components/PersonBadge'\nimport { useUser } from '~/modules/auth'\nimport { InlineEditableField } from '../components/InlineEditableField'\nimport { MarkdownText } from '../components/MarkdownText'\nimport { ScreenshotGallery } from '../components/ScreenshotGallery'\nimport { SourcePulse } from '../components/SourcePulse'\nimport { useUpdateApp } from '../../hooks/useUpdateApp'\nimport { useAppCatalogContext } from '../../context/AppCatalogContext'\nimport { useAppClickHistory } from '../../hooks/useAppClickHistory'\nimport { formatRelativeTime } from '../../utils/formatRelativeTime'\nimport { TierVariantsSection } from '../components/TierVariantsSection'\nimport { SubResourcesSection } from '../components/SubResourcesSection'\nimport { getChildResources } from '../../utils/resolveHelpers'\nimport { FeedbackSection } from './FeedbackSection'\nimport { displayUrl } from '~/modules/appCatalog/utils/displayUrl'\nimport { accessTabLabel } from '~/modules/appCatalog/utils/accessTabLabel'\nimport { AppDoor } from './AppDoor'\nimport { DetailTabs } from './DetailTabs'\nimport type { DetailTab } from './DetailTabs'\n\n/** Tab ids. Public — they land in `?tab=`, so renaming one breaks links. */\nconst TAB = {\n  overview: 'overview',\n  access: 'access',\n  resources: 'resources',\n  documentation: 'documentation',\n  notes: 'notes',\n} as const\n\n/** A labelled block inside a tab. One register for all of them. */\nfunction Section({\n  title,\n  hint,\n  first,\n  children,\n}: {\n  title: string\n  hint?: string\n  /** Drops the top margin for the first block in a panel. */\n  first?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <div className={first ? '' : 'mt-7'}>\n      <h3 className=\"section-label mb-1.5\">{title}</h3>\n      {hint && <p className=\"mb-2 text-xs text-muted-foreground\">{hint}</p>}\n      {children}\n    </div>\n  )\n}\n\nfunction AppScreenshot({ app }: { app: Resource }) {\n  const [imageError, setImageError] = React.useState(false)\n  const [isLoadingImage, setIsLoadingImage] = React.useState(true)\n\n  const screenshotId = app.screenshotIds?.[0]\n  if (!screenshotId) {\n    return (\n      <div className=\"w-full bg-muted/50 rounded-lg overflow-hidden flex items-center justify-center min-h-64\">\n        <div className=\"w-full h-64 bg-muted/30 flex items-center justify-center text-muted-foreground text-sm\">\n          No screenshot available\n        </div>\n      </div>\n    )\n  }\n\n  const screenshotImageUrl = `/api/screenshots/${screenshotId}?size=512`\n\n  return (\n    <div className=\"w-full flex justify-center\">\n      <div className=\"rounded-lg overflow-hidden inline-flex items-center justify-center min-h-64\">\n        {!imageError ? (\n          <img\n            src={screenshotImageUrl}\n            alt={`${app.abbreviation || app.displayName} screenshot`}\n            className=\"h-64 object-contain\"\n            onError={() => {\n              setImageError(true)\n              setIsLoadingImage(false)\n            }}\n            onLoad={() => setIsLoadingImage(false)}\n          />\n        ) : null}\n        {(imageError || isLoadingImage) && (\n          <div className=\"w-full h-64 bg-muted/30 flex items-center justify-center text-muted-foreground text-sm\">\n            {isLoadingImage\n              ? 'Loading screenshot...'\n              : 'No screenshot available'}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport function AppDetails({\n  app,\n  onAppClick,\n  onClosePanel,\n}: {\n  app: Resource\n  onAppClick?: (app: Resource) => void\n  onClosePanel: () => void\n}) {\n  const [isGalleryOpen, setIsGalleryOpen] = React.useState(false)\n  const [galleryInitialIndex, setGalleryInitialIndex] = React.useState(0)\n  /**\n   * Set by the band's \"Suggest a change\", which has to do two things the button\n   * cannot do alone: bring the notes tab forward, and open the composer inside it.\n   * Held here because the band and the panel are siblings — neither can reach the\n   * other, and routing it through the URL would put a transient intent in a\n   * shareable link.\n   *\n   * A count, not a flag: the composer closes itself on send, so asking a second\n   * time has to be distinguishable from the first ask still being set. As a\n   * boolean the second click changed nothing and the button was dead for the rest\n   * of the card's life.\n   */\n  const [composeRequests, setComposeRequests] = React.useState(0)\n\n  const { approvalMethods, resources: allResources } = useAppCatalogContext()\n  const { recordClick } = useAppClickHistory()\n  const updateApp = useUpdateApp()\n  const [draftSource, setDraftSource] = React.useState<string | null>(null)\n  const user = useUser()\n  const isAdmin = user?.isAdmin ?? false\n  const { state: filterState } = useAppCatalogFilters()\n\n  // Arriving with `?sub=` means the visitor picked one child out of a search —\n  // so the card has to open ON that child's tab. Landing on Overview and\n  // leaving them to find the tab is the bug this scenario exists to prevent.\n  const search = useSearch({ strict: false })\n  const subSlug = search.sub\n\n  const displayTags = (app.tags ?? []).filter((tag) => !tag.includes(':'))\n  const sourceUrls: string[] =\n    app.sources?.map((s) => (typeof s === 'string' ? s : s.url)) ?? []\n  const displaySources =\n    draftSource !== null ? [...sourceUrls, draftSource] : sourceUrls\n  // The list renders bare URLs (they are editable as text), so the pulse has to\n  // be looked up rather than carried alongside. Absent until the autoupdate loop\n  // has seen the source — a freshly added one simply gets no mark.\n  const pulseByUrl = React.useMemo(() => {\n    const byUrl = new Map<string, NonNullable<SourceReference['pulse']>>()\n    for (const source of app.sources ?? []) {\n      if (typeof source !== 'string' && source.pulse) {\n        byUrl.set(source.url, source.pulse)\n      }\n    }\n    return byUrl\n  }, [app.sources])\n\n  const children = React.useMemo(\n    () => getChildResources(allResources, app.slug),\n    [allResources, app.slug],\n  )\n\n  // Enter: open screenshot gallery\n  useHotkeys(\n    'enter',\n    () => {\n      const tag = document.activeElement?.tagName\n      if (\n        tag === 'BUTTON' ||\n        tag === 'A' ||\n        tag === 'INPUT' ||\n        tag === 'SELECT' ||\n        tag === 'TEXTAREA'\n      )\n        return\n\n      if (app.screenshotIds && app.screenshotIds.length > 0) {\n        setGalleryInitialIndex(0)\n        setIsGalleryOpen(true)\n      }\n    },\n    { enabled: !isGalleryOpen },\n    [app, isGalleryOpen],\n  )\n\n  // Esc: close the details panel (only when gallery is NOT open)\n  //\n  // From inside a text field too: the Quick Jump field holds the caret from the\n  // moment the card opens, so the default \"ignore form tags\" left the card with\n  // no keyboard way out. A field that wants Esc for itself stops the event —\n  // InlineEditableField does, so Esc there cancels the edit and nothing more.\n  useHotkeys(\n    'escape',\n    () => {\n      onClosePanel()\n    },\n    { enabled: !isGalleryOpen, enableOnFormTags: ['input'] },\n    [isGalleryOpen, onClosePanel],\n  )\n\n  const handleScreenshotClick = (index: number) => {\n    setGalleryInitialIndex(index)\n    setIsGalleryOpen(true)\n  }\n\n  // Find replacement app if deprecated\n  const replacementApp = app.deprecated?.replacementSlug\n    ? allResources.find((a) => a.slug === app.deprecated?.replacementSlug)\n    : null\n\n  const access = accessTabLabel(app, approvalMethods)\n\n  const hasResourcesTab = children.length > 0 || (app.tiers?.length ?? 0) > 0\n  const resourcesLabel = children.length\n    ? (app.childrenLabel ?? 'Resources')\n    : 'Environments'\n\n  const tabs: DetailTab[] = [\n    {\n      id: TAB.overview,\n      label: 'Overview',\n      render: () => (\n        <>\n          <Section title=\"Description\" first>\n            {isAdmin ? (\n              <InlineEditableField\n                value={app.description ?? ''}\n                onSave={(description) =>\n                  updateApp.mutate({ id: app.id, data: { description } })\n                }\n                multiline\n                placeholder=\"Description\"\n                className=\"min-h-[4rem] resize-y text-sm text-muted-foreground\"\n              />\n            ) : app.description ? (\n              <MarkdownText className=\"prose prose-sm max-w-none text-sm text-muted-foreground [&_p]:m-0\">\n                {app.description}\n              </MarkdownText>\n            ) : (\n              <p className=\"text-sm text-muted-foreground\">—</p>\n            )}\n          </Section>\n\n          {app.screenshotIds && app.screenshotIds.length > 0 && (\n            <Section title={`Screenshots (${app.screenshotIds.length})`}>\n              {/* A button, not a clickable div: the gallery was unreachable by\n                  keyboard, and a role + label gives it a stable handle. */}\n              <button\n                type=\"button\"\n                aria-label={`View screenshots of ${app.displayName}`}\n                className=\"block w-full cursor-pointer text-left hover:opacity-80 transition-opacity\"\n                onClick={() => handleScreenshotClick(0)}\n              >\n                <AppScreenshot app={app} />\n                {app.screenshotIds.length > 1 && (\n                  <p className=\"text-xs text-muted-foreground mt-2 text-center\">\n                    Click to view all {app.screenshotIds.length} screenshots\n                  </p>\n                )}\n              </button>\n            </Section>\n          )}\n\n          {/* Owner — who is responsible for this resource. Distinct from the\n              access approver (who decides access requests); see domain model. */}\n          {app.ownerPersonSlug && (\n            <Section title=\"Owner\" hint=\"Who is responsible for this resource\">\n              <PersonBadge slug={app.ownerPersonSlug} />\n            </Section>\n          )}\n\n          {/* Tags, minus the indexing machinery: `namespace:value` tags drive\n              grouping, faceting and placement, are about half of all tag\n              references, and say nothing about what an app is for. The colon is\n              the test. Search still matches them — only the display drops them. */}\n          {displayTags.length > 0 && (\n            <Section title=\"Tags\">\n              <div className=\"flex flex-wrap gap-2\">\n                {displayTags.map((tag) => (\n                  <Badge key={tag} variant=\"secondary\" className=\"text-xs\">\n                    {tag}\n                  </Badge>\n                ))}\n              </div>\n            </Section>\n          )}\n\n          {app.teams && app.teams.length > 0 && (\n            <Section title=\"Teams\">\n              <div className=\"flex flex-wrap gap-2\">\n                {app.teams.map((team) => (\n                  <Badge key={team} variant=\"outline\" className=\"text-xs\">\n                    {team}\n                  </Badge>\n                ))}\n              </div>\n            </Section>\n          )}\n        </>\n      ),\n    },\n    {\n      id: TAB.access,\n      label: `Access — ${access.route}`,\n      chip: access.chip,\n      render: () => (\n        <>\n          {/* Two-step access: for a nested resource, show the parent-first\n              prerequisite chain before this resource's own instructions. */}\n          <AccessPrerequisiteChain resource={app} onOpenParent={onAppClick} />\n          <AccessRequestSection app={app} approvalMethods={approvalMethods} />\n        </>\n      ),\n    },\n    ...(hasResourcesTab\n      ? [\n          {\n            id: TAB.resources,\n            label: resourcesLabel,\n            chip: children.length ? String(children.length) : undefined,\n            render: () => (\n              <>\n                {app.tiers && app.tiers.length > 0 && (\n                  <TierVariantsSection tiers={app.tiers} />\n                )}\n                {children.length > 0 && (\n                  <div className={app.tiers?.length ? 'mt-7' : ''}>\n                    {/* The active catalog search term seeds the filter, so a\n                        visitor who got here by searching something that matched\n                        a child sees that child rather than all of its siblings. */}\n                    <SubResourcesSection\n                      subResources={children}\n                      parentSlug={app.slug}\n                      initialSearch={filterState.searchValue}\n                    />\n                  </div>\n                )}\n              </>\n            ),\n          } satisfies DetailTab,\n        ]\n      : []),\n    {\n      id: TAB.documentation,\n      label: 'Documentation',\n      render: () => (\n        <>\n          {app.links && app.links.length > 0 && (\n            <Section title=\"Documentation\" first>\n              <div className=\"space-y-0.5\">\n                {app.links.map((link) => (\n                  <a\n                    key={link.url}\n                    href={link.url}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    className=\"flex items-center gap-1 text-xs text-muted-foreground hover:text-primary truncate\"\n                  >\n                    <ExternalLink className=\"size-3 shrink-0\" />\n                    {link.title || displayUrl(link.url)}\n                  </a>\n                ))}\n              </div>\n            </Section>\n          )}\n          {/* Background: why the app exists at all. Deliberately quiet — a\n              reader who came to get access has already passed everything they\n              need, and history should not compete with the description. */}\n          {app.background && (\n            <Section title=\"Background\">\n              <MarkdownText className=\"prose prose-sm text-muted-foreground max-w-none text-sm [&_p]:mt-0 [&_p]:mb-2 [&_p:last-child]:mb-0\">\n                {app.background}\n              </MarkdownText>\n            </Section>\n          )}\n\n          <Section title=\"Sources\" first={!app.background}>\n            {isAdmin ? (\n              <>\n                <ul className=\"space-y-2\">\n                  {displaySources.map((url, index) => {\n                    const isDraft =\n                      draftSource !== null && index === sourceUrls.length\n                    return (\n                      <li\n                        key={isDraft ? 'draft' : `${index}-${url}`}\n                        className=\"group flex items-center gap-2 text-xs\"\n                      >\n                        <span className=\"text-muted-foreground shrink-0 tabular-nums\">\n                          {index + 1}.\n                        </span>\n                        <InlineEditableField\n                          value={url}\n                          initialEditMode={isDraft}\n                          onCancel={\n                            isDraft ? () => setDraftSource(null) : undefined\n                          }\n                          onSave={(newUrl) => {\n                            if (isDraft) {\n                              setDraftSource(null)\n                              if (newUrl) {\n                                updateApp.mutate({\n                                  id: app.id,\n                                  data: { sources: [...sourceUrls, newUrl] },\n                                })\n                              }\n                            } else {\n                              const next = [...sourceUrls]\n                              next[index] = newUrl\n                              updateApp.mutate({\n                                id: app.id,\n                                data: { sources: next.filter(Boolean) },\n                              })\n                            }\n                          }}\n                          placeholder=\"https://...\"\n                          viewClassName=\"flex-1 min-w-0\"\n                          renderView={(val) =>\n                            val ? (\n                              <a\n                                href={val}\n                                target=\"_blank\"\n                                rel=\"noopener noreferrer\"\n                                className=\"hover:text-primary inline-flex items-center gap-1 truncate\"\n                              >\n                                {displayUrl(val)}\n                                <ExternalLink className=\"size-3 shrink-0\" />\n                              </a>\n                            ) : (\n                              <span className=\"text-muted-foreground\">—</span>\n                            )\n                          }\n                        />\n                        {!isDraft && pulseByUrl.has(url) && (\n                          <SourcePulse\n                            pulse={pulseByUrl.get(url)!}\n                            className=\"ml-auto\"\n                          />\n                        )}\n                        {!isDraft && (\n                          <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"icon-sm\"\n                            aria-label=\"Remove source\"\n                            className=\"shrink-0 text-muted-foreground hover:text-destructive\"\n                            onClick={() => {\n                              const next = sourceUrls.filter(\n                                (_, i) => i !== index,\n                              )\n                              updateApp.mutate({\n                                id: app.id,\n                                data: { sources: next },\n                              })\n                            }}\n                          >\n                            <Trash2 className=\"size-3.5\" />\n                          </Button>\n                        )}\n                      </li>\n                    )\n                  })}\n                </ul>\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"mt-2 gap-1 text-muted-foreground\"\n                  onClick={() => setDraftSource('')}\n                >\n                  <Plus className=\"size-3.5\" />\n                  Add source\n                </Button>\n              </>\n            ) : (\n              <ul className=\"space-y-2\">\n                {sourceUrls.map((url, index) => (\n                  // `group` so hovering anywhere on the row fades that source's\n                  // track in — the mark sits in a right-hand column, and row\n                  // hover is what ties the two ends of a wide row together.\n                  <li\n                    key={index}\n                    className=\"group flex items-center gap-2 text-xs\"\n                  >\n                    <span className=\"text-muted-foreground shrink-0 tabular-nums\">\n                      {index + 1}.\n                    </span>\n                    {url ? (\n                      <a\n                        href={url}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        className=\"hover:text-primary inline-flex min-w-0 items-center gap-1 truncate\"\n                      >\n                        {displayUrl(url)}\n                        <ExternalLink className=\"size-3 shrink-0\" />\n                      </a>\n                    ) : (\n                      <span className=\"text-muted-foreground\">—</span>\n                    )}\n                    {pulseByUrl.has(url) && (\n                      <SourcePulse\n                        pulse={pulseByUrl.get(url)!}\n                        className=\"ml-auto\"\n                      />\n                    )}\n                  </li>\n                ))}\n              </ul>\n            )}\n          </Section>\n\n          {/* These used to sit unlabelled in a 64px gap between two sections,\n              which is what made that gap look like a mistake. Labelled, in\n              their own block. \"Dates\" rather than \"Added / updated\" on purpose:\n              a label that repeats the first word of every line below it adds\n              nothing, and it made \"Added\"/\"Updated\" ambiguous to anything\n              matching on text — including this card's own tests. */}\n          {(app.createdAt || app.freshness?.lastCheckedAt) && (\n            <Section title=\"Dates\">\n              <div className=\"flex flex-wrap gap-x-5 gap-y-1\">\n                {app.createdAt && (\n                  <span\n                    className=\"inline-flex items-center gap-1 text-xs text-muted-foreground\"\n                    title={app.createdAt}\n                  >\n                    <CalendarPlus className=\"size-3\" />\n                    Added {formatRelativeTime(app.createdAt)}\n                  </span>\n                )}\n                {app.freshness?.lastCheckedAt && (\n                  <span\n                    className=\"inline-flex items-center gap-1 text-xs text-muted-foreground\"\n                    title={\n                      app.freshness.lastContentChangeAt\n                        ? `Content last changed ${app.freshness.lastContentChangeAt} · last checked ${app.freshness.lastCheckedAt}`\n                        : `Last checked ${app.freshness.lastCheckedAt}`\n                    }\n                  >\n                    <Clock className=\"size-3\" />\n                    {/* \"Updated\" means the content changed, not that a check\n                        ran — entries predating the field have none, so fall\n                        back. */}\n                    Updated{' '}\n                    {formatRelativeTime(\n                      app.freshness.lastContentChangeAt ??\n                        app.freshness.lastCheckedAt,\n                    )}\n                    {app.freshness.isStale && (\n                      <span className=\"italic opacity-75\">\n                        {' '}\n                        · may be out of date\n                      </span>\n                    )}\n                  </span>\n                )}\n              </div>\n            </Section>\n          )}\n\n          {/* Technical information: AI-facing fields, de-emphasized/collapsed */}\n          {(app.aiPrompt || app.aiMemory) && (\n            <Accordion type=\"single\" collapsible className=\"mt-7\">\n              <AccordionItem\n                value=\"technical-info\"\n                className=\"border rounded-lg px-4\"\n              >\n                <AccordionTrigger className=\"text-sm hover:no-underline py-3\">\n                  Technical information\n                </AccordionTrigger>\n                <AccordionContent className=\"pb-3 space-y-3\">\n                  {app.aiPrompt && (\n                    <div>\n                      <h4 className=\"section-label mb-1\">AI Prompt</h4>\n                      <p className=\"text-xs whitespace-pre-wrap\">\n                        {app.aiPrompt}\n                      </p>\n                    </div>\n                  )}\n                  {app.aiMemory && (\n                    <div>\n                      <h4 className=\"section-label mb-1\">AI Memory</h4>\n                      <p className=\"text-xs whitespace-pre-wrap\">\n                        {app.aiMemory}\n                      </p>\n                    </div>\n                  )}\n                </AccordionContent>\n              </AccordionItem>\n            </Accordion>\n          )}\n        </>\n      ),\n    },\n    {\n      id: TAB.notes,\n      label: 'Notes & requests',\n      render: () => (\n        <FeedbackSection appSlug={app.slug} openComposer={composeRequests} />\n      ),\n    },\n  ]\n\n  // The hero band: identity, the way in, and the typed-id jumps. It does NOT\n  // scroll away with a tab, so \"take me to the app\" is reachable from every one\n  // of them.\n  //\n  // Deliberately holds nothing else. An owner/teams/freshness strip was drawn\n  // and dropped: `ownerPersonSlug` is set on a tiny fraction of entries so the\n  // owner slot would almost always be empty, teams already has its own block in\n  // Overview, and on an entry with quick jumps the band had grown past 250px\n  // before any content — on exactly the apps where people most want to type an\n  // id and leave.\n  const band = (\n    <>\n      <div className=\"flex flex-wrap items-center gap-x-7 gap-y-2\">\n        <AppDoor app={app} onOpen={() => recordClick(app.slug)} />\n        {app.deprecated && (\n          <Badge\n            variant={\n              app.deprecated.type === 'discouraged'\n                ? 'secondary'\n                : 'destructive'\n            }\n          >\n            {app.deprecated.type === 'discouraged'\n              ? 'Discouraged'\n              : 'Deprecated'}\n          </Badge>\n        )}\n        {/* In the band, not at the foot of the notes panel.\n            Down there it was invisible twice over: below the fold of a panel, and\n            behind a tab nobody opens unless they already know what is in it — so\n            the one affordance the feature exists for was the hardest thing on the\n            card to find. Up here it is present on every tab, which is the whole\n            reason the band does not scroll away.\n            `mr-10` keeps it clear of the dialog's own close button at top-right. */}\n        <Button\n          type=\"button\"\n          size=\"sm\"\n          variant=\"outline\"\n          className=\"ml-auto mr-10\"\n          onClick={() => setComposeRequests((n) => n + 1)}\n        >\n          ✎ Suggest a change\n        </Button>\n      </div>\n\n      {app.nicknames && app.nicknames.length > 0 && (\n        <p className=\"mt-2.5 text-xs text-muted-foreground\">\n          Also known as {app.nicknames.join(', ')}\n        </p>\n      )}\n\n      {isAdmin && (\n        <div className=\"mt-3 flex flex-wrap items-center gap-x-6 gap-y-1\">\n          <span className=\"inline-flex items-center gap-2\">\n            <span className=\"text-xs text-muted-foreground\">Slug:</span>\n            <InlineEditableField\n              value={app.slug}\n              onSave={(slug) =>\n                updateApp.mutate({ id: app.id, data: { slug } })\n              }\n              className=\"text-sm\"\n            />\n          </span>\n          <span className=\"inline-flex items-center gap-2\">\n            <span className=\"text-xs text-muted-foreground\">URL:</span>\n            <InlineEditableField\n              value={app.appUrl ?? ''}\n              onSave={(appUrl) =>\n                updateApp.mutate({ id: app.id, data: { appUrl } })\n              }\n              placeholder=\"App URL\"\n              className=\"text-sm\"\n            />\n          </span>\n        </div>\n      )}\n\n      {hasQuickJumps(app) && (\n        <div className=\"mt-4\">\n          {/* Named, where the bare control was not: \"or go straight to a\n                  record\" says what the field is for before you reach it. */}\n          <p className=\"mb-1.5 text-xs text-muted-foreground\">\n            Or go straight to a record:\n          </p>\n          <QuickJumpBar app={app} />\n        </div>\n      )}\n\n      {/* Deprecation stays in the band, not in a tab: \"do not use this\"\n              must not be something you have to go looking for. */}\n      {app.deprecated &&\n        (() => {\n          const isDiscouraged = app.deprecated.type === 'discouraged'\n          return (\n            <div\n              className={\n                isDiscouraged\n                  ? 'mt-4 rounded-lg border border-yellow-500/50 bg-yellow-50 p-4 dark:bg-yellow-950/20'\n                  : 'mt-4 rounded-lg border border-destructive/50 bg-destructive/10 p-4'\n              }\n            >\n              <h3\n                className={\n                  isDiscouraged\n                    ? 'section-label mb-1.5 text-yellow-700 dark:text-yellow-500'\n                    : 'section-label mb-1.5 text-destructive'\n                }\n              >\n                {isDiscouraged\n                  ? 'Usage discouraged'\n                  : 'This application is deprecated'}\n              </h3>\n              <p className=\"text-sm text-muted-foreground\">\n                {app.deprecated.comment}\n              </p>\n              {replacementApp && (\n                <button\n                  type=\"button\"\n                  onClick={() => onAppClick?.(replacementApp)}\n                  className=\"mt-3 inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline\"\n                >\n                  View replacement: {replacementApp.displayName}\n                  <ExternalLink className=\"size-3\" />\n                </button>\n              )}\n            </div>\n          )\n        })()}\n    </>\n  )\n\n  return (\n    <>\n      <div className=\"flex h-full flex-col\">\n        <DetailTabs\n          tabs={tabs}\n          band={band}\n          // Cancels the dialog's own padding so the tint reaches the card's\n          // edges, then re-applies it inside.\n          bandClassName=\"-mx-6 -mt-5 px-6 pt-5 sm:-mx-8 sm:-mt-7 sm:px-8 sm:pt-7\"\n          // `?sub=` means a child was picked out of a search, so the card opens\n          // on the tab that holds it rather than making them hunt for it.\n          forcedTab={subSlug && hasResourcesTab ? TAB.resources : undefined}\n          requestTab={composeRequests > 0 ? TAB.notes : undefined}\n          requestNonce={composeRequests}\n        />\n      </div>\n\n      {/* Screenshot Gallery Dialog */}\n      <ScreenshotGallery\n        app={app}\n        screenshotIds={app.screenshotIds || []}\n        open={isGalleryOpen}\n        onOpenChange={setIsGalleryOpen}\n        initialIndex={galleryInitialIndex}\n        title={`${app.abbreviation || app.displayName} - Screenshots`}\n      />\n    </>\n  )\n}\n"],"names":["React","_a","_b"],"mappings":"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"}
+{"version":3,"file":"AppDetails.js","sources":["../../../../../../src/modules/appCatalog/ui/detail/AppDetails.tsx"],"sourcesContent":["import type {\n  Resource,\n  SourceReference,\n} from '@igstack/app-catalog-backend-core'\nimport { useSearch } from '@tanstack/react-router'\nimport { CalendarPlus, Clock, ExternalLink, Plus, Trash2 } from 'lucide-react'\nimport React from 'react'\nimport { useHotkeys } from 'react-hotkeys-hook'\nimport { Badge } from '~/ui/badge'\nimport { Button } from '~/ui/button'\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '~/ui/accordion'\nimport { AccessRequestSection } from '../components/AccessRequestSection'\nimport { AccessPrerequisiteChain } from '../components/AccessPrerequisiteChain'\nimport { QuickJumpBar, hasQuickJumps } from '../components/QuickJumpBar'\nimport { useAppCatalogFilters } from '../context/AppCatalogFiltersContext'\nimport { PersonBadge } from '../components/PersonBadge'\nimport { useUser } from '~/modules/auth'\nimport { InlineEditableField } from '../components/InlineEditableField'\nimport { MarkdownText } from '../components/MarkdownText'\nimport { ScreenshotGallery } from '../components/ScreenshotGallery'\nimport { SourcePulse } from '../components/SourcePulse'\nimport { useUpdateApp } from '../../hooks/useUpdateApp'\nimport { useAppCatalogContext } from '../../context/AppCatalogContext'\nimport { useAppClickHistory } from '../../hooks/useAppClickHistory'\nimport { formatRelativeTime } from '../../utils/formatRelativeTime'\nimport { TierVariantsSection } from '../components/TierVariantsSection'\nimport { SubResourcesSection } from '../components/SubResourcesSection'\nimport { getChildResources } from '../../utils/resolveHelpers'\nimport { FeedbackSection } from './FeedbackSection'\nimport { displayUrl } from '~/modules/appCatalog/utils/displayUrl'\nimport { accessTabLabel } from '~/modules/appCatalog/utils/accessTabLabel'\nimport { AppDoor } from './AppDoor'\nimport { DetailTabs } from './DetailTabs'\nimport type { DetailTab } from './DetailTabs'\n\n/** Tab ids. Public — they land in `?tab=`, so renaming one breaks links. */\nconst TAB = {\n  overview: 'overview',\n  access: 'access',\n  resources: 'resources',\n  documentation: 'documentation',\n  notes: 'notes',\n} as const\n\n/** A labelled block inside a tab. One register for all of them. */\nfunction Section({\n  title,\n  hint,\n  first,\n  children,\n}: {\n  title: string\n  hint?: string\n  /** Drops the top margin for the first block in a panel. */\n  first?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <div className={first ? '' : 'mt-7'}>\n      <h3 className=\"section-label mb-1.5\">{title}</h3>\n      {hint && <p className=\"mb-2 text-xs text-muted-foreground\">{hint}</p>}\n      {children}\n    </div>\n  )\n}\n\nfunction AppScreenshot({ app }: { app: Resource }) {\n  const [imageError, setImageError] = React.useState(false)\n  const [isLoadingImage, setIsLoadingImage] = React.useState(true)\n\n  const screenshotId = app.screenshotIds?.[0]\n  if (!screenshotId) {\n    return (\n      <div className=\"w-full bg-muted/50 rounded-lg overflow-hidden flex items-center justify-center min-h-64\">\n        <div className=\"w-full h-64 bg-muted/30 flex items-center justify-center text-muted-foreground text-sm\">\n          No screenshot available\n        </div>\n      </div>\n    )\n  }\n\n  const screenshotImageUrl = `/api/screenshots/${screenshotId}?size=512`\n\n  return (\n    <div className=\"w-full flex justify-center\">\n      <div className=\"rounded-lg overflow-hidden inline-flex items-center justify-center min-h-64\">\n        {!imageError ? (\n          <img\n            src={screenshotImageUrl}\n            alt={`${app.abbreviation || app.displayName} screenshot`}\n            className=\"h-64 object-contain\"\n            onError={() => {\n              setImageError(true)\n              setIsLoadingImage(false)\n            }}\n            onLoad={() => setIsLoadingImage(false)}\n          />\n        ) : null}\n        {(imageError || isLoadingImage) && (\n          <div className=\"w-full h-64 bg-muted/30 flex items-center justify-center text-muted-foreground text-sm\">\n            {isLoadingImage\n              ? 'Loading screenshot...'\n              : 'No screenshot available'}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport function AppDetails({\n  app,\n  onAppClick,\n  onClosePanel,\n}: {\n  app: Resource\n  onAppClick?: (app: Resource) => void\n  onClosePanel: () => void\n}) {\n  const [isGalleryOpen, setIsGalleryOpen] = React.useState(false)\n  const [galleryInitialIndex, setGalleryInitialIndex] = React.useState(0)\n  /**\n   * Set by the band's \"Suggest a change\", which has to do two things the button\n   * cannot do alone: bring the notes tab forward, and open the composer inside it.\n   * Held here because the band and the panel are siblings — neither can reach the\n   * other, and routing it through the URL would put a transient intent in a\n   * shareable link.\n   *\n   * A count, not a flag: the composer closes itself on send, so asking a second\n   * time has to be distinguishable from the first ask still being set. As a\n   * boolean the second click changed nothing and the button was dead for the rest\n   * of the card's life.\n   */\n  const [composeRequests, setComposeRequests] = React.useState(0)\n\n  const { approvalMethods, resources: allResources } = useAppCatalogContext()\n  const { recordClick } = useAppClickHistory()\n  const updateApp = useUpdateApp()\n  const [draftSource, setDraftSource] = React.useState<string | null>(null)\n  const user = useUser()\n  const isAdmin = user?.isAdmin ?? false\n  const { state: filterState } = useAppCatalogFilters()\n\n  // Arriving with `?sub=` means the visitor picked one child out of a search —\n  // so the card has to open ON that child's tab. Landing on Overview and\n  // leaving them to find the tab is the bug this scenario exists to prevent.\n  const search = useSearch({ strict: false })\n  const subSlug = search.sub\n\n  const displayTags = (app.tags ?? []).filter((tag) => !tag.includes(':'))\n  const sourceUrls: string[] =\n    app.sources?.map((s) => (typeof s === 'string' ? s : s.url)) ?? []\n  const displaySources =\n    draftSource !== null ? [...sourceUrls, draftSource] : sourceUrls\n  // The list renders bare URLs (they are editable as text), so the pulse has to\n  // be looked up rather than carried alongside. Absent until the autoupdate loop\n  // has seen the source — a freshly added one simply gets no mark.\n  const pulseByUrl = React.useMemo(() => {\n    const byUrl = new Map<string, NonNullable<SourceReference['pulse']>>()\n    for (const source of app.sources ?? []) {\n      if (typeof source !== 'string' && source.pulse) {\n        byUrl.set(source.url, source.pulse)\n      }\n    }\n    return byUrl\n  }, [app.sources])\n\n  const children = React.useMemo(\n    () => getChildResources(allResources, app.slug),\n    [allResources, app.slug],\n  )\n\n  // Enter: open screenshot gallery\n  useHotkeys(\n    'enter',\n    () => {\n      const tag = document.activeElement?.tagName\n      if (\n        tag === 'BUTTON' ||\n        tag === 'A' ||\n        tag === 'INPUT' ||\n        tag === 'SELECT' ||\n        tag === 'TEXTAREA'\n      )\n        return\n\n      if (app.screenshotIds && app.screenshotIds.length > 0) {\n        setGalleryInitialIndex(0)\n        setIsGalleryOpen(true)\n      }\n    },\n    { enabled: !isGalleryOpen },\n    [app, isGalleryOpen],\n  )\n\n  // Esc: close the details panel (only when gallery is NOT open)\n  //\n  // From inside a text field too: the Quick Jump field holds the caret from the\n  // moment the card opens, so the default \"ignore form tags\" left the card with\n  // no keyboard way out. A field that wants Esc for itself stops the event —\n  // InlineEditableField does, so Esc there cancels the edit and nothing more.\n  useHotkeys(\n    'escape',\n    () => {\n      onClosePanel()\n    },\n    { enabled: !isGalleryOpen, enableOnFormTags: ['input'] },\n    [isGalleryOpen, onClosePanel],\n  )\n\n  const handleScreenshotClick = (index: number) => {\n    setGalleryInitialIndex(index)\n    setIsGalleryOpen(true)\n  }\n\n  // Find replacement app if deprecated\n  const replacementApp = app.deprecated?.replacementSlug\n    ? allResources.find((a) => a.slug === app.deprecated?.replacementSlug)\n    : null\n\n  const access = accessTabLabel(app, approvalMethods)\n\n  const hasResourcesTab = children.length > 0 || (app.tiers?.length ?? 0) > 0\n  const resourcesLabel = children.length\n    ? (app.childrenLabel ?? 'Resources')\n    : 'Environments'\n\n  const tabs: DetailTab[] = [\n    {\n      id: TAB.overview,\n      label: 'Overview',\n      render: () => (\n        <>\n          <Section title=\"Description\" first>\n            {isAdmin ? (\n              <InlineEditableField\n                value={app.description ?? ''}\n                onSave={(description) =>\n                  updateApp.mutate({ id: app.id, data: { description } })\n                }\n                multiline\n                placeholder=\"Description\"\n                className=\"min-h-[4rem] resize-y text-sm text-muted-foreground\"\n              />\n            ) : app.description ? (\n              <MarkdownText className=\"prose prose-sm max-w-none text-sm text-muted-foreground [&_p]:m-0\">\n                {app.description}\n              </MarkdownText>\n            ) : (\n              <p className=\"text-sm text-muted-foreground\">—</p>\n            )}\n          </Section>\n\n          {app.screenshotIds && app.screenshotIds.length > 0 && (\n            <Section title={`Screenshots (${app.screenshotIds.length})`}>\n              {/* A button, not a clickable div: the gallery was unreachable by\n                  keyboard, and a role + label gives it a stable handle. */}\n              <button\n                type=\"button\"\n                aria-label={`View screenshots of ${app.displayName}`}\n                className=\"block w-full cursor-pointer text-left hover:opacity-80 transition-opacity\"\n                onClick={() => handleScreenshotClick(0)}\n              >\n                <AppScreenshot app={app} />\n                {app.screenshotIds.length > 1 && (\n                  <p className=\"text-xs text-muted-foreground mt-2 text-center\">\n                    Click to view all {app.screenshotIds.length} screenshots\n                  </p>\n                )}\n              </button>\n            </Section>\n          )}\n\n          {/* Owner — who is responsible for this resource. Distinct from the\n              access approver (who decides access requests); see domain model. */}\n          {app.ownerPersonSlug && (\n            <Section title=\"Owner\" hint=\"Who is responsible for this resource\">\n              <PersonBadge slug={app.ownerPersonSlug} />\n            </Section>\n          )}\n\n          {/* Tags, minus the indexing machinery: `namespace:value` tags drive\n              grouping, faceting and placement, are about half of all tag\n              references, and say nothing about what an app is for. The colon is\n              the test. Search still matches them — only the display drops them. */}\n          {displayTags.length > 0 && (\n            <Section title=\"Tags\">\n              <div className=\"flex flex-wrap gap-2\">\n                {displayTags.map((tag) => (\n                  <Badge key={tag} variant=\"secondary\" className=\"text-xs\">\n                    {tag}\n                  </Badge>\n                ))}\n              </div>\n            </Section>\n          )}\n\n          {app.teams && app.teams.length > 0 && (\n            <Section title=\"Teams\">\n              <div className=\"flex flex-wrap gap-2\">\n                {app.teams.map((team) => (\n                  <Badge key={team} variant=\"outline\" className=\"text-xs\">\n                    {team}\n                  </Badge>\n                ))}\n              </div>\n            </Section>\n          )}\n        </>\n      ),\n    },\n    {\n      id: TAB.access,\n      label: `Access — ${access.route}`,\n      chip: access.chip,\n      render: () => (\n        <>\n          {/* Two-step access: for a nested resource, show the parent-first\n              prerequisite chain before this resource's own instructions. */}\n          <AccessPrerequisiteChain resource={app} onOpenParent={onAppClick} />\n          <AccessRequestSection app={app} approvalMethods={approvalMethods} />\n        </>\n      ),\n    },\n    ...(hasResourcesTab\n      ? [\n          {\n            id: TAB.resources,\n            label: resourcesLabel,\n            chip: children.length ? String(children.length) : undefined,\n            render: () => (\n              <>\n                {app.tiers && app.tiers.length > 0 && (\n                  <TierVariantsSection tiers={app.tiers} />\n                )}\n                {children.length > 0 && (\n                  <div className={app.tiers?.length ? 'mt-7' : ''}>\n                    {/* The active catalog search term seeds the filter, so a\n                        visitor who got here by searching something that matched\n                        a child sees that child rather than all of its siblings. */}\n                    <SubResourcesSection\n                      subResources={children}\n                      parentSlug={app.slug}\n                      initialSearch={filterState.searchValue}\n                    />\n                  </div>\n                )}\n              </>\n            ),\n          } satisfies DetailTab,\n        ]\n      : []),\n    {\n      id: TAB.documentation,\n      label: 'Documentation',\n      render: () => (\n        <>\n          {app.links && app.links.length > 0 && (\n            <Section title=\"Documentation\" first>\n              <div className=\"space-y-0.5\">\n                {app.links.map((link) => (\n                  <a\n                    key={link.url}\n                    href={link.url}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    className=\"flex items-center gap-1 text-xs text-muted-foreground hover:text-primary truncate\"\n                  >\n                    <ExternalLink className=\"size-3 shrink-0\" />\n                    {link.title || displayUrl(link.url)}\n                  </a>\n                ))}\n              </div>\n            </Section>\n          )}\n          {/* Background: why the app exists at all. Deliberately quiet — a\n              reader who came to get access has already passed everything they\n              need, and history should not compete with the description. */}\n          {app.background && (\n            <Section title=\"Background\">\n              <MarkdownText className=\"prose prose-sm text-muted-foreground max-w-none text-sm [&_p]:mt-0 [&_p]:mb-2 [&_p:last-child]:mb-0\">\n                {app.background}\n              </MarkdownText>\n            </Section>\n          )}\n\n          <Section title=\"Sources\" first={!app.background}>\n            {isAdmin ? (\n              <>\n                <ul className=\"space-y-2\">\n                  {displaySources.map((url, index) => {\n                    const isDraft =\n                      draftSource !== null && index === sourceUrls.length\n                    return (\n                      <li\n                        key={isDraft ? 'draft' : `${index}-${url}`}\n                        className=\"group flex items-center gap-2 text-xs\"\n                      >\n                        <span className=\"text-muted-foreground shrink-0 tabular-nums\">\n                          {index + 1}.\n                        </span>\n                        <InlineEditableField\n                          value={url}\n                          initialEditMode={isDraft}\n                          onCancel={\n                            isDraft ? () => setDraftSource(null) : undefined\n                          }\n                          onSave={(newUrl) => {\n                            if (isDraft) {\n                              setDraftSource(null)\n                              if (newUrl) {\n                                updateApp.mutate({\n                                  id: app.id,\n                                  data: { sources: [...sourceUrls, newUrl] },\n                                })\n                              }\n                            } else {\n                              const next = [...sourceUrls]\n                              next[index] = newUrl\n                              updateApp.mutate({\n                                id: app.id,\n                                data: { sources: next.filter(Boolean) },\n                              })\n                            }\n                          }}\n                          placeholder=\"https://...\"\n                          viewClassName=\"flex-1 min-w-0\"\n                          renderView={(val) =>\n                            val ? (\n                              <a\n                                href={val}\n                                target=\"_blank\"\n                                rel=\"noopener noreferrer\"\n                                className=\"hover:text-primary inline-flex items-center gap-1 truncate\"\n                              >\n                                {displayUrl(val)}\n                                <ExternalLink className=\"size-3 shrink-0\" />\n                              </a>\n                            ) : (\n                              <span className=\"text-muted-foreground\">—</span>\n                            )\n                          }\n                        />\n                        {!isDraft && pulseByUrl.has(url) && (\n                          <SourcePulse\n                            pulse={pulseByUrl.get(url)!}\n                            className=\"ml-auto\"\n                          />\n                        )}\n                        {!isDraft && (\n                          <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"icon-sm\"\n                            aria-label=\"Remove source\"\n                            className=\"shrink-0 text-muted-foreground hover:text-destructive\"\n                            onClick={() => {\n                              const next = sourceUrls.filter(\n                                (_, i) => i !== index,\n                              )\n                              updateApp.mutate({\n                                id: app.id,\n                                data: { sources: next },\n                              })\n                            }}\n                          >\n                            <Trash2 className=\"size-3.5\" />\n                          </Button>\n                        )}\n                      </li>\n                    )\n                  })}\n                </ul>\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"mt-2 gap-1 text-muted-foreground\"\n                  onClick={() => setDraftSource('')}\n                >\n                  <Plus className=\"size-3.5\" />\n                  Add source\n                </Button>\n              </>\n            ) : (\n              <ul className=\"space-y-2\">\n                {sourceUrls.map((url, index) => (\n                  // `group` so hovering anywhere on the row fades that source's\n                  // track in — the mark sits in a right-hand column, and row\n                  // hover is what ties the two ends of a wide row together.\n                  <li\n                    key={index}\n                    className=\"group flex items-center gap-2 text-xs\"\n                  >\n                    <span className=\"text-muted-foreground shrink-0 tabular-nums\">\n                      {index + 1}.\n                    </span>\n                    {url ? (\n                      <a\n                        href={url}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        className=\"hover:text-primary inline-flex min-w-0 items-center gap-1 truncate\"\n                      >\n                        {displayUrl(url)}\n                        <ExternalLink className=\"size-3 shrink-0\" />\n                      </a>\n                    ) : (\n                      <span className=\"text-muted-foreground\">—</span>\n                    )}\n                    {pulseByUrl.has(url) && (\n                      <SourcePulse\n                        pulse={pulseByUrl.get(url)!}\n                        className=\"ml-auto\"\n                      />\n                    )}\n                  </li>\n                ))}\n              </ul>\n            )}\n          </Section>\n\n          {/* These used to sit unlabelled in a 64px gap between two sections,\n              which is what made that gap look like a mistake. Labelled, in\n              their own block. \"Dates\" rather than \"Added / updated\" on purpose:\n              a label that repeats the first word of every line below it adds\n              nothing, and it made \"Added\"/\"Updated\" ambiguous to anything\n              matching on text — including this card's own tests. */}\n          {(app.createdAt || app.freshness?.lastCheckedAt) && (\n            <Section title=\"Dates\">\n              <div className=\"flex flex-wrap gap-x-5 gap-y-1\">\n                {app.createdAt && (\n                  <span\n                    className=\"inline-flex items-center gap-1 text-xs text-muted-foreground\"\n                    title={app.createdAt}\n                  >\n                    <CalendarPlus className=\"size-3\" />\n                    Added {formatRelativeTime(app.createdAt)}\n                  </span>\n                )}\n                {app.freshness?.lastCheckedAt && (\n                  <span\n                    className=\"inline-flex items-center gap-1 text-xs text-muted-foreground\"\n                    title={\n                      app.freshness.lastContentChangeAt\n                        ? `Content last changed ${app.freshness.lastContentChangeAt} · last checked ${app.freshness.lastCheckedAt}`\n                        : `Last checked ${app.freshness.lastCheckedAt}`\n                    }\n                  >\n                    <Clock className=\"size-3\" />\n                    {/* \"Updated\" means the content changed, not that a check\n                        ran — entries predating the field have none, so fall\n                        back. */}\n                    Updated{' '}\n                    {formatRelativeTime(\n                      app.freshness.lastContentChangeAt ??\n                        app.freshness.lastCheckedAt,\n                    )}\n                    {app.freshness.isStale && (\n                      <span className=\"italic opacity-75\">\n                        {' '}\n                        · may be out of date\n                      </span>\n                    )}\n                  </span>\n                )}\n              </div>\n            </Section>\n          )}\n\n          {/* Technical information: AI-facing fields, de-emphasized/collapsed */}\n          {(app.aiPrompt || app.aiMemory) && (\n            <Accordion type=\"single\" collapsible className=\"mt-7\">\n              <AccordionItem\n                value=\"technical-info\"\n                className=\"border rounded-lg px-4\"\n              >\n                <AccordionTrigger className=\"text-sm hover:no-underline py-3\">\n                  Technical information\n                </AccordionTrigger>\n                <AccordionContent className=\"pb-3 space-y-3\">\n                  {app.aiPrompt && (\n                    <div>\n                      <h4 className=\"section-label mb-1\">AI Prompt</h4>\n                      <p className=\"text-xs whitespace-pre-wrap\">\n                        {app.aiPrompt}\n                      </p>\n                    </div>\n                  )}\n                  {app.aiMemory && (\n                    <div>\n                      <h4 className=\"section-label mb-1\">AI Memory</h4>\n                      <p className=\"text-xs whitespace-pre-wrap\">\n                        {app.aiMemory}\n                      </p>\n                    </div>\n                  )}\n                </AccordionContent>\n              </AccordionItem>\n            </Accordion>\n          )}\n        </>\n      ),\n    },\n    {\n      id: TAB.notes,\n      label: 'Notes & requests',\n      render: () => (\n        <FeedbackSection appSlug={app.slug} openComposer={composeRequests} />\n      ),\n    },\n  ]\n\n  // The hero band: identity, the way in, and the typed-id jumps. It does NOT\n  // scroll away with a tab, so \"take me to the app\" is reachable from every one\n  // of them.\n  //\n  // Deliberately holds nothing else. An owner/teams/freshness strip was drawn\n  // and dropped: `ownerPersonSlug` is set on a tiny fraction of entries so the\n  // owner slot would almost always be empty, teams already has its own block in\n  // Overview, and on an entry with quick jumps the band had grown past 250px\n  // before any content — on exactly the apps where people most want to type an\n  // id and leave.\n  const band = (\n    <>\n      <div className=\"flex flex-wrap items-center gap-x-7 gap-y-2\">\n        <AppDoor app={app} onOpen={() => recordClick(app.slug)} />\n        {app.deprecated && (\n          <Badge\n            variant={\n              app.deprecated.type === 'discouraged'\n                ? 'secondary'\n                : 'destructive'\n            }\n          >\n            {app.deprecated.type === 'discouraged'\n              ? 'Discouraged'\n              : 'Deprecated'}\n          </Badge>\n        )}\n        {/* In the band, not at the foot of the notes panel.\n            Down there it was invisible twice over: below the fold of a panel, and\n            behind a tab nobody opens unless they already know what is in it — so\n            the one affordance the feature exists for was the hardest thing on the\n            card to find. Up here it is present on every tab, which is the whole\n            reason the band does not scroll away.\n            `mr-10` keeps it clear of the dialog's own close button at top-right. */}\n        <Button\n          type=\"button\"\n          size=\"sm\"\n          variant=\"outline\"\n          className=\"ml-auto mr-10\"\n          onClick={() => setComposeRequests((n) => n + 1)}\n        >\n          ✎ Suggest a change\n        </Button>\n      </div>\n\n      {app.nicknames && app.nicknames.length > 0 && (\n        <p className=\"mt-2.5 text-xs text-muted-foreground\">\n          Also known as {app.nicknames.join(', ')}\n        </p>\n      )}\n\n      {isAdmin && (\n        <div className=\"mt-3 flex flex-wrap items-center gap-x-6 gap-y-1\">\n          <span className=\"inline-flex items-center gap-2\">\n            <span className=\"text-xs text-muted-foreground\">Slug:</span>\n            <InlineEditableField\n              value={app.slug}\n              onSave={(slug) =>\n                updateApp.mutate({ id: app.id, data: { slug } })\n              }\n              className=\"text-sm\"\n            />\n          </span>\n          <span className=\"inline-flex items-center gap-2\">\n            <span className=\"text-xs text-muted-foreground\">URL:</span>\n            <InlineEditableField\n              value={app.appUrl ?? ''}\n              onSave={(appUrl) =>\n                updateApp.mutate({ id: app.id, data: { appUrl } })\n              }\n              placeholder=\"App URL\"\n              className=\"text-sm\"\n            />\n          </span>\n        </div>\n      )}\n\n      {hasQuickJumps(app) && (\n        <div className=\"mt-4\">\n          {/* Named, where the bare control was not: \"or go straight to a\n                  record\" says what the field is for before you reach it. */}\n          <p className=\"mb-1.5 text-xs text-muted-foreground\">\n            Or go straight to a record:\n          </p>\n          <QuickJumpBar app={app} />\n        </div>\n      )}\n\n      {/* Deprecation stays in the band, not in a tab: \"do not use this\"\n              must not be something you have to go looking for. */}\n      {app.deprecated &&\n        (() => {\n          const isDiscouraged = app.deprecated.type === 'discouraged'\n          return (\n            <div\n              className={\n                isDiscouraged\n                  ? 'mt-4 rounded-lg border border-yellow-500/50 bg-yellow-50 p-4 dark:bg-yellow-950/20'\n                  : 'mt-4 rounded-lg border border-destructive/50 bg-destructive/10 p-4'\n              }\n            >\n              <h3\n                className={\n                  isDiscouraged\n                    ? 'section-label mb-1.5 text-yellow-700 dark:text-yellow-500'\n                    : 'section-label mb-1.5 text-destructive'\n                }\n              >\n                {isDiscouraged\n                  ? 'Usage discouraged'\n                  : 'This application is deprecated'}\n              </h3>\n              <p className=\"text-sm text-muted-foreground\">\n                {app.deprecated.comment}\n              </p>\n              {replacementApp && (\n                <button\n                  type=\"button\"\n                  onClick={() => onAppClick?.(replacementApp)}\n                  className=\"mt-3 inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline\"\n                >\n                  View replacement: {replacementApp.displayName}\n                  <ExternalLink className=\"size-3\" />\n                </button>\n              )}\n            </div>\n          )\n        })()}\n    </>\n  )\n\n  return (\n    <>\n      <div className=\"flex h-full flex-col\">\n        <DetailTabs\n          tabs={tabs}\n          band={band}\n          // Cancels the dialog's own padding so the tint reaches the card's\n          // edges, then re-applies it inside.\n          bandClassName=\"-mx-6 -mt-5 px-6 pt-5 sm:-mx-8 sm:-mt-7 sm:px-8 sm:pt-7\"\n          // `?sub=` means a child was picked out of a search, so the card opens\n          // on the tab that holds it rather than making them hunt for it.\n          forcedTab={subSlug && hasResourcesTab ? TAB.resources : undefined}\n          requestTab={composeRequests > 0 ? TAB.notes : undefined}\n          requestNonce={composeRequests}\n        />\n      </div>\n\n      {/* Screenshot Gallery Dialog */}\n      <ScreenshotGallery\n        app={app}\n        screenshotIds={app.screenshotIds || []}\n        open={isGalleryOpen}\n        onOpenChange={setIsGalleryOpen}\n        initialIndex={galleryInitialIndex}\n        title={`${app.abbreviation || app.displayName} - Screenshots`}\n      />\n    </>\n  )\n}\n"],"names":["React","_a","_b"],"mappings":"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"}

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

@@ -10,6 +10,7 @@ import { AppCatalogContext } from "../../../modules/appCatalog/context/AppCatalo
 import { AttributionFooter } from "../../../modules/appCatalog/ui/catalog/AttributionFooter.js";
 import { useAuth, useIsAuthenticated, useUser } from "../../../modules/auth/AuthContext.js";
 import { Button } from "../../button.js";
+import "../../../modules/auth/AuthModalContext.js";
 import { useAuthActions } from "../../../modules/auth/useAuthActions.js";
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuItem } from "../../dropdown-menu.js";
 import { Popover, PopoverTrigger, PopoverContent, PopoverClose } from "../../popover.js";

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, X } 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 { AttributionFooter } from '~/modules/appCatalog/ui/catalog/AttributionFooter'\nimport {\n  useAuth,\n  useAuthActions,\n  useIsAuthenticated,\n  useUser,\n} from '~/modules/auth'\nimport { Button } from '~/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '~/ui/dropdown-menu'\nimport {\n  Popover,\n  PopoverClose,\n  PopoverContent,\n  PopoverTrigger,\n} from '~/ui/popover'\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  return (\n    <div className=\"flex items-center justify-between gap-4 py-1\">\n      <span className=\"text-xs text-muted-foreground\">{label}</span>\n      <span className=\"text-sm font-medium text-right\">\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\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            {version.displayName}\n          </a>\n        ) : (\n          version.displayName\n        )}\n        <ShaSuffix version={version} />\n      </span>\n    </div>\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 divide-y\">\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\n/**\n * Version detail moved behind an on-demand popover (same click-to-reveal\n * pattern as PersonBadge's approver chips) instead of always-visible text —\n * keeps the header compact. Content is unchanged: same Pipeline/Core/FE\n * lines, links, and SHA suffix as before, just revealed on click.\n */\nexport function VersionPopover({ 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    <Popover>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          className=\"inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10px] font-mono leading-none text-muted-foreground hover:bg-primary/15 hover:text-primary transition-colors\"\n          aria-label=\"Show version details\"\n          title=\"Version details\"\n          data-testid=\"version-info-trigger\"\n        >\n          {versions.backend?.displayName ?? '?'}\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-72 p-0 overflow-hidden\">\n        <div className=\"flex items-center justify-between px-3 py-2 border-b bg-muted/40\">\n          <span className=\"text-sm font-semibold\">Version details</span>\n          <PopoverClose\n            className=\"rounded p-1 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors\"\n            aria-label=\"Close\"\n          >\n            <X className=\"size-3.5\" />\n          </PopoverClose>\n        </div>\n        <div className=\"px-3 py-1\">\n          <VersionDisplay versions={versions} />\n        </div>\n        <AttributionFooter variant=\"popover\" />\n      </PopoverContent>\n    </Popover>\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 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  return (\n    <div className=\"flex items-center mb-4 pb-4 gap-4 border-b\">\n      <div className=\"flex items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Link to=\"/\">\n            <AppCatalogLogo className=\"h-16 w-16\" />\n          </Link>\n          <div className=\"flex flex-col items-start\">\n            <Link to=\"/\" className=\"font-serif text-lg font-semibold\">\n              App Catalog\n            </Link>\n            {appCatalogContextMaybe?.versions && (\n              <VersionPopover versions={appCatalogContextMaybe.versions} />\n            )}\n          </div>\n        </div>\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          // No Login button: the catalog is fully browsable without signing in,\n          // so it mostly advertised a flow most visitors have no reason to\n          // enter. Auth itself is untouched -- the modal, the login route, the\n          // client and session handling all still work, so anyone who reaches\n          // the flow by URL or by calling `useAuthModal().open()` can sign in,\n          // and this branch flips to the user menu below once they do. `git\n          // revert` of the commit that removed it restores the button as-is.\n          // DEV Login stays: it is gated behind `devLoginEnabled`, so it never\n          // reaches a real deployment.\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        ) : (\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":"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"}
+{"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, X } 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 { AttributionFooter } from '~/modules/appCatalog/ui/catalog/AttributionFooter'\nimport {\n  useAuth,\n  useAuthActions,\n  useIsAuthenticated,\n  useUser,\n} from '~/modules/auth'\nimport { Button } from '~/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '~/ui/dropdown-menu'\nimport {\n  Popover,\n  PopoverClose,\n  PopoverContent,\n  PopoverTrigger,\n} from '~/ui/popover'\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  return (\n    <div className=\"flex items-center justify-between gap-4 py-1\">\n      <span className=\"text-xs text-muted-foreground\">{label}</span>\n      <span className=\"text-sm font-medium text-right\">\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\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            {version.displayName}\n          </a>\n        ) : (\n          version.displayName\n        )}\n        <ShaSuffix version={version} />\n      </span>\n    </div>\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 divide-y\">\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\n/**\n * Version detail moved behind an on-demand popover (same click-to-reveal\n * pattern as PersonBadge's approver chips) instead of always-visible text —\n * keeps the header compact. Content is unchanged: same Pipeline/Core/FE\n * lines, links, and SHA suffix as before, just revealed on click.\n */\nexport function VersionPopover({ 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    <Popover>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          className=\"inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10px] font-mono leading-none text-muted-foreground hover:bg-primary/15 hover:text-primary transition-colors\"\n          aria-label=\"Show version details\"\n          title=\"Version details\"\n          data-testid=\"version-info-trigger\"\n        >\n          {versions.backend?.displayName ?? '?'}\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-72 p-0 overflow-hidden\">\n        <div className=\"flex items-center justify-between px-3 py-2 border-b bg-muted/40\">\n          <span className=\"text-sm font-semibold\">Version details</span>\n          <PopoverClose\n            className=\"rounded p-1 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors\"\n            aria-label=\"Close\"\n          >\n            <X className=\"size-3.5\" />\n          </PopoverClose>\n        </div>\n        <div className=\"px-3 py-1\">\n          <VersionDisplay versions={versions} />\n        </div>\n        <AttributionFooter variant=\"popover\" />\n      </PopoverContent>\n    </Popover>\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 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  return (\n    <div className=\"flex items-center mb-4 pb-4 gap-4 border-b\">\n      <div className=\"flex items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Link to=\"/\">\n            <AppCatalogLogo className=\"h-16 w-16\" />\n          </Link>\n          <div className=\"flex flex-col items-start\">\n            <Link to=\"/\" className=\"font-serif text-lg font-semibold\">\n              App Catalog\n            </Link>\n            {appCatalogContextMaybe?.versions && (\n              <VersionPopover versions={appCatalogContextMaybe.versions} />\n            )}\n          </div>\n        </div>\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          // No Login button: the catalog is fully browsable without signing in,\n          // so it mostly advertised a flow most visitors have no reason to\n          // enter. Auth itself is untouched -- the modal, the login route, the\n          // client and session handling all still work, so anyone who reaches\n          // the flow by URL or by calling `useAuthModal().open()` can sign in,\n          // and this branch flips to the user menu below once they do. `git\n          // revert` of the commit that removed it restores the button as-is.\n          // DEV Login stays: it is gated behind `devLoginEnabled`, so it never\n          // reaches a real deployment.\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        ) : (\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":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igstack/app-catalog-frontend-core",
-  "version": "6.5.1",
+  "version": "6.6.0",
   "description": "Frontend core library for App Catalog",
   "homepage": "https://github.com/lislon/app-catalog",
   "repository": {
@@ -112,7 +112,7 @@
     "tailwindcss": "^4.1.7",
     "tiptap-markdown": "^0.8.0",
     "tslib": "^2.3.0",
-    "@igstack/app-catalog-shared-core": "6.5.1"
+    "@igstack/app-catalog-shared-core": "6.6.0"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.0.5",
@@ -139,7 +139,7 @@
     "vite-plugin-static-copy": "^3.1.4",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^4.1.2",
-    "@igstack/app-catalog-backend-core": "6.5.1"
+    "@igstack/app-catalog-backend-core": "6.6.0"
   },
   "peerDependencies": {
     "react": "19.1.2",
@@ -148,7 +148,7 @@
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "7cbf1fcb729e81ce7e6b582aeb15324a7cde00cb",
+  "gitHead": "ceee8a6aba702c8f4e8cc7ab59b9b8c5eb257ab5",
   "scripts": {
     "build": "vite build",
     "build:lenient": "vite build --mode lenient",

package/src/__tests__/modules/appCatalog/ui/components/AccessRequestSection.test.tsx

@@ -31,11 +31,13 @@ function appWithRoles(roles: unknown): Resource {
   } as Resource
 }
 
-// `Role.adminNotes` is provisioning-only (directory group names, SSO app, manual
-// steps) and is documented as never shown to the requester — but the roles table
-// printed it inline to anyone who could reach the page, signed out included.
+// `Role.adminNotes` carries the provisioning detail — the directory group, the
+// SSO app, the manual step. The people who grant a role read the same page as
+// the people who ask for it, so the note belongs under the description rather
+// than nowhere: for many entries it is the only written record of HOW the role
+// is actually granted.
 describe('AccessRequestSection — roles table', () => {
-  it('renders the role description and not its adminNotes', () => {
+  it('renders the role description and its adminNotes', () => {
     render(
       <AccessRequestSection
         app={appWithRoles([
@@ -50,8 +52,7 @@ describe('AccessRequestSection — roles table', () => {
     )
 
     expect(screen.getByText('Full administrative access.')).toBeInTheDocument()
-    expect(screen.queryByText(/AD Group: SomeApp_Admin/)).toBeNull()
-    expect(screen.queryByText(/^Note:/)).toBeNull()
+    expect(screen.getByText(/AD Group: SomeApp_Admin/)).toBeInTheDocument()
   })
 
   // A long role list (one real entry has 54) pushed the approval steps below
@@ -143,7 +144,9 @@ describe('AccessRequestSection — roles table', () => {
     expect(toggle).toHaveFocus()
   })
 
-  it('falls back to an em-dash when a role has no description', () => {
+  // A role whose only text is its adminNotes still gets the em-dash, so the
+  // Description column never reads as if the note were the description.
+  it('falls back to an em-dash when a role has no description, and still shows the note', () => {
     render(
       <AccessRequestSection
         app={appWithRoles([
@@ -157,7 +160,77 @@ describe('AccessRequestSection — roles table', () => {
     )
 
     expect(screen.getByText('—')).toBeInTheDocument()
-    expect(screen.queryByText(/LV 1.0 job type/)).toBeNull()
+    expect(screen.getByText(/LV 1.0 job type/)).toBeInTheDocument()
+  })
+})
+
+// The entry's own `adminNotes` arrives as `Resource.notes` and was stored,
+// synced and served while being rendered nowhere — so the one place that says
+// how access is granted (the pipeline to run, the group to grant) was invisible
+// on the very tab that is about getting access.
+describe('AccessRequestSection — the entry’s admin notes', () => {
+  const PIPELINE_NOTE =
+    'To grant access, run the account-provisioning pipeline.'
+
+  it('renders them under their own heading on a documented entry', () => {
+    render(
+      <AccessRequestSection
+        app={{
+          id: 'cloud',
+          slug: 'cloud',
+          displayName: 'Cloud Console',
+          notes: PIPELINE_NOTE,
+          accessRequest: {
+            approvalMethodSlug: 'service',
+            comments: 'Request it from the help desk.',
+          },
+        }}
+        approvalMethods={[]}
+      />,
+    )
+
+    expect(
+      screen.getByRole('heading', { name: 'Admin notes' }),
+    ).toBeInTheDocument()
+    expect(screen.getByText(PIPELINE_NOTE)).toBeInTheDocument()
+  })
+
+  // An entry can have no request route written down and still have the note.
+  // Hanging the block off `accessRequest` would drop it exactly there.
+  it('renders them on an entry with no access request at all', () => {
+    render(
+      <AccessRequestSection
+        app={{
+          id: 'ghost',
+          slug: 'ghost',
+          displayName: 'Ghost',
+          notes: PIPELINE_NOTE,
+        }}
+        approvalMethods={[]}
+      />,
+    )
+
+    expect(screen.getByText(/not documented yet/)).toBeInTheDocument()
+    expect(screen.getByText(PIPELINE_NOTE)).toBeInTheDocument()
+  })
+
+  it('renders no heading when the entry has no notes', () => {
+    render(
+      <AccessRequestSection
+        app={{
+          id: 'plain',
+          slug: 'plain',
+          displayName: 'Plain',
+          accessRequest: {
+            approvalMethodSlug: 'service',
+            comments: 'Request it from the help desk.',
+          },
+        }}
+        approvalMethods={[]}
+      />,
+    )
+
+    expect(screen.queryByRole('heading', { name: 'Admin notes' })).toBeNull()
   })
 })
 

package/src/modules/appCatalog/ui/catalog/AppDetailPanel.tsx

@@ -119,7 +119,10 @@ export function AppDetailPanel({
         // Centred on open, then held — see the pin effect above. `my-auto` is
         // deliberately absent: it re-centres on EVERY height change, which is the
         // layout-shift bug.
-        className="relative w-full max-w-[min(1120px,94vw)] rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200 outline-none"
+        // `overflow-hidden` belongs on the rounded box: the scrolling child
+        // below carries the band's tint to its own square corners and paints
+        // them over this radius, so the card's top corners read as cut off.
+        className="relative w-full max-w-[min(1120px,94vw)] overflow-hidden rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200 outline-none"
       >
         <button
           type="button"

package/src/modules/appCatalog/ui/components/AccessRequestSection.tsx

@@ -89,10 +89,17 @@ function RolesTable({
                 <TableCell className="font-medium whitespace-nowrap">
                   {role.displayName}
                 </TableCell>
-                {/* `adminNotes` is provisioning-only and never shown to
-                    the requester — only `description` belongs here. */}
+                {/* `adminNotes` is the provisioning detail — the directory
+                    group, the SSO app, the manual step. It reads as a note
+                    under the description because the person granting the role
+                    and the person asking for it read the same page. */}
                 <TableCell className="text-sm text-muted-foreground">
                   {role.description || '—'}
+                  {role.adminNotes && (
+                    <div className="mt-1 text-xs italic text-muted-foreground/80">
+                      Note: {role.adminNotes}
+                    </div>
+                  )}
                 </TableCell>
               </TableRow>
             ))}
@@ -228,6 +235,22 @@ const UNDOCUMENTED_WITH_CONTACT =
 const UNDOCUMENTED_WITHOUT_CONTACT =
   'Access process not documented yet, and no owner is listed for this app.'
 
+/**
+ * The entry's own `adminNotes`, served as `Resource.notes`: the provisioning
+ * route an approver follows — the pipeline to run, the group to grant. It is
+ * about the whole request rather than one role, so it gets its own block.
+ */
+function AdminNotes({ notes }: { notes: string }) {
+  return (
+    <div>
+      <h4 className="mb-2 text-sm font-medium">Admin notes</h4>
+      <div className="text-sm text-muted-foreground prose prose-sm max-w-none">
+        <MarkdownText>{notes}</MarkdownText>
+      </div>
+    </div>
+  )
+}
+
 /**
  * The frame every access state renders into, including the empty one — an
  * entry with no access data still gets the heading, because a missing box
@@ -307,6 +330,10 @@ export function AccessRequestSection({
         <p className="text-sm text-muted-foreground">
           {UNDOCUMENTED_WITHOUT_CONTACT}
         </p>
+        {/* No request route written down, but a provisioning note still is:
+            that note is then the only thing on the page that says how the
+            access gets granted, so it cannot hang off `accessRequest`. */}
+        {app.notes && <AdminNotes notes={app.notes} />}
       </AccessBox>
     )
   }
@@ -421,6 +448,10 @@ export function AccessRequestSection({
         <RolesTable roles={accessRequest.roles} />
       )}
 
+      {/* After the roles, because the groups and pipelines it names are what
+          the roles above are granted through. */}
+      {app.notes && <AdminNotes notes={app.notes} />}
+
       {/* Approvers */}
       {accessRequest.approverSlugs &&
         accessRequest.approverSlugs.length > 0 && (

package/src/modules/appCatalog/ui/components/QuickJumpBar.tsx

@@ -202,7 +202,10 @@ export function QuickJumpBar({ app }: { app: Resource }) {
         // too, and a shell that stays unlit for two of its three ends reads as
         // if tabbing had left the control.
         'has-[:focus-visible]:border-ring has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-ring/25',
-        'sm:w-auto',
+        // `w-fit`, not `w-auto`: the row is a block-level flex box on its own
+        // line, so `auto` stretches it across the card and leaves the card's
+        // own white after Jump. Only `fit-content` shrink-wraps it.
+        'sm:w-fit',
       )}
     >
       {jumps.length > 1 ? (