@acarmisc/backstage-plugin-litellm 0.8.0 → 0.9.0

package/dist/api.d.ts

@@ -1,5 +1,5 @@
 import { FetchApi } from '@backstage/core-plugin-api';
-import { UserInfo, VirtualKey, ModelInfo, UsageMetrics, TeamInfo, GenerateKeyRequest, GenerateKeyResponse, UpdateKeyRequest, AuditLogsParams, PaginatedAuditLogs } from './types';
+import { UserInfo, VirtualKey, ModelInfo, UsageMetrics, TeamInfo, GenerateKeyRequest, GenerateKeyResponse, UpdateKeyRequest, AuditLogsParams, PaginatedAuditLogs, LiteLlmConfig } from './types';
 export interface LiteLlmApiInterface {
     getUserInfo(): Promise<UserInfo>;
     listKeys(): Promise<VirtualKey[]>;
@@ -20,6 +20,7 @@ export interface LiteLlmApiInterface {
     getUsage(startDate: string, endDate: string): Promise<UsageMetrics>;
     getTeamUsage(teamId: string, startDate: string, endDate: string): Promise<UsageMetrics>;
     getAuditLogs(params: AuditLogsParams): Promise<PaginatedAuditLogs>;
+    getConfig(): Promise<LiteLlmConfig>;
 }
 export declare const liteLlmApiRef: import("@backstage/core-plugin-api").ApiRef<LiteLlmApiInterface>;
 export type ExpiryStatus = 'expired' | 'soon' | 'ok';
@@ -51,4 +52,5 @@ export declare class LiteLlmApi implements LiteLlmApiInterface {
     getTeams(): Promise<TeamInfo[]>;
     getUsage(startDate: string, endDate: string): Promise<UsageMetrics>;
     getTeamUsage(teamId: string, startDate: string, endDate: string): Promise<UsageMetrics>;
+    getConfig(): Promise<LiteLlmConfig>;
 }

package/dist/components/KeysTable.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { VirtualKey, ModelInfo, TeamInfo, GenerateKeyRequest, GenerateKeyResponse, UpdateKeyRequest } from '../types';
+import { VirtualKey, ModelInfo, TeamInfo, GenerateKeyRequest, GenerateKeyResponse, UpdateKeyRequest, LiteLlmConfig } from '../types';
 interface KeysTableProps {
     keys: VirtualKey[];
     models: ModelInfo[];
@@ -15,6 +15,8 @@ interface KeysTableProps {
     onPruneExpiredKeys: () => Promise<{
         pruned: number;
     }>;
+    /** Resolve the public LiteLLM proxy URL, used for ready-to-paste snippets. */
+    onGetConfig: () => Promise<LiteLlmConfig>;
 }
 export declare const KeysTable: React.FC<KeysTableProps>;
 export {};

package/dist/format.d.ts

@@ -1,2 +1,7 @@
 export declare const fmtUsd: (n: number) => string;
 export declare const fmtInt: (n: number) => string;
+/**
+ * Estimate how many tokens a USD budget buys at a given per-token price.
+ * Returns null when the price is missing or non-positive.
+ */
+export declare const estimateTokensFromBudget: (budget: number, pricePerToken?: number) => number | null;

package/dist/index.cjs.js

@@ -169,6 +169,9 @@ var init_api = __esm({
           end_date: endDate
         });
       }
+      async getConfig() {
+        return this.get("/config");
+      }
     };
   }
 });
@@ -199,6 +202,20 @@ var init_DashboardHeader = __esm({
   }
 });
 
