@igstack/app-catalog-frontend-core 6.2.3-alpha-20260928205740 → 6.2.3-alpha-20260928222933

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

@@ -13,10 +13,11 @@ function AppDetailPanel({
 }) {
   const { approvalMethods } = useAppCatalogContext();
   const dialogRef = useRef(null);
+  const shownSlug = (subResource == null ? void 0 : subResource.slug) ?? app.slug;
   useEffect(() => {
     const dialog = dialogRef.current;
     if (dialog && !dialog.contains(document.activeElement)) dialog.focus();
-  }, []);
+  }, [shownSlug]);
   return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 sm:p-6 md:p-10", children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -47,22 +48,29 @@ function AppDetailPanel({
               children: /* @__PURE__ */ jsx(X, { className: "size-4" })
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "max-h-[85vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-7", children: subResource ? /* @__PURE__ */ jsx(
-            SubResourceDetailPanel,
-            {
-              subResource,
-              parent: app,
-              approvalMethods,
-              onBack: onBackToParent ?? onClose
-            }
-          ) : /* @__PURE__ */ jsx(
-            AppDetails,
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              app,
-              onAppClick,
-              onClosePanel: onClose
-            }
-          ) })
+              className: "max-h-[85vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-7",
+              children: subResource ? /* @__PURE__ */ jsx(
+                SubResourceDetailPanel,
+                {
+                  subResource,
+                  parent: app,
+                  approvalMethods,
+                  onBack: onBackToParent ?? onClose
+                }
+              ) : /* @__PURE__ */ jsx(
+                AppDetails,
+                {
+                  app,
+                  onAppClick,
+                  onClosePanel: onClose
+                }
+              )
+            },
+            shownSlug
+          )
         ]
       }
     )

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, 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  // 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  useEffect(() => {\n    const dialog = dialogRef.current\n    if (dialog && !dialog.contains(document.activeElement)) dialog.focus()\n  }, [])\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        className=\"relative w-full max-w-[min(1120px,94vw)] my-auto 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        <div className=\"max-h-[85vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-7\">\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;AAQ7C,YAAU,MAAM;AACd,UAAM,SAAS,UAAU;AACzB,QAAI,UAAU,CAAC,OAAO,SAAS,SAAS,aAAa,UAAU,MAAA;AAAA,EACjE,GAAG,CAAA,CAAE;AAEL,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,QACV,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,UAExB,oBAAC,OAAA,EAAI,WAAU,0DACZ,UAAA,cACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,QAAQ;AAAA,cACR;AAAA,cACA,QAAQ,kBAAkB;AAAA,YAAA;AAAA,UAAA,IAG5B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,cAAc;AAAA,YAAA;AAAA,UAAA,EAChB,CAEJ;AAAA,QAAA;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, 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  // 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        className=\"relative w-full max-w-[min(1120px,94vw)] my-auto 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;AAc7C,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,QACV,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igstack/app-catalog-frontend-core",
-  "version": "6.2.3-alpha-20260928205740",
+  "version": "6.2.3-alpha-20260928222933",
   "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.2.3-alpha-20260928205740"
+    "@igstack/app-catalog-shared-core": "6.2.3-alpha-20260928222933"
   },
   "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.2.3-alpha-20260928205740"
