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

package/src/__tests__/modules/appCatalog/ui/detail/FeedbackSection.reviewStatus.test.tsx

@@ -0,0 +1,131 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+
+// Same stub shape as the empty-state test: only the list query matters here.
+const state = vi.hoisted(() => ({
+  items: [] as unknown[],
+  openCount: 0,
+}))
+
+vi.mock('@tanstack/react-query', () => ({
+  useQuery: vi.fn(() => ({
+    data: { items: state.items, openCount: state.openCount },
+    isLoading: false,
+  })),
+  useMutation: vi.fn(() => ({ mutate: vi.fn(), isPending: false })),
+  useQueryClient: vi.fn(() => ({ invalidateQueries: vi.fn() })),
+}))
+vi.mock('~/api/infra/trpc', () => ({
+  useTRPC: vi.fn(() => ({
+    feedback: {
+      list: { queryOptions: () => ({ queryKey: ['feedback'] }) },
+      add: { mutationOptions: (o: unknown) => o },
+      edit: { mutationOptions: (o: unknown) => o },
+      dismiss: { mutationOptions: (o: unknown) => o },
+    },
+  })),
+}))
+
+const { FeedbackSection } =
+  await import('~/modules/appCatalog/ui/detail/FeedbackSection')
+
+const base = {
+  id: 'c1',
+  authorName: 'Merry Mole',
+  body: 'This portal only covers one business unit.',
+  subject: null,
+  resourceSlug: 'example-app',
+  resourceName: 'Example App',
+  attachmentIds: [] as string[],
+  createdAt: new Date().toISOString(),
+  reviewedAt: null as string | null,
+  editedAt: null,
+  isMine: false,
+  canEditUntil: null,
+  status: null as string | null,
+  reviewerReply: null as string | null,
+}
+
+describe('FeedbackSection — review status', () => {
+  it('credits applied work with a short label, not a sentence', () => {
+    state.items = [{ ...base, status: 'applied' }]
+    state.openCount = 0
+    render(<FeedbackSection appSlug="example-app" />)
+
+    // Exactly one: the chip on the row. There is no legend restating it, and the
+    // gratitude lives in the reply prose rather than inside the pill.
+    expect(screen.getAllByText('Applied')).toHaveLength(1)
+    expect(screen.queryByText(/thank you!/)).toBeNull()
+    expect(screen.queryByText(/means the catalog now carries/)).toBeNull()
+  })
+
+  it('shows the quieter label for feedback that changed nothing', () => {
+    state.items = [{ ...base, status: 'acknowledged' }]
+    render(<FeedbackSection appSlug="example-app" />)
+
+    expect(screen.getAllByText('Seen')).toHaveLength(1)
+  })
+
+  it('renders the maintainer reply under the row', () => {
+    state.items = [
+      {
+        ...base,
+        status: 'applied',
+        reviewerReply: 'Folded into Background — thank you.',
+      },
+    ]
+    render(<FeedbackSection appSlug="example-app" />)
+
+    expect(screen.getByText('Catalog team')).toBeInTheDocument()
+    expect(
+      screen.getByText('Folded into Background — thank you.'),
+    ).toBeInTheDocument()
+  })
+
+  it('gives an unreviewed row no chip at all — absence is the signal', () => {
+    state.items = [base]
+    state.openCount = 1
+    render(<FeedbackSection appSlug="example-app" />)
+
+    expect(screen.queryByText('Applied')).toBeNull()
+    expect(screen.queryByText('Seen')).toBeNull()
+    expect(screen.queryByText('Open')).toBeNull()
+    expect(screen.queryByText('Catalog team')).toBeNull()
+  })
+
+  it('counts unreviewed items on the heading, and hides the count at zero', () => {
+    state.items = [base]
+    state.openCount = 2
+    const { unmount } = render(<FeedbackSection appSlug="example-app" />)
+    expect(screen.getByLabelText('2 awaiting review')).toHaveTextContent(
+      '2 open',
+    )
+    unmount()
+
+    state.openCount = 0
+    render(<FeedbackSection appSlug="example-app" />)
+    expect(screen.queryByText(/open$/)).toBeNull()
+  })
+
+  it('offers Dismiss on your own unreviewed row, and not once it is answered', () => {
+    state.items = [{ ...base, isMine: true }]
+    state.openCount = 1
+    const { unmount } = render(<FeedbackSection appSlug="example-app" />)
+    // No edit window left, but withdrawing is still allowed while nobody has acted.
+    expect(screen.getByRole('button', { name: 'Dismiss' })).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Edit' })).toBeNull()
+    unmount()
+
+    state.items = [{ ...base, isMine: true, status: 'applied' }]
+    render(<FeedbackSection appSlug="example-app" />)
+    expect(screen.queryByRole('button', { name: 'Dismiss' })).toBeNull()
+  })
+
+  it('says so when someone sent a bare flag with no words', () => {
+    state.items = [{ ...base, body: null }]
+    render(<FeedbackSection appSlug="example-app" />)
+
+    expect(screen.getByText(/no detail given/)).toBeInTheDocument()
+  })
+})

