@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/src/components/features/board/board.tsx

@@ -106,18 +106,52 @@ export interface BoardProps {
  *
  * While the answer is unknown (SSR and the hydration render) neither subtree
  * exists — mounting one is a guess that runs the loser's effects and, for the
- * drag board, registers DnD on a device that may be a phone. The empty shell
- * keeps the container's footprint; `useMediaQuery` resolves in a pre-paint
- * layout effect, so on the client the shell is never actually painted.
+ * drag board, registers DnD on a device that may be a phone. `BoardShell` stands
+ * in: the same lanes, laid out as the drag board lays them out, with no DnD. It
+ * is what the server's HTML paints before the page hydrates, so the first paint
+ * already shows the lanes (and a loading lane its own loading cards) instead of
+ * an empty strip that fills in after hydration.
  */
 export function Board(props: BoardProps) {
   const dragAndDropEnabled = useMediaQuery(DRAG_AND_DROP_MEDIA_QUERY);
-  if (dragAndDropEnabled === undefined) {
-    return <div aria-hidden className={cn('flex h-full min-h-0 flex-col', props.className)} />;
-  }
+  if (dragAndDropEnabled === undefined) return <BoardShell {...props} />;
   return dragAndDropEnabled ? <DragBoard {...props} /> : <TouchBoard {...props} />;
 }
 
+/**
+ * How a lane meets its neighbours on the drag board: adjacent system lanes join into one strip, any other pair has a
+ * gap. One rule for the board and its pre-hydration shell, so the shell's lanes sit where the board's will.
+ */
+function laneJoins(columns: BoardColumnDef[], i: number) {
+  const column = columns[i];
+  const joinLeft = !!(column.system && columns[i - 1]?.system);
+  const joinRight = !!(column.system && columns[i + 1]?.system);
+  return { joinLeft, joinRight, showGap: i > 0 && !joinLeft };
+}
+
+/**
+ * The board before it knows which board it is (the server's HTML and the hydration render): the lanes, arranged as
+ * the drag board arranges them, each a `touchMode` lane (no drop target), none collapsed (the stored collapse is read
+ * after hydration). Nothing in it can be used, so it is inert.
+ */
+function BoardShell({ columns, className }: BoardProps) {
+  return (
+    <div inert aria-hidden className={cn('flex h-full min-h-0 flex-col', className)}>
+      <div className="flex min-h-0 flex-1 overflow-x-hidden">
+        {columns.map((column, i) => {
+          const { joinLeft, joinRight, showGap } = laneJoins(columns, i);
+          return (
+            <Fragment key={column.id}>
+              {showGap && <div aria-hidden className="w-[var(--spacing-system-mf)] shrink-0" />}
+              <BoardColumn column={column} touchMode joinLeft={joinLeft} joinRight={joinRight} />
+            </Fragment>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
 /**
  * The board renders `columns` and nothing else — there is no local mirror of
  * them, and a drag in progress changes no state here at all.
@@ -587,11 +621,7 @@ function DragBoard({
               className="flex min-h-0 flex-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
             >
               {view.map((column, i) => {
-                const prev = view[i - 1];
-                const next = view[i + 1];
-                const joinLeft = !!(column.system && prev?.system);
-                const joinRight = !!(column.system && next?.system);
-                const showGap = i > 0 && !joinLeft;
+                const { joinLeft, joinRight, showGap } = laneJoins(view, i);
                 return (
                   <Fragment key={column.id}>
                     {showGap && <div aria-hidden className="w-[var(--spacing-system-mf)] shrink-0" />}

package/src/components/features/board/index.ts

@@ -10,12 +10,10 @@ export { TicketCard, TicketCardView, TicketCardBody } from './ticket-card';
 export type { TicketCardProps, TicketCardViewProps, TicketCardBodyProps } from './ticket-card';
 export { BoardTicketApproval } from './board-ticket-approval';
 export type { BoardTicketApprovalProps } from './board-ticket-approval';
-export { TicketCardSkeleton } from './ticket-card-skeleton';
-export type { TicketCardSkeletonProps } from './ticket-card-skeleton';
 export { useBoardCollapse } from './use-board-collapse';
 export type { BoardCollapseMap, UseBoardCollapseReturn } from './use-board-collapse';
 export { tintOnDark } from './color-utils';
-export { columnFromTicketStatus, groupTicketsByStatus } from './types';
+export { BOARD_COLUMN_PAGE_SIZE, columnFromTicketStatus, groupTicketsByStatus } from './types';
 export type {
   BoardChange,
   BoardColumnDef,

package/src/components/features/board/ticket-card.tsx

@@ -31,7 +31,10 @@ import {
   MessagesIcon,
   UserCheckIcon,
 } from '../../icons-v2-generated';
+import { TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { Button } from '../../ui/button';
 import { DeletedUserAvatar } from '../../ui/deleted-user-avatar';
+import { loadingItemProps, useLoadingScope } from '../../ui/loading-scope';
 import { SquareAvatar } from '../../ui/square-avatar';
 import { Tag } from '../../ui/tag';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip';
@@ -71,6 +74,9 @@ const ACTIVITY_DEFAULT_LABEL: Record<BoardTicketActivityKind, string> = {
 const TICKET_CARD_SHELL =
   'relative flex flex-col gap-[var(--spacing-system-sf)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-sf)] select-none text-left';
 
+/** The number and time line (`3891 • 5 min ago`), loaded and loading. */
+const TICKET_CARD_META_CLASS = 'truncate text-ods-text-secondary text-h6';
+
 // =============================================================================
 // Presentational body — the ONE ticket-card design, no drag/link/board context.
 // Reused by the draggable `TicketCard` AND the static `TicketCardView`.
@@ -170,7 +176,6 @@ export function TicketCardBody({
   // may be empty - the hub hero card and tickets without one send '' - so either
   // half stands on its own and the line disappears with both missing.
   const metaLabel = [ticket.ticketNumber || null, timestampLabel].filter(Boolean).join(' \u2022 ');
-  const metaClass = 'truncate text-ods-text-secondary text-h6';
   // Out of the tab order: the card's own link is the one stop for the ticket.
   const meta = href ? (
     <Link
@@ -179,12 +184,12 @@ export function TicketCardBody({
       prefetch={false}
       tabIndex={-1}
       onClick={onLinkClick}
-      className={cn('pointer-events-auto block', metaClass)}
+      className={cn('pointer-events-auto block', TICKET_CARD_META_CLASS)}
     >
       {metaLabel}
     </Link>
   ) : (
-    <p className={cn(tooltipLabel && 'pointer-events-auto', metaClass)}>{metaLabel}</p>
+    <p className={cn(tooltipLabel && 'pointer-events-auto', TICKET_CARD_META_CLASS)}>{metaLabel}</p>
   );
 
   return (
@@ -290,7 +295,9 @@ export function TicketCardView({ className, style, ...bodyProps }: TicketCardVie
 // =============================================================================
 
 export interface TicketCardProps {
-  ticket: BoardTicket;
+  /** The ticket. `null` is a card still being read (a lane's loading form): the card draws its own skeleton, as it
+   *  does in a loading scope. */
+  ticket: BoardTicket | null;
   columnId: string;
   columnColor?: string;
   href?: string;
@@ -304,6 +311,8 @@ export interface TicketCardProps {
   renderAssignSlot?: (ticket: BoardTicket) => ReactNode;
   onApprove?: (ticketId: string, requestId?: string) => void | Promise<void>;
   onReject?: (ticketId: string, requestId?: string) => void | Promise<void>;
+  /** `data-*` markers (`data-loading-item` on a lane's cards), on the card's root in both forms. */
+  [key: `data-${string}`]: unknown;
 }
 
 /** Memoized: a drag moves one card, but it re-renders the column lists around
@@ -311,7 +320,7 @@ export interface TicketCardProps {
  *  must pass stable `renderAssignSlot` / `onApprove` / `onReject` (useCallback)
  *  for this to bite — an inline arrow re-renders every card on every keystroke
  *  anywhere in the page. */
-export const TicketCard = memo(function TicketCardImpl({
+const TicketCardImpl = memo(function TicketCardDraggable({
   ticket,
   columnId,
   columnColor,
@@ -322,7 +331,8 @@ export const TicketCard = memo(function TicketCardImpl({
   renderAssignSlot,
   onApprove,
   onReject,
-}: TicketCardProps) {
+  ...props
+}: TicketCardProps & { ticket: BoardTicket }) {
   const ref = useRef<HTMLDivElement>(null);
   // Read at drag start rather than captured: the registration below is keyed on
   // the ticket's id, so capturing the object would hand a renamed or re-tagged
@@ -498,6 +508,7 @@ export const TicketCard = memo(function TicketCardImpl({
     // Read by the lane's scroll anchor to keep the list still when tickets are
     // inserted above the viewport — see `use-lane-scroll-anchor.ts`.
     [TICKET_ID_ATTRIBUTE]: ticket.id,
+    ...loadingItemProps(props),
   };
 
   const innerWrapperClass = 'relative z-10 flex flex-col gap-[var(--spacing-system-sf)]';
@@ -568,19 +579,30 @@ export const TicketCard = memo(function TicketCardImpl({
   return (
     <div {...outerProps}>
       {insertionLine}
-      <button
+      <Button
+        variant="card"
         type="button"
         onClick={handleClick}
         onKeyDown={handleKeyDown}
         aria-label={ticket.title}
         aria-keyshortcuts={keyShortcuts}
-        className="absolute inset-0 z-0 cursor-pointer rounded-md focus-visible:outline-none"
+        className="absolute inset-0 z-0"
       />
       <div className={cn('pointer-events-none', innerWrapperClass)}>{body}</div>
     </div>
   );
 });
 
+/**
+ * The board card, loaded and loading. ONE switch: in a loading scope, or with no ticket yet (`ticket={null}`), it is
+ * its own {@link TicketCardSkeleton}; otherwise the draggable card. The lane never picks the skeleton.
+ */
+export const TicketCard = memo(function TicketCardSwitch({ ticket, ...props }: TicketCardProps) {
+  const loading = useLoadingScope() || ticket === null;
+  if (loading) return <TicketCardSkeleton {...loadingItemProps(props)} />;
+  return <TicketCardImpl ticket={ticket} {...props} />;
+});
+
 function TicketTagRow({ tags }: { tags: string[] }) {
   const visible = tags.slice(0, MAX_VISIBLE_TAGS);
   const hidden = tags.length - visible.length;
@@ -594,3 +616,33 @@ function TicketTagRow({ tags }: { tags: string[] }) {
     </div>
   );
 }
+
+/**
+ * A board card while it is read: the card's own shell, its title and device lines as bars of their own type steps,
+ * the priority and assignee marks, a typical tag row and the number and time line, in the body's order. The board card draws it itself (`ticket={null}` or a
+ * loading scope).
+ */
+function TicketCardSkeleton({ className, ...props }: { className?: string; [key: `data-${string}`]: unknown }) {
+  return (
+    <div aria-hidden className={cn(TICKET_CARD_SHELL, className)} {...loadingItemProps(props)}>
+      <div className="flex items-start gap-[var(--spacing-system-sf)]">
+        <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-zero)]">
+          <TextLineSkeleton type="h3" className="w-3/4" />
+          <div className="flex min-w-0 items-center gap-[var(--spacing-system-xxs)] text-h6">
+            <UnifiedSkeleton className="size-4 shrink-0 rounded-sm" />
+            <TextLineSkeleton type="inherit" className="w-1/2" />
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center gap-[var(--spacing-system-xsf)]">
+          <UnifiedSkeleton className="size-4 rounded-sm" />
+          <UnifiedSkeleton className="size-8 rounded-full" />
+        </div>
+      </div>
+      <div className="flex h-8 items-start gap-[var(--spacing-system-xxs)]">
+        <Tag loading label="" />
+        <Tag loading label="" />
+      </div>
+      <TextLineSkeleton type="h6" className={cn(TICKET_CARD_META_CLASS, 'w-1/3')} />
+    </div>
+  );
+}

package/src/components/features/board/types.ts

@@ -73,6 +73,9 @@ export interface BoardTicket {
   agent?: AgentName;
 }
 
+/** Tickets a lane reads per page when its host names no `pageSize` (its loading form draws this many cards). */
+export const BOARD_COLUMN_PAGE_SIZE = 20;
+
 export interface BoardColumnDef {
   id: string;
   /**
@@ -95,6 +98,9 @@ export interface BoardColumnDef {
   total?: number;
   hasMore?: boolean;
   isLoading?: boolean;
+  /** How many tickets the lane reads per page: its loading form draws that many cards. Default
+   *  {@link BOARD_COLUMN_PAGE_SIZE}. */
+  pageSize?: number;
   isLoadingMore?: boolean;
 
   system?: boolean;

package/src/components/features/capability-explorer.tsx

@@ -4,15 +4,22 @@ import { type KeyboardEvent, type ReactNode, useRef } from 'react';
 import { useContentLgUp } from '../../hooks/ui/use-content-breakpoint';
 import { TILE_SIZE } from '../../styles/component-sizes';
 import { cn } from '../../utils/cn';
-import { AgentAvatarSkeleton } from '../agent-mark';
+import { AgentAvatar } from '../agent-mark';
 import { EntityIcon } from '../icon-display';
 import { Chevron02RightIcon } from '../icons-v2-generated/arrows/chevron-02-right-icon';
 import { CheckIcon } from '../icons-v2-generated/signs-and-symbols/check-icon';
 import { LoadingRegion } from '../loading/loading-region';
 import { MediaSkeleton, TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
-import { useLoadingScope } from '../ui/loading-scope';
-import { SnapCarousel, SnapCarouselControlsSkeleton } from '../ui/snap-carousel';
-import { SquareAvatarSkeleton } from '../ui/square-avatar';
+import { BUTTON_KIND_CLASS, Button } from '../ui/button';
+import { LoadingItems, useLoadingScope } from '../ui/loading-scope';
+import {
+  SNAP_CAROUSEL_GAP_PX,
+  SNAP_CAROUSEL_TRACK_CLASS,
+  SnapCarousel,
+  SnapCarouselControls,
+  SnapCarouselSlide,
+} from '../ui/snap-carousel';
+import { SquareAvatar } from '../ui/square-avatar';
 import { TruncateText } from '../ui/truncate-text';
 
 /** One job the product does, as the explorer shows it. Every field is the host's data. */
@@ -90,11 +97,17 @@ export interface CapabilityExplorerProps {
    * `CAPABILITY_EXPLORER_SKELETON_JOBS`, a typical count for a host that states none.
    */
   skeletonCount?: number;
-  /** @deprecated Use `skeletonCount`. */
+  /** @deprecated Ignored: the skeleton draws `skeletonCount` (a list draws its full count, never a fold). */
   fold?: number;
   className?: string;
 }
 
+/** Boxes the loaded explorer and its skeleton both draw (one box in both forms). */
+const PANEL_BODY_CLASS =
+  'flex min-h-0 min-w-0 flex-col gap-5 overflow-hidden rounded-xl border border-ods-border bg-ods-card px-8 py-7';
+const PANEL_INTRO_CLASS = 'flex min-w-0 flex-col overflow-hidden';
+const HIGHLIGHT_ROW_CLASS = 'flex min-w-0 items-center gap-2.5';
+const CARD_HEAD_ROW_CLASS = 'flex min-w-0 items-center gap-3';
 /**
  * Heights are constants so the panel never moves between jobs and the
  * skeleton is the loaded box: every text is clamped to fit them.
@@ -105,6 +118,14 @@ const PANEL_TOP_HEIGHT_CLASS = 'h-[256px]';
 const PANEL_SCREEN_HEIGHT_CLASS = 'h-[420px]';
 const PANEL_FOOTER_HEIGHT_CLASS = 'h-[52px]';
 const CARD_HEIGHT_CLASS = 'h-[700px]';
+/** One card's slide in the carousel: most of the width, so the next card peeks beside it (loaded and loading). */
+const CARD_SLIDE_CLASS = 'min-w-0 basis-[86%]';
+/** A job's card in the carousel (loaded and loading): its frame, padding and rhythm. */
+const CARD_CLASS =
+  'flex w-full min-w-0 flex-col gap-[var(--spacing-system-sf)] overflow-hidden rounded-xl border border-ods-border bg-ods-card p-[var(--spacing-system-mf)]';
+/** A job's row in the list (loaded tab and loading row): the lib's list row (`Button variant="row"`), never shrunk. */
+const JOB_TAB_LAYOUT_CLASS = 'min-w-0 shrink-0';
+const JOB_TAB_CLASS = cn(BUTTON_KIND_CLASS.row, JOB_TAB_LAYOUT_CLASS);
 /** A job's icon tile's box (in the list, a card's head and their skeletons). */
 const JOB_ICON_TILE_BOX = `${TILE_SIZE.md} shrink-0 rounded-lg`;
 const JOB_ICON_TILE_CLASS = cn(
@@ -119,13 +140,15 @@ export const capabilityTabId = (id: string): string => `${id}-tab`;
 
 /** A highlight's check mark: `MediaSkeleton.Icon size="sm"` (16px) while loading. */
 const HIGHLIGHT_ICON_PX = 16;
+/** The most highlights a job shows (its first ones): the limit of the list, and the rows its skeleton draws. */
+const HIGHLIGHTS_LIMIT = 3;
 
 function Highlights({ items, className }: { items: readonly string[]; className?: string }) {
   if (items.length === 0) return null;
   return (
     <ul className={cn('grid grid-cols-1 gap-2', className)}>
-      {items.slice(0, 3).map(text => (
-        <li key={text} className="flex min-w-0 items-center gap-2.5">
+      {items.slice(0, HIGHLIGHTS_LIMIT).map(text => (
+        <li key={text} data-loading-item className={HIGHLIGHT_ROW_CLASS}>
           <CheckIcon size={HIGHLIGHT_ICON_PX} className="shrink-0 text-ods-flamingo-cyan" />
           <TruncateText variant="h6" triggerClassName="flex-1">
             {text}
@@ -205,9 +228,9 @@ function ExampleSkeleton({ className }: { className?: string }) {
   const turn = (first: boolean) => (
     <div className={cn('flex min-w-0 gap-2.5', !first && 'border-t border-ods-border pt-3')}>
       {first ? (
-        <SquareAvatarSkeleton variant="round" sizePx={EXAMPLE_MARK_PX} className="shrink-0" />
+        <SquareAvatar loading variant="round" sizePx={EXAMPLE_MARK_PX} className="shrink-0" />
       ) : (
-        <AgentAvatarSkeleton size={EXAMPLE_MARK_PX} />
+        <AgentAvatar loading agent="" size={EXAMPLE_MARK_PX} />
       )}
       <div className="flex min-w-0 flex-1 flex-col gap-1">
         <TextLineSkeleton type="h6" className="w-28" />
@@ -256,7 +279,7 @@ const CAPABILITY_EXPLORER_SKELETON_JOBS = 8;
  * first card over the carousel's controls. Every box is the loaded one's, so
  * nothing moves when the jobs arrive.
  */
-export function CapabilityExplorerSkeleton({
+function CapabilityExplorerSkeleton({
   region = true,
   className,
   count = CAPABILITY_EXPLORER_SKELETON_JOBS,
@@ -269,26 +292,28 @@ export function CapabilityExplorerSkeleton({
 }) {
   return (
     <LoadingRegion label="Loading capabilities" announce={region} className={className}>
+      {/* The carousel's own track and slides: the first card, the next one peeking beside it, then the controls. */}
       <div className="content-lg:hidden">
-        <div className="flex gap-[var(--spacing-system-sf)] overflow-hidden">
-          <div
-            className={cn(
-              'flex min-w-0 shrink-0 basis-[86%] flex-col gap-[var(--spacing-system-sf)] overflow-hidden rounded-xl border border-ods-border bg-ods-card p-[var(--spacing-system-mf)]',
-              CARD_HEIGHT_CLASS,
+        <div className={SNAP_CAROUSEL_TRACK_CLASS} style={{ gap: SNAP_CAROUSEL_GAP_PX }}>
+          <LoadingItems count={count}>
+            {() => (
+              <SnapCarouselSlide className={CARD_SLIDE_CLASS} readItem>
+                <div className={cn(CARD_CLASS, CARD_HEIGHT_CLASS)}>
+                  <div className={CARD_HEAD_ROW_CLASS}>
+                    <JobHeadSkeleton />
+                  </div>
+                  <div className="min-h-[3lh] text-h6">
+                    <TextLineSkeleton type="h6" className="w-full" />
+                    <TextLineSkeleton type="h6" className="w-5/6" />
+                  </div>
+                  <UnifiedSkeleton className="h-[300px] shrink-0 rounded-lg" />
+                  <ExampleSkeleton className="shrink-0" />
+                </div>
+              </SnapCarouselSlide>
             )}
-          >
-            <div className="flex min-w-0 items-center gap-3">
-              <JobHeadSkeleton />
-            </div>
-            <div className="min-h-[3lh] text-h6">
-              <TextLineSkeleton type="h6" className="w-full" />
-              <TextLineSkeleton type="h6" className="w-5/6" />
-            </div>
-            <UnifiedSkeleton className="h-[300px] shrink-0 rounded-lg" />
-            <ExampleSkeleton className="shrink-0" />
-          </div>
+          </LoadingItems>
         </div>
-        <SnapCarouselControlsSkeleton />
+        <SnapCarouselControls loading count={count} />
       </div>
 
       <div
@@ -298,21 +323,17 @@ export function CapabilityExplorerSkeleton({
         )}
       >
         <div className="flex min-h-0 flex-col gap-1 overflow-hidden">
-          {Array.from({ length: count }, (_, i) => (
-            <div
-              key={i}
-              className={cn(
-                'flex min-w-0 shrink-0 items-center gap-3.5 rounded-lg border px-3.5 py-3',
-                i === 0 ? 'border-ods-border bg-ods-card' : 'border-transparent',
-              )}
-            >
-              <JobHeadSkeleton />
-            </div>
-          ))}
+          <LoadingItems count={count}>
+            {i => (
+              <div data-loading-item data-state={i === 0 ? 'active' : undefined} className={JOB_TAB_CLASS}>
+                <JobHeadSkeleton />
+              </div>
+            )}
+          </LoadingItems>
         </div>
-        <div className="flex min-h-0 min-w-0 flex-col gap-5 overflow-hidden rounded-xl border border-ods-border bg-ods-card px-8 py-7">
+        <div className={PANEL_BODY_CLASS}>
           <div className={cn('grid shrink-0 grid-cols-[minmax(0,1fr)_minmax(0,380px)] gap-8', PANEL_TOP_HEIGHT_CLASS)}>
-            <div className="flex min-w-0 flex-col overflow-hidden">
+            <div className={PANEL_INTRO_CLASS}>
               <div className="mb-2">
                 <TextLineSkeleton type="h2" className="w-64" />
               </div>
@@ -321,12 +342,14 @@ export function CapabilityExplorerSkeleton({
                 <TextLineSkeleton type="h4" className="w-4/5" />
               </div>
               <div className="mt-auto grid grid-cols-1 gap-2">
-                {[0, 1, 2].map(i => (
-                  <div key={i} className="flex min-w-0 items-center gap-2.5">
-                    <MediaSkeleton.Icon size="sm" className="shrink-0" />
-                    <TextLineSkeleton type="h6" className={i === 1 ? 'w-56' : 'w-48'} />
-                  </div>
-                ))}
+                <LoadingItems count={HIGHLIGHTS_LIMIT}>
+                  {i => (
+                    <div data-loading-item className={HIGHLIGHT_ROW_CLASS}>
+                      <MediaSkeleton.Icon size="sm" className="shrink-0" />
+                      <TextLineSkeleton type="h6" className={i === 1 ? 'w-56' : 'w-48'} />
+                    </div>
+                  )}
+                </LoadingItems>
               </div>
             </div>
             <ExampleSkeleton />
@@ -365,7 +388,6 @@ export function CapabilityExplorer({
   responderMark,
   loading = false,
   skeletonCount,
-  fold,
   className,
 }: CapabilityExplorerProps) {
   const wide = useContentLgUp();
@@ -375,7 +397,7 @@ export function CapabilityExplorer({
   // While the page is read its jobs are not known (none in a loading state): the explorer is its skeleton, never
   // left out. The page's loading region announces it, so this one does not; a host's own read does.
   if (inScope || loading) {
-    return <CapabilityExplorerSkeleton region={!inScope} count={skeletonCount ?? fold} className={className} />;
+    return <CapabilityExplorerSkeleton region={!inScope} count={skeletonCount} className={className} />;
   }
   if (items.length === 0) return null;
   // Unknown until measured: one box, so neither layout's ids are in the page twice.
@@ -391,15 +413,11 @@ export function CapabilityExplorer({
         nextLabel={labels.next}
         getKey={item => item.id}
         focusIndex={items.findIndex(item => item.id === activeId)}
-        slideClassName="min-w-0 basis-[86%]"
+        slideClassName={CARD_SLIDE_CLASS}
+        readItems
         renderItem={item => (
-          <article
-            className={cn(
-              'flex w-full min-w-0 flex-col gap-[var(--spacing-system-sf)] overflow-hidden rounded-xl border border-ods-border bg-ods-card p-[var(--spacing-system-mf)]',
-              CARD_HEIGHT_CLASS,
-            )}
-          >
-            <div className="flex min-w-0 items-center gap-3">
+          <article className={cn(CARD_CLASS, CARD_HEIGHT_CLASS)}>
+            <div className={CARD_HEAD_ROW_CLASS}>
               {item.iconName && (
                 <span className={cn(JOB_ICON_TILE_CLASS, 'text-ods-flamingo-cyan')}>
                   <EntityIcon icon={{ name: item.iconName }} size={18} />
@@ -486,19 +504,19 @@ export function CapabilityExplorer({
         {items.map((item, index) => {
           const selected = index === activeIndex;
           return (
-            <button
+            <Button
+              variant="row"
               key={item.id}
+              data-loading-item
               id={capabilityTabId(item.id)}
               type="button"
               role="tab"
               aria-selected={selected}
               aria-controls={panelId}
+              data-state={selected ? 'active' : undefined}
               tabIndex={selected ? 0 : -1}
               onClick={() => onActiveChange(item.id)}
-              className={cn(
-                'flex min-w-0 shrink-0 items-center gap-3.5 rounded-lg border px-3.5 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent',
-                selected ? 'border-ods-border bg-ods-card' : 'border-transparent hover:bg-ods-bg-hover',
-              )}
+              className={JOB_TAB_LAYOUT_CLASS}
             >
               {item.iconName && (
                 <span
@@ -528,17 +546,12 @@ export function CapabilityExplorer({
                 className={cn('shrink-0', selected ? 'text-ods-flamingo-cyan' : 'invisible')}
                 aria-hidden
               />
-            </button>
+            </Button>
           );
         })}
       </div>
 
-      <div
-        id={panelId}
-        role="tabpanel"
-        aria-labelledby={capabilityTabId(active.id)}
-        className="flex min-h-0 min-w-0 flex-col gap-5 overflow-hidden rounded-xl border border-ods-border bg-ods-card px-8 py-7"
-      >
+      <div id={panelId} role="tabpanel" aria-labelledby={capabilityTabId(active.id)} className={PANEL_BODY_CLASS}>
         <div
           className={cn(
             'grid shrink-0 gap-8',
@@ -547,7 +560,7 @@ export function CapabilityExplorer({
             PANEL_TOP_HEIGHT_CLASS,
           )}
         >
-          <div className="flex min-w-0 flex-col overflow-hidden">
+          <div className={PANEL_INTRO_CLASS}>
             <TruncateText lines={2} variant="h2" className="mb-2">
               {active.title}
             </TruncateText>
@@ -568,9 +581,13 @@ export function CapabilityExplorer({
         <div className={cn('shrink-0 overflow-hidden rounded-xl border border-ods-border', PANEL_SCREEN_HEIGHT_CLASS)}>
           {renderScreen(active, { compact: false })}
         </div>
-        {/* Inside the panel's fixed height: the footer moves nothing, so it is not optional to the loading state. */}
+        {/* Only some jobs have a footer, and the skeleton draws none: optional (inside the panel's fixed height, it
+            moves nothing). */}
         {active.footer && (
-          <div className={cn('flex min-w-0 shrink-0 items-center overflow-hidden', PANEL_FOOTER_HEIGHT_CLASS)}>
+          <div
+            data-loading-optional
+            className={cn('flex min-w-0 shrink-0 items-center overflow-hidden', PANEL_FOOTER_HEIGHT_CLASS)}
+          >
             {active.footer}
           </div>
         )}

package/src/components/features/card-hit-layer.tsx

@@ -25,6 +25,7 @@
 import type React from 'react';
 import Link from '../../embed-shims/next-link';
 import { cn } from '../../utils/cn';
+import { Button } from '../ui/button';
 
 export interface CardHitLayerProps {
   /** Accessible name. The layer has no content, so this IS its label. */
@@ -72,12 +73,13 @@ export function CardHitLayer({
     );
   }
   return (
-    <button
+    <Button
+      variant="card"
       type="button"
       {...a11y}
       onClick={onClick}
       onPointerDown={onPointerDown}
-      className={cn(HIT_LAYER_BASE, className)}
+      className={cn('absolute inset-0 h-full', className)}
     />
   );
 }

package/src/components/features/cloud-tenants/tenant-access-cell.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useLoadingScope } from '../../ui/loading-scope';
 import { Tag } from '../../ui/tag';
 import { TruncateText } from '../../ui/truncate-text';
 import { accessStateTag, formatLastRead } from './tenant-presentation';
@@ -13,10 +14,12 @@ export interface TenantAccessCellProps {
 
 /** ACCESS column: the access tag over "Last read: ...". */
 export function TenantAccessCell({ accessState, lastReadAt, now }: TenantAccessCellProps) {
+  // While the tenant is read (a loading scope) the access tag and its last read are their loading forms.
+  const loading = useLoadingScope();
   return (
     <div className="flex min-w-0 flex-col justify-center gap-[var(--spacing-system-xxs)]">
-      <Tag {...accessStateTag(accessState)} className="self-start" />
-      <TruncateText variant="h6" tone="secondary">
+      <Tag {...accessStateTag(accessState)} loading={loading} className="self-start" />
+      <TruncateText variant="h6" tone="secondary" loading={loading}>
         {`Last read: ${formatLastRead(lastReadAt, now)}`}
       </TruncateText>
     </div>

package/src/components/features/cloud-tenants/tenant-cell.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { MediaSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { TruncateText } from '../../ui/truncate-text';
 import { providerMark, TENANT_EMPTY_VALUE } from './tenant-presentation';
 
@@ -12,13 +14,19 @@ export interface TenantCellProps {
 /** TENANT column: provider mark + name over the domain. */
 export function TenantCell({ provider, name, domain }: TenantCellProps) {
   const { Logo, label } = providerMark(provider);
+  // While the tenant is read (a loading scope) its provider's mark is a box and its name and domain are bars.
+  const loading = useLoadingScope();
   return (
     <div className="flex min-w-0 flex-col justify-center">
       <div className="flex min-w-0 items-center gap-[var(--spacing-system-xxs)]">
-        <Logo size={24} role="img" aria-label={label} className="shrink-0" />
+        {loading ? (
+          <MediaSkeleton.Icon size="md" className="shrink-0" />
+        ) : (
+          <Logo size={24} role="img" aria-label={label} className="shrink-0" />
+        )}
         <TruncateText>{name}</TruncateText>
       </div>
-      <TruncateText variant="h6" tone="secondary">
+      <TruncateText variant="h6" tone="secondary" loading={loading}>
         {domain ?? TENANT_EMPTY_VALUE}
       </TruncateText>
     </div>