@flamingo-stack/openframe-frontend-core 0.0.780 → 0.0.782

package/src/components/chat/context-items-list.tsx

@@ -15,7 +15,9 @@ import { Component, type ReactNode, type UIEvent, useCallback } from 'react';
 import { cn } from '../../utils/cn';
 import { CheckFillIcon } from '../icons-v2-generated/signs-and-symbols/check-fill-icon';
 import { LoadingRegion } from '../loading/loading-region';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { BUTTON_KIND_CLASS, Button } from '../ui/button';
+import { LoadingItems, loadingItemProps, useLoadingScope } from '../ui/loading-scope';
 import type { ChatContextItem } from './types/context-item.types';
 
 const itemKey = (i: { type: string; id: string }) => `${i.type}:${i.id}`;
@@ -24,11 +26,18 @@ const itemKey = (i: { type: string; id: string }) => `${i.type}:${i.id}`;
 // every level is visually identical and there's one source of truth.
 export const CONTEXT_ROW_CLASS =
   'flex w-full items-center gap-2 border-b border-ods-border bg-ods-bg py-3 pl-4 pr-2 text-left outline-none transition-colors last:border-b-0 hover:bg-ods-bg-hover focus-visible:bg-ods-bg-hover [&_svg]:size-4 md:[&_svg]:size-6';
-export const CONTEXT_ICON_CLASS = 'flex size-4 shrink-0 items-center justify-center text-ods-text-secondary md:size-6';
+export const CONTEXT_ICON_CLASS =
+  'flex size-4 shrink-0 items-center justify-center text-ods-text-secondary md:size-6 [&_svg]:size-4 md:[&_svg]:size-6';
 export const CONTEXT_LABEL_CLASS = 'flex-1 truncate text-h4 font-medium leading-6 text-ods-text-primary';
-export const CONTEXT_BACK_CLASS =
-  'flex shrink-0 items-center gap-2 border-b border-ods-border bg-ods-bg px-2 py-3 text-left text-h4 font-medium leading-6 text-ods-text-secondary outline-none transition-colors hover:text-ods-text-primary [&_svg]:size-4 md:[&_svg]:size-6';
+/** The bar that pins a level's Back row while the list under it scrolls: its surface keeps rows from showing through. */
+export const CONTEXT_BACK_BAR_CLASS = 'sticky top-0 z-10 shrink-0 bg-ods-bg';
 export const CONTEXT_STATE_CLASS = 'bg-ods-bg px-4 py-3 text-h4 text-ods-text-secondary';
+/** The items list's scroll box, loaded and loading. Capped at 340px but never past ~half the viewport, so on short
+ *  screens the list (inside the bottom-anchored picker popover) still fits and scrolls. */
+const CONTEXT_LIST_CLASS = 'max-h-[min(340px,45vh)] divide-y divide-ods-border overflow-y-auto overscroll-contain';
+
+/** The rows a page of items holds when the host states no page size: the loading list and each next page draw it. */
+const CONTEXT_ITEMS_PAGE_SIZE = 10;
 
 // ===========================================================================
 // ROW — one menu row (icon + label + optional trailing). Shared primitive.
