@ottocode/web-sdk 0.1.312 → 0.1.314

package/dist/components/chat/ConfigModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigModal.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ConfigModal.tsx"],"names":[],"mappings":"AAcA,UAAU,gBAAgB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,qBAAqB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,aAAa,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACrC,6EAA6E;IAC7E,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,sBAAsB,EACtB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,qBAAqB,EACrB,aAAuB,EACvB,iBAAyB,GACzB,EAAE,gBAAgB,2CAsKlB"}
+{"version":3,"file":"ConfigModal.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ConfigModal.tsx"],"names":[],"mappings":"AAcA,UAAU,gBAAgB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,qBAAqB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,aAAa,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACrC,6EAA6E;IAC7E,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,sBAAsB,EACtB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,qBAAqB,EACrB,aAAuB,EACvB,iBAAyB,GACzB,EAAE,gBAAgB,2CAsMlB"}

package/dist/components/dashboard/UsageDashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UsageDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/UsageDashboard.tsx"],"names":[],"mappings":"AAMA,UAAU,mBAAmB;IAC5B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB;AA0jBD,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,EAAE,mBAAmB,2CA+S7D"}
+{"version":3,"file":"UsageDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/UsageDashboard.tsx"],"names":[],"mappings":"AAMA,UAAU,mBAAmB;IAC5B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB;AA+uBD,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,EAAE,mBAAmB,2CAiT7D"}

package/dist/components/index.js

@@ -10610,6 +10610,7 @@ function ConfigModal({
   const updateDefaults = useUpdateDefaults();
   const reasoningEnabled = config2?.defaults?.reasoningText ?? true;
   const reasoningLevel = config2?.defaults?.reasoningLevel ?? "high";
+  const coAuthorCommits = config2?.defaults?.coAuthorCommits ?? false;
   const ottoEnabled = config2?.defaults?.ottoEnabled ?? true;
   const agentNames = useMemo16(() => ((agentDetails?.agents.length) ? agentDetails.agents.map((agentDetail) => agentDetail.name) : config2?.agents ?? []).filter((name) => name !== "otto"), [agentDetails?.agents, config2?.agents]);
   const agentSelectorRef = useRef11(null);
@@ -10717,6 +10718,36 @@ function ConfigModal({
             })
           ]
         }),