+// src/format.ts
+var fmtUsd, fmtInt, estimateTokensFromBudget;
+var init_format = __esm({
+  "src/format.ts"() {
+    "use strict";
+    fmtUsd = (n) => `$${(n ?? 0).toFixed(n < 1 ? 4 : 2)}`;
+    fmtInt = (n) => (n ?? 0).toLocaleString();
+    estimateTokensFromBudget = (budget, pricePerToken) => {
+      if (!pricePerToken || pricePerToken <= 0 || !budget || budget <= 0) return null;
+      return Math.floor(budget / pricePerToken);
+    };
+  }
+});
+
 // src/components/KeysTable.tsx
 function ExpiryChip({ expiresAt }) {
   const status = expiryStatus(expiresAt);
@@ -219,7 +236,34 @@ function fmtCost(perToken) {
   const per1k = perToken * 1e3;
   return per1k < 0.01 ? `$${(perToken * 1e6).toFixed(2)}/M` : `$${per1k.toFixed(3)}/1K`;
 }
-var import_react2, import_material2, import_icons_material, maskKey, shortKeyId, formatDate, emptyForm, keyToEditForm, KeysTable;
+function trimSlash(url) {
+  return url.replace(/\/+$/, "");
+}
+function buildSnippets(baseUrl, key, model) {
+  const base = trimSlash(baseUrl);
+  return {
+    curl: `curl ${base}/v1/chat/completions \\
+  -H "Authorization: Bearer ${key}" \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "model": "${model}",
+    "messages": [{ "role": "user", "content": "Hello!" }]
+  }'`,
+    openai: `from openai import OpenAI
+
+client = OpenAI(
+  api_key="${key}",
+  base_url="${base}/v1",
+)
+
+response = client.chat.completions.create(
+  model="${model}",
+  messages=[{ "role": "user", "content": "Hello!" }],
+)
+print(response.choices[0].message.content)`
+  };
+}
+var import_react2, import_material2, import_icons_material, maskKey, shortKeyId, formatDate, emptyForm, keyToEditForm, KeysTable, SnippetTabs;
 var init_KeysTable = __esm({
   "src/components/KeysTable.tsx"() {
     "use strict";
@@ -227,6 +271,7 @@ var init_KeysTable = __esm({
     import_material2 = require("@mui/material");
     import_icons_material = require("@mui/icons-material");
     init_api();
+    init_format();
     maskKey = (key) => {
       if (key.length <= 8) return "***";
       return `${key.slice(0, 4)}...${key.slice(-4)}`;
@@ -272,11 +317,15 @@ var init_KeysTable = __esm({
       onUnblockKey,
       onResetKeySpend,
       onDeleteKey,
-      onPruneExpiredKeys
+      onPruneExpiredKeys,
+      onGetConfig
     }) => {
       const [generateModalOpen, setGenerateModalOpen] = (0, import_react2.useState)(false);
       const [newKeyValue, setNewKeyValue] = (0, import_react2.useState)(null);
+      const [newKeySnippets, setNewKeySnippets] = (0, import_react2.useState)(null);
+      const [newKeyModel, setNewKeyModel] = (0, import_react2.useState)("");
       const [formData, setFormData] = (0, import_react2.useState)(emptyForm());
+      const [unlimitedBudget, setUnlimitedBudget] = (0, import_react2.useState)(false);
       const [submitting, setSubmitting] = (0, import_react2.useState)(false);
       const [editingKey, setEditingKey] = (0, import_react2.useState)(null);
       const [editForm, setEditForm] = (0, import_react2.useState)({});
@@ -299,12 +348,35 @@ var init_KeysTable = __esm({
       const selectedModels = models.filter((m) => (formData.models || []).includes(m.model_name));
       const selectedTeam = teams.find((t) => t.team_id === formData.team_id) ?? null;
       const editSelectedModels = models.filter((m) => (editForm.models || []).includes(m.model_name));
+      const aliasError = !(formData.alias || "").trim();
+      const budgetInvalid = !unlimitedBudget && (formData.max_budget === void 0 || formData.max_budget === null || formData.max_budget <= 0);
+      const canGenerate = !aliasError && !budgetInvalid && !submitting;
+      const budgetEstimate = (0, import_react2.useMemo)(() => {
+        if (unlimitedBudget || budgetInvalid) return null;
+        const inputCosts = selectedModels.map((m) => m.input_cost_per_token).filter((c) => typeof c === "number" && c > 0);
+        if (inputCosts.length === 0) return null;
+        const pricePerToken = Math.max(...inputCosts);
+        return estimateTokensFromBudget(formData.max_budget ?? 0, pricePerToken);
+      }, [formData.max_budget, selectedModels, unlimitedBudget, budgetInvalid]);
       const handleGenerate = async () => {
         setSubmitting(true);
         try {
-          const response = await onGenerateKey(formData);
+          const request = {
+            ...formData,
+            max_budget: unlimitedBudget ? null : formData.max_budget
+          };
+          const response = await onGenerateKey(request);
           setNewKeyValue(response.key);
+          setNewKeyModel(formData.models?.[0] ?? "");
+          setNewKeySnippets(null);
+          try {
+            const config = await onGetConfig();
+            const model = formData.models?.[0] ?? "";
+            setNewKeySnippets(buildSnippets(config.baseUrl, response.key, model));
+          } catch {
+          }
           setFormData(emptyForm());
+          setUnlimitedBudget(false);
         } catch (error) {
           console.error("Failed to generate key:", error);
         } finally {
@@ -314,7 +386,9 @@ var init_KeysTable = __esm({
       const handleCloseModal = () => {
         setGenerateModalOpen(false);
         setNewKeyValue(null);
+        setNewKeySnippets(null);
         setFormData(emptyForm());
+        setUnlimitedBudget(false);
       };
       const handleOpenEdit = (k) => {
         setEditingKey(k);
@@ -439,7 +513,17 @@ var init_KeysTable = __esm({
           onClick: () => setGenerateModalOpen(true)
         },
         "Generate New Key"
-      ))), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableContainer, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Table, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableHead, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Alias"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Key ID"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Created"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Expires"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Budget"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "TPM / RPM"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Models"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { align: "right" }, "Actions"))), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableBody, null, loading ? /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { colSpan: 8, align: "center" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.CircularProgress, { size: 24 }))) : filteredKeys.length === 0 ? /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { colSpan: 8, align: "center" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { color: "text.secondary" }, filterText ? "No keys match filter" : "No keys found"))) : filteredKeys.map((key) => {
+      ))), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableContainer, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Table, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableHead, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Alias"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Key ID"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Created"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Expires"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Budget"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "TPM / RPM"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Models"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { align: "right" }, "Actions"))), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableBody, null, loading ? /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { colSpan: 8, align: "center" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.CircularProgress, { size: 24 }))) : filteredKeys.length === 0 ? /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { colSpan: 8, align: "center", sx: { py: 4 } }, filterText ? /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { color: "text.secondary" }, "No keys match filter") : /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { color: "text.secondary", gutterBottom: true }, "No keys yet \u2014 generate your first key to start calling models."), /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.Button,
+        {
+          variant: "contained",
+          color: "primary",
+          size: "small",
+          startIcon: /* @__PURE__ */ import_react2.default.createElement(import_icons_material.Add, null),
+          onClick: () => setGenerateModalOpen(true)
+        },
+        "Generate Your First Key"
+      )))) : filteredKeys.map((key) => {
         const keyId = key.token ?? key.key;
         const isRotating = rotatingKeyId === keyId;
         const isBlocking = blockingKeyId === keyId;
@@ -510,12 +594,14 @@ var init_KeysTable = __esm({
           newKeyValue
         ),
         /* @__PURE__ */ import_react2.default.createElement(import_material2.IconButton, { onClick: () => copyToClipboard(newKeyValue) }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material.ContentCopy, null))
-      )) : /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, /* @__PURE__ */ import_react2.default.createElement(
+      ), newKeySnippets && /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { mt: 3 }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material.Code, { fontSize: "small", color: "action" }), /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "subtitle2" }, "Start calling the proxy \u2014 paste and run")), /* @__PURE__ */ import_react2.default.createElement(SnippetTabs, { snippets: newKeySnippets, model: newKeyModel, onCopy: copyToClipboard }))) : /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, /* @__PURE__ */ import_react2.default.createElement(
         import_material2.TextField,
         {
           label: "Alias",
           value: formData.alias || "",
           onChange: (e) => setFormData({ ...formData, alias: e.target.value }),
+          error: aliasError,
+          helperText: aliasError ? "Alias is required" : void 0,
           required: true,
           fullWidth: true
         }
@@ -562,13 +648,35 @@ var init_KeysTable = __esm({
           renderOption: (props, m) => /* @__PURE__ */ import_react2.default.createElement("li", { ...props }, modelOption(m)),
           renderInput: (params) => /* @__PURE__ */ import_react2.default.createElement(import_material2.TextField, { ...params, label: "Models", helperText: "Leave empty to allow all models", fullWidth: true })
         }
+      ), /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.FormControlLabel,
+        {
+          control: /* @__PURE__ */ import_react2.default.createElement(
+            import_material2.Checkbox,
+            {
+              checked: unlimitedBudget,
+              onChange: (e) => {
+                setUnlimitedBudget(e.target.checked);
+                if (e.target.checked) {
+                  setFormData({ ...formData, max_budget: null });
+                } else {
+                  setFormData({ ...formData, max_budget: 100 });
+                }
+              }
+            }
+          ),
+          label: "Unlimited budget"
+        }
       ), /* @__PURE__ */ import_react2.default.createElement(
         import_material2.TextField,
         {
           label: "Max Budget (USD)",
           type: "number",
-          value: formData.max_budget ?? "",
+          value: unlimitedBudget ? "" : formData.max_budget ?? "",
           onChange: (e) => setFormData({ ...formData, max_budget: e.target.value ? Number(e.target.value) : void 0 }),
+          error: budgetInvalid,
+          helperText: budgetInvalid ? 'Enter a positive budget or tick "Unlimited"' : budgetEstimate !== null ? `\u2248 ${fmtInt(budgetEstimate)} tokens at the selected model's rate` : void 0,
+          disabled: unlimitedBudget,
           required: true,
           fullWidth: true
         }
@@ -596,7 +704,7 @@ var init_KeysTable = __esm({
           onClick: handleGenerate,
           variant: "contained",
           color: "primary",
-          disabled: submitting
+          disabled: !canGenerate
         },
         submitting ? /* @__PURE__ */ import_react2.default.createElement(import_material2.CircularProgress, { size: 24 }) : "Generate"
       ), newKeyValue && /* @__PURE__ */ import_react2.default.createElement(import_material2.Button, { onClick: handleCloseModal, variant: "contained", color: "success" }, "Done"))), /* @__PURE__ */ import_react2.default.createElement(import_material2.Dialog, { open: !!editingKey, onClose: handleCloseEdit, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogTitle, null, "Edit Key"), /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogContent, null, editingKey && /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "body2", color: "text.secondary" }, /* @__PURE__ */ import_react2.default.createElement("code", { style: { fontFamily: "monospace", color: "inherit" } }, maskKey(editingKey.key))), /* @__PURE__ */ import_react2.default.createElement(
@@ -704,16 +812,44 @@ var init_KeysTable = __esm({
         pruneSubmitting ? /* @__PURE__ */ import_react2.default.createElement(import_material2.CircularProgress, { size: 20 }) : "Prune"
       ))));
     };
