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

package/src/components/chat/entity-cards/program-card.tsx

@@ -43,9 +43,9 @@ import { CardHoverPlay } from '../../features/video-center-badge';
 import { InteractiveSkeleton, TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { Button } from '../../ui/button/button';
 import { ImageGalleryModal } from '../../ui/image-gallery-modal';
-import { useLoadingScope } from '../../ui/loading-scope';
-import { SquareAvatar, SquareAvatarSkeleton } from '../../ui/square-avatar';
-import { Tag, TagSkeleton } from '../../ui/tag';
+import { LoadingItems, useLoadingScope } from '../../ui/loading-scope';
+import { SquareAvatar } from '../../ui/square-avatar';
+import { Tag } from '../../ui/tag';
 import type { BaseProgramItem, ProgramConfig, ProgramMedia, ProgramHost } from '../types/entities/program-types';
 import {
   COMPACT_CARD_IMAGE_SLOT,
@@ -59,7 +59,7 @@ import {
 } from '../utils/compact-card-classes';
 import { CompactCardSkeleton } from '../utils/compact-card-skeleton';
 import { CONTENT_CARD_SKELETON_FRAME_CLASS, ContentCardFrame } from './content-card-frame';
-import { EntityPortraitCard, EntityPortraitCardSkeleton } from './entity-portrait-card';
+import { EntityPortraitCard } from './entity-portrait-card';
 import { useEntityCardLink } from './use-entity-card-link';
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder';
 
@@ -105,6 +105,11 @@ const DEFAULT_HOSTS_ROW = 'flex flex-wrap gap-2 md:justify-end';
  * carries (no cap), so there is no limit to draw.
  */
 const DEFAULT_SKELETON_TAGS = 2;
+/** Host avatars a loading card draws for a type whose cards show hosts (`cardShowsHosts`): a typical one. */
+export const PROGRAM_CARD_SKELETON_HOSTS = 1;
+/** Gallery thumbnails a loading card draws for a type whose cards show a gallery (`cardShowsGallery`): the row's
+ *  first fold (the row scrolls past it). */
+export const PROGRAM_CARD_SKELETON_MEDIA = 4;
 /** The person's avatar in the editorial feature card, read by the card and its skeleton. */
 const EDITORIAL_PERSON_AVATAR = { variant: 'round', size: 'sm' } as const;
 
@@ -120,12 +125,12 @@ function ProgramActionButton({ label, href, newTab }: { label: string; href?: st
   );
 }
 
-export function ProgramCardSkeleton({
+function ProgramCardSkeleton({
   size = 'default',
   eyebrow = true,
   media = 0,
   tags = false,
-  hosts = 1,
+  hosts = PROGRAM_CARD_SKELETON_HOSTS,
   typeLabel,
   actionLabel,
   className,
@@ -146,7 +151,8 @@ export function ProgramCardSkeleton({
 }) {
   // The editorial pair: the card's own boxes (EDITORIAL_*), each text row a bar of
   // that row's line height.
-  if (size === 'portrait') return <EntityPortraitCardSkeleton typeLabel={typeLabel} className={className} />;
+  if (size === 'portrait')
+    return <EntityPortraitCard loading href="" imageAlt="" title="" typeLabel={typeLabel} className={className} />;
   if (size === 'row') {
     return (
       <span className={cn(EDITORIAL_FRAME, EDITORIAL_ROW_GRID, className)}>
@@ -173,7 +179,7 @@ export function ProgramCardSkeleton({
           </span>
           <TextLineSkeleton as="span" type="h4" lines={3} className="w-full" />
           <span className={EDITORIAL_PERSON_ROW}>
-            <SquareAvatarSkeleton {...EDITORIAL_PERSON_AVATAR} className="shrink-0" />
+            <SquareAvatar loading {...EDITORIAL_PERSON_AVATAR} className="shrink-0" />
             <TextLineSkeleton as="span" type="h6" className="w-40" />
           </span>
         </span>
@@ -200,25 +206,25 @@ export function ProgramCardSkeleton({
           </div>
           {tags && (
             <div className={DEFAULT_TAG_ROW}>
-              {Array.from({ length: DEFAULT_SKELETON_TAGS }, (_, i) => (
-                <TagSkeleton key={i} />
-              ))}
+              <LoadingItems count={DEFAULT_SKELETON_TAGS}>
+                {() => <Tag loading as="span" label="" variant="outline" data-loading-item />}
+              </LoadingItems>
             </div>
           )}
         </div>
         {hosts > 0 && (
           <div className={DEFAULT_HOSTS_ROW}>
-            {Array.from({ length: hosts }, (_, i) => (
-              <SquareAvatarSkeleton key={i} variant="round" size="sm" />
-            ))}
+            <LoadingItems count={hosts}>
+              {() => <SquareAvatar loading variant="round" size="sm" data-loading-item />}
+            </LoadingItems>
           </div>
         )}
       </div>
       {media > 0 && (
         <div className={DEFAULT_GALLERY_ROW}>
-          {Array.from({ length: media }, (_, i) => (
-            <UnifiedSkeleton key={i} className={DEFAULT_GALLERY_THUMB} />
-          ))}
+          <LoadingItems count={media}>
+            {() => <UnifiedSkeleton className={DEFAULT_GALLERY_THUMB} data-loading-item />}
+          </LoadingItems>
         </div>
       )}
       <div className={DEFAULT_FOOTER}>
@@ -235,7 +241,7 @@ export function ProgramCardSkeleton({
   );
 }
 
-export interface ProgramCardProps<T extends BaseProgramItem> {
+interface LoadedProgramCardProps<T extends BaseProgramItem> {
   config: ProgramConfig<T>;
   item: T;
   media?: ProgramMedia[];
@@ -267,6 +273,34 @@ export interface ProgramCardProps<T extends BaseProgramItem> {
   className?: string;
 }
 
+/**
+ * The record and its link, or `loading` while the host reads it: the card then draws its own loading form, as it does
+ * in a loading scope. What a loading card draws is decided by the type's CONFIG (the hosts and gallery rows its cards
+ * always show); with no config it draws neither.
+ */
+export type ProgramCardProps<T extends BaseProgramItem> =
+  (LoadedProgramCardProps<T> & { loading?: boolean }) | (Partial<LoadedProgramCardProps<T>> & { loading: true });
+
+/** ONE switch: in a loading scope (or `loading`) the card is its own loading form. */
+export function ProgramCard<T extends BaseProgramItem>(props: ProgramCardProps<T>) {
+  if (useLoadingScope() || props.loading) {
+    const { config, size = 'default', showTypeBadge = true, eyebrow, className } = props;
+    // A tag row is a record's optional part, not drawn.
+    return (
+      <ProgramCardSkeleton
+        size={size}
+        eyebrow={!!eyebrow}
+        media={config?.cardShowsGallery ? PROGRAM_CARD_SKELETON_MEDIA : 0}
+        hosts={config?.cardShowsHosts ? PROGRAM_CARD_SKELETON_HOSTS : 0}
+        typeLabel={config && size === 'portrait' && showTypeBadge ? config.labels.singular : undefined}
+        actionLabel={config ? programActionLabel(config.labels.singular) : undefined}
+        className={className}
+      />
+    );
+  }
+  return <LoadedProgramCard {...props} />;
+}
+
 function getHosts(hosts: ProgramHost[] | null | undefined): Array<{ name: string; avatar: string | null }> {
   if (!hosts) return [];
   try {
@@ -296,7 +330,7 @@ function getHosts(hosts: ProgramHost[] | null | undefined): Array<{ name: string
   return [];
 }
 
-function MediaGallery({ images, title }: { images: ProgramMedia[]; title: string }) {
+function MediaGallery({ images, title, optional }: { images: ProgramMedia[]; title: string; optional?: boolean }) {
   const [selectedImageIndex, setSelectedImageIndex] = useState<number | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const openImageModal = (index: number, event?: React.MouseEvent) => {
@@ -310,13 +344,14 @@ function MediaGallery({ images, title }: { images: ProgramMedia[]; title: string
   };
   return (
     <>
-      <div className="overflow-x-auto">
+      <div className="overflow-x-auto" data-loading-optional={optional || undefined}>
         <div className={DEFAULT_GALLERY_ROW} style={{ width: 'max-content' }}>
           {images.map((mediaItem, index) => (
             <div
               key={mediaItem.id}
               className={cn(DEFAULT_GALLERY_THUMB, 'group/thumb cursor-pointer')}
               onClick={e => openImageModal(index, e)}
+              data-loading-item
             >
               <Image
                 src={mediaItem.media_url}
@@ -449,7 +484,12 @@ function ProgramEditorialCard({
               />
               <span className="truncate text-h6">
                 <span className="text-ods-text-primary">{profile.name}</span>
-                {profile.subtitle && <span className="text-ods-text-secondary"> · {profile.subtitle}</span>}
+                {profile.subtitle && (
+                  <span data-loading-optional className="text-ods-text-secondary">
+                    {' '}
+                    · {profile.subtitle}
+                  </span>
+                )}
               </span>
             </>
           )}
@@ -459,7 +499,7 @@ function ProgramEditorialCard({
   );
 }
 
-export function ProgramCard<T extends BaseProgramItem>({
+function LoadedProgramCard<T extends BaseProgramItem>({
   config,
   item,
   media = [],
@@ -476,7 +516,7 @@ export function ProgramCard<T extends BaseProgramItem>({
   tags = [],
   priority,
   className,
-}: ProgramCardProps<T>) {
+}: LoadedProgramCardProps<T>) {
   const { target, rel } = useEntityCardLink({
     href,
     targetPlatform,
@@ -488,20 +528,6 @@ export function ProgramCard<T extends BaseProgramItem>({
     placeholderUrl: placeholderUrlProp,
     aspect: size === 'sm' || size === 'row' ? 'square' : 'wide',
   });
-  if (useLoadingScope()) {
-    return (
-      <ProgramCardSkeleton
-        size={size}
-        eyebrow={!!eyebrow}
-        media={media.filter(m => isImageMedia(m)).length}
-        tags={tags.length > 0}
-        hosts={getHosts(item.hosts).length}
-        typeLabel={size === 'portrait' && showTypeBadge ? config.labels.singular : undefined}
-        actionLabel={programActionLabel(config.labels.singular)}
-        className={className}
-      />
-    );
-  }
   const coverImage = item.cover_url;
   const images = media.filter(m => isImageMedia(m));
   const hosts = getHosts(item.hosts);
@@ -710,9 +736,10 @@ export function ProgramCard<T extends BaseProgramItem>({
         <p className={DEFAULT_DESCRIPTION}>{item.description}</p>
 
         {tags.length > 0 && (
-          <div className={DEFAULT_TAG_ROW}>
+          // Only some records carry tags: the loading card leaves the row out.
+          <div className={DEFAULT_TAG_ROW} data-loading-optional>
             {tags.map(tag => (
-              <Tag key={tag} as="span" label={tag} variant="outline" />
+              <Tag key={tag} as="span" label={tag} variant="outline" data-loading-item />
             ))}
           </div>
         )}
@@ -730,6 +757,7 @@ export function ProgramCard<T extends BaseProgramItem>({
               alt={host.name}
               fallback={host.name.charAt(0).toUpperCase()}
               size="sm"
+              data-loading-item
             />
           ))}
         </div>
@@ -744,7 +772,7 @@ export function ProgramCard<T extends BaseProgramItem>({
     return (
       <ContentCardFrame as="a" href={href} target={target} rel={rel} className={cardFrameClass}>
         {cardHeader}
-        {images.length > 0 && <MediaGallery images={images} title={item.title} />}
+        {images.length > 0 && <MediaGallery images={images} title={item.title} optional={!config.cardShowsGallery} />}
         <div className={DEFAULT_FOOTER}>
           <span
             className="inline-flex items-center gap-2 rounded-md border border-ods-border px-4 py-2 text-ods-text-primary text-h4"
@@ -763,7 +791,7 @@ export function ProgramCard<T extends BaseProgramItem>({
       <Link href={href} target={target} rel={rel} className="block">
         {cardHeader}
       </Link>
-      {images.length > 0 && <MediaGallery images={images} title={item.title} />}
+      {images.length > 0 && <MediaGallery images={images} title={item.title} optional={!config.cardShowsGallery} />}
       <div className={DEFAULT_FOOTER}>
         <ProgramActionButton label={actionLabel} href={href} newTab={target === '_blank'} />
       </div>

package/src/components/chat/entity-cards/roadmap-card.tsx

@@ -23,7 +23,7 @@ import { AvatarStack, type AvatarStackPerson } from '../../ui/avatar-stack';
 import { Button } from '../../ui/button/button';
 import { ImageGalleryModal } from '../../ui/image-gallery-modal';
 import { useLoadingScope } from '../../ui/loading-scope';
-import { StatusBadge, StatusBadgeSkeleton, generationTierFromLabel } from '../../ui/status-badge';
+import { StatusBadge, generationTierFromLabel } from '../../ui/status-badge';
 import { useProxiedImageUrl } from '../hooks/use-proxied-image-url';
 import type { RoadmapItem } from '../types/entities/roadmap-item';
 import { getStatusColorScheme } from '../utils/agent-status-message';
@@ -71,7 +71,7 @@ const ROADMAP_CARD_FOOTER_END = 'flex min-w-0 items-center gap-2';
  * below), the description as three `text-h4` lines and the vote buttons' 48px box (with `votes`); the assignees and
  * target version are drawn only when an item has them, so the skeleton leaves them out. `sm`: the compact card's rows.
  */
-export function RoadmapCardSkeleton({
+function RoadmapCardSkeleton({
   size = 'default',
   votes = true,
   className,
@@ -109,11 +109,11 @@ export function RoadmapCardSkeleton({
           </div>
         </div>
         <div className="hidden md:block">
-          <StatusBadgeSkeleton />
+          <StatusBadge loading text="" />
         </div>
       </div>
       <div className="md:hidden">
-        <StatusBadgeSkeleton />
+        <StatusBadge loading text="" />
       </div>
       <div className={ROADMAP_CARD_SUMMARY_ROW}>
         <TextLineSkeleton type="h4" lines={3} className="w-full" />
@@ -126,7 +126,7 @@ export function RoadmapCardSkeleton({
   );
 }
 
-export interface RoadmapCardProps {
+interface LoadedRoadmapCardProps {
   item: RoadmapItem;
   /** Detail URL for the compact branch (`sm`). Used by the parent
    *  wrapper to drive nav. Default-branch cards don't need href —
@@ -153,6 +153,13 @@ export interface RoadmapCardProps {
   isVoting?: boolean;
 }
 
+/**
+ * The record and its link, or `loading` while the host reads it: the card then draws its own loading form, as it
+ * does in a loading scope.
+ */
+export type RoadmapCardProps =
+  (LoadedRoadmapCardProps & { loading?: boolean }) | (Partial<LoadedRoadmapCardProps> & { loading: true });
+
 /** Wire assignees → AvatarStack people (name+avatar only on the wire). */
 function assigneePeople(
   assignees: Array<{ id: number; name: string | null; avatarUrl: string | null }> | undefined,
@@ -164,7 +171,15 @@ function assigneePeople(
   }));
 }
 
-export function RoadmapCard({
+/** ONE switch: in a loading scope (or `loading`) the card is its own loading form. */
+export function RoadmapCard(props: RoadmapCardProps) {
+  if (useLoadingScope() || props.loading) {
+    return <RoadmapCardSkeleton size={props.size} votes={!!props.onVote} className={props.className} />;
+  }
+  return <LoadedRoadmapCard {...props} />;
+}
+
+function LoadedRoadmapCard({
   item,
   href,
 
@@ -178,13 +193,11 @@ export function RoadmapCard({
   userVote,
   onVote,
   isVoting = false,
-}: RoadmapCardProps) {
+}: LoadedRoadmapCardProps) {
   const [showScreenshots, setShowScreenshots] = useState(false);
-  const loading = useLoadingScope();
 
   const logoUrl = item.icon && item.icon.startsWith('http') ? item.icon : null;
   const iconSrc = useProxiedImageUrl(logoUrl) || null;
-  if (loading) return <RoadmapCardSkeleton size={size} votes={!!onVote} className={className} />;
 
   if (size === 'sm') {
     const compactHref = safeHref(href ?? null);
@@ -396,7 +409,11 @@ export function RoadmapCard({
             ) : null;
           })()}
           {item.targetVersion && (
-            <StatusBadge gen={generationTierFromLabel(item.targetVersion)} text={item.targetVersion} />
+            <StatusBadge
+              data-loading-optional
+              gen={generationTierFromLabel(item.targetVersion)}
+              text={item.targetVersion}
+            />
           )}
         </div>
       </div>

package/src/components/chat/entity-cards/slack-message-card.tsx

@@ -153,7 +153,7 @@ export function SlackMessageCard({ item, variant = 'compact', className, anchorP
   );
 }
 
-export function SlackMessageCardSkeleton({
+function SlackMessageCardSkeleton({
   variant = 'compact',
   className,
 }: {

package/src/components/chat/entity-cards/what-i-shipped-card.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { formatEntryMonthUTC } from '../../../utils/format';
-import { EmployeeEntryCard, EmployeeEntryCardSkeleton, type EmployeeEntryCardData } from './employee-entry-card';
+import { EmployeeEntryCard, type EmployeeEntryCardData } from './employee-entry-card';
 
 /** Minimal row shape the card renders. Both the hub dashboard entry and the
  *  related-content hydrated row satisfy it structurally. */
@@ -8,7 +8,7 @@ export interface WhatIShippedCardData extends EmployeeEntryCardData {
   entry_month?: string | null;
 }
 
-export interface WhatIShippedCardProps {
+interface LoadedWhatIShippedCardProps {
   entry: WhatIShippedCardData;
   /** OG fallback cover. Caller computes it (hub: `useOgPlaceholderUrl`; related
    *  rail: `extras.buildOgPlaceholderUrl`). */
@@ -21,6 +21,10 @@ export interface WhatIShippedCardProps {
   className?: string;
 }
 
+/** The entry, or `loading` while the host reads it: the card then draws its own loading form (`EmployeeEntryCard`'s). */
+export type WhatIShippedCardProps =
+  (LoadedWhatIShippedCardProps & { loading?: boolean }) | (Partial<LoadedWhatIShippedCardProps> & { loading: true });
+
 /**
  * THE single "What I Shipped" card — a thin binding over `EmployeeEntryCard`
  * that maps the reporting month to the shared meta date. Used by BOTH the
@@ -28,7 +32,9 @@ export interface WhatIShippedCardProps {
  * (with `anchorProps` for click-through), so the card is byte-identical
  * everywhere — one engine, one mapping, no drift.
  */
-export function WhatIShippedCard({ entry, placeholderUrl, actions, anchorProps, className }: WhatIShippedCardProps) {
+export function WhatIShippedCard(props: WhatIShippedCardProps) {
+  if (props.loading) return <EmployeeEntryCard loading actions={props.actions} className={props.className} />;
+  const { entry, placeholderUrl, actions, anchorProps, className } = props;
   return (
     <EmployeeEntryCard
       entry={entry}
@@ -40,7 +46,3 @@ export function WhatIShippedCard({ entry, placeholderUrl, actions, anchorProps,
     />
   );
 }
-
-/** Loading skeleton matching WhatIShippedCard's shape. Shared with every other
- *  employee-entry card so the rail's placeholder never diverges from the card. */
-export const WhatIShippedCardSkeleton = EmployeeEntryCardSkeleton;

package/src/components/chat/error-message-display.tsx

@@ -3,6 +3,7 @@
 import { forwardRef, useState } from 'react';
 import { cn } from '../../utils/cn';
 import { AlertCircleIcon } from '../icons-v2-generated';
+import { Button } from '../ui/button';
 import { useChatAppearance } from './chat-appearance-context';
 import { ExpandChevron } from './expand-chevron';
 import { useCollapsible } from './hooks/use-collapsible';
@@ -36,16 +37,13 @@ const ErrorMessageDisplay = forwardRef<HTMLDivElement, ErrorMessageDisplayProps>
         )}
         {...props}
       >
-        <button
+        <Button
+          variant="row"
           type="button"
           onClick={hasDetails ? () => setExpanded(prev => !prev) : undefined}
           aria-expanded={hasDetails ? expanded : undefined}
           aria-label={hasDetails ? (expanded ? 'Collapse details' : 'Expand details') : undefined}
           disabled={!hasDetails}
-          className={cn(
-            'flex w-full items-center gap-[var(--spacing-system-xsf)] text-left',
-            hasDetails ? 'cursor-pointer' : 'cursor-default',
-          )}
         >
           <AlertCircleIcon size={16} className={cn('shrink-0', iconTint[type])} />
           <span
@@ -58,7 +56,7 @@ const ErrorMessageDisplay = forwardRef<HTMLDivElement, ErrorMessageDisplayProps>
             {title}
           </span>
           {hasDetails && <ExpandChevron expanded={expanded} />}
-        </button>
+        </Button>
 
         {hasDetails && (
           <div style={containerStyle}>

package/src/components/chat/guide-mode-banner.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from 'react';
 import { cn } from '../../utils/cn';
 import { CompassIcon } from '../icons-v2-generated/map-and-travel/compass-icon';
 import { QuestionCircleIcon } from '../icons-v2-generated/signs-and-symbols/question-circle-icon';
+import { Button } from '../ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
 
 const DEFAULT_LABEL = 'Guide Mode Chat';
@@ -41,13 +42,9 @@ export function GuideModeBanner({ label = DEFAULT_LABEL, tooltip = DEFAULT_TOOLT
         <TooltipProvider delayDuration={0}>
           <Tooltip>
             <TooltipTrigger asChild>
-              <button
-                type="button"
-                aria-label="About Guide Mode"
-                className="shrink-0 rounded-sm text-ods-text-on-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-text-on-accent"
-              >
-                <QuestionCircleIcon size={16} />
-              </button>
+              <Button variant="transparent" size="icon-inline" type="button" aria-label="About Guide Mode">
+                <QuestionCircleIcon size={16} className="text-ods-text-on-accent" />
+              </Button>
             </TooltipTrigger>
             <TooltipContent side="bottom" align="end" className="max-w-[280px] normal-case text-h6">
               {tooltip}

package/src/components/chat/guide-welcome.tsx

@@ -4,7 +4,8 @@ import { type ReactNode, useMemo } from 'react';
 import { cn } from '../../utils/cn';
 import { AgentMark } from '../agent-mark';
 import { EntityIcon } from '../icon-display';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from '../ui/loading-scope';
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade';
 import { accentFromIdentityIcon, type QuickActionAccent } from './quick-action-chip';
 import { QuickActionWall } from './quick-action-wall';
@@ -44,7 +45,7 @@ export interface GuideWelcomeProps {
   subtitle?: ReactNode;
   /** While the admin greeting is still being fetched, render a one-line
    *  subtitle skeleton instead of flashing empty → text. Ignored once a
-   *  `subtitle` is present. */
+   *  `subtitle` is present. A loading scope draws the skeleton too. */
   subtitleLoading?: boolean;
   /** Quick-action chips — caller-provided; there are no built-in defaults, so
    *  the chip row is omitted entirely unless the host supplies actions. ALL
@@ -107,6 +108,8 @@ export function GuideWelcome({
   // scroll region, shown only while content is actually hidden in that
   // direction. (Same behaviour as MingoWelcome.)
   const { scrollRef, fadeTop, fadeBottom, update: updateScrollFade } = useScrollFade<HTMLDivElement>();
+  // ONE switch for the greeting (read data): a loading scope, or the host still fetching it with none to show yet.
+  const subtitleIsLoading = useLoadingScope() || (subtitleLoading && !subtitle);
 
   // Map to the shared {@link QuickActionChip} shape consumed by the unified
   // `QuickActionWall` — the SAME chip wall the website hero + deck render, so
@@ -171,12 +174,12 @@ export function GuideWelcome({
                   one-line skeleton; once settled, render the greeting (admin
                   copy / host override) or nothing — no built-in default, so by
                   default the empty state shows the title alone. */}
-              {subtitle ? (
-                <p className="text-ods-text-secondary text-h4">{subtitle}</p>
-              ) : subtitleLoading ? (
+              {subtitleIsLoading ? (
                 <div className="flex w-full justify-center">
-                  <UnifiedSkeleton className="h-5 w-3/4 max-w-80 rounded-sm" />
+                  <TextLineSkeleton type="h4" className="w-3/4 max-w-80" />
                 </div>
+              ) : subtitle ? (
+                <p className="text-ods-text-secondary text-h4">{subtitle}</p>
               ) : null}
             </div>
           </div>

package/src/components/chat/hooks/use-chat-dialog-manager.ts

@@ -1,6 +1,7 @@
 'use client';
 
 import { useCallback, useMemo, useRef, useState } from 'react';
+import { CHAT_HISTORY_PAGE_SIZE } from '../mingo-chat-history';
 import type { DialogItem } from '../types/component.types';
 import type { FetchDialogsParams, FetchDialogsResult } from '../types/unified-chat-state.types';
 
@@ -127,7 +128,7 @@ export function useChatDialogManager({
         setArchivedLoading(true);
       }
       try {
-        const result = await fetchArchivedDialogs({ cursor, limit: 20 });
+        const result = await fetchArchivedDialogs({ cursor, limit: CHAT_HISTORY_PAGE_SIZE });
         // A newer request superseded this one — drop the response so overlapping
         // refresh / pagination can't append stale rows or clobber newer results.
         if (!isCurrent()) return;

package/src/components/chat/hooks/use-nats-chat-adapter.ts

@@ -51,6 +51,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { decodeNatsChunk } from '../../../chat-protocol/nats-decoder';
 import type { ChatRef } from '../chat-ref.types';
+import { CHAT_HISTORY_PAGE_SIZE } from '../mingo-chat-history';
 import { createChatDialogStore, DEFAULT_DIALOG_SIDE } from '../stream/chat-dialog-store';
 import { useChatStreamReducer } from '../stream/use-chat-stream-reducer';
 import type {
@@ -402,7 +403,7 @@ export function useNatsChatAdapter(
     stopGeneration: stopGenerationCallback,
     assistantName = 'Mingo',
     chatTypeFilter,
-    dialogsPageSize = 20,
+    dialogsPageSize = CHAT_HISTORY_PAGE_SIZE,
     messagesPageSize = 50,
     modelProvider = null,
     modelLabel = null,

package/src/components/chat/hooks/use-sse-chat-adapter.ts

@@ -59,6 +59,7 @@ import { useRequiredChatRuntime } from '../../../contexts/chat-runtime-context';
 import { embedAuthedFetch } from '../../../utils/embed-authed-fetch';
 import { defaultTableIdForDocumentType } from '../../../utils/source-icons';
 import type { ChatRef } from '../chat-ref.types';
+import { CHAT_HISTORY_PAGE_SIZE } from '../mingo-chat-history';
 import { createChatDialogStore } from '../stream/chat-dialog-store';
 import type { ChatDialogStore } from '../stream/chat-dialog-store';
 import type { ChatStreamReducerOptions } from '../stream/chat-stream-reducer';
@@ -462,7 +463,7 @@ export function useSseChatAdapter(
     fetchDialogs: fetchActiveDialogs,
     renameDialog: conversationsApi?.renameDialog,
     archiveDialog: conversationsApi?.archiveDialog,
-    pageSize: 20,
+    pageSize: CHAT_HISTORY_PAGE_SIZE,
     search: conversationsApi ? dialogSearch : undefined,
     logTag: '[useSseChatAdapter]',
     // Archiving the OPEN conversation drops back to the draft state (the

package/src/components/chat/index.ts

@@ -25,7 +25,7 @@ export * from './chat-message-enhanced';
 export * from './chat-message-list';
 export * from './chat-message-row';
 export * from './chat-turn';
-export * from './chat-message-skeleton';
+export { CHAT_MESSAGE_LIST_SKELETON_MESSAGES } from './chat-message-skeleton';
 
 export * from './quick-action-chip';
 export * from './ask-prompts';
@@ -37,11 +37,9 @@ export * from './chat-typing-indicator';
 export * from './tool-execution-display';
 export * from './tool-call-blocks';
 export * from './mingo-onboarding-card';
-export * from './mingo-onboarding-card-skeleton';
 export * from './mingo-welcome';
 export * from './guide-welcome';
 export * from './msp-organization-card';
-export * from './msp-organization-card-skeleton';
 export * from './guide-mode-banner';
 export * from './mingo-chat-history';
 export * from './mingo-archive-list';
@@ -49,7 +47,6 @@ export * from './mingo-chat-header';
 export * from './mingo-chat-rail';
 export * from './mingo-history-rail';
 export * from './mingo-chat-modals';
-export * from './chat-header-icon-button';
 export * from './chat-header-search-field';
 export * from './chat-panel-header';
 export * from './chat-composer';