@acarmisc/backstage-plugin-litellm 0.15.5 → 0.17.0

package/dist/index.cjs.js

@@ -102,6 +102,24 @@ var init_api = __esm({
         await this.throwIfNotOk(response);
         return response.json();
       }
+      async patch(path, body) {
+        const response = await this.fetchApi.fetch(`${this.basePath}${path}`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(body)
+        });
+        await this.throwIfNotOk(response);
+        return response.json();
+      }
+      async put(path, body) {
+        const response = await this.fetchApi.fetch(`${this.basePath}${path}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(body)
+        });
+        await this.throwIfNotOk(response);
+        return response.json();
+      }
       // User identity is resolved server-side from the Backstage Bearer token.
       // No user_id param needed on the frontend.
       async getUserInfo() {
@@ -158,6 +176,44 @@ var init_api = __esm({
       async getTeams() {
         return this.get("/teams");
       }
+      // Teams whose owning_group the caller administers (server-scoped). Distinct
+      // from getTeams(), which returns only the teams the caller is a member of.
+      async getManagedTeams() {
+        return this.get("/teams/managed");
+      }
+      async addTeamMember(teamId, body) {
+        return this.post(
+          `/teams/${encodeURIComponent(teamId)}/members`,
+          body
+        );
+      }
+      async removeTeamMember(teamId, userEntityRef) {
+        return this.del(
+          `/teams/${encodeURIComponent(teamId)}/members?userEntityRef=${encodeURIComponent(
+            userEntityRef
+          )}`
+        );
+      }
+      // Vector stores (knowledge bases) the caller may attach — already filtered
+      // server-side to the operator's allowlist.
+      async getVectorStores() {
+        return this.get("/vector-stores");
+      }
+      async setTeamKnowledgeBases(teamId, vectorStores) {
+        return this.put(
+          `/teams/${encodeURIComponent(teamId)}/knowledge-bases`,
+          { vector_stores: vectorStores }
+        );
+      }
+      async getMcpServers() {
+        return this.get("/mcp-servers");
+      }
+      async setTeamMcpServers(teamId, mcpServers) {
+        return this.put(
+          `/teams/${encodeURIComponent(teamId)}/mcp-servers`,
+          { mcp_servers: mcpServers }
+        );
+      }
       async getUsage(startDate, endDate) {
         return this.get("/usage", { start_date: startDate, end_date: endDate });
       }
@@ -170,6 +226,12 @@ var init_api = __esm({
       async getConfig() {
         return this.get("/config");
       }
+      async createTeam(request) {
+        return this.post("/teams", request);
+      }
+      async updateTeam(teamId, request) {
+        return this.patch(`/teams/${encodeURIComponent(teamId)}`, request);
+      }
     };
   }
 });
@@ -1879,22 +1941,377 @@ var init_GenerateKeyDialog = __esm({
   }
 });
 
+// src/components/ManageTeamDialog.tsx
+var import_react5, import_Dialog3, import_DialogTitle3, import_DialogContent3, import_DialogActions3, import_TextField3, import_Button4, import_Alert2, import_Checkbox2, import_FormControlLabel2, import_Autocomplete3, import_MenuItem2, import_Box5, import_Divider2, import_Typography5, import_IconButton3, import_List, import_ListItem, import_ListItemText, import_icons_material4, BUDGET_DURATION_OPTIONS, DEFAULT_BUDGET_DURATION, FALLBACK_BUDGET_CEILING, ManageTeamDialog;
+var init_ManageTeamDialog = __esm({
+  "src/components/ManageTeamDialog.tsx"() {
+    "use strict";
+    import_react5 = __toESM(require("react"));
+    import_Dialog3 = __toESM(require("@mui/material/Dialog"));
+    import_DialogTitle3 = __toESM(require("@mui/material/DialogTitle"));
+    import_DialogContent3 = __toESM(require("@mui/material/DialogContent"));
+    import_DialogActions3 = __toESM(require("@mui/material/DialogActions"));
+    import_TextField3 = __toESM(require("@mui/material/TextField"));
+    import_Button4 = __toESM(require("@mui/material/Button"));
+    import_Alert2 = __toESM(require("@mui/material/Alert"));
+    import_Checkbox2 = __toESM(require("@mui/material/Checkbox"));
+    import_FormControlLabel2 = __toESM(require("@mui/material/FormControlLabel"));
+    import_Autocomplete3 = __toESM(require("@mui/material/Autocomplete"));
+    import_MenuItem2 = __toESM(require("@mui/material/MenuItem"));
+    import_Box5 = __toESM(require("@mui/material/Box"));
+    import_Divider2 = __toESM(require("@mui/material/Divider"));
+    import_Typography5 = __toESM(require("@mui/material/Typography"));
+    import_IconButton3 = __toESM(require("@mui/material/IconButton"));
+    import_List = __toESM(require("@mui/material/List"));
+    import_ListItem = __toESM(require("@mui/material/ListItem"));
+    import_ListItemText = __toESM(require("@mui/material/ListItemText"));
+    import_icons_material4 = require("@mui/icons-material");
+    BUDGET_DURATION_OPTIONS = [
+      { value: "1d", label: "Daily (1d)" },
+      { value: "7d", label: "Weekly (7d)" },
+      { value: "30d", label: "Monthly (30d)" },
+      { value: "90d", label: "Quarterly (90d)" },
+      { value: "365d", label: "Yearly (365d)" }
+    ];
+    DEFAULT_BUDGET_DURATION = "30d";
+    FALLBACK_BUDGET_CEILING = 1e3;
+    ManageTeamDialog = ({
+      open,
+      onClose,
+      mode,
+      team,
+      allModels,
+      config,
+      onSubmit,
+      canManageMembers,
+      onAddMember,
+      onRemoveMember,
+      canManageKnowledgeBases,
+      vectorStores,
+      onSaveKnowledgeBases,
+      canManageMcpServers,
+      mcpServers,
+      onSaveMcpServers
+    }) => {
+      const [alias, setAlias] = (0, import_react5.useState)("");
+      const [models, setModels] = (0, import_react5.useState)([]);
+      const [maxBudget, setMaxBudget] = (0, import_react5.useState)("");
+      const [unlimited, setUnlimited] = (0, import_react5.useState)(false);
+      const [budgetDuration, setBudgetDuration] = (0, import_react5.useState)("");
+      const [submitting, setSubmitting] = (0, import_react5.useState)(false);
+      const [error, setError] = (0, import_react5.useState)(null);
+      const [memberRef, setMemberRef] = (0, import_react5.useState)("");
+      const [memberBudget, setMemberBudget] = (0, import_react5.useState)("");
+      const [memberBusy, setMemberBusy] = (0, import_react5.useState)(false);
+      const [memberError, setMemberError] = (0, import_react5.useState)(null);
+      const [kbIds, setKbIds] = (0, import_react5.useState)([]);
+      const [kbBusy, setKbBusy] = (0, import_react5.useState)(false);
+      const [kbError, setKbError] = (0, import_react5.useState)(null);
+      const [mcpIds, setMcpIds] = (0, import_react5.useState)([]);
+      const [mcpBusy, setMcpBusy] = (0, import_react5.useState)(false);
+      const [mcpError, setMcpError] = (0, import_react5.useState)(null);
+      const allowUnlimitedBudget = config?.teamManagement?.allowUnlimitedBudget ?? false;
+      const maxBudgetCeiling = config?.teamManagement?.maxBudgetCeiling ?? FALLBACK_BUDGET_CEILING;
+      (0, import_react5.useEffect)(() => {
+        if (open) {
+          if (mode === "edit" && team) {
+            setAlias(team.team_alias ?? "");
+            setModels(team.models ?? []);
+            setMaxBudget(
+              team.max_budget ? String(team.max_budget) : String(maxBudgetCeiling)
+            );
+            setUnlimited(allowUnlimitedBudget && !team.max_budget);
+            setBudgetDuration(team.budget_duration ?? DEFAULT_BUDGET_DURATION);
+          } else {
+            setAlias("");
+            setModels([]);
+            setMaxBudget(String(maxBudgetCeiling));
+            setUnlimited(allowUnlimitedBudget);
+            setBudgetDuration(DEFAULT_BUDGET_DURATION);
+          }
+          setError(null);
+          setMemberRef("");
+          setMemberBudget("");
+          setMemberError(null);
+          setKbIds(team?.object_permission?.vector_stores ?? []);
+          setKbError(null);
+          setMcpIds(team?.object_permission?.mcp_servers ?? []);
+          setMcpError(null);
+        }
+      }, [open, mode, team, allowUnlimitedBudget, maxBudgetCeiling]);
+      const handleSubmit = async () => {
+        setError(null);
+        if (!alias.trim()) {
+          setError("Team alias is required");
+          return;
+        }
+        if (models.length === 0) {
+          setError("At least one model is required");
+          return;
+        }
+        if (!unlimited) {
+          if (!maxBudget) {
+            setError("Budget is required when unlimited budgets are disabled");
+            return;
+          }
+          const budget = parseFloat(maxBudget);
+          if (isNaN(budget) || budget <= 0) {
+            setError("Budget must be a positive number");
+            return;
+          }
+          if (budget > maxBudgetCeiling) {
+            setError(`Budget cannot exceed $${maxBudgetCeiling}`);
+            return;
+          }
+        }
+        try {
+          setSubmitting(true);
+          let payload;
+          if (mode === "create") {
+            payload = {
+              team_alias: alias.trim(),
+              models,
+              ...unlimited ? { max_budget: null } : { max_budget: parseFloat(maxBudget) },
+              ...budgetDuration && { budget_duration: budgetDuration }
+            };
+          } else {
+            payload = {
+              team_alias: alias.trim(),
+              models,
+              ...unlimited ? { max_budget: null } : { max_budget: parseFloat(maxBudget) },
+              ...budgetDuration && { budget_duration: budgetDuration }
+            };
+          }
+          await onSubmit(payload);
+          onClose();
+        } catch (err) {
+          setError(err instanceof Error ? err.message : "An error occurred");
+        } finally {
+          setSubmitting(false);
+        }
+      };
+      const handleAddMember = async () => {
+        if (!onAddMember || !memberRef.trim()) return;
+        setMemberError(null);
+        const budget = memberBudget ? parseFloat(memberBudget) : void 0;
+        if (budget !== void 0 && (isNaN(budget) || budget <= 0)) {
+          setMemberError("Max budget in team must be a positive number");
+          return;
+        }
+        try {
+          setMemberBusy(true);
+          await onAddMember(memberRef.trim(), budget);
+          setMemberRef("");
+          setMemberBudget("");
+        } catch (err) {
+          setMemberError(err instanceof Error ? err.message : "Failed to add member");
+        } finally {
+          setMemberBusy(false);
+        }
+      };
+      const handleRemoveMember = async (userId) => {
+        if (!onRemoveMember) return;
+        setMemberError(null);
+        try {
+          setMemberBusy(true);
+          await onRemoveMember(userId);
+        } catch (err) {
+          setMemberError(err instanceof Error ? err.message : "Failed to remove member");
+        } finally {
+          setMemberBusy(false);
+        }
+      };
+      const handleSaveKnowledgeBases = async () => {
+        if (!onSaveKnowledgeBases) return;
+        setKbError(null);
+        try {
+          setKbBusy(true);
+          await onSaveKnowledgeBases(kbIds);
+        } catch (err) {
+          setKbError(err instanceof Error ? err.message : "Failed to save knowledge bases");
+        } finally {
+          setKbBusy(false);
+        }
+      };
+      const handleSaveMcpServers = async () => {
+        if (!onSaveMcpServers) return;
+        setMcpError(null);
+        try {
+          setMcpBusy(true);
+          await onSaveMcpServers(mcpIds);
+        } catch (err) {
+          setMcpError(err instanceof Error ? err.message : "Failed to save MCP servers");
+        } finally {
+          setMcpBusy(false);
+        }
+      };
+      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;
+      const showMcpServers = mode === "edit" && !!canManageMcpServers;
+      const mcpOptions = (mcpServers ?? []).map((s) => s.id);
+      const mcpLabel = (id) => (mcpServers ?? []).find((s) => s.id === id)?.name ?? id;
+      return /* @__PURE__ */ import_react5.default.createElement(import_Dialog3.default, { open, onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ import_react5.default.createElement(import_DialogTitle3.default, null, mode === "create" ? "Create Team" : "Edit Team"), /* @__PURE__ */ import_react5.default.createElement(import_DialogContent3.default, { sx: { pt: 2, display: "flex", flexDirection: "column", gap: 2 } }, error && /* @__PURE__ */ import_react5.default.createElement(import_Alert2.default, { severity: "error" }, error), /* @__PURE__ */ import_react5.default.createElement(
+        import_TextField3.default,
+        {
+          label: "Team Alias",
+          value: alias,
+          onChange: (e) => setAlias(e.target.value),
+          disabled: submitting,
+          fullWidth: true
+        }
+      ), /* @__PURE__ */ import_react5.default.createElement(
+        import_Autocomplete3.default,
+        {
+          multiple: true,
+          options: modelNames,
+          value: models,
+          onChange: (_, newValue) => setModels(newValue),
+          disabled: submitting,
+          renderInput: (params) => /* @__PURE__ */ import_react5.default.createElement(import_TextField3.default, { ...params, label: "Models" })
+        }
+      ), /* @__PURE__ */ import_react5.default.createElement(
+        import_TextField3.default,
+        {
+          label: "Max Budget ($)",
+          type: "number",
+          value: maxBudget,
+          onChange: (e) => setMaxBudget(e.target.value),
+          disabled: submitting || unlimited,
+          inputProps: { min: 0, max: maxBudgetCeiling },
+          helperText: `Maximum: $${maxBudgetCeiling}`,
+          fullWidth: true
+        }
+      ), allowUnlimitedBudget && /* @__PURE__ */ import_react5.default.createElement(
+        import_FormControlLabel2.default,
+        {
+          control: /* @__PURE__ */ import_react5.default.createElement(import_Checkbox2.default, { checked: unlimited, onChange: (e) => setUnlimited(e.target.checked), disabled: submitting }),
+          label: "Unlimited Budget"
+        }
+      ), /* @__PURE__ */ import_react5.default.createElement(
+        import_TextField3.default,
+        {
+          select: true,
+          label: "Budget Duration",
+          value: budgetDuration,
+          onChange: (e) => setBudgetDuration(e.target.value),
+          disabled: submitting || unlimited,
+          helperText: "Spend-reset period for the team budget",
+          fullWidth: true
+        },
+        durationOptions.map((o) => /* @__PURE__ */ import_react5.default.createElement(import_MenuItem2.default, { key: o.value, value: o.value }, o.label))
+      ), showMembers && /* @__PURE__ */ import_react5.default.createElement(import_Box5.default, null, /* @__PURE__ */ import_react5.default.createElement(import_Divider2.default, { sx: { my: 1 } }), /* @__PURE__ */ import_react5.default.createElement(import_Typography5.default, { variant: "subtitle2", sx: { mb: 1 } }, "Members"), memberError && /* @__PURE__ */ import_react5.default.createElement(import_Alert2.default, { severity: "error", sx: { mb: 1 }, onClose: () => setMemberError(null) }, memberError), members.length === 0 ? /* @__PURE__ */ import_react5.default.createElement(import_Typography5.default, { variant: "body2", color: "text.secondary" }, "No members yet.") : /* @__PURE__ */ import_react5.default.createElement(import_List.default, { dense: true, disablePadding: true }, members.map((m) => /* @__PURE__ */ import_react5.default.createElement(
+        import_ListItem.default,
+        {
+          key: m.user_id,
+          disableGutters: true,
+          secondaryAction: /* @__PURE__ */ import_react5.default.createElement(
+            import_IconButton3.default,
+            {
+              edge: "end",
+              size: "small",
+              "aria-label": `remove ${m.user_id}`,
+              disabled: memberBusy,
+              onClick: () => handleRemoveMember(m.user_id)
+            },
+            /* @__PURE__ */ import_react5.default.createElement(import_icons_material4.Delete, { fontSize: "small" })
+          )
+        },
+        /* @__PURE__ */ import_react5.default.createElement(import_ListItemText.default, { primary: m.user_id, secondary: m.role })
+      ))), /* @__PURE__ */ import_react5.default.createElement(import_Box5.default, { sx: { display: "flex", gap: 1, alignItems: "flex-start", mt: 1 } }, /* @__PURE__ */ import_react5.default.createElement(
+        import_TextField3.default,
+        {
+          label: "Backstage user ref",
+          placeholder: "user:default/alice",
+          value: memberRef,
+          onChange: (e) => setMemberRef(e.target.value),
+          disabled: memberBusy,
+          size: "small",
+          sx: { flex: 1 }
+        }
+      ), /* @__PURE__ */ import_react5.default.createElement(
+        import_TextField3.default,
+        {
+          label: "Max budget in team ($)",
+          type: "number",
+          value: memberBudget,
+          onChange: (e) => setMemberBudget(e.target.value),
+          disabled: memberBusy,
+          size: "small",
+          sx: { width: 160 }
+        }
+      ), /* @__PURE__ */ import_react5.default.createElement(
+        import_Button4.default,
+        {
+          onClick: handleAddMember,
+          disabled: memberBusy || !memberRef.trim(),
+          variant: "outlined",
+          sx: { mt: 0.5 }
+        },
+        "Add"
+      ))), showKnowledgeBases && /* @__PURE__ */ import_react5.default.createElement(import_Box5.default, null, /* @__PURE__ */ import_react5.default.createElement(import_Divider2.default, { sx: { my: 1 } }), /* @__PURE__ */ import_react5.default.createElement(import_Typography5.default, { variant: "subtitle2", sx: { mb: 1 } }, "Knowledge Bases"), /* @__PURE__ */ import_react5.default.createElement(import_Typography5.default, { variant: "body2", color: "text.secondary", sx: { mb: 1 } }, "Attaching a knowledge base exposes its documents to every key in this team."), kbError && /* @__PURE__ */ import_react5.default.createElement(import_Alert2.default, { severity: "error", sx: { mb: 1 }, onClose: () => setKbError(null) }, kbError), /* @__PURE__ */ import_react5.default.createElement(
+        import_Autocomplete3.default,
+        {
+          multiple: true,
+          options: kbOptions,
+          value: kbIds,
+          getOptionLabel: kbLabel,
+          onChange: (_, v) => setKbIds(v),
+          disabled: kbBusy,
+          renderInput: (params) => /* @__PURE__ */ import_react5.default.createElement(import_TextField3.default, { ...params, label: "Attached knowledge bases" })
+        }
+      ), /* @__PURE__ */ import_react5.default.createElement(import_Box5.default, { sx: { display: "flex", justifyContent: "flex-end", mt: 1 } }, /* @__PURE__ */ import_react5.default.createElement(
+        import_Button4.default,
+        {
+          onClick: handleSaveKnowledgeBases,
+          disabled: kbBusy,
+          variant: "outlined"
+        },
+        kbBusy ? "Saving\u2026" : "Save knowledge bases"
+      ))), showMcpServers && /* @__PURE__ */ import_react5.default.createElement(import_Box5.default, null, /* @__PURE__ */ import_react5.default.createElement(import_Divider2.default, { sx: { my: 1 } }), /* @__PURE__ */ import_react5.default.createElement(import_Typography5.default, { variant: "subtitle2", sx: { mb: 1 } }, "MCP Servers"), /* @__PURE__ */ import_react5.default.createElement(import_Typography5.default, { variant: "body2", color: "text.secondary", sx: { mb: 1 } }, "Attaching an MCP server lets every key in this team invoke that server's tools through the model \u2014 including any side effects those tools have."), mcpError && /* @__PURE__ */ import_react5.default.createElement(import_Alert2.default, { severity: "error", sx: { mb: 1 }, onClose: () => setMcpError(null) }, mcpError), /* @__PURE__ */ import_react5.default.createElement(
+        import_Autocomplete3.default,
+        {
+          multiple: true,
+          options: mcpOptions,
+          value: mcpIds,
+          getOptionLabel: mcpLabel,
+          onChange: (_, v) => setMcpIds(v),
+          disabled: mcpBusy,
+          renderInput: (params) => /* @__PURE__ */ import_react5.default.createElement(import_TextField3.default, { ...params, label: "Attached MCP servers" })
+        }
+      ), /* @__PURE__ */ import_react5.default.createElement(import_Box5.default, { sx: { display: "flex", justifyContent: "flex-end", mt: 1 } }, /* @__PURE__ */ import_react5.default.createElement(
+        import_Button4.default,
+        {
+          onClick: handleSaveMcpServers,
+          disabled: mcpBusy,
+          variant: "outlined"
+        },
+        mcpBusy ? "Saving\u2026" : "Save MCP servers"
+      )))), /* @__PURE__ */ import_react5.default.createElement(import_DialogActions3.default, null, /* @__PURE__ */ import_react5.default.createElement(import_Button4.default, { onClick: onClose, disabled: submitting }, "Cancel"), /* @__PURE__ */ import_react5.default.createElement(import_Button4.default, { onClick: handleSubmit, disabled: submitting, variant: "contained" }, submitting ? "Saving..." : "Save")));
+    };
+  }
+});
+
 // src/components/UsageStats.tsx
 function rateTone(rate) {
   if (rate >= 0.99) return "success";
   if (rate >= 0.9) return "warning";
   return "danger";
 }
-var import_react5, import_Paper3, import_Box5, import_Typography5, import_TextField3, import_MenuItem2, import_Grid, import_Table2, import_TableBody2, import_TableCell2, import_TableContainer2, import_TableHead2, import_TableRow2, import_Skeleton3, import_recharts, TOP_N_MODELS, PERIOD_LS_KEY, PRESET_LABELS, fmtPct, ChartSkeleton, ChartOrFallback, SuccessRateCell, UsageStats;
+var import_react6, import_Paper3, import_Box6, import_Typography6, import_TextField4, import_MenuItem3, import_Grid, import_Table2, import_TableBody2, import_TableCell2, import_TableContainer2, import_TableHead2, import_TableRow2, import_Skeleton3, import_recharts, TOP_N_MODELS, PERIOD_LS_KEY, PRESET_LABELS, fmtPct, ChartSkeleton, ChartOrFallback, SuccessRateCell, UsageStats;
 var init_UsageStats = __esm({
   "src/components/UsageStats.tsx"() {
     "use strict";
-    import_react5 = __toESM(require("react"));
+    import_react6 = __toESM(require("react"));
     import_Paper3 = __toESM(require("@mui/material/Paper"));
-    import_Box5 = __toESM(require("@mui/material/Box"));
-    import_Typography5 = __toESM(require("@mui/material/Typography"));
-    import_TextField3 = __toESM(require("@mui/material/TextField"));
-    import_MenuItem2 = __toESM(require("@mui/material/MenuItem"));
+    import_Box6 = __toESM(require("@mui/material/Box"));
+    import_Typography6 = __toESM(require("@mui/material/Typography"));
+    import_TextField4 = __toESM(require("@mui/material/TextField"));
+    import_MenuItem3 = __toESM(require("@mui/material/MenuItem"));
     import_Grid = __toESM(require("@mui/material/Grid"));
     import_Table2 = __toESM(require("@mui/material/Table"));
     import_TableBody2 = __toESM(require("@mui/material/TableBody"));
@@ -1915,17 +2332,17 @@ var init_UsageStats = __esm({
       "30d": "Last 30 days"
     };
     fmtPct = (n) => `${(n * 100).toFixed(1)}%`;
-    ChartSkeleton = ({ height = 240 }) => /* @__PURE__ */ import_react5.default.createElement(import_Skeleton3.default, { variant: "rounded", height });
+    ChartSkeleton = ({ height = 240 }) => /* @__PURE__ */ import_react6.default.createElement(import_Skeleton3.default, { variant: "rounded", height });
     ChartOrFallback = ({ loading, empty, height = 240, children }) => {
-      if (loading) return /* @__PURE__ */ import_react5.default.createElement(ChartSkeleton, { height });
-      if (empty) return /* @__PURE__ */ import_react5.default.createElement(EmptyState, { message: "No data for this period", height });
-      return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, children);
+      if (loading) return /* @__PURE__ */ import_react6.default.createElement(ChartSkeleton, { height });
+      if (empty) return /* @__PURE__ */ import_react6.default.createElement(EmptyState, { message: "No data for this period", height });
+      return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, children);
     };
     SuccessRateCell = ({ rate, requests }) => {
-      if (requests === 0) return /* @__PURE__ */ import_react5.default.createElement(import_Typography5.default, { variant: "body2", color: "text.secondary" }, "\u2014");
+      if (requests === 0) return /* @__PURE__ */ import_react6.default.createElement(import_Typography6.default, { variant: "body2", color: "text.secondary" }, "\u2014");
       const tone = rateTone(rate);
-      return /* @__PURE__ */ import_react5.default.createElement(import_Box5.default, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react5.default.createElement(import_Box5.default, { width: 72, flexShrink: 0 }, /* @__PURE__ */ import_react5.default.createElement(Meter, { value: rate * 100, tone, height: 4 })), /* @__PURE__ */ import_react5.default.createElement(
-        import_Typography5.default,
+      return /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { width: 72, flexShrink: 0 }, /* @__PURE__ */ import_react6.default.createElement(Meter, { value: rate * 100, tone, height: 4 })), /* @__PURE__ */ import_react6.default.createElement(
+        import_Typography6.default,
         {
           variant: "caption",
           sx: { fontVariantNumeric: "tabular-nums", minWidth: 44 }
@@ -1943,8 +2360,8 @@ var init_UsageStats = __esm({
       userInfo
     }) => {
       const chart = useChartTheme();
-      const [selectedModel, setSelectedModel] = (0, import_react5.useState)("all");
-      const [tab, setTab] = (0, import_react5.useState)("costs");
+      const [selectedModel, setSelectedModel] = (0, import_react6.useState)("all");
+      const [tab, setTab] = (0, import_react6.useState)("costs");
       const handlePresetChange = (preset) => {
         const end = /* @__PURE__ */ new Date();
         const start = /* @__PURE__ */ new Date();
@@ -1958,7 +2375,7 @@ var init_UsageStats = __esm({
         }
         onDateRangeChange({ start, end }, preset);
       };
-      const dailyData = (0, import_react5.useMemo)(
+      const dailyData = (0, import_react6.useMemo)(
         () => (usage?.daily_usage ?? []).map((d) => ({
           date: d.date,
           spend: d.spend,
@@ -1971,21 +2388,21 @@ var init_UsageStats = __esm({
         })),
         [usage]
       );
-      const cumulativeData = (0, import_react5.useMemo)(() => {
+      const cumulativeData = (0, import_react6.useMemo)(() => {
         let cum = 0;
         return dailyData.map((d) => {
           cum += d.spend;
           return { date: d.date, cumulative: cum };
         });
       }, [dailyData]);
-      const successRateData = (0, import_react5.useMemo)(
+      const successRateData = (0, import_react6.useMemo)(
         () => 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 } = (0, import_react5.useMemo)(() => {
+      const { modelSpendByDate, topModels: topSpendModels } = (0, import_react6.useMemo)(() => {
         const rows = usage?.daily_by_model ?? [];
         const modelTotals = {};
         for (const r of rows) modelTotals[r.model] = (modelTotals[r.model] ?? 0) + r.spend;
@@ -2000,7 +2417,7 @@ var init_UsageStats = __esm({
         const hasOther = sorted.some((r) => r.Other > 0);
         return { modelSpendByDate: sorted, topModels: hasOther ? [...top, "Other"] : top };
       }, [usage]);
-      const modelRows = (0, import_react5.useMemo)(() => {
+      const modelRows = (0, import_react6.useMemo)(() => {
         const entries = Object.entries(usage?.usage_by_model ?? {}).map(([model, d]) => ({
           model,
           spend: d.total_spend,
@@ -2014,11 +2431,11 @@ var init_UsageStats = __esm({
         }));
         return selectedModel === "all" ? entries : entries.filter((e) => e.model === selectedModel);
       }, [usage, selectedModel]);
-      const topModelSpendBars = (0, import_react5.useMemo)(
+      const topModelSpendBars = (0, import_react6.useMemo)(
         () => [...modelRows].sort((a, b) => b.spend - a.spend).slice(0, 10),
         [modelRows]
       );
-      const keyRows = (0, import_react5.useMemo)(
+      const keyRows = (0, import_react6.useMemo)(
         () => Object.entries(usage?.usage_by_key ?? {}).map(([keyHash, d]) => ({
           keyHash,
           keyAlias: d.key_alias ?? keyHash.slice(0, 8),
@@ -2035,7 +2452,7 @@ var init_UsageStats = __esm({
         })),
         [usage]
       );
-      const topKeySpendBars = (0, import_react5.useMemo)(
+      const topKeySpendBars = (0, import_react6.useMemo)(
         () => [...keyRows].sort((a, b) => b.spend - a.spend).slice(0, 10),
         [keyRows]
       );
@@ -2073,24 +2490,24 @@ var init_UsageStats = __esm({
       ];
       const renderKeyRows = () => {
         if (loading) {
-          return /* @__PURE__ */ import_react5.default.createElement(import_TableRow2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { colSpan: 7, sx: { py: 3 } }, /* @__PURE__ */ import_react5.default.createElement(import_Skeleton3.default, { variant: "rounded", height: 80 })));
+          return /* @__PURE__ */ import_react6.default.createElement(import_TableRow2.default, null, /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { colSpan: 7, sx: { py: 3 } }, /* @__PURE__ */ import_react6.default.createElement(import_Skeleton3.default, { variant: "rounded", height: 80 })));
         }
         if (keyRows.length === 0) {
-          return /* @__PURE__ */ import_react5.default.createElement(import_TableRow2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { colSpan: 7 }, /* @__PURE__ */ import_react5.default.createElement(EmptyState, { message: "No key activity in this period" })));
+          return /* @__PURE__ */ import_react6.default.createElement(import_TableRow2.default, null, /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { colSpan: 7 }, /* @__PURE__ */ import_react6.default.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__ */ import_react5.default.createElement(import_TableRow2.default, { key: r.keyHash }, /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_Typography5.default, { variant: "body2", sx: { fontWeight: 600 } }, r.keyAlias), r.teamId ? /* @__PURE__ */ import_react5.default.createElement(import_Typography5.default, { variant: "caption", color: "text.secondary" }, "team: ", r.teamId) : null), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_Box5.default, { display: "flex", gap: 0.5, flexWrap: "wrap" }, r.models.slice(0, 3).map((m) => /* @__PURE__ */ import_react5.default.createElement(TagChip, { key: m, label: m, title: m })), r.models.length > 3 && /* @__PURE__ */ import_react5.default.createElement(TagChip, { label: `+${r.models.length - 3}`, mono: false }))), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtUsd(r.spend)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtInt(r.apiRequests)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtCompact(r.totalTokens)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtInt(r.failedRequests)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, null, /* @__PURE__ */ import_react5.default.createElement(SuccessRateCell, { rate: r.successRate, requests: r.apiRequests }))));
+        return [...keyRows].sort((a, b) => b.spend - a.spend || b.apiRequests - a.apiRequests).map((r) => /* @__PURE__ */ import_react6.default.createElement(import_TableRow2.default, { key: r.keyHash }, /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, null, /* @__PURE__ */ import_react6.default.createElement(import_Typography6.default, { variant: "body2", sx: { fontWeight: 600 } }, r.keyAlias), r.teamId ? /* @__PURE__ */ import_react6.default.createElement(import_Typography6.default, { variant: "caption", color: "text.secondary" }, "team: ", r.teamId) : null), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, null, /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { display: "flex", gap: 0.5, flexWrap: "wrap" }, r.models.slice(0, 3).map((m) => /* @__PURE__ */ import_react6.default.createElement(TagChip, { key: m, label: m, title: m })), r.models.length > 3 && /* @__PURE__ */ import_react6.default.createElement(TagChip, { label: `+${r.models.length - 3}`, mono: false }))), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, fmtUsd(r.spend)), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, fmtInt(r.apiRequests)), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, fmtCompact(r.totalTokens)), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, fmtInt(r.failedRequests)), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, null, /* @__PURE__ */ import_react6.default.createElement(SuccessRateCell, { rate: r.successRate, requests: r.apiRequests }))));
       };
       const renderModelRows = () => {
         if (loading) {
-          return /* @__PURE__ */ import_react5.default.createElement(import_TableRow2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { colSpan: 8, sx: { py: 3 } }, /* @__PURE__ */ import_react5.default.createElement(import_Skeleton3.default, { variant: "rounded", height: 80 })));
+          return /* @__PURE__ */ import_react6.default.createElement(import_TableRow2.default, null, /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { colSpan: 8, sx: { py: 3 } }, /* @__PURE__ */ import_react6.default.createElement(import_Skeleton3.default, { variant: "rounded", height: 80 })));
         }
         if (modelRows.length === 0) {
-          return /* @__PURE__ */ import_react5.default.createElement(import_TableRow2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { colSpan: 8 }, /* @__PURE__ */ import_react5.default.createElement(EmptyState, { message: "No model activity in this period" })));
+          return /* @__PURE__ */ import_react6.default.createElement(import_TableRow2.default, null, /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { colSpan: 8 }, /* @__PURE__ */ import_react6.default.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__ */ import_react5.default.createElement(import_TableRow2.default, { key: r.model }, /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_Box5.default, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react5.default.createElement(import_Box5.default, { sx: { width: 8, height: 8, borderRadius: "50%", bgcolor: chartColor(r.model), flexShrink: 0 } }), /* @__PURE__ */ import_react5.default.createElement(import_Typography5.default, { variant: "body2", sx: { fontWeight: 600 } }, r.model))), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtUsd(r.spend)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtInt(r.apiRequests)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtInt(r.successfulRequests)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtInt(r.failedRequests)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtCompact(r.promptTokens)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, fmtCompact(r.completionTokens)), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, null, /* @__PURE__ */ import_react5.default.createElement(SuccessRateCell, { rate: r.successRate, requests: r.apiRequests }))));
+        return [...modelRows].sort((a, b) => b.spend - a.spend || b.totalTokens - a.totalTokens).map((r) => /* @__PURE__ */ import_react6.default.createElement(import_TableRow2.default, { key: r.model }, /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, null, /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { sx: { width: 8, height: 8, borderRadius: "50%", bgcolor: chartColor(r.model), flexShrink: 0 } }), /* @__PURE__ */ import_react6.default.createElement(import_Typography6.default, { variant: "body2", sx: { fontWeight: 600 } }, r.model))), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, fmtUsd(r.spend)), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, fmtInt(r.apiRequests)), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, fmtInt(r.successfulRequests)), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, fmtInt(r.failedRequests)), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, fmtCompact(r.promptTokens)), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, fmtCompact(r.completionTokens)), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, null, /* @__PURE__ */ import_react6.default.createElement(SuccessRateCell, { rate: r.successRate, requests: r.apiRequests }))));
       };
-      const periodSelect = /* @__PURE__ */ import_react5.default.createElement(
-        import_TextField3.default,
+      const periodSelect = /* @__PURE__ */ import_react6.default.createElement(
+        import_TextField4.default,
         {
           select: true,
           size: "small",
@@ -2099,18 +2516,18 @@ var init_UsageStats = __esm({
           onChange: (e) => handlePresetChange(e.target.value),
           sx: { minWidth: 160 }
         },
-        Object.keys(PRESET_LABELS).map((p) => /* @__PURE__ */ import_react5.default.createElement(import_MenuItem2.default, { key: p, value: p }, PRESET_LABELS[p]))
+        Object.keys(PRESET_LABELS).map((p) => /* @__PURE__ */ import_react6.default.createElement(import_MenuItem3.default, { key: p, value: p }, PRESET_LABELS[p]))
       );
-      return /* @__PURE__ */ import_react5.default.createElement(
+      return /* @__PURE__ */ import_react6.default.createElement(
         SectionCard,
         {
           title: "Usage Analytics",
           subtitle: `${PRESET_LABELS[currentPreset]} \xB7 ${dateRange.start.toLocaleDateString()} \u2013 ${dateRange.end.toLocaleDateString()}`,
           actions: periodSelect
         },
-        /* @__PURE__ */ import_react5.default.createElement(MetricStrip, { metrics }),
-        /* @__PURE__ */ import_react5.default.createElement(
-          import_Box5.default,
+        /* @__PURE__ */ import_react6.default.createElement(MetricStrip, { metrics }),
+        /* @__PURE__ */ import_react6.default.createElement(
+          import_Box6.default,
           {
             sx: {
               display: "flex",
@@ -2122,7 +2539,7 @@ var init_UsageStats = __esm({
               mb: 2
             }
           },
-          /* @__PURE__ */ import_react5.default.createElement(
+          /* @__PURE__ */ import_react6.default.createElement(
             SegmentedControl,
             {
               value: tab,
@@ -2134,8 +2551,8 @@ var init_UsageStats = __esm({
               ]
             }
           ),
-          tab === "models" && /* @__PURE__ */ import_react5.default.createElement(
-            import_TextField3.default,
+          tab === "models" && /* @__PURE__ */ import_react6.default.createElement(
+            import_TextField4.default,
             {
               select: true,
               size: "small",
@@ -2144,17 +2561,17 @@ var init_UsageStats = __esm({
               onChange: (e) => setSelectedModel(e.target.value),
               sx: { minWidth: 220 }
             },
-            /* @__PURE__ */ import_react5.default.createElement(import_MenuItem2.default, { value: "all" }, "All models"),
-            models.map((m) => /* @__PURE__ */ import_react5.default.createElement(import_MenuItem2.default, { key: m.model_name, value: m.model_name }, m.model_name))
+            /* @__PURE__ */ import_react6.default.createElement(import_MenuItem3.default, { value: "all" }, "All models"),
+            models.map((m) => /* @__PURE__ */ import_react6.default.createElement(import_MenuItem3.default, { key: m.model_name, value: m.model_name }, m.model_name))
           )
         ),
-        tab === "costs" && /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { container: true, spacing: 2 }, /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12 }, /* @__PURE__ */ import_react5.default.createElement(ChartCard, { title: "Daily spend by model", height: 260 }, /* @__PURE__ */ import_react5.default.createElement(ChartOrFallback, { loading, empty: modelSpendByDate.length === 0, height: 260 }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.AreaChart, { data: modelSpendByDate, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.YAxis, { tickFormatter: fmtUsdCompact, width: 56, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(
+        tab === "costs" && /* @__PURE__ */ import_react6.default.createElement(import_Grid.default, { container: true, spacing: 2 }, /* @__PURE__ */ import_react6.default.createElement(import_Grid.default, { item: true, xs: 12 }, /* @__PURE__ */ import_react6.default.createElement(ChartCard, { title: "Daily spend by model", height: 260 }, /* @__PURE__ */ import_react6.default.createElement(ChartOrFallback, { loading, empty: modelSpendByDate.length === 0, height: 260 }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.AreaChart, { data: modelSpendByDate, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.YAxis, { tickFormatter: fmtUsdCompact, width: 56, ...chart.axis }), /* @__PURE__ */ import_react6.default.createElement(
           import_recharts.Tooltip,
           {
             cursor: chart.cursor,
-            content: /* @__PURE__ */ import_react5.default.createElement(ChartTooltip, { valueFormatter: fmtUsd, hideZero: true })
+            content: /* @__PURE__ */ import_react6.default.createElement(ChartTooltip, { valueFormatter: fmtUsd, hideZero: true })
           }
-        ), topSpendModels.map((m) => /* @__PURE__ */ import_react5.default.createElement(
+        ), topSpendModels.map((m) => /* @__PURE__ */ import_react6.default.createElement(
           import_recharts.Area,
           {
             key: m,
@@ -2166,13 +2583,13 @@ var init_UsageStats = __esm({
             fill: chartColor(m),
             fillOpacity: 0.28
           }
-        ))))), !loading && topSpendModels.length > 0 && /* @__PURE__ */ import_react5.default.createElement(SeriesLegend, { series: topSpendModels.map((m) => ({ name: m, color: chartColor(m) })) }))), /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react5.default.createElement(ChartCard, { title: "Daily token usage" }, /* @__PURE__ */ import_react5.default.createElement(ChartOrFallback, { loading, empty: dailyData.length === 0 }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.AreaChart, { data: dailyData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.YAxis, { tickFormatter: fmtCompact, width: 48, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ import_react5.default.createElement(ChartTooltip, { valueFormatter: fmtInt }) }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Legend, { ...chart.legend }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Area, { type: "monotone", dataKey: "promptTokens", name: "Input", stackId: "tok", stroke: SERIES.input, strokeWidth: 1.5, fill: SERIES.input, fillOpacity: 0.25 }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Area, { type: "monotone", dataKey: "completionTokens", name: "Output", stackId: "tok", stroke: SERIES.output, strokeWidth: 1.5, fill: SERIES.output, fillOpacity: 0.25 })))))), /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react5.default.createElement(ChartCard, { title: "Daily requests" }, /* @__PURE__ */ import_react5.default.createElement(ChartOrFallback, { loading, empty: dailyData.length === 0 }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.BarChart, { data: dailyData, margin: { top: 4, right: 8, left: 0, bottom: 0 }, barCategoryGap: "30%" }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.YAxis, { tickFormatter: fmtCompact, width: 48, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ import_react5.default.createElement(ChartTooltip, { valueFormatter: fmtInt }) }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Legend, { ...chart.legend }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Bar, { dataKey: "successfulRequests", name: "Successful", fill: SERIES.success, stackId: "r" }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Bar, { dataKey: "failedRequests", name: "Failed", fill: SERIES.failure, stackId: "r", radius: [3, 3, 0, 0] })))))), /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react5.default.createElement(ChartCard, { title: "Daily success rate" }, /* @__PURE__ */ import_react5.default.createElement(ChartOrFallback, { loading, empty: successRateData.length === 0 }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.LineChart, { data: successRateData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.YAxis, { domain: [0, 100], tickFormatter: (v) => `${v}%`, width: 44, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(
+        ))))), !loading && topSpendModels.length > 0 && /* @__PURE__ */ import_react6.default.createElement(SeriesLegend, { series: topSpendModels.map((m) => ({ name: m, color: chartColor(m) })) }))), /* @__PURE__ */ import_react6.default.createElement(import_Grid.default, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react6.default.createElement(ChartCard, { title: "Daily token usage" }, /* @__PURE__ */ import_react6.default.createElement(ChartOrFallback, { loading, empty: dailyData.length === 0 }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.AreaChart, { data: dailyData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.YAxis, { tickFormatter: fmtCompact, width: 48, ...chart.axis }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ import_react6.default.createElement(ChartTooltip, { valueFormatter: fmtInt }) }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.Legend, { ...chart.legend }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.Area, { type: "monotone", dataKey: "promptTokens", name: "Input", stackId: "tok", stroke: SERIES.input, strokeWidth: 1.5, fill: SERIES.input, fillOpacity: 0.25 }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.Area, { type: "monotone", dataKey: "completionTokens", name: "Output", stackId: "tok", stroke: SERIES.output, strokeWidth: 1.5, fill: SERIES.output, fillOpacity: 0.25 })))))), /* @__PURE__ */ import_react6.default.createElement(import_Grid.default, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react6.default.createElement(ChartCard, { title: "Daily requests" }, /* @__PURE__ */ import_react6.default.createElement(ChartOrFallback, { loading, empty: dailyData.length === 0 }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.BarChart, { data: dailyData, margin: { top: 4, right: 8, left: 0, bottom: 0 }, barCategoryGap: "30%" }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.YAxis, { tickFormatter: fmtCompact, width: 48, ...chart.axis }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ import_react6.default.createElement(ChartTooltip, { valueFormatter: fmtInt }) }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.Legend, { ...chart.legend }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.Bar, { dataKey: "successfulRequests", name: "Successful", fill: SERIES.success, stackId: "r" }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.Bar, { dataKey: "failedRequests", name: "Failed", fill: SERIES.failure, stackId: "r", radius: [3, 3, 0, 0] })))))), /* @__PURE__ */ import_react6.default.createElement(import_Grid.default, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react6.default.createElement(ChartCard, { title: "Daily success rate" }, /* @__PURE__ */ import_react6.default.createElement(ChartOrFallback, { loading, empty: successRateData.length === 0 }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.LineChart, { data: successRateData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.YAxis, { domain: [0, 100], tickFormatter: (v) => `${v}%`, width: 44, ...chart.axis }), /* @__PURE__ */ import_react6.default.createElement(
           import_recharts.Tooltip,
           {
             cursor: chart.cursor,
-            content: /* @__PURE__ */ import_react5.default.createElement(ChartTooltip, { valueFormatter: (v) => `${v}%` })
+            content: /* @__PURE__ */ import_react6.default.createElement(ChartTooltip, { valueFormatter: (v) => `${v}%` })
           }
-        ), /* @__PURE__ */ import_react5.default.createElement(import_recharts.ReferenceLine, { y: 100, stroke: SERIES.success, strokeDasharray: "4 4", strokeOpacity: 0.5 }), /* @__PURE__ */ import_react5.default.createElement(
+        ), /* @__PURE__ */ import_react6.default.createElement(import_recharts.ReferenceLine, { y: 100, stroke: SERIES.success, strokeDasharray: "4 4", strokeOpacity: 0.5 }), /* @__PURE__ */ import_react6.default.createElement(
           import_recharts.Line,
           {
             type: "monotone",
@@ -2183,13 +2600,13 @@ var init_UsageStats = __esm({
             dot: { r: 2.5, strokeWidth: 0, fill: SERIES.input },
             activeDot: { r: 4 }
           }
-        )))))), /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react5.default.createElement(
+        )))))), /* @__PURE__ */ import_react6.default.createElement(import_Grid.default, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react6.default.createElement(
           ChartCard,
           {
             title: maxBudget > 0 ? "Cumulative spend vs budget" : "Cumulative spend",
             meta: maxBudget > 0 ? `${fmtUsd(totalCumSpend)} used \xB7 ${fmtUsd(Math.max(0, maxBudget - totalCumSpend))} left` : void 0
           },
-          /* @__PURE__ */ import_react5.default.createElement(ChartOrFallback, { loading, empty: cumulativeData.length === 0 }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.AreaChart, { data: cumulativeData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(
+          /* @__PURE__ */ import_react6.default.createElement(ChartOrFallback, { loading, empty: cumulativeData.length === 0 }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.AreaChart, { data: cumulativeData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react6.default.createElement(
             import_recharts.YAxis,
             {
               tickFormatter: fmtUsdCompact,
@@ -2197,13 +2614,13 @@ var init_UsageStats = __esm({
               domain: cumulativeDomain,
               ...chart.axis
             }
-          ), /* @__PURE__ */ import_react5.default.createElement(
+          ), /* @__PURE__ */ import_react6.default.createElement(
             import_recharts.Tooltip,
             {
               cursor: chart.cursor,
-              content: /* @__PURE__ */ import_react5.default.createElement(ChartTooltip, { valueFormatter: fmtUsd })
+              content: /* @__PURE__ */ import_react6.default.createElement(ChartTooltip, { valueFormatter: fmtUsd })
             }
-          ), maxBudget > 0 && /* @__PURE__ */ import_react5.default.createElement(
+          ), maxBudget > 0 && /* @__PURE__ */ import_react6.default.createElement(
             import_recharts.ReferenceLine,
             {
               y: maxBudget,
@@ -2211,7 +2628,7 @@ var init_UsageStats = __esm({
               strokeDasharray: "5 4",
               label: { value: `Budget ${fmtUsd(maxBudget)}`, position: "insideTopRight", fontSize: 10, fill: SERIES.budget }
             }
-          ), /* @__PURE__ */ import_react5.default.createElement(
+          ), /* @__PURE__ */ import_react6.default.createElement(
             import_recharts.Area,
             {
               type: "monotone",
@@ -2224,32 +2641,32 @@ var init_UsageStats = __esm({
             }
           ))))
         ))),
-        tab === "models" && /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { container: true, spacing: 2 }, /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react5.default.createElement(ChartCard, { title: "Spend by model", height: Math.max(200, topModelSpendBars.length * 34) }, /* @__PURE__ */ import_react5.default.createElement(
+        tab === "models" && /* @__PURE__ */ import_react6.default.createElement(import_Grid.default, { container: true, spacing: 2 }, /* @__PURE__ */ import_react6.default.createElement(import_Grid.default, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react6.default.createElement(ChartCard, { title: "Spend by model", height: Math.max(200, topModelSpendBars.length * 34) }, /* @__PURE__ */ import_react6.default.createElement(
           ChartOrFallback,
           {
             loading,
             empty: topModelSpendBars.length === 0,
             height: Math.max(200, topModelSpendBars.length * 34)
           },
-          /* @__PURE__ */ import_react5.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.BarChart, { data: topModelSpendBars, layout: "vertical", margin: { top: 0, right: 12, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.XAxis, { type: "number", tickFormatter: fmtUsdCompact, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.YAxis, { type: "category", dataKey: "model", width: 170, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ import_react5.default.createElement(ChartTooltip, { valueFormatter: fmtUsd, labelFormatter: (l) => l }) }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Bar, { dataKey: "spend", name: "Spend", radius: [0, 3, 3, 0], barSize: 14 }, topModelSpendBars.map((r) => /* @__PURE__ */ import_react5.default.createElement(import_recharts.Cell, { key: r.model, fill: chartColor(r.model) })))))
-        ))), /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react5.default.createElement(ChartCard, { title: "Tokens by model", height: Math.max(200, topModelSpendBars.length * 34) }, /* @__PURE__ */ import_react5.default.createElement(
+          /* @__PURE__ */ import_react6.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.BarChart, { data: topModelSpendBars, layout: "vertical", margin: { top: 0, right: 12, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.XAxis, { type: "number", tickFormatter: fmtUsdCompact, ...chart.axis }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.YAxis, { type: "category", dataKey: "model", width: 170, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ import_react6.default.createElement(ChartTooltip, { valueFormatter: fmtUsd, labelFormatter: (l) => l }) }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.Bar, { dataKey: "spend", name: "Spend", radius: [0, 3, 3, 0], barSize: 14 }, topModelSpendBars.map((r) => /* @__PURE__ */ import_react6.default.createElement(import_recharts.Cell, { key: r.model, fill: chartColor(r.model) })))))
+        ))), /* @__PURE__ */ import_react6.default.createElement(import_Grid.default, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react6.default.createElement(ChartCard, { title: "Tokens by model", height: Math.max(200, topModelSpendBars.length * 34) }, /* @__PURE__ */ import_react6.default.createElement(
           ChartOrFallback,
           {
             loading,
             empty: modelRows.length === 0,
             height: Math.max(200, topModelSpendBars.length * 34)
           },
-          /* @__PURE__ */ import_react5.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.BarChart, { data: topModelSpendBars, layout: "vertical", margin: { top: 0, right: 12, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.XAxis, { type: "number", tickFormatter: fmtCompact, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.YAxis, { type: "category", dataKey: "model", width: 170, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ import_react5.default.createElement(ChartTooltip, { valueFormatter: fmtInt, labelFormatter: (l) => l }) }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Legend, { ...chart.legend }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Bar, { dataKey: "promptTokens", name: "Input", fill: SERIES.input, stackId: "t", barSize: 14 }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Bar, { dataKey: "completionTokens", name: "Output", fill: SERIES.output, stackId: "t", barSize: 14, radius: [0, 3, 3, 0] })))
-        ))), /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12 }, /* @__PURE__ */ import_react5.default.createElement(import_TableContainer2.default, { component: import_Paper3.default, variant: "outlined", sx: { borderRadius: 2 } }, /* @__PURE__ */ import_react5.default.createElement(import_Table2.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react5.default.createElement(import_TableHead2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_TableRow2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, null, "Model"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Spend"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Requests"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Success"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Failed"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Input"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Output"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { sx: { width: 160 } }, "Success rate"))), /* @__PURE__ */ import_react5.default.createElement(import_TableBody2.default, null, renderModelRows()))))),
-        tab === "keys" && /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { container: true, spacing: 2 }, (loading || topKeySpendBars.length > 0) && /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12 }, /* @__PURE__ */ import_react5.default.createElement(ChartCard, { title: "Spend by key", height: Math.max(160, topKeySpendBars.length * 32) }, /* @__PURE__ */ import_react5.default.createElement(
+          /* @__PURE__ */ import_react6.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.BarChart, { data: topModelSpendBars, layout: "vertical", margin: { top: 0, right: 12, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.XAxis, { type: "number", tickFormatter: fmtCompact, ...chart.axis }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.YAxis, { type: "category", dataKey: "model", width: 170, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ import_react6.default.createElement(ChartTooltip, { valueFormatter: fmtInt, labelFormatter: (l) => l }) }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.Legend, { ...chart.legend }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.Bar, { dataKey: "promptTokens", name: "Input", fill: SERIES.input, stackId: "t", barSize: 14 }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.Bar, { dataKey: "completionTokens", name: "Output", fill: SERIES.output, stackId: "t", barSize: 14, radius: [0, 3, 3, 0] })))
+        ))), /* @__PURE__ */ import_react6.default.createElement(import_Grid.default, { item: true, xs: 12 }, /* @__PURE__ */ import_react6.default.createElement(import_TableContainer2.default, { component: import_Paper3.default, variant: "outlined", sx: { borderRadius: 2 } }, /* @__PURE__ */ import_react6.default.createElement(import_Table2.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react6.default.createElement(import_TableHead2.default, null, /* @__PURE__ */ import_react6.default.createElement(import_TableRow2.default, null, /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, null, "Model"), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, "Spend"), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, "Requests"), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, "Success"), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, "Failed"), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, "Input"), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, "Output"), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { sx: { width: 160 } }, "Success rate"))), /* @__PURE__ */ import_react6.default.createElement(import_TableBody2.default, null, renderModelRows()))))),
+        tab === "keys" && /* @__PURE__ */ import_react6.default.createElement(import_Grid.default, { container: true, spacing: 2 }, (loading || topKeySpendBars.length > 0) && /* @__PURE__ */ import_react6.default.createElement(import_Grid.default, { item: true, xs: 12 }, /* @__PURE__ */ import_react6.default.createElement(ChartCard, { title: "Spend by key", height: Math.max(160, topKeySpendBars.length * 32) }, /* @__PURE__ */ import_react6.default.createElement(
           ChartOrFallback,
           {
             loading,
             empty: topKeySpendBars.length === 0,
             height: Math.max(160, topKeySpendBars.length * 32)
           },
-          /* @__PURE__ */ import_react5.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.BarChart, { data: topKeySpendBars, layout: "vertical", margin: { top: 0, right: 12, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react5.default.createElement(import_recharts.CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.XAxis, { type: "number", tickFormatter: fmtUsdCompact, ...chart.axis }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.YAxis, { type: "category", dataKey: "keyAlias", width: 160, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ import_react5.default.createElement(ChartTooltip, { valueFormatter: fmtUsd, labelFormatter: (l) => l }) }), /* @__PURE__ */ import_react5.default.createElement(import_recharts.Bar, { dataKey: "spend", name: "Spend", fill: SERIES.input, radius: [0, 3, 3, 0], barSize: 14 })))
-        ))), /* @__PURE__ */ import_react5.default.createElement(import_Grid.default, { item: true, xs: 12 }, /* @__PURE__ */ import_react5.default.createElement(import_TableContainer2.default, { component: import_Paper3.default, variant: "outlined", sx: { borderRadius: 2 } }, /* @__PURE__ */ import_react5.default.createElement(import_Table2.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react5.default.createElement(import_TableHead2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_TableRow2.default, null, /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, null, "Key"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, null, "Models"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Spend"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Requests"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Tokens"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { align: "right" }, "Failed"), /* @__PURE__ */ import_react5.default.createElement(import_TableCell2.default, { sx: { width: 160 } }, "Success rate"))), /* @__PURE__ */ import_react5.default.createElement(import_TableBody2.default, null, renderKeyRows())))))
+          /* @__PURE__ */ import_react6.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.BarChart, { data: topKeySpendBars, layout: "vertical", margin: { top: 0, right: 12, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.CartesianGrid, { ...chart.grid, vertical: true, horizontal: false }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.XAxis, { type: "number", tickFormatter: fmtUsdCompact, ...chart.axis }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.YAxis, { type: "category", dataKey: "keyAlias", width: 160, ...chart.axis, tick: { fontSize: 10.5, fill: chart.axis.tick.fill } }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.Tooltip, { cursor: chart.cursor, content: /* @__PURE__ */ import_react6.default.createElement(ChartTooltip, { valueFormatter: fmtUsd, labelFormatter: (l) => l }) }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.Bar, { dataKey: "spend", name: "Spend", fill: SERIES.input, radius: [0, 3, 3, 0], barSize: 14 })))
+        ))), /* @__PURE__ */ import_react6.default.createElement(import_Grid.default, { item: true, xs: 12 }, /* @__PURE__ */ import_react6.default.createElement(import_TableContainer2.default, { component: import_Paper3.default, variant: "outlined", sx: { borderRadius: 2 } }, /* @__PURE__ */ import_react6.default.createElement(import_Table2.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react6.default.createElement(import_TableHead2.default, null, /* @__PURE__ */ import_react6.default.createElement(import_TableRow2.default, null, /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, null, "Key"), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, null, "Models"), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, "Spend"), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, "Requests"), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, "Tokens"), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { align: "right" }, "Failed"), /* @__PURE__ */ import_react6.default.createElement(import_TableCell2.default, { sx: { width: 160 } }, "Success rate"))), /* @__PURE__ */ import_react6.default.createElement(import_TableBody2.default, null, renderKeyRows())))))
       );
     };
   }
@@ -2261,16 +2678,16 @@ function budgetTone2(isOver, isNear) {
   if (isNear) return "warning";
   return "accent";
 }
-var import_react6, import_Paper4, import_Box6, import_Typography6, import_Skeleton4, import_Divider2, import_Table3, import_TableBody3, import_TableCell3, import_TableHead3, import_TableRow3, import_TableContainer3, import_Collapse, import_IconButton3, import_CircularProgress3, import_styles4, import_icons_material4, import_recharts2, fmtUsd2, TeamCard, TeamUsage;
+var import_react7, import_Paper4, import_Box7, import_Typography7, import_Skeleton4, import_Divider3, import_Table3, import_TableBody3, import_TableCell3, import_TableHead3, import_TableRow3, import_TableContainer3, import_Collapse, import_IconButton4, import_Button5, import_CircularProgress3, import_styles4, import_icons_material5, import_recharts2, fmtUsd2, TeamCard, TeamUsage;
 var init_TeamUsage = __esm({
   "src/components/TeamUsage.tsx"() {
     "use strict";
-    import_react6 = __toESM(require("react"));
+    import_react7 = __toESM(require("react"));
     import_Paper4 = __toESM(require("@mui/material/Paper"));
-    import_Box6 = __toESM(require("@mui/material/Box"));
-    import_Typography6 = __toESM(require("@mui/material/Typography"));
+    import_Box7 = __toESM(require("@mui/material/Box"));
+    import_Typography7 = __toESM(require("@mui/material/Typography"));
     import_Skeleton4 = __toESM(require("@mui/material/Skeleton"));
-    import_Divider2 = __toESM(require("@mui/material/Divider"));
+    import_Divider3 = __toESM(require("@mui/material/Divider"));
     import_Table3 = __toESM(require("@mui/material/Table"));
     import_TableBody3 = __toESM(require("@mui/material/TableBody"));
     import_TableCell3 = __toESM(require("@mui/material/TableCell"));
@@ -2278,15 +2695,16 @@ var init_TeamUsage = __esm({
     import_TableRow3 = __toESM(require("@mui/material/TableRow"));
     import_TableContainer3 = __toESM(require("@mui/material/TableContainer"));
     import_Collapse = __toESM(require("@mui/material/Collapse"));
-    import_IconButton3 = __toESM(require("@mui/material/IconButton"));
+    import_IconButton4 = __toESM(require("@mui/material/IconButton"));
+    import_Button5 = __toESM(require("@mui/material/Button"));
     import_CircularProgress3 = __toESM(require("@mui/material/CircularProgress"));
     import_styles4 = require("@mui/material/styles");
-    import_icons_material4 = require("@mui/icons-material");
+    import_icons_material5 = require("@mui/icons-material");
     import_recharts2 = require("recharts");
     init_ui();
     fmtUsd2 = (n) => `$${(n ?? 0).toFixed(2)}`;
-    TeamCard = ({ team, usage, usageLoading }) => {
-      const [expanded, setExpanded] = (0, import_react6.useState)(false);
+    TeamCard = ({ team, usage, usageLoading, canManage, onEditTeam }) => {
+      const [expanded, setExpanded] = (0, import_react7.useState)(false);
       const chart = useChartTheme();
       const budget = team.max_budget ?? 0;
       const spend = team.spend ?? 0;
@@ -2296,24 +2714,24 @@ var init_TeamUsage = __esm({
       const dailyData = usage?.daily_usage?.map((d) => ({ date: d.date, spend: d.spend })) ?? [];
       const renderDailySpendSection = () => {
         if (usageLoading) {
-          return /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { display: "flex", justifyContent: "center", py: 3 }, /* @__PURE__ */ import_react6.default.createElement(import_CircularProgress3.default, { size: 22 }));
+          return /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { display: "flex", justifyContent: "center", py: 3 }, /* @__PURE__ */ import_react7.default.createElement(import_CircularProgress3.default, { size: 22 }));
         }
         if (dailyData.length === 0) return null;
-        return /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { mb: 2.5 }, /* @__PURE__ */ import_react6.default.createElement(
-          import_Typography6.default,
+        return /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { mb: 2.5 }, /* @__PURE__ */ import_react7.default.createElement(
+          import_Typography7.default,
           {
             variant: "caption",
             color: "text.secondary",
             sx: { display: "block", fontSize: 11, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase", mb: 1 }
           },
           "Daily spend"
-        ), /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { height: 150 }, /* @__PURE__ */ import_react6.default.createElement(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react6.default.createElement(import_recharts2.AreaChart, { data: dailyData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react6.default.createElement(import_recharts2.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react6.default.createElement(import_recharts2.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react6.default.createElement(import_recharts2.YAxis, { tickFormatter: fmtUsdCompact, width: 52, ...chart.axis }), /* @__PURE__ */ import_react6.default.createElement(
+        ), /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { height: 150 }, /* @__PURE__ */ import_react7.default.createElement(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react7.default.createElement(import_recharts2.AreaChart, { data: dailyData, margin: { top: 4, right: 8, left: 0, bottom: 0 } }, /* @__PURE__ */ import_react7.default.createElement(import_recharts2.CartesianGrid, { ...chart.grid }), /* @__PURE__ */ import_react7.default.createElement(import_recharts2.XAxis, { dataKey: "date", tickFormatter: fmtDateShort, ...chart.axis }), /* @__PURE__ */ import_react7.default.createElement(import_recharts2.YAxis, { tickFormatter: fmtUsdCompact, width: 52, ...chart.axis }), /* @__PURE__ */ import_react7.default.createElement(
           import_recharts2.Tooltip,
           {
             cursor: chart.cursor,
-            content: /* @__PURE__ */ import_react6.default.createElement(ChartTooltip, { valueFormatter: (v) => `$${v.toFixed(4)}` })
+            content: /* @__PURE__ */ import_react7.default.createElement(ChartTooltip, { valueFormatter: (v) => `$${v.toFixed(4)}` })
           }
-        ), /* @__PURE__ */ import_react6.default.createElement(
+        ), /* @__PURE__ */ import_react7.default.createElement(
           import_recharts2.Area,
           {
             type: "monotone",
@@ -2326,8 +2744,8 @@ var init_TeamUsage = __esm({
           }
         )))));
       };
-      const sectionLabel = (label) => /* @__PURE__ */ import_react6.default.createElement(
-        import_Typography6.default,
+      const sectionLabel = (label) => /* @__PURE__ */ import_react7.default.createElement(
+        import_Typography7.default,
         {
           variant: "caption",
           color: "text.secondary",
@@ -2335,8 +2753,8 @@ var init_TeamUsage = __esm({
         },
         label
       );
-      return /* @__PURE__ */ import_react6.default.createElement(import_Paper4.default, { variant: "outlined", sx: { borderRadius: 2, p: 2.5 } }, /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { display: "flex", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ import_react6.default.createElement(
-        import_Box6.default,
+      return /* @__PURE__ */ import_react7.default.createElement(import_Paper4.default, { variant: "outlined", sx: { borderRadius: 2, p: 2.5 } }, /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { display: "flex", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ import_react7.default.createElement(
+        import_Box7.default,
         {
           sx: (theme) => ({
             width: 36,
@@ -2350,17 +2768,26 @@ var init_TeamUsage = __esm({
             color: theme.palette.primary.main
           })
         },
-        /* @__PURE__ */ import_react6.default.createElement(import_icons_material4.Group, { fontSize: "small" })
-      ), /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { flexGrow: 1, minWidth: 0 }, /* @__PURE__ */ import_react6.default.createElement(import_Typography6.default, { variant: "subtitle1", sx: { fontWeight: 600, lineHeight: 1.3 } }, team.team_alias || "Untitled team"), /* @__PURE__ */ import_react6.default.createElement(
-        import_Typography6.default,
+        /* @__PURE__ */ import_react7.default.createElement(import_icons_material5.Group, { fontSize: "small" })
+      ), /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { flexGrow: 1, minWidth: 0 }, /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "subtitle1", sx: { fontWeight: 600, lineHeight: 1.3 } }, team.team_alias || "Untitled team"), /* @__PURE__ */ import_react7.default.createElement(
+        import_Typography7.default,
         {
           variant: "caption",
           color: "text.secondary",
           sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 }
         },
         team.team_id
-      )), isOver && /* @__PURE__ */ import_react6.default.createElement(StatusPill, { label: "Over budget", tone: "danger" }), isNear && /* @__PURE__ */ import_react6.default.createElement(StatusPill, { label: "Near limit", tone: "warning" }), /* @__PURE__ */ import_react6.default.createElement(
-        import_IconButton3.default,
+      )), isOver && /* @__PURE__ */ import_react7.default.createElement(StatusPill, { label: "Over budget", tone: "danger" }), isNear && /* @__PURE__ */ import_react7.default.createElement(StatusPill, { label: "Near limit", tone: "warning" }), canManage && onEditTeam && /* @__PURE__ */ import_react7.default.createElement(
+        import_Button5.default,
+        {
+          size: "small",
+          variant: "text",
+          onClick: () => onEditTeam(team),
+          sx: { textTransform: "none" }
+        },
+        "Edit"
+      ), /* @__PURE__ */ import_react7.default.createElement(
+        import_IconButton4.default,
         {
           size: "small",
           onClick: () => setExpanded((e) => !e),
@@ -2372,9 +2799,9 @@ var init_TeamUsage = __esm({
             transition: theme.transitions.create("transform")
           })
         },
-        /* @__PURE__ */ import_react6.default.createElement(import_icons_material4.ExpandMore, null)
-      )), /* @__PURE__ */ import_react6.default.createElement(
-        import_Box6.default,
+        /* @__PURE__ */ import_react7.default.createElement(import_icons_material5.ExpandMore, null)
+      )), /* @__PURE__ */ import_react7.default.createElement(
+        import_Box7.default,
         {
           sx: {
             display: "grid",
@@ -2384,35 +2811,35 @@ var init_TeamUsage = __esm({
             maxWidth: 640
           }
         },
-        /* @__PURE__ */ import_react6.default.createElement(Stat, { label: "Members", value: team.members_with_roles?.length ?? "\u2014" }),
-        /* @__PURE__ */ import_react6.default.createElement(Stat, { label: "Models", value: team.models?.length ? team.models.length : "All" }),
-        /* @__PURE__ */ import_react6.default.createElement(Stat, { label: "Budget", value: budget > 0 ? fmtUsd2(budget) : "Unlimited" }),
-        /* @__PURE__ */ import_react6.default.createElement(Stat, { label: "Spend", value: fmtUsd2(spend) }),
-        /* @__PURE__ */ import_react6.default.createElement(Stat, { label: "TPM", value: team.tpm_limit && team.tpm_limit > 0 ? team.tpm_limit.toLocaleString() : "\u2014" }),
-        /* @__PURE__ */ import_react6.default.createElement(Stat, { label: "RPM", value: team.rpm_limit && team.rpm_limit > 0 ? team.rpm_limit.toLocaleString() : "\u2014" })
-      ), budget > 0 && /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ import_react6.default.createElement(import_Typography6.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, fmtUsd2(spend), " of ", fmtUsd2(budget)), /* @__PURE__ */ import_react6.default.createElement(import_Typography6.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "%")), /* @__PURE__ */ import_react6.default.createElement(Meter, { value: budgetPct, tone: budgetTone2(isOver, isNear), height: 5 })), /* @__PURE__ */ import_react6.default.createElement(import_Collapse.default, { in: expanded, unmountOnExit: true }, /* @__PURE__ */ import_react6.default.createElement(import_Divider2.default, { sx: { my: 2.5 } }), /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { mb: 2.5 }, sectionLabel("Models"), team.models?.length ? /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { display: "flex", gap: 0.5, flexWrap: "wrap" }, team.models.map((m) => /* @__PURE__ */ import_react6.default.createElement(TagChip, { key: m, label: m, title: m }))) : /* @__PURE__ */ import_react6.default.createElement(import_Typography6.default, { variant: "body2", color: "text.secondary" }, "All models allowed")), renderDailySpendSection(), /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, null, sectionLabel("Members"), team.members_with_roles?.length ? /* @__PURE__ */ import_react6.default.createElement(
+        /* @__PURE__ */ import_react7.default.createElement(Stat, { label: "Members", value: team.members_with_roles?.length ?? "\u2014" }),
+        /* @__PURE__ */ import_react7.default.createElement(Stat, { label: "Models", value: team.models?.length ? team.models.length : "All" }),
+        /* @__PURE__ */ import_react7.default.createElement(Stat, { label: "Budget", value: budget > 0 ? fmtUsd2(budget) : "Unlimited" }),
+        /* @__PURE__ */ import_react7.default.createElement(Stat, { label: "Spend", value: fmtUsd2(spend) }),
+        /* @__PURE__ */ import_react7.default.createElement(Stat, { label: "TPM", value: team.tpm_limit && team.tpm_limit > 0 ? team.tpm_limit.toLocaleString() : "\u2014" }),
+        /* @__PURE__ */ import_react7.default.createElement(Stat, { label: "RPM", value: team.rpm_limit && team.rpm_limit > 0 ? team.rpm_limit.toLocaleString() : "\u2014" })
+      ), budget > 0 && /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { mt: 2, maxWidth: 640 }, /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { display: "flex", justifyContent: "space-between", alignItems: "baseline", mb: 0.75 }, /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, fmtUsd2(spend), " of ", fmtUsd2(budget)), /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" } }, budgetPct.toFixed(0), "%")), /* @__PURE__ */ import_react7.default.createElement(Meter, { value: budgetPct, tone: budgetTone2(isOver, isNear), height: 5 })), /* @__PURE__ */ import_react7.default.createElement(import_Collapse.default, { in: expanded, unmountOnExit: true }, /* @__PURE__ */ import_react7.default.createElement(import_Divider3.default, { sx: { my: 2.5 } }), /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { mb: 2.5 }, sectionLabel("Models"), team.models?.length ? /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { display: "flex", gap: 0.5, flexWrap: "wrap" }, team.models.map((m) => /* @__PURE__ */ import_react7.default.createElement(TagChip, { key: m, label: m, title: m }))) : /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "body2", color: "text.secondary" }, "All models allowed")), renderDailySpendSection(), /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, null, sectionLabel("Members"), team.members_with_roles?.length ? /* @__PURE__ */ import_react7.default.createElement(
         import_TableContainer3.default,
         {
           component: import_Paper4.default,
           variant: "outlined",
           sx: { borderRadius: 1.5 }
         },
-        /* @__PURE__ */ import_react6.default.createElement(import_Table3.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react6.default.createElement(import_TableHead3.default, null, /* @__PURE__ */ import_react6.default.createElement(import_TableRow3.default, null, /* @__PURE__ */ import_react6.default.createElement(import_TableCell3.default, null, "User"), /* @__PURE__ */ import_react6.default.createElement(import_TableCell3.default, { align: "right" }, "Role"))), /* @__PURE__ */ import_react6.default.createElement(import_TableBody3.default, null, team.members_with_roles.map((m) => /* @__PURE__ */ import_react6.default.createElement(import_TableRow3.default, { key: m.user_id }, /* @__PURE__ */ import_react6.default.createElement(import_TableCell3.default, null, m.user_email ? /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(import_Typography6.default, { variant: "body2" }, m.user_email), /* @__PURE__ */ import_react6.default.createElement(
-          import_Typography6.default,
+        /* @__PURE__ */ import_react7.default.createElement(import_Table3.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react7.default.createElement(import_TableHead3.default, null, /* @__PURE__ */ import_react7.default.createElement(import_TableRow3.default, null, /* @__PURE__ */ import_react7.default.createElement(import_TableCell3.default, null, "User"), /* @__PURE__ */ import_react7.default.createElement(import_TableCell3.default, { align: "right" }, "Role"))), /* @__PURE__ */ import_react7.default.createElement(import_TableBody3.default, null, team.members_with_roles.map((m) => /* @__PURE__ */ import_react7.default.createElement(import_TableRow3.default, { key: m.user_id }, /* @__PURE__ */ import_react7.default.createElement(import_TableCell3.default, null, m.user_email ? /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "body2" }, m.user_email), /* @__PURE__ */ import_react7.default.createElement(
+          import_Typography7.default,
           {
             variant: "caption",
             color: "text.secondary",
             sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 }
           },
           m.user_id
-        )) : /* @__PURE__ */ import_react6.default.createElement(
-          import_Typography6.default,
+        )) : /* @__PURE__ */ import_react7.default.createElement(
+          import_Typography7.default,
           {
             variant: "body2",
             sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" }
           },
           m.user_id
-        )), /* @__PURE__ */ import_react6.default.createElement(import_TableCell3.default, { align: "right" }, /* @__PURE__ */ import_react6.default.createElement(
+        )), /* @__PURE__ */ import_react7.default.createElement(import_TableCell3.default, { align: "right" }, /* @__PURE__ */ import_react7.default.createElement(
           StatusPill,
           {
             label: m.role,
@@ -2420,19 +2847,21 @@ var init_TeamUsage = __esm({
             dot: false
           }
         ))))))
-      ) : /* @__PURE__ */ import_react6.default.createElement(import_Typography6.default, { variant: "body2", color: "text.secondary" }, "No members assigned."))));
+      ) : /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "body2", color: "text.secondary" }, "No members assigned."))));
     };
     TeamUsage = ({
       teams,
       loading,
       getTeamUsage,
-      getTeamUsageLoading
+      getTeamUsageLoading,
+      canManage,
+      onEditTeam
     }) => {
       if (loading) {
-        return /* @__PURE__ */ import_react6.default.createElement(SectionCard, { title: "Teams" }, /* @__PURE__ */ import_react6.default.createElement(import_Skeleton4.default, { variant: "rounded", height: 120, sx: { mb: 2 } }), /* @__PURE__ */ import_react6.default.createElement(import_Skeleton4.default, { variant: "rounded", height: 120 }));
+        return /* @__PURE__ */ import_react7.default.createElement(SectionCard, { title: "Teams" }, /* @__PURE__ */ import_react7.default.createElement(import_Skeleton4.default, { variant: "rounded", height: 120, sx: { mb: 2 } }), /* @__PURE__ */ import_react7.default.createElement(import_Skeleton4.default, { variant: "rounded", height: 120 }));
       }
       if (!teams.length) {
-        return /* @__PURE__ */ import_react6.default.createElement(SectionCard, { title: "Teams" }, /* @__PURE__ */ import_react6.default.createElement(
+        return /* @__PURE__ */ import_react7.default.createElement(SectionCard, { title: "Teams" }, /* @__PURE__ */ import_react7.default.createElement(
           EmptyState,
           {
             message: "You're not a member of any LiteLLM team yet.",
@@ -2440,13 +2869,15 @@ var init_TeamUsage = __esm({
           }
         ));
       }
-      return /* @__PURE__ */ import_react6.default.createElement(SectionCard, { title: "Teams", subtitle: `${teams.length} team${teams.length === 1 ? "" : "s"}` }, /* @__PURE__ */ import_react6.default.createElement(import_Box6.default, { sx: { display: "flex", flexDirection: "column", gap: 2 } }, teams.map((team) => /* @__PURE__ */ import_react6.default.createElement(
+      return /* @__PURE__ */ import_react7.default.createElement(SectionCard, { title: "Teams", subtitle: `${teams.length} team${teams.length === 1 ? "" : "s"}` }, /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { display: "flex", flexDirection: "column", gap: 2 } }, teams.map((team) => /* @__PURE__ */ import_react7.default.createElement(
         TeamCard,
         {
           key: team.team_id,
           team,
           usage: getTeamUsage(team.team_id),
-          usageLoading: getTeamUsageLoading(team.team_id)
+          usageLoading: getTeamUsageLoading(team.team_id),
+          canManage,
+          onEditTeam
         }
       ))));
     };
@@ -2471,43 +2902,43 @@ function fmtTokens(n) {
   if (n >= 1e3) return `${(n / 1e3).toFixed(0)}K`;
   return String(n);
 }
-var import_react7, import_Box7, import_Table4, import_TableBody4, import_TableCell4, import_TableContainer4, import_TableHead4, import_TableRow4, import_Typography7, import_MenuItem3, import_Select, import_FormControl, import_InputLabel, import_ContentCopy, import_Tooltip, import_Snackbar, import_Alert2, import_styles5, ALL_PROXY_MODELS2, ModelsTable;
+var import_react8, import_Box8, import_Table4, import_TableBody4, import_TableCell4, import_TableContainer4, import_TableHead4, import_TableRow4, import_Typography8, import_MenuItem4, import_Select, import_FormControl, import_InputLabel, import_ContentCopy, import_Tooltip, import_Snackbar, import_Alert3, import_styles5, ALL_PROXY_MODELS2, ModelsTable;
 var init_ModelsTable = __esm({
   "src/components/ModelsTable.tsx"() {
     "use strict";
-    import_react7 = __toESM(require("react"));
-    import_Box7 = __toESM(require("@mui/material/Box"));
+    import_react8 = __toESM(require("react"));
+    import_Box8 = __toESM(require("@mui/material/Box"));
     import_Table4 = __toESM(require("@mui/material/Table"));
     import_TableBody4 = __toESM(require("@mui/material/TableBody"));
     import_TableCell4 = __toESM(require("@mui/material/TableCell"));
     import_TableContainer4 = __toESM(require("@mui/material/TableContainer"));
     import_TableHead4 = __toESM(require("@mui/material/TableHead"));
     import_TableRow4 = __toESM(require("@mui/material/TableRow"));
-    import_Typography7 = __toESM(require("@mui/material/Typography"));
-    import_MenuItem3 = __toESM(require("@mui/material/MenuItem"));
+    import_Typography8 = __toESM(require("@mui/material/Typography"));
+    import_MenuItem4 = __toESM(require("@mui/material/MenuItem"));
     import_Select = __toESM(require("@mui/material/Select"));
     import_FormControl = __toESM(require("@mui/material/FormControl"));
     import_InputLabel = __toESM(require("@mui/material/InputLabel"));
     import_ContentCopy = __toESM(require("@mui/icons-material/ContentCopy"));
     import_Tooltip = __toESM(require("@mui/material/Tooltip"));
     import_Snackbar = __toESM(require("@mui/material/Snackbar"));
-    import_Alert2 = __toESM(require("@mui/material/Alert"));
+    import_Alert3 = __toESM(require("@mui/material/Alert"));
     init_ui();
     import_styles5 = require("@mui/material/styles");
     ALL_PROXY_MODELS2 = "all-proxy-models";
     ModelsTable = ({ allModels, teams, loading }) => {
       const theme = (0, import_styles5.useTheme)();
-      const [selectedTeamId, setSelectedTeamId] = (0, import_react7.useState)("");
-      const [copiedSnackbar, setCopiedSnackbar] = (0, import_react7.useState)(false);
-      const selectedTeam = (0, import_react7.useMemo)(
+      const [selectedTeamId, setSelectedTeamId] = (0, import_react8.useState)("");
+      const [copiedSnackbar, setCopiedSnackbar] = (0, import_react8.useState)(false);
+      const selectedTeam = (0, import_react8.useMemo)(
         () => teams.find((t) => t.team_id === selectedTeamId) ?? null,
         [teams, selectedTeamId]
       );
-      const filteredModels = (0, import_react7.useMemo)(() => {
+      const filteredModels = (0, import_react8.useMemo)(() => {
         if (!selectedTeam) return [];
         return allModels.filter((model) => isModelAllowedByTeam2(model, selectedTeam.models));
       }, [allModels, selectedTeam]);
-      const handleCopyModelId = (0, import_react7.useCallback)((modelId) => {
+      const handleCopyModelId = (0, import_react8.useCallback)((modelId) => {
         navigator.clipboard.writeText(modelId).then(() => setCopiedSnackbar(true));
       }, []);
       const modeColor = (mode) => {
@@ -2524,13 +2955,13 @@ var init_ModelsTable = __esm({
             return theme.palette.info.main;
         }
       };
-      return /* @__PURE__ */ import_react7.default.createElement(
+      return /* @__PURE__ */ import_react8.default.createElement(
         SectionCard,
         {
           title: "Available Models",
           subtitle: selectedTeam ? `${filteredModels.length} model${filteredModels.length !== 1 ? "s" : ""} in ${selectedTeam.team_alias ?? selectedTeam.team_id}` : "Select a team to view its models"
         },
-        /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { px: 2.5, pb: 2.5, pt: 1 } }, /* @__PURE__ */ import_react7.default.createElement(import_FormControl.default, { size: "small", sx: { minWidth: 240, mb: 2 } }, /* @__PURE__ */ import_react7.default.createElement(import_InputLabel.default, { id: "team-select-label" }, "Team"), /* @__PURE__ */ import_react7.default.createElement(
+        /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { sx: { px: 2.5, pb: 2.5, pt: 1 } }, /* @__PURE__ */ import_react8.default.createElement(import_FormControl.default, { size: "small", sx: { minWidth: 240, mb: 2 } }, /* @__PURE__ */ import_react8.default.createElement(import_InputLabel.default, { id: "team-select-label" }, "Team"), /* @__PURE__ */ import_react8.default.createElement(
           import_Select.default,
           {
             labelId: "team-select-label",
@@ -2538,25 +2969,25 @@ var init_ModelsTable = __esm({
             label: "Team",
             onChange: (e) => setSelectedTeamId(e.target.value)
           },
-          teams.map((t) => /* @__PURE__ */ import_react7.default.createElement(import_MenuItem3.default, { key: t.team_id, value: t.team_id }, t.team_alias ?? t.team_id))
+          teams.map((t) => /* @__PURE__ */ import_react8.default.createElement(import_MenuItem4.default, { key: t.team_id, value: t.team_id }, t.team_alias ?? t.team_id))
         ))),
-        loading && /* @__PURE__ */ import_react7.default.createElement(EmptyState, { message: "Loading models\u2026" }),
-        !loading && !selectedTeamId && /* @__PURE__ */ import_react7.default.createElement(
+        loading && /* @__PURE__ */ import_react8.default.createElement(EmptyState, { message: "Loading models\u2026" }),
+        !loading && !selectedTeamId && /* @__PURE__ */ import_react8.default.createElement(
           EmptyState,
           {
             message: "Select a team to see available models",
             hint: "Each team may have a different set of models assigned"
           }
         ),
-        !loading && selectedTeamId && filteredModels.length === 0 && /* @__PURE__ */ import_react7.default.createElement(
+        !loading && selectedTeamId && filteredModels.length === 0 && /* @__PURE__ */ import_react8.default.createElement(
           EmptyState,
           {
             message: "No models available for this team",
             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__ */ import_react7.default.createElement(import_TableContainer4.default, null, /* @__PURE__ */ import_react7.default.createElement(import_Table4.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react7.default.createElement(import_TableHead4.default, null, /* @__PURE__ */ import_react7.default.createElement(import_TableRow4.default, null, /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, null, "Model ID"), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, null, "Mode"), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, { align: "right" }, "Input Cost"), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, { align: "right" }, "Output Cost"), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, { align: "right" }, "Max Input"), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, { align: "right" }, "Max Output"), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, null, "Capabilities"))), /* @__PURE__ */ import_react7.default.createElement(import_TableBody4.default, null, filteredModels.map((m) => /* @__PURE__ */ import_react7.default.createElement(import_TableRow4.default, { key: m.model_name, hover: true }, /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, null, /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ import_react7.default.createElement(TagChip, { label: m.model_name, title: m.model_name }), /* @__PURE__ */ import_react7.default.createElement(import_Tooltip.default, { title: "Copy model ID" }, /* @__PURE__ */ import_react7.default.createElement(
-          import_Box7.default,
+        !loading && filteredModels.length > 0 && /* @__PURE__ */ import_react8.default.createElement(import_TableContainer4.default, null, /* @__PURE__ */ import_react8.default.createElement(import_Table4.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react8.default.createElement(import_TableHead4.default, null, /* @__PURE__ */ import_react8.default.createElement(import_TableRow4.default, null, /* @__PURE__ */ import_react8.default.createElement(import_TableCell4.default, null, "Model ID"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell4.default, null, "Mode"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell4.default, { align: "right" }, "Input Cost"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell4.default, { align: "right" }, "Output Cost"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell4.default, { align: "right" }, "Max Input"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell4.default, { align: "right" }, "Max Output"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell4.default, null, "Capabilities"))), /* @__PURE__ */ import_react8.default.createElement(import_TableBody4.default, null, filteredModels.map((m) => /* @__PURE__ */ import_react8.default.createElement(import_TableRow4.default, { key: m.model_name, hover: true }, /* @__PURE__ */ import_react8.default.createElement(import_TableCell4.default, null, /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ import_react8.default.createElement(TagChip, { label: m.model_name, title: m.model_name }), /* @__PURE__ */ import_react8.default.createElement(import_Tooltip.default, { title: "Copy model ID" }, /* @__PURE__ */ import_react8.default.createElement(
+          import_Box8.default,
           {
             component: "span",
             role: "button",
@@ -2566,9 +2997,9 @@ var init_ModelsTable = __esm({
             sx: quietIconButtonSx("accent"),
             style: { cursor: "pointer", display: "inline-flex" }
           },
-          /* @__PURE__ */ import_react7.default.createElement(import_ContentCopy.default, { sx: { fontSize: 14 } })
-        )))), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, null, /* @__PURE__ */ import_react7.default.createElement(
-          import_Box7.default,
+          /* @__PURE__ */ import_react8.default.createElement(import_ContentCopy.default, { sx: { fontSize: 14 } })
+        )))), /* @__PURE__ */ import_react8.default.createElement(import_TableCell4.default, null, /* @__PURE__ */ import_react8.default.createElement(
+          import_Box8.default,
           {
             component: "span",
             sx: {
@@ -2584,8 +3015,8 @@ var init_ModelsTable = __esm({
             }
           },
           m.mode
-        )), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, { align: "right" }, /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.input_cost_per_token))), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, { align: "right" }, /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.output_cost_per_token))), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, { align: "right" }, /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_input_tokens))), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, { align: "right" }, /* @__PURE__ */ import_react7.default.createElement(import_Typography7.default, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_output_tokens))), /* @__PURE__ */ import_react7.default.createElement(import_TableCell4.default, null, /* @__PURE__ */ import_react7.default.createElement(import_Box7.default, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap" } }, m.supports_function_calling && /* @__PURE__ */ import_react7.default.createElement(TagChip, { label: "Fn", title: "Function calling" }), m.supports_vision && /* @__PURE__ */ import_react7.default.createElement(TagChip, { label: "\u{1F441}", title: "Vision" })))))))),
-        /* @__PURE__ */ import_react7.default.createElement(
+        )), /* @__PURE__ */ import_react8.default.createElement(import_TableCell4.default, { align: "right" }, /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.input_cost_per_token))), /* @__PURE__ */ import_react8.default.createElement(import_TableCell4.default, { align: "right" }, /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.output_cost_per_token))), /* @__PURE__ */ import_react8.default.createElement(import_TableCell4.default, { align: "right" }, /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_input_tokens))), /* @__PURE__ */ import_react8.default.createElement(import_TableCell4.default, { align: "right" }, /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_output_tokens))), /* @__PURE__ */ import_react8.default.createElement(import_TableCell4.default, null, /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap" } }, m.supports_function_calling && /* @__PURE__ */ import_react8.default.createElement(TagChip, { label: "Fn", title: "Function calling" }), m.supports_vision && /* @__PURE__ */ import_react8.default.createElement(TagChip, { label: "\u{1F441}", title: "Vision" })))))))),
+        /* @__PURE__ */ import_react8.default.createElement(
           import_Snackbar.default,
           {
             open: copiedSnackbar,
@@ -2593,7 +3024,7 @@ var init_ModelsTable = __esm({
             onClose: () => setCopiedSnackbar(false),
             anchorOrigin: { vertical: "bottom", horizontal: "center" }
           },
-          /* @__PURE__ */ import_react7.default.createElement(import_Alert2.default, { severity: "success", variant: "filled", sx: { fontSize: 13 } }, "Model ID copied to clipboard")
+          /* @__PURE__ */ import_react8.default.createElement(import_Alert3.default, { severity: "success", variant: "filled", sx: { fontSize: 13 } }, "Model ID copied to clipboard")
         )
       );
     };
@@ -2621,10 +3052,10 @@ function formatDateTime(iso) {
 }
 function renderAuditLogBody(loading, entries) {
   if (loading) {
-    return /* @__PURE__ */ import_react8.default.createElement(import_TableRow5.default, null, /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, { colSpan: 6, sx: { py: 2 } }, /* @__PURE__ */ import_react8.default.createElement(import_Skeleton5.default, { variant: "rounded", height: 160 })));
+    return /* @__PURE__ */ import_react9.default.createElement(import_TableRow5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { colSpan: 6, sx: { py: 2 } }, /* @__PURE__ */ import_react9.default.createElement(import_Skeleton5.default, { variant: "rounded", height: 160 })));
   }
   if (entries.length === 0) {
-    return /* @__PURE__ */ import_react8.default.createElement(import_TableRow5.default, null, /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, { colSpan: 6 }, /* @__PURE__ */ import_react8.default.createElement(
+    return /* @__PURE__ */ import_react9.default.createElement(import_TableRow5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { colSpan: 6 }, /* @__PURE__ */ import_react9.default.createElement(
       EmptyState,
       {
         message: "No audit events found",
@@ -2632,15 +3063,15 @@ function renderAuditLogBody(loading, entries) {
       }
     )));
   }
-  return entries.map((entry) => /* @__PURE__ */ import_react8.default.createElement(DetailRow, { key: entry.id, entry }));
+  return entries.map((entry) => /* @__PURE__ */ import_react9.default.createElement(DetailRow, { key: entry.id, entry }));
 }
-var import_react8, import_Box8, import_Typography8, import_Table5, import_TableBody5, import_TableCell5, import_TableContainer5, import_TableHead5, import_TableRow5, import_TablePagination, import_TextField4, import_MenuItem4, import_Skeleton5, import_Collapse2, import_IconButton4, import_Alert3, import_styles6, import_icons_material5, import_react_use, ACTION_TONES, TABLE_LABELS, DetailRow, AuditLog;
+var import_react9, import_Box9, import_Typography9, import_Table5, import_TableBody5, import_TableCell5, import_TableContainer5, import_TableHead5, import_TableRow5, import_TablePagination, import_TextField5, import_MenuItem5, import_Skeleton5, import_Collapse2, import_IconButton5, import_Alert4, import_styles6, import_icons_material6, import_react_use, ACTION_TONES, TABLE_LABELS, DetailRow, AuditLog;
 var init_AuditLog = __esm({
   "src/components/AuditLog.tsx"() {
     "use strict";
-    import_react8 = __toESM(require("react"));
-    import_Box8 = __toESM(require("@mui/material/Box"));
-    import_Typography8 = __toESM(require("@mui/material/Typography"));
+    import_react9 = __toESM(require("react"));
+    import_Box9 = __toESM(require("@mui/material/Box"));
+    import_Typography9 = __toESM(require("@mui/material/Typography"));
     import_Table5 = __toESM(require("@mui/material/Table"));
     import_TableBody5 = __toESM(require("@mui/material/TableBody"));
     import_TableCell5 = __toESM(require("@mui/material/TableCell"));
@@ -2648,14 +3079,14 @@ var init_AuditLog = __esm({
     import_TableHead5 = __toESM(require("@mui/material/TableHead"));
     import_TableRow5 = __toESM(require("@mui/material/TableRow"));
     import_TablePagination = __toESM(require("@mui/material/TablePagination"));
-    import_TextField4 = __toESM(require("@mui/material/TextField"));
-    import_MenuItem4 = __toESM(require("@mui/material/MenuItem"));
+    import_TextField5 = __toESM(require("@mui/material/TextField"));
+    import_MenuItem5 = __toESM(require("@mui/material/MenuItem"));
     import_Skeleton5 = __toESM(require("@mui/material/Skeleton"));
     import_Collapse2 = __toESM(require("@mui/material/Collapse"));
-    import_IconButton4 = __toESM(require("@mui/material/IconButton"));
-    import_Alert3 = __toESM(require("@mui/material/Alert"));
+    import_IconButton5 = __toESM(require("@mui/material/IconButton"));
+    import_Alert4 = __toESM(require("@mui/material/Alert"));
     import_styles6 = require("@mui/material/styles");
-    import_icons_material5 = require("@mui/icons-material");
+    import_icons_material6 = require("@mui/icons-material");
     import_react_use = require("react-use");
     init_ui();
     ACTION_TONES = {
@@ -2668,13 +3099,15 @@ var init_AuditLog = __esm({
     TABLE_LABELS = {
       LiteLLM_VerificationToken: "Key",
       LiteLLM_TeamTable: "Team",
+      LiteLLM_TeamMembership: "Team member",
+      LiteLLM_ObjectPermissionTable: "Team access (KB / MCP)",
       LiteLLM_UserTable: "User"
     };
     DetailRow = ({ entry }) => {
-      const [open, setOpen] = (0, import_react8.useState)(false);
+      const [open, setOpen] = (0, import_react9.useState)(false);
       const hasDetail = entry.before_value || entry.updated_values;
-      return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(import_TableRow5.default, null, /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, { sx: { width: 40, pr: 0 } }, hasDetail && /* @__PURE__ */ import_react8.default.createElement(
-        import_IconButton4.default,
+      return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(import_TableRow5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { sx: { width: 40, pr: 0 } }, hasDetail && /* @__PURE__ */ import_react9.default.createElement(
+        import_IconButton5.default,
         {
           size: "small",
           onClick: () => setOpen((o) => !o),
@@ -2686,9 +3119,9 @@ var init_AuditLog = __esm({
             transition: theme.transitions.create("transform")
           })
         },
-        /* @__PURE__ */ import_react8.default.createElement(import_icons_material5.KeyboardArrowDown, { fontSize: "small" })
-      )), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, { sx: { whiteSpace: "nowrap" } }, /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "body2", color: "text.secondary" }, formatDateTime(entry.updated_at))), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, null, entry.action && /* @__PURE__ */ import_react8.default.createElement(StatusPill, { label: entry.action, tone: actionTone(entry.action) })), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, null, /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { variant: "body2" }, prettyTableName(entry.table_name))), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, null, /* @__PURE__ */ import_react8.default.createElement(
-        import_Typography8.default,
+        /* @__PURE__ */ import_react9.default.createElement(import_icons_material6.KeyboardArrowDown, { fontSize: "small" })
+      )), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { sx: { whiteSpace: "nowrap" } }, /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { variant: "body2", color: "text.secondary" }, formatDateTime(entry.updated_at))), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, entry.action && /* @__PURE__ */ import_react9.default.createElement(StatusPill, { label: entry.action, tone: actionTone(entry.action) })), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { variant: "body2" }, prettyTableName(entry.table_name))), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, /* @__PURE__ */ import_react9.default.createElement(
+        import_Typography9.default,
         {
           variant: "body2",
           component: "code",
@@ -2697,8 +3130,8 @@ 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__ */ import_react8.default.createElement(import_TableCell5.default, null, entry.changed_by ?? "\u2014")), hasDetail && /* @__PURE__ */ import_react8.default.createElement(import_TableRow5.default, { sx: { "&&:hover": { bgcolor: "transparent" } } }, /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, { colSpan: 6, sx: { "&&": { py: 0, border: 0 } } }, /* @__PURE__ */ import_react8.default.createElement(import_Collapse2.default, { in: open, unmountOnExit: true }, /* @__PURE__ */ import_react8.default.createElement(
-        import_Box8.default,
+      )), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, entry.changed_by ?? "\u2014")), hasDetail && /* @__PURE__ */ import_react9.default.createElement(import_TableRow5.default, { sx: { "&&:hover": { bgcolor: "transparent" } } }, /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { colSpan: 6, sx: { "&&": { py: 0, border: 0 } } }, /* @__PURE__ */ import_react9.default.createElement(import_Collapse2.default, { in: open, unmountOnExit: true }, /* @__PURE__ */ import_react9.default.createElement(
+        import_Box9.default,
         {
           display: "flex",
           gap: 2,
@@ -2710,8 +3143,8 @@ var init_AuditLog = __esm({
             bgcolor: (0, import_styles6.alpha)(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.05 : 0.03)
           })
         },
-        entry.before_value && /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { flex: 1, minWidth: 200 }, /* @__PURE__ */ import_react8.default.createElement(
-          import_Typography8.default,
+        entry.before_value && /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { flex: 1, minWidth: 200 }, /* @__PURE__ */ import_react9.default.createElement(
+          import_Typography9.default,
           {
             variant: "caption",
             color: "text.secondary",
@@ -2720,9 +3153,9 @@ var init_AuditLog = __esm({
             sx: { fontSize: 10.5, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase" }
           },
           "Before"
-        ), /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { component: "pre", variant: "caption", sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", whiteSpace: "pre-wrap", wordBreak: "break-all", m: 0 } }, JSON.stringify(entry.before_value, null, 2))),
-        entry.updated_values && /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { flex: 1, minWidth: 200 }, /* @__PURE__ */ import_react8.default.createElement(
-          import_Typography8.default,
+        ), /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { component: "pre", variant: "caption", sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", whiteSpace: "pre-wrap", wordBreak: "break-all", m: 0 } }, JSON.stringify(entry.before_value, null, 2))),
+        entry.updated_values && /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { flex: 1, minWidth: 200 }, /* @__PURE__ */ import_react9.default.createElement(
+          import_Typography9.default,
           {
             variant: "caption",
             color: "text.secondary",
@@ -2731,14 +3164,14 @@ var init_AuditLog = __esm({
             sx: { fontSize: 10.5, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase" }
           },
           "After"
-        ), /* @__PURE__ */ import_react8.default.createElement(import_Typography8.default, { component: "pre", variant: "caption", sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", whiteSpace: "pre-wrap", wordBreak: "break-all", m: 0 } }, JSON.stringify(entry.updated_values, null, 2)))
+        ), /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { component: "pre", variant: "caption", sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", whiteSpace: "pre-wrap", wordBreak: "break-all", m: 0 } }, JSON.stringify(entry.updated_values, null, 2)))
       )))));
     };
     AuditLog = ({ api }) => {
-      const [page, setPage] = (0, import_react8.useState)(0);
-      const [pageSize, setPageSize] = (0, import_react8.useState)(25);
-      const [filters, setFilters] = (0, import_react8.useState)({});
-      const fetchParams = (0, import_react8.useCallback)(
+      const [page, setPage] = (0, import_react9.useState)(0);
+      const [pageSize, setPageSize] = (0, import_react9.useState)(25);
+      const [filters, setFilters] = (0, import_react9.useState)({});
+      const fetchParams = (0, import_react9.useCallback)(
         () => ({ page: page + 1, page_size: pageSize, ...filters }),
         [page, pageSize, filters]
       )();
@@ -2748,14 +3181,14 @@ var init_AuditLog = __esm({
       );
       const entries = value?.audit_logs ?? [];
       const total = value?.total ?? 0;
-      return /* @__PURE__ */ import_react8.default.createElement(
+      return /* @__PURE__ */ import_react9.default.createElement(
         SectionCard,
         {
           title: "Audit Log",
           subtitle: loading ? "Loading\u2026" : `${total.toLocaleString()} event${total === 1 ? "" : "s"}`,
           flush: true,
-          actions: /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
-            import_TextField4.default,
+          actions: /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(
+            import_TextField5.default,
             {
               size: "small",
               label: "Action",
@@ -2767,13 +3200,13 @@ var init_AuditLog = __esm({
               },
               sx: { minWidth: 150 }
             },
-            /* @__PURE__ */ import_react8.default.createElement(import_MenuItem4.default, { value: "" }, "All actions"),
-            /* @__PURE__ */ import_react8.default.createElement(import_MenuItem4.default, { value: "created" }, "Created"),
-            /* @__PURE__ */ import_react8.default.createElement(import_MenuItem4.default, { value: "updated" }, "Updated"),
-            /* @__PURE__ */ import_react8.default.createElement(import_MenuItem4.default, { value: "deleted" }, "Deleted"),
-            /* @__PURE__ */ import_react8.default.createElement(import_MenuItem4.default, { value: "blocked" }, "Blocked")
-          ), /* @__PURE__ */ import_react8.default.createElement(
-            import_TextField4.default,
+            /* @__PURE__ */ import_react9.default.createElement(import_MenuItem5.default, { value: "" }, "All actions"),
+            /* @__PURE__ */ import_react9.default.createElement(import_MenuItem5.default, { value: "created" }, "Created"),
+            /* @__PURE__ */ import_react9.default.createElement(import_MenuItem5.default, { value: "updated" }, "Updated"),
+            /* @__PURE__ */ import_react9.default.createElement(import_MenuItem5.default, { value: "deleted" }, "Deleted"),
+            /* @__PURE__ */ import_react9.default.createElement(import_MenuItem5.default, { value: "blocked" }, "Blocked")
+          ), /* @__PURE__ */ import_react9.default.createElement(
+            import_TextField5.default,
             {
               size: "small",
               label: "Table",
@@ -2785,12 +3218,14 @@ var init_AuditLog = __esm({
               },
               sx: { minWidth: 150 }
             },
-            /* @__PURE__ */ import_react8.default.createElement(import_MenuItem4.default, { value: "" }, "All tables"),
-            /* @__PURE__ */ import_react8.default.createElement(import_MenuItem4.default, { value: "LiteLLM_VerificationToken" }, "Key"),
-            /* @__PURE__ */ import_react8.default.createElement(import_MenuItem4.default, { value: "LiteLLM_TeamTable" }, "Team"),
-            /* @__PURE__ */ import_react8.default.createElement(import_MenuItem4.default, { value: "LiteLLM_UserTable" }, "User")
-          ), /* @__PURE__ */ import_react8.default.createElement(
-            import_TextField4.default,
+            /* @__PURE__ */ import_react9.default.createElement(import_MenuItem5.default, { value: "" }, "All tables"),
+            /* @__PURE__ */ import_react9.default.createElement(import_MenuItem5.default, { value: "LiteLLM_VerificationToken" }, "Key"),
+            /* @__PURE__ */ import_react9.default.createElement(import_MenuItem5.default, { value: "LiteLLM_TeamTable" }, "Team"),
+            /* @__PURE__ */ import_react9.default.createElement(import_MenuItem5.default, { value: "LiteLLM_TeamMembership" }, "Team member"),
+            /* @__PURE__ */ import_react9.default.createElement(import_MenuItem5.default, { value: "LiteLLM_ObjectPermissionTable" }, "Team access (KB / MCP)"),
+            /* @__PURE__ */ import_react9.default.createElement(import_MenuItem5.default, { value: "LiteLLM_UserTable" }, "User")
+          ), /* @__PURE__ */ import_react9.default.createElement(
+            import_TextField5.default,
             {
               size: "small",
               label: "Changed by",
@@ -2803,9 +3238,9 @@ var init_AuditLog = __esm({
             }
           ))
         },
-        error && /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { px: 2.5, pb: 2 }, /* @__PURE__ */ import_react8.default.createElement(import_Alert3.default, { severity: "error" }, error.message)),
-        /* @__PURE__ */ import_react8.default.createElement(import_TableContainer5.default, null, /* @__PURE__ */ import_react8.default.createElement(import_Table5.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react8.default.createElement(import_TableHead5.default, null, /* @__PURE__ */ import_react8.default.createElement(import_TableRow5.default, null, /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, { sx: { width: 40 } }), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, null, "Time"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, null, "Action"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, null, "Table"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, null, "Object ID"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, null, "Changed By"))), /* @__PURE__ */ import_react8.default.createElement(import_TableBody5.default, null, renderAuditLogBody(loading, entries)))),
-        /* @__PURE__ */ import_react8.default.createElement(
+        error && /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { px: 2.5, pb: 2 }, /* @__PURE__ */ import_react9.default.createElement(import_Alert4.default, { severity: "error" }, error.message)),
+        /* @__PURE__ */ import_react9.default.createElement(import_TableContainer5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_Table5.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react9.default.createElement(import_TableHead5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_TableRow5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { sx: { width: 40 } }), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, "Time"), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, "Action"), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, "Table"), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, "Object ID"), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, "Changed By"))), /* @__PURE__ */ import_react9.default.createElement(import_TableBody5.default, null, renderAuditLogBody(loading, entries)))),
+        /* @__PURE__ */ import_react9.default.createElement(
           import_TablePagination.default,
           {
             component: "div",
@@ -2826,6 +3261,35 @@ var init_AuditLog = __esm({
   }
 });
 
+// src/permissions.ts
+var import_plugin_permission_common, litellmTeamCreatePermission, litellmTeamManagePermission, litellmTeamMembersManagePermission, litellmTeamKnowledgebaseManagePermission, litellmTeamMcpManagePermission;
+var init_permissions = __esm({
+  "src/permissions.ts"() {
+    "use strict";
+    import_plugin_permission_common = require("@backstage/plugin-permission-common");
+    litellmTeamCreatePermission = (0, import_plugin_permission_common.createPermission)({
+      name: "litellm.team.create",
+      attributes: { action: "create" }
+    });
+    litellmTeamManagePermission = (0, import_plugin_permission_common.createPermission)({
+      name: "litellm.team.manage",
+      attributes: { action: "update" }
+    });
+    litellmTeamMembersManagePermission = (0, import_plugin_permission_common.createPermission)({
+      name: "litellm.team.members.manage",
+      attributes: { action: "update" }
+    });
+    litellmTeamKnowledgebaseManagePermission = (0, import_plugin_permission_common.createPermission)({
+      name: "litellm.team.knowledgebase.manage",
+      attributes: { action: "update" }
+    });
+    litellmTeamMcpManagePermission = (0, import_plugin_permission_common.createPermission)({
+      name: "litellm.team.mcp.manage",
+      attributes: { action: "update" }
+    });
+  }
+});
+
 // src/components/LiteLLMPage.tsx
 var LiteLLMPage_exports = {};
 __export(LiteLLMPage_exports, {
@@ -2845,45 +3309,50 @@ function initDateRange() {
   else start.setDate(start.getDate() - 7);
   return { start, end };
 }
-var import_react9, import_Box9, import_Snackbar2, import_Alert4, import_CircularProgress4, import_Typography9, import_Paper5, import_Tabs2, import_Tab2, import_react_use2, import_core_plugin_api2, PERIOD_LS_KEY2, LiteLLMPage;
+var import_react10, import_Box10, import_Snackbar2, import_Alert5, import_CircularProgress4, import_Typography10, import_Paper5, import_Tabs2, import_Tab2, import_Button6, import_react_use2, import_core_plugin_api2, import_plugin_permission_react, PERIOD_LS_KEY2, LiteLLMPage;
 var init_LiteLLMPage = __esm({
   "src/components/LiteLLMPage.tsx"() {
     "use strict";
-    import_react9 = __toESM(require("react"));
-    import_Box9 = __toESM(require("@mui/material/Box"));
+    import_react10 = __toESM(require("react"));
+    import_Box10 = __toESM(require("@mui/material/Box"));
     import_Snackbar2 = __toESM(require("@mui/material/Snackbar"));
-    import_Alert4 = __toESM(require("@mui/material/Alert"));
+    import_Alert5 = __toESM(require("@mui/material/Alert"));
     import_CircularProgress4 = __toESM(require("@mui/material/CircularProgress"));
-    import_Typography9 = __toESM(require("@mui/material/Typography"));
+    import_Typography10 = __toESM(require("@mui/material/Typography"));
     import_Paper5 = __toESM(require("@mui/material/Paper"));
     import_Tabs2 = __toESM(require("@mui/material/Tabs"));
     import_Tab2 = __toESM(require("@mui/material/Tab"));
+    import_Button6 = __toESM(require("@mui/material/Button"));
     import_react_use2 = require("react-use");
     import_core_plugin_api2 = require("@backstage/core-plugin-api");
+    import_plugin_permission_react = require("@backstage/plugin-permission-react");
     init_DashboardHeader();
     init_KeysTable();
     init_GenerateKeyDialog();
+    init_ManageTeamDialog();
     init_UsageStats();
     init_TeamUsage();
     init_ModelsTable();
     init_AuditLog();
     init_api();
+    init_permissions();
     PERIOD_LS_KEY2 = "litellm_usage_period";
     LiteLLMPage = () => {
       const api = (0, import_core_plugin_api2.useApi)(liteLlmApiRef);
-      const [dateRange, setDateRange] = (0, import_react9.useState)(initDateRange);
-      const [currentPreset, setCurrentPreset] = (0, import_react9.useState)(() => {
+      const [dateRange, setDateRange] = (0, import_react10.useState)(initDateRange);
+      const [currentPreset, setCurrentPreset] = (0, import_react10.useState)(() => {
         try {
           return localStorage.getItem(PERIOD_LS_KEY2) ?? "7d";
         } catch {
           return "7d";
         }
       });
-      const [activeTab, setActiveTab] = (0, import_react9.useState)("overview");
-      const [snackbar, setSnackbar] = (0, import_react9.useState)(null);
-      const [generateDialogOpen, setGenerateDialogOpen] = (0, import_react9.useState)(false);
-      const [teamUsageCache, setTeamUsageCache] = (0, import_react9.useState)({});
-      const [teamUsageLoading, setTeamUsageLoading] = (0, import_react9.useState)({});
+      const [activeTab, setActiveTab] = (0, import_react10.useState)("overview");
+      const [snackbar, setSnackbar] = (0, import_react10.useState)(null);
+      const [generateDialogOpen, setGenerateDialogOpen] = (0, import_react10.useState)(false);
+      const [manageTeam, setManageTeam] = (0, import_react10.useState)(null);
+      const [teamUsageCache, setTeamUsageCache] = (0, import_react10.useState)({});
+      const [teamUsageLoading, setTeamUsageLoading] = (0, import_react10.useState)({});
       const { value: userInfo, loading: userLoading, error: userError } = (0, import_react_use2.useAsync)(
         () => api.getUserInfo(),
         [api]
@@ -2903,12 +3372,31 @@ var init_LiteLLMPage = __esm({
         () => api.listModels().catch(() => []),
         [api]
       );
-      const { value: allTeams, loading: teamsLoading } = (0, import_react_use2.useAsync)(
+      const { value: allTeams, loading: teamsLoading, retry: refreshTeams } = (0, import_react_use2.useAsyncRetry)(
         () => api.getTeams().catch(() => []),
         [api]
       );
       const { value: liteLlmConfig } = (0, import_react_use2.useAsync)(() => api.getConfig(), [api]);
-      const teams = (0, import_react9.useMemo)(() => {
+      const { value: managedTeams } = (0, import_react_use2.useAsync)(
+        async () => liteLlmConfig?.teamManagement?.enabled ? api.getManagedTeams().catch(() => []) : [],
+        [api, liteLlmConfig]
+      );
+      const { allowed: canCreateTeam } = (0, import_plugin_permission_react.usePermission)({ permission: litellmTeamCreatePermission });
+      const { allowed: canManageTeam } = (0, import_plugin_permission_react.usePermission)({ permission: litellmTeamManagePermission });
+      const { allowed: canManageMembers } = (0, import_plugin_permission_react.usePermission)({ permission: litellmTeamMembersManagePermission });
+      const { allowed: canManageKnowledgeBases } = (0, import_plugin_permission_react.usePermission)({ permission: litellmTeamKnowledgebaseManagePermission });
+      const { allowed: canManageMcpServers } = (0, import_plugin_permission_react.usePermission)({ permission: litellmTeamMcpManagePermission });
+      const teamMgmtEnabled = liteLlmConfig?.teamManagement?.enabled ?? false;
+      const objectPermsEnabled = liteLlmConfig?.teamManagement?.objectPermissionsEnabled ?? false;
+      const { value: vectorStores } = (0, import_react_use2.useAsync)(
+        async () => objectPermsEnabled ? api.getVectorStores().catch(() => []) : [],
+        [api, objectPermsEnabled]
+      );
+      const { value: mcpServers } = (0, import_react_use2.useAsync)(
+        async () => objectPermsEnabled ? api.getMcpServers().catch(() => []) : [],
+        [api, objectPermsEnabled]
+      );
+      const teams = (0, import_react10.useMemo)(() => {
         if (!allTeams?.length) return [];
         if (!userInfo) return allTeams;
         const userId = userInfo.user_id;
@@ -2925,7 +3413,7 @@ var init_LiteLLMPage = __esm({
         const endDate = dateRange.end.toISOString().split("T")[0];
         return api.getUsage(startDate, endDate);
       }, [api, dateRange]);
-      const handleDateRangeChange = (0, import_react9.useCallback)((range, preset) => {
+      const handleDateRangeChange = (0, import_react10.useCallback)((range, preset) => {
         setDateRange(range);
         if (preset) {
           setCurrentPreset(preset);
@@ -2933,7 +3421,7 @@ var init_LiteLLMPage = __esm({
         setTeamUsageCache({});
         setTeamUsageLoading({});
       }, [setDateRange, setCurrentPreset]);
-      const loadTeamUsage = (0, import_react9.useCallback)(async (teamId) => {
+      const loadTeamUsage = (0, import_react10.useCallback)(async (teamId) => {
         if (teamUsageCache[teamId] !== void 0 || teamUsageLoading[teamId]) return;
         setTeamUsageLoading((prev) => ({ ...prev, [teamId]: true }));
         try {
@@ -2947,7 +3435,7 @@ var init_LiteLLMPage = __esm({
           setTeamUsageLoading((prev) => ({ ...prev, [teamId]: false }));
         }
       }, [api, dateRange, teamUsageCache, teamUsageLoading]);
-      const allowedModels = (0, import_react9.useMemo)(() => {
+      const allowedModels = (0, import_react10.useMemo)(() => {
         if (!allModels?.length) return [];
         const userModels = userInfo?.models;
         const teamModels = teams?.flatMap((t) => t.models ?? []);
@@ -2960,7 +3448,7 @@ var init_LiteLLMPage = __esm({
         ]);
         return allModels.filter((m) => allowed.has(m.model_name));
       }, [allModels, userInfo, teams]);
-      const handleGenerateKey = (0, import_react9.useCallback)(
+      const handleGenerateKey = (0, import_react10.useCallback)(
         async (request) => {
           try {
             const response = await api.generateKey(request);
@@ -2974,7 +3462,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleUpdateKey = (0, import_react9.useCallback)(
+      const handleUpdateKey = (0, import_react10.useCallback)(
         async (keyId, request) => {
           try {
             await api.updateKey(keyId, request);
@@ -2987,7 +3475,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleBlockKey = (0, import_react9.useCallback)(
+      const handleBlockKey = (0, import_react10.useCallback)(
         async (keyId) => {
           try {
             await api.blockKey(keyId);
@@ -2999,7 +3487,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleUnblockKey = (0, import_react9.useCallback)(
+      const handleUnblockKey = (0, import_react10.useCallback)(
         async (keyId) => {
           try {
             await api.unblockKey(keyId);
@@ -3011,7 +3499,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleResetKeySpend = (0, import_react9.useCallback)(
+      const handleResetKeySpend = (0, import_react10.useCallback)(
         async (keyId) => {
           try {
             await api.resetKeySpend(keyId);
@@ -3023,7 +3511,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleDeleteKey = (0, import_react9.useCallback)(
+      const handleDeleteKey = (0, import_react10.useCallback)(
         async (keyId) => {
           try {
             await api.deleteKey(keyId);
@@ -3040,7 +3528,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handlePruneExpiredKeys = (0, import_react9.useCallback)(
+      const handlePruneExpiredKeys = (0, import_react10.useCallback)(
         async () => {
           try {
             const result = await api.pruneExpiredKeys();
@@ -3055,14 +3543,14 @@ var init_LiteLLMPage = __esm({
       );
       const isInitialLoading = userLoading && !userInfo;
       if (isInitialLoading) {
-        return /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "50vh" }, /* @__PURE__ */ import_react9.default.createElement(import_CircularProgress4.default, null));
+        return /* @__PURE__ */ import_react10.default.createElement(import_Box10.default, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "50vh" }, /* @__PURE__ */ import_react10.default.createElement(import_CircularProgress4.default, null));
       }
       if (userError || !userInfo) {
         const isProvisioningEnabled = userError?.body?.provisioning === true;
         const hint = userError?.body?.hint;
-        return /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { p: 3 }, /* @__PURE__ */ import_react9.default.createElement(import_Paper5.default, { sx: { p: 3 } }, /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { variant: "h6", gutterBottom: true }, "Account not provisioned"), /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { color: "text.secondary", paragraph: true }, "Your Backstage account is not linked to a LiteLLM user."), hint ? /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { variant: "body2", color: "text.secondary" }, hint) : /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { 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__ */ import_react10.default.createElement(import_Box10.default, { p: 3 }, /* @__PURE__ */ import_react10.default.createElement(import_Paper5.default, { sx: { p: 3 } }, /* @__PURE__ */ import_react10.default.createElement(import_Typography10.default, { variant: "h6", gutterBottom: true }, "Account not provisioned"), /* @__PURE__ */ import_react10.default.createElement(import_Typography10.default, { color: "text.secondary", paragraph: true }, "Your Backstage account is not linked to a LiteLLM user."), hint ? /* @__PURE__ */ import_react10.default.createElement(import_Typography10.default, { variant: "body2", color: "text.secondary" }, hint) : /* @__PURE__ */ import_react10.default.createElement(import_Typography10.default, { 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__ */ import_react9.default.createElement(
+      const pageTabs = /* @__PURE__ */ import_react10.default.createElement(
         import_Tabs2.default,
         {
           value: activeTab,
@@ -3075,13 +3563,13 @@ var init_LiteLLMPage = __esm({
             '& [class*="MuiTab-root"]': { minHeight: 44, textTransform: "none", fontSize: 14 }
           }
         },
-        /* @__PURE__ */ import_react9.default.createElement(import_Tab2.default, { label: "Overview", value: "overview" }),
-        /* @__PURE__ */ import_react9.default.createElement(import_Tab2.default, { label: "Keys", value: "keys" }),
-        /* @__PURE__ */ import_react9.default.createElement(import_Tab2.default, { label: "Teams", value: "teams" }),
-        /* @__PURE__ */ import_react9.default.createElement(import_Tab2.default, { label: "Models", value: "models" }),
-        userInfo.can_view_audit && /* @__PURE__ */ import_react9.default.createElement(import_Tab2.default, { label: "Audit Log", value: "audit" })
+        /* @__PURE__ */ import_react10.default.createElement(import_Tab2.default, { label: "Overview", value: "overview" }),
+        /* @__PURE__ */ import_react10.default.createElement(import_Tab2.default, { label: "Keys", value: "keys" }),
+        /* @__PURE__ */ import_react10.default.createElement(import_Tab2.default, { label: "Teams", value: "teams" }),
+        /* @__PURE__ */ import_react10.default.createElement(import_Tab2.default, { label: "Models", value: "models" }),
+        userInfo.can_view_audit && /* @__PURE__ */ import_react10.default.createElement(import_Tab2.default, { label: "Audit Log", value: "audit" })
       );
-      return /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { sx: { p: 3, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ import_react9.default.createElement(
+      return /* @__PURE__ */ import_react10.default.createElement(import_Box10.default, { sx: { p: 3, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ import_react10.default.createElement(
         DashboardHeader,
         {
           userInfo,
@@ -3091,7 +3579,7 @@ var init_LiteLLMPage = __esm({
           onGenerateKeyClick: () => setGenerateDialogOpen(true),
           tabs: pageTabs
         }
-      ), activeTab === "overview" && /* @__PURE__ */ import_react9.default.createElement(
+      ), activeTab === "overview" && /* @__PURE__ */ import_react10.default.createElement(
         UsageStats,
         {
           usage: usage ?? null,
@@ -3102,7 +3590,7 @@ var init_LiteLLMPage = __esm({
           loading: usageLoading,
           userInfo
         }
-      ), activeTab === "keys" && /* @__PURE__ */ import_react9.default.createElement(
+      ), activeTab === "keys" && /* @__PURE__ */ import_react10.default.createElement(
         KeysTable,
         {
           keys: keys ?? [],
@@ -3116,25 +3604,40 @@ var init_LiteLLMPage = __esm({
           onDeleteKey: handleDeleteKey,
           onPruneExpiredKeys: handlePruneExpiredKeys
         }
-      ), activeTab === "teams" && /* @__PURE__ */ import_react9.default.createElement(
-        TeamUsage,
-        {
-          teams: teams ?? [],
-          loading: teamsLoading,
-          getTeamUsage: (teamId) => {
-            if (teamUsageCache[teamId] === void 0) loadTeamUsage(teamId);
-            return teamUsageCache[teamId] ?? null;
+      ), activeTab === "teams" && (() => {
+        const teamsById = /* @__PURE__ */ new Map();
+        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__ */ import_react10.default.createElement(import_Box10.default, { sx: { display: "flex", flexDirection: "column", gap: 2 } }, teamMgmtEnabled && canCreateTeam && /* @__PURE__ */ import_react10.default.createElement(import_Box10.default, { sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ import_react10.default.createElement(
+          import_Button6.default,
+          {
+            variant: "contained",
+            onClick: () => setManageTeam({ mode: "create" })
           },
-          getTeamUsageLoading: (teamId) => teamUsageLoading[teamId] ?? false
-        }
-      ), activeTab === "models" && /* @__PURE__ */ import_react9.default.createElement(
+          "Create Team"
+        )), /* @__PURE__ */ import_react10.default.createElement(
+          TeamUsage,
+          {
+            teams: visibleTeams,
+            loading: teamsLoading,
+            getTeamUsage: (teamId) => {
+              if (teamUsageCache[teamId] === void 0) loadTeamUsage(teamId);
+              return teamUsageCache[teamId] ?? null;
+            },
+            getTeamUsageLoading: (teamId) => teamUsageLoading[teamId] ?? false,
+            canManage: teamMgmtEnabled && canManageTeam,
+            onEditTeam: (t) => setManageTeam({ mode: "edit", team: t })
+          }
+        ));
+      })(), activeTab === "models" && /* @__PURE__ */ import_react10.default.createElement(
         ModelsTable,
         {
           allModels: allModels ?? [],
           teams: teams ?? [],
           loading: modelsLoading
         }
-      ), activeTab === "audit" && userInfo.can_view_audit && /* @__PURE__ */ import_react9.default.createElement(AuditLog, { api }), /* @__PURE__ */ import_react9.default.createElement(
+      ), activeTab === "audit" && userInfo.can_view_audit && /* @__PURE__ */ import_react10.default.createElement(AuditLog, { api }), /* @__PURE__ */ import_react10.default.createElement(
         GenerateKeyDialog,
         {
           open: generateDialogOpen,
@@ -3147,7 +3650,69 @@ var init_LiteLLMPage = __esm({
           onGenerateKey: handleGenerateKey,
           onGetConfig: () => api.getConfig()
         }
-      ), /* @__PURE__ */ import_react9.default.createElement(
+      ), /* @__PURE__ */ import_react10.default.createElement(
+        ManageTeamDialog,
+        {
+          open: !!manageTeam,
+          onClose: () => setManageTeam(null),
+          mode: manageTeam?.mode ?? "create",
+          team: manageTeam?.team,
+          allModels: allModels ?? [],
+          config: liteLlmConfig,
+          onSubmit: async (payload) => {
+            if (manageTeam?.mode === "edit" && manageTeam.team) {
+              await api.updateTeam(manageTeam.team.team_id, payload);
+            } else {
+              await api.createTeam(payload);
+            }
+            setSnackbar({ message: "Team saved", severity: "success" });
+            refreshTeams();
+          },
+          canManageMembers: teamMgmtEnabled && canManageMembers,
+          onAddMember: async (userEntityRef, maxBudgetInTeam) => {
+            if (!manageTeam?.team) return;
+            const updated = await api.addTeamMember(manageTeam.team.team_id, {
+              userEntityRef,
+              ...maxBudgetInTeam ? { maxBudgetInTeam } : {}
+            });
+            setManageTeam((s) => s && s.team ? { ...s, team: updated } : s);
+            refreshTeams();
+          },
+          onRemoveMember: async (userEntityRef) => {
+            if (!manageTeam?.team) return;
+            const updated = await api.removeTeamMember(
+              manageTeam.team.team_id,
+              userEntityRef
+            );
+            setManageTeam((s) => s && s.team ? { ...s, team: updated } : s);
+            refreshTeams();
+          },
+          canManageKnowledgeBases: teamMgmtEnabled && objectPermsEnabled && canManageKnowledgeBases,
+          vectorStores: vectorStores ?? [],
+          onSaveKnowledgeBases: async (vectorStoreIds) => {
+            if (!manageTeam?.team) return;
+            const updated = await api.setTeamKnowledgeBases(
+              manageTeam.team.team_id,
+              vectorStoreIds
+            );
+            setManageTeam((s) => s && s.team ? { ...s, team: updated } : s);
+            setSnackbar({ message: "Knowledge bases updated", severity: "success" });
+            refreshTeams();
+          },
+          canManageMcpServers: teamMgmtEnabled && objectPermsEnabled && canManageMcpServers,
+          mcpServers: mcpServers ?? [],
+          onSaveMcpServers: async (mcpServerIds) => {
+            if (!manageTeam?.team) return;
+            const updated = await api.setTeamMcpServers(
+              manageTeam.team.team_id,
+              mcpServerIds
+            );
+            setManageTeam((s) => s && s.team ? { ...s, team: updated } : s);
+            setSnackbar({ message: "MCP servers updated", severity: "success" });
+            refreshTeams();
+          }
+        }
+      ), /* @__PURE__ */ import_react10.default.createElement(
         import_Snackbar2.default,
         {
           open: !!snackbar,
@@ -3155,7 +3720,7 @@ var init_LiteLLMPage = __esm({
           onClose: () => setSnackbar(null),
           anchorOrigin: { vertical: "bottom", horizontal: "right" }
         },
-        snackbar ? /* @__PURE__ */ import_react9.default.createElement(import_Alert4.default, { severity: snackbar.severity, onClose: () => setSnackbar(null) }, snackbar.message) : void 0
+        snackbar ? /* @__PURE__ */ import_react10.default.createElement(import_Alert5.default, { severity: snackbar.severity, onClose: () => setSnackbar(null) }, snackbar.message) : void 0
       ));
     };
   }
@@ -3170,16 +3735,22 @@ __export(index_exports, {
   LiteLLMHomeWidget: () => LiteLLMHomeWidget,
   LiteLLMPage: () => LiteLLMPage,
   LiteLlmApi: () => LiteLlmApi,
+  ManageTeamDialog: () => ManageTeamDialog,
   TeamUsage: () => TeamUsage,
   UsageStats: () => UsageStats,
   liteLlmApiRef: () => liteLlmApiRef,
-  litellmPlugin: () => litellmPlugin
+  litellmPlugin: () => litellmPlugin,
+  litellmTeamCreatePermission: () => litellmTeamCreatePermission,
+  litellmTeamKnowledgebaseManagePermission: () => litellmTeamKnowledgebaseManagePermission,
+  litellmTeamManagePermission: () => litellmTeamManagePermission,
+  litellmTeamMcpManagePermission: () => litellmTeamMcpManagePermission,
+  litellmTeamMembersManagePermission: () => litellmTeamMembersManagePermission
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/plugin.tsx
-var import_react10 = __toESM(require("react"));
-var import_icons_material6 = require("@mui/icons-material");
+var import_react11 = __toESM(require("react"));
+var import_icons_material7 = require("@mui/icons-material");
 var import_frontend_plugin_api = require("@backstage/frontend-plugin-api");
 init_api();
 var liteLlmApi = import_frontend_plugin_api.ApiBlueprint.make({
@@ -3193,10 +3764,10 @@ var liteLlmPage = import_frontend_plugin_api.PageBlueprint.make({
   params: {
     path: "/litellm",
     title: "LiteLLM",
-    icon: /* @__PURE__ */ import_react10.default.createElement(import_icons_material6.TrendingUp, null),
+    icon: /* @__PURE__ */ import_react11.default.createElement(import_icons_material7.TrendingUp, null),
     loader: async () => {
       const { LiteLLMPage: LiteLLMPage2 } = await Promise.resolve().then(() => (init_LiteLLMPage(), LiteLLMPage_exports));
-      return /* @__PURE__ */ import_react10.default.createElement(LiteLLMPage2, null);
+      return /* @__PURE__ */ import_react11.default.createElement(LiteLLMPage2, null);
     }
   }
 });
@@ -3213,16 +3784,16 @@ init_UsageStats();
 init_TeamUsage();
 
 // src/components/LiteLLMHomeWidget.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_Paper6 = __toESM(require("@mui/material/Paper"));
-var import_Box10 = __toESM(require("@mui/material/Box"));
-var import_Typography10 = __toESM(require("@mui/material/Typography"));
+var import_Box11 = __toESM(require("@mui/material/Box"));
+var import_Typography11 = __toESM(require("@mui/material/Typography"));
 var import_FormControl2 = __toESM(require("@mui/material/FormControl"));
 var import_Select2 = __toESM(require("@mui/material/Select"));
-var import_MenuItem5 = __toESM(require("@mui/material/MenuItem"));
+var import_MenuItem6 = __toESM(require("@mui/material/MenuItem"));
 var import_Grid2 = __toESM(require("@mui/material/Grid"));
 var import_CircularProgress5 = __toESM(require("@mui/material/CircularProgress"));
-var import_Alert5 = __toESM(require("@mui/material/Alert"));
+var import_Alert6 = __toESM(require("@mui/material/Alert"));
 var import_recharts3 = require("recharts");
 var import_core_plugin_api3 = require("@backstage/core-plugin-api");
 init_api();
@@ -3239,19 +3810,19 @@ function presetToDateRange(preset) {
   }
   return { start, end };
 }
-var Kpi = ({ label, value }) => /* @__PURE__ */ import_react11.default.createElement(import_Box10.default, null, /* @__PURE__ */ import_react11.default.createElement(import_Typography10.default, { variant: "caption", color: "text.secondary", display: "block" }, label), /* @__PURE__ */ import_react11.default.createElement(import_Typography10.default, { variant: "subtitle1", fontWeight: 600 }, value));
+var Kpi = ({ label, value }) => /* @__PURE__ */ import_react12.default.createElement(import_Box11.default, null, /* @__PURE__ */ import_react12.default.createElement(import_Typography11.default, { variant: "caption", color: "text.secondary", display: "block" }, label), /* @__PURE__ */ import_react12.default.createElement(import_Typography11.default, { variant: "subtitle1", fontWeight: 600 }, value));
 var LiteLLMHomeWidget = ({
   defaultPeriod = "7d",
   title = "LiteLLM Usage"
 }) => {
   const api = (0, import_core_plugin_api3.useApi)(liteLlmApiRef);
-  const [period, setPeriod] = (0, import_react11.useState)(defaultPeriod);
-  const [loading, setLoading] = (0, import_react11.useState)(true);
-  const [usageError, setUsageError] = (0, import_react11.useState)(null);
-  const [keysError, setKeysError] = (0, import_react11.useState)(null);
-  const [usage, setUsage] = (0, import_react11.useState)(null);
-  const [keys, setKeys] = (0, import_react11.useState)([]);
-  (0, import_react11.useEffect)(() => {
+  const [period, setPeriod] = (0, import_react12.useState)(defaultPeriod);
+  const [loading, setLoading] = (0, import_react12.useState)(true);
+  const [usageError, setUsageError] = (0, import_react12.useState)(null);
+  const [keysError, setKeysError] = (0, import_react12.useState)(null);
+  const [usage, setUsage] = (0, import_react12.useState)(null);
+  const [keys, setKeys] = (0, import_react12.useState)([]);
+  (0, import_react12.useEffect)(() => {
     let cancelled = false;
     setLoading(true);
     setUsageError(null);
@@ -3288,17 +3859,17 @@ var LiteLLMHomeWidget = ({
     spend: d.spend
   }));
   const hasSparkline = dailyData.length > 0;
-  return /* @__PURE__ */ import_react11.default.createElement(import_Paper6.default, { sx: { p: 2 } }, /* @__PURE__ */ import_react11.default.createElement(import_Box10.default, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1.5 }, /* @__PURE__ */ import_react11.default.createElement(import_Typography10.default, { variant: "h6" }, title), /* @__PURE__ */ import_react11.default.createElement(import_FormControl2.default, { size: "small", sx: { minWidth: 90 } }, /* @__PURE__ */ import_react11.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement(import_Paper6.default, { sx: { p: 2 } }, /* @__PURE__ */ import_react12.default.createElement(import_Box11.default, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1.5 }, /* @__PURE__ */ import_react12.default.createElement(import_Typography11.default, { variant: "h6" }, title), /* @__PURE__ */ import_react12.default.createElement(import_FormControl2.default, { size: "small", sx: { minWidth: 90 } }, /* @__PURE__ */ import_react12.default.createElement(
     import_Select2.default,
     {
       value: period,
       onChange: (e) => setPeriod(e.target.value),
       displayEmpty: true
     },
-    /* @__PURE__ */ import_react11.default.createElement(import_MenuItem5.default, { value: "today" }, "Today"),
-    /* @__PURE__ */ import_react11.default.createElement(import_MenuItem5.default, { value: "7d" }, "7d"),
-    /* @__PURE__ */ import_react11.default.createElement(import_MenuItem5.default, { value: "30d" }, "30d")
-  ))), loading && /* @__PURE__ */ import_react11.default.createElement(import_Box10.default, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ import_react11.default.createElement(import_CircularProgress5.default, { size: 32 })), !loading && totalFailure && /* @__PURE__ */ import_react11.default.createElement(import_Alert5.default, { severity: "error", sx: { mt: 1 } }, usageError ?? "Failed to load usage data"), !loading && !totalFailure && /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, partialFailure && /* @__PURE__ */ import_react11.default.createElement(import_Alert5.default, { severity: "warning", sx: { mt: 1, mb: 1 } }, usageError ? `Usage data unavailable (${usageError}).` : "", keysError ? ` Key list unavailable (${keysError}).` : "", " Showing what loaded."), /* @__PURE__ */ import_react11.default.createElement(import_Grid2.default, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ import_react11.default.createElement(import_Grid2.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react11.default.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ import_react11.default.createElement(import_Grid2.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react11.default.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ import_react11.default.createElement(import_Grid2.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react11.default.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ import_react11.default.createElement(import_Grid2.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react11.default.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ import_react11.default.createElement(import_Box10.default, { height: 120 }, /* @__PURE__ */ import_react11.default.createElement(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react11.default.createElement(import_recharts3.AreaChart, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ import_react11.default.createElement(
+    /* @__PURE__ */ import_react12.default.createElement(import_MenuItem6.default, { value: "today" }, "Today"),
+    /* @__PURE__ */ import_react12.default.createElement(import_MenuItem6.default, { value: "7d" }, "7d"),
+    /* @__PURE__ */ import_react12.default.createElement(import_MenuItem6.default, { value: "30d" }, "30d")
+  ))), loading && /* @__PURE__ */ import_react12.default.createElement(import_Box11.default, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ import_react12.default.createElement(import_CircularProgress5.default, { size: 32 })), !loading && totalFailure && /* @__PURE__ */ import_react12.default.createElement(import_Alert6.default, { severity: "error", sx: { mt: 1 } }, usageError ?? "Failed to load usage data"), !loading && !totalFailure && /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, partialFailure && /* @__PURE__ */ import_react12.default.createElement(import_Alert6.default, { severity: "warning", sx: { mt: 1, mb: 1 } }, usageError ? `Usage data unavailable (${usageError}).` : "", keysError ? ` Key list unavailable (${keysError}).` : "", " Showing what loaded."), /* @__PURE__ */ import_react12.default.createElement(import_Grid2.default, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ import_react12.default.createElement(import_Grid2.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react12.default.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ import_react12.default.createElement(import_Grid2.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react12.default.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ import_react12.default.createElement(import_Grid2.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react12.default.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ import_react12.default.createElement(import_Grid2.default, { item: true, xs: 6 }, /* @__PURE__ */ import_react12.default.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ import_react12.default.createElement(import_Box11.default, { height: 120 }, /* @__PURE__ */ import_react12.default.createElement(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react12.default.createElement(import_recharts3.AreaChart, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ import_react12.default.createElement(
     import_recharts3.Area,
     {
       type: "monotone",
@@ -3314,5 +3885,7 @@ var LiteLLMHomeWidget = ({
 
 // src/index.ts
 init_GenerateKeyDialog();
+init_ManageTeamDialog();
 init_api();
+init_permissions();
 //# sourceMappingURL=index.cjs.js.map