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

package/dist/esm/modules/appCatalog/ui/components/AccessRequestSection.d.ts

@@ -3,5 +3,5 @@ interface AccessRequestSectionProps {
     app: Resource;
     approvalMethods: AppApprovalMethod[];
 }
-export declare function AccessRequestSection({ app, approvalMethods, }: AccessRequestSectionProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AccessRequestSection({ app, approvalMethods, }: AccessRequestSectionProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs, 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";
@@ -110,10 +110,19 @@ 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 AccessBox({ children }) {
+  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" }),
+    children
+  ] });
+}
 function AccessRequestSection({
   app,
   approvalMethods
 }) {
+  var _a;
   const { copiedId, copyToClipboard } = useCopyToClipboard();
   const accessRequest = useMemo(() => {
     if (app.accessRequest) return app.accessRequest;
@@ -144,19 +153,21 @@ function AccessRequestSection({
       copyToClipboard(requestPrompt, "prompt");
     }
   }, [requestPrompt, copyToClipboard]);
-  if (!accessRequest) return null;
+  if (!accessRequest) {
+    return /* @__PURE__ */ jsx(AccessBox, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: UNDOCUMENTED_WITHOUT_CONTACT }) });
+  }
   const isOpen = (approvalMethod == null ? void 0 : approvalMethod.type) === "noAccessRequired";
   const hasWrittenSteps = Boolean(
     accessRequest.requestPrompt || accessRequest.comments
   );
   const isUndocumented = (approvalMethod == null ? void 0 : approvalMethod.type) === "unknown" || (approvalMethod == null ? void 0 : approvalMethod.type) === "custom" && !hasWrittenSteps;
+  const hasContact = (((_a = accessRequest.approverSlugs) == null ? void 0 : _a.length) ?? 0) > 0 || Boolean(app.ownerPersonSlug);
   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" }),
+  return /* @__PURE__ */ jsxs(AccessBox, { children: [
     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." }),
+    isUndocumented && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: hasContact ? UNDOCUMENTED_WITH_CONTACT : UNDOCUMENTED_WITHOUT_CONTACT }),
     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" })

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 { 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\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  // 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            <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    </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  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    <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      {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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"}

package/package.json

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

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

@@ -161,6 +161,133 @@ describe('AccessRequestSection — roles table', () => {
   })
 })
 
+const CUSTOM_METHOD = {
+  slug: 'custom',
+  displayName: 'Custom',
+  type: 'custom',
+  config: {},
+} as const
+
+// The section used to `return null` whenever an entry had no access fields at
+// all, so its card showed no "How to get access" box whatsoever — the reader
+// was told nothing rather than told we do not know yet (#181). That is the one
+// hole left in the rule #31 established for `custom`: never render nothing,
+// always surface a line.
+//
+// The line itself must not over-promise. "Contact the owner below" is only true
+// when a contact is actually rendered — the Approvers block in this box, or the
+// owner block further down the detail page — and both are conditional.
+describe('AccessRequestSection — entries with no access information', () => {
+  const bare: Resource = {
+    id: 'ghost',
+    slug: 'ghost',
+    displayName: 'Ghost',
+  }
+
+  it('still renders the box, instead of nothing, when every access field is empty', () => {
+    render(<AccessRequestSection app={bare} approvalMethods={[]} />)
+
+    expect(
+      screen.getByRole('heading', { name: 'How to get access' }),
+    ).toBeInTheDocument()
+    expect(screen.getByText(/not documented yet/)).toBeInTheDocument()
+  })
+
+  // Nothing is listed anywhere for such an entry, so pointing at "the owner
+  // below" sends the reader to a block that is never rendered.
+  it('does not promise a contact when the entry has none', () => {
+    render(<AccessRequestSection app={bare} approvalMethods={[]} />)
+
+    expect(screen.getByText(/no owner is listed/)).toBeInTheDocument()
+    expect(screen.queryByText(/contact the owner below/)).toBeNull()
+  })
+
+  // Same absent-contact problem on the pre-existing `custom` path: a bare
+  // `custom` method with no approvers and no owner already promised a contact.
+  it('does not promise a contact for a bare custom method with no approvers or owner', () => {
+    render(
+      <AccessRequestSection
+        app={{
+          id: 'lonely',
+          slug: 'lonely',
+          displayName: 'Lonely',
+          accessRequest: { approvalMethodSlug: 'custom' },
+        }}
+        approvalMethods={[CUSTOM_METHOD]}
+      />,
+    )
+
+    expect(screen.getByText(/no owner is listed/)).toBeInTheDocument()
+    expect(screen.queryByText(/contact the owner below/)).toBeNull()
+  })
+
+  // The regression guard for the two tests above: when a contact IS rendered,
+  // the original wording has to survive, or the fix has just deleted it.
+  // Rendering an approver badge needs the catalog context to resolve the slug.
+  it('keeps pointing at the owner when an approver is listed', () => {
+    const ctx = {
+      resources: [],
+      isLoadingApps: false,
+      tagsDefinitions: [],
+      approvalMethods: [],
+      persons: [],
+      groups: [],
+    } satisfies AppCatalogContextIface
+
+    render(
+      <AppCatalogContext value={ctx}>
+        <AccessRequestSection
+          app={{
+            id: 'staffed',
+            slug: 'staffed',
+            displayName: 'Staffed',
+            accessRequest: {
+              approvalMethodSlug: 'custom',
+              approverSlugs: ['someone@example.com'],
+            },
+          }}
+          approvalMethods={[CUSTOM_METHOD]}
+        />
+      </AppCatalogContext>,
+    )
+
+    expect(screen.getByText(/contact the owner below/)).toBeInTheDocument()
+    expect(screen.queryByText(/no owner is listed/)).toBeNull()
+  })
+
+  // An owner rendered by the detail page below this section also counts as a
+  // reachable contact, even though this component does not draw it itself.
+  it('keeps pointing at the owner when only ownerPersonSlug is set', () => {
+    render(
+      <AccessRequestSection
+        app={{
+          id: 'owned',
+          slug: 'owned',
+          displayName: 'Owned',
+          accessRequest: { approvalMethodSlug: 'custom' },
+          ownerPersonSlug: 'someone@example.com',
+        }}
+        approvalMethods={[CUSTOM_METHOD]}
+      />,
+    )
+
+    expect(screen.getByText(/contact the owner below/)).toBeInTheDocument()
+  })
+
+  // An empty entry has no steps, no roles and no approvers, so the box must not
+  // grow the scaffolding that belongs to a documented one.
+  it('shows no step badges, roles table or approvers for an empty entry', () => {
+    render(<AccessRequestSection app={bare} approvalMethods={[]} />)
+
+    expect(screen.queryByText('Step 1')).toBeNull()
+    expect(screen.queryByText('Step 2')).toBeNull()
+    expect(
+      screen.queryByRole('heading', { name: 'Available Roles' }),
+    ).toBeNull()
+    expect(screen.queryByRole('heading', { name: 'Approvers' })).toBeNull()
+  })
+})
+
 // Documentation links describe the whole access process, not the request
 // step, so in a two-step entry they sat visually inside Step 1 and read as
 // "docs for requesting" — a reader looking for the CLI guide after approval

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

