@igstack/app-catalog-frontend-core 6.3.1-alpha-20261003051755 → 6.5.0

package/dist/esm/modules/appCatalog/utils/accessTabLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessTabLabel.js","sources":["../../../../../src/modules/appCatalog/utils/accessTabLabel.ts"],"sourcesContent":["import type {\n  ApprovalMethod,\n  Resource,\n} from '@igstack/app-catalog-backend-core'\n\n/**\n * What the detail card's access tab says about itself.\n *\n * `route` names how you get in — the tab reads `Access — <route>` — and `chip`\n * is the one number worth carrying next to it.\n */\nexport interface AccessTabLabel {\n  route: string\n  chip?: string\n}\n\n/** Shown when nothing in the entry records a way in. */\nexport const ROUTE_UNDOCUMENTED = 'not documented'\n/** Shown when the resource needs no request at all. */\nexport const ROUTE_FREE = 'Free'\n/** A request with no named channel behind it. */\nexport const ROUTE_REQUEST = 'request'\n\n/**\n * Names the access route for a resource's tab.\n *\n * The point is that the tab answers \"can I get in?\" BEFORE it is opened. That\n * is what lets every entry carry the same four tabs: an access tab holding one\n * sentence saying the route is unknown is a dead end when you have to click to\n * find out, and merely a fact you already read when the label says it.\n *\n * A named channel beats the step count, because the channel is the thing people\n * recognise — most entries route through one or two of them, and \"two steps\"\n * describes effort rather than destination. The count rides in `chip` instead.\n */\nexport function accessTabLabel(\n  resource: Resource,\n  approvalMethods: ApprovalMethod[],\n): AccessTabLabel {\n  const request = resource.accessRequest\n  // Children carry their access as top-level fields rather than an\n  // `accessRequest`, and the detail card's access section already falls back to\n  // them. The tab has to agree with the section below it, or the label promises\n  // something the panel does not show.\n  const hasContactsOnly =\n    (resource.approverSlugs?.length ?? 0) > 0 ||\n    Boolean(resource.accessComments)\n\n  if (!request) {\n    return hasContactsOnly\n      ? { route: ROUTE_REQUEST, chip: undefined }\n      : { route: ROUTE_UNDOCUMENTED }\n  }\n\n  const method = approvalMethods.find(\n    (m) => m.slug === request.approvalMethodSlug,\n  )\n  const hasWrittenSteps = Boolean(request.requestPrompt || request.comments)\n  const isTwoStep = Boolean(hasWrittenSteps && request.postApprovalInstructions)\n\n  // Steps before roles: two-step is the rarer and more consequential shape, and\n  // an entry that is both (a named channel AND a follow-up) is exactly the one\n  // where \"there is more to do after approval\" is the thing worth knowing.\n  const roleCount = request.roles?.length ?? 0\n  const chip = isTwoStep\n    ? '2 steps'\n    : roleCount > 0\n      ? `${roleCount} role${roleCount === 1 ? '' : 's'}`\n      : undefined\n\n  if (method?.type === 'noAccessRequired') return { route: ROUTE_FREE, chip }\n\n  // Nothing here can name a channel: `custom` has none by definition, and an\n  // `approvalMethodSlug` that resolves to no method is a dangling reference —\n  // the section below renders an access box with nothing in it either way.\n  const cannotNameRoute = !method || method.type === 'custom'\n\n  // `unknown` is the honest \"we did not find out\". A route we cannot name AND\n  // cannot describe is the same dead end wearing a different slug: claiming\n  // \"request\" there would promise a way in that the panel does not show.\n  if (method?.type === 'unknown' || (cannotNameRoute && !hasWrittenSteps)) {\n    return { route: ROUTE_UNDOCUMENTED, chip }\n  }\n\n  // A named desk, bot or team. `shortName` exists because `displayName` is\n  // written for prose and the longest in use does not fit a tab. No `&& method`\n  // guard: `cannotNameRoute` is `!method || …`, so ruling it out already narrows\n  // `method` to present.\n  if (!cannotNameRoute) {\n    return { route: method.shortName ?? method.displayName, chip }\n  }\n\n  // Written steps with no channel to name them.\n  return { route: isTwoStep ? '2 steps' : ROUTE_REQUEST, chip }\n}\n"],"names":[],"mappings":"AAiBO,MAAM,qBAAqB;AAE3B,MAAM,aAAa;AAEnB,MAAM,gBAAgB;AActB,SAAS,eACd,UACA,iBACgB;AArBX;AAsBL,QAAM,UAAU,SAAS;AAKzB,QAAM,qBACH,cAAS,kBAAT,mBAAwB,WAAU,KAAK,KACxC,QAAQ,SAAS,cAAc;AAEjC,MAAI,CAAC,SAAS;AACZ,WAAO,kBACH,EAAE,OAAO,eAAe,MAAM,OAAA,IAC9B,EAAE,OAAO,mBAAA;AAAA,EACf;AAEA,QAAM,SAAS,gBAAgB;AAAA,IAC7B,CAAC,MAAM,EAAE,SAAS,QAAQ;AAAA,EAAA;AAE5B,QAAM,kBAAkB,QAAQ,QAAQ,iBAAiB,QAAQ,QAAQ;AACzE,QAAM,YAAY,QAAQ,mBAAmB,QAAQ,wBAAwB;AAK7E,QAAM,cAAY,aAAQ,UAAR,mBAAe,WAAU;AAC3C,QAAM,OAAO,YACT,YACA,YAAY,IACV,GAAG,SAAS,QAAQ,cAAc,IAAI,KAAK,GAAG,KAC9C;AAEN,OAAI,iCAAQ,UAAS,2BAA2B,EAAE,OAAO,YAAY,KAAA;AAKrE,QAAM,kBAAkB,CAAC,UAAU,OAAO,SAAS;AAKnD,OAAI,iCAAQ,UAAS,aAAc,mBAAmB,CAAC,iBAAkB;AACvE,WAAO,EAAE,OAAO,oBAAoB,KAAA;AAAA,EACtC;AAMA,MAAI,CAAC,iBAAiB;AACpB,WAAO,EAAE,OAAO,OAAO,aAAa,OAAO,aAAa,KAAA;AAAA,EAC1D;AAGA,SAAO,EAAE,OAAO,YAAY,YAAY,eAAe,KAAA;AACzD;"}

package/dist/index.css

@@ -249,9 +249,16 @@
   padding-left: 1.25rem;
 }
 