-  }
-});
-
-// src/format.ts
-var fmtUsd, fmtInt;
-var init_format = __esm({
-  "src/format.ts"() {
-    "use strict";
-    fmtUsd = (n) => `$${(n ?? 0).toFixed(n < 1 ? 4 : 2)}`;
-    fmtInt = (n) => (n ?? 0).toLocaleString();
+    SnippetTabs = ({ snippets, model, onCopy }) => {
+      const [tab, setTab] = (0, import_react2.useState)("curl");
+      const code = tab === "curl" ? snippets.curl : snippets.openai;
+      return /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Tabs, { value: tab, onChange: (_, v) => setTab(v), sx: { mb: 1 } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Tab, { label: "curl", value: "curl" }), /* @__PURE__ */ import_react2.default.createElement(import_material2.Tab, { label: "OpenAI SDK", value: "openai" })), /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.Box,
+        {
+          position: "relative",
+          p: 1.5,
+          sx: { backgroundColor: "action.hover", border: "1px solid", borderColor: "divider", borderRadius: 1 }
+        },
+        /* @__PURE__ */ import_react2.default.createElement(
+          import_material2.IconButton,
+          {
+            size: "small",
+            onClick: () => onCopy(code),
+            title: "Copy snippet",
+            sx: { position: "absolute", top: 4, right: 4 }
+          },
+          /* @__PURE__ */ import_react2.default.createElement(import_icons_material.ContentCopy, { fontSize: "small" })
+        ),
+        /* @__PURE__ */ import_react2.default.createElement(
+          import_material2.Typography,
+          {
+            component: "pre",
+            sx: {
+              fontFamily: "monospace",
+              fontSize: 12,
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-all",
+              mb: 0,
+              pr: 4
+            }
+          },
+          code
+        ),
+        model && /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "caption", color: "text.secondary", display: "block", mt: 1 }, "Using model \u201C", model, "\u201D \u2014 swap it for any model you have access to.")
+      ));
+    };
   }
 });
 