package/src/__tests__/modules/appCatalog/utils/accessTabLabel.test.ts

@@ -0,0 +1,206 @@
+import type {
+  ApprovalMethod,
+  Resource,
+} from '@igstack/app-catalog-backend-core'
+import { describe, expect, it } from 'vitest'
+import {
+  ROUTE_FREE,
+  ROUTE_REQUEST,
+  ROUTE_UNDOCUMENTED,
+  accessTabLabel,
+} from '~/modules/appCatalog/utils/accessTabLabel'
+
+const methods: ApprovalMethod[] = [
+  {
+    slug: 'access-bot',
+    type: 'service',
+    displayName: 'Access Bot',
+    shortName: 'Bot',
+    config: { url: 'https://chat.example/bot' },
+  },
+  {
+    slug: 'long-desk',
+    type: 'service',
+    // No shortName — the tab has to fall back to this, however long it is.
+    displayName: 'Enterprise Business Service Organization',
+    config: {},
+  },
+  {
+    slug: 'open',
+    type: 'noAccessRequired',
+    displayName: 'No Approval Needed',
+    config: {},
+  },
+  { slug: 'custom', type: 'custom', displayName: 'Custom', config: {} },
+  { slug: 'unknown', type: 'unknown', displayName: 'Unknown', config: {} },
+]
+
+const res = (over: Partial<Resource>): Resource => ({
+  id: 'x',
+  slug: 'x',
+  displayName: 'X',
+  ...over,
+})
+
+describe('accessTabLabel', () => {
+  it('names a service desk by its shortName', () => {
+    const label = accessTabLabel(
+      res({ accessRequest: { approvalMethodSlug: 'access-bot' } }),
+      methods,
+    )
+    expect(label.route).toBe('Bot')
+  })
+
+  it('falls back to displayName when no shortName is set', () => {
+    const label = accessTabLabel(
+      res({ accessRequest: { approvalMethodSlug: 'long-desk' } }),
+      methods,
+    )
+    expect(label.route).toBe('Enterprise Business Service Organization')
+  })
+
+  it('says Free when no request is needed', () => {
+    const label = accessTabLabel(
+      res({ accessRequest: { approvalMethodSlug: 'open' } }),
+      methods,
+    )
+    expect(label.route).toBe(ROUTE_FREE)
+  })
+
+  it('says not documented for an entry with no accessRequest at all', () => {
+    expect(accessTabLabel(res({}), methods).route).toBe(ROUTE_UNDOCUMENTED)
+  })
+
+  it('says not documented for an explicitly unknown method', () => {
+    const label = accessTabLabel(
+      res({ accessRequest: { approvalMethodSlug: 'unknown' } }),
+      methods,
+    )
+    expect(label.route).toBe(ROUTE_UNDOCUMENTED)
+  })
+
+  // A bare `custom` names no channel and writes down no steps, so it is the
+  // same dead end as `unknown` under a different slug.
+  it('says not documented for a bare custom method', () => {
+    const label = accessTabLabel(
+      res({ accessRequest: { approvalMethodSlug: 'custom' } }),
+      methods,
+    )
+    expect(label.route).toBe(ROUTE_UNDOCUMENTED)
+  })
+
+  // A slug that resolves to no registered method. The access section renders an
+  // essentially empty box in that case, so the tab must not advertise a route.
+  it('says not documented when the method slug resolves to nothing', () => {
+    const label = accessTabLabel(
+      res({ accessRequest: { approvalMethodSlug: 'gone-away' } }),
+      methods,
+    )
+    expect(label.route).toBe(ROUTE_UNDOCUMENTED)
+  })
+
+  it('still says request for a dangling slug that does write its steps down', () => {
+    const label = accessTabLabel(
+      res({
+        accessRequest: {
+          approvalMethodSlug: 'gone-away',
+          comments: 'Ask whoever owns it; the channel moved.',
+        },
+      }),
+      methods,
+    )
+    expect(label.route).toBe(ROUTE_REQUEST)
+  })
+
+  it('says request for a custom method that does write its steps down', () => {
+    const label = accessTabLabel(
+      res({
+        accessRequest: {
+          approvalMethodSlug: 'custom',
+          comments: 'Ask the team that owns it.',
+        },
+      }),
+      methods,
+    )
+    expect(label.route).toBe(ROUTE_REQUEST)
+  })
+
+  it('says 2 steps for a custom method with follow-up work after approval', () => {
+    const label = accessTabLabel(
+      res({
+        accessRequest: {
+          approvalMethodSlug: 'custom',
+          comments: 'Ask the owning team.',
+          postApprovalInstructions: 'Then install the client.',
+        },
+      }),
+      methods,
+    )
+    expect(label.route).toBe('2 steps')
+  })
+
+  // Children keep access as top-level fields rather than an accessRequest; the
+  // card's access section already falls back to them, so the tab must agree or
+  // the label contradicts the panel underneath it.
+  it('treats a child with only contacts as a request, not as undocumented', () => {
+    const label = accessTabLabel(
+      res({ parentSlug: 'p', approverSlugs: ['team-a'] }),
+      methods,
+    )
+    expect(label.route).toBe(ROUTE_REQUEST)
+  })
+
+  describe('the chip', () => {
+    it('counts roles', () => {
+      const label = accessTabLabel(
+        res({
+          accessRequest: {
+            approvalMethodSlug: 'access-bot',
+            roles: [{ displayName: 'Read' }, { displayName: 'Write' }],
+          },
+        }),
+        methods,
+      )
+      expect(label.chip).toBe('2 roles')
+    })
+
+    it('singularises one role', () => {
+      const label = accessTabLabel(
+        res({
+          accessRequest: {
+            approvalMethodSlug: 'access-bot',
+            roles: [{ displayName: 'Read' }],
+          },
+        }),
+        methods,
+      )
+      expect(label.chip).toBe('1 role')
+    })
+
+    // The named channel stays as the route and the shape rides in the chip:
+    // "there is more to do after approval" is the thing worth knowing on an
+    // entry that already tells you where to ask.
+    it('prefers the step count over the role count when both apply', () => {
+      const label = accessTabLabel(
+        res({
+          accessRequest: {
+            approvalMethodSlug: 'access-bot',
+            requestPrompt: 'Requesting access.',
+            postApprovalInstructions: 'Then run the CLI login.',
+            roles: [{ displayName: 'Read' }, { displayName: 'Write' }],
+          },
+        }),
+        methods,
+      )
+      expect(label).toEqual({ route: 'Bot', chip: '2 steps' })
+    })
+
+    it('is absent when there is nothing to count', () => {
+      const label = accessTabLabel(
+        res({ accessRequest: { approvalMethodSlug: 'access-bot' } }),
+        methods,
+      )
+      expect(label.chip).toBeUndefined()
+    })
+  })
+})