-/* Comment review labels. Plain CSS rather than utilities: there is no success
-   token in the palette, and a tinted chip needs a colour the theme does not
-   name. `--chart-3` is the palette's green and already shifts for dark mode. */
+/* Review labels. Plain CSS rather than utilities: there is no success token in the
+   palette, and a tinted chip needs a colour the theme does not name. `--chart-3` is
+   the palette's green and already shifts for dark mode.
+
+   Mix percentages are low on purpose. At 75%/72% these measured 3.55:1 and 3.24:1
+   against the cream page — under the 4.5:1 floor for 11px text — and the old 600/700
+   weights were compensating for that, which is why they shouted and were still hard
+   to read. Lowering the mix raises contrast in both themes, so there is no .dark
+   override. Verify any change by measurement, not by eye: 60%/55% looks fine and
+   still fails. */
 .comment-chip {
   display: inline-flex;
   align-items: center;
@@ -259,12 +266,13 @@
   border-radius: 999px;
   padding: 0.05rem 0.5rem;
   font-size: 0.6875rem;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.5;
   white-space: nowrap;
 }
 .comment-chip-applied {
-  color: color-mix(in oklab, var(--chart-3) 75%, var(--foreground));
+  /* 5.46:1 light, 7.67:1 dark */
+  color: color-mix(in oklab, var(--chart-3) 50%, var(--foreground));
   background: color-mix(in oklab, var(--chart-3) 16%, var(--card));
   border: 1px solid color-mix(in oklab, var(--chart-3) 35%, var(--card));
 }
@@ -275,6 +283,262 @@
   font-weight: 400;
 }
 