@@ -1007,7 +1143,7 @@ var init_TeamUsage = __esm({
         return /* @__PURE__ */ import_react4.default.createElement(import_material4.Paper, { sx: { p: 2 } }, /* @__PURE__ */ import_react4.default.createElement(import_material4.LinearProgress, null));
       }
       if (!teams.length) {
-        return /* @__PURE__ */ import_react4.default.createElement(import_material4.Paper, { sx: { p: 2 } }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react4.default.createElement(import_icons_material2.Group, { color: "disabled" }), /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { color: "text.secondary", variant: "body2" }, "No team membership found in LiteLLM for this account.")));
+        return /* @__PURE__ */ import_react4.default.createElement(import_material4.Paper, { sx: { p: 2 } }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", alignItems: "flex-start", gap: 1.5 }, /* @__PURE__ */ import_react4.default.createElement(import_icons_material2.Group, { color: "disabled", sx: { mt: 0.5 } }), /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { color: "text.secondary", variant: "body2" }, "You're not a member of any LiteLLM team yet."), /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { color: "text.secondary", variant: "body2", mt: 0.5 }, "That's fine \u2014 your account is provisioned, so you can still generate personal keys and use models. If you need a shared budget with colleagues, ask an admin to add you to a team."))));
       }
       return /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "h6", mb: 1 }, "Teams"), teams.map((team) => /* @__PURE__ */ import_react4.default.createElement(
         TeamCard,
@@ -1391,7 +1527,8 @@ var init_LiteLLMPage = __esm({
           onUnblockKey: handleUnblockKey,
           onResetKeySpend: handleResetKeySpend,
           onDeleteKey: handleDeleteKey,
-          onPruneExpiredKeys: handlePruneExpiredKeys
+          onPruneExpiredKeys: handlePruneExpiredKeys,
+          onGetConfig: () => api.getConfig()
         }
       ), activeTab === "teams" && /* @__PURE__ */ import_react6.default.createElement(
         TeamUsage,
@@ -1495,32 +1632,42 @@ var LiteLLMHomeWidget = ({
   const api = (0, import_core_plugin_api3.useApi)(liteLlmApiRef);
   const [period, setPeriod] = (0, import_react8.useState)(defaultPeriod);
   const [loading, setLoading] = (0, import_react8.useState)(true);
-  const [error, setError] = (0, import_react8.useState)(null);
+  const [usageError, setUsageError] = (0, import_react8.useState)(null);
+  const [keysError, setKeysError] = (0, import_react8.useState)(null);
   const [usage, setUsage] = (0, import_react8.useState)(null);
   const [keys, setKeys] = (0, import_react8.useState)([]);
   (0, import_react8.useEffect)(() => {
     let cancelled = false;
     setLoading(true);
-    setError(null);
+    setUsageError(null);
+    setKeysError(null);
     const { start, end } = presetToDateRange(period);
     const startDate = start.toISOString().split("T")[0];
     const endDate = end.toISOString().split("T")[0];
-    Promise.all([api.getUsage(startDate, endDate), api.listKeys()]).then(([usageData, keysData]) => {
-      if (!cancelled) {
-        setUsage(usageData);
-        setKeys(keysData);
-        setLoading(false);
-      }
-    }).catch((err) => {
-      if (!cancelled) {
-        setError(err.message ?? "Failed to load usage data");
+    Promise.allSettled([api.getUsage(startDate, endDate), api.listKeys()]).then(
+      ([usageResult, keysResult]) => {
+        if (cancelled) return;
+        if (usageResult.status === "fulfilled") {
+          setUsage(usageResult.value);
+        } else {
+          setUsage(null);
+          setUsageError(usageResult.reason?.message ?? "Failed to load usage data");
+        }
+        if (keysResult.status === "fulfilled") {
+          setKeys(keysResult.value);
+        } else {
+          setKeys([]);
+          setKeysError(keysResult.reason?.message ?? "Failed to load keys");
+        }
         setLoading(false);
       }
-    });
+    );
     return () => {
       cancelled = true;
     };
   }, [api, period]);
+  const partialFailure = !loading && (usageError || keysError) && (usage || keys.length > 0);
+  const totalFailure = !loading && usageError && keysError;
   const dailyData = (usage?.daily_usage ?? []).map((d) => ({
     date: d.date,
     spend: d.spend
@@ -1536,7 +1683,7 @@ var LiteLLMHomeWidget = ({
     /* @__PURE__ */ import_react8.default.createElement(import_material7.MenuItem, { value: "today" }, "Today"),
     /* @__PURE__ */ import_react8.default.createElement(import_material7.MenuItem, { value: "7d" }, "7d"),
     /* @__PURE__ */ import_react8.default.createElement(import_material7.MenuItem, { value: "30d" }, "30d")
-  ))), loading && /* @__PURE__ */ import_react8.default.createElement(import_material7.Box, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ import_react8.default.createElement(import_material7.CircularProgress, { size: 32 })), !loading && error && /* @__PURE__ */ import_react8.default.createElement(import_material7.Alert, { severity: "error", sx: { mt: 1 } }, error), !loading && !error && /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react8.default.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react8.default.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react8.default.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react8.default.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ import_react8.default.createElement(import_material7.Box, { height: 120 }, /* @__PURE__ */ import_react8.default.createElement(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react8.default.createElement(import_recharts3.AreaChart, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ import_react8.default.createElement(
+  ))), loading && /* @__PURE__ */ import_react8.default.createElement(import_material7.Box, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ import_react8.default.createElement(import_material7.CircularProgress, { size: 32 })), !loading && totalFailure && /* @__PURE__ */ import_react8.default.createElement(import_material7.Alert, { severity: "error", sx: { mt: 1 } }, usageError ?? "Failed to load usage data"), !loading && !totalFailure && /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, partialFailure && /* @__PURE__ */ import_react8.default.createElement(import_material7.Alert, { severity: "warning", sx: { mt: 1, mb: 1 } }, usageError ? `Usage data unavailable (${usageError}).` : "", keysError ? ` Key list unavailable (${keysError}).` : "", " Showing what loaded."), /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react8.default.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react8.default.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react8.default.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react8.default.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ import_react8.default.createElement(import_material7.Box, { height: 120 }, /* @__PURE__ */ import_react8.default.createElement(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react8.default.createElement(import_recharts3.AreaChart, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ import_react8.default.createElement(
     import_recharts3.Area,
     {
       type: "monotone",