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

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/AppDetailPanel.tsx

@@ -1,6 +1,6 @@
 import type { Resource } from '@igstack/app-catalog-backend-core'
 import { X } from 'lucide-react'
-import { useEffect, useRef } from 'react'
+import { useEffect, useLayoutEffect, useRef } from 'react'
 import { useAppCatalogContext } from '../../context/AppCatalogContext'
 import { SubResourceDetailPanel } from '../components/SubResourceDetailPanel'
 import { AppDetails } from '../detail/AppDetails'
@@ -38,6 +38,47 @@ export function AppDetailPanel({
   const { approvalMethods } = useAppCatalogContext()
   const dialogRef = useRef<HTMLDivElement>(null)
 
+  /**
+   * Centre the card ONCE when it opens, then hold that position.
+   *
+   * `my-auto` centred it on every render, so each panel height change pushed both
+   * edges and half the delta became upward movement of everything above it —
+   * including the tab strip, which moved 113px and took the control the user had
+   * just clicked with it (CLS 0.19, "needs improvement").
+   *
+   * Top-anchoring fixed the shift but looked wrong: a short card sat high on the
+   * page. So pin the centred offset instead. The card still opens centred, and
+   * anything that grows it afterwards extends downward only — which is what a
+   * reader expects when they open a tab with more in it.
+   *
+   * Only on open and on resize. Deliberately NOT on content change: reacting to
+   * content is precisely the bug.
+   */
+  useLayoutEffect(() => {
+    const card = dialogRef.current
+    const scroller = card?.parentElement
+    if (!card || !scroller) return
+
+    const pinCentre = () => {
+      card.style.marginTop = '0px'
+      const style = getComputedStyle(scroller)
+      const usable =
+        scroller.clientHeight -
+        parseFloat(style.paddingTop) -
+        parseFloat(style.paddingBottom)
+      const slack = usable - card.offsetHeight
+      // Negative slack means the card is already taller than the viewport; leave it
+      // at the top and let the overlay scroll, rather than pushing its head off.
+      card.style.marginTop = `${Math.max(0, Math.round(slack / 2))}px`
+    }
+
+    pinCentre()
+    window.addEventListener('resize', pinCentre)
+    return () => window.removeEventListener('resize', pinCentre)
+    // Keyed on the opened entry: a different card is a new open, and should
+    // re-centre for its own height.
+  }, [app.slug, subResource?.slug])
+
   // Focus the dialog on mount so Esc hotkeys fire immediately, even when
   // the card was opened by a mouse click (which leaves focus on the grid row).
   //
@@ -75,7 +116,10 @@ export function AppDetailPanel({
         aria-modal="true"
         aria-label={`${subResource?.displayName ?? app.displayName} details`}
         tabIndex={-1}
-        className="relative w-full max-w-[min(1120px,94vw)] my-auto rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200 outline-none"
+        // Centred on open, then held — see the pin effect above. `my-auto` is
+        // deliberately absent: it re-centres on EVERY height change, which is the
+        // layout-shift bug.
+        className="relative w-full max-w-[min(1120px,94vw)] rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200 outline-none"
       >
         <button
           type="button"

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

@@ -31,6 +31,9 @@ export function AccessPrerequisiteChain({
 
   return (
     <div
+      // Part of the access story, so it carries the same anchor the instructions
+      // do — a reader (and a test) wants the whole chain, not half of it.
+      data-access-section=""
       className="mt-6 rounded-lg border-[1.5px] border-primary/40 bg-primary/[0.03] p-4"
       role="note"
       aria-label="Access requires prerequisite steps"

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

@@ -235,10 +235,15 @@ const UNDOCUMENTED_WITHOUT_CONTACT =
  */
 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>
+    // No frame and no heading. Both existed to mark this out as THE thing on a long
+    // scrolling card; now it is its own tab, so the tab's label already says what
+    // this is and the panel edge already bounds it. A box inside a box, under a
+    // heading that repeats the tab you just clicked, is two statements of the same
+    // fact and ink the reader has to look past.
+    // A stable anchor for tests, because neither of the old handles survives: the
+    // heading is gone, and a sub-resource page has no tab panel to read either.
+    // Text and structure both move; this does not.
+    <div data-access-section="" className="space-y-4">
       {children}
     </div>
   )

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

@@ -104,7 +104,10 @@ export function SubResourceDetailPanel({
 
       {/* Two-step access section */}
       {hasAnyAccess && (
-        <div className="mt-6 space-y-6">
+        // The whole two-step region carries the anchor: the step labels naming
+        // the parent live out here, not inside the nested AccessRequestSections,
+        // so anchoring only those dropped the parent from the chain.
+        <div data-access-section="" className="mt-6 space-y-6">
           <h3 className="text-sm font-medium">How to get access</h3>
 
           {hasTwoStepAccess ? (