@acarmisc/backstage-plugin-litellm 0.8.0 → 0.9.0

package/dist/index.esm.js

@@ -147,6 +147,9 @@ var init_api = __esm({
           end_date: endDate
         });
       }
+      async getConfig() {
+        return this.get("/config");
+      }
     };
   }
 });
@@ -177,6 +180,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
 import React2, { useState, useMemo } from "react";
 import {
@@ -201,9 +218,13 @@ import {
   CircularProgress,
   Autocomplete,
   LinearProgress as LinearProgress2,
-  InputAdornment
+  InputAdornment,
+  Checkbox,
+  FormControlLabel,
+  Tabs,
+  Tab
 } from "@mui/material";
-import { ContentCopy, Delete, Add, Edit, Autorenew, Search, Warning, Lock, LockOpen } from "@mui/icons-material";
+import { ContentCopy, Delete, Add, Edit, Autorenew, Search, Warning, Lock, LockOpen, Code } from "@mui/icons-material";
 function ExpiryChip({ expiresAt }) {
   const status = expiryStatus(expiresAt);
   if (!status) return /* @__PURE__ */ React2.createElement(Typography2, { variant: "body2", color: "text.secondary" }, "-");
@@ -223,11 +244,39 @@ function fmtCost(perToken) {
   const per1k = perToken * 1e3;
   return per1k < 0.01 ? `$${(perToken * 1e6).toFixed(2)}/M` : `$${per1k.toFixed(3)}/1K`;
 }
-var 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 maskKey, shortKeyId, formatDate, emptyForm, keyToEditForm, KeysTable, SnippetTabs;
 var init_KeysTable = __esm({
   "src/components/KeysTable.tsx"() {
     "use strict";
     init_api();
+    init_format();
     maskKey = (key) => {
       if (key.length <= 8) return "***";
       return `${key.slice(0, 4)}...${key.slice(-4)}`;
@@ -273,11 +322,15 @@ var init_KeysTable = __esm({
       onUnblockKey,
       onResetKeySpend,
       onDeleteKey,
-      onPruneExpiredKeys
+      onPruneExpiredKeys,
+      onGetConfig
     }) => {
       const [generateModalOpen, setGenerateModalOpen] = useState(false);
       const [newKeyValue, setNewKeyValue] = useState(null);
+      const [newKeySnippets, setNewKeySnippets] = useState(null);
+      const [newKeyModel, setNewKeyModel] = useState("");
       const [formData, setFormData] = useState(emptyForm());
+      const [unlimitedBudget, setUnlimitedBudget] = useState(false);
       const [submitting, setSubmitting] = useState(false);
       const [editingKey, setEditingKey] = useState(null);
       const [editForm, setEditForm] = useState({});
@@ -300,12 +353,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 = 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 {
@@ -315,7 +391,9 @@ var init_KeysTable = __esm({
       const handleCloseModal = () => {
         setGenerateModalOpen(false);
         setNewKeyValue(null);
+        setNewKeySnippets(null);
         setFormData(emptyForm());
+        setUnlimitedBudget(false);
       };
       const handleOpenEdit = (k) => {
         setEditingKey(k);
@@ -440,7 +518,17 @@ var init_KeysTable = __esm({
           onClick: () => setGenerateModalOpen(true)
         },
         "Generate New Key"
-      ))), /* @__PURE__ */ React2.createElement(TableContainer, null, /* @__PURE__ */ React2.createElement(Table, null, /* @__PURE__ */ React2.createElement(TableHead, null, /* @__PURE__ */ React2.createElement(TableRow, null, /* @__PURE__ */ React2.createElement(TableCell, null, "Alias"), /* @__PURE__ */ React2.createElement(TableCell, null, "Key ID"), /* @__PURE__ */ React2.createElement(TableCell, null, "Created"), /* @__PURE__ */ React2.createElement(TableCell, null, "Expires"), /* @__PURE__ */ React2.createElement(TableCell, null, "Budget"), /* @__PURE__ */ React2.createElement(TableCell, null, "TPM / RPM"), /* @__PURE__ */ React2.createElement(TableCell, null, "Models"), /* @__PURE__ */ React2.createElement(TableCell, { align: "right" }, "Actions"))), /* @__PURE__ */ React2.createElement(TableBody, null, loading ? /* @__PURE__ */ React2.createElement(TableRow, null, /* @__PURE__ */ React2.createElement(TableCell, { colSpan: 8, align: "center" }, /* @__PURE__ */ React2.createElement(CircularProgress, { size: 24 }))) : filteredKeys.length === 0 ? /* @__PURE__ */ React2.createElement(TableRow, null, /* @__PURE__ */ React2.createElement(TableCell, { colSpan: 8, align: "center" }, /* @__PURE__ */ React2.createElement(Typography2, { color: "text.secondary" }, filterText ? "No keys match filter" : "No keys found"))) : filteredKeys.map((key) => {
+      ))), /* @__PURE__ */ React2.createElement(TableContainer, null, /* @__PURE__ */ React2.createElement(Table, null, /* @__PURE__ */ React2.createElement(TableHead, null, /* @__PURE__ */ React2.createElement(TableRow, null, /* @__PURE__ */ React2.createElement(TableCell, null, "Alias"), /* @__PURE__ */ React2.createElement(TableCell, null, "Key ID"), /* @__PURE__ */ React2.createElement(TableCell, null, "Created"), /* @__PURE__ */ React2.createElement(TableCell, null, "Expires"), /* @__PURE__ */ React2.createElement(TableCell, null, "Budget"), /* @__PURE__ */ React2.createElement(TableCell, null, "TPM / RPM"), /* @__PURE__ */ React2.createElement(TableCell, null, "Models"), /* @__PURE__ */ React2.createElement(TableCell, { align: "right" }, "Actions"))), /* @__PURE__ */ React2.createElement(TableBody, null, loading ? /* @__PURE__ */ React2.createElement(TableRow, null, /* @__PURE__ */ React2.createElement(TableCell, { colSpan: 8, align: "center" }, /* @__PURE__ */ React2.createElement(CircularProgress, { size: 24 }))) : filteredKeys.length === 0 ? /* @__PURE__ */ React2.createElement(TableRow, null, /* @__PURE__ */ React2.createElement(TableCell, { colSpan: 8, align: "center", sx: { py: 4 } }, filterText ? /* @__PURE__ */ React2.createElement(Typography2, { color: "text.secondary" }, "No keys match filter") : /* @__PURE__ */ React2.createElement(Box2, null, /* @__PURE__ */ React2.createElement(Typography2, { color: "text.secondary", gutterBottom: true }, "No keys yet \u2014 generate your first key to start calling models."), /* @__PURE__ */ React2.createElement(
+        Button,
+        {
+          variant: "contained",
+          color: "primary",
+          size: "small",
+          startIcon: /* @__PURE__ */ React2.createElement(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;
@@ -511,12 +599,14 @@ var init_KeysTable = __esm({
           newKeyValue
         ),
         /* @__PURE__ */ React2.createElement(IconButton, { onClick: () => copyToClipboard(newKeyValue) }, /* @__PURE__ */ React2.createElement(ContentCopy, null))
-      )) : /* @__PURE__ */ React2.createElement(Box2, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, /* @__PURE__ */ React2.createElement(
+      ), newKeySnippets && /* @__PURE__ */ React2.createElement(Box2, { mt: 3 }, /* @__PURE__ */ React2.createElement(Box2, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ React2.createElement(Code, { fontSize: "small", color: "action" }), /* @__PURE__ */ React2.createElement(Typography2, { variant: "subtitle2" }, "Start calling the proxy \u2014 paste and run")), /* @__PURE__ */ React2.createElement(SnippetTabs, { snippets: newKeySnippets, model: newKeyModel, onCopy: copyToClipboard }))) : /* @__PURE__ */ React2.createElement(Box2, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, /* @__PURE__ */ React2.createElement(
         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
         }
@@ -563,13 +653,35 @@ var init_KeysTable = __esm({
           renderOption: (props, m) => /* @__PURE__ */ React2.createElement("li", { ...props }, modelOption(m)),
           renderInput: (params) => /* @__PURE__ */ React2.createElement(TextField, { ...params, label: "Models", helperText: "Leave empty to allow all models", fullWidth: true })
         }
+      ), /* @__PURE__ */ React2.createElement(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ React2.createElement(
+            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__ */ React2.createElement(
         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
         }
@@ -597,7 +709,7 @@ var init_KeysTable = __esm({
           onClick: handleGenerate,
           variant: "contained",
           color: "primary",
-          disabled: submitting
+          disabled: !canGenerate
         },
         submitting ? /* @__PURE__ */ React2.createElement(CircularProgress, { size: 24 }) : "Generate"
       ), newKeyValue && /* @__PURE__ */ React2.createElement(Button, { onClick: handleCloseModal, variant: "contained", color: "success" }, "Done"))), /* @__PURE__ */ React2.createElement(Dialog, { open: !!editingKey, onClose: handleCloseEdit, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React2.createElement(DialogTitle, null, "Edit Key"), /* @__PURE__ */ React2.createElement(DialogContent, null, editingKey && /* @__PURE__ */ React2.createElement(Box2, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, /* @__PURE__ */ React2.createElement(Typography2, { variant: "body2", color: "text.secondary" }, /* @__PURE__ */ React2.createElement("code", { style: { fontFamily: "monospace", color: "inherit" } }, maskKey(editingKey.key))), /* @__PURE__ */ React2.createElement(
@@ -705,16 +817,44 @@ var init_KeysTable = __esm({
         pruneSubmitting ? /* @__PURE__ */ React2.createElement(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] = useState("curl");
+      const code = tab === "curl" ? snippets.curl : snippets.openai;
+      return /* @__PURE__ */ React2.createElement(Box2, null, /* @__PURE__ */ React2.createElement(Tabs, { value: tab, onChange: (_, v) => setTab(v), sx: { mb: 1 } }, /* @__PURE__ */ React2.createElement(Tab, { label: "curl", value: "curl" }), /* @__PURE__ */ React2.createElement(Tab, { label: "OpenAI SDK", value: "openai" })), /* @__PURE__ */ React2.createElement(
+        Box2,
+        {
+          position: "relative",
+          p: 1.5,
+          sx: { backgroundColor: "action.hover", border: "1px solid", borderColor: "divider", borderRadius: 1 }
+        },
+        /* @__PURE__ */ React2.createElement(
+          IconButton,
+          {
+            size: "small",
+            onClick: () => onCopy(code),
+            title: "Copy snippet",
+            sx: { position: "absolute", top: 4, right: 4 }
+          },
+          /* @__PURE__ */ React2.createElement(ContentCopy, { fontSize: "small" })
+        ),
+        /* @__PURE__ */ React2.createElement(
+          Typography2,
+          {
+            component: "pre",
+            sx: {
+              fontFamily: "monospace",
+              fontSize: 12,
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-all",
+              mb: 0,
+              pr: 4
+            }
+          },
+          code
+        ),
+        model && /* @__PURE__ */ React2.createElement(Typography2, { variant: "caption", color: "text.secondary", display: "block", mt: 1 }, "Using model \u201C", model, "\u201D \u2014 swap it for any model you have access to.")
+      ));
+    };
   }
 });
 
@@ -729,8 +869,8 @@ import {
   Select,
   MenuItem as MenuItem2,
   Grid,
-  Tabs,
-  Tab,
+  Tabs as Tabs2,
+  Tab as Tab2,
   Table as Table2,
   TableBody as TableBody2,
   TableCell as TableCell2,
@@ -931,7 +1071,7 @@ var init_UsageStats = __esm({
           value: fmtInt(usage?.total_tokens ?? 0),
           hint: `${fmtInt(usage?.prompt_tokens ?? 0)} in \xB7 ${fmtInt(usage?.completion_tokens ?? 0)} out`
         }
-      ))), /* @__PURE__ */ React3.createElement(Tabs, { value: tab, onChange: (_, v) => setTab(v), sx: { mb: 2 } }, /* @__PURE__ */ React3.createElement(Tab, { value: "costs", label: "Costs" }), /* @__PURE__ */ React3.createElement(Tab, { value: "models", label: "Model Activity" }), /* @__PURE__ */ React3.createElement(Tab, { value: "keys", label: "Key Activity" })), tab === "costs" && /* @__PURE__ */ React3.createElement(Grid, { container: true, spacing: 3 }, /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React3.createElement(Typography3, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Daily Spend by Model"), loading ? /* @__PURE__ */ React3.createElement(ChartSkeleton, null) : modelSpendByDate.length === 0 ? /* @__PURE__ */ React3.createElement(EmptyChart, null) : /* @__PURE__ */ React3.createElement(Box3, { height: 260 }, /* @__PURE__ */ React3.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React3.createElement(AreaChart, { data: modelSpendByDate }, /* @__PURE__ */ React3.createElement(CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ React3.createElement(XAxis, { dataKey: "date", tick: { fontSize: 12 } }), /* @__PURE__ */ React3.createElement(YAxis, { tick: { fontSize: 12 }, tickFormatter: (v) => `$${v.toFixed(2)}` }), /* @__PURE__ */ React3.createElement(Tooltip, { formatter: (v) => [`$${v.toFixed(4)}`, void 0] }), /* @__PURE__ */ React3.createElement(Legend, null), topSpendModels.map((m) => /* @__PURE__ */ React3.createElement(
+      ))), /* @__PURE__ */ React3.createElement(Tabs2, { value: tab, onChange: (_, v) => setTab(v), sx: { mb: 2 } }, /* @__PURE__ */ React3.createElement(Tab2, { value: "costs", label: "Costs" }), /* @__PURE__ */ React3.createElement(Tab2, { value: "models", label: "Model Activity" }), /* @__PURE__ */ React3.createElement(Tab2, { value: "keys", label: "Key Activity" })), tab === "costs" && /* @__PURE__ */ React3.createElement(Grid, { container: true, spacing: 3 }, /* @__PURE__ */ React3.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React3.createElement(Typography3, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Daily Spend by Model"), loading ? /* @__PURE__ */ React3.createElement(ChartSkeleton, null) : modelSpendByDate.length === 0 ? /* @__PURE__ */ React3.createElement(EmptyChart, null) : /* @__PURE__ */ React3.createElement(Box3, { height: 260 }, /* @__PURE__ */ React3.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React3.createElement(AreaChart, { data: modelSpendByDate }, /* @__PURE__ */ React3.createElement(CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ React3.createElement(XAxis, { dataKey: "date", tick: { fontSize: 12 } }), /* @__PURE__ */ React3.createElement(YAxis, { tick: { fontSize: 12 }, tickFormatter: (v) => `$${v.toFixed(2)}` }), /* @__PURE__ */ React3.createElement(Tooltip, { formatter: (v) => [`$${v.toFixed(4)}`, void 0] }), /* @__PURE__ */ React3.createElement(Legend, null), topSpendModels.map((m) => /* @__PURE__ */ React3.createElement(
         Area,
         {
           key: m,
@@ -1067,7 +1207,7 @@ var init_TeamUsage = __esm({
         return /* @__PURE__ */ React4.createElement(Paper4, { sx: { p: 2 } }, /* @__PURE__ */ React4.createElement(LinearProgress4, null));
       }
       if (!teams.length) {
-        return /* @__PURE__ */ React4.createElement(Paper4, { sx: { p: 2 } }, /* @__PURE__ */ React4.createElement(Box4, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React4.createElement(Group, { color: "disabled" }), /* @__PURE__ */ React4.createElement(Typography4, { color: "text.secondary", variant: "body2" }, "No team membership found in LiteLLM for this account.")));
+        return /* @__PURE__ */ React4.createElement(Paper4, { sx: { p: 2 } }, /* @__PURE__ */ React4.createElement(Box4, { display: "flex", alignItems: "flex-start", gap: 1.5 }, /* @__PURE__ */ React4.createElement(Group, { color: "disabled", sx: { mt: 0.5 } }), /* @__PURE__ */ React4.createElement(Box4, null, /* @__PURE__ */ React4.createElement(Typography4, { color: "text.secondary", variant: "body2" }, "You're not a member of any LiteLLM team yet."), /* @__PURE__ */ React4.createElement(Typography4, { 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__ */ React4.createElement(Box4, null, /* @__PURE__ */ React4.createElement(Typography4, { variant: "h6", mb: 1 }, "Teams"), teams.map((team) => /* @__PURE__ */ React4.createElement(
         TeamCard,
@@ -1221,7 +1361,7 @@ __export(LiteLLMPage_exports, {
   LiteLLMPage: () => LiteLLMPage
 });
 import React6, { useState as useState5, useCallback as useCallback2, useMemo as useMemo3 } from "react";
-import { Box as Box6, Snackbar, Alert as Alert2, CircularProgress as CircularProgress4, Typography as Typography6, Paper as Paper6, Tabs as Tabs2, Tab as Tab2 } from "@mui/material";
+import { Box as Box6, Snackbar, Alert as Alert2, CircularProgress as CircularProgress4, Typography as Typography6, Paper as Paper6, Tabs as Tabs3, Tab as Tab3 } from "@mui/material";
 import { useAsync as useAsync2, useAsyncRetry } from "react-use";
 import { useApi } from "@backstage/core-plugin-api";
 function initDateRange() {
@@ -1435,16 +1575,16 @@ var init_LiteLLMPage = __esm({
         return /* @__PURE__ */ React6.createElement(Box6, { p: 3 }, /* @__PURE__ */ React6.createElement(Paper6, { sx: { p: 3 } }, /* @__PURE__ */ React6.createElement(Typography6, { variant: "h6", gutterBottom: true }, "Account not provisioned"), /* @__PURE__ */ React6.createElement(Typography6, { color: "text.secondary", paragraph: true }, "Your Backstage account is not linked to a LiteLLM user."), hint ? /* @__PURE__ */ React6.createElement(Typography6, { variant: "body2", color: "text.secondary" }, hint) : /* @__PURE__ */ React6.createElement(Typography6, { variant: "body2", color: "text.secondary" }, isProvisioningEnabled ? "Auto-provisioning is enabled but failed. Check the backend logs." : "Set litellm.provisioning.enabled: true in app-config.yaml to enable auto-provisioning, or ask your administrator to create the account manually.")));
       }
       return /* @__PURE__ */ React6.createElement(Box6, { p: 3 }, /* @__PURE__ */ React6.createElement(Box6, { mb: 2 }, /* @__PURE__ */ React6.createElement(DashboardHeader, { userInfo, teams: teams ?? [], loading: userLoading || teamsLoading })), /* @__PURE__ */ React6.createElement(
-        Tabs2,
+        Tabs3,
         {
           value: activeTab,
           onChange: (_, v) => setActiveTab(v),
           sx: { mb: 2, borderBottom: 1, borderColor: "divider" }
         },
-        /* @__PURE__ */ React6.createElement(Tab2, { label: "Overview", value: "overview" }),
-        /* @__PURE__ */ React6.createElement(Tab2, { label: "Keys", value: "keys" }),
-        /* @__PURE__ */ React6.createElement(Tab2, { label: "Teams", value: "teams" }),
-        userInfo.can_view_audit && /* @__PURE__ */ React6.createElement(Tab2, { label: "Audit Log", value: "audit" })
+        /* @__PURE__ */ React6.createElement(Tab3, { label: "Overview", value: "overview" }),
+        /* @__PURE__ */ React6.createElement(Tab3, { label: "Keys", value: "keys" }),
+        /* @__PURE__ */ React6.createElement(Tab3, { label: "Teams", value: "teams" }),
+        userInfo.can_view_audit && /* @__PURE__ */ React6.createElement(Tab3, { label: "Audit Log", value: "audit" })
       ), activeTab === "overview" && /* @__PURE__ */ React6.createElement(
         UsageStats,
         {
@@ -1469,7 +1609,8 @@ var init_LiteLLMPage = __esm({
           onUnblockKey: handleUnblockKey,
           onResetKeySpend: handleResetKeySpend,
           onDeleteKey: handleDeleteKey,
-          onPruneExpiredKeys: handlePruneExpiredKeys
+          onPruneExpiredKeys: handlePruneExpiredKeys,
+          onGetConfig: () => api.getConfig()
         }
       ), activeTab === "teams" && /* @__PURE__ */ React6.createElement(
         TeamUsage,
@@ -1573,32 +1714,42 @@ var LiteLLMHomeWidget = ({
   const api = useApi2(liteLlmApiRef);
   const [period, setPeriod] = useState6(defaultPeriod);
   const [loading, setLoading] = useState6(true);
-  const [error, setError] = useState6(null);
+  const [usageError, setUsageError] = useState6(null);
+  const [keysError, setKeysError] = useState6(null);
   const [usage, setUsage] = useState6(null);
   const [keys, setKeys] = useState6([]);
   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
@@ -1614,7 +1765,7 @@ var LiteLLMHomeWidget = ({
     /* @__PURE__ */ React8.createElement(MenuItem4, { value: "today" }, "Today"),
     /* @__PURE__ */ React8.createElement(MenuItem4, { value: "7d" }, "7d"),
     /* @__PURE__ */ React8.createElement(MenuItem4, { value: "30d" }, "30d")
-  ))), loading && /* @__PURE__ */ React8.createElement(Box7, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ React8.createElement(CircularProgress5, { size: 32 })), !loading && error && /* @__PURE__ */ React8.createElement(Alert3, { severity: "error", sx: { mt: 1 } }, error), !loading && !error && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Grid2, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ React8.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ React8.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ React8.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ React8.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ React8.createElement(Box7, { height: 120 }, /* @__PURE__ */ React8.createElement(ResponsiveContainer3, { width: "100%", height: "100%" }, /* @__PURE__ */ React8.createElement(AreaChart3, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ React8.createElement(
+  ))), loading && /* @__PURE__ */ React8.createElement(Box7, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ React8.createElement(CircularProgress5, { size: 32 })), !loading && totalFailure && /* @__PURE__ */ React8.createElement(Alert3, { severity: "error", sx: { mt: 1 } }, usageError ?? "Failed to load usage data"), !loading && !totalFailure && /* @__PURE__ */ React8.createElement(React8.Fragment, null, partialFailure && /* @__PURE__ */ React8.createElement(Alert3, { severity: "warning", sx: { mt: 1, mb: 1 } }, usageError ? `Usage data unavailable (${usageError}).` : "", keysError ? ` Key list unavailable (${keysError}).` : "", " Showing what loaded."), /* @__PURE__ */ React8.createElement(Grid2, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ React8.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ React8.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ React8.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ React8.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ React8.createElement(Box7, { height: 120 }, /* @__PURE__ */ React8.createElement(ResponsiveContainer3, { width: "100%", height: "100%" }, /* @__PURE__ */ React8.createElement(AreaChart3, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ React8.createElement(
     Area3,
     {
       type: "monotone",