@igstack/app-catalog-frontend-core 0.14.0 → 0.15.0

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

@@ -95,10 +95,17 @@ function AccessRequestSection({
     accessRequest.requestPrompt || accessRequest.comments
   );
   const isUndocumented = (approvalMethod == null ? void 0 : approvalMethod.type) === "unknown" || (approvalMethod == null ? void 0 : approvalMethod.type) === "custom" && !hasWrittenSteps;
+  const isTwoStep = Boolean(
+    hasWrittenSteps && accessRequest.postApprovalInstructions
+  );
   return /* @__PURE__ */ jsxs("div", { className: "mt-6 rounded-lg border-[1.5px] border-primary/40 bg-primary/[0.03] p-4 space-y-4", children: [
     /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: "How to get access" }),
     isOpen && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-primary", children: "✓ Open to everyone — no request needed. Just open it." }),
     isUndocumented && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Access process not documented yet — contact the owner below to find out." }),
+    isTwoStep && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-primary bg-primary/10 rounded-full px-2.5 py-0.5", children: "Step 1" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Request access" })
+    ] }),
     approvalMethod && approvalMethod.type !== "custom" && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: approvalMethod.type === "service" && approvalMethod.config.url ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "a",
@@ -183,17 +190,29 @@ function AccessRequestSection({
         `${urlObj.url}-${idx}`
       )) })
     ] }),