@@ -12,6 +12,7 @@ import {
   Settings,
   Users,
 } from 'lucide-react'
+import type { ReactNode } from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Button } from '~/ui/button'
 import {
@@ -218,6 +219,31 @@ function CopyButton({
   )
 }
 
+/**
+ * Wording for an entry whose access route is not written down. Which one is
+ * honest depends on whether a contact is actually rendered for the reader.
+ */
+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.'
+
+/**
+ * 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
+ * reads as "nothing to do here" rather than "we have not documented this".
+ */
+function AccessBox({ children }: { children: ReactNode }) {
+  return (
+    <div className="mt-6 rounded-lg border-[1.5px] border-primary/40 bg-primary/[0.03] p-4 space-y-4">
+      <h3 className="text-sm font-semibold text-foreground">
+        How to get access
+      </h3>
+      {children}
+    </div>
+  )
+}
+
 export function AccessRequestSection({
   app,
   approvalMethods,
@@ -265,8 +291,20 @@ export function AccessRequestSection({
     }
   }, [requestPrompt, copyToClipboard])
 
-  // Early return if no access request
-  if (!accessRequest) return null
+  // Nothing is written down anywhere: no `accessRequest`, no approvers, no
+  // owner, no comments. This used to `return null`, so the card showed no
+  // "How to get access" box at all and the reader could not tell an
+  // undocumented entry from one that needs no request (#181). Keep the box and
+  // say plainly that we do not know.
+  if (!accessRequest) {
+    return (
+      <AccessBox>
+        <p className="text-sm text-muted-foreground">
+          {UNDOCUMENTED_WITHOUT_CONTACT}
+        </p>
+      </AccessBox>
+    )
+  }
 
   // Access UX (#31): some methods carry no clickable target — `noAccessRequired`
   // (open), `unknown` (undocumented), and bare `custom` with no comments. The
@@ -281,17 +319,19 @@ export function AccessRequestSection({
   const isUndocumented =
     approvalMethod?.type === 'unknown' ||
     (approvalMethod?.type === 'custom' && !hasWrittenSteps)
+  // "the owner below" is either the Approvers block in this box or the owner
+  // block further down the detail page, and BOTH are conditional — so an entry
+  // with neither was telling the reader to go and contact nobody.
+  const hasContact =
+    (accessRequest.approverSlugs?.length ?? 0) > 0 ||
+    Boolean(app.ownerPersonSlug)
   // 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">
-      <h3 className="text-sm font-semibold text-foreground">
-        How to get access
-      </h3>
-
+    <AccessBox>
       {isOpen && (
         <p className="text-sm font-medium text-primary">
           ✓ Open to everyone — no request needed. Just open it.
@@ -300,8 +340,9 @@ export function AccessRequestSection({
 
       {isUndocumented && (
         <p className="text-sm text-muted-foreground">
-          Access process not documented yet — contact the owner below to find
-          out.
+          {hasContact
+            ? UNDOCUMENTED_WITH_CONTACT
+            : UNDOCUMENTED_WITHOUT_CONTACT}
         </p>
       )}
 
@@ -449,6 +490,6 @@ export function AccessRequestSection({
           </div>
         </div>
       )}
-    </div>
+    </AccessBox>
   )
 }