+/* One register for every section label inside the detail card.
+   Measured: the old heading was 13px/500 above 13.5px/400 body — a single
+   100-unit weight step as the ONLY distinction, with no size, tracking or case
+   change. It read as "too pale" while already measuring 14.45:1 against the
+   card, so darkening was never available; the register was the problem.
+   Four signals now instead of one. `--foreground` deliberately: muting drops it
+   to 5.46:1 on a label whose complaint was paleness. Margins carry the rest
+   (28px between sections, 6px to the label's own body) and there are no rules
+   per section — a tab panel's edge already states that boundary. */
+.section-label {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--foreground);
+  line-height: 1.4;
+}
+
+/* The way into the app: icon, name and address fused into ONE pressable
+   surface at the top of the detail card. Plain CSS, not utilities — every
+   colour here is a measured `color-mix`, and the arbitrary-value classes that
+   would be needed are exactly what the JIT can miss.
+
+   Padding is always present and cancelled by an equal negative margin, so the
+   surface arriving on hover never nudges the text inside it. Only colour,
+   border, shadow and a 2px lift animate. */
+.app-door {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.9375rem;
+  max-width: calc(100% + 2.125rem);
+  margin: -0.6875rem -1.0625rem;
+  padding: 0.6875rem 1.0625rem;
+  border: 1px solid var(--border);
+  border-radius: 0.875rem;
+  /* A whisper at rest, so the block reads as a surface — therefore pressable —
+     before anyone hovers it. Most first-time visitors scan rather than hover. */
+  background: color-mix(in oklab, var(--primary) 2.5%, var(--card));
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+  transition:
+    background-color 0.14s ease-out,
+    border-color 0.14s ease-out,
+    box-shadow 0.14s ease-out,
+    translate 0.14s ease-out;
+}
+.app-door:hover,
+.app-door:focus-visible {
+  background: color-mix(in oklab, var(--primary) 7%, var(--card));
+  border-color: color-mix(in oklab, var(--primary) 38%, var(--border));
+  box-shadow: 0 5px 16px -7px
+    color-mix(in oklab, var(--primary) 45%, transparent);
+  translate: 0 -2px;
+  outline: none;
+}
+.app-door:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent);
+}
+.app-door:active {
+  translate: 0 0;
+}
+/* The icon lifts WITH the surface, so the logo reads as part of the press
+   rather than something parked beside it. Shadow only, deliberately: the icon
+   is either an <img> (no background to tint) or a monogram whose colour is set
+   as an INLINE style, which a class cannot override — and recolouring a brand
+   logo on hover would be wrong even where it worked. */
+.app-door__icon {
+  transition: box-shadow 0.14s ease-out;
+}
+.app-door:hover .app-door__icon,
+.app-door:focus-visible .app-door__icon {
+  box-shadow: 0 2px 8px -3px
+    color-mix(in oklab, var(--primary) 55%, transparent);
+}
+/* The title must NOT turn brand-coloured on hover. Measured against the hover
+   tint: `--foreground` holds 13.35:1 light / 12.60:1 dark, where the darkened
+   brand colour manages only 5.17:1 / 3.65:1 — so tinting it DROPPED contrast on
+   interaction. Hover, active and focus have to increase contrast, never reduce
+   it. The surface, border, shadow, icon tile and glyph already carry the state
+   change; the brand tint was the only cue that worked by going paler. */
+.app-door__title {
+  display: block;
+  font-family: var(--font-serif);
+  font-size: 1.5625rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+/* One size step past the point where the longest names run the surface past
+   the card. Only a handful of entries are this long, but they include some of
+   the most-opened ones. */
+.app-door__title--long {
+  font-size: 1.3125rem;
+}
+.app-door__url {
+  display: block;
+  margin-top: 0.25rem;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--muted-foreground);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: color 0.14s ease-out;
+}
+.app-door:hover .app-door__url,
+.app-door:focus-visible .app-door__url {
+  color: var(--foreground);
+}
+.app-door__glyph {
+  flex: none;
+  color: var(--muted-foreground);
+  opacity: 0.75;
+  transition:
+    opacity 0.14s ease-out,
+    color 0.14s ease-out,
+    translate 0.14s ease-out;
+}
+.app-door:hover .app-door__glyph,
+.app-door:focus-visible .app-door__glyph {
+  opacity: 1;
+  color: color-mix(in oklab, var(--primary) 85%, black);
+  translate: 2px -2px;
+}
+/* No hover on a touch screen, so a hover-only affordance is invisible there.
+   Show the surface at full strength instead. */
+@media (hover: none) {
+  .app-door {
+    background: color-mix(in oklab, var(--primary) 6%, var(--card));
+    border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
+  }
+  .app-door__glyph {
+    opacity: 1;
+  }
+}
+
+/* The detail card's hero band: identity, the way in, and the typed-id jumps,
+   with the tab strip seated on its bottom edge so the two read as one unit and
+   the panel below reads as contents. The tint is faint on purpose — the access
+   section carries a stronger one, and two competing tinted panels in the first
+   screen was the objection that nearly sank this layout. */
+.detail-band {
+  background: color-mix(in oklab, var(--primary) 4.5%, var(--card));
+}
+
+/* The tab strip. Horizontally scrollable rather than wrapping: a wrapped strip
+   changes the band's height from one entry to the next. */
+.detail-tabs {
+  display: flex;
+  gap: 2px;
+  border-bottom: 1px solid var(--border);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.detail-tabs::-webkit-scrollbar {
+  display: none;
+}
+.detail-tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4375rem;
+  padding: 0.625rem 0.875rem 0.6875rem;
+  border: 0;
+  border-radius: 0.5rem 0.5rem 0 0;
+  background: none;
+  font-size: 0.84375rem;
+  font-weight: 600;
+  white-space: nowrap;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  transition:
+    color 0.14s ease-out,
+    background-color 0.14s ease-out;
+}
+.detail-tab:hover {
+  color: var(--foreground);
+  background: color-mix(in oklab, var(--primary) 5%, transparent);
+}
+/* The marker sits ON the strip's own border, so the active tab reads as
+   attached to the panel below rather than underlined. */
+.detail-tab::after {
+  content: '';
+  position: absolute;
+  left: 0.625rem;
+  right: 0.625rem;
+  bottom: -1px;
+  height: 2.5px;
+  border-radius: 2px;
+  background: transparent;
+  transition: background-color 0.14s ease-out;
+}
+.detail-tab[aria-selected='true'] {
+  color: color-mix(in oklab, var(--primary) 85%, black);
+}
+.detail-tab[aria-selected='true']::after {
+  background: color-mix(in oklab, var(--primary) 85%, black);
+}
+.detail-tab:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--primary) 85%, black);
+  outline-offset: -2px;
+}
+/* Measured: `--muted-foreground` on `--secondary` at this size is 4.65:1 light
+   — over the 4.5:1 floor by 0.15, which is not a margin. Mixed toward
+   `--foreground` instead: 8.16:1 light, 8.24:1 dark. The active chip formerly
+   used the brand colour on a brand tint, which measured 4.46:1 light and
+   3.00:1 dark — failing — so the tint alone now marks "active" and the text
+   stays at full `--foreground`. Weight is for emphasis; it is not contrast. */
+.detail-tab__chip {
+  border-radius: 999px;
+  padding: 2px 7px;
+  font-size: 0.65625rem;
+  font-weight: 700;
+  line-height: 1.3;
+  background: var(--secondary);
+  color: color-mix(in oklab, var(--foreground) 55%, var(--muted-foreground));
+}
+.detail-tab[aria-selected='true'] .detail-tab__chip {
+  background: color-mix(in oklab, var(--primary) 16%, transparent);
+  color: var(--foreground);
+}
+/* "Something here is unreviewed", visible from any tab. Decorative, so it is
+   exempt on text-contrast grounds — and never the only carrier: the tab's
+   accessible name says it too. */
+.detail-tab__dot {
+  width: 7px;
+  height: 7px;
+  flex: none;
+  border-radius: 999px;
+  background: var(--chart-4, oklch(0.72 0.16 70));
+  box-shadow: 0 0 0 2px
+    color-mix(in oklab, var(--chart-4, oklch(0.72 0.16 70)) 25%, transparent);
+
+  /* How many items are still waiting on a maintainer. Amber rather than red: an entry
+   with open feedback is disputed, not broken, and red is already the withdraw
+   affordance in the same thread. 5.45:1 light, 8.08:1 dark. */
+  .feedback-open-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.15rem;
+    border-radius: 999px;
+    padding: 0.15rem 0.35rem;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    white-space: nowrap;
+    color: color-mix(in oklab, var(--chart-4) 45%, var(--foreground));
+    background: color-mix(in oklab, var(--chart-4) 18%, var(--card));
+    border: 1px solid color-mix(in oklab, var(--chart-4) 38%, var(--card));
+  }
+}
+
 /* tw-animate-css ships no reduced-motion rules of its own, so honour the
    preference here — the overlay animations it provides are all decorative. */
 @media (prefers-reduced-motion: reduce) {

package/package.json

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

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

@@ -33,8 +33,8 @@ vi.mock('~/modules/appCatalog/ui/context/AppCatalogFiltersContext', () => ({
   })),
 }))
 vi.mock('~/modules/auth', () => ({ useUser: vi.fn(() => null) }))
