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

package/dist/components/categories-cart.js

@@ -5,13 +5,14 @@ import Link from "../embed-shims/next-link.js";
 import { ICON_SIZE } from "../styles/component-sizes.js";
 import { cn } from "../utils/cn.js";
 import { TextLineSkeleton } from "./loading/unified-skeleton.js";
-import { useLoadingScope } from "./ui/loading-scope.js";
-import { VendorIcon, VendorIconSkeleton } from "./vendor-icon.js";
+import { LoadingItems, useLoadingScope } from "./ui/loading-scope.js";
+import { VendorIcon } from "./vendor-icon.js";
 const CARD_SHELL_CLASS = "group relative block rounded-lg border border-ods-border bg-ods-card p-3 pb-4 md:p-4 md:pb-6";
 const CARD_STACK_CLASS = "flex flex-col gap-4 md:gap-6";
 const ICON_STRIP_CLASS = "relative h-8 w-full overflow-hidden md:h-10";
 const ICON_ROW_CLASS = "flex w-full gap-2 md:gap-3";
 const VENDOR_ICON_SIZE = "md";
+const EMPTY_VENDOR = { title: "" };
 const VENDOR_ICON_CLASS = "overflow-hidden rounded opacity-60 grayscale filter";
 const INFO_STACK_CLASS = "grid grid-cols-1 gap-2";
 const TITLE_STACK_CLASS = "grid grid-cols-1 gap-1";
