@acarmisc/backstage-plugin-litellm 0.29.0 → 0.31.0

package/dist/index.cjs.js

@@ -1060,16 +1060,21 @@ var init_Gauge = __esm({
                         fontSize: size <= 64 ? 15 : 18,
                         fontWeight: 700,
                         fontVariantNumeric: "tabular-nums",
-                        color: "text.primary"
+                        color: isOverCap ? "currentColor" : "text.primary"
                       },
-                      children: isOverCap ? "Over cap" : label ?? `${Math.round(value)}%`
+                      children: label ?? `${Math.round(value)}%`
                     }
                   ),
                   caption && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     import_Typography3.default,
                     {
                       variant: "caption",
-                      sx: { fontSize: 9.5, color: "text.secondary", mt: 0.25 },
+                      sx: {
+                        fontSize: 9.5,
+                        color: "text.secondary",
+                        mt: 0.25,
+                        whiteSpace: "nowrap"
+                      },
                       children: caption
                     }
                   )
@@ -1524,6 +1529,18 @@ function pruneCopy(n) {
   }
   return `Remove ${n} expired keys from the list. They already don't work.`;
 }
+function blockButtonState(blocked, manage, unblock) {
+  if (blocked) {
+    return {
+      label: unblock.denied ? "No permission to unblock keys" : "Unblock key",
+      disabled: !unblock.allowed
+    };
+  }
+  return {
+    label: manage.denied ? "No permission to block keys" : "Block key \u2014 suspends without revoking",
+    disabled: !manage.allowed
+  };
+}
 var init_keyLabels = __esm({
   "src/keyLabels.ts"() {
     "use strict";
@@ -1738,10 +1755,13 @@ var init_KeysTable = __esm({
     }) => {
       const managePermission = (0, import_plugin_permission_react.usePermission)({ permission: import_backstage_plugin_litellm_common.litellmKeyManagePermission });
       const revokePermission = (0, import_plugin_permission_react.usePermission)({ permission: import_backstage_plugin_litellm_common.litellmKeyRevokePermission });
+      const unblockPermission = (0, import_plugin_permission_react.usePermission)({ permission: import_backstage_plugin_litellm_common.litellmKeyUnblockPermission });
       const canManageKeys = !managePermission.loading && managePermission.allowed;
       const canRevokeKeys = !revokePermission.loading && revokePermission.allowed;
       const manageDenied = !managePermission.loading && !managePermission.allowed;
       const revokeDenied = !revokePermission.loading && !revokePermission.allowed;
+      const canUnblockKeys = !unblockPermission.loading && unblockPermission.allowed;
+      const unblockDenied = !unblockPermission.loading && !unblockPermission.allowed;
       const [blockConfirmKey, setBlockConfirmKey] = (0, import_react4.useState)(null);
       const [blockSubmitting, setBlockSubmitting] = (0, import_react4.useState)(false);
       const [deleteConfirmKey, setDeleteConfirmKey] = (0, import_react4.useState)(null);
@@ -1860,6 +1880,11 @@ var init_KeysTable = __esm({
         return filteredKeys.map((key) => {
           const keyId = key.token ?? key.key;
           const keyModels = key.models ?? [];
+          const blockState = blockButtonState(
+            key.blocked,
+            { allowed: canManageKeys, denied: manageDenied },
+            { allowed: canUnblockKeys, denied: unblockDenied }
+          );
           return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             import_TableRow.default,
             {
@@ -1931,19 +1956,13 @@ var init_KeysTable = __esm({
                       children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons_material2.Edit, { fontSize: "small" })
                     }
                   ) }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Tooltip.default, { describeChild: true, title: (() => {
-                    if (manageDenied) return "No permission to block keys";
-                    return key.blocked ? "Unblock key" : "Block key \u2014 suspends without revoking";
-                  })(), placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Tooltip.default, { describeChild: true, title: blockState.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     import_IconButton.default,
                     {
                       size: "small",
                       onClick: () => handleToggleBlock(key),
-                      disabled: blockSubmitting || !canManageKeys,
-                      "aria-label": (() => {
-                        if (manageDenied) return "No permission to block keys";
-                        return key.blocked ? "Unblock key" : "Block key \u2014 suspends without revoking";
-                      })(),
+                      disabled: blockSubmitting || blockState.disabled,
+                      "aria-label": blockState.label,
                       sx: quietIconButtonSx("warning"),
                       children: keyBlockIcon(blockSubmitting, key.blocked)
                     }
@@ -6563,6 +6582,7 @@ init_widgetState();
 // src/homeWidgetHelpers.ts
 init_format();
 init_tokens();
+init_dates();
 function rangeCaption(startDay, endDay) {
   return `${fmtDateShort(startDay)} \u2013 ${fmtDateShort(endDay)}`;
 }
@@ -6587,6 +6607,10 @@ function sparklineAriaLabel(points) {
   const peakDate = fmtDateShort(maxPoint.date);
   return `Daily spend over ${dayCount} day${dayCount === 1 ? "" : "s"}, total ${fmtUsd(total)}, peak ${fmtUsd(maxPoint.spend)} on ${peakDate}`;
 }
+function spendOnDay(points, now = /* @__PURE__ */ new Date()) {
+  const day = toLocalDay(now);
+  return points.find((p) => p.date === day)?.spend ?? 0;
+}
 function usageSummary(usage) {
   if (!usage) {
     return "$0.00 spent \xB7 0 in \xB7 0 out";
@@ -6815,7 +6839,76 @@ function resetLabel(limit) {
   const window2 = fmtBudgetDuration(limit.budgetDuration);
   return window2 ? `resets ${window2}` : "never resets";
 }
-var LevelGauge = ({
+var Tag = ({ children, tone, title }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  import_Typography17.default,
+  {
+    title,
+    sx: (theme) => ({
+      fontSize: 10.5,
+      fontWeight: 700,
+      letterSpacing: "0.08em",
+      textTransform: "uppercase",
+      lineHeight: 1.3,
+      color: tone ? toneColor(theme, tone) : theme.palette.text.secondary,
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    }),
+    children
+  }
+);
+var InlineStat = ({ label, value, hint, tone = "accent", title }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { sx: { minWidth: 0, flex: 1 }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { sx: { display: "flex", alignItems: "center", gap: 0.625, minWidth: 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      import_Box19.default,
+      {
+        sx: (theme) => ({
+          width: 6,
+          height: 6,
+          borderRadius: "50%",
+          bgcolor: toneColor(theme, tone),
+          flexShrink: 0
+        })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Tag, { children: label })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_Typography17.default,
+    {
+      title,
+      sx: {
+        fontSize: 19,
+        fontWeight: 700,
+        lineHeight: 1.15,
+        mt: 0.25,
+        fontVariantNumeric: "tabular-nums",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      },
+      children: value
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_Typography17.default,
+    {
+      variant: "caption",
+      color: "text.secondary",
+      sx: {
+        display: "block",
+        mt: 0.25,
+        fontSize: 10.5,
+        minHeight: 14,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      },
+      children: hint ?? ""
+    }
+  )
+] });
+var LevelRow = ({
   gauge,
   size,
   keysHref
@@ -6824,14 +6917,42 @@ var LevelGauge = ({
   const limit = gauge.limit;
   const tone = limit ? budgetTone2(limit.pct) : "neutral";
   const extra = gauge.kind === "key" ? Math.max(0, gauge.count - 1) : 0;
+  const overCap = Boolean(limit && limit.pct > 100);
+  const subNote = () => {
+    if (overCap) return "Over cap";
+    if (extra > 0 && keysHref) {
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        import_Typography17.default,
+        {
+          component: import_core_components5.Link,
+          to: keysHref,
+          variant: "caption",
+          sx: {
+            fontSize: 10.5,
+            color: "primary.main",
+            textDecoration: "none",
+            "&:hover": { textDecoration: "underline" }
+          },
+          children: [
+            "+",
+            extra,
+            " more"
+          ]
+        }
+      );
+    }
+    return limit?.sublabel ?? null;
+  };
   const gaugeAriaLabel = limit ? `${name} budget used: ${Math.round(limit.pct)}%` : `${name} \u2014 no cap`;
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     import_Box19.default,
     {
       sx: {
-        display: "flex",
-        flexDirection: "column",
+        display: "grid",
+        gridTemplateColumns: "auto minmax(0, 1fr) auto",
         alignItems: "center",
+        gap: 1.25,
+        py: 0.75,
         minWidth: 0
       },
       children: [
@@ -6845,84 +6966,109 @@ var LevelGauge = ({
             ariaLabel: gaugeAriaLabel
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_Typography17.default,
-          {
-            sx: (theme) => ({
-              mt: 0.75,
-              fontSize: 10.5,
-              fontWeight: 700,
-              letterSpacing: "0.08em",
-              textTransform: "uppercase",
-              color: tone === "neutral" ? theme.palette.text.secondary : void 0
-            }),
-            children: name
-          }
-        ),
-        limit ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Tag, { tone: tone === "warning" || tone === "danger" ? tone : void 0, children: name }),
+          limit ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              import_Typography17.default,
+              {
+                variant: "caption",
+                title: limit.sublabel ? `${limit.label} \xB7 ${limit.sublabel}` : limit.label,
+                sx: {
+                  display: "block",
+                  fontSize: 11.5,
+                  fontWeight: 600,
+                  lineHeight: 1.35,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: limit.label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              import_Typography17.default,
+              {
+                variant: "caption",
+                color: overCap ? "error" : "text.secondary",
+                sx: {
+                  display: "block",
+                  fontSize: 10.5,
+                  fontWeight: overCap ? 700 : void 0,
+                  lineHeight: 1.35,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: subNote()
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             import_Typography17.default,
             {
               variant: "caption",
-              title: limit.sublabel ? `${limit.label} \xB7 ${limit.sublabel}` : limit.label,
+              color: "text.secondary",
               sx: {
-                mt: 0.25,
-                fontSize: 11,
-                fontWeight: 600,
-                maxWidth: "100%",
+                display: "block",
+                fontSize: 10.5,
+                lineHeight: 1.35,
                 overflow: "hidden",
                 textOverflow: "ellipsis",
                 whiteSpace: "nowrap"
               },
-              children: limit.label
+              children: none
             }
-          ),
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { sx: { minWidth: 0, textAlign: "right" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             import_Typography17.default,
             {
-              variant: "caption",
-              color: "text.secondary",
+              title: limit ? `${fmtUsd(limit.spend)} of ${fmtUsd(limit.budget)}` : void 0,
               sx: {
-                fontSize: 10.5,
+                display: "block",
+                fontSize: 12.5,
+                fontWeight: 600,
+                lineHeight: 1.35,
                 fontVariantNumeric: "tabular-nums",
-                textAlign: "center"
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                color: limit ? void 0 : "text.secondary"
               },
-              children: spendCaption(limit)
+              children: amountCaption(limit)
             }
           ),
-          extra > 0 && keysHref ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             import_Typography17.default,
             {
-              component: import_core_components5.Link,
-              to: keysHref,
               variant: "caption",
+              color: "text.secondary",
               sx: {
+                display: "block",
                 fontSize: 10.5,
-                color: "primary.main",
-                textDecoration: "none",
-                "&:hover": { textDecoration: "underline" }
+                lineHeight: 1.35,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis"
               },
-              children: [
-                "+",
-                extra,
-                " more"
-              ]
+              children: amountNote(limit)
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Typography17.default, { variant: "caption", color: "text.secondary", sx: { fontSize: 10.5 }, children: resetLabel(limit) })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_Typography17.default,
-          {
-            variant: "caption",
-            color: "text.secondary",
-            sx: { mt: 0.25, fontSize: 10.5, textAlign: "center" },
-            children: none
-          }
-        )
+          )
+        ] })
       ]
     }
   );
 };
-var UsageMiniChart = ({ data, totalSpend, loading, height, usageUnavailable = false, maxBudget }) => {
+function amountCaption(limit) {
+  if (!limit) return "";
+  return limit.hidden ? `${Math.round(limit.pct)}%` : spendCaption(limit);
+}
+function amountNote(limit) {
+  if (!limit) return "";
+  return limit.hidden ? "hidden by admin" : resetLabel(limit);
+}
+var SpendStrip = ({ data, mtdSpend, loading, height, usageUnavailable = false, maxBudget }) => {
   const renderPlot = () => {
     if (loading) {
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Skeleton8.default, { variant: "rectangular", width: "100%", height: "100%" });
@@ -6968,99 +7114,70 @@ var UsageMiniChart = ({ data, totalSpend, loading, height, usageUnavailable = fa
       )
     ] }) });
   };
-  const renderCaption = () => {
-    if (loading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Typography17.default, { variant: "caption", color: "text.secondary", sx: { mt: 0.25, fontSize: 11 }, children: "\u2026" });
-    }
-    if (usageUnavailable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_Typography17.default,
-        {
-          variant: "caption",
-          color: "text.secondary",
-          sx: { mt: 0.25, fontSize: 10.5, textAlign: "center" },
-          children: USAGE_UNAVAILABLE_MSG
-        }
-      );
-    }
-    if (data.length === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_Typography17.default,
-        {
-          variant: "caption",
-          color: "text.secondary",
-          sx: { mt: 0.25, fontSize: 10.5, textAlign: "center" },
-          children: "No spend this month"
-        }
-      );
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_Typography17.default,
-        {
-          variant: "caption",
-          title: `${fmtUsd(totalSpend)} spent month to date`,
-          sx: {
-            mt: 0.25,
-            fontSize: 11,
-            fontWeight: 600,
-            maxWidth: "100%",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-            fontVariantNumeric: "tabular-nums"
-          },
-          children: fmtUsd(totalSpend)
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Typography17.default, { variant: "caption", color: "text.secondary", sx: { fontSize: 10.5 }, children: "month to date" })
-    ] });
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-    import_Box19.default,
-    {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        minWidth: 0
-      },
-      role: "img",
-      "aria-label": sparklineAriaLabel(data),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Box19.default, { sx: { height, width: "100%" }, children: renderPlot() }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_Typography17.default,
-          {
-            sx: (theme) => ({
-              mt: 0.75,
-              fontSize: 10.5,
-              fontWeight: 700,
-              letterSpacing: "0.08em",
-              textTransform: "uppercase",
-              color: theme.palette.text.secondary
-            }),
-            children: "Spend (MTD)"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_Typography17.default,
-          {
-            variant: "caption",
-            color: "text.secondary",
-            sx: { mt: 0.25, fontSize: 10.5 },
-            children: mtdCaption()
-          }
-        ),
-        renderCaption()
-      ]
-    }
-  );
+  const caption = (() => {
+    if (loading) return "\u2026";
+    if (usageUnavailable) return USAGE_UNAVAILABLE_MSG;
+    if (data.length === 0) return "No spend this month";
+    return mtdCaption();
+  })();
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { role: "img", "aria-label": sparklineAriaLabel(data), sx: { minWidth: 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Box19.default, { sx: { height, width: "100%" }, children: renderPlot() }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      import_Box19.default,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "baseline",
+          justifyContent: "space-between",
+          gap: 1,
+          mt: 0.5,
+          minWidth: 0
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { sx: { display: "flex", alignItems: "baseline", gap: 0.75, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Tag, { children: "Spent (mtd)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              import_Typography17.default,
+              {
+                variant: "caption",
+                color: "text.secondary",
+                sx: { fontSize: 10.5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                children: caption
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            import_Typography17.default,
+            {
+              title: loading || usageUnavailable ? void 0 : `${fmtUsd(mtdSpend)} spent month to date`,
+              sx: {
+                fontSize: 12.5,
+                fontWeight: 700,
+                fontVariantNumeric: "tabular-nums",
+                whiteSpace: "nowrap"
+              },
+              children: loading || usageUnavailable ? "\u2014" : fmtUsd(mtdSpend)
+            }
+          )
+        ]
+      }
+    )
+  ] });
 };
+function statValue(loading, unavailable, value) {
+  if (loading) return "\u2026";
+  if (unavailable) return "\u2014";
+  return value;
+}
+function statHint(loading, unavailable, hint) {
+  if (loading) return void 0;
+  if (unavailable) return USAGE_UNAVAILABLE_MSG;
+  return hint;
+}
 var LiteLLMBudgetGauges = ({
   title = "Budget",
   bare = false,
-  size = 72,
+  size = 56,
   keysHref,
   moduleHref: propModuleHref,
   onCreateKey,
@@ -7077,7 +7194,7 @@ var LiteLLMBudgetGauges = ({
   const api = (0, import_core_plugin_api7.useApi)(liteLlmApiRef);
   const theme = (0, import_styles13.useTheme)();
   const isSmallScreen = (0, import_useMediaQuery.default)(theme.breakpoints.down("sm"));
-  const gaugeSize = isSmallScreen ? 56 : size;
+  const gaugeSize = isSmallScreen ? Math.min(48, size) : size;
   const expandedRegionId = (0, import_react15.useId)();
   const moduleRouteRef = (0, import_frontend_plugin_api6.useRouteRef)(rootRouteRef);
   const moduleHref = propModuleHref ?? moduleRouteRef?.();
@@ -7152,6 +7269,12 @@ var LiteLLMBudgetGauges = ({
     }),
     [loading, profileError, user, usageError, keys]
   );
+  const today = /* @__PURE__ */ new Date();
+  const todaySpend = spendOnDay(dailySpend, today);
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  const yesterdaySpend = dailySpend.some((d) => d.date === toLocalDay(yesterday)) ? spendOnDay(dailySpend, yesterday) : null;
+  const todayHint = yesterdaySpend === null ? void 0 : `vs ${fmtUsd(yesterdaySpend)} yesterday`;
   const summaryText = headline.count === 0 ? "no limits apply" : `${headline.count} limit${headline.count === 1 ? "" : "s"}`;
   const resolvedCtas = (0, import_react15.useMemo)(() => {
     return resolveCtas({
@@ -7212,29 +7335,70 @@ var LiteLLMBudgetGauges = ({
         }
       )
     ] }),
-    viewState.kind === "loading" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Box19.default, { sx: { display: "flex", alignItems: "flex-start", gap: 1, minHeight: size }, children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { sx: { display: "flex", flexDirection: "column", alignItems: "center", flex: 1 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Skeleton8.default, { variant: "circular", width: size, height: size, sx: { mb: 0.75 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Skeleton8.default, { variant: "text", width: "100%", height: 12, sx: { mb: 0.25 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Skeleton8.default, { variant: "text", width: "80%", height: 11, sx: { mb: 0.25 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Skeleton8.default, { variant: "text", width: "70%", height: 10.5 })
+    viewState.kind === "loading" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Box19.default, { sx: { display: "flex", flexDirection: "column", gap: 1.25, minHeight: size }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { sx: { display: "flex", alignItems: "center", gap: 1.25 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Skeleton8.default, { variant: "circular", width: size, height: size }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Skeleton8.default, { variant: "text", width: "70%", height: 12, sx: { mb: 0.25 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Skeleton8.default, { variant: "text", width: "45%", height: 11 })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Skeleton8.default, { variant: "text", width: 64, height: 12 })
     ] }, i)) }),
     viewState.kind === "error" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Typography17.default, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: viewState.message }),
     viewState.kind === "unprovisioned" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Typography17.default, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: UNPROVISIONED_MSG }),
     viewState.kind === "ready" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_Box19.default, { sx: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(76px, 1fr))", gap: 1 }, children: [
-        gauges.map((gauge) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LevelGauge, { gauge, size: gaugeSize, keysHref: keysTabHref }, gauge.kind)),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          UsageMiniChart,
-          {
-            data: dailySpend,
-            totalSpend: mtdSpend,
-            loading: usageLoading,
-            height: gaugeSize,
-            usageUnavailable: viewState.usageUnavailable,
-            maxBudget: user?.max_budget ?? void 0
-          }
-        )
-      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        import_Box19.default,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "stretch",
+            gap: 2,
+            mb: 1.25,
+            minWidth: 0
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              InlineStat,
+              {
+                label: "Today spent",
+                tone: "accent",
+                value: statValue(usageLoading, viewState.usageUnavailable, fmtUsd(todaySpend)),
+                hint: statHint(usageLoading, viewState.usageUnavailable, todayHint),
+                title: usageLoading || viewState.usageUnavailable ? void 0 : "Spend since local midnight"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Box19.default, { sx: { width: "1px", bgcolor: "divider", flexShrink: 0 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              InlineStat,
+              {
+                label: "Month to date",
+                value: statValue(usageLoading, viewState.usageUnavailable, fmtUsd(mtdSpend)),
+                hint: statHint(usageLoading, viewState.usageUnavailable, mtdCaption()),
+                title: usageLoading || viewState.usageUnavailable ? void 0 : "Spend from the 1st of this month"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Box19.default, { sx: { borderTop: "1px solid", borderColor: "divider" }, children: gauges.map((gauge, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        import_Box19.default,
+        {
+          sx: i === 0 ? void 0 : { borderTop: "1px solid", borderColor: "divider" },
+          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LevelRow, { gauge, size: gaugeSize, keysHref: keysTabHref })
+        },
+        gauge.kind
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Box19.default, { sx: { mt: 1.25 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        SpendStrip,
+        {
+          data: dailySpend,
+          mtdSpend,
+          loading: usageLoading,
+          height: gaugeSize,
+          usageUnavailable: viewState.usageUnavailable,
+          maxBudget: user?.max_budget ?? void 0
+        }
+      ) }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_Collapse4.default, { in: isExpanded, unmountOnExit: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         import_Box19.default,
         {