-vi.mock('~/modules/appCatalog/ui/detail/CommentsSection', () => ({
-  CommentsSection: () => <div />,
+vi.mock('~/modules/appCatalog/ui/detail/FeedbackSection', () => ({
+  FeedbackSection: () => <div />,
 }))
 
 const { AppDetailPanel } =
@@ -62,6 +62,13 @@ function roleRowCount() {
     ?.querySelectorAll('tr').length
 }
 
+// The roles table lives behind the access tab, so every assertion about it has
+// to open that tab first. An app switch remounts the card body and resets the
+// card to its first tab, so this is needed again on the far side of a switch.
+function openAccessTab() {
+  fireEvent.click(screen.getByRole('tab', { name: /^access/i }))
+}
+
 // Two flows reach a different app without closing the card: "View replacement"
 // on a deprecated entry, and an access prerequisite's parent. Both swap the
 // `app` prop, and nothing in the chain down to the roles table was keyed by it,
@@ -74,6 +81,7 @@ describe('AppDetailPanel — navigating from one app to another', () => {
       <AppDetailPanel app={appWithRoles('labvantage', 8)} onClose={vi.fn()} />,
     )
 
+    openAccessTab()
     fireEvent.click(
       screen.getByRole('button', { name: /Show all \(8\) roles/ }),
     )
@@ -84,6 +92,7 @@ describe('AppDetailPanel — navigating from one app to another', () => {
     rerender(
       <AppDetailPanel app={appWithRoles('alation', 7)} onClose={vi.fn()} />,
     )
+    openAccessTab()
 
     const toggle = screen.getByRole('button', { name: /Show all \(7\) roles/ })
     expect(toggle).toHaveAttribute('aria-expanded', 'false')
@@ -99,11 +108,14 @@ describe('AppDetailPanel — navigating from one app to another', () => {
       <AppDetailPanel app={appWithRoles('labvantage', 8)} onClose={vi.fn()} />,
     )
 
+    openAccessTab()
     fireEvent.click(
       screen.getByRole('button', { name: /Show all \(8\) roles/ }),
     )
     // A fresh object for the same app, which is what a refetch hands down: an
     // identity-based key would throw the reader's own expansion away here.
+    // No tab click on this side — the panel stays mounted through a same-app
+    // rerender, which is precisely what keeps the expansion.
     rerender(
       <AppDetailPanel app={appWithRoles('labvantage', 8)} onClose={vi.fn()} />,
     )
@@ -144,7 +156,9 @@ describe('AppDetailPanel — focus after an app switch', () => {
     )
     // Stands in for the control that was activated to navigate ("View
     // replacement", a prerequisite's parent): focused, and inside the body
-    // that is about to be replaced.
+    // that is about to be replaced. Deliberately a control inside a tab panel,
+    // which is where most of the card's focusable content now lives.
+    openAccessTab()
     const toggle = screen.getByRole('button', {
       name: /Show all \(8\) roles/,
     })

package/src/__tests__/modules/appCatalog/ui/catalog/RequestAppDialog.test.tsx

@@ -0,0 +1,113 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+
+const state = vi.hoisted(() => ({ sent: [] as unknown[] }))
+
+vi.mock('@tanstack/react-query', () => ({
+  useMutation: vi.fn((options?: { onSuccess?: () => void }) => ({
+    mutate: (vars: unknown) => {
+      state.sent.push(vars)
+      options?.onSuccess?.()
+    },
+    isPending: false,
+  })),
+  useQueryClient: vi.fn(() => ({ invalidateQueries: vi.fn() })),
+}))
+vi.mock('~/api/infra/trpc', () => ({
+  useTRPC: vi.fn(() => ({
+    feedback: {
+      add: { mutationOptions: (o: unknown) => o },
+      mine: { queryKey: () => ['feedback', 'mine'] },
+    },
+  })),
+}))
+
+const { RequestAppDialog } =
+  await import('~/modules/appCatalog/ui/catalog/RequestAppDialog')
+
+describe('RequestAppDialog', () => {
+  /**
+   * The grid is rendered bare in several tests with no TRPCProvider, so the closed
+   * dialog must not reach a tRPC hook. A hook cannot be called conditionally, which is
+   * why the gate is a component boundary — and why this test exists: inlining the body
+   * back into one component breaks six unrelated grid tests with
+   * "useTRPC() can only be used inside of a <TRPCProvider>".
+   */
+  it('mounts nothing at all while closed', () => {
+    const { container } = render(
+      <RequestAppDialog open={false} onOpenChange={() => {}} />,
+    )
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('pre-fills what the visitor searched for', () => {
+    render(
+      <RequestAppDialog
+        open
+        onOpenChange={() => {}}
+        initialSubject="hoppy budget tool"
+      />,
+    )
+    // They just typed it into the search box; asking again is a toll on the one
+    // person who already told us what is missing.
+    expect(screen.getByLabelText(/What are you looking for/)).toHaveValue(
+      'hoppy budget tool',
+    )
+  })
+
+  it('refuses to send with no name, then sends a catalog-level ask', async () => {
+    state.sent = []
+    render(<RequestAppDialog open onOpenChange={() => {}} initialSubject="" />)
+
+    const send = screen.getByRole('button', { name: /Send request/ })
+    expect(send).toBeDisabled()
+
+    await userEvent.type(
+      screen.getByLabelText(/What are you looking for/),
+      'Grafana',
+    )
+    await userEvent.click(screen.getByRole('button', { name: /Send request/ }))
+
+    // No resourceSlug: that is what makes it a request for something absent rather
+    // than feedback on an existing entry. The server splits them the same way.
+    expect(state.sent).toEqual([{ subject: 'Grafana' }])
+  })
+
+  it('carries the optional detail when given, and omits it when blank', async () => {
+    state.sent = []
+    render(
+      <RequestAppDialog
+        open
+        onOpenChange={() => {}}
+        initialSubject="Grafana"
+      />,
+    )
+    await userEvent.type(
+      screen.getByLabelText(/Anything that would help/),
+      'the observability team runs it',
+    )
+    await userEvent.click(screen.getByRole('button', { name: /Send request/ }))
+
+    expect(state.sent).toEqual([
+      { subject: 'Grafana', body: 'the observability team runs it' },
+    ])
+  })
+
+  it('confirms rather than leaving them wondering whether it sent', async () => {
+    state.sent = []
+    render(
+      <RequestAppDialog
+        open
+        onOpenChange={() => {}}
+        initialSubject="Grafana"
+      />,
+    )
+    await userEvent.click(screen.getByRole('button', { name: /Send request/ }))
+
+    // Reporting into silence is how a person learns not to bother.
+    expect(screen.getByText(/that is logged/i)).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /Send request/ })).toBeNull()
+  })
+})

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

@@ -184,12 +184,14 @@ describe('AccessRequestSection — entries with no access information', () => {
     displayName: 'Ghost',
   }
 
-  it('still renders the box, instead of nothing, when every access field is empty', () => {
+  it('still says something, instead of nothing, when every access field is empty', () => {
     render(<AccessRequestSection app={bare} approvalMethods={[]} />)
 
-    expect(
-      screen.getByRole('heading', { name: 'How to get access' }),
-    ).toBeInTheDocument()
+    // The frame and its "How to get access" heading were removed when access
+    // became its own tab — the tab's label states that, and a heading repeating
+    // the tab you just clicked is the same fact twice. What #181 actually
+    // guarantees is that the reader is TOLD we do not know, rather than shown an
+    // empty panel, so that is what this asserts.
     expect(screen.getByText(/not documented yet/)).toBeInTheDocument()
   })
 

package/src/__tests__/modules/appCatalog/ui/detail/AppDetails.background.test.tsx

@@ -1,5 +1,5 @@
 import type { Resource } from '@igstack/app-catalog-backend-core'
-import { render, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 
@@ -28,8 +28,8 @@ vi.mock('~/modules/appCatalog/ui/context/AppCatalogFiltersContext', () => ({
   useAppCatalogFilters: vi.fn(() => ({ selectedTags: [], toggleTag: vi.fn() })),
 }))
 vi.mock('~/modules/auth', () => ({ useUser: vi.fn(() => null) }))
-vi.mock('~/modules/appCatalog/ui/detail/CommentsSection', () => ({
-  CommentsSection: () => <div />,
+vi.mock('~/modules/appCatalog/ui/detail/FeedbackSection', () => ({
+  FeedbackSection: () => <div />,
 }))
 
 const { AppDetails } = await import('~/modules/appCatalog/ui/detail/AppDetails')
@@ -42,28 +42,43 @@ const app = {
   background: 'Built around 2015 for the clinic-facing side of one business.',
 } as Resource
 
+// The original contract was positional — history AFTER the description, never
+// instead of it — and the card has since split those two across tabs, so no
+// single DOM holds both. The intent survives unchanged: the description is what
+// the card opens on, and the history is somewhere quieter that you choose to
+// visit. That is what these assert now.
 describe('AppDetails — Background', () => {
-  it('renders the history after the description, not instead of it', () => {
+  it('opens on the description, not on the history', () => {
     render(<AppDetails app={app} onClosePanel={vi.fn()} />)
 
-    const description = screen.getByRole('heading', { name: 'Description' })
-    const background = screen.getByRole('heading', { name: 'Background' })
+    expect(screen.getByRole('heading', { name: 'Description' })).toBeVisible()
+    expect(screen.queryByRole('heading', { name: 'Background' })).toBeNull()
+  })
+
+  it('renders the history under Documentation', async () => {
+    render(<AppDetails app={app} onClosePanel={vi.fn()} />)
 
+    fireEvent.click(screen.getByRole('tab', { name: /documentation/i }))
+
+    expect(screen.getByRole('heading', { name: 'Background' })).toBeVisible()
     expect(
       screen.getByText(/Built around 2015 for the clinic-facing side/),
     ).toBeInTheDocument()
-    expect(
-      description.compareDocumentPosition(background) &
-        Node.DOCUMENT_POSITION_FOLLOWING,
-    ).toBeTruthy()
   })
 
+  // Asserted ON the Documentation tab on purpose. Asserting it from Overview would
+  // pass whether or not the section works, because Background is in another
+  // panel either way — a test that cannot fail is worse than no test.
   it('leaves no empty section when the entry has no history recorded', () => {
     const { background: _omitted, ...withoutBackground } = app
     render(
       <AppDetails app={withoutBackground as Resource} onClosePanel={vi.fn()} />,
     )
 
+    fireEvent.click(screen.getByRole('tab', { name: /documentation/i }))
+
     expect(screen.queryByRole('heading', { name: 'Background' })).toBeNull()
+    // Proves the panel really is open, so the absence above means something.
+    expect(screen.getByRole('heading', { name: 'Sources' })).toBeVisible()
   })
 })