+        /* @__PURE__ */ jsxs22("div", {
+          className: "flex items-center justify-between",
+          children: [
+            /* @__PURE__ */ jsxs22("div", {
+              children: [
+                /* @__PURE__ */ jsx29("div", {
+                  className: "text-sm font-medium text-foreground",
+                  children: "Otto Commit Co-author"
+                }),
+                /* @__PURE__ */ jsx29("p", {
+                  className: "mt-0.5 text-xs text-muted-foreground",
+                  children: "Add the ottocode bot as a co-author on Otto commits."
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx29("button", {
+              type: "button",
+              role: "switch",
+              "aria-checked": coAuthorCommits,
+              onClick: () => updateDefaults.mutate({
+                coAuthorCommits: !coAuthorCommits,
+                scope: "global"
+              }),
+              className: `relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 ${coAuthorCommits ? "bg-primary" : "bg-muted"}`,
+              children: /* @__PURE__ */ jsx29("span", {
+                className: `inline-block h-4 w-4 transform rounded-full transition-transform ${coAuthorCommits ? "translate-x-6" : "translate-x-1"} ${coAuthorCommits ? "bg-primary-foreground" : "bg-foreground"}`
+              })
+            })
+          ]
+        }),
         /* @__PURE__ */ jsxs22("div", {
           className: "flex items-center justify-between",
           children: [
@@ -23413,6 +23444,8 @@ function SessionHeader({
   const width = useContainerWidth(rootRef);
   const isCompact = width > 0 && width < 640;
   const estimatedCost = useMemo25(() => {
+    if (typeof session.totalCostUsd === "number")
+      return session.totalCostUsd;
     const inputTokens = session.totalInputTokens || 0;
     const outputTokens2 = session.totalOutputTokens || 0;
     const cachedInputTokens = session.totalCachedTokens || 0;
@@ -23429,8 +23462,10 @@ function SessionHeader({
     session.totalInputTokens,
     session.totalOutputTokens,
     session.totalCachedTokens,
-    session.totalCacheCreationTokens
+    session.totalCacheCreationTokens,
+    session.totalCostUsd
   ]);
+  const subagentCost = session.subagentCostUsd ?? 0;
   const formatDuration3 = (ms) => {
     if (!ms)
       return "0s";
@@ -23593,6 +23628,7 @@ function SessionHeader({
             }),
             estimatedCost > 0 && !isCompact && /* @__PURE__ */ jsxs75("div", {
               className: "flex items-center gap-1.5",
+              title: subagentCost > 0 ? `Total cost includes $${subagentCost.toFixed(4)} from sub-agents` : "Estimated session cost",
               children: [
                 /* @__PURE__ */ jsx87(DollarSign, {
                   className: "w-4 h-4"
@@ -24072,6 +24108,8 @@ function LeanHeader({
   const { data: parentData } = useParentSession(session.sessionType === "branch" ? session.id : undefined);
   const { data: shareStatus } = useShareStatus(session.id);
   const estimatedCost = useMemo27(() => {
+    if (typeof session.totalCostUsd === "number")
+      return session.totalCostUsd;
     const inputTokens = session.totalInputTokens || 0;
     const outputTokens = session.totalOutputTokens || 0;
     const cachedInputTokens = session.totalCachedTokens || 0;
@@ -24088,8 +24126,10 @@ function LeanHeader({
     session.totalInputTokens,
     session.totalOutputTokens,
     session.totalCachedTokens,
-    session.totalCacheCreationTokens
+    session.totalCacheCreationTokens,
+    session.totalCostUsd
   ]);
+  const subagentCost = session.subagentCostUsd ?? 0;
   const formatCompactNumber = (num) => {
     if (num >= 1e6)
       return `${(num / 1e6).toFixed(1)}M`;
@@ -24222,6 +24262,7 @@ function LeanHeader({
                 }),
                 estimatedCost > 0 && !isCompact && /* @__PURE__ */ jsxs78("div", {
                   className: "flex items-center gap-1",
+                  title: subagentCost > 0 ? `Total cost includes $${subagentCost.toFixed(4)} from sub-agents` : "Estimated session cost",
                   children: [
                     /* @__PURE__ */ jsx90(DollarSign2, {
                       className: "size-3.5"
@@ -24678,6 +24719,7 @@ var MessageThread = memo25(function MessageThread2({
   sessionId,
   isGenerating,
   compact = false,
+  responsiveCompact = true,
   disableAutoScroll = false,
   onSelectSession,
   footerBottomPaddingClass: footerBottomPaddingClassOverride
@@ -24689,7 +24731,7 @@ var MessageThread = memo25(function MessageThread2({
   const sessionHeaderRef = useRef23(null);
   const threadRootRef = useRef23(null);
   const threadWidth = useContainerWidth(threadRootRef);
-  const density = threadWidth > 0 && threadWidth < 640 ? "compact" : "normal";
+  const density = compact || responsiveCompact && threadWidth > 0 && threadWidth < 640 ? "compact" : "normal";
   const [autoScroll, setAutoScroll] = useState44(true);
   const [isThreadScrolling, setIsThreadScrolling] = useState44(false);
   const autoScrollRef = useRef23(true);
@@ -25967,6 +26009,7 @@ var MessageThreadData = memo28(function MessageThreadData2({
     session,
     isGenerating,
     compact: isOttoThread || preferences.compactThread,
+    responsiveCompact: preferences.compactThread,
     onSelectSession,
     footerBottomPaddingClass
   });
@@ -33567,6 +33610,15 @@ function PreferencesModal({ isOpen, onClose }) {
                 scope: "global"
               })
             }),
+            /* @__PURE__ */ jsx128(ToggleRow, {
+              label: "Otto Commit Co-author",
+              description: "Add the ottocode bot as a co-author on commits made through Otto.",
+              checked: config2?.defaults?.coAuthorCommits ?? false,
+              onChange: (checked) => updateDefaults.mutate({
+                coAuthorCommits: checked,
+                scope: "global"
+              })
+            }),
             /* @__PURE__ */ jsx128(ToggleRow, {
               label: "Otto & Goals",
               description: "Supervisor agent that verifies goal progress and re-enqueues sessions until the goal is done. Disabling also disables goals.",
@@ -44162,6 +44214,278 @@ function TokenChart({ data, max, hover, onHover }) {
     })
   });
 }
+var SKELETON_BARS = [
+  { id: "a", height: 32 },
+  { id: "b", height: 48 },
+  { id: "c", height: 24 },
+  { id: "d", height: 64 },
+  { id: "e", height: 40 },
+  { id: "f", height: 72 },
+  { id: "g", height: 16 },
+  { id: "h", height: 56 },
+  { id: "i", height: 36 },
+  { id: "j", height: 80 },
+  { id: "k", height: 28 },
+  { id: "l", height: 44 },
+  { id: "m", height: 20 },
+  { id: "n", height: 60 },
+  { id: "o", height: 52 },
+  { id: "p", height: 12 },
+  { id: "q", height: 68 },
+  { id: "r", height: 76 },
+  { id: "s", height: 44 },
+  { id: "t", height: 32 },
+  { id: "u", height: 50 },
+  { id: "v", height: 18 },
+  { id: "w", height: 66 },
+  { id: "x", height: 38 },
+  { id: "y", height: 58 },
+  { id: "z", height: 26 },
+  { id: "aa", height: 70 },
+  { id: "ab", height: 22 },
+  { id: "ac", height: 46 },
+  { id: "ad", height: 54 }
+];
+var SKELETON_LIST_ROWS = [
+  { id: "a" },
+  { id: "b" },
+  { id: "c" },
+  { id: "d" },
+  { id: "e" },
+  { id: "f" },
+  { id: "g" },
+  { id: "h" },
+  { id: "i" },
+  { id: "j" },
+  { id: "k" },
+  { id: "l" }
+];
+function SkeletonHero() {
+  return /* @__PURE__ */ jsxs137("div", {
+    className: "rounded-2xl border border-border bg-card/60 px-6 py-7",
+    children: [
+      /* @__PURE__ */ jsxs137("div", {
+        className: "grid grid-cols-1 md:grid-cols-[1.4fr_1fr_1fr] gap-6 md:gap-10 items-center",
+        children: [
+          /* @__PURE__ */ jsxs137("div", {
+            children: [
+              /* @__PURE__ */ jsx157("div", {
+                className: "h-3 w-32 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "mt-3 h-12 w-40 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "mt-3 h-3 w-56 bg-muted rounded animate-pulse"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs137("div", {
+            className: "md:border-l md:border-border/60 md:pl-6",
+            children: [
+              /* @__PURE__ */ jsx157("div", {
+                className: "h-3 w-24 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "mt-3 h-9 w-32 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "mt-3 h-3 w-40 bg-muted rounded animate-pulse"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs137("div", {
+            className: "md:border-l md:border-border/60 md:pl-6",
+            children: [
+              /* @__PURE__ */ jsx157("div", {
+                className: "h-3 w-28 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "mt-3 h-9 w-32 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "mt-3 h-3 w-44 bg-muted rounded animate-pulse"
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs137("div", {
+        className: "mt-6 pt-5 border-t border-border/40 grid grid-cols-3 gap-6",
+        children: [
+          /* @__PURE__ */ jsxs137("div", {
+            children: [
+              /* @__PURE__ */ jsx157("div", {
+                className: "h-3 w-20 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "mt-2 h-5 w-32 bg-muted rounded animate-pulse"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs137("div", {
+            children: [
+              /* @__PURE__ */ jsx157("div", {
+                className: "h-3 w-16 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "mt-2 h-5 w-36 bg-muted rounded animate-pulse"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs137("div", {
+            children: [
+              /* @__PURE__ */ jsx157("div", {
+                className: "h-3 w-12 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "mt-2 h-5 w-40 bg-muted rounded animate-pulse"
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+function SkeletonSplit() {
+  return /* @__PURE__ */ jsx157("div", {
+    className: "space-y-2",
+    children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs137("div", {
+      className: "flex items-center gap-3 py-2",
+      children: [
+        /* @__PURE__ */ jsx157("div", {
+          className: "h-3 w-20 bg-muted rounded animate-pulse shrink-0"
+        }),
+        /* @__PURE__ */ jsx157("div", {
+          className: "flex-1 h-1.5 rounded-full bg-muted/40 overflow-hidden",
+          children: /* @__PURE__ */ jsx157("div", {
+            className: "h-full w-2/3 bg-muted rounded animate-pulse"
+          })
+        }),
+        /* @__PURE__ */ jsx157("div", {
+          className: "h-3 w-20 bg-muted rounded animate-pulse shrink-0"
+        }),
+        /* @__PURE__ */ jsx157("div", {
+          className: "h-4 w-16 bg-muted rounded animate-pulse shrink-0"
+        })
+      ]
+    }, i))
+  });
+}
+function SkeletonChart() {
+  return /* @__PURE__ */ jsxs137("div", {
+    children: [
+      /* @__PURE__ */ jsxs137("div", {
+        className: "flex items-baseline justify-between gap-4 mb-4",
+        children: [
+          /* @__PURE__ */ jsxs137("div", {
+            className: "min-w-0 space-y-2",
+            children: [
+              /* @__PURE__ */ jsx157("div", {
+                className: "h-3 w-24 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "h-7 w-28 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "h-3 w-48 bg-muted rounded animate-pulse"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx157("div", {
+            className: "h-7 w-28 bg-muted rounded animate-pulse shrink-0"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx157("div", {
+        className: "flex items-end gap-[3px] h-44",
+        children: SKELETON_BARS.map((bar) => /* @__PURE__ */ jsx157("div", {
+          className: "flex-1 bg-muted rounded-sm animate-pulse",
+          style: { height: `${bar.height}%` }
+        }, `chart-skeleton-${bar.id}`))
+      }),
+      /* @__PURE__ */ jsxs137("div", {
+        className: "mt-3 flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsx157("div", {
+            className: "h-3 w-16 bg-muted rounded animate-pulse"
+          }),
+          /* @__PURE__ */ jsx157("div", {
+            className: "h-3 w-24 bg-muted rounded animate-pulse"
+          }),
+          /* @__PURE__ */ jsx157("div", {
+            className: "h-3 w-16 bg-muted rounded animate-pulse"
+          })
+        ]
+      })
+    ]
+  });
+}
+function SkeletonList({ rows = 6 }) {
+  return /* @__PURE__ */ jsx157("div", {
+    className: "divide-y divide-border/60",
+    children: SKELETON_LIST_ROWS.slice(0, rows).map((row, index) => /* @__PURE__ */ jsxs137("div", {
+      className: "flex items-center gap-3 py-2.5 px-1",
+      children: [
+        /* @__PURE__ */ jsx157("div", {
+          className: "size-7 shrink-0 rounded-md bg-muted animate-pulse"
+        }),
+        /* @__PURE__ */ jsxs137("div", {
+          className: "flex-1 min-w-0 space-y-1.5",
+          children: [
+            /* @__PURE__ */ jsx157("div", {
+              className: "h-3.5 w-24 bg-muted rounded animate-pulse"
+            }),
+            /* @__PURE__ */ jsx157("div", {
+              className: "h-2.5 w-36 bg-muted rounded animate-pulse"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs137("div", {
+          className: "space-y-1.5 text-right shrink-0",
+          children: [
+            /* @__PURE__ */ jsx157("div", {
+              className: "h-3.5 w-16 bg-muted rounded animate-pulse"
+            }),
+            /* @__PURE__ */ jsx157("div", {
+              className: "h-2.5 w-14 bg-muted rounded animate-pulse ml-auto"
+            })
+          ]
+        })
+      ]
+    }, `list-skeleton-${row.id}-${index}`))
+  });
+}
+function UsageDashboardSkeleton() {
+  return /* @__PURE__ */ jsxs137("div", {
+    className: "max-w-5xl mx-auto px-6 py-8 space-y-5",
+    children: [
+      /* @__PURE__ */ jsx157(SkeletonHero, {}),
+      /* @__PURE__ */ jsx157(Section, {
+        title: "How you're paying",
+        children: /* @__PURE__ */ jsx157(SkeletonSplit, {})
+      }),
+      /* @__PURE__ */ jsx157(Section, {
+        title: "Daily activity",
+        children: /* @__PURE__ */ jsx157(SkeletonChart, {})
+      }),
+      /* @__PURE__ */ jsxs137("div", {
+        className: "grid grid-cols-1 md:grid-cols-2 gap-5",
+        children: [
+          /* @__PURE__ */ jsx157(Section, {
+            title: "By provider",
+            children: /* @__PURE__ */ jsx157(SkeletonList, {})
+          }),
+          /* @__PURE__ */ jsx157(Section, {
+            title: "Top models",
+            children: /* @__PURE__ */ jsx157(SkeletonList, {})
+          })
+        ]
+      })
+    ]
+  });
+}
 function Dot({ color, label }) {
   return /* @__PURE__ */ jsxs137("span", {
     className: "flex items-center gap-1",
@@ -44521,6 +44845,11 @@ function UsageDashboard({ onBack }) {
     else
       window.location.assign("/");
   }, [onBack]);
+  const handleScopeChange = useCallback53((next) => {
+    setScope(next);
+    setStats(null);
+    setError(null);
+  }, []);
   const projectName = useMemo48(() => {
     if (scope === "global") {
       const included = stats?.projects?.included.length ?? 0;
@@ -44586,13 +44915,13 @@ function UsageDashboard({ onBack }) {
                   children: [
                     /* @__PURE__ */ jsx157("button", {
                       type: "button",
-                      onClick: () => setScope("project"),
+                      onClick: () => handleScopeChange("project"),
                       className: `px-2 py-0.5 rounded transition-colors ${scope === "project" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
                       children: "Project"
                     }),
                     /* @__PURE__ */ jsxs137("button", {
                       type: "button",
-                      onClick: () => setScope("global"),
+                      onClick: () => handleScopeChange("global"),
                       className: `px-2 py-0.5 rounded transition-colors inline-flex items-center gap-1 ${scope === "global" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
                       children: [
                         /* @__PURE__ */ jsx157(Globe25, {
@@ -44628,10 +44957,7 @@ function UsageDashboard({ onBack }) {
               className: "rounded-xl border border-destructive/40 bg-destructive/10 p-3 text-xs text-destructive",
               children: error
             }),
-            loading && !stats && /* @__PURE__ */ jsx157("div", {
-              className: "py-24 text-center text-xs text-muted-foreground",
-              children: "loading…"
-            }),
+            loading && !stats && /* @__PURE__ */ jsx157(UsageDashboardSkeleton, {}),
             stats && /* @__PURE__ */ jsxs137(Fragment62, {
               children: [
                 /* @__PURE__ */ jsxs137("div", {
@@ -44981,4 +45307,4 @@ export {
   AgentProviderModelFields
 };
 
-//# debugId=4F518AFA5E675B1164756E2164756E21
+//# debugId=6CD6747FE4C52DF464756E2164756E21