@acarmisc/backstage-plugin-litellm 0.17.0 → 0.18.0

package/dist/index.esm.js

@@ -1920,7 +1920,7 @@ var init_GenerateKeyDialog = __esm({
 });
 
 // src/components/ManageTeamDialog.tsx
-import React5, { useState as useState3, useEffect as useEffect2 } from "react";
+import React5, { useState as useState3, useEffect as useEffect2, useMemo as useMemo4 } from "react";
 import Dialog3 from "@mui/material/Dialog";
 import DialogTitle3 from "@mui/material/DialogTitle";
 import DialogContent3 from "@mui/material/DialogContent";
@@ -1931,19 +1931,29 @@ import Alert2 from "@mui/material/Alert";
 import Checkbox2 from "@mui/material/Checkbox";
 import FormControlLabel2 from "@mui/material/FormControlLabel";
 import Autocomplete3 from "@mui/material/Autocomplete";
+import CircularProgress3 from "@mui/material/CircularProgress";
 import MenuItem2 from "@mui/material/MenuItem";
 import Box5 from "@mui/material/Box";
 import Divider2 from "@mui/material/Divider";
 import Typography5 from "@mui/material/Typography";
 import IconButton3 from "@mui/material/IconButton";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemText from "@mui/material/ListItemText";
+import Paper3 from "@mui/material/Paper";
+import Table2 from "@mui/material/Table";
+import TableBody2 from "@mui/material/TableBody";
+import TableCell2 from "@mui/material/TableCell";
+import TableContainer2 from "@mui/material/TableContainer";
+import TableHead2 from "@mui/material/TableHead";
+import TableRow2 from "@mui/material/TableRow";
 import { Delete as DeleteIcon } from "@mui/icons-material";