+    "@igstack/app-catalog-backend-core": "6.2.3-alpha-20260928222933"
   },
   "peerDependencies": {
     "react": "19.1.2",
@@ -148,7 +148,7 @@
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "4d92d5f80aa5a34fa5082f4208e35c1dff0325f1",
+  "gitHead": "746cb8b8ea315692017815bdc6de92738f70f6b0",
   "scripts": {
     "build": "vite build",
     "build:lenient": "vite build --mode lenient",

package/src/__tests__/modules/appCatalog/ui/catalog/AppDetailPanel.appSwitch.test.tsx

@@ -0,0 +1,163 @@
+import type { Resource } from '@igstack/app-catalog-backend-core'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+
+// The panel drags the whole detail data layer in; none of it decides whether
+// per-app state resets, so the hooks and the fetching children are stubbed --
+// but AppDetails itself is REAL, because the chain under test is
+// AppDetailPanel -> AppDetails -> AccessRequestSection -> the roles table.
+vi.mock('@tanstack/react-router', () => ({
+  useSearch: vi.fn(() => ({})),
+  useNavigate: vi.fn(() => vi.fn()),
+  useRouter: vi.fn(() => ({
+    state: { location: { pathname: '/', search: {} } },
+  })),
+  Link: ({ children, ...rest }: { children?: React.ReactNode }) => (
+    <a {...rest}>{children}</a>
+  ),
+}))
+vi.mock('~/modules/appCatalog/context/AppCatalogContext', () => ({
+  useAppCatalogContext: vi.fn(() => ({ approvalMethods: [], resources: [] })),
+}))
+vi.mock('~/modules/appCatalog/hooks/useAppClickHistory', () => ({
+  useAppClickHistory: vi.fn(() => ({ recordClick: vi.fn() })),
+}))
+vi.mock('~/modules/appCatalog/hooks/useUpdateApp', () => ({
+  useUpdateApp: vi.fn(() => ({ mutate: vi.fn() })),
+}))
+vi.mock('~/modules/appCatalog/ui/context/AppCatalogFiltersContext', () => ({
+  useAppCatalogFilters: vi.fn(() => ({
+    state: { searchValue: '' },
+    actions: {},
+  })),
+}))
+vi.mock('~/modules/auth', () => ({ useUser: vi.fn(() => null) }))
+vi.mock('~/modules/appCatalog/ui/detail/CommentsSection', () => ({
+  CommentsSection: () => <div />,
+}))
+
+const { AppDetailPanel } =
+  await import('~/modules/appCatalog/ui/catalog/AppDetailPanel')
+
+function appWithRoles(slug: string, count: number): Resource {
+  return {
+    id: slug,
+    slug,
+    displayName: slug,
+    description: `${slug} description.`,
+    accessRequest: {
+      approvalMethodSlug: 'service',
+      roles: Array.from({ length: count }, (_, i) => ({
+        displayName: `${slug} role ${i + 1}`,
+      })),
+    },
+  }
+}
+
+function roleRowCount() {
+  return screen
+    .getByRole('table')
+    .querySelector('tbody')
+    ?.querySelectorAll('tr').length
+}
+
+// Two flows reach a different app without closing the card: "View replacement"
+// on a deprecated entry, and an access prerequisite's parent. Both swap the
+// `app` prop, and nothing in the chain down to the roles table was keyed by it,
+// so the table arrived at the new app still expanded -- pushing that app's
+// approvers and post-approval steps below the fold, which is exactly what
+// truncating at five rows exists to prevent.
+describe('AppDetailPanel — navigating from one app to another', () => {
+  it("collapses the new app's roles table", () => {
+    const { rerender } = render(
+      <AppDetailPanel app={appWithRoles('labvantage', 8)} onClose={vi.fn()} />,
+    )
+
+    fireEvent.click(
+      screen.getByRole('button', { name: /Show all \(8\) roles/ }),
+    )
+    expect(
+      screen.getByRole('button', { name: 'Show fewer roles' }),
+    ).toBeInTheDocument()
+
+    rerender(
+      <AppDetailPanel app={appWithRoles('alation', 7)} onClose={vi.fn()} />,
+    )
+
+    const toggle = screen.getByRole('button', { name: /Show all \(7\) roles/ })
+    expect(toggle).toHaveAttribute('aria-expanded', 'false')
+    // 5 roles + the expand row.
+    expect(roleRowCount()).toBe(6)
+  })
+
+  // The other half of the fix: a key that changes on anything but the resource
+  // would throw the reader's own expansion away mid-read. Re-rendering the same
+  // app must leave the table exactly as they left it.
+  it('keeps the expansion when the same app re-renders', () => {
+    const { rerender } = render(
+      <AppDetailPanel app={appWithRoles('labvantage', 8)} onClose={vi.fn()} />,
+    )
+
+    fireEvent.click(
+      screen.getByRole('button', { name: /Show all \(8\) roles/ }),
+    )
+    // A fresh object for the same app, which is what a refetch hands down: an
+    // identity-based key would throw the reader's own expansion away here.
+    rerender(
+      <AppDetailPanel app={appWithRoles('labvantage', 8)} onClose={vi.fn()} />,
+    )
+
+    expect(
+      screen.getByRole('button', { name: 'Show fewer roles' }),
+    ).toHaveAttribute('aria-expanded', 'true')
+    // 8 roles + the collapse row.
+    expect(roleRowCount()).toBe(9)
+  })
+})
+
+// The card body remounts, the dialog around it must not: keying the dialog too
+// would restart its open animation and re-run its mount-focus effect on every
+// in-card navigation.
+describe('AppDetailPanel — what the remount leaves alone', () => {
+  it('keeps the same dialog element across an app switch', () => {
+    const { rerender } = render(
+      <AppDetailPanel app={appWithRoles('labvantage', 8)} onClose={vi.fn()} />,
+    )
+    const dialog = screen.getByRole('dialog')
+
+    rerender(
+      <AppDetailPanel app={appWithRoles('alation', 7)} onClose={vi.fn()} />,
+    )
+
+    expect(screen.getByRole('dialog')).toBe(dialog)
+  })
+})
+
+// The navigation destroys whatever was focused inside the card, and the card
+// has no focus trap -- so a caret left on <body> means the next Tab walks the
+// catalog grid behind the scrim instead of the card in front of it.
+describe('AppDetailPanel — focus after an app switch', () => {
+  it('takes the caret back into the card', () => {
+    const { rerender } = render(
+      <AppDetailPanel app={appWithRoles('labvantage', 8)} onClose={vi.fn()} />,
+    )
+    // Stands in for the control that was activated to navigate ("View
+    // replacement", a prerequisite's parent): focused, and inside the body
+    // that is about to be replaced.
+    const toggle = screen.getByRole('button', {
+      name: /Show all \(8\) roles/,
+    })
+    toggle.focus()
+    expect(toggle).toHaveFocus()
+
+    rerender(
+      <AppDetailPanel app={appWithRoles('alation', 7)} onClose={vi.fn()} />,
+    )
+
+    expect(document.activeElement).not.toBe(document.body)
+    expect(screen.getByRole('dialog')).toContainElement(
+      document.activeElement as HTMLElement,
+    )
+  })
+})

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

@@ -44,10 +44,17 @@ export function AppDetailPanel({
   // Unless something inside already took the caret — the Quick Jump field does,
   // and it has the better claim: a child's effect runs before its parent's, so
   // without this guard the card would take focus straight back off it.
+  //
+  // Runs again whenever the card navigates to another resource, keyed the same
+  // way the body below is: that navigation destroys whatever was focused (the
+  // "View replacement" button, a prerequisite's parent), and without this the
+  // caret would land on <body> — where the next Tab walks the catalog grid
+  // behind the scrim, since the card has no focus trap.
+  const shownSlug = subResource?.slug ?? app.slug
   useEffect(() => {
     const dialog = dialogRef.current
     if (dialog && !dialog.contains(document.activeElement)) dialog.focus()
-  }, [])
+  }, [shownSlug])
 
   return (
     <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 sm:p-6 md:p-10">
@@ -78,7 +85,21 @@ export function AppDetailPanel({
         >
           <X className="size-4" />
         </button>
-        <div className="max-h-[85vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-7">
+        {/* Keyed by the resource on screen, so the body remounts when the card
+            navigates from one app to another ("View replacement", an access
+            prerequisite's parent) instead of updating in place. Everything
+            per-app inside it is component state with no reset of its own — the
+            roles table's expansion, the icon/screenshot error flags, a draft
+            source edit — and it used to arrive at the next app still carrying
+            the previous one's, plus the previous scroll offset.
+
+            The key is here and not on the outer dialog on purpose: that one
+            would restart the open animation and re-run the mount-focus effect
+            on every in-card navigation. */}
+        <div
+          key={shownSlug}
+          className="max-h-[85vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-7"
+        >
           {subResource ? (
             <SubResourceDetailPanel
               subResource={subResource}