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

package/src/components/chat/mingo-history-rail.tsx

@@ -5,9 +5,10 @@ import { AlertCircleIcon, Refresh01RightIcon } from '../icons-v2-generated';
 import { ChatsIcon } from '../icons-v2-generated/communication/chats-icon';
 import { PlusCircleIcon } from '../icons-v2-generated/signs-and-symbols/plus-circle-icon';
 import { Button } from '../ui/button';
+import { useLoadingScope } from '../ui/loading-scope';
 import { TabSelector } from '../ui/tab-selector';
 import { ChatListEmptyState } from './chat-list-empty-state';
-import { MingoChatHistory, MingoChatHistorySkeleton } from './mingo-chat-history';
+import { MingoChatHistory } from './mingo-chat-history';
 import type { DialogItem } from './types/component.types';
 
 // =============================================================================
@@ -54,9 +55,12 @@ export interface MingoHistoryRailProps {
   isLoadingMore?: boolean;
   /** Fetch the next page. */
   onLoadMore?: () => void;
-  /** True while the FIRST page of dialogs is still loading. Renders a skeleton
-   *  so the rail doesn't flash the empty state before the list arrives. */
+  /** True while the FIRST page of dialogs is still loading. The list draws its
+   *  own loading state so the rail doesn't flash the empty state before the list arrives. */
   isLoadingHistory?: boolean;
+  /** The host's page size: how many rows the list's loading state draws. Default
+   *  `CHAT_HISTORY_PAGE_SIZE`. */
+  pageSize?: number;
   /** The dialog-list load FAILED with nothing cached — renders an error + retry
    *  block instead of the empty state. */
   loadError?: boolean;
@@ -98,10 +102,12 @@ export function MingoHistoryRail({
   isLoadingMore = false,
   onLoadMore,
   isLoadingHistory = false,
+  pageSize,
   loadError = false,
   onRetry,
   className,
 }: MingoHistoryRailProps) {
+  const loading = useLoadingScope() || isLoadingHistory;
   const hasSearch = !!searchQuery?.trim();
   // The list (vs. the empty state) shows whenever there are chats OR an active
   // search is running — a no-match query must keep the search bar mounted
@@ -162,10 +168,10 @@ export function MingoHistoryRail({
             </Button>
           )}
         </div>
-      ) : isLoadingHistory ? (
-        <MingoChatHistorySkeleton />
-      ) : hasList ? (
+      ) : loading || hasList ? (
         <MingoChatHistory
+          loading={loading}
+          pageSize={pageSize}
           dialogs={dialogs}
           activeDialogId={activeDialogId}
           onSelectDialog={onSelectDialog}

package/src/components/chat/mingo-info-card.tsx

@@ -8,6 +8,8 @@ import { personInitials } from '../../utils/format';
 import { Ellipsis01Icon } from '../icons-v2-generated';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { ActionsMenuDropdown, type ActionsMenuGroup } from '../ui/actions-menu';
+import { Button } from '../ui/button';
+import { useLoadingScope } from '../ui/loading-scope';
 import { tagVariants, type TagProps } from '../ui/tag';
 
 // =============================================================================
@@ -39,9 +41,8 @@ export function MingoInfoCardActionProvider({
   return <MingoInfoCardActionContext.Provider value={action}>{children}</MingoInfoCardActionContext.Provider>;
 }
 
-/** The trailing cell's footprint and press feedback, shared by the "⋯" trigger and a host's action. */
-const TRAILING_BUTTON_CLASS =
-  'flex w-[56px] shrink-0 items-center justify-center self-stretch text-ods-text-secondary transition-colors hover:bg-ods-bg-hover hover:text-ods-text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent active:bg-ods-bg-active active:text-ods-text-primary md:w-[68px]';
+/** The trailing cell's footprint (a `cell` Button), shared by the "⋯" trigger and a host's action. */
+const TRAILING_CELL_LAYOUT = 'w-[56px] self-stretch md:w-[68px]';
 
 /** A coloured status pill rendered to the right of the title/description. */
 export interface MingoInfoCardStatus {
@@ -91,6 +92,11 @@ export interface MingoInfoCardProps {
    * affordances. The "⋯" button keeps its own independent click target.
    */
   onClick?: () => void;
+  /**
+   * Draws the card's loading form (its `MingoInfoCardSkeleton`): a card whose record is still being read. Inside a
+   * loading scope the card draws it too.
+   */
+  loading?: boolean;
   /** Appended to the root element. */
   className?: string;
 }
@@ -155,7 +161,7 @@ function CardMedia({ imageSrc, imageAlt, icon }: Pick<MingoInfoCardProps, 'image
 /** Loading placeholder matching `MingoInfoCard` geometry (40px media box,
  *  title + description lines, trailing pill slot). Span-only for the same
  *  inside-`<p>` validity reason as the card itself. */
-export function MingoInfoCardSkeleton({ className }: { className?: string }) {
+function MingoInfoCardSkeleton({ className }: { className?: string }) {
   return (
     <span
       className={cn(
@@ -184,10 +190,13 @@ export function MingoInfoCard({
   menuAriaLabel = 'More actions',
   anchorProps,
   onClick,
+  loading: loadingProp = false,
   className,
 }: MingoInfoCardProps) {
+  const loading = useLoadingScope() || loadingProp;
   const hasMedia = !!imageSrc || !!icon;
   const action = useContext(MingoInfoCardActionContext);
+  if (loading) return <MingoInfoCardSkeleton className={className} />;
   const hasMenu = !action && !!menuGroups && menuGroups.length > 0;
   const isAnchor = !!anchorProps;
   const isInteractive = isAnchor || !!onClick;
@@ -213,7 +222,6 @@ export function MingoInfoCard({
 
   const contentClass = cn(
     'flex min-w-0 flex-1 items-center gap-[var(--spacing-system-s)] overflow-hidden p-[var(--spacing-system-s)] text-left',
-    (hasMenu || action) && 'border-r border-ods-border',
     isInteractive &&
       'cursor-pointer transition-colors hover:bg-ods-bg-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent active:bg-ods-bg-active',
   );
@@ -221,7 +229,7 @@ export function MingoInfoCard({
   return (
     <span
       className={cn(
-        'flex w-full items-center overflow-hidden rounded-md border border-ods-border bg-ods-card',
+        'flex w-full items-center divide-x divide-ods-border overflow-hidden rounded-md border border-ods-border bg-ods-card',
         className,
       )}
     >
@@ -230,17 +238,23 @@ export function MingoInfoCard({
           {content}
         </Link>
       ) : onClick ? (
-        <button type="button" onClick={onClick} className={contentClass}>
+        <Button variant="row" type="button" onClick={onClick} className="min-w-0 flex-1 self-stretch">
           {content}
-        </button>
+        </Button>
       ) : (
         <span className={contentClass}>{content}</span>
       )}
 
       {action && (
-        <button type="button" aria-label={action.label} onClick={action.onClick} className={TRAILING_BUTTON_CLASS}>
+        <Button
+          variant="cell"
+          type="button"
+          aria-label={action.label}
+          onClick={action.onClick}
+          className={TRAILING_CELL_LAYOUT}
+        >
           {action.icon}
-        </button>
+        </Button>
       )}
       {hasMenu && (
         <ActionsMenuDropdown
@@ -248,15 +262,9 @@ export function MingoInfoCard({
           triggerAriaLabel={menuAriaLabel}
           onCloseAutoFocus={e => e.preventDefault()}
           customTrigger={
-            <button
-              type="button"
-              aria-label={menuAriaLabel}
-              // Press feedback mirrors `Button` (transparent variant):
-              // `hover:bg-ods-bg-hover` → `active:bg-ods-bg-active`.
-              className={TRAILING_BUTTON_CLASS}
-            >
+            <Button variant="cell" type="button" aria-label={menuAriaLabel} className={TRAILING_CELL_LAYOUT}>
               <Ellipsis01Icon size={24} />
-            </button>
+            </Button>
           }
         />
       )}

package/src/components/chat/mingo-onboarding-card.tsx

@@ -2,7 +2,10 @@
 
 import type { MouseEvent, ReactNode } from 'react';
 import { cn } from '../../utils/cn';
-import { Button } from '../ui/button';
+import { InteractiveSkeleton, MediaSkeleton, TextLineSkeleton } from '../loading/unified-skeleton';
+import { BUTTON_KIND_CLASS, Button } from '../ui/button';
+import { InertWhileLoading, LoadingItems, loadingItemProps, useLoadingScope } from '../ui/loading-scope';
+import { SKELETON_TITLE_WIDTHS } from './chat-nav-sidebar';
 
 export interface MingoOnboardingCardAction {
   /** Stable React key. */
@@ -32,10 +35,40 @@ export interface MingoOnboardingCardProps {
    *  the card renders as a `<button>` with hover/focus affordances.
    *  Ignored when `actions` is non-empty. */
   onClick?: () => void;
+  /** The commands are still loading: the card draws its loading form (its known actions real and inert). Inside a
+   *  `LoadingScope` it does so whatever this says. */
+  loading?: boolean;
+  /** The card's place in its list: picks the loading state's bar widths, so a list of loading cards is irregular. */
+  skeletonIndex?: number;
   /** Optional className appended to the root element. */
   className?: string;
 }
 
+/** The card's frame, loaded and loading. */
+const CARD_BASE_CLASS =
+  'flex w-full items-start border-b border-ods-border bg-ods-card p-[var(--spacing-system-s)] text-left last:border-b-0';
+const CARD_BODY_CLASS = 'flex w-full flex-col gap-[var(--spacing-system-xxs)]';
+const CARD_TITLE_ROW_CLASS = 'flex w-full items-center gap-[var(--spacing-system-xxs)]';
+const CARD_ICON_CLASS = 'flex size-4 shrink-0 items-center justify-center text-ods-text-secondary';
+const CARD_ACTIONS_CLASS = 'mt-[var(--spacing-system-xs)] flex flex-wrap items-center gap-[var(--spacing-system-xxs)]';
+
+/** Action chips a loading card draws while it knows none of its actions: the typical `Recent / Search / Find` row. */
+const MINGO_ONBOARDING_CARD_SKELETON_ACTIONS = 3;
+
+/**
+ * Per-card loading shapes, cycled by index so a list of loading cards is irregular and the same list draws the same
+ * bars (the title's width is the chat lists' shared {@link SKELETON_TITLE_WIDTHS}). Slashes range from `/docs` to
+ * `/getting-started`.
+ */
+const ROW_VARIANTS: ReadonlyArray<{ slashWidth: string; descriptionLines: 1 | 2 }> = [
+  { slashWidth: 'w-20', descriptionLines: 2 },
+  { slashWidth: 'w-16', descriptionLines: 2 },
+  { slashWidth: 'w-24', descriptionLines: 2 },
+  { slashWidth: 'w-28', descriptionLines: 2 },
+  { slashWidth: 'w-24', descriptionLines: 1 },
+  { slashWidth: 'w-16', descriptionLines: 2 },
+];
+
 /**
  * MingoOnboardingCard — Figma node `7363:205939`.
  *
@@ -60,62 +93,110 @@ export function MingoOnboardingCard({
   description,
   actions,
   onClick,
+  loading: loadingProp = false,
+  skeletonIndex = 0,
   className,
+  ...props
 }: MingoOnboardingCardProps) {
+  // ONE switch: while the commands are read the SAME card draws its icon box, title, slash command and description as
+  // bars; the actions it knows are drawn real and inert, and the typical three chips only when it knows none yet.
+  const loading = useLoadingScope() || loadingProp;
   const hasActions = !!actions && actions.length > 0;
-  const isInteractive = !hasActions && !!onClick;
+  // The card's markers (`data-loading-item` for a card of a read list), on the loaded and the loading card alike.
+  const itemProps = loadingItemProps(props);
+  const variant = ROW_VARIANTS[skeletonIndex % ROW_VARIANTS.length];
+  const isInteractive = !loading && !hasActions && !!onClick;
+
+  const actionButtons = hasActions
+    ? actions.map(action => (
+        <Button
+          key={action.id}
+          data-loading-item
+          type="button"
+          variant="outline"
+          size="small"
+          onClick={e => {
+            e.stopPropagation();
+            action.onClick(e);
+          }}
+        >
+          {action.label}
+        </Button>
+      ))
+    : null;
 
   const body = (
-    <div className="flex w-full flex-col gap-[var(--spacing-system-xxs)]">
-      <div className="flex w-full items-center gap-[var(--spacing-system-xxs)]">
-        {icon ? (
+    <div className={CARD_BODY_CLASS}>
+      <div className={CARD_TITLE_ROW_CLASS}>
+        {loading ? (
+          <span className={CARD_ICON_CLASS}>
+            <MediaSkeleton.Icon size="sm" />
+          </span>
+        ) : icon ? (
           // Icon slot — monochrome `ods-text-secondary` (≈ #888) so
           // consumers can drop any `icons-v2-generated` glyph (they use
           // `currentColor`) without per-card styling. Brand multi-color
           // SVGs ignore this color.
-          <span className="flex size-4 shrink-0 items-center justify-center text-ods-text-secondary">{icon}</span>
-        ) : null}
-        <span className="min-w-0 flex-1 truncate text-ods-text-primary text-h6">{title}</span>
-        {slashCommand ? (
-          <span className="whitespace-nowrap text-ods-text-secondary text-h6">{slashCommand}</span>
+          <span className={CARD_ICON_CLASS}>{icon}</span>
         ) : null}
+        {loading ? (
+          <>
+            <span className="min-w-0 flex-1">
+              <TextLineSkeleton
+                type="h6"
+                className={SKELETON_TITLE_WIDTHS[skeletonIndex % SKELETON_TITLE_WIDTHS.length]}
+              />
+            </span>
+            <TextLineSkeleton type="h6" className={cn('shrink-0', variant.slashWidth)} />
+          </>
+        ) : (
+          <>
+            <span className="min-w-0 flex-1 truncate text-ods-text-primary text-h6">{title}</span>
+            {slashCommand ? (
+              <span className="whitespace-nowrap text-ods-text-secondary text-h6">{slashCommand}</span>
+            ) : null}
+          </>
+        )}
       </div>
-      {description ? <p className="w-full text-ods-text-secondary text-h6">{description}</p> : null}
-      {hasActions ? (
-        <div className="mt-[var(--spacing-system-xs)] flex flex-wrap items-center gap-[var(--spacing-system-xxs)]">
-          {actions.map(action => (
-            <Button
-              key={action.id}
-              type="button"
-              variant="outline"
-              size="small"
-              onClick={e => {
-                e.stopPropagation();
-                action.onClick(e);
-              }}
-            >
-              {action.label}
-            </Button>
-          ))}
+      {loading ? (
+        <TextLineSkeleton type="h6" lines={variant.descriptionLines} className="w-full" />
+      ) : description ? (
+        <p className="w-full text-ods-text-secondary text-h6">{description}</p>
+      ) : null}
+      {loading && actions === undefined ? (
+        // The commands are not read yet: the typical card's three action chips.
+        <div className={CARD_ACTIONS_CLASS}>
+          <LoadingItems count={MINGO_ONBOARDING_CARD_SKELETON_ACTIONS}>
+            {() => <InteractiveSkeleton.Button data-loading-item size="small" className="w-16" />}
+          </LoadingItems>
+        </div>
+      ) : hasActions ? (
+        <div className={CARD_ACTIONS_CLASS}>
+          {loading ? <InertWhileLoading className="contents">{actionButtons}</InertWhileLoading> : actionButtons}
         </div>
       ) : null}
     </div>
   );
 
-  const baseClass = cn(
-    'flex w-full items-start border-b border-ods-border bg-ods-card p-[var(--spacing-system-s)] text-left last:border-b-0',
-    isInteractive &&
-      'cursor-pointer transition-colors hover:bg-ods-bg-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent',
-    className,
-  );
+  // A card that is one click target is a list ROW Button; its loading form is the same row box. A card with its own
+  // actions (or none at all) is a static card.
+  const rowCard = !!onClick && !hasActions;
+  const baseClass = cn(rowCard ? BUTTON_KIND_CLASS.row : CARD_BASE_CLASS, className);
 
   if (isInteractive) {
     return (
-      <button type="button" onClick={onClick} className={baseClass}>
+      <Button variant="row" type="button" onClick={onClick} className={className} {...itemProps}>
         {body}
-      </button>
+      </Button>
     );
   }
 
-  return <div className={baseClass}>{body}</div>;
+  return (
+    <div className={baseClass} aria-hidden={loading || undefined} {...itemProps}>
+      {body}
+    </div>
+  );
 }
+
+/** Slash-command cards the loading state draws: a typical list, since the commands list has no page size of its own. */
+export const MINGO_ONBOARDING_SKELETON_ROWS = ROW_VARIANTS.length;

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

@@ -7,10 +7,12 @@ import { AgentMark } from '../agent-mark';
 import { CompassIcon, Arrow01DownIcon, AlertCircleIcon, Refresh01RightIcon } from '../icons-v2-generated';
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon';
 import { Button } from '../ui/button';
+import { useLoadingScope } from '../ui/loading-scope';
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade';
-import { MingoChatHistorySkeleton } from './mingo-chat-history';
+import { MingoChatHistory } from './mingo-chat-history';
 import { QuickActionChipButton } from './quick-action-chip';
 import { QuickActionWall } from './quick-action-wall';
+import type { DialogItem } from './types/component.types';
 
 // =============================================================================
 // Types
@@ -72,6 +74,9 @@ export interface MingoWelcomeProps {
    *  flash the new-user layout before the list arrives. Ignored once
    *  `dialogHistory` is provided. */
   isLoadingHistory?: boolean;
+  /** The host's dialog page size: how many rows the history's loading state draws
+   *  (`isLoadingHistory`). Default `CHAT_HISTORY_PAGE_SIZE`. */
+  historyPageSize?: number;
   /** The dialog-list load FAILED (e.g. backend down) and there's nothing
    *  cached. Renders an error + retry block in place of the new-user empty
    *  state (which would otherwise misleadingly advertise Guide). Takes
@@ -104,6 +109,9 @@ const DEFAULT_PROMO: MingoWelcomePromo = {
 
 const DEFAULT_PROMO_STORAGE_KEY = 'mingo-welcome:promo-dismissed';
 
+/** No dialogs yet: what the history's loading state is rendered with. */
+const NO_DIALOGS: ReadonlyArray<DialogItem> = [];
+
 // =============================================================================
 // Component
 // =============================================================================
@@ -134,6 +142,7 @@ export function MingoWelcome({
   hasExistingChats = false,
   dialogHistory,
   isLoadingHistory = false,
+  historyPageSize,
   loadError = false,
   onRetry,
   onStartGuideChat,
@@ -143,6 +152,8 @@ export function MingoWelcome({
   // Greeting never weaves the user's name in — always the plain "Hey, I'm
   // Mingo" (design node 113:69208). A host `title` override still wins.
   const heading = title ?? "Hey, I'm Mingo";
+  // ONE switch: in a page's loading state, or while the first history page is read, the history draws its loading rows.
+  const historyLoading = useLoadingScope() || isLoadingHistory;
 
   // `promo` omitted → fall back to the OpenFrame default, but only when guide
   // mode exists to advertise (otherwise the notification points nowhere).
@@ -200,7 +211,7 @@ export function MingoWelcome({
   // history skeleton both clutters the loading frame and pre-judges the user as
   // new. They return once a resolved state (history, or the new-user greeting)
   // renders. `dialogHistory` always wins — a returning user keeps the chips.
-  const showPinnedRegion = !!dialogHistory || (!isLoadingHistory && !loadError);
+  const showPinnedRegion = !!dialogHistory || (!historyLoading && !loadError);
 
   return (
     <div
@@ -233,8 +244,10 @@ export function MingoWelcome({
               </Button>
             )}
           </div>
-        ) : isLoadingHistory ? (
-          <MingoChatHistorySkeleton />
+        ) : historyLoading ? (
+          // The history draws its own loading state (one page of rows) until the
+          // first page tells new and returning users apart.
+          <MingoChatHistory dialogs={NO_DIALOGS} loading pageSize={historyPageSize} />
         ) : (
           <>
             {/* Scrollable region — only the greeting + grid scroll; the notification
@@ -290,14 +303,16 @@ export function MingoWelcome({
                 <span className="text-ods-text-secondary text-h6">{resolvedPromo.description}</span>
               </div>
               {/* Plain cross — no button chrome, just a clickable icon. */}
-              <button
+              <Button
+                variant="transparent"
+                size="icon-sm"
                 type="button"
                 onClick={dismissPromo}
                 aria-label="Dismiss"
-                className="absolute right-2 top-2 rounded-sm text-ods-text-secondary transition-colors hover:text-ods-text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent"
+                className="absolute right-2 top-2"
               >
                 <XmarkIcon size={16} />
-              </button>
+              </Button>
             </div>
           )}
 

package/src/components/chat/model-display.tsx

@@ -4,7 +4,8 @@ import React from 'react';
 import { cn } from '../../utils/cn';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '../hover-card';
 import { AnthropicLogoGreyIcon, GeminiLogoGreyIcon, OpenaiLogoGreyIcon } from '../icons-v2-generated';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { MediaSkeleton, TextLineSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from '../ui/loading-scope';
 import { useChatAppearance } from './chat-appearance-context';
 import type { ModelDisplayProps, ModelUsageBreakdown } from './types';
 import { CHAT_APPEARANCE } from './types/chat.types';
@@ -49,6 +50,11 @@ const formatTokenCount = (count: number): string => {
 const hasAnyBreakdownRow = (breakdown?: ModelUsageBreakdown): breakdown is ModelUsageBreakdown =>
   !!breakdown && !!(breakdown.haikuRewriter || breakdown.haikuClassifier || breakdown.haikuSummarizer);
 
+/** The inline row, loaded and loading. */
+const MODEL_DISPLAY_ROW_CLASS = 'flex items-center gap-1 text-h6';
+/** The provider's mark: 16px, as the loaded icons. */
+const PROVIDER_ICON_BOX_CLASS = 'flex shrink-0 items-center justify-center';
+
 const ModelDisplay = React.forwardRef<HTMLDivElement, ModelDisplayProps>(
   (
     {
@@ -62,16 +68,35 @@ const ModelDisplay = React.forwardRef<HTMLDivElement, ModelDisplayProps>(
       hitRatePct,
       inputTokens,
       outputTokens,
+      loading = false,
       ...props
     },
     ref,
   ) => {
+    // ONE switch: while the model metadata loads (or in the page's loading state) the SAME row draws the provider's
+    // mark box (only when the provider has a mark), the name as a bar, and the "tokens used" tail as a bar when the
+    // loaded row would draw it (once the context window is known).
+    const isLoading = useLoadingScope() || loading;
     const icon = getProviderIcon(provider);
     const name = displayName || modelName;
     // v2 spells the counts out ("372 / 50,000 tokens used"); classic keeps them short.
     const isV2 = useChatAppearance() === CHAT_APPEARANCE.V2;
     const formatCount = (count: number) => (isV2 ? count.toLocaleString('en-US') : formatTokenCount(count));
 
+    if (isLoading) {
+      return (
+        <div ref={ref} aria-hidden className={cn(MODEL_DISPLAY_ROW_CLASS, className)} {...props}>
+          {icon && (
+            <span className={PROVIDER_ICON_BOX_CLASS}>
+              <MediaSkeleton.Icon size="sm" />
+            </span>
+          )}
+          <TextLineSkeleton type="h6" className="w-24" />
+          {contextWindow != null && <TextLineSkeleton type="h6" className="ml-auto w-32" />}
+        </div>
+      );
+    }
+
     // Inline pill: provider icon + model name + "X / Y tokens used".
     // The "tokens used" tail renders as soon as `contextWindow` is known
     // (typically from the leading metadata frame). `usedTokens` lags by a
@@ -79,8 +104,8 @@ const ModelDisplay = React.forwardRef<HTMLDivElement, ModelDisplayProps>(
     // usage frame. Showing "— / 200K tokens used" early gives users the
     // model's capacity context without waiting for the first byte.
     const inline = (
-      <div ref={ref} className={cn('flex items-center gap-1 text-ods-text-secondary', 'text-h6', className)} {...props}>
-        {icon && <span className="flex items-center justify-center">{icon}</span>}
+      <div ref={ref} className={cn(MODEL_DISPLAY_ROW_CLASS, 'text-ods-text-secondary', className)} {...props}>
+        {icon && <span className={PROVIDER_ICON_BOX_CLASS}>{icon}</span>}
         <span className="font-body">{name}</span>
         {contextWindow != null && (
           <span className="ml-auto opacity-70 text-h6">
@@ -167,33 +192,4 @@ function BreakdownRow({
 
 ModelDisplay.displayName = 'ModelDisplay';
 
-export interface ModelDisplaySkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Also render the right-aligned "tokens used" tail placeholder. The token
-   *  tail only appears once `contextWindow` is known, so the default skeleton
-   *  shows just the left part (provider icon + model name). */
-  showTokens?: boolean;
-}
-
-/**
- * Loading placeholder for the {@link ModelDisplay} inline pill. Mirrors its
- * layout (provider icon + model name) so the footer doesn't shift when the
- * real model metadata resolves. The "tokens used" tail is opt-in via
- * `showTokens`, matching ModelDisplay (which only renders it once the context
- * window is known).
- */
-const ModelDisplaySkeleton = React.forwardRef<HTMLDivElement, ModelDisplaySkeletonProps>(
-  ({ className, showTokens = false, ...props }, ref) => (
-    <div ref={ref} aria-hidden className={cn('flex items-center gap-1 text-h6', className)} {...props}>
-      {/* provider icon */}
-      <UnifiedSkeleton className="h-5 w-4 shrink-0 rounded-sm" />
-      {/* model name */}
-      <UnifiedSkeleton className="h-5 w-24" />
-      {/* "X / Y tokens used" tail — only when tokens are expected */}
-      {showTokens && <UnifiedSkeleton className="ml-auto h-3 w-32" />}
-    </div>
-  ),
-);
-
-ModelDisplaySkeleton.displayName = 'ModelDisplaySkeleton';
-
-export { ModelDisplay, ModelDisplaySkeleton };
+export { ModelDisplay };