+import { useApi } from "@backstage/core-plugin-api";
+import { catalogApiRef } from "@backstage/plugin-catalog-react";
+import { stringifyEntityRef } from "@backstage/catalog-model";
+import { useAsync } from "react-use";
 var BUDGET_DURATION_OPTIONS, DEFAULT_BUDGET_DURATION, FALLBACK_BUDGET_CEILING, ManageTeamDialog;
 var init_ManageTeamDialog = __esm({
   "src/components/ManageTeamDialog.tsx"() {
     "use strict";
+    init_ui();
     BUDGET_DURATION_OPTIONS = [
       { value: "1d", label: "Daily (1d)" },
       { value: "7d", label: "Weekly (7d)" },
@@ -1978,6 +1988,7 @@ var init_ManageTeamDialog = __esm({
       const [budgetDuration, setBudgetDuration] = useState3("");
       const [submitting, setSubmitting] = useState3(false);
       const [error, setError] = useState3(null);
+      const [memberQuery, setMemberQuery] = useState3("");
       const [memberRef, setMemberRef] = useState3("");
       const [memberBudget, setMemberBudget] = useState3("");
       const [memberBusy, setMemberBusy] = useState3(false);
@@ -1990,6 +2001,36 @@ var init_ManageTeamDialog = __esm({
       const [mcpError, setMcpError] = useState3(null);
       const allowUnlimitedBudget = config?.teamManagement?.allowUnlimitedBudget ?? false;
       const maxBudgetCeiling = config?.teamManagement?.maxBudgetCeiling ?? FALLBACK_BUDGET_CEILING;
+      const members = useMemo4(() => team?.members_with_roles ?? [], [team]);
+      const showMembers = mode === "edit" && !!canManageMembers;
+      const catalogApi = useApi(catalogApiRef);
+      const { value: catalogUsers, loading: usersLoading } = useAsync(async () => {
+        if (!open || !showMembers) return [];
+        try {
+          const { items } = await catalogApi.getEntities({
+            filter: { kind: "User" },
+            fields: ["kind", "metadata.namespace", "metadata.name", "metadata.title", "spec.profile"]
+          });
+          return items;
+        } catch {
+          return [];
+        }
+      }, [open, showMembers, catalogApi]);
+      const userOptions = useMemo4(() => {
+        const existingEmails = new Set(
+          members.map((m) => m.user_email?.toLowerCase()).filter((e) => !!e)
+        );
+        return (catalogUsers ?? []).map((e) => {
+          const ref = stringifyEntityRef(e);
+          const displayName = e.spec?.profile?.displayName || e.metadata.title || e.metadata.name;
+          const email = e.spec?.profile?.email;
+          return {
+            ref,
+            email,
+            label: email ? `${displayName} (${email})` : displayName
+          };
+        }).filter((o) => !(o.email && existingEmails.has(o.email.toLowerCase()))).sort((a, b) => a.label.localeCompare(b.label));
+      }, [catalogUsers, members]);
       useEffect2(() => {
         if (open) {
           if (mode === "edit" && team) {
@@ -2008,6 +2049,7 @@ var init_ManageTeamDialog = __esm({
             setBudgetDuration(DEFAULT_BUDGET_DURATION);
           }
           setError(null);
+          setMemberQuery("");
           setMemberRef("");
           setMemberBudget("");
           setMemberError(null);
@@ -2079,6 +2121,7 @@ var init_ManageTeamDialog = __esm({
         try {
           setMemberBusy(true);
           await onAddMember(memberRef.trim(), budget);
+          setMemberQuery("");
           setMemberRef("");
           setMemberBudget("");
         } catch (err) {
@@ -2125,8 +2168,6 @@ var init_ManageTeamDialog = __esm({
       };
       const modelNames = allModels.map((m) => m.model_name);
       const durationOptions = BUDGET_DURATION_OPTIONS.some((o) => o.value === budgetDuration) ? BUDGET_DURATION_OPTIONS : [...BUDGET_DURATION_OPTIONS, { value: budgetDuration, label: budgetDuration }];
-      const members = team?.members_with_roles ?? [];
-      const showMembers = mode === "edit" && !!canManageMembers;
       const showKnowledgeBases = mode === "edit" && !!canManageKnowledgeBases;
       const kbOptions = (vectorStores ?? []).map((v) => v.id);
       const kbLabel = (id) => (vectorStores ?? []).find((v) => v.id === id)?.name ?? id;
@@ -2150,7 +2191,15 @@ var init_ManageTeamDialog = __esm({
           value: models,
           onChange: (_, newValue) => setModels(newValue),
           disabled: submitting,
-          renderInput: (params) => /* @__PURE__ */ React5.createElement(TextField3, { ...params, label: "Models" })
+          renderInput: (params) => /* @__PURE__ */ React5.createElement(
+            TextField3,
+            {
+              ...params,
+              label: "Models",
+              required: true,
+              helperText: "At least one model is required here \u2014 this delegated flow only grants access to models your admin has allow-listed for team creation, not every proxy model. (Teams with no model restriction shown elsewhere were configured directly in LiteLLM.)"
+            }
+          )
         }
       ), /* @__PURE__ */ React5.createElement(
         TextField3,
@@ -2182,34 +2231,69 @@ var init_ManageTeamDialog = __esm({
           fullWidth: true
         },
         durationOptions.map((o) => /* @__PURE__ */ React5.createElement(MenuItem2, { key: o.value, value: o.value }, o.label))
-      ), showMembers && /* @__PURE__ */ React5.createElement(Box5, null, /* @__PURE__ */ React5.createElement(Divider2, { sx: { my: 1 } }), /* @__PURE__ */ React5.createElement(Typography5, { variant: "subtitle2", sx: { mb: 1 } }, "Members"), memberError && /* @__PURE__ */ React5.createElement(Alert2, { severity: "error", sx: { mb: 1 }, onClose: () => setMemberError(null) }, memberError), members.length === 0 ? /* @__PURE__ */ React5.createElement(Typography5, { variant: "body2", color: "text.secondary" }, "No members yet.") : /* @__PURE__ */ React5.createElement(List, { dense: true, disablePadding: true }, members.map((m) => /* @__PURE__ */ React5.createElement(
-        ListItem,
+      ), showMembers && /* @__PURE__ */ React5.createElement(Box5, null, /* @__PURE__ */ React5.createElement(Divider2, { sx: { my: 1 } }), /* @__PURE__ */ React5.createElement(Typography5, { variant: "subtitle2", sx: { mb: 1 } }, "Members"), memberError && /* @__PURE__ */ React5.createElement(Alert2, { severity: "error", sx: { mb: 1 }, onClose: () => setMemberError(null) }, memberError), members.length === 0 ? /* @__PURE__ */ React5.createElement(Typography5, { variant: "body2", color: "text.secondary", sx: { mb: 1 } }, "No members yet.") : /* @__PURE__ */ React5.createElement(TableContainer2, { component: Paper3, variant: "outlined", sx: { borderRadius: 1.5, mb: 1.5 } }, /* @__PURE__ */ React5.createElement(Table2, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React5.createElement(TableHead2, null, /* @__PURE__ */ React5.createElement(TableRow2, null, /* @__PURE__ */ React5.createElement(TableCell2, null, "User"), /* @__PURE__ */ React5.createElement(TableCell2, { align: "right" }, "Role"), /* @__PURE__ */ React5.createElement(TableCell2, { align: "right", sx: { width: 40 } }))), /* @__PURE__ */ React5.createElement(TableBody2, null, members.map((m) => /* @__PURE__ */ React5.createElement(TableRow2, { key: m.user_id }, /* @__PURE__ */ React5.createElement(TableCell2, null, m.user_email ? /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Typography5, { variant: "body2" }, m.user_email), /* @__PURE__ */ React5.createElement(
+        Typography5,
         {
-          key: m.user_id,
-          disableGutters: true,
-          secondaryAction: /* @__PURE__ */ React5.createElement(
-            IconButton3,
-            {
-              edge: "end",
-              size: "small",
-              "aria-label": `remove ${m.user_id}`,
-              disabled: memberBusy,
-              onClick: () => handleRemoveMember(m.user_id)
-            },
-            /* @__PURE__ */ React5.createElement(DeleteIcon, { fontSize: "small" })
-          )
+          variant: "caption",
+          color: "text.secondary",
+          sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 }
         },
-        /* @__PURE__ */ React5.createElement(ListItemText, { primary: m.user_id, secondary: m.role })
-      ))), /* @__PURE__ */ React5.createElement(Box5, { sx: { display: "flex", gap: 1, alignItems: "flex-start", mt: 1 } }, /* @__PURE__ */ React5.createElement(
-        TextField3,
+        m.user_id
+      )) : /* @__PURE__ */ React5.createElement(
+        Typography5,
         {
-          label: "Backstage user ref",
-          placeholder: "user:default/alice",
-          value: memberRef,
-          onChange: (e) => setMemberRef(e.target.value),
-          disabled: memberBusy,
+          variant: "body2",
+          sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" }
+        },
+        m.user_id
+      )), /* @__PURE__ */ React5.createElement(TableCell2, { align: "right" }, /* @__PURE__ */ React5.createElement(StatusPill, { label: m.role, tone: m.role === "admin" ? "accent" : "neutral", dot: false })), /* @__PURE__ */ React5.createElement(TableCell2, { align: "right" }, /* @__PURE__ */ React5.createElement(
+        IconButton3,
+        {
+          edge: "end",
           size: "small",
-          sx: { flex: 1 }
+          "aria-label": `remove ${m.user_id}`,
+          disabled: memberBusy,
+          onClick: () => handleRemoveMember(m.user_id)
+        },
+        /* @__PURE__ */ React5.createElement(DeleteIcon, { fontSize: "small" })
+      ))))))), /* @__PURE__ */ React5.createElement(Box5, { sx: { display: "flex", gap: 1, alignItems: "flex-start", flexWrap: "wrap" } }, /* @__PURE__ */ React5.createElement(
+        Autocomplete3,
+        {
+          freeSolo: true,
+          autoHighlight: true,
+          options: userOptions,
+          loading: usersLoading,
+          inputValue: memberQuery,
+          onInputChange: (_, newInputValue, reason) => {
+            setMemberQuery(newInputValue);
+            if (reason === "input" || reason === "clear") {
+              setMemberRef(newInputValue);
+            }
+          },
+          onChange: (_, newValue) => {
+            if (newValue && typeof newValue !== "string") {
+              setMemberQuery(newValue.label);
+              setMemberRef(newValue.ref);
+            }
+          },
+          getOptionLabel: (o) => typeof o === "string" ? o : o.label,
+          isOptionEqualToValue: (o, v) => o.ref === (typeof v === "string" ? v : v.ref),
+          disabled: memberBusy,
+          sx: { flex: 1, minWidth: 260 },
+          renderInput: (params) => /* @__PURE__ */ React5.createElement(
+            TextField3,
+            {
+              ...params,
+              label: "Add member",
+              placeholder: "Search by name or email\u2026",
+              size: "small",
+              helperText: "Pick a catalog user, or paste a user entity ref",
+              InputProps: {
+                ...params.InputProps,
+                endAdornment: /* @__PURE__ */ React5.createElement(React5.Fragment, null, usersLoading ? /* @__PURE__ */ React5.createElement(CircularProgress3, { color: "inherit", size: 14 }) : null, params.InputProps.endAdornment)
+              }
+            }
+          )
         }
       ), /* @__PURE__ */ React5.createElement(
         TextField3,
@@ -2275,19 +2359,19 @@ var init_ManageTeamDialog = __esm({
 });
 
 // src/components/UsageStats.tsx
-import React6, { useMemo as useMemo4, useState as useState4 } from "react";
-import Paper3 from "@mui/material/Paper";
+import React6, { useMemo as useMemo5, useState as useState4 } from "react";
+import Paper4 from "@mui/material/Paper";
 import Box6 from "@mui/material/Box";
 import Typography6 from "@mui/material/Typography";
 import TextField4 from "@mui/material/TextField";
 import MenuItem3 from "@mui/material/MenuItem";
 import Grid from "@mui/material/Grid";
-import Table2 from "@mui/material/Table";
-import TableBody2 from "@mui/material/TableBody";
-import TableCell2 from "@mui/material/TableCell";
-import TableContainer2 from "@mui/material/TableContainer";
-import TableHead2 from "@mui/material/TableHead";
-import TableRow2 from "@mui/material/TableRow";
+import Table3 from "@mui/material/Table";
+import TableBody3 from "@mui/material/TableBody";
+import TableCell3 from "@mui/material/TableCell";
+import TableContainer3 from "@mui/material/TableContainer";
+import TableHead3 from "@mui/material/TableHead";
+import TableRow3 from "@mui/material/TableRow";
 import Skeleton3 from "@mui/material/Skeleton";
 import {
   AreaChart,
@@ -2368,7 +2452,7 @@ var init_UsageStats = __esm({
         }
         onDateRangeChange({ start, end }, preset);
       };
-      const dailyData = useMemo4(
+      const dailyData = useMemo5(
         () => (usage?.daily_usage ?? []).map((d) => ({
           date: d.date,
           spend: d.spend,
@@ -2381,21 +2465,21 @@ var init_UsageStats = __esm({
         })),
         [usage]
       );
-      const cumulativeData = useMemo4(() => {
+      const cumulativeData = useMemo5(() => {
         let cum = 0;
         return dailyData.map((d) => {
           cum += d.spend;
           return { date: d.date, cumulative: cum };
         });
       }, [dailyData]);
-      const successRateData = useMemo4(
+      const successRateData = useMemo5(
         () => dailyData.filter((d) => d.apiRequests > 0).map((d) => ({
           date: d.date,
           successRate: parseFloat((d.successfulRequests / d.apiRequests * 100).toFixed(1))
         })),
         [dailyData]
       );
-      const { modelSpendByDate, topModels: topSpendModels } = useMemo4(() => {
+      const { modelSpendByDate, topModels: topSpendModels } = useMemo5(() => {
         const rows = usage?.daily_by_model ?? [];
         const modelTotals = {};
         for (const r of rows) modelTotals[r.model] = (modelTotals[r.model] ?? 0) + r.spend;
@@ -2410,7 +2494,7 @@ var init_UsageStats = __esm({
         const hasOther = sorted.some((r) => r.Other > 0);
         return { modelSpendByDate: sorted, topModels: hasOther ? [...top, "Other"] : top };
       }, [usage]);
-      const modelRows = useMemo4(() => {
+      const modelRows = useMemo5(() => {
         const entries = Object.entries(usage?.usage_by_model ?? {}).map(([model, d]) => ({
           model,
           spend: d.total_spend,
@@ -2424,11 +2508,11 @@ var init_UsageStats = __esm({
         }));
         return selectedModel === "all" ? entries : entries.filter((e) => e.model === selectedModel);
       }, [usage, selectedModel]);
-      const topModelSpendBars = useMemo4(
+      const topModelSpendBars = useMemo5(
         () => [...modelRows].sort((a, b) => b.spend - a.spend).slice(0, 10),
         [modelRows]
       );
-      const keyRows = useMemo4(
+      const keyRows = useMemo5(
         () => Object.entries(usage?.usage_by_key ?? {}).map(([keyHash, d]) => ({
           keyHash,
           keyAlias: d.key_alias ?? keyHash.slice(0, 8),
@@ -2445,7 +2529,7 @@ var init_UsageStats = __esm({
         })),
         [usage]
       );
-      const topKeySpendBars = useMemo4(
+      const topKeySpendBars = useMemo5(
         () => [...keyRows].sort((a, b) => b.spend - a.spend).slice(0, 10),
         [keyRows]
       );
@@ -2483,21 +2567,21 @@ var init_UsageStats = __esm({
       ];
       const renderKeyRows = () => {
         if (loading) {
-          return /* @__PURE__ */ React6.createElement(TableRow2, null, /* @__PURE__ */ React6.createElement(TableCell2, { colSpan: 7, sx: { py: 3 } }, /* @__PURE__ */ React6.createElement(Skeleton3, { variant: "rounded", height: 80 })));
+          return /* @__PURE__ */ React6.createElement(TableRow3, null, /* @__PURE__ */ React6.createElement(TableCell3, { colSpan: 7, sx: { py: 3 } }, /* @__PURE__ */ React6.createElement(Skeleton3, { variant: "rounded", height: 80 })));
         }
         if (keyRows.length === 0) {
-          return /* @__PURE__ */ React6.createElement(TableRow2, null, /* @__PURE__ */ React6.createElement(TableCell2, { colSpan: 7 }, /* @__PURE__ */ React6.createElement(EmptyState, { message: "No key activity in this period" })));
+          return /* @__PURE__ */ React6.createElement(TableRow3, null, /* @__PURE__ */ React6.createElement(TableCell3, { colSpan: 7 }, /* @__PURE__ */ React6.createElement(EmptyState, { message: "No key activity in this period" })));
         }
-        return [...keyRows].sort((a, b) => b.spend - a.spend || b.apiRequests - a.apiRequests).map((r) => /* @__PURE__ */ React6.createElement(TableRow2, { key: r.keyHash }, /* @__PURE__ */ React6.createElement(TableCell2, null, /* @__PURE__ */ React6.createElement(Typography6, { variant: "body2", sx: { fontWeight: 600 } }, r.keyAlias), r.teamId ? /* @__PURE__ */ React6.createElement(Typography6, { variant: "caption", color: "text.secondary" }, "team: ", r.teamId) : null), /* @__PURE__ */ React6.createElement(TableCell2, null, /* @__PURE__ */ React6.createElement(Box6, { display: "flex", gap: 0.5, flexWrap: "wrap" }, r.models.slice(0, 3).map((m) => /* @__PURE__ */ React6.createElement(TagChip, { key: m, label: m, title: m })), r.models.length > 3 && /* @__PURE__ */ React6.createElement(TagChip, { label: `+${r.models.length - 3}`, mono: false }))), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, fmtUsd(r.spend)), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, fmtInt(r.apiRequests)), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, fmtCompact(r.totalTokens)), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, fmtInt(r.failedRequests)), /* @__PURE__ */ React6.createElement(TableCell2, null, /* @__PURE__ */ React6.createElement(SuccessRateCell, { rate: r.successRate, requests: r.apiRequests }))));
+        return [...keyRows].sort((a, b) => b.spend - a.spend || b.apiRequests - a.apiRequests).map((r) => /* @__PURE__ */ React6.createElement(TableRow3, { key: r.keyHash }, /* @__PURE__ */ React6.createElement(TableCell3, null, /* @__PURE__ */ React6.createElement(Typography6, { variant: "body2", sx: { fontWeight: 600 } }, r.keyAlias), r.teamId ? /* @__PURE__ */ React6.createElement(Typography6, { variant: "caption", color: "text.secondary" }, "team: ", r.teamId) : null), /* @__PURE__ */ React6.createElement(TableCell3, null, /* @__PURE__ */ React6.createElement(Box6, { display: "flex", gap: 0.5, flexWrap: "wrap" }, r.models.slice(0, 3).map((m) => /* @__PURE__ */ React6.createElement(TagChip, { key: m, label: m, title: m })), r.models.length > 3 && /* @__PURE__ */ React6.createElement(TagChip, { label: `+${r.models.length - 3}`, mono: false }))), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtUsd(r.spend)), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtInt(r.apiRequests)), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtCompact(r.totalTokens)), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtInt(r.failedRequests)), /* @__PURE__ */ React6.createElement(TableCell3, null, /* @__PURE__ */ React6.createElement(SuccessRateCell, { rate: r.successRate, requests: r.apiRequests }))));
       };
       const renderModelRows = () => {
         if (loading) {
-          return /* @__PURE__ */ React6.createElement(TableRow2, null, /* @__PURE__ */ React6.createElement(TableCell2, { colSpan: 8, sx: { py: 3 } }, /* @__PURE__ */ React6.createElement(Skeleton3, { variant: "rounded", height: 80 })));
+          return /* @__PURE__ */ React6.createElement(TableRow3, null, /* @__PURE__ */ React6.createElement(TableCell3, { colSpan: 8, sx: { py: 3 } }, /* @__PURE__ */ React6.createElement(Skeleton3, { variant: "rounded", height: 80 })));
         }
         if (modelRows.length === 0) {
-          return /* @__PURE__ */ React6.createElement(TableRow2, null, /* @__PURE__ */ React6.createElement(TableCell2, { colSpan: 8 }, /* @__PURE__ */ React6.createElement(EmptyState, { message: "No model activity in this period" })));
+          return /* @__PURE__ */ React6.createElement(TableRow3, null, /* @__PURE__ */ React6.createElement(TableCell3, { colSpan: 8 }, /* @__PURE__ */ React6.createElement(EmptyState, { message: "No model activity in this period" })));
         }
-        return [...modelRows].sort((a, b) => b.spend - a.spend || b.totalTokens - a.totalTokens).map((r) => /* @__PURE__ */ React6.createElement(TableRow2, { key: r.model }, /* @__PURE__ */ React6.createElement(TableCell2, null, /* @__PURE__ */ React6.createElement(Box6, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React6.createElement(Box6, { sx: { width: 8, height: 8, borderRadius: "50%", bgcolor: chartColor(r.model), flexShrink: 0 } }), /* @__PURE__ */ React6.createElement(Typography6, { variant: "body2", sx: { fontWeight: 600 } }, r.model))), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, fmtUsd(r.spend)), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, fmtInt(r.apiRequests)), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, fmtInt(r.successfulRequests)), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, fmtInt(r.failedRequests)), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, fmtCompact(r.promptTokens)), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, fmtCompact(r.completionTokens)), /* @__PURE__ */ React6.createElement(TableCell2, null, /* @__PURE__ */ React6.createElement(SuccessRateCell, { rate: r.successRate, requests: r.apiRequests }))));
+        return [...modelRows].sort((a, b) => b.spend - a.spend || b.totalTokens - a.totalTokens).map((r) => /* @__PURE__ */ React6.createElement(TableRow3, { key: r.model }, /* @__PURE__ */ React6.createElement(TableCell3, null, /* @__PURE__ */ React6.createElement(Box6, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React6.createElement(Box6, { sx: { width: 8, height: 8, borderRadius: "50%", bgcolor: chartColor(r.model), flexShrink: 0 } }), /* @__PURE__ */ React6.createElement(Typography6, { variant: "body2", sx: { fontWeight: 600 } }, r.model))), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtUsd(r.spend)), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtInt(r.apiRequests)), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtInt(r.successfulRequests)), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtInt(r.failedRequests)), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtCompact(r.promptTokens)), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, fmtCompact(r.completionTokens)), /* @__PURE__ */ React6.createElement(TableCell3, null, /* @__PURE__ */ React6.createElement(SuccessRateCell, { rate: r.successRate, requests: r.apiRequests }))));
       };
       const periodSelect = /* @__PURE__ */ React6.createElement(
         TextField4,
@@ -2650,7 +2734,7 @@ var init_UsageStats = __esm({
             height: Math.max(200, topModelSpendBars.length * 34)
           },
           /* @__PURE__ */ React6.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React6.createElement(BarChart, { data: topModelSpendBars, layout: "vertical", margin: { top: 0, right: 12, left: 0, bottom: 0 } }, /* @__PURE__ */ React6.createElement(CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }), /* @__PURE__ */ React6.createElement(XAxis, { type: "number", tickFormatter: fmtCompact, ...chart.axis }), /* @__PURE__ */ React6.createElement(YAxis, { type: "category", dataKey: "model", width: 170, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }), /* @__PURE__ */ React6.createElement(Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ React6.createElement(ChartTooltip, { valueFormatter: fmtInt, labelFormatter: (l) => l }) }), /* @__PURE__ */ React6.createElement(Legend, { ...chart.legend }), /* @__PURE__ */ React6.createElement(Bar, { dataKey: "promptTokens", name: "Input", fill: SERIES.input, stackId: "t", barSize: 14 }), /* @__PURE__ */ React6.createElement(Bar, { dataKey: "completionTokens", name: "Output", fill: SERIES.output, stackId: "t", barSize: 14, radius: [0, 3, 3, 0] })))
-        ))), /* @__PURE__ */ React6.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React6.createElement(TableContainer2, { component: Paper3, variant: "outlined", sx: { borderRadius: 2 } }, /* @__PURE__ */ React6.createElement(Table2, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React6.createElement(TableHead2, null, /* @__PURE__ */ React6.createElement(TableRow2, null, /* @__PURE__ */ React6.createElement(TableCell2, null, "Model"), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, "Spend"), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, "Requests"), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, "Success"), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, "Failed"), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, "Input"), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, "Output"), /* @__PURE__ */ React6.createElement(TableCell2, { sx: { width: 160 } }, "Success rate"))), /* @__PURE__ */ React6.createElement(TableBody2, null, renderModelRows()))))),
+        ))), /* @__PURE__ */ React6.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React6.createElement(TableContainer3, { component: Paper4, variant: "outlined", sx: { borderRadius: 2 } }, /* @__PURE__ */ React6.createElement(Table3, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React6.createElement(TableHead3, null, /* @__PURE__ */ React6.createElement(TableRow3, null, /* @__PURE__ */ React6.createElement(TableCell3, null, "Model"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Spend"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Requests"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Success"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Failed"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Input"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Output"), /* @__PURE__ */ React6.createElement(TableCell3, { sx: { width: 160 } }, "Success rate"))), /* @__PURE__ */ React6.createElement(TableBody3, null, renderModelRows()))))),
         tab === "keys" && /* @__PURE__ */ React6.createElement(Grid, { container: true, spacing: 2 }, (loading || topKeySpendBars.length > 0) && /* @__PURE__ */ React6.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React6.createElement(ChartCard, { title: "Spend by key", height: Math.max(160, topKeySpendBars.length * 32) }, /* @__PURE__ */ React6.createElement(
           ChartOrFallback,
           {
@@ -2659,7 +2743,7 @@ var init_UsageStats = __esm({
             height: Math.max(160, topKeySpendBars.length * 32)
           },
           /* @__PURE__ */ React6.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React6.createElement(BarChart, { data: topKeySpendBars, layout: "vertical", margin: { top: 0, right: 12, left: 0, bottom: 0 } }, /* @__PURE__ */ React6.createElement(CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }), /* @__PURE__ */ React6.createElement(XAxis, { type: "number", tickFormatter: fmtUsdCompact, ...chart.axis }), /* @__PURE__ */ React6.createElement(YAxis, { type: "category", dataKey: "keyAlias", width: 160, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }), /* @__PURE__ */ React6.createElement(Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ React6.createElement(ChartTooltip, { valueFormatter: fmtUsd, labelFormatter: (l) => l }) }), /* @__PURE__ */ React6.createElement(Bar, { dataKey: "spend", name: "Spend", fill: SERIES.input, radius: [0, 3, 3, 0], barSize: 14 })))
-        ))), /* @__PURE__ */ React6.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React6.createElement(TableContainer2, { component: Paper3, variant: "outlined", sx: { borderRadius: 2 } }, /* @__PURE__ */ React6.createElement(Table2, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React6.createElement(TableHead2, null, /* @__PURE__ */ React6.createElement(TableRow2, null, /* @__PURE__ */ React6.createElement(TableCell2, null, "Key"), /* @__PURE__ */ React6.createElement(TableCell2, null, "Models"), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, "Spend"), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, "Requests"), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, "Tokens"), /* @__PURE__ */ React6.createElement(TableCell2, { align: "right" }, "Failed"), /* @__PURE__ */ React6.createElement(TableCell2, { sx: { width: 160 } }, "Success rate"))), /* @__PURE__ */ React6.createElement(TableBody2, null, renderKeyRows())))))
+        ))), /* @__PURE__ */ React6.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React6.createElement(TableContainer3, { component: Paper4, variant: "outlined", sx: { borderRadius: 2 } }, /* @__PURE__ */ React6.createElement(Table3, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React6.createElement(TableHead3, null, /* @__PURE__ */ React6.createElement(TableRow3, null, /* @__PURE__ */ React6.createElement(TableCell3, null, "Key"), /* @__PURE__ */ React6.createElement(TableCell3, null, "Models"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Spend"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Requests"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Tokens"), /* @__PURE__ */ React6.createElement(TableCell3, { align: "right" }, "Failed"), /* @__PURE__ */ React6.createElement(TableCell3, { sx: { width: 160 } }, "Success rate"))), /* @__PURE__ */ React6.createElement(TableBody3, null, renderKeyRows())))))
       );
     };
   }
@@ -2667,23 +2751,23 @@ var init_UsageStats = __esm({
 
 // src/components/TeamUsage.tsx
 import React7, { useState as useState5 } from "react";
-import Paper4 from "@mui/material/Paper";
+import Paper5 from "@mui/material/Paper";
 import Box7 from "@mui/material/Box";
 import Typography7 from "@mui/material/Typography";
 import Skeleton4 from "@mui/material/Skeleton";
 import Divider3 from "@mui/material/Divider";
-import Table3 from "@mui/material/Table";
-import TableBody3 from "@mui/material/TableBody";
-import TableCell3 from "@mui/material/TableCell";
-import TableHead3 from "@mui/material/TableHead";
-import TableRow3 from "@mui/material/TableRow";
-import TableContainer3 from "@mui/material/TableContainer";
+import Table4 from "@mui/material/Table";
+import TableBody4 from "@mui/material/TableBody";
+import TableCell4 from "@mui/material/TableCell";
+import TableHead4 from "@mui/material/TableHead";
+import TableRow4 from "@mui/material/TableRow";
+import TableContainer4 from "@mui/material/TableContainer";
 import Collapse from "@mui/material/Collapse";
 import IconButton4 from "@mui/material/IconButton";
 import Button5 from "@mui/material/Button";
-import CircularProgress3 from "@mui/material/CircularProgress";
+import CircularProgress4 from "@mui/material/CircularProgress";
 import { alpha as alpha4 } from "@mui/material/styles";
-import { ExpandMore as ExpandMore2, Group } from "@mui/icons-material";
+import { ExpandMore as ExpandMore2, Group, Add as Add3 } from "@mui/icons-material";
 import {
   AreaChart as AreaChart2,
   Area as Area2,
@@ -2715,7 +2799,7 @@ var init_TeamUsage = __esm({
       const dailyData = usage?.daily_usage?.map((d) => ({ date: d.date, spend: d.spend })) ?? [];
       const renderDailySpendSection = () => {
         if (usageLoading) {
-          return /* @__PURE__ */ React7.createElement(Box7, { display: "flex", justifyContent: "center", py: 3 }, /* @__PURE__ */ React7.createElement(CircularProgress3, { size: 22 }));
+          return /* @__PURE__ */ React7.createElement(Box7, { display: "flex", justifyContent: "center", py: 3 }, /* @__PURE__ */ React7.createElement(CircularProgress4, { size: 22 }));
         }
         if (dailyData.length === 0) return null;
         return /* @__PURE__ */ React7.createElement(Box7, { mb: 2.5 }, /* @__PURE__ */ React7.createElement(
@@ -2754,7 +2838,7 @@ var init_TeamUsage = __esm({
         },
         label
       );
-      return /* @__PURE__ */ React7.createElement(Paper4, { variant: "outlined", sx: { borderRadius: 2, p: 2.5 } }, /* @__PURE__ */ React7.createElement(Box7, { display: "flex", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React7.createElement(
+      return /* @__PURE__ */ React7.createElement(Paper5, { variant: "outlined", sx: { borderRadius: 2, p: 2.5 } }, /* @__PURE__ */ React7.createElement(Box7, { display: "flex", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React7.createElement(
         Box7,
         {
           sx: (theme) => ({
@@ -2819,13 +2903,13 @@ var init_TeamUsage = __esm({
         /* @__PURE__ */ React7.createElement(Stat, { label: "TPM", value: team.tpm_limit && team.tpm_limit > 0 ? team.tpm_limit.toLocaleString() : "\u2014" }),
         /* @__PURE__ */ React7.createElement(Stat, { label: "RPM", value: team.rpm_limit && team.rpm_limit > 0 ? team.rpm_limit.toLocaleString() : "\u2014" })
       ), budget > 0 && /* @__PURE__ */ React7.createElement(Box7, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ React7.createElement(Box7, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, fmtUsd2(spend), " of ", fmtUsd2(budget)), /* @__PURE__ */ React7.createElement(Typography7, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "%")), /* @__PURE__ */ React7.createElement(Meter, { value: budgetPct, tone: budgetTone2(isOver, isNear), height: 5 })), /* @__PURE__ */ React7.createElement(Collapse, { in: expanded, unmountOnExit: true }, /* @__PURE__ */ React7.createElement(Divider3, { sx: { my: 2.5 } }), /* @__PURE__ */ React7.createElement(Box7, { mb: 2.5 }, sectionLabel("Models"), team.models?.length ? /* @__PURE__ */ React7.createElement(Box7, { display: "flex", gap: 0.5, flexWrap: "wrap" }, team.models.map((m) => /* @__PURE__ */ React7.createElement(TagChip, { key: m, label: m, title: m }))) : /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2", color: "text.secondary" }, "All models allowed")), renderDailySpendSection(), /* @__PURE__ */ React7.createElement(Box7, null, sectionLabel("Members"), team.members_with_roles?.length ? /* @__PURE__ */ React7.createElement(
-        TableContainer3,
+        TableContainer4,
         {
-          component: Paper4,
+          component: Paper5,
           variant: "outlined",
           sx: { borderRadius: 1.5 }
         },
-        /* @__PURE__ */ React7.createElement(Table3, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React7.createElement(TableHead3, null, /* @__PURE__ */ React7.createElement(TableRow3, null, /* @__PURE__ */ React7.createElement(TableCell3, null, "User"), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, "Role"))), /* @__PURE__ */ React7.createElement(TableBody3, null, team.members_with_roles.map((m) => /* @__PURE__ */ React7.createElement(TableRow3, { key: m.user_id }, /* @__PURE__ */ React7.createElement(TableCell3, null, m.user_email ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2" }, m.user_email), /* @__PURE__ */ React7.createElement(
+        /* @__PURE__ */ React7.createElement(Table4, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React7.createElement(TableHead4, null, /* @__PURE__ */ React7.createElement(TableRow4, null, /* @__PURE__ */ React7.createElement(TableCell4, null, "User"), /* @__PURE__ */ React7.createElement(TableCell4, { align: "right" }, "Role"))), /* @__PURE__ */ React7.createElement(TableBody4, null, team.members_with_roles.map((m) => /* @__PURE__ */ React7.createElement(TableRow4, { key: m.user_id }, /* @__PURE__ */ React7.createElement(TableCell4, null, m.user_email ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2" }, m.user_email), /* @__PURE__ */ React7.createElement(
           Typography7,
           {
             variant: "caption",
@@ -2840,7 +2924,7 @@ var init_TeamUsage = __esm({
             sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" }
           },
           m.user_id
-        )), /* @__PURE__ */ React7.createElement(TableCell3, { align: "right" }, /* @__PURE__ */ React7.createElement(
+        )), /* @__PURE__ */ React7.createElement(TableCell4, { align: "right" }, /* @__PURE__ */ React7.createElement(
           StatusPill,
           {
             label: m.role,
@@ -2856,13 +2940,26 @@ var init_TeamUsage = __esm({
       getTeamUsage,
       getTeamUsageLoading,
       canManage,
-      onEditTeam
+      onEditTeam,
+      canCreate,
+      onCreateTeam
     }) => {
+      const createAction = canCreate && onCreateTeam ? /* @__PURE__ */ React7.createElement(
+        Button5,
+        {
+          variant: "contained",
+          color: "primary",
+          disableElevation: true,
+          startIcon: /* @__PURE__ */ React7.createElement(Add3, null),
+          onClick: onCreateTeam
+        },
+        "Create Team"
+      ) : void 0;
       if (loading) {
-        return /* @__PURE__ */ React7.createElement(SectionCard, { title: "Teams" }, /* @__PURE__ */ React7.createElement(Skeleton4, { variant: "rounded", height: 120, sx: { mb: 2 } }), /* @__PURE__ */ React7.createElement(Skeleton4, { variant: "rounded", height: 120 }));
+        return /* @__PURE__ */ React7.createElement(SectionCard, { title: "Teams", actions: createAction }, /* @__PURE__ */ React7.createElement(Skeleton4, { variant: "rounded", height: 120, sx: { mb: 2 } }), /* @__PURE__ */ React7.createElement(Skeleton4, { variant: "rounded", height: 120 }));
       }
       if (!teams.length) {
-        return /* @__PURE__ */ React7.createElement(SectionCard, { title: "Teams" }, /* @__PURE__ */ React7.createElement(
+        return /* @__PURE__ */ React7.createElement(SectionCard, { title: "Teams", actions: createAction }, /* @__PURE__ */ React7.createElement(
           EmptyState,
           {
             message: "You're not a member of any LiteLLM team yet.",
@@ -2870,30 +2967,38 @@ var init_TeamUsage = __esm({
           }
         ));
       }
-      return /* @__PURE__ */ React7.createElement(SectionCard, { title: "Teams", subtitle: `${teams.length} team${teams.length === 1 ? "" : "s"}` }, /* @__PURE__ */ React7.createElement(Box7, { sx: { display: "flex", flexDirection: "column", gap: 2 } }, teams.map((team) => /* @__PURE__ */ React7.createElement(
-        TeamCard,
+      return /* @__PURE__ */ React7.createElement(
+        SectionCard,
         {
-          key: team.team_id,
-          team,
-          usage: getTeamUsage(team.team_id),
-          usageLoading: getTeamUsageLoading(team.team_id),
-          canManage,
-          onEditTeam
-        }
-      ))));
+          title: "Teams",
+          subtitle: `${teams.length} team${teams.length === 1 ? "" : "s"}`,
+          actions: createAction
+        },
+        /* @__PURE__ */ React7.createElement(Box7, { sx: { display: "flex", flexDirection: "column", gap: 2 } }, teams.map((team) => /* @__PURE__ */ React7.createElement(
+          TeamCard,
+          {
+            key: team.team_id,
+            team,
+            usage: getTeamUsage(team.team_id),
+            usageLoading: getTeamUsageLoading(team.team_id),
+            canManage,
+            onEditTeam
+          }
+        )))
+      );
     };
   }
 });
 
 // src/components/ModelsTable.tsx
-import React8, { useState as useState6, useMemo as useMemo5, useCallback } from "react";
+import React8, { useState as useState6, useMemo as useMemo6, useCallback } from "react";
 import Box8 from "@mui/material/Box";
-import Table4 from "@mui/material/Table";
-import TableBody4 from "@mui/material/TableBody";
-import TableCell4 from "@mui/material/TableCell";
-import TableContainer4 from "@mui/material/TableContainer";
-import TableHead4 from "@mui/material/TableHead";
-import TableRow4 from "@mui/material/TableRow";
+import Table5 from "@mui/material/Table";
+import TableBody5 from "@mui/material/TableBody";
+import TableCell5 from "@mui/material/TableCell";
+import TableContainer5 from "@mui/material/TableContainer";
+import TableHead5 from "@mui/material/TableHead";
+import TableRow5 from "@mui/material/TableRow";
 import Typography8 from "@mui/material/Typography";
 import MenuItem4 from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
@@ -2931,11 +3036,11 @@ var init_ModelsTable = __esm({
       const theme = useTheme2();
       const [selectedTeamId, setSelectedTeamId] = useState6("");
       const [copiedSnackbar, setCopiedSnackbar] = useState6(false);
-      const selectedTeam = useMemo5(
+      const selectedTeam = useMemo6(
         () => teams.find((t) => t.team_id === selectedTeamId) ?? null,
         [teams, selectedTeamId]
       );
-      const filteredModels = useMemo5(() => {
+      const filteredModels = useMemo6(() => {
         if (!selectedTeam) return [];
         return allModels.filter((model) => isModelAllowedByTeam2(model, selectedTeam.models));
       }, [allModels, selectedTeam]);
@@ -2987,7 +3092,7 @@ var init_ModelsTable = __esm({
             hint: allModels.length === 0 ? "No models are configured in the system" : "None of the team's assigned models were found in the catalog"
           }
         ),
-        !loading && filteredModels.length > 0 && /* @__PURE__ */ React8.createElement(TableContainer4, null, /* @__PURE__ */ React8.createElement(Table4, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React8.createElement(TableHead4, null, /* @__PURE__ */ React8.createElement(TableRow4, null, /* @__PURE__ */ React8.createElement(TableCell4, null, "Model ID"), /* @__PURE__ */ React8.createElement(TableCell4, null, "Mode"), /* @__PURE__ */ React8.createElement(TableCell4, { align: "right" }, "Input Cost"), /* @__PURE__ */ React8.createElement(TableCell4, { align: "right" }, "Output Cost"), /* @__PURE__ */ React8.createElement(TableCell4, { align: "right" }, "Max Input"), /* @__PURE__ */ React8.createElement(TableCell4, { align: "right" }, "Max Output"), /* @__PURE__ */ React8.createElement(TableCell4, null, "Capabilities"))), /* @__PURE__ */ React8.createElement(TableBody4, null, filteredModels.map((m) => /* @__PURE__ */ React8.createElement(TableRow4, { key: m.model_name, hover: true }, /* @__PURE__ */ React8.createElement(TableCell4, null, /* @__PURE__ */ React8.createElement(Box8, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React8.createElement(TagChip, { label: m.model_name, title: m.model_name }), /* @__PURE__ */ React8.createElement(Tooltip3, { title: "Copy model ID" }, /* @__PURE__ */ React8.createElement(
+        !loading && filteredModels.length > 0 && /* @__PURE__ */ React8.createElement(TableContainer5, null, /* @__PURE__ */ React8.createElement(Table5, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React8.createElement(TableHead5, null, /* @__PURE__ */ React8.createElement(TableRow5, null, /* @__PURE__ */ React8.createElement(TableCell5, null, "Model ID"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Mode"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Input Cost"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Output Cost"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Max Input"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Max Output"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Capabilities"))), /* @__PURE__ */ React8.createElement(TableBody5, null, filteredModels.map((m) => /* @__PURE__ */ React8.createElement(TableRow5, { key: m.model_name, hover: true }, /* @__PURE__ */ React8.createElement(TableCell5, null, /* @__PURE__ */ React8.createElement(Box8, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React8.createElement(TagChip, { label: m.model_name, title: m.model_name }), /* @__PURE__ */ React8.createElement(Tooltip3, { title: "Copy model ID" }, /* @__PURE__ */ React8.createElement(
           Box8,
           {
             component: "span",
@@ -2999,7 +3104,7 @@ var init_ModelsTable = __esm({
             style: { cursor: "pointer", display: "inline-flex" }
           },
           /* @__PURE__ */ React8.createElement(ContentCopyIcon, { sx: { fontSize: 14 } })
-        )))), /* @__PURE__ */ React8.createElement(TableCell4, null, /* @__PURE__ */ React8.createElement(
+        )))), /* @__PURE__ */ React8.createElement(TableCell5, null, /* @__PURE__ */ React8.createElement(
           Box8,
           {
             component: "span",
@@ -3016,7 +3121,7 @@ var init_ModelsTable = __esm({
             }
           },
           m.mode
-        )), /* @__PURE__ */ React8.createElement(TableCell4, { align: "right" }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.input_cost_per_token))), /* @__PURE__ */ React8.createElement(TableCell4, { align: "right" }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.output_cost_per_token))), /* @__PURE__ */ React8.createElement(TableCell4, { align: "right" }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_input_tokens))), /* @__PURE__ */ React8.createElement(TableCell4, { align: "right" }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_output_tokens))), /* @__PURE__ */ React8.createElement(TableCell4, null, /* @__PURE__ */ React8.createElement(Box8, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap" } }, m.supports_function_calling && /* @__PURE__ */ React8.createElement(TagChip, { label: "Fn", title: "Function calling" }), m.supports_vision && /* @__PURE__ */ React8.createElement(TagChip, { label: "\u{1F441}", title: "Vision" })))))))),
+        )), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.input_cost_per_token))), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.output_cost_per_token))), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_input_tokens))), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_output_tokens))), /* @__PURE__ */ React8.createElement(TableCell5, null, /* @__PURE__ */ React8.createElement(Box8, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap" } }, m.supports_function_calling && /* @__PURE__ */ React8.createElement(TagChip, { label: "Fn", title: "Function calling" }), m.supports_vision && /* @__PURE__ */ React8.createElement(TagChip, { label: "\u{1F441}", title: "Vision" })))))))),
         /* @__PURE__ */ React8.createElement(
           Snackbar,
           {
@@ -3036,12 +3141,12 @@ var init_ModelsTable = __esm({
 import React9, { useState as useState7, useCallback as useCallback2 } from "react";
 import Box9 from "@mui/material/Box";
 import Typography9 from "@mui/material/Typography";
-import Table5 from "@mui/material/Table";
-import TableBody5 from "@mui/material/TableBody";
-import TableCell5 from "@mui/material/TableCell";
-import TableContainer5 from "@mui/material/TableContainer";
-import TableHead5 from "@mui/material/TableHead";
-import TableRow5 from "@mui/material/TableRow";
+import Table6 from "@mui/material/Table";
+import TableBody6 from "@mui/material/TableBody";
+import TableCell6 from "@mui/material/TableCell";
+import TableContainer6 from "@mui/material/TableContainer";
+import TableHead6 from "@mui/material/TableHead";
+import TableRow6 from "@mui/material/TableRow";
 import TablePagination from "@mui/material/TablePagination";
 import TextField5 from "@mui/material/TextField";
 import MenuItem5 from "@mui/material/MenuItem";
@@ -3051,7 +3156,7 @@ import IconButton5 from "@mui/material/IconButton";
 import Alert4 from "@mui/material/Alert";
 import { alpha as alpha6 } from "@mui/material/styles";
 import { KeyboardArrowDown } from "@mui/icons-material";
-import { useAsync } from "react-use";
+import { useAsync as useAsync2 } from "react-use";
 function actionTone(action) {
   if (!action) return "neutral";
   for (const [key, tone] of Object.entries(ACTION_TONES)) {
@@ -3072,10 +3177,10 @@ function formatDateTime(iso) {
 }
 function renderAuditLogBody(loading, entries) {
   if (loading) {
-    return /* @__PURE__ */ React9.createElement(TableRow5, null, /* @__PURE__ */ React9.createElement(TableCell5, { colSpan: 6, sx: { py: 2 } }, /* @__PURE__ */ React9.createElement(Skeleton5, { variant: "rounded", height: 160 })));
+    return /* @__PURE__ */ React9.createElement(TableRow6, null, /* @__PURE__ */ React9.createElement(TableCell6, { colSpan: 6, sx: { py: 2 } }, /* @__PURE__ */ React9.createElement(Skeleton5, { variant: "rounded", height: 160 })));
   }
   if (entries.length === 0) {
-    return /* @__PURE__ */ React9.createElement(TableRow5, null, /* @__PURE__ */ React9.createElement(TableCell5, { colSpan: 6 }, /* @__PURE__ */ React9.createElement(
+    return /* @__PURE__ */ React9.createElement(TableRow6, null, /* @__PURE__ */ React9.createElement(TableCell6, { colSpan: 6 }, /* @__PURE__ */ React9.createElement(
       EmptyState,
       {
         message: "No audit events found",
@@ -3107,7 +3212,7 @@ var init_AuditLog = __esm({
     DetailRow = ({ entry }) => {
       const [open, setOpen] = useState7(false);
       const hasDetail = entry.before_value || entry.updated_values;
-      return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(TableRow5, null, /* @__PURE__ */ React9.createElement(TableCell5, { sx: { width: 40, pr: 0 } }, hasDetail && /* @__PURE__ */ React9.createElement(
+      return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(TableRow6, null, /* @__PURE__ */ React9.createElement(TableCell6, { sx: { width: 40, pr: 0 } }, hasDetail && /* @__PURE__ */ React9.createElement(
         IconButton5,
         {
           size: "small",
@@ -3121,7 +3226,7 @@ var init_AuditLog = __esm({
           })
         },
         /* @__PURE__ */ React9.createElement(KeyboardArrowDown, { fontSize: "small" })
-      )), /* @__PURE__ */ React9.createElement(TableCell5, { sx: { whiteSpace: "nowrap" } }, /* @__PURE__ */ React9.createElement(Typography9, { variant: "body2", color: "text.secondary" }, formatDateTime(entry.updated_at))), /* @__PURE__ */ React9.createElement(TableCell5, null, entry.action && /* @__PURE__ */ React9.createElement(StatusPill, { label: entry.action, tone: actionTone(entry.action) })), /* @__PURE__ */ React9.createElement(TableCell5, null, /* @__PURE__ */ React9.createElement(Typography9, { variant: "body2" }, prettyTableName(entry.table_name))), /* @__PURE__ */ React9.createElement(TableCell5, null, /* @__PURE__ */ React9.createElement(
+      )), /* @__PURE__ */ React9.createElement(TableCell6, { sx: { whiteSpace: "nowrap" } }, /* @__PURE__ */ React9.createElement(Typography9, { variant: "body2", color: "text.secondary" }, formatDateTime(entry.updated_at))), /* @__PURE__ */ React9.createElement(TableCell6, null, entry.action && /* @__PURE__ */ React9.createElement(StatusPill, { label: entry.action, tone: actionTone(entry.action) })), /* @__PURE__ */ React9.createElement(TableCell6, null, /* @__PURE__ */ React9.createElement(Typography9, { variant: "body2" }, prettyTableName(entry.table_name))), /* @__PURE__ */ React9.createElement(TableCell6, null, /* @__PURE__ */ React9.createElement(
         Typography9,
         {
           variant: "body2",
@@ -3131,7 +3236,7 @@ var init_AuditLog = __esm({
           sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 12 }
         },
         entry.object_id ? entry.object_id.slice(0, 20) + (entry.object_id.length > 20 ? "\u2026" : "") : "\u2014"
-      )), /* @__PURE__ */ React9.createElement(TableCell5, null, entry.changed_by ?? "\u2014")), hasDetail && /* @__PURE__ */ React9.createElement(TableRow5, { sx: { "&&:hover": { bgcolor: "transparent" } } }, /* @__PURE__ */ React9.createElement(TableCell5, { colSpan: 6, sx: { "&&": { py: 0, border: 0 } } }, /* @__PURE__ */ React9.createElement(Collapse2, { in: open, unmountOnExit: true }, /* @__PURE__ */ React9.createElement(
+      )), /* @__PURE__ */ React9.createElement(TableCell6, null, entry.changed_by ?? "\u2014")), hasDetail && /* @__PURE__ */ React9.createElement(TableRow6, { sx: { "&&:hover": { bgcolor: "transparent" } } }, /* @__PURE__ */ React9.createElement(TableCell6, { colSpan: 6, sx: { "&&": { py: 0, border: 0 } } }, /* @__PURE__ */ React9.createElement(Collapse2, { in: open, unmountOnExit: true }, /* @__PURE__ */ React9.createElement(
         Box9,
         {
           display: "flex",
@@ -3176,7 +3281,7 @@ var init_AuditLog = __esm({
         () => ({ page: page + 1, page_size: pageSize, ...filters }),
         [page, pageSize, filters]
       )();
-      const { value, loading, error } = useAsync(
+      const { value, loading, error } = useAsync2(
         () => api.getAuditLogs(fetchParams),
         [api, fetchParams]
       );
@@ -3240,7 +3345,7 @@ var init_AuditLog = __esm({
           ))
         },
         error && /* @__PURE__ */ React9.createElement(Box9, { px: 2.5, pb: 2 }, /* @__PURE__ */ React9.createElement(Alert4, { severity: "error" }, error.message)),
-        /* @__PURE__ */ React9.createElement(TableContainer5, null, /* @__PURE__ */ React9.createElement(Table5, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React9.createElement(TableHead5, null, /* @__PURE__ */ React9.createElement(TableRow5, null, /* @__PURE__ */ React9.createElement(TableCell5, { sx: { width: 40 } }), /* @__PURE__ */ React9.createElement(TableCell5, null, "Time"), /* @__PURE__ */ React9.createElement(TableCell5, null, "Action"), /* @__PURE__ */ React9.createElement(TableCell5, null, "Table"), /* @__PURE__ */ React9.createElement(TableCell5, null, "Object ID"), /* @__PURE__ */ React9.createElement(TableCell5, null, "Changed By"))), /* @__PURE__ */ React9.createElement(TableBody5, null, renderAuditLogBody(loading, entries)))),
+        /* @__PURE__ */ React9.createElement(TableContainer6, null, /* @__PURE__ */ React9.createElement(Table6, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React9.createElement(TableHead6, null, /* @__PURE__ */ React9.createElement(TableRow6, null, /* @__PURE__ */ React9.createElement(TableCell6, { sx: { width: 40 } }), /* @__PURE__ */ React9.createElement(TableCell6, null, "Time"), /* @__PURE__ */ React9.createElement(TableCell6, null, "Action"), /* @__PURE__ */ React9.createElement(TableCell6, null, "Table"), /* @__PURE__ */ React9.createElement(TableCell6, null, "Object ID"), /* @__PURE__ */ React9.createElement(TableCell6, null, "Changed By"))), /* @__PURE__ */ React9.createElement(TableBody6, null, renderAuditLogBody(loading, entries)))),
         /* @__PURE__ */ React9.createElement(
           TablePagination,
           {
@@ -3296,18 +3401,17 @@ var LiteLLMPage_exports = {};
 __export(LiteLLMPage_exports, {
   LiteLLMPage: () => LiteLLMPage
 });
-import React10, { useState as useState8, useCallback as useCallback3, useMemo as useMemo6 } from "react";
+import React10, { useState as useState8, useCallback as useCallback3, useMemo as useMemo7 } from "react";
 import Box10 from "@mui/material/Box";
 import Snackbar2 from "@mui/material/Snackbar";
 import Alert5 from "@mui/material/Alert";
-import CircularProgress4 from "@mui/material/CircularProgress";
+import CircularProgress5 from "@mui/material/CircularProgress";
 import Typography10 from "@mui/material/Typography";
-import Paper5 from "@mui/material/Paper";
+import Paper6 from "@mui/material/Paper";
 import Tabs2 from "@mui/material/Tabs";
 import Tab2 from "@mui/material/Tab";
-import Button6 from "@mui/material/Button";
-import { useAsync as useAsync2, useAsyncRetry } from "react-use";
-import { useApi } from "@backstage/core-plugin-api";
+import { useAsync as useAsync3, useAsyncRetry } from "react-use";
+import { useApi as useApi2 } from "@backstage/core-plugin-api";
 import { usePermission } from "@backstage/plugin-permission-react";
 function initDateRange() {
   let preset = "7d";
@@ -3339,7 +3443,7 @@ var init_LiteLLMPage = __esm({
     init_permissions();
     PERIOD_LS_KEY2 = "litellm_usage_period";
     LiteLLMPage = () => {
-      const api = useApi(liteLlmApiRef);
+      const api = useApi2(liteLlmApiRef);
       const [dateRange, setDateRange] = useState8(initDateRange);
       const [currentPreset, setCurrentPreset] = useState8(() => {
         try {
@@ -3354,7 +3458,7 @@ var init_LiteLLMPage = __esm({
       const [manageTeam, setManageTeam] = useState8(null);
       const [teamUsageCache, setTeamUsageCache] = useState8({});
       const [teamUsageLoading, setTeamUsageLoading] = useState8({});
-      const { value: userInfo, loading: userLoading, error: userError } = useAsync2(
+      const { value: userInfo, loading: userLoading, error: userError } = useAsync3(
         () => api.getUserInfo(),
         [api]
       );
@@ -3369,7 +3473,7 @@ var init_LiteLLMPage = __esm({
         },
         [api]
       );
-      const { value: allModels, loading: modelsLoading } = useAsync2(
+      const { value: allModels, loading: modelsLoading } = useAsync3(
         () => api.listModels().catch(() => []),
         [api]
       );
@@ -3377,8 +3481,8 @@ var init_LiteLLMPage = __esm({
         () => api.getTeams().catch(() => []),
         [api]
       );
-      const { value: liteLlmConfig } = useAsync2(() => api.getConfig(), [api]);
-      const { value: managedTeams } = useAsync2(
+      const { value: liteLlmConfig } = useAsync3(() => api.getConfig(), [api]);
+      const { value: managedTeams } = useAsync3(
         async () => liteLlmConfig?.teamManagement?.enabled ? api.getManagedTeams().catch(() => []) : [],
         [api, liteLlmConfig]
       );
@@ -3389,15 +3493,15 @@ var init_LiteLLMPage = __esm({
       const { allowed: canManageMcpServers } = usePermission({ permission: litellmTeamMcpManagePermission });
       const teamMgmtEnabled = liteLlmConfig?.teamManagement?.enabled ?? false;
       const objectPermsEnabled = liteLlmConfig?.teamManagement?.objectPermissionsEnabled ?? false;
-      const { value: vectorStores } = useAsync2(
+      const { value: vectorStores } = useAsync3(
         async () => objectPermsEnabled ? api.getVectorStores().catch(() => []) : [],
         [api, objectPermsEnabled]
       );
-      const { value: mcpServers } = useAsync2(
+      const { value: mcpServers } = useAsync3(
         async () => objectPermsEnabled ? api.getMcpServers().catch(() => []) : [],
         [api, objectPermsEnabled]
       );
-      const teams = useMemo6(() => {
+      const teams = useMemo7(() => {
         if (!allTeams?.length) return [];
         if (!userInfo) return allTeams;
         const userId = userInfo.user_id;
@@ -3409,7 +3513,7 @@ var init_LiteLLMPage = __esm({
         );
         return byMembership.length > 0 ? byMembership : allTeams;
       }, [allTeams, userInfo]);
-      const { value: usage, loading: usageLoading } = useAsync2(async () => {
+      const { value: usage, loading: usageLoading } = useAsync3(async () => {
         const startDate = dateRange.start.toISOString().split("T")[0];
         const endDate = dateRange.end.toISOString().split("T")[0];
         return api.getUsage(startDate, endDate);
@@ -3436,7 +3540,7 @@ var init_LiteLLMPage = __esm({
           setTeamUsageLoading((prev) => ({ ...prev, [teamId]: false }));
         }
       }, [api, dateRange, teamUsageCache, teamUsageLoading]);
-      const allowedModels = useMemo6(() => {
+      const allowedModels = useMemo7(() => {
         if (!allModels?.length) return [];
         const userModels = userInfo?.models;
         const teamModels = teams?.flatMap((t) => t.models ?? []);
@@ -3544,12 +3648,12 @@ var init_LiteLLMPage = __esm({
       );
       const isInitialLoading = userLoading && !userInfo;
       if (isInitialLoading) {
-        return /* @__PURE__ */ React10.createElement(Box10, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "50vh" }, /* @__PURE__ */ React10.createElement(CircularProgress4, null));
+        return /* @__PURE__ */ React10.createElement(Box10, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "50vh" }, /* @__PURE__ */ React10.createElement(CircularProgress5, null));
       }
       if (userError || !userInfo) {
         const isProvisioningEnabled = userError?.body?.provisioning === true;
         const hint = userError?.body?.hint;
-        return /* @__PURE__ */ React10.createElement(Box10, { p: 3 }, /* @__PURE__ */ React10.createElement(Paper5, { sx: { p: 3 } }, /* @__PURE__ */ React10.createElement(Typography10, { variant: "h6", gutterBottom: true }, "Account not provisioned"), /* @__PURE__ */ React10.createElement(Typography10, { color: "text.secondary", paragraph: true }, "Your Backstage account is not linked to a LiteLLM user."), hint ? /* @__PURE__ */ React10.createElement(Typography10, { variant: "body2", color: "text.secondary" }, hint) : /* @__PURE__ */ React10.createElement(Typography10, { 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__ */ React10.createElement(Box10, { p: 3 }, /* @__PURE__ */ React10.createElement(Paper6, { sx: { p: 3 } }, /* @__PURE__ */ React10.createElement(Typography10, { variant: "h6", gutterBottom: true }, "Account not provisioned"), /* @__PURE__ */ React10.createElement(Typography10, { color: "text.secondary", paragraph: true }, "Your Backstage account is not linked to a LiteLLM user."), hint ? /* @__PURE__ */ React10.createElement(Typography10, { variant: "body2", color: "text.secondary" }, hint) : /* @__PURE__ */ React10.createElement(Typography10, { 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.")));
       }
       const pageTabs = /* @__PURE__ */ React10.createElement(
         Tabs2,
@@ -3610,14 +3714,7 @@ var init_LiteLLMPage = __esm({
         for (const t of managedTeams ?? []) teamsById.set(t.team_id, t);
         for (const t of teams ?? []) teamsById.set(t.team_id, t);
         const visibleTeams = Array.from(teamsById.values());
-        return /* @__PURE__ */ React10.createElement(Box10, { sx: { display: "flex", flexDirection: "column", gap: 2 } }, teamMgmtEnabled && canCreateTeam && /* @__PURE__ */ React10.createElement(Box10, { sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React10.createElement(
-          Button6,
-          {
-            variant: "contained",
-            onClick: () => setManageTeam({ mode: "create" })
-          },
-          "Create Team"
-        )), /* @__PURE__ */ React10.createElement(
+        return /* @__PURE__ */ React10.createElement(
           TeamUsage,
           {
             teams: visibleTeams,
@@ -3628,9 +3725,11 @@ var init_LiteLLMPage = __esm({
             },
             getTeamUsageLoading: (teamId) => teamUsageLoading[teamId] ?? false,
             canManage: teamMgmtEnabled && canManageTeam,
-            onEditTeam: (t) => setManageTeam({ mode: "edit", team: t })
+            onEditTeam: (t) => setManageTeam({ mode: "edit", team: t }),
+            canCreate: teamMgmtEnabled && canCreateTeam,
+            onCreateTeam: () => setManageTeam({ mode: "create" })
           }
-        ));
+        );
       })(), activeTab === "models" && /* @__PURE__ */ React10.createElement(
         ModelsTable,
         {
@@ -3771,17 +3870,17 @@ init_TeamUsage();
 init_api();
 init_format();
 import React12, { useState as useState9, useEffect as useEffect3 } from "react";
-import Paper6 from "@mui/material/Paper";
+import Paper7 from "@mui/material/Paper";
 import Box11 from "@mui/material/Box";
 import Typography11 from "@mui/material/Typography";
 import FormControl2 from "@mui/material/FormControl";
 import Select2 from "@mui/material/Select";
 import MenuItem6 from "@mui/material/MenuItem";
 import Grid2 from "@mui/material/Grid";
-import CircularProgress5 from "@mui/material/CircularProgress";
+import CircularProgress6 from "@mui/material/CircularProgress";
 import Alert6 from "@mui/material/Alert";
 import { AreaChart as AreaChart3, Area as Area3, ResponsiveContainer as ResponsiveContainer3 } from "recharts";
-import { useApi as useApi2 } from "@backstage/core-plugin-api";
+import { useApi as useApi3 } from "@backstage/core-plugin-api";
 function presetToDateRange(preset) {
   const end = /* @__PURE__ */ new Date();
   const start = /* @__PURE__ */ new Date();
@@ -3799,7 +3898,7 @@ var LiteLLMHomeWidget = ({
   defaultPeriod = "7d",
   title = "LiteLLM Usage"
 }) => {
-  const api = useApi2(liteLlmApiRef);
+  const api = useApi3(liteLlmApiRef);
   const [period, setPeriod] = useState9(defaultPeriod);
   const [loading, setLoading] = useState9(true);
   const [usageError, setUsageError] = useState9(null);
@@ -3843,7 +3942,7 @@ var LiteLLMHomeWidget = ({
     spend: d.spend
   }));
   const hasSparkline = dailyData.length > 0;
-  return /* @__PURE__ */ React12.createElement(Paper6, { sx: { p: 2 } }, /* @__PURE__ */ React12.createElement(Box11, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1.5 }, /* @__PURE__ */ React12.createElement(Typography11, { variant: "h6" }, title), /* @__PURE__ */ React12.createElement(FormControl2, { size: "small", sx: { minWidth: 90 } }, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React12.createElement(Paper7, { sx: { p: 2 } }, /* @__PURE__ */ React12.createElement(Box11, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1.5 }, /* @__PURE__ */ React12.createElement(Typography11, { variant: "h6" }, title), /* @__PURE__ */ React12.createElement(FormControl2, { size: "small", sx: { minWidth: 90 } }, /* @__PURE__ */ React12.createElement(
     Select2,
     {
       value: period,
@@ -3853,7 +3952,7 @@ var LiteLLMHomeWidget = ({
     /* @__PURE__ */ React12.createElement(MenuItem6, { value: "today" }, "Today"),
     /* @__PURE__ */ React12.createElement(MenuItem6, { value: "7d" }, "7d"),
     /* @__PURE__ */ React12.createElement(MenuItem6, { value: "30d" }, "30d")
-  ))), loading && /* @__PURE__ */ React12.createElement(Box11, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ React12.createElement(CircularProgress5, { size: 32 })), !loading && totalFailure && /* @__PURE__ */ React12.createElement(Alert6, { severity: "error", sx: { mt: 1 } }, usageError ?? "Failed to load usage data"), !loading && !totalFailure && /* @__PURE__ */ React12.createElement(React12.Fragment, null, partialFailure && /* @__PURE__ */ React12.createElement(Alert6, { severity: "warning", sx: { mt: 1, mb: 1 } }, usageError ? `Usage data unavailable (${usageError}).` : "", keysError ? ` Key list unavailable (${keysError}).` : "", " Showing what loaded."), /* @__PURE__ */ React12.createElement(Grid2, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React12.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React12.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React12.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React12.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ React12.createElement(Box11, { height: 120 }, /* @__PURE__ */ React12.createElement(ResponsiveContainer3, { width: "100%", height: "100%" }, /* @__PURE__ */ React12.createElement(AreaChart3, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ React12.createElement(
+  ))), loading && /* @__PURE__ */ React12.createElement(Box11, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ React12.createElement(CircularProgress6, { size: 32 })), !loading && totalFailure && /* @__PURE__ */ React12.createElement(Alert6, { severity: "error", sx: { mt: 1 } }, usageError ?? "Failed to load usage data"), !loading && !totalFailure && /* @__PURE__ */ React12.createElement(React12.Fragment, null, partialFailure && /* @__PURE__ */ React12.createElement(Alert6, { severity: "warning", sx: { mt: 1, mb: 1 } }, usageError ? `Usage data unavailable (${usageError}).` : "", keysError ? ` Key list unavailable (${keysError}).` : "", " Showing what loaded."), /* @__PURE__ */ React12.createElement(Grid2, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React12.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React12.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React12.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React12.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ React12.createElement(Box11, { height: 120 }, /* @__PURE__ */ React12.createElement(ResponsiveContainer3, { width: "100%", height: "100%" }, /* @__PURE__ */ React12.createElement(AreaChart3, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ React12.createElement(
     Area3,
     {
       type: "monotone",