package/src/__tests__/ui/components/header/Header.loginHidden.test.tsx

@@ -81,7 +81,7 @@ describe('Header login affordance', () => {
 
   it('still shows the user menu once authenticated', () => {
     state.isAuthenticated = true
-    state.user = { name: 'Igor Golovin', email: 'igolovin@natera.com' }
+    state.user = { name: 'Igor Golovin', email: 'igor@example.com' }
     render(<Header />)
 
     expect(screen.getByTestId('user-avatar-button')).toBeInTheDocument()

package/src/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/src/modules/appCatalog/ui/catalog/AppCatalogGrid.tsx

@@ -13,6 +13,7 @@ import { useUiSettings } from '~/context/UiSettingsContext'
 import type { AreaIcon } from '~/types/uiSettings'
 import { AppCatalogContext } from '../../context/AppCatalogContext'
 import { areaLabel, groupByArea } from '../../utils/areaGrouping'
+import { RequestAppDialog } from './RequestAppDialog'
 
 /**
  * Adaptive-home discovery spine (issue #38, increment 1) — matches the
@@ -347,6 +348,9 @@ function SearchResultsList({
   const [expandedParents, setExpandedParents] = useState<Set<string>>(
     () => new Set(),
   )
+  // Asking for something absent. Local state rather than a url param: a half-typed
+  // request has no business in a shareable link.
+  const [requestOpen, setRequestOpen] = useState(false)
 
   const results = useMemo(
     () => searchResources(apps, searchValue),
@@ -483,6 +487,26 @@ function SearchResultsList({
           : `${matchCount} result${matchCount === 1 ? '' : 's'}`}
       </div>
 
+      {/* A zero-result search is the most informative moment in the catalog: someone
+          has said exactly what they expected to find. Showing only "No results"
+          throws that away and leaves them with nowhere to go. */}
+      {matchCount === 0 && !didDeprecatedFallback && (
+        <div className="mb-3 px-1">
+          <button
+            type="button"
+            onClick={() => setRequestOpen(true)}
+            className="text-sm underline decoration-dotted underline-offset-2 hover:text-foreground text-muted-foreground"
+          >
+            Not in the catalog? Ask for it to be added
+          </button>
+        </div>
+      )}
+      <RequestAppDialog
+        open={requestOpen}
+        onOpenChange={setRequestOpen}
+        initialSubject={searchValue}
+      />
+
       {/* #11: deprecated-only fallback notice */}
       {didDeprecatedFallback && (
         <div