@@ -46,6 +55,9 @@ export interface ContextMenuRowProps {
   selected?: boolean;
   role?: 'menuitem' | 'option';
   title?: string;
+  /** The row's item is still being read: the SAME row (an inert `div`) draws its label as a bar. In a loading scope a
+   *  row with no label yet does the same. */
+  loading?: boolean;
 }
 
 export function ContextMenuRow({
@@ -57,21 +69,42 @@ export function ContextMenuRow({
   selected,
   role = 'menuitem',
   title,
+  loading: loadingProp = false,
+  ...props
 }: ContextMenuRowProps) {
+  // ONE switch. A row with a label of its own (a static menu entry such as "Assign Item") stays real in a loading
+  // scope; only a row whose item is not here yet draws its label as a bar.
+  const inScope = useLoadingScope();
+  const loading = loadingProp || (inScope && (label == null || label === ''));
+  const content = (
+    <>
+      {icon != null && <span className={CONTEXT_ICON_CLASS}>{icon}</span>}
+      <span className={CONTEXT_LABEL_CLASS}>
+        {loading ? <TextLineSkeleton type="inherit" as="span" className="w-1/2" /> : label}
+      </span>
+      {!loading && trailing}
+    </>
+  );
+  if (loading) {
+    return (
+      <div aria-hidden className={BUTTON_KIND_CLASS.row} {...loadingItemProps(props)}>
+        {content}
+      </div>
+    );
+  }
   return (
-    <button
+    <Button
+      variant="row"
       type="button"
       role={role}
       aria-selected={role === 'option' ? selected : undefined}
       disabled={disabled}
       onClick={onClick}
       title={title}
-      className={cn(CONTEXT_ROW_CLASS, disabled && 'cursor-not-allowed opacity-40 hover:bg-ods-bg')}
+      {...loadingItemProps(props)}
     >
-      {icon != null && <span className={CONTEXT_ICON_CLASS}>{icon}</span>}
-      <span className={CONTEXT_LABEL_CLASS}>{label}</span>
-      {trailing}
-    </button>
+      {content}
+    </Button>
   );
 }
 
@@ -79,19 +112,9 @@ export function ContextMenuRow({
 // SKELETON — Suspense fallback (initial load) + inline load-more rows.
 // ===========================================================================
 
-export function ContextItemsSkeleton({ count }: { count: number }) {
-  return (
-    <>
-      {Array.from({ length: count }, (_, i) => (
-        <div
-          key={`ctx-skeleton-${i}`}
-          className="flex items-center border-b border-ods-border bg-ods-bg py-3 pl-4 pr-2 last:border-b-0"
-        >
-          <UnifiedSkeleton className="h-5 w-1/2" />
-        </div>
-      ))}
-    </>
-  );
+/** Item rows while they are read: `count` loading item rows (`ContextMenuRow loading`), each one item of the list. */
+function ContextItemsSkeleton({ count }: { count: number }) {
+  return <LoadingItems count={count}>{() => <ContextMenuRow loading label="" data-loading-item />}</LoadingItems>;
 }
 
 // ===========================================================================
@@ -112,6 +135,9 @@ export interface ContextItemsListProps {
   onLoadMore?: () => void;
   /** A page is currently loading (shows inline skeleton rows). */
   loadingMore?: boolean;
+  /** The host's page size: the rows the loading list and each next page draw. Default
+   *  {@link CONTEXT_ITEMS_PAGE_SIZE}. */
+  pageSize?: number;
   emptyLabel?: string;
   className?: string;
 }
@@ -124,9 +150,12 @@ export function ContextItemsList({
   hasMore = false,
   onLoadMore,
   loadingMore = false,
+  pageSize = CONTEXT_ITEMS_PAGE_SIZE,
   emptyLabel = 'No results',
   className,
 }: ContextItemsListProps) {
+  // ONE switch: in a loading scope (the picker's Suspense fallback) the list is one page of its own skeleton rows.
+  const loading = useLoadingScope();
   const onScroll = useCallback(
     (e: UIEvent<HTMLDivElement>) => {
       if (!hasMore || loadingMore || !onLoadMore) return;
@@ -136,20 +165,20 @@ export function ContextItemsList({
     [hasMore, loadingMore, onLoadMore],
   );
 
+  if (loading) {
+    return (
+      <div className={cn(CONTEXT_LIST_CLASS, className)}>
+        <ContextItemsSkeleton count={pageSize} />
+      </div>
+    );
+  }
+
   if (items.length === 0 && !loadingMore) {
     return <div className={CONTEXT_STATE_CLASS}>{emptyLabel}</div>;
   }
 
   return (
-    <div
-      role="listbox"
-      aria-label="Items"
-      onScroll={onScroll}
-      // Cap to 340px but never exceed ~half the viewport, so on short screens the
-      // results list (inside the bottom-anchored picker popover) still fits and
-      // scrolls instead of overflowing past the top edge.
-      className={cn('max-h-[min(340px,45vh)] overflow-y-auto overscroll-contain', className)}
-    >
+    <div role="listbox" aria-label="Items" onScroll={onScroll} className={cn(CONTEXT_LIST_CLASS, className)}>
       {items.map(item => {
         const selected = selectedKeys.has(itemKey(item));
         return (
@@ -162,13 +191,15 @@ export function ContextItemsList({
             label={item.label}
             title={!selected && atLimit ? 'Selection limit reached' : undefined}
             trailing={selected ? <CheckFillIcon className="size-4 shrink-0 text-ods-accent md:size-6" /> : undefined}
+            // One item of a read list, like its loading row.
+            data-loading-item
           />
         );
       })}
       {loadingMore && (
         // `contents`: the rows stay the list's own rows; the region only adds the one announcement.
         <LoadingRegion label="Loading more items" className="contents">
-          <ContextItemsSkeleton count={3} />
+          <ContextItemsSkeleton count={pageSize} />
         </LoadingRegion>
       )}
     </div>

package/src/components/chat/embeddable-chat.tsx

@@ -64,6 +64,7 @@ import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu';
 import { Button } from '../ui/button';
 import { Drawer, DrawerContent } from '../ui/drawer';
 import { HoverDropdown, type HoverDropdownItem } from '../ui/hover-dropdown';
+import { LoadingItems } from '../ui/loading-scope';
 import { CollisionBoundaryContext, PortalContainerContext } from '../ui/portal-container';
 import { SquareAvatar } from '../ui/square-avatar';
 import { ChatAppearanceContext } from './chat-appearance-context';
@@ -72,10 +73,8 @@ import { ChatAttachmentChipStrip } from './chat-attachment-bar';
 import { ChatComposer, type ChatComposerLock } from './chat-composer';
 import { chatDialogMenuItems } from './chat-dialog-menu-items';
 import { CHAT_BLOCK_MIN_WIDTH, MINGO_V2_RAIL_WIDTH } from './chat-dimensions';
-import { ChatHeaderIconButton } from './chat-header-icon-button';
 import { ChatHeaderSearchField } from './chat-header-search-field';
 import { ChatMessageList } from './chat-message-list';
-import { ChatMessageListSkeleton } from './chat-message-skeleton';
 import { ChatPanelContext, type ChatPanelHandle } from './chat-panel-context';
 import { ChatPanelHeader, type ChatPanelHeaderProps } from './chat-panel-header';
 import type { ChatRef } from './chat-ref.types';
@@ -98,8 +97,7 @@ import { MingoChatHeader } from './mingo-chat-header';
 import { ChatDialogModals } from './mingo-chat-modals';
 import { MingoChatRail, type MingoDialogStatus } from './mingo-chat-rail';
 import { MingoHistoryRail } from './mingo-history-rail';
-import { MingoOnboardingCard } from './mingo-onboarding-card';
-import { MingoOnboardingCardSkeleton } from './mingo-onboarding-card-skeleton';
+import { MINGO_ONBOARDING_SKELETON_ROWS, MingoOnboardingCard } from './mingo-onboarding-card';
 import { MingoWelcome, type MingoWelcomeProps } from './mingo-welcome';
 import { NavLinkAnchorViaRuntime } from './nav-link-anchor-via-runtime';
 import { accentFromIdentityIcon, getAgentAccent } from './quick-action-chip';
@@ -411,6 +409,15 @@ export interface EmbeddableChatProps {
     'onStartGuideChat' | 'hasExistingChats' | 'onQuickActionHover' | 'onQuickActionHoverEnd'
   >;
 
+  /**
+   * The host's conversation page size: how many dialogs one page of the list
+   * holds (the `limit` the host's dialog reader asks for). Every conversation
+   * list's loading state (the history rails, the v2 chat list, the welcome's
+   * history) draws exactly one page of rows. Defaults to
+   * `CHAT_HISTORY_PAGE_SIZE` (the lib's own adapters' page).
+   */
+  historyPageSize?: number;
+
   /**
    * Content overrides for the Guide-mode empty state (`<GuideWelcome>`):
    * greeting `title`/`subtitle` and the `quickActions` chips. Each field falls
@@ -649,29 +656,6 @@ function RailSlot({
  */
 const DEFAULT_AI_AGENT_CONFIG_URL = (slug: string): string => `/api/ai-agents/${encodeURIComponent(slug)}`;
 
-/**
- * Per-row width palette for the empty-state skeleton stack. Cycled
- * by index so each render is deterministic (no jitter between
- * loading frames) and the stack reads like a real, irregular list:
- *
- *   - titles vary from short ("Webinars") to long ("OpenFrame Pull Requests")
- *   - slashes vary from `/docs` to `/getting-started`
- *   - one row collapses to a single-line description to mimic the
- *     short-copy entries returned by `/api/docs/commands`.
- */
-const SKELETON_ROW_VARIANTS: ReadonlyArray<{
-  titleWidth: string;
-  slashWidth: string;
-  descriptionLines: 1 | 2;
-}> = [
-  { titleWidth: 'w-32', slashWidth: 'w-20', descriptionLines: 2 },
-  { titleWidth: 'w-28', slashWidth: 'w-16', descriptionLines: 2 },
-  { titleWidth: 'w-40', slashWidth: 'w-24', descriptionLines: 2 },
-  { titleWidth: 'w-44', slashWidth: 'w-28', descriptionLines: 2 },
-  { titleWidth: 'w-36', slashWidth: 'w-24', descriptionLines: 1 },
-  { titleWidth: 'w-24', slashWidth: 'w-16', descriptionLines: 2 },
-];
-
 // =============================================================================
 // Slash-command dispatch
 // =============================================================================
@@ -977,14 +961,17 @@ function SourceChips({
             />
           ))}
         {hasOverflow && (
-          <button
+          <Button
+            variant="link"
+            size="compact"
+            noPaddingX
+            type="button"
             onClick={() => setExpanded(!expanded)}
-            className="inline-flex cursor-pointer items-center gap-1 rounded border border-ods-accent bg-ods-card px-2 py-0.5 text-ods-accent transition-colors text-h6 hover:bg-ods-accent/10"
             aria-expanded={expanded}
             aria-label={expanded ? 'Show fewer sources' : `Show ${hiddenCount} additional retrieved sources`}
           >
             {expanded ? 'Show less' : `+${hiddenCount} more retrieved ${hiddenCount === 1 ? 'source' : 'sources'}`}
-          </button>
+          </Button>
         )}
       </div>
     </div>
@@ -1073,6 +1060,7 @@ function EmbeddableChatInner({
   userDisplayName,
   userAvatarUrl,
   mingoWelcome,
+  historyPageSize,
   guideWelcome,
   contextPicker,
   renderMention,
@@ -2550,6 +2538,7 @@ function EmbeddableChatInner({
       void loadMoreDialogs();
     },
     isLoadingHistory: dialogsInitialLoading,
+    pageSize: historyPageSize,
     loadError: dialogsLoadError,
     onRetry: reloadDialogs,
   };
@@ -2676,7 +2665,10 @@ function EmbeddableChatInner({
                   // single-bar header (no rail search / collapse controls).
                   <div className="flex h-14 w-full flex-shrink-0 overflow-hidden border-b border-ods-border bg-ods-card">
                     {railPresence.mounted && (
-                      <RailSlot active={railPresence.active} innerClassName="flex overflow-hidden">
+                      <RailSlot
+                        active={railPresence.active}
+                        innerClassName="flex divide-x divide-ods-border overflow-hidden"
+                      >
                         {archiveOpen ? (
                           // Archive open in the wide layout — the rail header
                           // turns into a "Chat Archive" back bar (the list itself
@@ -2684,9 +2676,9 @@ function EmbeddableChatInner({
                           // Back is a full-height leading cell, matching the other
                           // header cells (not a small inline chevron).
                           <>
-                            <ChatHeaderIconButton divider="right" onClick={closeArchive} aria-label="Back to chats">
+                            <Button variant="cell" className="w-14" onClick={closeArchive} aria-label="Back to chats">
                               <Chevron02LeftIcon size={24} />
-                            </ChatHeaderIconButton>
+                            </Button>
                             <div className="flex min-w-0 flex-1 items-center px-[var(--spacing-system-mf)]">
                               <span className="min-w-0 flex-1 truncate text-ods-text-primary text-h3">
                                 Chat Archive
@@ -2713,39 +2705,47 @@ function EmbeddableChatInner({
                                   </span>
                                 </div>
                                 {mingoCaps.onSearchChange && (
-                                  <ChatHeaderIconButton
+                                  <Button
+                                    variant="cell"
+                                    className="w-14"
                                     onClick={() => setRailSearchOpen(o => !o)}
                                     aria-label="Search chats"
                                     aria-pressed={railSearchOpen}
                                   >
                                     <SearchIcon size={24} />
-                                  </ChatHeaderIconButton>
+                                  </Button>
                                 )}
                               </>
                             )}
                             {headerOnOpenArchive && (
-                              <ChatHeaderIconButton onClick={headerOnOpenArchive} aria-label="Chat archive">
+                              <Button
+                                variant="cell"
+                                className="w-14"
+                                onClick={headerOnOpenArchive}
+                                aria-label="Chat archive"
+                              >
                                 <ClockHistoryIcon size={24} />
-                              </ChatHeaderIconButton>
+                              </Button>
                             )}
                           </>
                         )}
                       </RailSlot>
                     )}
 
-                    <div className="flex min-w-0 flex-1">
+                    <div className="flex min-w-0 flex-1 divide-x divide-ods-border">
                       {/* Rail collapse / expand toggle — lives on the chat side,
                           at its left edge (Figma 259:90465). Right arrow collapses
                           the list; left arrow brings it back. */}
-                      <button
+                      <Button
+                        variant="cell"
                         type="button"
                         onClick={toggleRailCollapsed}
                         aria-label={splitActive ? 'Collapse chat list' : 'Show chat list'}
                         aria-pressed={!splitActive}
-                        className="flex size-14 shrink-0 items-center justify-center border-r border-ods-border 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-ods-accent"
+                        className="size-14"
                       >
                         {splitActive ? <Arrow02RightIcon size={24} /> : <Arrow02LeftIcon size={24} />}
-                      </button>
+                      </Button>
                       {/* No back cell in the wide layout — the left rail (and
                           its collapse/expand toggle) already provides chat-list
                           navigation, so a back chevron would be redundant. */}
@@ -2774,9 +2774,9 @@ function EmbeddableChatInner({
                       </div>
 
                       {isViewingArchived && headerOnRestore && (
-                        <ChatHeaderIconButton onClick={headerOnRestore} aria-label="Unarchive chat">
+                        <Button variant="cell" className="w-14" onClick={headerOnRestore} aria-label="Unarchive chat">
                           <Refresh01LeftIcon size={24} />
-                        </ChatHeaderIconButton>
+                        </Button>
                       )}
                       {headerShowBack && !isViewingArchived && splitHeaderMenuItems.length > 0 && (
                         <ActionsMenuDropdown
@@ -2784,16 +2784,16 @@ function EmbeddableChatInner({
                           onCloseAutoFocus={e => e.preventDefault()}
                           groups={[{ items: splitHeaderMenuItems }]}
                           customTrigger={
-                            <ChatHeaderIconButton aria-label="Chat actions">
+                            <Button variant="cell" className="w-14" aria-label="Chat actions">
                               <Ellipsis01Icon size={24} />
-                            </ChatHeaderIconButton>
+                            </Button>
                           }
                         />
                       )}
                       {closeControl && (
-                        <ChatHeaderIconButton onClick={closeControl} aria-label="Close">
+                        <Button variant="cell" className="w-14" onClick={closeControl} aria-label="Close">
                           <XmarkIcon size={24} />
-                        </ChatHeaderIconButton>
+                        </Button>
                       )}
                     </div>
                   </div>
@@ -2856,6 +2856,7 @@ function EmbeddableChatInner({
                             void loadMoreDialogs();
                           }}
                           isLoadingHistory={dialogsInitialLoading}
+                          pageSize={historyPageSize}
                           loadError={dialogsLoadError}
                           onRetry={reloadDialogs}
                         />
@@ -2916,6 +2917,7 @@ function EmbeddableChatInner({
                           void loadMoreDialogs();
                         }}
                         isLoadingHistory={dialogsInitialLoading}
+                        pageSize={historyPageSize}
                         loadError={dialogsLoadError}
                         onRetry={reloadDialogs}
                       />
@@ -2928,88 +2930,82 @@ function EmbeddableChatInner({
                           >
                             {hasConversation ? (
                               <div className="flex min-h-0 flex-1 flex-col">
-                                {messagesInitialLoading ? (
-                                  // Match the real list's `fullWidth` layout so swapping
-                                  // skeleton → bubbles doesn't shift the column. The panel
-                                  // wrapper above already pads (`p-[var(--spacing-system-m)]`),
-                                  // so the skeleton sits flush (no inner px/pb).
+                                {/* While the thread loads the list draws its own loading
+                                    state, in the SAME box (`fullWidth`, the panel wrapper
+                                    above already pads). In `previewMode` the chat lives in a
+                                    fixed-height host box (e.g. the Mingo hero demo): `fill`
+                                    top-anchors and clips the loading rows so they read as
+                                    "the whole panel is loading" and never scroll. */}
+                                <ChatMessageList
+                                  messages={messages}
+                                  isLoading={messagesInitialLoading}
+                                  fill={previewMode}
+                                  // v2 thread: names without the colon, 24px
+                                  // faces, 16px between messages (shared with fae v2).
+                                  appearance={appearance}
+                                  isTyping={chatLoading}
+                                  // The stage the turn reports while the user waits
+                                  // ("Searching 28 sources"); the generic phrase otherwise.
+                                  typingMessage={streamingProgress ? chatProgressLabel(streamingProgress) : undefined}
+                                  // Sticky footer for approvals the host lifted out of the
+                                  // thread — see the prop's docblock.
+                                  pendingApprovals={pendingApprovals}
+                                  // Real drawer: the library's smart follow. Passive in-page
+                                  // demo (previewMode): deterministic hard pin instead — a
+                                  // scripted assistant-only stream from a cold mount never
+                                  // satisfies the library's "at bottom" gate, so the reply
+                                  // landed below the fold. `pinBottom` snaps to bottom on
+                                  // every frame; identical mechanism to the Fae demo box, so
+                                  // both surfaces behave 1:1.
+                                  autoScroll={!previewMode}
+                                  pinBottom={previewMode}
+                                  // Passive in-page demos (previewMode) let the surrounding
+                                  // page scroll over the thread; the real drawer keeps
+                                  // containment (deck slide-scroll fix).
+                                  overscrollContain={!previewMode}
+                                  assistantType="mingo"
+                                  assistantIcon={mingoAssistantIcon}
+                                  renderEntityCard={renderEntityCard}
+                                  resolveContextIcon={resolveContextIcon}
+                                  renderContextItem={renderContextItem}
+                                  renderMention={renderMention}
+                                  renderAfterMessage={renderMessageSources}
+                                  // Gated on `chatLoading` for the same reason the composer
+                                  // is: no second send while a turn is in flight. Passive
+                                  // demo hosts (previewMode) stay read-only.
+                                  onAskSelect={chatLoading || previewMode ? undefined : handleAskSelect}
+                                  NavLinkAnchor={NavLinkAnchorViaRuntime}
+                                  // Real Mingo drawer: hide the message-list scrollbar
+                                  // (scroll stays functional). Scoped here via `className`
+                                  // instead of `ChatMessageList` itself, so other list
+                                  // consumers (host chat, tickets) keep their thin bar.
                                   //
-                                  // In `previewMode` the chat lives in a fixed-height host box
-                                  // (e.g. the Mingo hero demo). The default bottom-anchored
-                                  // skeleton overflows a short panel and grows its OWN
-                                  // scrollbar — ugly. `fill` top-anchors + clips overflow so
-                                  // it reads as "the whole panel is loading" and never scrolls.
-                                  <ChatMessageListSkeleton fullWidth fill={previewMode} className="flex-1" />
-                                ) : (
-                                  <ChatMessageList
-                                    messages={messages}
-                                    // v2 thread: names without the colon, 24px
-                                    // faces, 16px between messages (shared with fae v2).
-                                    appearance={appearance}
-                                    isTyping={chatLoading}
-                                    // The stage the turn reports while the user waits
-                                    // ("Searching 28 sources"); the generic phrase otherwise.
-                                    typingMessage={streamingProgress ? chatProgressLabel(streamingProgress) : undefined}
-                                    // Sticky footer for approvals the host lifted out of the
-                                    // thread — see the prop's docblock.
-                                    pendingApprovals={pendingApprovals}
-                                    // Real drawer: the library's smart follow. Passive in-page
-                                    // demo (previewMode): deterministic hard pin instead — a
-                                    // scripted assistant-only stream from a cold mount never
-                                    // satisfies the library's "at bottom" gate, so the reply
-                                    // landed below the fold. `pinBottom` snaps to bottom on
-                                    // every frame; identical mechanism to the Fae demo box, so
-                                    // both surfaces behave 1:1.
-                                    autoScroll={!previewMode}
-                                    pinBottom={previewMode}
-                                    // Passive in-page demos (previewMode) let the surrounding
-                                    // page scroll over the thread; the real drawer keeps
-                                    // containment (deck slide-scroll fix).
-                                    overscrollContain={!previewMode}
-                                    assistantType="mingo"
-                                    assistantIcon={mingoAssistantIcon}
-                                    renderEntityCard={renderEntityCard}
-                                    resolveContextIcon={resolveContextIcon}
-                                    renderContextItem={renderContextItem}
-                                    renderMention={renderMention}
-                                    renderAfterMessage={renderMessageSources}
-                                    // Gated on `chatLoading` for the same reason the composer
-                                    // is: no second send while a turn is in flight. Passive
-                                    // demo hosts (previewMode) stay read-only.
-                                    onAskSelect={chatLoading || previewMode ? undefined : handleAskSelect}
-                                    NavLinkAnchor={NavLinkAnchorViaRuntime}
-                                    // Real Mingo drawer: hide the message-list scrollbar
-                                    // (scroll stays functional). Scoped here via `className`
-                                    // instead of `ChatMessageList` itself, so other list
-                                    // consumers (host chat, tickets) keep their thin bar.
-                                    //
-                                    // `previewMode` (the passive in-page demo) instead:
-                                    //  • KEEP the default thin scrollbar — the "elevator" —
-                                    //    so the Mingo demo's scroll controls match the Fae
-                                    //    demo box (which renders the default ChatMessageList
-                                    //    scrollbar) 1:1.
-                                    //  • Re-enable pointer events on the scroller: previewMode
-                                    //    puts `pointer-events-none` on the whole panel (line
-                                    //    ~1981) so the demo doesn't trap clicks, but that also
-                                    //    killed wheel/touch scroll on the thread (the Mingo
-                                    //    embed couldn't scroll while the Fae box could). Only
-                                    //    the scroller re-enables; composer + chrome stay inert.
-                                    className={
-                                      previewMode
-                                        ? 'pointer-events-auto flex-1'
-                                        : 'flex-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
-                                    }
-                                    // No inner `px`/`pb`: the panel wrapper already pads with
-                                    // `p-[var(--spacing-system-m)]`. The default content class
-                                    // adds `px-[var(--spacing-system-m)]` + `pb-…xs`, which
-                                    // double-inset the thread; `pb-0` overrides via twMerge.
-                                    contentClassName="max-w-none pb-0"
-                                    fullWidth
-                                    hasNextPage={hasMoreMessages}
-                                    isFetchingNextPage={isMessagesLoading}
-                                    onLoadMore={loadMoreMessages}
-                                  />
-                                )}
+                                  // `previewMode` (the passive in-page demo) instead:
+                                  //  • KEEP the default thin scrollbar — the "elevator" —
+                                  //    so the Mingo demo's scroll controls match the Fae
+                                  //    demo box (which renders the default ChatMessageList
+                                  //    scrollbar) 1:1.
+                                  //  • Re-enable pointer events on the scroller: previewMode
+                                  //    puts `pointer-events-none` on the whole panel (line
+                                  //    ~1981) so the demo doesn't trap clicks, but that also
+                                  //    killed wheel/touch scroll on the thread (the Mingo
+                                  //    embed couldn't scroll while the Fae box could). Only
+                                  //    the scroller re-enables; composer + chrome stay inert.
+                                  className={
+                                    previewMode
+                                      ? 'pointer-events-auto flex-1'
+                                      : 'flex-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
+                                  }
+                                  // No inner `px`/`pb`: the panel wrapper already pads with
+                                  // `p-[var(--spacing-system-m)]`. The default content class
+                                  // adds `px-[var(--spacing-system-m)]` + `pb-…xs`, which
+                                  // double-inset the thread; `pb-0` overrides via twMerge.
+                                  contentClassName="max-w-none pb-0"
+                                  fullWidth
+                                  hasNextPage={hasMoreMessages}
+                                  isFetchingNextPage={isMessagesLoading}
+                                  onLoadMore={loadMoreMessages}
+                                />
                               </div>
                             ) : activeMode === 'mingo' ? (
                               /* Figma node 7532:222444 — default (Mingo-mode) empty state:
@@ -3020,6 +3016,7 @@ function EmbeddableChatInner({
                                 onStartGuideChat={
                                   effectiveModes.guide ? () => handleActiveModeChange('guide') : undefined
                                 }
+                                historyPageSize={historyPageSize}
                                 {...mingoWelcome}
                                 // History now lives in its own list view (the wide rail or
                                 // the narrow "Current Chats" list), so the welcome is always
@@ -3089,16 +3086,13 @@ function EmbeddableChatInner({
                         rounded-md frame holds the cards on the dark surface. */}
                                 {(chipCommands.length > 0 || !commandsLoaded) && (
                                   <div className="shrink-0 overflow-hidden rounded-md border border-ods-border">
-                                    {!commandsLoaded &&
-                                      chipCommands.length === 0 &&
-                                      SKELETON_ROW_VARIANTS.map((variant, i) => (
-                                        <MingoOnboardingCardSkeleton
-                                          key={`chip-skeleton-${i}`}
-                                          titleWidth={variant.titleWidth}
-                                          slashWidth={variant.slashWidth}
-                                          descriptionLines={variant.descriptionLines}
-                                        />
-                                      ))}
+                                    {!commandsLoaded && chipCommands.length === 0 && (
+                                      <LoadingItems count={MINGO_ONBOARDING_SKELETON_ROWS}>
+                                        {i => (
+                                          <MingoOnboardingCard loading data-loading-item skeletonIndex={i} title="" />
+                                        )}
+                                      </LoadingItems>
+                                    )}
                                     {chipCommands.map(cmd => {
                                       const Icon = resolveIcon(cmd.iconName);
                                       const cmdId = cmd.id;
@@ -3116,6 +3110,7 @@ function EmbeddableChatInner({
                                           slashCommand={`/${cmdId}`}
                                           description={cmd.description}
                                           actions={cardActions}
+                                          data-loading-item
                                         />
                                       );
                                     })}