-    accessRequest.postApprovalInstructions && /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, children: /* @__PURE__ */ jsxs(
-      AccordionItem,
-      {
-        value: "post-approval",
-        className: "border rounded-lg px-4",
-        children: [
-          /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-sm hover:no-underline py-3", children: "Post-Approval Instructions" }),
-          /* @__PURE__ */ jsx(AccordionContent, { className: "pb-3", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground prose prose-sm max-w-none", children: /* @__PURE__ */ jsx(ReactMarkdown, { components: { a: MarkdownLink }, children: accessRequest.postApprovalInstructions }) }) })
-        ]
-      }
-    ) })
+    accessRequest.postApprovalInstructions && (isTwoStep ? (
+      // Two-step apps: show Step 2 prominently, always expanded
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-primary bg-primary/10 rounded-full px-2.5 py-0.5", children: "Step 2" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "After approval" })
+        ] }),
+        /* @__PURE__ */ jsx("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", children: /* @__PURE__ */ jsx(ReactMarkdown, { components: { a: MarkdownLink }, children: accessRequest.postApprovalInstructions }) })
+      ] })
+    ) : (
+      // Single-step apps: keep collapsible accordion (secondary info)
+      /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, children: /* @__PURE__ */ jsxs(
+        AccordionItem,
+        {
+          value: "post-approval",
+          className: "border rounded-lg px-4",
+          children: [
+            /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-sm hover:no-underline py-3", children: "Post-Approval Instructions" }),
+            /* @__PURE__ */ jsx(AccordionContent, { className: "pb-3", children: /* @__PURE__ */ jsx("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", children: /* @__PURE__ */ jsx(ReactMarkdown, { components: { a: MarkdownLink }, children: accessRequest.postApprovalInstructions }) }) })
+          ]
+        }
+      ) })
+    ))
   ] });
 }
 export {

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  AppApprovalMethod,\n  Resource,\n} from '@igstack/app-catalog-backend-core'\nimport { Bot, Check, Copy, ExternalLink, Settings, Users } from 'lucide-react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport ReactMarkdown from 'react-markdown'\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 { MarkdownLink } from './MarkdownText'\nimport { PersonBadge } 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/**\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\nexport function AccessRequestSection({\n  app,\n  approvalMethods,\n}: AccessRequestSectionProps) {\n  const { copiedId, copyToClipboard } = useCopyToClipboard()\n  const accessRequest = app.accessRequest\n  const approvalMethod = approvalMethods.find(\n    (m) => m.slug === accessRequest?.approvalMethodSlug,\n  )\n\n  const handleCopyPrompt = useCallback(() => {\n    if (accessRequest?.requestPrompt) {\n      copyToClipboard(accessRequest.requestPrompt, 'prompt')\n    }\n  }, [accessRequest?.requestPrompt, copyToClipboard])\n\n  // Early return if no access request\n  if (!accessRequest) return null\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\n  return (\n    <div className=\"mt-6 rounded-lg border-[1.5px] border-primary/40 bg-primary/[0.03] p-4 space-y-4\">\n      <h3 className=\"text-sm font-semibold text-foreground\">\n        How to get access\n      </h3>\n\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          Access process not documented yet — contact the owner below to find\n          out.\n        </p>\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            <ReactMarkdown components={{ a: MarkdownLink }}>\n              {accessRequest.requestPrompt}\n            </ReactMarkdown>\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          <ReactMarkdown components={{ a: MarkdownLink }}>\n            {accessRequest.comments}\n          </ReactMarkdown>\n        </div>\n      )}\n\n      {/* Roles Table */}\n      {accessRequest.roles && accessRequest.roles.length > 0 && (\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                {accessRequest.roles.map((role, idx) => (\n                  <TableRow key={`${role.displayName}-${idx}`}>\n                    <TableCell className=\"font-medium whitespace-nowrap\">\n                      {role.displayName}\n                    </TableCell>\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              </TableBody>\n            </Table>\n          </div>\n        </div>\n      )}\n\n      {/* Approvers */}\n      {accessRequest.approverPersonSlugs &&\n        accessRequest.approverPersonSlugs.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.approverPersonSlugs.map((slug) => (\n                <PersonBadge key={slug} slug={slug} />\n              ))}\n            </div>\n          </div>\n        )}\n\n      {/* Documentation URLs */}\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\n      {/* Post-Approval Instructions - Collapsible (secondary info) */}\n      {accessRequest.postApprovalInstructions && (\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\">\n                <ReactMarkdown components={{ a: MarkdownLink }}>\n                  {accessRequest.postApprovalInstructions}\n                </ReactMarkdown>\n              </div>\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      )}\n    </div>\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  AppApprovalMethod,\n  Resource,\n} from '@igstack/app-catalog-backend-core'\nimport { Bot, Check, Copy, ExternalLink, Settings, Users } from 'lucide-react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport ReactMarkdown from 'react-markdown'\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 { MarkdownLink } from './MarkdownText'\nimport { PersonBadge } 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/**\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\nexport function AccessRequestSection({\n  app,\n  approvalMethods,\n}: AccessRequestSectionProps) {\n  const { copiedId, copyToClipboard } = useCopyToClipboard()\n  const accessRequest = app.accessRequest\n  const approvalMethod = approvalMethods.find(\n    (m) => m.slug === accessRequest?.approvalMethodSlug,\n  )\n\n  const handleCopyPrompt = useCallback(() => {\n    if (accessRequest?.requestPrompt) {\n      copyToClipboard(accessRequest.requestPrompt, 'prompt')\n    }\n  }, [accessRequest?.requestPrompt, copyToClipboard])\n\n  // Early return if no access request\n  if (!accessRequest) return null\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  // 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    <div className=\"mt-6 rounded-lg border-[1.5px] border-primary/40 bg-primary/[0.03] p-4 space-y-4\">\n      <h3 className=\"text-sm font-semibold text-foreground\">\n        How to get access\n      </h3>\n\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          Access process not documented yet — contact the owner below to find\n          out.\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            <ReactMarkdown components={{ a: MarkdownLink }}>\n              {accessRequest.requestPrompt}\n            </ReactMarkdown>\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          <ReactMarkdown components={{ a: MarkdownLink }}>\n            {accessRequest.comments}\n          </ReactMarkdown>\n        </div>\n      )}\n\n      {/* Roles Table */}\n      {accessRequest.roles && accessRequest.roles.length > 0 && (\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                {accessRequest.roles.map((role, idx) => (\n                  <TableRow key={`${role.displayName}-${idx}`}>\n                    <TableCell className=\"font-medium whitespace-nowrap\">\n                      {role.displayName}\n                    </TableCell>\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              </TableBody>\n            </Table>\n          </div>\n        </div>\n      )}\n\n      {/* Approvers */}\n      {accessRequest.approverPersonSlugs &&\n        accessRequest.approverPersonSlugs.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.approverPersonSlugs.map((slug) => (\n                <PersonBadge key={slug} slug={slug} />\n              ))}\n            </div>\n          </div>\n        )}\n\n      {/* Documentation URLs */}\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\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              <ReactMarkdown components={{ a: MarkdownLink }}>\n                {accessRequest.postApprovalInstructions}\n              </ReactMarkdown>\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                  <ReactMarkdown components={{ a: MarkdownLink }}>\n                    {accessRequest.postApprovalInstructions}\n                  </ReactMarkdown>\n                </div>\n              </AccordionContent>\n            </AccordionItem>\n          </Accordion>\n        ))}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

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

@@ -29,6 +29,7 @@ function ScreenshotGallery({
       className: "h-[85vh] w-full max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] md:max-w-[calc(100vw-4rem)] p-0 overflow-hidden",
       showCloseButton: true,
       onEscapeKeyDown: (e) => {
+        e.stopPropagation();
         if (isFullscreenRef.current) {
           e.preventDefault();
         }

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

@@ -1 +1 @@
-{"version":3,"file":"ScreenshotGallery.js","sources":["../../../../../../src/modules/appCatalog/ui/components/ScreenshotGallery.tsx"],"sourcesContent":["import { useMemo, useRef } from 'react'\n\nimport type { Resource } from '@igstack/app-catalog-backend-core'\n\nimport { Gallery } from '~/modules/gallery/Gallery'\nimport type { GalleryImage } from '~/modules/gallery/Gallery'\nimport { Dialog, DialogContent, DialogTitle } from '~/ui/dialog'\nimport { VisuallyHidden } from '~/ui/visually-hidden'\n\nexport interface ScreenshotGalleryProps {\n  app: Resource\n  screenshotIds: string[]\n  initialIndex?: number\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  title?: string\n}\n\nexport function ScreenshotGallery({\n  app,\n  screenshotIds,\n  initialIndex = 0,\n  open,\n  onOpenChange,\n  title,\n}: ScreenshotGalleryProps) {\n  // Track whether Gallery is in fullscreen — if so, block Radix from closing on Escape\n  const isFullscreenRef = useRef(false)\n\n  // Transform screenshot IDs to full URLs\n  const images: GalleryImage[] = useMemo(\n    () =>\n      screenshotIds.map((id) => ({\n        url: `/api/screenshots/${id}`,\n        alt: `${app.abbreviation || app.displayName} screenshot`,\n      })),\n    [screenshotIds, app.abbreviation, app.displayName],\n  )\n\n  // Don't render if no screenshots\n  if (screenshotIds.length === 0) {\n    return null\n  }\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        aria-describedby={undefined}\n        className=\"h-[85vh] w-full max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] md:max-w-[calc(100vw-4rem)] p-0 overflow-hidden\"\n        showCloseButton={true}\n        onEscapeKeyDown={(e) => {\n          // If Gallery is in fullscreen, its capture listener already handled Escape.\n          // Prevent Radix from also closing the dialog on the same event.\n          if (isFullscreenRef.current) {\n            e.preventDefault()\n          }\n        }}\n      >\n        <VisuallyHidden>\n          <DialogTitle>\n            {title || `${app.abbreviation || app.displayName} screenshots`}\n          </DialogTitle>\n        </VisuallyHidden>\n        <Gallery\n          images={images}\n          initialIndex={initialIndex}\n          title={title}\n          onFullscreenChange={(fs) => {\n            isFullscreenRef.current = fs\n          }}\n        />\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],"names":[],"mappings":";;;;;AAkBO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AAEzB,QAAM,kBAAkB,OAAO,KAAK;AAGpC,QAAM,SAAyB;AAAA,IAC7B,MACE,cAAc,IAAI,CAAC,QAAQ;AAAA,MACzB,KAAK,oBAAoB,EAAE;AAAA,MAC3B,KAAK,GAAG,IAAI,gBAAgB,IAAI,WAAW;AAAA,IAAA,EAC3C;AAAA,IACJ,CAAC,eAAe,IAAI,cAAc,IAAI,WAAW;AAAA,EAAA;AAInD,MAAI,cAAc,WAAW,GAAG;AAC9B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,QAAA,EAAO,MAAY,cAClB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,oBAAkB;AAAA,MAClB,WAAU;AAAA,MACV,iBAAiB;AAAA,MACjB,iBAAiB,CAAC,MAAM;AAGtB,YAAI,gBAAgB,SAAS;AAC3B,YAAE,eAAA;AAAA,QACJ;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAA,oBAAC,gBAAA,EACC,UAAA,oBAAC,aAAA,EACE,UAAA,SAAS,GAAG,IAAI,gBAAgB,IAAI,WAAW,eAAA,CAClD,GACF;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,oBAAoB,CAAC,OAAO;AAC1B,8BAAgB,UAAU;AAAA,YAC5B;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"ScreenshotGallery.js","sources":["../../../../../../src/modules/appCatalog/ui/components/ScreenshotGallery.tsx"],"sourcesContent":["import { useMemo, useRef } from 'react'\n\nimport type { Resource } from '@igstack/app-catalog-backend-core'\n\nimport { Gallery } from '~/modules/gallery/Gallery'\nimport type { GalleryImage } from '~/modules/gallery/Gallery'\nimport { Dialog, DialogContent, DialogTitle } from '~/ui/dialog'\nimport { VisuallyHidden } from '~/ui/visually-hidden'\n\nexport interface ScreenshotGalleryProps {\n  app: Resource\n  screenshotIds: string[]\n  initialIndex?: number\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  title?: string\n}\n\nexport function ScreenshotGallery({\n  app,\n  screenshotIds,\n  initialIndex = 0,\n  open,\n  onOpenChange,\n  title,\n}: ScreenshotGalleryProps) {\n  // Track whether Gallery is in fullscreen — if so, block Radix from closing on Escape\n  const isFullscreenRef = useRef(false)\n\n  // Transform screenshot IDs to full URLs\n  const images: GalleryImage[] = useMemo(\n    () =>\n      screenshotIds.map((id) => ({\n        url: `/api/screenshots/${id}`,\n        alt: `${app.abbreviation || app.displayName} screenshot`,\n      })),\n    [screenshotIds, app.abbreviation, app.displayName],\n  )\n\n  // Don't render if no screenshots\n  if (screenshotIds.length === 0) {\n    return null\n  }\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        aria-describedby={undefined}\n        className=\"h-[85vh] w-full max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] md:max-w-[calc(100vw-4rem)] p-0 overflow-hidden\"\n        showCloseButton={true}\n        onEscapeKeyDown={(e) => {\n          // Stop propagation so the Esc event doesn't reach outer document listeners\n          // (e.g. SearchResultsList's raw keydown handler, which would clear search).\n          e.stopPropagation()\n          // If Gallery is in fullscreen, its capture listener already handled Escape.\n          // Prevent Radix from also closing the dialog on the same event.\n          if (isFullscreenRef.current) {\n            e.preventDefault()\n          }\n        }}\n      >\n        <VisuallyHidden>\n          <DialogTitle>\n            {title || `${app.abbreviation || app.displayName} screenshots`}\n          </DialogTitle>\n        </VisuallyHidden>\n        <Gallery\n          images={images}\n          initialIndex={initialIndex}\n          title={title}\n          onFullscreenChange={(fs) => {\n            isFullscreenRef.current = fs\n          }}\n        />\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],"names":[],"mappings":";;;;;AAkBO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AAEzB,QAAM,kBAAkB,OAAO,KAAK;AAGpC,QAAM,SAAyB;AAAA,IAC7B,MACE,cAAc,IAAI,CAAC,QAAQ;AAAA,MACzB,KAAK,oBAAoB,EAAE;AAAA,MAC3B,KAAK,GAAG,IAAI,gBAAgB,IAAI,WAAW;AAAA,IAAA,EAC3C;AAAA,IACJ,CAAC,eAAe,IAAI,cAAc,IAAI,WAAW;AAAA,EAAA;AAInD,MAAI,cAAc,WAAW,GAAG;AAC9B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,QAAA,EAAO,MAAY,cAClB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,oBAAkB;AAAA,MAClB,WAAU;AAAA,MACV,iBAAiB;AAAA,MACjB,iBAAiB,CAAC,MAAM;AAGtB,UAAE,gBAAA;AAGF,YAAI,gBAAgB,SAAS;AAC3B,YAAE,eAAA;AAAA,QACJ;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAA,oBAAC,gBAAA,EACC,UAAA,oBAAC,aAAA,EACE,UAAA,SAAS,GAAG,IAAI,gBAAgB,IAAI,WAAW,eAAA,CAClD,GACF;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,oBAAoB,CAAC,OAAO;AAC1B,8BAAgB,UAAU;AAAA,YAC5B;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/esm/modules/appCatalog/ui/launcher/LauncherDetailPanel.js

@@ -1,11 +1,17 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { X } from "lucide-react";
+import { useRef, useEffect } from "react";
 import { AppDetails } from "../grid/AppCatalogGrid.js";
 function LauncherDetailPanel({
   app,
   onClose,
   onAppClick
 }) {
+  const dialogRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    (_a = dialogRef.current) == null ? void 0 : _a.focus();
+  }, []);
   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",
@@ -19,10 +25,12 @@ function LauncherDetailPanel({
     /* @__PURE__ */ jsxs(
       "div",
       {
+        ref: dialogRef,
         role: "dialog",
         "aria-modal": "true",
         "aria-label": `${app.displayName} details`,
-        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",
+        tabIndex: -1,
+        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",
         children: [
           /* @__PURE__ */ jsx(
             "button",

package/dist/esm/modules/appCatalog/ui/launcher/LauncherDetailPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"LauncherDetailPanel.js","sources":["../../../../../../src/modules/appCatalog/ui/launcher/LauncherDetailPanel.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { X } from 'lucide-react'\nimport { AppDetails } from '../grid/AppCatalogGrid'\n\n/**\n * Centered detail card for the launcher (#38, item B). Renders the rich\n * AppDetails (access-hero, sub-resources, tiers) as a large centered modal card\n * over the launcher backdrop, instead of the old grid + resizable split-pane.\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 LauncherDetailPanel({\n  app,\n  onClose,\n  onAppClick,\n}: {\n  app: Resource\n  onClose: () => void\n  onAppClick?: (app: Resource) => void\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        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={`${app.displayName} details`}\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\"\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          <AppDetails\n            app={app}\n            onAppClick={onAppClick}\n            onClosePanel={onClose}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAcO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,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,MAAK;AAAA,QACL,cAAW;AAAA,QACX,cAAY,GAAG,IAAI,WAAW;AAAA,QAC9B,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,0DACb,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,cAAc;AAAA,YAAA;AAAA,UAAA,EAChB,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"LauncherDetailPanel.js","sources":["../../../../../../src/modules/appCatalog/ui/launcher/LauncherDetailPanel.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { X } from 'lucide-react'\nimport { useEffect, useRef } from 'react'\nimport { AppDetails } from '../grid/AppCatalogGrid'\n\n/**\n * Centered detail card for the launcher (#38, item B). Renders the rich\n * AppDetails (access-hero, sub-resources, tiers) as a large centered modal card\n * over the launcher backdrop, instead of the old grid + resizable split-pane.\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 LauncherDetailPanel({\n  app,\n  onClose,\n  onAppClick,\n}: {\n  app: Resource\n  onClose: () => void\n  onAppClick?: (app: Resource) => void\n}) {\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  useEffect(() => {\n    dialogRef.current?.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={`${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          <AppDetails\n            app={app}\n            onAppClick={onAppClick}\n            onClosePanel={onClose}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;AAeO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,YAAY,OAAuB,IAAI;AAI7C,YAAU,MAAM;;AACd,oBAAU,YAAV,mBAAmB;AAAA,EACrB,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,GAAG,IAAI,WAAW;AAAA,QAC9B,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,0DACb,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,cAAc;AAAA,YAAA;AAAA,UAAA,EAChB,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/package.json

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

package/src/__tests__/integration/appDeepLink.integration.test.ts

@@ -45,6 +45,17 @@ describe('App deep-link routing', () => {
     expect(router.state.location.pathname).toBe('/')
   })
 
+  it('Esc closes card opened by mouse click (#53 bug 1)', async () => {
+    const { ui, router } = await given(magazine.full(), { initialRoute: '/' })
+    // Open via click (mouse, not keyboard nav)
+    await ui.catalog.openApp('Jira')
+    await waitFor(() => expect(ui.catalog.isDetailPanelOpen()).toBe(true))
+    // Esc should close — no "dead click" needed
+    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+    await waitFor(() => expect(ui.catalog.isDetailPanelOpen()).toBe(false))
+    expect(router.state.location.pathname).toBe('/')
+  })
+
   it('closes the detail panel when the × close button is clicked (#59)', async () => {
     const { ui, router } = await given(magazine.full(), { initialRoute: '/' })
     await ui.catalog.openApp('Jira')

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

@@ -166,6 +166,10 @@ export function AccessRequestSection({
   const isUndocumented =
     approvalMethod?.type === 'unknown' ||
     (approvalMethod?.type === 'custom' && !hasWrittenSteps)
+  // Two-step: has a primary request action AND follow-up post-approval steps
+  const isTwoStep = Boolean(
+    hasWrittenSteps && accessRequest.postApprovalInstructions,
+  )
 
   return (
     <div className="mt-6 rounded-lg border-[1.5px] border-primary/40 bg-primary/[0.03] p-4 space-y-4">
@@ -186,6 +190,15 @@ export function AccessRequestSection({
         </p>
       )}
 
+      {isTwoStep && (
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-bold text-primary bg-primary/10 rounded-full px-2.5 py-0.5">
+            Step 1
+          </span>
+          <span className="text-xs text-muted-foreground">Request access</span>
+        </div>
+      )}
+
       {/* Approval Method */}
       {approvalMethod && approvalMethod.type !== 'custom' && (
         <div className="flex items-center gap-2">
@@ -315,26 +328,45 @@ export function AccessRequestSection({
         </div>
       )}
 
-      {/* Post-Approval Instructions - Collapsible (secondary info) */}
-      {accessRequest.postApprovalInstructions && (
-        <Accordion type="single" collapsible>
-          <AccordionItem
-            value="post-approval"
-            className="border rounded-lg px-4"
-          >
-            <AccordionTrigger className="text-sm hover:no-underline py-3">
-              Post-Approval Instructions
-            </AccordionTrigger>
-            <AccordionContent className="pb-3">
-              <div className="text-sm text-muted-foreground prose prose-sm max-w-none">
-                <ReactMarkdown components={{ a: MarkdownLink }}>
-                  {accessRequest.postApprovalInstructions}
-                </ReactMarkdown>
-              </div>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      )}
+      {/* Post-Approval Instructions */}
+      {accessRequest.postApprovalInstructions &&
+        (isTwoStep ? (
+          // Two-step apps: show Step 2 prominently, always expanded
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-bold text-primary bg-primary/10 rounded-full px-2.5 py-0.5">
+                Step 2
+              </span>
+              <span className="text-xs text-muted-foreground">
+                After approval
+              </span>
+            </div>
+            <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">
+              <ReactMarkdown components={{ a: MarkdownLink }}>
+                {accessRequest.postApprovalInstructions}
+              </ReactMarkdown>
+            </div>
+          </div>
+        ) : (
+          // Single-step apps: keep collapsible accordion (secondary info)
+          <Accordion type="single" collapsible>
+            <AccordionItem
+              value="post-approval"
+              className="border rounded-lg px-4"
+            >
+              <AccordionTrigger className="text-sm hover:no-underline py-3">
+                Post-Approval Instructions
+              </AccordionTrigger>
+              <AccordionContent className="pb-3">
+                <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">
+                  <ReactMarkdown components={{ a: MarkdownLink }}>
+                    {accessRequest.postApprovalInstructions}
+                  </ReactMarkdown>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        ))}
     </div>
   )
 }

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

@@ -49,6 +49,9 @@ export function ScreenshotGallery({
         className="h-[85vh] w-full max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] md:max-w-[calc(100vw-4rem)] p-0 overflow-hidden"
         showCloseButton={true}
         onEscapeKeyDown={(e) => {
+          // Stop propagation so the Esc event doesn't reach outer document listeners
+          // (e.g. SearchResultsList's raw keydown handler, which would clear search).
+          e.stopPropagation()
           // If Gallery is in fullscreen, its capture listener already handled Escape.
           // Prevent Radix from also closing the dialog on the same event.
           if (isFullscreenRef.current) {

package/src/modules/appCatalog/ui/launcher/LauncherDetailPanel.tsx

@@ -1,5 +1,6 @@
 import type { Resource } from '@igstack/app-catalog-backend-core'
 import { X } from 'lucide-react'
+import { useEffect, useRef } from 'react'
 import { AppDetails } from '../grid/AppCatalogGrid'
 
 /**
@@ -21,6 +22,14 @@ export function LauncherDetailPanel({
   onClose: () => void
   onAppClick?: (app: Resource) => void
 }) {
+  const dialogRef = useRef<HTMLDivElement>(null)
+
+  // Focus the dialog on mount so Esc hotkeys fire immediately, even when
+  // the card was opened by a mouse click (which leaves focus on the grid row).
+  useEffect(() => {
+    dialogRef.current?.focus()
+  }, [])
+
   return (
     <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 sm:p-6 md:p-10">
       {/* scrim */}
@@ -35,10 +44,12 @@ export function LauncherDetailPanel({
           prose inside AppDetails is width-capped separately so it stays
           readable. Caps at 94vw so it never touches the edges. */}
       <div
+        ref={dialogRef}
         role="dialog"
         aria-modal="true"
         aria-label={`${app.displayName} details`}
-        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"
+        tabIndex={-1}
+        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"
       >
         <button
           type="button"