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

package/src/components/chat/ask-prompts.tsx

@@ -4,8 +4,10 @@ import type { ReactNode } from 'react';
 import { cn } from '../../utils/cn';
 import { AgentMark } from '../agent-mark';
 import { MingoAiButton, openAskAi } from '../navigation/mingo-ai-button';
+import { LoadingItems, useLoadingScope } from '../ui/loading-scope';
 import { ScrollShadow } from '../ui/scroll-fade';
-import { QuickActionChipButton, QuickActionChipSkeleton, type QuickActionIconSpec } from './quick-action-chip';
+import { ASK_PROMPTS_DEFAULT_COUNT } from './hooks/use-ask-prompts';
+import { QuickActionChipButton, type QuickActionIconSpec } from './quick-action-chip';
 import { ASK_AI_TRIGGER_ATTRIBUTE } from './utils/ask-ai-events';
 
 /** One question a page offers: the chip shows `label` as written, the chat is sent `prompt`. */
@@ -22,7 +24,7 @@ export interface AskPromptsProps {
   /**
    * How many chips the block shows and reserves room for: the same number in
    * the same slots on every load. Default: the prompts given (while `loading`,
-   * when there are none yet, two).
+   * when there are none yet, `ASK_PROMPTS_DEFAULT_COUNT`, the count a surface asks for).
    */
   count?: number;
   /** The questions are still being read: `count` chip skeletons in the chips' own slots. */
@@ -57,11 +59,10 @@ function AssistantGlyph({ icon, className }: { icon?: ReactNode; className: stri
   );
 }
 
-/** How many slots a loading block reserves when its host names no `count`. */
-const DEFAULT_LOADING_SLOTS = 2;
-/** The slots a block shows: the host's `count`; else the prompts it has, or the default while they load. */
+/** The slots a block shows: the host's `count`; else the prompts it has, or the count a surface asks for
+ *  (`ASK_PROMPTS_DEFAULT_COUNT`, the one count source) while they load. */
 const slotCount = (count: number | undefined, loading: boolean, prompts: readonly AskPrompt[]) =>
-  count ?? (loading ? DEFAULT_LOADING_SLOTS : prompts.length);
+  count ?? (loading ? ASK_PROMPTS_DEFAULT_COUNT : prompts.length);
 
 /** A skeleton chip's label width (in `ch`), by slot: a believable spread that is the same on every load. */
 const SKELETON_LABEL_CH = [26, 22, 30, 24, 20, 28] as const;
@@ -100,38 +101,37 @@ function QuestionChips({
   count: number;
   slotClassName?: string;
 }) {
+  // Fixed slots, keyed by position: the slot a chip skeleton holds while loading is the slot its question lands in.
   return (
-    <>
-      {Array.from({ length: count }, (_, slot) => {
+    <LoadingItems count={count}>
+      {slot => {
         const prompt = loading ? undefined : prompts[slot];
         return (
           <span
-            key={prompt?.id ?? `slot-${slot}`}
+            data-loading-item
             className={slotClassName ?? CHIP_SLOT_CLASS}
             {...(prompt ? { [ASK_AI_TRIGGER_ATTRIBUTE]: '' } : {})}
           >
-            {loading ? (
-              <QuickActionChipSkeleton
-                variant="question"
-                labelCh={SKELETON_LABEL_CH[slot % SKELETON_LABEL_CH.length]}
-              />
-            ) : prompt ? (
+            {(loading || prompt) && (
               <QuickActionChipButton
+                loading={loading}
                 variant="question"
-                label={prompt.label}
-                icon={prompt.icon}
+                label={prompt?.label ?? ''}
+                icon={prompt?.icon}
+                labelCh={SKELETON_LABEL_CH[slot % SKELETON_LABEL_CH.length]}
                 onSelect={() => {
+                  if (!prompt) return;
                   const request = { prompt: prompt.prompt ?? prompt.label };
                   if (onOpen) onOpen(request);
                   else openAskAi(source, request);
                   onAsk?.(prompt);
                 }}
               />
-            ) : null}
+            )}
           </span>
         );
-      })}
-    </>
+      }}
+    </LoadingItems>
   );
 }
 
@@ -149,7 +149,7 @@ function QuestionChips({
 export function AskPrompts({
   prompts,
   count: countProp,
-  loading = false,
+  loading: loadingProp = false,
   align = 'start',
   source,
   label,
@@ -159,6 +159,8 @@ export function AskPrompts({
   fadeColor,
   className,
 }: AskPromptsProps) {
+  // ONE switch: in a page's loading state (or while the host reads the questions) the slots hold chip skeletons.
+  const loading = useLoadingScope() || loadingProp;
   const count = slotCount(countProp, loading, prompts);
   if (!loading && prompts.length === 0) return null;
   const end = align === 'end';
@@ -204,7 +206,7 @@ export function AskCard({
   description,
   prompts,
   count: countProp,
-  loading = false,
+  loading: loadingProp = false,
   source,
   label,
   icon,
@@ -213,6 +215,8 @@ export function AskCard({
   shortcutHint = true,
   className,
 }: AskCardProps) {
+  // ONE switch: in a page's loading state (or while the host reads the questions) the slots hold chip skeletons.
+  const loading = useLoadingScope() || loadingProp;
   const count = slotCount(countProp, loading, prompts);
   return (
     <div

package/src/components/chat/chat-archive-page.tsx

@@ -2,10 +2,11 @@
 
 import { Chevron02LeftIcon, BoxArchiveIcon } from '../icons-v2-generated';
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon';
-import { ChatHeaderIconButton } from './chat-header-icon-button';
+import { Button } from '../ui/button';
+import { useLoadingScope } from '../ui/loading-scope';
 import { ChatListEmptyState } from './chat-list-empty-state';
 import { ChatPanelHeaderMobile } from './chat-panel-header-mobile';
-import { MingoChatHistory, MingoChatHistorySkeleton } from './mingo-chat-history';
+import { MingoChatHistory } from './mingo-chat-history';
 import type { DialogItem } from './types/component.types';
 
 interface ChatArchivePageBaseProps {
@@ -13,16 +14,17 @@ interface ChatArchivePageBaseProps {
   dialogs: ReadonlyArray<DialogItem>;
   /** Open an archived dialog. */
   onSelectDialog: (id: string) => void;
-  /** The delayed skeleton is visible (a slow first page is loading). */
+  /** A page is loading (the first: the list draws its loading state; a later one: its next-page rows). */
   isLoading?: boolean;
-  /** A first-page load is in flight but the delayed skeleton hasn't appeared
-   *  yet — keeps the empty state suppressed so it never flashes before the
-   *  skeleton/data arrives. */
+  /** A first-page load is in flight: the list draws its loading state, so the empty state never flashes. */
   isFetching?: boolean;
   /** Whether another page of archived dialogs remains. */
   hasMore?: boolean;
   /** Fetch the next page. */
   onLoadMore?: () => void;
+  /** The archive's page size: how many rows the first-load loading state draws. Default
+   *  `CHAT_HISTORY_PAGE_SIZE`. */
+  pageSize?: number;
 }
 
 /** Standalone (default): renders its own back/close header. `onBack` is
@@ -53,17 +55,18 @@ export type ChatArchivePageProps = ChatArchivePageStandaloneProps | ChatArchiveP
  * the list can slot into the split layout's left rail.
  */
 export function ChatArchivePage(props: ChatArchivePageProps) {
-  const { dialogs, onSelectDialog, isLoading = false, isFetching = false, hasMore = false, onLoadMore } = props;
-
-  // A first, uncached load is in flight but the delayed skeleton hasn't
-  // appeared yet (the 120ms window). Render nothing rather than flashing
-  // the empty state before the skeleton / data arrives.
-  //
-  // Hoisted out of the ternary on 2026-08-24: Prettier joins `//` comments
-  // that sit inside a nested ternary onto one line, in reverse order, and
-  // reattaches them to the following branch. The explanation is worth more
-  // than the inline position.
-  const suppressEmptyStateWhileFetching = isFetching;
+  const {
+    dialogs,
+    onSelectDialog,
+    isLoading = false,
+    isFetching = false,
+    hasMore = false,
+    onLoadMore,
+    pageSize,
+  } = props;
+  // ONE switch: a first page with nothing to show yet (in flight at all, or the page's loading state) is the list's
+  // own loading state, never a blank.
+  const firstLoad = useLoadingScope() || ((isLoading || isFetching) && dialogs.length === 0);
   return (
     <>
       {/* Mobile (<md): the shared mobile header — back to the list + a ⋯ menu
@@ -82,39 +85,39 @@ export function ChatArchivePage(props: ChatArchivePageProps) {
       )}
 
       {/* Desktop (md+): fixed-height bar with full-height divider action cells —
-          the back chevron is a leading `ChatHeaderIconButton` cell matching the
+          the back chevron is a leading ``Button variant="cell"`` cell matching the
           trailing close cell (not a small inline chevron). */}
       {!props.embedded && (
-        <div className="hidden h-14 w-full flex-shrink-0 overflow-hidden border-b border-ods-border bg-ods-card md:flex">
-          <ChatHeaderIconButton divider="right" onClick={props.onBack} aria-label="Back">
+        <div className="hidden h-14 w-full flex-shrink-0 divide-x divide-ods-border overflow-hidden border-b border-ods-border bg-ods-card md:flex">
+          <Button variant="cell" className="w-14" onClick={props.onBack} aria-label="Back">
             <Chevron02LeftIcon size={24} />
-          </ChatHeaderIconButton>
+          </Button>
           <div className="flex min-w-0 flex-1 items-center px-[var(--spacing-system-mf)] py-[var(--spacing-system-sf)]">
             <span className="truncate text-ods-text-primary text-h3">Chat Archive</span>
           </div>
 
           {props.onClose && (
-            <ChatHeaderIconButton onClick={props.onClose} aria-label="Close">
+            <Button variant="cell" className="w-14" onClick={props.onClose} aria-label="Close">
               <XmarkIcon size={24} />
-            </ChatHeaderIconButton>
+            </Button>
           )}
         </div>
       )}
       <div className="flex min-h-0 flex-1 flex-col p-[var(--spacing-system-m)]">
-        {dialogs.length > 0 ? (
+        {firstLoad || dialogs.length > 0 ? (
+          // The first load is the list's own loading state — the SAME grouped/
+          // bordered rows the active list draws, so the archive loads and lands
+          // without a layout shift.
           <MingoChatHistory
+            loading={firstLoad}
+            pageSize={pageSize}
             dialogs={dialogs}
             onSelectDialog={onSelectDialog}
             hasMore={hasMore}
             isLoadingMore={isLoading && dialogs.length > 0}
             onLoadMore={onLoadMore}
           />
-        ) : isLoading ? (
-          // First-load skeleton — the SAME grouped/bordered placeholder the
-          // active list uses, so the archive loads and lands without a layout
-          // shift or a mismatched flat-list skeleton.
-          <MingoChatHistorySkeleton />
-        ) : suppressEmptyStateWhileFetching ? null : (
+        ) : (
           // Empty state — mirrors the "Current Chats" rail empty state
           // (Figma 113:60939): centred 24px muted glyph + h4 title + h6 caption.
           <ChatListEmptyState

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

@@ -3,13 +3,13 @@ import { cn } from '../../utils/cn';
 import { Chevron02LeftIcon } from '../icons-v2-generated';
 import { PlusCircleIcon } from '../icons-v2-generated/signs-and-symbols/plus-circle-icon';
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui/button';
+import { useLoadingScope } from '../ui/loading-scope';
 import { LIVE_PULSE_CLASS } from '../ui/skeleton-surface';
 import { SquareAvatar as Avatar } from '../ui/square-avatar';
 import { TicketStatusTag, resolveStatusTagProps } from '../ui/ticket-status-tag';
 import { MspOrganizationCard } from './msp-organization-card';
-import { MspOrganizationCardSkeleton } from './msp-organization-card-skeleton';
 import type { ConnectionIndicatorProps, ChatContainerProps, ChatHeaderProps } from './types';
 
 const ConnectionIndicator: FC<ConnectionIndicatorProps> = ({ status }) => {
@@ -78,11 +78,16 @@ const ChatHeader = forwardRef<HTMLDivElement, ChatHeaderProps>(
       isMspLoading = false,
       fullWidth = false,
       bare = false,
-      isLoading = false,
+      isLoading: isLoadingProp = false,
       ...props
     },
     ref,
   ) => {
+    // ONE switch: in a page's loading state (or while the host reads the identity) the identity is its skeleton.
+    const inScope = useLoadingScope();
+    const isLoading = inScope || isLoadingProp;
+    // The MSP card: read with the page (a loading scope) or by the host (`isMspLoading`), drawn in its loading form.
+    const mspLoading = inScope || isMspLoading;
     const cardClasses = bare ? '' : 'rounded-md bg-ods-card border border-ods-border';
     return (
       <div
@@ -108,34 +113,28 @@ const ChatHeader = forwardRef<HTMLDivElement, ChatHeaderProps>(
         )}
         <div className={cardClasses}>
           <div className="flex items-center justify-between gap-4 px-4 py-3">
-            {isLoading ? (
-              <div className="flex items-center gap-3">
-                {/* 64px round avatar placeholder — matches the `w-16 h-16`
-                    rounded-full avatar / userIcon block below. */}
-                <UnifiedSkeleton className="h-16 w-16 shrink-0 rounded-full" />
-                <div className="flex flex-col gap-1">
-                  {/* Name line — sized to the `text-h3` name. */}
-                  <UnifiedSkeleton className="h-6 w-40" />
-                  {/* Server line — sized to the `text-h4` secondary row. */}
-                  <UnifiedSkeleton className="h-4 w-28" />
+            <div className="flex items-center gap-3">
+              {userIcon && !isLoading ? (
+                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-ods-accent">{userIcon}</div>
+              ) : (
+                <Avatar
+                  loading={isLoading}
+                  src={userAvatar}
+                  alt={userName}
+                  fallback={userName}
+                  size="xl"
+                  variant="round"
+                  className="bg-ods-flamingo-pink"
+                />
+              )}
+              {isLoading ? (
+                <div className="flex flex-col">
+                  {/* Name line — the `text-h3` name. */}
+                  <TextLineSkeleton type="h3" className="w-40" />
+                  {/* Server line — the `text-h4` secondary row. */}
+                  <TextLineSkeleton type="h4" className="w-28" />
                 </div>
-              </div>
-            ) : (
-              <div className="flex items-center gap-3">
-                {userIcon ? (
-                  <div className="flex h-16 w-16 items-center justify-center rounded-full bg-ods-accent">
-                    {userIcon}
-                  </div>
-                ) : (
-                  <Avatar
-                    src={userAvatar}
-                    alt={userName}
-                    fallback={userName}
-                    size="xl"
-                    variant="round"
-                    className="bg-ods-flamingo-pink"
-                  />
-                )}
+              ) : (
                 <div className="flex flex-col">
                   <span className="text-h3">{userName}</span>
                   <div className="flex items-center gap-2">
@@ -147,8 +146,8 @@ const ChatHeader = forwardRef<HTMLDivElement, ChatHeaderProps>(
                     )}
                   </div>
                 </div>
-              </div>
-            )}
+              )}
+            </div>
             <div className="flex items-center gap-1">
               {showNewChat && onNewChat && (
                 <Button
@@ -179,17 +178,15 @@ const ChatHeader = forwardRef<HTMLDivElement, ChatHeaderProps>(
               claims this space, so it wins when both are provided. The card
               already draws the chrome: strip the section's own ring and keep
               only the bottom rounding so its bg fits the card corners. */}
-          {!ticketInfo && (isMspLoading || mspOrganization) && (
+          {!ticketInfo && (mspLoading || mspOrganization) && (
             <>
               <div className="h-px bg-ods-border" />
-              {isMspLoading || !mspOrganization ? (
-                <MspOrganizationCardSkeleton className={cn('rounded-none ring-0', !bare && 'rounded-b-md')} />
-              ) : (
-                <MspOrganizationCard
-                  {...mspOrganization}
-                  className={cn('rounded-none ring-0', !bare && 'rounded-b-md', mspOrganization.className)}
-                />
-              )}
+              <MspOrganizationCard
+                name=""
+                {...mspOrganization}
+                loading={mspLoading || !mspOrganization}
+                className={cn('rounded-none ring-0', !bare && 'rounded-b-md', mspOrganization?.className)}
+              />
             </>
           )}
           {ticketInfo && (
@@ -203,6 +200,7 @@ const ChatHeader = forwardRef<HTMLDivElement, ChatHeaderProps>(
                   >
                     {ticketInfo.title}
                   </span>
+                  {/* loading-standard-ok(OPTIONAL_MARK): the host hands `ticketInfo` in, the same in both forms (no read of this component decides it) */}
                   {ticketInfo.meta && (
                     <div
                       className="truncate text-ods-text-secondary text-h6"

package/src/components/chat/chat-context-memory-bar.tsx

@@ -26,6 +26,7 @@ import { useEffect, useRef, useState } from 'react';
 import { cn } from '../../utils/cn';
 import { Ellipsis01Icon } from '../icons-v2-generated/interface/ellipsis-01-icon';
 import { XmarkCircleIcon } from '../icons-v2-generated/signs-and-symbols/xmark-circle-icon';
+import { Button } from '../ui/button';
 import { CONTEXT_ICON_CLASS, CONTEXT_LABEL_CLASS, CONTEXT_ROW_CLASS } from './context-items-list';
 import type { ChatContextItem } from './types/context-item.types';
 
@@ -108,20 +109,18 @@ export function ChatContextMemoryBar({
         {items.length} recently viewed {items.length === 1 ? 'item' : 'items'} in context
       </p>
 
-      <button
+      <Button
+        variant="transparent"
+        size="icon-sm"
         type="button"
         aria-label="Show remembered context"
         aria-expanded={open}
         title="Show remembered context"
         onClick={() => setOpen(o => !o)}
-        className={cn(
-          'flex size-4 shrink-0 items-center justify-center rounded outline-none transition-colors [&_svg]:size-4',
-          open ? 'text-ods-text-primary' : 'text-ods-text-secondary hover:text-ods-text-primary',
-          'focus-visible:text-ods-text-primary',
-        )}
+        className="shrink-0"
       >
         <Ellipsis01Icon size={16} />
-      </button>
+      </Button>
 
       {open && (
         <div
@@ -141,15 +140,17 @@ export function ChatContextMemoryBar({
                 {item.label}
               </span>
               {onRemove && (
-                <button
+                <Button
+                  variant="transparent"
+                  size="icon-sm"
                   type="button"
                   onClick={() => onRemove(item)}
                   disabled={disabled}
                   aria-label={`Remove ${item.label} from context`}
-                  className="flex size-4 shrink-0 items-center justify-center text-ods-text-secondary outline-none transition-colors hover:text-ods-text-primary focus-visible:text-ods-text-primary disabled:cursor-not-allowed disabled:opacity-40 md:size-6"
+                  className="shrink-0"
                 >
-                  <XmarkCircleIcon className="size-4 shrink-0 md:size-6" />
-                </button>
+                  <XmarkCircleIcon />
+                </Button>
               )}
             </div>
           ))}

package/src/components/chat/chat-context-picker.tsx

@@ -20,7 +20,7 @@
  */
 
 import { QueryErrorResetBoundary } from '@tanstack/react-query';
-import { Fragment, Suspense, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { ReactNode } from 'react';
 import { cn } from '../../utils/cn';
 import { Chevron02LeftIcon } from '../icons-v2-generated/arrows/chevron-02-left-icon';
@@ -29,12 +29,14 @@ import { SearchIcon } from '../icons-v2-generated/interface/search-icon';
 import { Upload02Icon } from '../icons-v2-generated/interface/upload-02-icon';
 import { PlusIcon } from '../icons-v2-generated/signs-and-symbols/plus-icon';
 import { XmarkCircleIcon } from '../icons-v2-generated/signs-and-symbols/xmark-circle-icon';
-import { LoadingRegion } from '../loading/loading-region';
+import { LoadingSuspense } from '../loading/loading-fallback';
+import { Button } from '../ui/button';
+import { LOADING_NOOP } from '../ui/loading-scope';
 import {
-  CONTEXT_BACK_CLASS,
+  CONTEXT_BACK_BAR_CLASS,
   CONTEXT_STATE_CLASS,
   ContextErrorBoundary,
-  ContextItemsSkeleton,
+  ContextItemsList,
   ContextMenuRow,
 } from './context-items-list';
 import type { ChatContextEntityType, ChatContextItem, ChatContextPickerConfig } from './types/context-item.types';
@@ -42,8 +44,8 @@ import type { ChatContextEntityType, ChatContextItem, ChatContextPickerConfig }
 /** Default ceiling on selected context items (Figma spec). */
 export const CHAT_CONTEXT_ITEMS_DEFAULT_MAX = 10;
 
-/** Skeleton row count for the items Suspense fallback. */
-const ITEMS_SKELETON_ROWS = 10;
+/** The items list the Suspense fallback draws in a loading scope: no items yet, nothing selectable. */
+const NO_SELECTED_KEYS: Set<string> = new Set();
 
 /** Debounce (ms) before the typed query is handed to `renderItems`. */
 const SEARCH_DEBOUNCE_MS = 300;
@@ -88,7 +90,9 @@ export function ChatComposerPlusMenu({
     // `relative` so the dropdown anchors to the button itself (bottom-full),
     // aligning the popover to the `+` rather than the input row.
     <span className="relative inline-flex">
-      <button
+      <Button
+        variant="transparent"
+        size="icon-sm"
         type="button"
         data-context-trigger=""
         disabled={disabled}
@@ -96,14 +100,10 @@ export function ChatComposerPlusMenu({
         aria-expanded={open}
         title="Add context"
         onClick={onToggle}
-        className={cn(
-          'flex h-6 w-6 shrink-0 items-center justify-center rounded outline-none transition-colors',
-          open ? 'text-ods-accent' : 'text-ods-text-secondary hover:text-ods-text-primary active:text-ods-accent',
-          'focus-visible:text-ods-text-primary disabled:cursor-not-allowed disabled:opacity-40',
-        )}
+        className="shrink-0"
       >
-        <PlusIcon className="h-6 w-6" />
-      </button>
+        <PlusIcon />
+      </Button>
       {dropdown}
     </span>
   );
@@ -307,7 +307,7 @@ export function ChatContextPicker({
     >
       {view === 'root' ? (
         /* Level 0 — Upload File / Assign Item (Figma 31:28312). */
-        <div role="menu" aria-label="Add context">
+        <div role="menu" aria-label="Add context" className="divide-y divide-ods-border">
           {config.onUploadFile && (
             <ContextMenuRow
               icon={<Upload02Icon size={24} />}
@@ -320,17 +320,15 @@ export function ChatContextPicker({
       ) : view === 'types' ? (
         /* Level 1 — Back + entity-type list (Figma 31:28708). Back stays pinned;
            the type list scrolls if it can't fit the capped popover height. */
-        <div role="menu" aria-label="Context types" className="flex flex-col">
-          <button
-            type="button"
-            onClick={() => setView('root')}
-            // Pinned while the popover body scrolls (the root is the scroll
-            // container) — `bg-ods-bg` keeps rows from showing through.
-            className={cn(CONTEXT_BACK_CLASS, 'sticky top-0 z-10')}
-          >
-            <Chevron02LeftIcon size={24} className="shrink-0" />
-            <span className="truncate">Back</span>
-          </button>
+        <div role="menu" aria-label="Context types" className="flex flex-col divide-y divide-ods-border">
+          {/* Pinned while the popover body scrolls (the root is the scroll
+              container) — the bar's `bg-ods-bg` keeps rows from showing through. */}
+          <div className={CONTEXT_BACK_BAR_CLASS}>
+            <Button variant="row" type="button" onClick={() => setView('root')}>
+              <Chevron02LeftIcon size={24} />
+              <span className="truncate">Back</span>
+            </Button>
+          </div>
           {visibleTypes.length === 0 ? (
             <div className={CONTEXT_STATE_CLASS}>No matching types</div>
           ) : (
@@ -342,10 +340,12 @@ export function ChatContextPicker({
       ) : activeType ? (
         /* Level 2 — Back + search + HOST-rendered items (Figma 31:29102). */
         <>
-          <button type="button" onClick={backToTypes} className={cn(CONTEXT_BACK_CLASS, 'sticky top-0 z-10')}>
-            <Chevron02LeftIcon size={24} className="shrink-0" />
-            <span className="truncate">Back</span>
-          </button>
+          <div className={cn(CONTEXT_BACK_BAR_CLASS, 'border-b border-ods-border')}>
+            <Button variant="row" type="button" onClick={backToTypes}>
+              <Chevron02LeftIcon size={24} />
+              <span className="truncate">Back</span>
+            </Button>
+          </div>
 
           <div className="flex shrink-0 items-center gap-2 border-b border-ods-border bg-ods-card p-3">
             <SearchIcon className="size-4 shrink-0 text-ods-text-secondary md:size-6" />
@@ -370,24 +370,32 @@ export function ChatContextPicker({
                 fallback={retry => (
                   <div className="flex items-center justify-between gap-2 bg-ods-bg px-4 py-3 text-ods-attention-red-error text-h4">
                     <span>Failed to load</span>
-                    <button
+                    <Button
+                      variant="link"
+                      size="compact"
+                      noPaddingX
                       type="button"
                       onClick={() => {
                         reset();
                         retry();
                       }}
-                      className="shrink-0 underline outline-none hover:text-ods-text-primary focus-visible:text-ods-text-primary"
+                      className="shrink-0"
                     >
                       Retry
-                    </button>
+                    </Button>
                   </div>
                 )}
               >
-                <Suspense
+                <LoadingSuspense
+                  label="Loading items"
+                  // The SAME list the host renders, in a scope: it draws one page of its own skeleton rows.
                   fallback={
-                    <LoadingRegion label="Loading items" className="max-h-[340px] overflow-hidden">
-                      <ContextItemsSkeleton count={ITEMS_SKELETON_ROWS} />
-                    </LoadingRegion>
+                    <ContextItemsList
+                      items={[]}
+                      selectedKeys={NO_SELECTED_KEYS}
+                      onToggle={LOADING_NOOP}
+                      atLimit={false}
+                    />
                   }
                 >
                   {config.renderItems({
@@ -397,7 +405,7 @@ export function ChatContextPicker({
                     onToggle: onToggleItem,
                     atLimit,
                   })}
-                </Suspense>
+                </LoadingSuspense>
               </ContextErrorBoundary>
             )}
           </QueryErrorResetBoundary>
@@ -473,15 +481,16 @@ export function ChatContextChipStrip({
               {item.label}
             </span>
             {onRemove && (
-              <button
+              <Button
+                variant="transparent"
+                size="icon-inline"
                 type="button"
                 onClick={() => onRemove(item)}
                 disabled={disabled}
                 aria-label={`Remove ${item.label}`}
-                className="flex size-4 shrink-0 items-center justify-center text-ods-text-secondary outline-none transition-colors hover:text-ods-text-primary focus-visible:text-ods-text-primary disabled:cursor-not-allowed disabled:opacity-40 [&_svg]:size-4"
               >
                 <XmarkCircleIcon size={16} />
-              </button>
+              </Button>
             )}
           </div>
         );