@@ -42,7 +43,16 @@ function CategoriesCart({
       className: cn(CARD_SHELL_CLASS, "transition-colors hover:border-ods-accent", className),
       children: /* @__PURE__ */ jsxs("div", { className: CARD_STACK_CLASS, children: [
         /* @__PURE__ */ jsxs("div", { className: ICON_STRIP_CLASS, children: [
-          /* @__PURE__ */ jsx("div", { className: ICON_ROW_CLASS, children: vendors.map((vendor) => /* @__PURE__ */ jsx(VendorIcon, { vendor, size: VENDOR_ICON_SIZE, className: VENDOR_ICON_CLASS }, vendor.id)) }),
+          /* @__PURE__ */ jsx("div", { className: ICON_ROW_CLASS, children: vendors.map((vendor) => /* @__PURE__ */ jsx(
+            VendorIcon,
+            {
+              "data-loading-item": true,
+              vendor,
+              size: VENDOR_ICON_SIZE,
+              className: VENDOR_ICON_CLASS
+            },
+            vendor.id
+          )) }),
           /* @__PURE__ */ jsx(StripFades, {})
         ] }),
         /* @__PURE__ */ jsxs("div", { className: INFO_STACK_CLASS, children: [
@@ -77,10 +87,16 @@ function CategoriesCartSkeleton({
 }) {
   return /* @__PURE__ */ jsx("div", { className: cn(CARD_SHELL_CLASS, className), "aria-hidden": true, children: /* @__PURE__ */ jsxs("div", { className: CARD_STACK_CLASS, children: [
     /* @__PURE__ */ jsxs("div", { className: ICON_STRIP_CLASS, children: [
-      /* @__PURE__ */ jsx("div", { className: ICON_ROW_CLASS, children: Array.from({ length: vendors }, (_, index) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: skeleton icons never reorder
-        /* @__PURE__ */ jsx(VendorIconSkeleton, { size: VENDOR_ICON_SIZE, className: "rounded" }, index)
-      )) }),
+      /* @__PURE__ */ jsx("div", { className: ICON_ROW_CLASS, children: /* @__PURE__ */ jsx(LoadingItems, { count: vendors, children: () => /* @__PURE__ */ jsx(
+        VendorIcon,
+        {
+          "data-loading-item": true,
+          loading: true,
+          vendor: EMPTY_VENDOR,
+          size: VENDOR_ICON_SIZE,
+          className: "rounded"
+        }
+      ) }) }),
       /* @__PURE__ */ jsx(StripFades, {})
     ] }),
     /* @__PURE__ */ jsxs("div", { className: INFO_STACK_CLASS, children: [
@@ -97,6 +113,5 @@ function CategoriesCartSkeleton({
 }
 export {
   CATEGORIES_CART_SKELETON_VENDORS,
-  CategoriesCart,
-  CategoriesCartSkeleton
+  CategoriesCart
 };

package/dist/components/category-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"category-card.d.ts","sourceRoot":"","sources":["../../src/components/category-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;CAC3B;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,KAAU,EAAE,EAAE,iBAAiB,qBA8B7G"}
+{"version":3,"file":"category-card.d.ts","sourceRoot":"","sources":["../../src/components/category-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2D/B,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;CAC3B;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,KAAU,EAAE,EAAE,iBAAiB,qBAyC7G"}

package/dist/components/category-card.js

@@ -1,25 +1,72 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn.js";
+import { TextLineSkeleton, UnifiedSkeleton } from "./loading/unified-skeleton.js";
+import { BUTTON_SIZE_CLASS, Button } from "./ui/button/index.js";
+import { LoadingItems, useLoadingScope } from "./ui/loading-scope.js";
+const CATEGORY_CARD_SKELETON_ICONS = 10;
+const CATEGORY_CARD_FRAME_CLASS = "box-border flex min-w-0 flex-col rounded-[12px] border border-ods-border bg-ods-card p-8";
+const CATEGORY_CARD_ICON_ROW_CLASS = "mb-8 flex min-h-10 items-center justify-center gap-6";
+const CATEGORY_CARD_ICON_TILE_CLASS = "h-10 w-10 flex-shrink-0";
+const CATEGORY_CARD_TEXT_BLOCK_CLASS = "flex flex-1 flex-col";
+const CATEGORY_CARD_TITLE_CLASS = "mb-2 text-left text-ods-text-primary text-h2";
+const CATEGORY_CARD_COUNTS_CLASS = "mb-4 text-left text-ods-text-secondary text-h6";
+const CATEGORY_CARD_DESCRIPTION_ROW_CLASS = "flex flex-row items-start";
+const CATEGORY_CARD_DESCRIPTION_CLASS = "flex-1 text-left text-ods-text-primary text-h6";
+const CATEGORY_CARD_ACTION_LAYOUT_CLASS = "ml-4 shrink-0";
+const CATEGORY_CARD_ACTION_SKELETON_CLASS = cn(BUTTON_SIZE_CLASS.icon, "rounded-md", CATEGORY_CARD_ACTION_LAYOUT_CLASS);
+function CountSkeleton() {
+  return /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "inline-block w-6 align-top" });
+}
+function CategoryCardSkeleton({ className }) {
+  return /* @__PURE__ */ jsxs("article", { className: cn(CATEGORY_CARD_FRAME_CLASS, className), children: [
+    /* @__PURE__ */ jsx("div", { className: CATEGORY_CARD_ICON_ROW_CLASS, children: /* @__PURE__ */ jsx(LoadingItems, { count: CATEGORY_CARD_SKELETON_ICONS, children: () => /* @__PURE__ */ jsx(UnifiedSkeleton, { "data-loading-item": true, variant: "circular", className: CATEGORY_CARD_ICON_TILE_CLASS }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: CATEGORY_CARD_TEXT_BLOCK_CLASS, children: [
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h2", className: cn(CATEGORY_CARD_TITLE_CLASS, "w-3/4") }),
+      /* @__PURE__ */ jsxs("div", { className: CATEGORY_CARD_COUNTS_CLASS, children: [
+        /* @__PURE__ */ jsx(CountSkeleton, {}),
+        " Categories \u2022 ",
+        /* @__PURE__ */ jsx(CountSkeleton, {}),
+        " Products"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: CATEGORY_CARD_DESCRIPTION_ROW_CLASS, children: [
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: cn(CATEGORY_CARD_DESCRIPTION_CLASS, "w-full") }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: CATEGORY_CARD_ACTION_SKELETON_CLASS })
+      ] })
+    ] })
+  ] });
+}
 function CategoryCard({ name, description, categoryCount, productCount, icons = [] }) {
-  return /* @__PURE__ */ jsxs("article", { className: "box-border flex min-w-0 flex-col rounded-[12px] border border-ods-border bg-ods-card p-8", children: [
-    /* @__PURE__ */ jsx("div", { className: "mb-8 flex items-center justify-center gap-6", children: (icons.length > 0 ? icons : Array(10).fill(null)).map((icon, i) => /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded bg-ods-border", children: icon }, i)) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col", children: [
-      /* @__PURE__ */ jsx("h2", { className: "mb-2 text-left text-ods-text-primary text-h2", children: name }),
-      /* @__PURE__ */ jsxs("div", { className: "mb-4 text-left text-ods-text-secondary text-h6", children: [
+  if (useLoadingScope()) return /* @__PURE__ */ jsx(CategoryCardSkeleton, {});
+  return /* @__PURE__ */ jsxs("article", { className: CATEGORY_CARD_FRAME_CLASS, children: [
+    /* @__PURE__ */ jsx("div", { className: CATEGORY_CARD_ICON_ROW_CLASS, children: icons.map((icon, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-loading-item": true,
+        className: cn(CATEGORY_CARD_ICON_TILE_CLASS, "flex items-center justify-center rounded bg-ods-border"),
+        children: icon
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: CATEGORY_CARD_TEXT_BLOCK_CLASS, children: [
+      /* @__PURE__ */ jsx("h2", { className: CATEGORY_CARD_TITLE_CLASS, children: name }),
+      /* @__PURE__ */ jsxs("div", { className: CATEGORY_CARD_COUNTS_CLASS, children: [
         categoryCount,
         " Categories \u2022 ",
         productCount,
         " Products"
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-start", children: [
-        /* @__PURE__ */ jsx("p", { className: "flex-1 text-left text-ods-text-primary text-h6", children: description }),
+      /* @__PURE__ */ jsxs("div", { className: CATEGORY_CARD_DESCRIPTION_ROW_CLASS, children: [
+        /* @__PURE__ */ jsx("p", { className: CATEGORY_CARD_DESCRIPTION_CLASS, children: description }),
         /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
-            className: "ml-4 flex h-12 w-12 items-center justify-center rounded-[6px] border border-ods-border bg-transparent transition-colors hover:bg-ods-accent",
-            style: { minWidth: 48, minHeight: 48 },
+            variant: "outline",
+            size: "icon",
+            "data-tone": "accent",
+            className: CATEGORY_CARD_ACTION_LAYOUT_CLASS,
             "aria-label": `View ${name}`,
-            children: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", fill: "none", stroke: "#FAFAFA", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" }) })
+            children: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" }) })
           }
         )
       ] })

package/dist/components/chat/approval-batch-message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"approval-batch-message.d.ts","sourceRoot":"","sources":["../../../src/components/chat/approval-batch-message.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAW5C,OAAO,KAAK,EACV,oBAAoB,EACpB,aAAa,EAEb,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAGjB,MAAM,WAAW,yBAA0B,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/E,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;IACnC,MAAM,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC;IAC7E,QAAQ,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC;IAC5E;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,qGAAqG;IACrG,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAID,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IACvC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,cAAsB,EAAE,EAAE,sBAAsB,sCAM3G;AAED,oFAAoF;AACpF,wBAAgB,mBAAmB,gCAElC;AAyGD,QAAA,MAAM,oBAAoB,sHAiKzB,CAAC;AAIF,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"approval-batch-message.d.ts","sourceRoot":"","sources":["../../../src/components/chat/approval-batch-message.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAW5C,OAAO,KAAK,EACV,oBAAoB,EACpB,aAAa,EAEb,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAGjB,MAAM,WAAW,yBAA0B,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/E,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;IACnC,MAAM,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC;IAC7E,QAAQ,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC;IAC5E;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,qGAAqG;IACrG,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAID,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IACvC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,cAAsB,EAAE,EAAE,sBAAsB,sCAM3G;AAED,oFAAoF;AACpF,wBAAgB,mBAAmB,gCAElC;AAqGD,QAAA,MAAM,oBAAoB,sHAiKzB,CAAC;AAIF,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/components/chat/approval-batch-message.js

@@ -47,29 +47,21 @@ function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExe
   const result = execution?.status === "done" ? execution.result : void 0;
   const hasExpandableBody = args.length > 0 || typeof result === "string" && result.length > 0;
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-start border-b border-ods-border bg-ods-card last:border-b-0", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: onToggle,
-        className: "flex w-full cursor-pointer items-start gap-[var(--spacing-system-xsf)] p-[var(--spacing-system-sf)] text-left",
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-ods-text-secondary", children: /* @__PURE__ */ jsx(ToolIcon, { toolType, size: 16 }) }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "min-w-0 flex-1 text-h6",
-                expanded ? "whitespace-pre-wrap break-all text-ods-text-primary" : "line-clamp-2 max-h-10 break-all text-ods-text-secondary"
-              ),
-              children: command
-            }
+    /* @__PURE__ */ jsxs(Button, { variant: "row", type: "button", onClick: onToggle, "aria-expanded": expanded, children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-ods-text-secondary", children: /* @__PURE__ */ jsx(ToolIcon, { toolType, size: 16 }) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "min-w-0 flex-1 text-h6",
+            expanded ? "whitespace-pre-wrap break-all text-ods-text-primary" : "line-clamp-2 max-h-10 break-all text-ods-text-secondary"
           ),
-          showExecutionStatus && /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(ExecutionStatusIcon, { batchStatus, execution }) }),
-          /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(ExpandChevron, { expanded }) })
-        ]
-      }
-    ),
+          children: command
+        }
+      ),
+      showExecutionStatus && /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(ExecutionStatusIcon, { batchStatus, execution }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(ExpandChevron, { expanded }) })
+    ] }),
     /* @__PURE__ */ jsx("div", { className: "w-full", style: containerStyle, children: /* @__PURE__ */ jsx("div", { ref: innerRef, children: hasExpandableBody && /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-start gap-0 bg-ods-card px-[var(--spacing-system-sf)] pb-[var(--spacing-system-sf)] text-h6", children: [
       args.map(([key, value]) => /* @__PURE__ */ jsx(ArgRow, { argKey: key, value }, key)),
       result && /* @__PURE__ */ jsx(

package/dist/components/chat/ask-display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ask-display.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ask-display.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAO/C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,UAAU,4GA+Gd,CAAC;AAIH,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"ask-display.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ask-display.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAO/C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,UAAU,4GA6Gd,CAAC;AAIH,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/chat/ask-display.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useId, useState } from "react";
 import { cn } from "../../utils/cn.js";
 import { Chevron02LeftIcon, Chevron02RightIcon } from "../icons-v2-generated/index.js";
+import { Button } from "../ui/button/index.js";
 const LOCKED_HINT = "This question was already answered";
 const AskDisplay = forwardRef(({ className, cards, onSelect, ...props }, ref) => {
   const [index, setIndex] = useState(0);
@@ -31,13 +32,14 @@ const AskDisplay = forwardRef(({ className, cards, onSelect, ...props }, ref) =>
           /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 break-words text-ods-text-primary text-h4", children: active.question }),
           showPager && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-[var(--spacing-system-xxs)]", children: [
             /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
+                variant: "bare",
+                size: "icon-sm",
                 type: "button",
                 "aria-label": "Previous question",
                 disabled: index === 0,
                 onClick: () => setIndex((current) => Math.max(0, current - 1)),
-                className: "text-ods-text-secondary transition-colors hover:text-ods-text-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-ods-text-secondary",
                 children: /* @__PURE__ */ jsx(Chevron02LeftIcon, { size: 16 })
               }
             ),
@@ -47,13 +49,14 @@ const AskDisplay = forwardRef(({ className, cards, onSelect, ...props }, ref) =>
               cards.length
             ] }),
             /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
+                variant: "bare",
+                size: "icon-sm",
                 type: "button",
                 "aria-label": "Next question",
                 disabled: index === cards.length - 1,
                 onClick: () => setIndex((current) => Math.min(cards.length - 1, current + 1)),
-                className: "text-ods-text-secondary transition-colors hover:text-ods-text-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-ods-text-secondary",
                 children: /* @__PURE__ */ jsx(Chevron02RightIcon, { size: 16 })
               }
             )
@@ -61,16 +64,12 @@ const AskDisplay = forwardRef(({ className, cards, onSelect, ...props }, ref) =>
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsx("div", { className: "flex flex-col overflow-hidden rounded-md border border-ods-border", children: active.options.map((option, optionIndex) => /* @__PURE__ */ jsxs(
-            "button",
+            Button,
             {
+              variant: "row",
               type: "button",
               disabled: !isInteractive,
               onClick: () => onSelect?.(option.label),
-              className: cn(
-                "flex w-full items-start gap-[var(--spacing-system-s)] bg-ods-card p-[var(--spacing-system-s)] text-left transition-colors",
-                optionIndex > 0 && "border-t border-ods-border",
-                "hover:bg-ods-bg-hover disabled:cursor-not-allowed disabled:hover:bg-ods-card"
-              ),
               children: [
                 /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-ods-text-secondary text-h4", children: [
                   optionIndex + 1,

package/dist/components/chat/ask-prompts.d.ts

@@ -13,7 +13,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. */
@@ -52,7 +52,7 @@ export interface AskPromptsProps {
  * only opens it. While `loading` the slots hold chip skeletons and the launcher
  * keeps its place. Loaded with no prompt it renders nothing.
  */
-export declare function AskPrompts({ prompts, count: countProp, loading, align, source, label, icon, onOpen, onAsk, fadeColor, className, }: AskPromptsProps): import("react").JSX.Element | null;
+export declare function AskPrompts({ prompts, count: countProp, loading: loadingProp, align, source, label, icon, onOpen, onAsk, fadeColor, className, }: AskPromptsProps): import("react").JSX.Element | null;
 export interface AskCardProps extends Omit<AskPromptsProps, 'label' | 'className' | 'align'> {
     title: string;
     description?: string;
@@ -68,5 +68,5 @@ export interface AskCardProps extends Omit<AskPromptsProps, 'label' | 'className
  * slots, chip skeletons while `loading`) and the chat launcher. The card is the
  * same height before and after the questions arrive.
  */
-export declare function AskCard({ title, description, prompts, count: countProp, loading, source, label, icon, onOpen, onAsk, shortcutHint, className, }: AskCardProps): import("react").JSX.Element;
+export declare function AskCard({ title, description, prompts, count: countProp, loading: loadingProp, source, label, icon, onOpen, onAsk, shortcutHint, className, }: AskCardProps): import("react").JSX.Element;
 //# sourceMappingURL=ask-prompts.d.ts.map

package/dist/components/chat/ask-prompts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ask-prompts.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ask-prompts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,EAAkD,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAG/G,gGAAgG;AAChG,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,SAAS,GAAG,mBAAmB,CAAC;CACxC;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,SAAS,SAAS,EAAE,CAAC;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0FAA0F;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sFAAsF;IACtF,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,gFAAgF;IAChF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;mDAC+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAChD,4CAA4C;IAC5C,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;IACpC,qHAAqH;IACrH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwFD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,KAAK,EAAE,SAAS,EAChB,OAAe,EACf,KAAe,EACf,MAAM,EACN,KAAK,EACL,IAAI,EACJ,MAAM,EACN,KAAK,EACL,SAAS,EACT,SAAS,GACV,EAAE,eAAe,sCAuBjB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,WAAW,GAAG,OAAO,CAAC;IAC1F,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,gIAAgI;IAChI,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,EAAE,SAAS,EAChB,OAAe,EACf,MAAM,EACN,KAAK,EACL,IAAI,EACJ,MAAM,EACN,KAAK,EACL,YAAmB,EACnB,SAAS,GACV,EAAE,YAAY,+BAsCd"}
+{"version":3,"file":"ask-prompts.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ask-prompts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,OAAO,EAAyB,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAGtF,gGAAgG;AAChG,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,SAAS,GAAG,mBAAmB,CAAC;CACxC;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,SAAS,SAAS,EAAE,CAAC;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0FAA0F;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sFAAsF;IACtF,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,gFAAgF;IAChF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;mDAC+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAChD,4CAA4C;IAC5C,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;IACpC,qHAAqH;IACrH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsFD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,WAAmB,EAC5B,KAAe,EACf,MAAM,EACN,KAAK,EACL,IAAI,EACJ,MAAM,EACN,KAAK,EACL,SAAS,EACT,SAAS,GACV,EAAE,eAAe,sCAyBjB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,WAAW,GAAG,OAAO,CAAC;IAC1F,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,gIAAgI;IAChI,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,WAAmB,EAC5B,MAAM,EACN,KAAK,EACL,IAAI,EACJ,MAAM,EACN,KAAK,EACL,YAAmB,EACnB,SAAS,GACV,EAAE,YAAY,+BAwCd"}

package/dist/components/chat/ask-prompts.js

@@ -1,16 +1,17 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { AgentMark } from "../agent-mark.js";
 import { MingoAiButton, openAskAi } from "../navigation/mingo-ai-button.js";
+import { LoadingItems, useLoadingScope } from "../ui/loading-scope.js";
 import { ScrollShadow } from "../ui/scroll-fade.js";
-import { QuickActionChipButton, QuickActionChipSkeleton } from "./quick-action-chip.js";
+import { ASK_PROMPTS_DEFAULT_COUNT } from "./hooks/use-ask-prompts.js";
+import { QuickActionChipButton } from "./quick-action-chip.js";
 import { ASK_AI_TRIGGER_ATTRIBUTE } from "./utils/ask-ai-events.js";
 function AssistantGlyph({ icon, className }) {
   return /* @__PURE__ */ jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full", className), children: icon ?? /* @__PURE__ */ jsx(AgentMark, { agent: "mingo", className: "size-full" }) });
 }
-const DEFAULT_LOADING_SLOTS = 2;
-const slotCount = (count, loading, prompts) => count ?? (loading ? DEFAULT_LOADING_SLOTS : prompts.length);
+const slotCount = (count, loading, prompts) => count ?? (loading ? ASK_PROMPTS_DEFAULT_COUNT : prompts.length);
 const SKELETON_LABEL_CH = [26, 22, 30, 24, 20, 28];
 const CHIP_SLOT_CLASS = "flex h-9 min-w-0 max-w-full";
 const ROW_CHIP_SLOT_CLASS = "flex h-9 shrink-0 content-md:min-w-0 content-md:max-w-full content-md:shrink";
@@ -24,42 +25,39 @@ function QuestionChips({
   onAsk,
   slotClassName
 }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: count }, (_, slot) => {
+  return /* @__PURE__ */ jsx(LoadingItems, { count, children: (slot) => {
     const prompt = loading ? void 0 : prompts[slot];
     return /* @__PURE__ */ jsx(
       "span",
       {
+        "data-loading-item": true,
         className: slotClassName ?? CHIP_SLOT_CLASS,
         ...prompt ? { [ASK_AI_TRIGGER_ATTRIBUTE]: "" } : {},
-        children: loading ? /* @__PURE__ */ jsx(
-          QuickActionChipSkeleton,
-          {
-            variant: "question",
-            labelCh: SKELETON_LABEL_CH[slot % SKELETON_LABEL_CH.length]
-          }
-        ) : prompt ? /* @__PURE__ */ jsx(
+        children: (loading || prompt) && /* @__PURE__ */ jsx(
           QuickActionChipButton,
           {
+            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
-      },
-      prompt?.id ?? `slot-${slot}`
+        )
+      }
     );
-  }) });
+  } });
 }
 function AskPrompts({
   prompts,
   count: countProp,
-  loading = false,
+  loading: loadingProp = false,
   align = "start",
   source,
   label,
@@ -69,6 +67,7 @@ function AskPrompts({
   fadeColor,
   className
 }) {
+  const loading = useLoadingScope() || loadingProp;
   const count = slotCount(countProp, loading, prompts);
   if (!loading && prompts.length === 0) return null;
   const end = align === "end";
@@ -102,7 +101,7 @@ function AskCard({
   description,
   prompts,
   count: countProp,
-  loading = false,
+  loading: loadingProp = false,
   source,
   label,
   icon,
@@ -111,6 +110,7 @@ function AskCard({
   shortcutHint = true,
   className
 }) {
+  const loading = useLoadingScope() || loadingProp;
   const count = slotCount(countProp, loading, prompts);
   return /* @__PURE__ */ jsxs(
     "div",

package/dist/components/chat/chat-archive-page.d.ts

@@ -4,16 +4,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
  *  required; without `onClose` the close button is left out. */

package/dist/components/chat/chat-archive-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-archive-page.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-archive-page.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,UAAU,wBAAwB;IAChC,yEAAyE;IACzE,OAAO,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACnC,+BAA+B;IAC/B,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;iCAE6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED;gEACgE;AAChE,MAAM,WAAW,8BAA+B,SAAQ,wBAAwB;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,0DAA0D;IAC1D,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;4DAE4D;AAC5D,MAAM,WAAW,4BAA6B,SAAQ,wBAAwB;IAC5E,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,MAAM,oBAAoB,GAAG,8BAA8B,GAAG,4BAA4B,CAAC;AAEjG;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BA0E1D"}
+{"version":3,"file":"chat-archive-page.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-archive-page.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,UAAU,wBAAwB;IAChC,yEAAyE;IACzE,OAAO,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACnC,+BAA+B;IAC/B,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,wGAAwG;IACxG,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0GAA0G;IAC1G,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;oCACgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;gEACgE;AAChE,MAAM,WAAW,8BAA+B,SAAQ,wBAAwB;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,0DAA0D;IAC1D,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;4DAE4D;AAC5D,MAAM,WAAW,4BAA6B,SAAQ,wBAAwB;IAC5E,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,MAAM,oBAAoB,GAAG,8BAA8B,GAAG,4BAA4B,CAAC;AAEjG;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BA2E1D"}

package/dist/components/chat/chat-archive-page.js

@@ -2,13 +2,22 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Chevron02LeftIcon, BoxArchiveIcon } from "../icons-v2-generated/index.js";
 import { XmarkIcon } from "../icons-v2-generated/signs-and-symbols/xmark-icon.js";
-import { ChatHeaderIconButton } from "./chat-header-icon-button.js";
+import { Button } from "../ui/button/index.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { ChatListEmptyState } from "./chat-list-empty-state.js";
 import { ChatPanelHeaderMobile } from "./chat-panel-header-mobile.js";
-import { MingoChatHistory, MingoChatHistorySkeleton } from "./mingo-chat-history.js";
+import { MingoChatHistory } from "./mingo-chat-history.js";
 function ChatArchivePage(props) {
-  const { dialogs, onSelectDialog, isLoading = false, isFetching = false, hasMore = false, onLoadMore } = props;
-  const suppressEmptyStateWhileFetching = isFetching;
+  const {
+    dialogs,
+    onSelectDialog,
+    isLoading = false,
+    isFetching = false,
+    hasMore = false,
+    onLoadMore,
+    pageSize
+  } = props;
+  const firstLoad = useLoadingScope() || (isLoading || isFetching) && dialogs.length === 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     !props.embedded && /* @__PURE__ */ jsx(
       ChatPanelHeaderMobile,
@@ -21,26 +30,28 @@ function ChatArchivePage(props) {
         onClose: props.onClose
       }
     ),
-    !props.embedded && /* @__PURE__ */ jsxs("div", { className: "hidden h-14 w-full flex-shrink-0 overflow-hidden border-b border-ods-border bg-ods-card md:flex", children: [
-      /* @__PURE__ */ jsx(ChatHeaderIconButton, { divider: "right", onClick: props.onBack, "aria-label": "Back", children: /* @__PURE__ */ jsx(Chevron02LeftIcon, { size: 24 }) }),
+    !props.embedded && /* @__PURE__ */ jsxs("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", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "cell", className: "w-14", onClick: props.onBack, "aria-label": "Back", children: /* @__PURE__ */ jsx(Chevron02LeftIcon, { size: 24 }) }),
       /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center px-[var(--spacing-system-mf)] py-[var(--spacing-system-sf)]", children: /* @__PURE__ */ jsx("span", { className: "truncate text-ods-text-primary text-h3", children: "Chat Archive" }) }),
-      props.onClose && /* @__PURE__ */ jsx(ChatHeaderIconButton, { onClick: props.onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(XmarkIcon, { size: 24 }) })
+      props.onClose && /* @__PURE__ */ jsx(Button, { variant: "cell", className: "w-14", onClick: props.onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(XmarkIcon, { size: 24 }) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col p-[var(--spacing-system-m)]", children: dialogs.length > 0 ? /* @__PURE__ */ jsx(
-      MingoChatHistory,
-      {
-        dialogs,
-        onSelectDialog,
-        hasMore,
-        isLoadingMore: isLoading && dialogs.length > 0,
-        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.
-      /* @__PURE__ */ jsx(MingoChatHistorySkeleton, {})
-    ) : suppressEmptyStateWhileFetching ? null : (
+    /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col p-[var(--spacing-system-m)]", children: 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.
+      /* @__PURE__ */ jsx(
+        MingoChatHistory,
+        {
+          loading: firstLoad,
+          pageSize,
+          dialogs,
+          onSelectDialog,
+          hasMore,
+          isLoadingMore: isLoading && dialogs.length > 0,
+          onLoadMore
+        }
+      )
+    ) : (
       // Empty state — mirrors the "Current Chats" rail empty state
       // (Figma 113:60939): centred 24px muted glyph + h4 title + h6 caption.
       /* @__PURE__ */ jsx(

package/dist/components/chat/chat-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-container.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AAYjE,OAAO,KAAK,EAA4B,kBAAkB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA6B7F,QAAA,MAAM,aAAa,+GAejB,CAAC;AAIH,QAAA,MAAM,UAAU,4GA2Kf,CAAC;AAGF,QAAA,MAAM,WAAW,2HAQhB,CAAC;AAGF;;;;;;;;;GASG;AACH,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE;;uCAEmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;+DAE2D;IAC3D,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,QAAA,MAAM,UAAU,4GAoBf,CAAC;AAGF,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"chat-container.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AAYjE,OAAO,KAAK,EAA4B,kBAAkB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA6B7F,QAAA,MAAM,aAAa,+GAejB,CAAC;AAIH,QAAA,MAAM,UAAU,4GAyKf,CAAC;AAGF,QAAA,MAAM,WAAW,2HAQhB,CAAC;AAGF;;;;;;;;;GASG;AACH,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE;;uCAEmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;+DAE2D;IAC3D,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,QAAA,MAAM,UAAU,4GAoBf,CAAC;AAGF,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/chat/chat-container.js

@@ -5,13 +5,13 @@ import { cn } from "../../utils/cn.js";
 import { Chevron02LeftIcon } from "../icons-v2-generated/index.js";
 import { PlusCircleIcon } from "../icons-v2-generated/signs-and-symbols/plus-circle-icon.js";
 import { XmarkIcon } from "../icons-v2-generated/signs-and-symbols/xmark-icon.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
 import { Button } from "../ui/button/index.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { LIVE_PULSE_CLASS } from "../ui/skeleton-surface.js";
 import { SquareAvatar as Avatar } from "../ui/square-avatar.js";
 import { TicketStatusTag, resolveStatusTagProps } from "../ui/ticket-status-tag.js";
 import { MspOrganizationCard } from "./msp-organization-card.js";
-import { MspOrganizationCardSkeleton } from "./msp-organization-card-skeleton.js";
 const ConnectionIndicator = ({ status }) => {
   const getStatusStyles = () => {
     switch (status) {
@@ -72,9 +72,12 @@ const ChatHeader = forwardRef(
     isMspLoading = false,
     fullWidth = false,
     bare = false,
-    isLoading = false,
+    isLoading: isLoadingProp = false,
     ...props
   }, ref) => {
+    const inScope = useLoadingScope();
+    const isLoading = inScope || isLoadingProp;
+    const mspLoading = inScope || isMspLoading;
     const cardClasses = bare ? "" : "rounded-md bg-ods-card border border-ods-border";
     return /* @__PURE__ */ jsxs(
       "div",
@@ -102,16 +105,11 @@ const ChatHeader = forwardRef(
           ),
           /* @__PURE__ */ jsxs("div", { className: cardClasses, children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 px-4 py-3", children: [
-              isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-16 w-16 shrink-0 rounded-full" }),
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-40" }),
-                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-28" })
-                ] })
-              ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                userIcon ? /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-ods-accent", children: userIcon }) : /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                userIcon && !isLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-ods-accent", children: userIcon }) : /* @__PURE__ */ jsx(
                   Avatar,
                   {
+                    loading: isLoading,
                     src: userAvatar,
                     alt: userName,
                     fallback: userName,
@@ -120,7 +118,10 @@ const ChatHeader = forwardRef(
                     className: "bg-ods-flamingo-pink"
                   }
                 ),
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", className: "w-40" }),
+                  /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: "w-28" })
+                ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
                   /* @__PURE__ */ jsx("span", { className: "text-h3", children: userName }),
                   /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: serverUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx("span", { className: "text-ods-text-secondary text-h4", children: serverUrl }),
@@ -154,13 +155,15 @@ const ChatHeader = forwardRef(
                 headerActions
               ] })
             ] }),
-            !ticketInfo && (isMspLoading || mspOrganization) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            !ticketInfo && (mspLoading || mspOrganization) && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("div", { className: "h-px bg-ods-border" }),
-              isMspLoading || !mspOrganization ? /* @__PURE__ */ jsx(MspOrganizationCardSkeleton, { className: cn("rounded-none ring-0", !bare && "rounded-b-md") }) : /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(
                 MspOrganizationCard,
                 {
+                  name: "",
                   ...mspOrganization,
-                  className: cn("rounded-none ring-0", !bare && "rounded-b-md", mspOrganization.className)
+                  loading: mspLoading || !mspOrganization,
+                  className: cn("rounded-none ring-0", !bare && "rounded-b-md", mspOrganization?.className)
                 }
               )
             ] }),

package/dist/components/chat/chat-context-memory-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-context-memory-bar.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-context-memory-bar.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAIlE,MAAM,WAAW,yBAAyB;IACxC,+EAA+E;IAC/E,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;6BACyB;IACzB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C;wDACoD;IACpD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,SAAS,CAAC;IACnD,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,QAAQ,EACR,WAAW,EACX,QAAgB,EAChB,SAAS,GACV,EAAE,yBAAyB,sCA0G3B"}
+{"version":3,"file":"chat-context-memory-bar.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-context-memory-bar.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAIlE,MAAM,WAAW,yBAAyB;IACxC,+EAA+E;IAC/E,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB;6BACyB;IACzB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C;wDACoD;IACpD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,SAAS,CAAC;IACnD,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,QAAQ,EACR,WAAW,EACX,QAAgB,EAChB,SAAS,GACV,EAAE,yBAAyB,sCA0G3B"}