@acarmisc/backstage-plugin-litellm 0.2.0 → 0.2.1

package/dist/index.cjs.js

@@ -0,0 +1,915 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/api.ts
+var import_core_plugin_api, ApiError, liteLlmApiRef, LiteLlmApi;
+var init_api = __esm({
+  "src/api.ts"() {
+    "use strict";
+    import_core_plugin_api = require("@backstage/core-plugin-api");
+    ApiError = class extends Error {
+      constructor(message, status, body) {
+        super(message);
+        this.status = status;
+        this.body = body;
+      }
+    };
+    liteLlmApiRef = (0, import_core_plugin_api.createApiRef)({
+      id: "plugin.litellm.api"
+    });
+    LiteLlmApi = class {
+      constructor(fetchApi, basePath = "/api/litellm") {
+        this.fetchApi = fetchApi;
+        this.basePath = basePath;
+      }
+      async throwIfNotOk(response) {
+        if (!response.ok) {
+          let body;
+          try {
+            body = await response.json();
+          } catch {
+            body = await response.text().catch(() => "");
+          }
+          throw new ApiError(`${response.status} ${response.statusText}`, response.status, body);
+        }
+      }
+      async get(path, params) {
+        const url = new URL(`${this.basePath}${path}`, window.location.origin);
+        if (params) {
+          Object.entries(params).forEach(([key, value]) => url.searchParams.append(key, value));
+        }
+        const response = await this.fetchApi.fetch(url.toString());
+        await this.throwIfNotOk(response);
+        return response.json();
+      }
+      async post(path, body) {
+        const response = await this.fetchApi.fetch(`${this.basePath}${path}`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(body)
+        });
+        await this.throwIfNotOk(response);
+        return response.json();
+      }
+      async del(path) {
+        const response = await this.fetchApi.fetch(`${this.basePath}${path}`, {
+          method: "DELETE",
+          headers: { "Content-Type": "application/json" }
+        });
+        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() {
+        return this.get("/user/info");
+      }
+      async listKeys() {
+        return this.get("/keys");
+      }
+      async generateKey(request) {
+        return this.post("/keys/generate", request);
+      }
+      async updateKey(keyId, request) {
+        return this.post(`/keys/${encodeURIComponent(keyId)}/update`, request);
+      }
+      async deleteKey(keyId) {
+        return this.del(`/keys/${encodeURIComponent(keyId)}`);
+      }
+      async listModels() {
+        return this.get("/models");
+      }
+      async getTeams() {
+        return this.get("/teams");
+      }
+      async getUsage(startDate, endDate) {
+        return this.get("/usage", { start_date: startDate, end_date: endDate });
+      }
+      async getTeamUsage(teamId, startDate, endDate) {
+        return this.get(`/teams/${encodeURIComponent(teamId)}/usage`, {
+          start_date: startDate,
+          end_date: endDate
+        });
+      }
+    };
+  }
+});
+
+// src/components/DashboardHeader.tsx
+var import_react, import_material, import_icons_material, DashboardHeader;
+var init_DashboardHeader = __esm({
+  "src/components/DashboardHeader.tsx"() {
+    "use strict";
+    import_react = __toESM(require("react"));
+    import_material = require("@mui/material");
+    import_icons_material = require("@mui/icons-material");
+    DashboardHeader = ({ userInfo, teams, loading }) => {
+      if (loading) {
+        return /* @__PURE__ */ import_react.default.createElement(import_material.Paper, { sx: { p: 2, mb: 2 } }, /* @__PURE__ */ import_react.default.createElement(import_material.LinearProgress, null));
+      }
+      const displayName = userInfo.user_email ?? userInfo.email ?? userInfo.user_id;
+      const budget = userInfo.max_budget ?? 0;
+      const spend = userInfo.spend ?? userInfo.current_spend ?? 0;
+      const budgetPct = budget > 0 ? Math.min(spend / budget * 100, 100) : 0;
+      const isOver = budget > 0 && spend >= budget;
+      const isNear = budget > 0 && spend >= budget * 0.8 && !isOver;
+      return /* @__PURE__ */ import_react.default.createElement(import_material.Paper, { sx: { p: 2, mb: 2 } }, /* @__PURE__ */ import_react.default.createElement(import_material.Box, { display: "flex", alignItems: "flex-start", gap: 2, flexWrap: "wrap" }, /* @__PURE__ */ import_react.default.createElement(import_material.Box, { flexGrow: 1 }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { variant: "h6" }, displayName), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { variant: "caption", color: "text.secondary" }, userInfo.user_id), teams.length > 0 && /* @__PURE__ */ import_react.default.createElement(import_material.Box, { display: "flex", gap: 0.75, flexWrap: "wrap", mt: 1 }, teams.map((team) => /* @__PURE__ */ import_react.default.createElement(
+        import_material.Chip,
+        {
+          key: team.team_id,
+          label: team.team_alias || team.team_id,
+          size: "small",
+          variant: "outlined",
+          color: "primary"
+        }
+      )))), budget > 0 && /* @__PURE__ */ import_react.default.createElement(import_material.Box, { minWidth: 220 }, /* @__PURE__ */ import_react.default.createElement(import_material.Box, { display: "flex", justifyContent: "space-between", mb: 0.5 }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { variant: "body2" }, "$", spend.toFixed(2), " / $", budget.toFixed(2)), isOver && /* @__PURE__ */ import_react.default.createElement(import_material.Chip, { icon: /* @__PURE__ */ import_react.default.createElement(import_icons_material.Warning, null), label: "Over Budget", size: "small", color: "error" }), isNear && /* @__PURE__ */ import_react.default.createElement(import_material.Chip, { label: "Near Limit", size: "small", color: "warning" })), /* @__PURE__ */ import_react.default.createElement(
+        import_material.LinearProgress,
+        {
+          variant: "determinate",
+          value: budgetPct,
+          color: isOver ? "error" : isNear ? "warning" : "primary",
+          sx: { height: 8, borderRadius: 1 }
+        }
+      ))));
+    };
+  }
+});
+
+// src/components/KeysTable.tsx
+var import_react2, import_material2, import_icons_material2, maskKey, formatDate, emptyForm, keyToEditForm, KeysTable;
+var init_KeysTable = __esm({
+  "src/components/KeysTable.tsx"() {
+    "use strict";
+    import_react2 = __toESM(require("react"));
+    import_material2 = require("@mui/material");
+    import_icons_material2 = require("@mui/icons-material");
+    maskKey = (key) => {
+      if (key.length <= 8) return "***";
+      return `${key.slice(0, 4)}...${key.slice(-4)}`;
+    };
+    formatDate = (dateStr) => {
+      try {
+        return new Date(dateStr).toLocaleDateString();
+      } catch {
+        return dateStr;
+      }
+    };
+    emptyForm = () => ({
+      alias: "",
+      models: [],
+      duration: "30d",
+      max_budget: void 0,
+      tpm_limit: void 0,
+      team_id: void 0,
+      key_type: "llm_api"
+    });
+    keyToEditForm = (k) => ({
+      key_alias: k.key_alias ?? "",
+      models: k.models ?? [],
+      max_budget: k.max_budget,
+      tpm_limit: k.tpm_limit,
+      rpm_limit: k.rpm_limit
+    });
+    KeysTable = ({
+      keys,
+      models,
+      teams,
+      loading,
+      onGenerateKey,
+      onUpdateKey,
+      onDeleteKey
+    }) => {
+      const [generateModalOpen, setGenerateModalOpen] = (0, import_react2.useState)(false);
+      const [showKeyValue, setShowKeyValue] = (0, import_react2.useState)(null);
+      const [newKeyValue, setNewKeyValue] = (0, import_react2.useState)(null);
+      const [formData, setFormData] = (0, import_react2.useState)(emptyForm());
+      const [submitting, setSubmitting] = (0, import_react2.useState)(false);
+      (0, import_react2.useEffect)(() => {
+        if (!generateModalOpen) return;
+        if (!formData.team_id && teams.length > 0) {
+          setFormData((f) => ({ ...f, team_id: teams[0].team_id }));
+        }
+      }, [generateModalOpen, teams, formData.team_id]);
+      const canGenerate = true;
+      const [editingKey, setEditingKey] = (0, import_react2.useState)(null);
+      const [editForm, setEditForm] = (0, import_react2.useState)({});
+      const [editSubmitting, setEditSubmitting] = (0, import_react2.useState)(false);
+      const selectedModels = models.filter((m) => (formData.models || []).includes(m.model_name));
+      const selectedTeam = teams.find((t) => t.team_id === formData.team_id) ?? null;
+      const editSelectedModels = models.filter((m) => (editForm.models || []).includes(m.model_name));
+      const handleGenerate = async () => {
+        setSubmitting(true);
+        try {
+          const response = await onGenerateKey(formData);
+          setNewKeyValue(response.key);
+          setFormData(emptyForm());
+          setTimeout(() => {
+            setGenerateModalOpen(false);
+            setNewKeyValue(null);
+          }, 1500);
+        } catch (error) {
+          console.error("Failed to generate key:", error);
+        } finally {
+          setSubmitting(false);
+        }
+      };
+      const handleCloseModal = () => {
+        setGenerateModalOpen(false);
+        setNewKeyValue(null);
+        setFormData(emptyForm());
+      };
+      const handleOpenEdit = (k) => {
+        setEditingKey(k);
+        setEditForm(keyToEditForm(k));
+      };
+      const handleCloseEdit = () => {
+        setEditingKey(null);
+        setEditForm({});
+      };
+      const handleUpdate = async () => {
+        if (!editingKey) return;
+        setEditSubmitting(true);
+        try {
+          await onUpdateKey(editingKey.key, editForm);
+          handleCloseEdit();
+        } catch (error) {
+          console.error("Failed to update key:", error);
+        } finally {
+          setEditSubmitting(false);
+        }
+      };
+      const copyToClipboard = (text) => {
+        navigator.clipboard.writeText(text);
+      };
+      return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Paper, { sx: { mb: 2 } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", p: 2 }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "h6" }, "Virtual Keys"), /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.Button,
+        {
+          variant: "contained",
+          color: "primary",
+          startIcon: /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.Add, null),
+          onClick: () => setGenerateModalOpen(true)
+        },
+        "Generate New Key"
+      )), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableContainer, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Table, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableHead, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Alias"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Key"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Created"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Spend"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Budget"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "TPM Limit"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "Models"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { align: "right" }, "Actions"))), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableBody, null, loading ? /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { colSpan: 8, align: "center" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.CircularProgress, { size: 24 }))) : keys.length === 0 ? /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { colSpan: 8, align: "center" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { color: "text.secondary" }, "No keys found"))) : keys.map((key) => /* @__PURE__ */ import_react2.default.createElement(import_material2.TableRow, { key: key.key }, /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, key.key_alias || "-"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.Typography,
+        {
+          variant: "body2",
+          component: "code",
+          color: "primary",
+          sx: {
+            fontFamily: "monospace",
+            backgroundColor: "background.default",
+            px: 1,
+            py: 0.5,
+            borderRadius: 1,
+            maxWidth: "250px",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          }
+        },
+        showKeyValue === key.key ? key.key : maskKey(key.key)
+      ), /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.IconButton,
+        {
+          size: "small",
+          onClick: () => setShowKeyValue(showKeyValue === key.key ? null : key.key)
+        },
+        showKeyValue === key.key ? /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.VisibilityOff, null) : /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.Visibility, null)
+      ), /* @__PURE__ */ import_react2.default.createElement(import_material2.IconButton, { size: "small", onClick: () => copyToClipboard(key.key) }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.ContentCopy, { fontSize: "small" })))), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, formatDate(key.created_at)), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, "$", key.spend?.toFixed(4) || "0.00"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, key.max_budget ? `$${key.max_budget}` : "-"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, key.tpm_limit || "-"), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", gap: 0.5, flexWrap: "wrap" }, key.models?.slice(0, 2).map((model) => /* @__PURE__ */ import_react2.default.createElement(import_material2.Chip, { key: model, label: model, size: "small" })), (key.models?.length || 0) > 2 && /* @__PURE__ */ import_react2.default.createElement(import_material2.Chip, { label: `+${(key.models?.length || 0) - 2}`, size: "small", variant: "outlined" }))), /* @__PURE__ */ import_react2.default.createElement(import_material2.TableCell, { align: "right" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.IconButton, { onClick: () => handleOpenEdit(key) }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.Edit, { fontSize: "small" })), /* @__PURE__ */ import_react2.default.createElement(import_material2.IconButton, { color: "error", onClick: () => onDeleteKey(key.key) }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.Delete, null))))))))), /* @__PURE__ */ import_react2.default.createElement(import_material2.Dialog, { open: generateModalOpen, onClose: handleCloseModal, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogTitle, null, newKeyValue ? "Key Generated" : "Generate New Key"), /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogContent, null, newKeyValue ? /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "body2", color: "text.secondary", gutterBottom: true }, "Copy this key now. You won't be able to see it again."), /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.Box,
+        {
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          mt: 2,
+          p: 2,
+          sx: {
+            backgroundColor: "grey.100",
+            borderRadius: 1
+          }
+        },
+        /* @__PURE__ */ import_react2.default.createElement(
+          import_material2.Typography,
+          {
+            component: "code",
+            color: "text.primary",
+            sx: { fontFamily: "monospace", wordBreak: "break-all", flex: 1 }
+          },
+          newKeyValue
+        ),
+        /* @__PURE__ */ import_react2.default.createElement(import_material2.IconButton, { onClick: () => copyToClipboard(newKeyValue) }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material2.ContentCopy, null))
+      )) : /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.TextField,
+        {
+          label: "Alias",
+          value: formData.alias || "",
+          onChange: (e) => setFormData({ ...formData, alias: e.target.value }),
+          fullWidth: true
+        }
+      ), /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.TextField,
+        {
+          select: true,
+          label: "Duration",
+          value: formData.duration || "30d",
+          onChange: (e) => setFormData({ ...formData, duration: e.target.value }),
+          fullWidth: true
+        },
+        /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { value: "1d" }, "1 Day"),
+        /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { value: "7d" }, "7 Days"),
+        /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { value: "30d" }, "30 Days"),
+        /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { value: "90d" }, "90 Days"),
+        /* @__PURE__ */ import_react2.default.createElement(import_material2.MenuItem, { value: "1y" }, "1 Year")
+      ), teams.length > 0 && /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.Autocomplete,
+        {
+          options: teams,
+          getOptionLabel: (t) => t.team_alias || t.team_id,
+          value: selectedTeam,
+          onChange: (_e, team) => setFormData({ ...formData, team_id: team?.team_id }),
+          renderInput: (params) => /* @__PURE__ */ import_react2.default.createElement(
+            import_material2.TextField,
+            {
+              ...params,
+              label: "Team",
+              helperText: "Optional: bind this key to a specific team for scoped access",
+              fullWidth: true
+            }
+          )
+        }
+      ), models.length > 0 && /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.Autocomplete,
+        {
+          multiple: true,
+          options: models,
+          groupBy: (m) => m.mode || "other",
+          getOptionLabel: (m) => m.model_name,
+          value: selectedModels,
+          onChange: (_e, selected) => setFormData({ ...formData, models: selected.map((m) => m.model_name) }),
+          renderOption: (props, m) => /* @__PURE__ */ import_react2.default.createElement("li", { ...props }, m.model_name, m.supports_function_calling && " \u{1F527}", m.supports_vision && " \u{1F441}\uFE0F"),
+          renderInput: (params) => /* @__PURE__ */ import_react2.default.createElement(import_material2.TextField, { ...params, label: "Models", fullWidth: true })
+        }
+      ), /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.TextField,
+        {
+          label: "Max Budget (USD)",
+          type: "number",
+          value: formData.max_budget ?? "",
+          onChange: (e) => setFormData({ ...formData, max_budget: e.target.value ? Number(e.target.value) : void 0 }),
+          fullWidth: true
+        }
+      ), /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.TextField,
+        {
+          label: "TPM Limit",
+          type: "number",
+          value: formData.tpm_limit ?? "",
+          onChange: (e) => setFormData({ ...formData, tpm_limit: e.target.value ? Number(e.target.value) : void 0 }),
+          fullWidth: true
+        }
+      ))), /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogActions, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Button, { onClick: handleCloseModal }, newKeyValue ? "Done" : "Cancel"), !newKeyValue && /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.Button,
+        {
+          onClick: handleGenerate,
+          variant: "contained",
+          color: "primary",
+          disabled: submitting || !canGenerate
+        },
+        submitting ? /* @__PURE__ */ import_react2.default.createElement(import_material2.CircularProgress, { size: 24 }) : "Generate"
+      ), newKeyValue && /* @__PURE__ */ import_react2.default.createElement(import_material2.Button, { onClick: handleCloseModal, variant: "contained", color: "success" }, "Done"))), /* @__PURE__ */ import_react2.default.createElement(import_material2.Dialog, { open: !!editingKey, onClose: handleCloseEdit, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogTitle, null, "Edit Key"), /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogContent, null, editingKey && /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "body2", color: "text.secondary" }, /* @__PURE__ */ import_react2.default.createElement("code", { style: { fontFamily: "monospace", color: "inherit" } }, maskKey(editingKey.key))), /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.TextField,
+        {
+          label: "Alias",
+          value: editForm.key_alias || "",
+          onChange: (e) => setEditForm({ ...editForm, key_alias: e.target.value }),
+          fullWidth: true
+        }
+      ), models.length > 0 && /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.Autocomplete,
+        {
+          multiple: true,
+          options: models,
+          groupBy: (m) => m.mode || "other",
+          getOptionLabel: (m) => m.model_name,
+          value: editSelectedModels,
+          onChange: (_e, selected) => setEditForm({ ...editForm, models: selected.map((m) => m.model_name) }),
+          renderInput: (params) => /* @__PURE__ */ import_react2.default.createElement(import_material2.TextField, { ...params, label: "Models", fullWidth: true })
+        }
+      ), /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.TextField,
+        {
+          label: "Max Budget (USD)",
+          type: "number",
+          value: editForm.max_budget ?? "",
+          onChange: (e) => setEditForm({ ...editForm, max_budget: e.target.value ? Number(e.target.value) : void 0 }),
+          fullWidth: true
+        }
+      ), /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.TextField,
+        {
+          label: "TPM Limit",
+          type: "number",
+          value: editForm.tpm_limit ?? "",
+          onChange: (e) => setEditForm({ ...editForm, tpm_limit: e.target.value ? Number(e.target.value) : void 0 }),
+          fullWidth: true
+        }
+      ), /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.TextField,
+        {
+          label: "RPM Limit",
+          type: "number",
+          value: editForm.rpm_limit ?? "",
+          onChange: (e) => setEditForm({ ...editForm, rpm_limit: e.target.value ? Number(e.target.value) : void 0 }),
+          fullWidth: true
+        }
+      ))), /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogActions, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Button, { onClick: handleCloseEdit }, "Cancel"), /* @__PURE__ */ import_react2.default.createElement(import_material2.Button, { onClick: handleUpdate, variant: "contained", color: "primary", disabled: editSubmitting }, editSubmitting ? /* @__PURE__ */ import_react2.default.createElement(import_material2.CircularProgress, { size: 24 }) : "Save"))));
+    };
+  }
+});
+
+// src/components/UsageStats.tsx
+var import_react3, import_material3, import_recharts, fmtUsd, fmtInt, fmtPct, KpiCard, UsageStats;
+var init_UsageStats = __esm({
+  "src/components/UsageStats.tsx"() {
+    "use strict";
+    import_react3 = __toESM(require("react"));
+    import_material3 = require("@mui/material");
+    import_recharts = require("recharts");
+    fmtUsd = (n) => `$${(n ?? 0).toFixed(n < 1 ? 4 : 2)}`;
+    fmtInt = (n) => (n ?? 0).toLocaleString();
+    fmtPct = (n) => `${(n * 100).toFixed(1)}%`;
+    KpiCard = ({ label, value, hint }) => /* @__PURE__ */ import_react3.default.createElement(import_material3.Paper, { variant: "outlined", sx: { p: 2, height: "100%" } }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { variant: "h5", sx: { mt: 0.5 } }, value), hint ? /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { variant: "caption", color: "text.secondary" }, hint) : null);
+    UsageStats = ({
+      usage,
+      models,
+      dateRange,
+      onDateRangeChange,
+      loading
+    }) => {
+      const [selectedModel, setSelectedModel] = (0, import_react3.useState)("all");
+      const [tab, setTab] = (0, import_react3.useState)("costs");
+      const selectedPreset = (0, import_react3.useMemo)(() => {
+        const start = dateRange.start;
+        const end = dateRange.end;
+        if (start.toDateString() === end.toDateString()) return "today";
+        const diffMs = end.getTime() - start.getTime();
+        const diffDays = Math.ceil(diffMs / (1e3 * 60 * 60 * 24));
+        if (diffDays <= 7) return "7d";
+        return "30d";
+      }, [dateRange]);
+      const handlePresetChange = (preset) => {
+        const end = /* @__PURE__ */ new Date();
+        const start = /* @__PURE__ */ new Date();
+        if (preset === "today") start.setHours(0, 0, 0, 0);
+        else if (preset === "7d") start.setDate(start.getDate() - 7);
+        else if (preset === "30d") start.setDate(start.getDate() - 30);
+        onDateRangeChange({ start, end });
+      };
+      const todayRows = (0, import_react3.useMemo)(() => {
+        const rows = usage?.daily_by_model ?? [];
+        if (rows.length === 0) return [];
+        const latestDate = rows.map((r) => r.date).sort().slice(-1)[0];
+        return rows.filter((r) => r.date === latestDate).map((r) => ({
+          model: r.model,
+          promptTokens: r.prompt_tokens,
+          completionTokens: r.completion_tokens
+        })).filter((r) => r.promptTokens + r.completionTokens > 0).sort((a, b) => b.promptTokens + b.completionTokens - (a.promptTokens + a.completionTokens));
+      }, [usage]);
+      const todayLabel = (0, import_react3.useMemo)(() => {
+        const rows = usage?.daily_by_model ?? [];
+        if (rows.length === 0) return null;
+        return rows.map((r) => r.date).sort().slice(-1)[0];
+      }, [usage]);
+      const dailyData = (0, import_react3.useMemo)(
+        () => (usage?.daily_usage ?? []).map((d) => ({
+          date: d.date,
+          spend: d.spend,
+          promptTokens: d.prompt_tokens,
+          completionTokens: d.completion_tokens,
+          totalTokens: d.total_tokens,
+          apiRequests: d.api_requests,
+          successfulRequests: d.successful_requests,
+          failedRequests: d.failed_requests
+        })),
+        [usage]
+      );
+      const modelRows = (0, import_react3.useMemo)(() => {
+        const entries = Object.entries(usage?.usage_by_model ?? {}).map(([model, d]) => ({
+          model,
+          spend: d.total_spend,
+          promptTokens: d.prompt_tokens,
+          completionTokens: d.completion_tokens,
+          totalTokens: d.total_tokens,
+          apiRequests: d.api_requests,
+          successfulRequests: d.successful_requests,
+          failedRequests: d.failed_requests,
+          successRate: d.api_requests > 0 ? d.successful_requests / d.api_requests : 0
+        }));
+        return selectedModel === "all" ? entries : entries.filter((e) => e.model === selectedModel);
+      }, [usage, selectedModel]);
+      const keyRows = (0, import_react3.useMemo)(
+        () => Object.entries(usage?.usage_by_key ?? {}).map(([keyHash, d]) => ({
+          keyHash,
+          keyAlias: d.key_alias ?? keyHash.slice(0, 8),
+          teamId: d.team_id ?? null,
+          models: d.models,
+          spend: d.total_spend,
+          totalTokens: d.total_tokens,
+          promptTokens: d.prompt_tokens,
+          completionTokens: d.completion_tokens,
+          apiRequests: d.api_requests,
+          successfulRequests: d.successful_requests,
+          failedRequests: d.failed_requests,
+          successRate: d.api_requests > 0 ? d.successful_requests / d.api_requests : 0
+        })),
+        [usage]
+      );
+      const totalRequests = usage?.api_requests ?? 0;
+      const overallSuccessRate = totalRequests > 0 ? (usage?.successful_requests ?? 0) / totalRequests : 0;
+      if (loading) {
+        return /* @__PURE__ */ import_react3.default.createElement(import_material3.Paper, { sx: { p: 2 } }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Box, { display: "flex", justifyContent: "center", p: 4 }, /* @__PURE__ */ import_react3.default.createElement(import_material3.CircularProgress, null)));
+      }
+      return /* @__PURE__ */ import_react3.default.createElement(import_material3.Paper, { sx: { p: 2 } }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, flexWrap: "wrap", gap: 2 }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { variant: "h6" }, "Usage Analytics"), /* @__PURE__ */ import_react3.default.createElement(import_material3.Box, { display: "flex", gap: 2, alignItems: "center", flexWrap: "wrap" }, /* @__PURE__ */ import_react3.default.createElement(import_material3.FormControl, { size: "small", sx: { minWidth: 140 } }, /* @__PURE__ */ import_react3.default.createElement(import_material3.InputLabel, null, "Period"), /* @__PURE__ */ import_react3.default.createElement(
+        import_material3.Select,
+        {
+          value: selectedPreset,
+          label: "Period",
+          onChange: (e) => handlePresetChange(e.target.value)
+        },
+        /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: "today" }, "Today"),
+        /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: "7d" }, "Last 7 days"),
+        /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: "30d" }, "Last 30 days")
+      )), tab === "models" && /* @__PURE__ */ import_react3.default.createElement(import_material3.FormControl, { size: "small", sx: { minWidth: 180 } }, /* @__PURE__ */ import_react3.default.createElement(import_material3.InputLabel, null, "Model"), /* @__PURE__ */ import_react3.default.createElement(
+        import_material3.Select,
+        {
+          value: selectedModel,
+          label: "Model",
+          onChange: (e) => setSelectedModel(e.target.value)
+        },
+        /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { value: "all" }, "All Models"),
+        models.map((m) => /* @__PURE__ */ import_react3.default.createElement(import_material3.MenuItem, { key: m.model_name, value: m.model_name }, m.model_name))
+      )))), /* @__PURE__ */ import_react3.default.createElement(import_material3.Grid, { container: true, spacing: 2, sx: { mb: 2 } }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Grid, { item: true, xs: 6, sm: 3 }, /* @__PURE__ */ import_react3.default.createElement(KpiCard, { label: "Total Spend", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ import_react3.default.createElement(import_material3.Grid, { item: true, xs: 6, sm: 3 }, /* @__PURE__ */ import_react3.default.createElement(KpiCard, { label: "Total Requests", value: fmtInt(totalRequests), hint: `${fmtInt(usage?.failed_requests ?? 0)} failed` })), /* @__PURE__ */ import_react3.default.createElement(import_material3.Grid, { item: true, xs: 6, sm: 3 }, /* @__PURE__ */ import_react3.default.createElement(KpiCard, { label: "Success Rate", value: totalRequests > 0 ? fmtPct(overallSuccessRate) : "\u2014" })), /* @__PURE__ */ import_react3.default.createElement(import_material3.Grid, { item: true, xs: 6, sm: 3 }, /* @__PURE__ */ import_react3.default.createElement(
+        KpiCard,
+        {
+          label: "Total Tokens",
+          value: fmtInt(usage?.total_tokens ?? 0),
+          hint: `${fmtInt(usage?.prompt_tokens ?? 0)} in \xB7 ${fmtInt(usage?.completion_tokens ?? 0)} out`
+        }
+      ))), /* @__PURE__ */ import_react3.default.createElement(import_material3.Tabs, { value: tab, onChange: (_, v) => setTab(v), sx: { mb: 2 } }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Tab, { value: "costs", label: "Costs" }), /* @__PURE__ */ import_react3.default.createElement(import_material3.Tab, { value: "models", label: "Model Activity" }), /* @__PURE__ */ import_react3.default.createElement(import_material3.Tab, { value: "keys", label: "Key Activity" })), tab === "costs" && /* @__PURE__ */ import_react3.default.createElement(import_material3.Grid, { container: true, spacing: 3 }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Daily Spend"), /* @__PURE__ */ import_react3.default.createElement(import_material3.Box, { height: 260 }, /* @__PURE__ */ import_react3.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react3.default.createElement(import_recharts.AreaChart, { data: dailyData }, /* @__PURE__ */ import_react3.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ import_react3.default.createElement(import_recharts.XAxis, { dataKey: "date", tick: { fontSize: 12 } }), /* @__PURE__ */ import_react3.default.createElement(import_recharts.YAxis, { tick: { fontSize: 12 }, tickFormatter: (v) => `$${v.toFixed(2)}` }), /* @__PURE__ */ import_react3.default.createElement(import_recharts.Tooltip, { formatter: (value) => [`$${value.toFixed(4)}`, "Spend"] }), /* @__PURE__ */ import_react3.default.createElement(import_recharts.Area, { type: "monotone", dataKey: "spend", stroke: "#8884d8", fill: "#8884d8", fillOpacity: 0.3 }))))), /* @__PURE__ */ import_react3.default.createElement(import_material3.Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Daily Requests"), /* @__PURE__ */ import_react3.default.createElement(import_material3.Box, { height: 260 }, /* @__PURE__ */ import_react3.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react3.default.createElement(import_recharts.BarChart, { data: dailyData }, /* @__PURE__ */ import_react3.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ import_react3.default.createElement(import_recharts.XAxis, { dataKey: "date", tick: { fontSize: 12 } }), /* @__PURE__ */ import_react3.default.createElement(import_recharts.YAxis, { tick: { fontSize: 12 } }), /* @__PURE__ */ import_react3.default.createElement(import_recharts.Tooltip, null), /* @__PURE__ */ import_react3.default.createElement(import_recharts.Legend, null), /* @__PURE__ */ import_react3.default.createElement(import_recharts.Bar, { dataKey: "successfulRequests", name: "Successful", fill: "#82ca9d", stackId: "r" }), /* @__PURE__ */ import_react3.default.createElement(import_recharts.Bar, { dataKey: "failedRequests", name: "Failed", fill: "#e57373", stackId: "r" }))))), /* @__PURE__ */ import_react3.default.createElement(import_material3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, todayLabel ? `Tokens In / Out by Model \u2014 ${todayLabel}` : "Tokens In / Out by Model \u2014 Today"), /* @__PURE__ */ import_react3.default.createElement(import_material3.Box, { height: 300 }, todayRows.length === 0 ? /* @__PURE__ */ import_react3.default.createElement(import_material3.Box, { display: "flex", alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { color: "text.secondary" }, "No token activity for the latest day")) : /* @__PURE__ */ import_react3.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react3.default.createElement(import_recharts.BarChart, { data: todayRows, layout: "vertical", margin: { left: 60 } }, /* @__PURE__ */ import_react3.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ import_react3.default.createElement(import_recharts.XAxis, { type: "number", tick: { fontSize: 12 }, tickFormatter: fmtInt }), /* @__PURE__ */ import_react3.default.createElement(import_recharts.YAxis, { type: "category", dataKey: "model", tick: { fontSize: 11 }, width: 180 }), /* @__PURE__ */ import_react3.default.createElement(import_recharts.Tooltip, { formatter: (value) => fmtInt(value) }), /* @__PURE__ */ import_react3.default.createElement(import_recharts.Legend, null), /* @__PURE__ */ import_react3.default.createElement(import_recharts.Bar, { dataKey: "promptTokens", name: "Input (prompt)", fill: "#8884d8", stackId: "io" }), /* @__PURE__ */ import_react3.default.createElement(import_recharts.Bar, { dataKey: "completionTokens", name: "Output (completion)", fill: "#82ca9d", stackId: "io" })))))), tab === "models" && /* @__PURE__ */ import_react3.default.createElement(import_material3.Grid, { container: true, spacing: 3 }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Tokens by Model"), /* @__PURE__ */ import_react3.default.createElement(import_material3.Box, { height: 260 }, /* @__PURE__ */ import_react3.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react3.default.createElement(import_recharts.BarChart, { data: modelRows }, /* @__PURE__ */ import_react3.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ import_react3.default.createElement(import_recharts.XAxis, { dataKey: "model", tick: { fontSize: 10 }, interval: 0, angle: -15, textAnchor: "end", height: 60 }), /* @__PURE__ */ import_react3.default.createElement(import_recharts.YAxis, { tick: { fontSize: 12 } }), /* @__PURE__ */ import_react3.default.createElement(import_recharts.Tooltip, null), /* @__PURE__ */ import_react3.default.createElement(import_recharts.Legend, null), /* @__PURE__ */ import_react3.default.createElement(import_recharts.Bar, { dataKey: "promptTokens", name: "Prompt", fill: "#8884d8", stackId: "t" }), /* @__PURE__ */ import_react3.default.createElement(import_recharts.Bar, { dataKey: "completionTokens", name: "Completion", fill: "#82ca9d", stackId: "t" }))))), /* @__PURE__ */ import_react3.default.createElement(import_material3.Grid, { item: true, xs: 12 }, /* @__PURE__ */ import_react3.default.createElement(import_material3.TableContainer, { component: import_material3.Paper, variant: "outlined" }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Table, { size: "small" }, /* @__PURE__ */ import_react3.default.createElement(import_material3.TableHead, null, /* @__PURE__ */ import_react3.default.createElement(import_material3.TableRow, null, /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, null, "Model"), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, "Spend"), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, "Requests"), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, "Success"), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, "Failed"), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, "Prompt"), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, "Completion"), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { sx: { minWidth: 120 } }, "Success rate"))), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableBody, null, modelRows.length === 0 ? /* @__PURE__ */ import_react3.default.createElement(import_material3.TableRow, null, /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { colSpan: 8, align: "center" }, "No model activity")) : modelRows.sort((a, b) => b.spend - a.spend || b.totalTokens - a.totalTokens).map((r) => /* @__PURE__ */ import_react3.default.createElement(import_material3.TableRow, { key: r.model }, /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, null, r.model), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, fmtUsd(r.spend)), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, fmtInt(r.apiRequests)), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, fmtInt(r.successfulRequests)), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, fmtInt(r.failedRequests)), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, fmtInt(r.promptTokens)), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, fmtInt(r.completionTokens)), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, null, r.apiRequests > 0 ? /* @__PURE__ */ import_react3.default.createElement(import_material3.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react3.default.createElement(
+        import_material3.LinearProgress,
+        {
+          variant: "determinate",
+          value: r.successRate * 100,
+          sx: { flex: 1, height: 6, borderRadius: 3 }
+        }
+      ), /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { variant: "caption" }, fmtPct(r.successRate))) : "\u2014")))))))), tab === "keys" && /* @__PURE__ */ import_react3.default.createElement(import_material3.TableContainer, { component: import_material3.Paper, variant: "outlined" }, /* @__PURE__ */ import_react3.default.createElement(import_material3.Table, { size: "small" }, /* @__PURE__ */ import_react3.default.createElement(import_material3.TableHead, null, /* @__PURE__ */ import_react3.default.createElement(import_material3.TableRow, null, /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, null, "Key"), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, null, "Models"), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, "Spend"), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, "Requests"), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, "Tokens"), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, "Failed"), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { sx: { minWidth: 120 } }, "Success rate"))), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableBody, null, keyRows.length === 0 ? /* @__PURE__ */ import_react3.default.createElement(import_material3.TableRow, null, /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { colSpan: 7, align: "center" }, "No key activity")) : keyRows.sort((a, b) => b.spend - a.spend || b.apiRequests - a.apiRequests).map((r) => /* @__PURE__ */ import_react3.default.createElement(import_material3.TableRow, { key: r.keyHash }, /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, null, /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { variant: "body2" }, r.keyAlias), r.teamId ? /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { variant: "caption", color: "text.secondary" }, "team: ", r.teamId) : null), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, null, /* @__PURE__ */ import_react3.default.createElement(import_material3.Box, { display: "flex", gap: 0.5, flexWrap: "wrap" }, r.models.map((m) => /* @__PURE__ */ import_react3.default.createElement(import_material3.Chip, { key: m, label: m, size: "small", variant: "outlined" })))), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, fmtUsd(r.spend)), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, fmtInt(r.apiRequests)), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, fmtInt(r.totalTokens)), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, { align: "right" }, fmtInt(r.failedRequests)), /* @__PURE__ */ import_react3.default.createElement(import_material3.TableCell, null, r.apiRequests > 0 ? /* @__PURE__ */ import_react3.default.createElement(import_material3.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react3.default.createElement(
+        import_material3.LinearProgress,
+        {
+          variant: "determinate",
+          value: r.successRate * 100,
+          sx: { flex: 1, height: 6, borderRadius: 3 }
+        }
+      ), /* @__PURE__ */ import_react3.default.createElement(import_material3.Typography, { variant: "caption" }, fmtPct(r.successRate))) : "\u2014")))))));
+    };
+  }
+});
+
+// src/components/TeamUsage.tsx
+var import_react4, import_material4, import_icons_material3, import_recharts2, TeamCard, TeamUsage;
+var init_TeamUsage = __esm({
+  "src/components/TeamUsage.tsx"() {
+    "use strict";
+    import_react4 = __toESM(require("react"));
+    import_material4 = require("@mui/material");
+    import_icons_material3 = require("@mui/icons-material");
+    import_recharts2 = require("recharts");
+    TeamCard = ({ team, usage, usageLoading }) => {
+      const [expanded, setExpanded] = (0, import_react4.useState)(false);
+      const budget = team.max_budget ?? 0;
+      const spend = team.spend ?? 0;
+      const budgetPct = budget > 0 ? Math.min(spend / budget * 100, 100) : 0;
+      const isOver = budget > 0 && spend >= budget;
+      const isNear = budget > 0 && spend >= budget * 0.8 && !isOver;
+      const dailyData = usage?.daily_usage?.map((d) => ({ date: d.date, spend: d.spend })) ?? [];
+      return /* @__PURE__ */ import_react4.default.createElement(import_material4.Paper, { variant: "outlined", sx: { p: 2, mb: 2 } }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react4.default.createElement(import_icons_material3.Group, { color: "action" }), /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { flexGrow: 1 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle1", fontWeight: 600 }, team.team_alias ?? team.team_id), team.models?.length ? /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", gap: 0.5, flexWrap: "wrap", mt: 0.5 }, team.models.map((m) => /* @__PURE__ */ import_react4.default.createElement(import_material4.Chip, { key: m, label: m, size: "small", variant: "outlined" }))) : /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "caption", color: "text.secondary" }, "All models")), /* @__PURE__ */ import_react4.default.createElement(import_material4.IconButton, { size: "small", onClick: () => setExpanded((e) => !e) }, expanded ? /* @__PURE__ */ import_react4.default.createElement(import_icons_material3.ExpandLess, null) : /* @__PURE__ */ import_react4.default.createElement(import_icons_material3.ExpandMore, null))), budget > 0 && /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { mt: 1.5 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", justifyContent: "space-between", mb: 0.5 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "body2" }, "$", spend.toFixed(2), " / $", budget.toFixed(2)), isOver && /* @__PURE__ */ import_react4.default.createElement(import_material4.Chip, { label: "Over Budget", size: "small", color: "error" }), isNear && /* @__PURE__ */ import_react4.default.createElement(import_material4.Chip, { label: "Near Limit", size: "small", color: "warning" })), /* @__PURE__ */ import_react4.default.createElement(
+        import_material4.LinearProgress,
+        {
+          variant: "determinate",
+          value: budgetPct,
+          color: isOver ? "error" : isNear ? "warning" : "primary",
+          sx: { height: 6, borderRadius: 1 }
+        }
+      )), /* @__PURE__ */ import_react4.default.createElement(import_material4.Collapse, { in: expanded }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { mt: 2 }, usageLoading ? /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", justifyContent: "center", p: 2 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.CircularProgress, { size: 24 })) : dailyData.length > 0 ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Daily Spend"), /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { height: 160 }, /* @__PURE__ */ import_react4.default.createElement(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts2.AreaChart, { data: dailyData }, /* @__PURE__ */ import_react4.default.createElement(import_recharts2.CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ import_react4.default.createElement(import_recharts2.XAxis, { dataKey: "date", tick: { fontSize: 11 } }), /* @__PURE__ */ import_react4.default.createElement(import_recharts2.YAxis, { tick: { fontSize: 11 }, tickFormatter: (v) => `$${v.toFixed(2)}` }), /* @__PURE__ */ import_react4.default.createElement(import_recharts2.Tooltip, { formatter: (v) => [`$${v.toFixed(4)}`, "Spend"] }), /* @__PURE__ */ import_react4.default.createElement(import_recharts2.Area, { type: "monotone", dataKey: "spend", stroke: "#8884d8", fill: "#8884d8", fillOpacity: 0.3 }))))) : null, team.members_with_roles?.length ? /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { mt: 2 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Members"), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableContainer, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.Table, { size: "small" }, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableHead, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableRow, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, null, "User"), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, null, "Role"))), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableBody, null, team.members_with_roles.map((m) => /* @__PURE__ */ import_react4.default.createElement(import_material4.TableRow, { key: m.user_id }, /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, { sx: { fontFamily: "monospace", fontSize: 12 } }, m.user_id), /* @__PURE__ */ import_react4.default.createElement(import_material4.TableCell, null, /* @__PURE__ */ import_react4.default.createElement(
+        import_material4.Chip,
+        {
+          label: m.role,
+          size: "small",
+          color: m.role === "admin" ? "primary" : "default"
+        }
+      )))))))) : null)));
+    };
+    TeamUsage = ({
+      teams,
+      loading,
+      getTeamUsage,
+      getTeamUsageLoading
+    }) => {
+      if (loading) {
+        return /* @__PURE__ */ import_react4.default.createElement(import_material4.Paper, { sx: { p: 2 } }, /* @__PURE__ */ import_react4.default.createElement(import_material4.LinearProgress, null));
+      }
+      if (!teams.length) {
+        return /* @__PURE__ */ import_react4.default.createElement(import_material4.Paper, { sx: { p: 2 } }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react4.default.createElement(import_icons_material3.Group, { color: "disabled" }), /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { color: "text.secondary", variant: "body2" }, "No team membership found in LiteLLM for this account.")));
+      }
+      return /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "h6", mb: 1 }, "Teams"), teams.map((team) => /* @__PURE__ */ import_react4.default.createElement(
+        TeamCard,
+        {
+          key: team.team_id,
+          team,
+          usage: getTeamUsage(team.team_id),
+          usageLoading: getTeamUsageLoading(team.team_id)
+        }
+      )));
+    };
+  }
+});
+
+// src/components/LiteLLMPage.tsx
+var LiteLLMPage_exports = {};
+__export(LiteLLMPage_exports, {
+  LiteLLMPage: () => LiteLLMPage
+});
+var import_react5, import_material5, import_react_use, import_core_plugin_api2, LiteLLMPage;
+var init_LiteLLMPage = __esm({
+  "src/components/LiteLLMPage.tsx"() {
+    "use strict";
+    import_react5 = __toESM(require("react"));
+    import_material5 = require("@mui/material");
+    import_react_use = require("react-use");
+    import_core_plugin_api2 = require("@backstage/core-plugin-api");
+    init_DashboardHeader();
+    init_KeysTable();
+    init_UsageStats();
+    init_TeamUsage();
+    init_api();
+    LiteLLMPage = () => {
+      const api = (0, import_core_plugin_api2.useApi)(liteLlmApiRef);
+      const [dateRange, setDateRange] = (0, import_react5.useState)(() => {
+        const end = /* @__PURE__ */ new Date();
+        const start = /* @__PURE__ */ new Date();
+        start.setDate(start.getDate() - 7);
+        return { start, end };
+      });
+      const [snackbar, setSnackbar] = (0, import_react5.useState)(null);
+      const [teamUsageCache, setTeamUsageCache] = (0, import_react5.useState)({});
+      const [teamUsageLoading, setTeamUsageLoading] = (0, import_react5.useState)({});
+      const { value: userInfo, loading: userLoading, error: userError } = (0, import_react_use.useAsync)(
+        () => api.getUserInfo(),
+        [api]
+      );
+      const { value: keys, loading: keysLoading, retry: refreshKeys } = (0, import_react_use.useAsyncRetry)(
+        async () => {
+          try {
+            return await api.listKeys();
+          } catch (e) {
+            setSnackbar({ message: `Failed to load keys: ${e.message}`, severity: "error" });
+            return [];
+          }
+        },
+        [api]
+      );
+      const { value: allModels, loading: modelsLoading } = (0, import_react_use.useAsync)(
+        () => api.listModels().catch(() => []),
+        [api]
+      );
+      const { value: allTeams, loading: teamsLoading } = (0, import_react_use.useAsync)(
+        () => api.getTeams().catch(() => []),
+        [api]
+      );
+      const teams = (0, import_react5.useMemo)(() => {
+        if (!allTeams?.length) return [];
+        if (!userInfo) return allTeams;
+        const userId = userInfo.user_id;
+        if (userInfo.teams?.length) {
+          return allTeams.filter((t) => userInfo.teams.includes(t.team_id));
+        }
+        const byMembership = allTeams.filter(
+          (t) => t.members_with_roles?.some((m) => m.user_id === userId)
+        );
+        return byMembership.length > 0 ? byMembership : allTeams;
+      }, [allTeams, userInfo]);
+      const { value: usage, loading: usageLoading } = (0, import_react_use.useAsync)(async () => {
+        const startDate = dateRange.start.toISOString().split("T")[0];
+        const endDate = dateRange.end.toISOString().split("T")[0];
+        return api.getUsage(startDate, endDate);
+      }, [api, dateRange]);
+      const loadTeamUsage = (0, import_react5.useCallback)(async (teamId) => {
+        if (teamUsageCache[teamId] !== void 0 || teamUsageLoading[teamId]) return;
+        setTeamUsageLoading((prev) => ({ ...prev, [teamId]: true }));
+        try {
+          const startDate = dateRange.start.toISOString().split("T")[0];
+          const endDate = dateRange.end.toISOString().split("T")[0];
+          const data = await api.getTeamUsage(teamId, startDate, endDate);
+          setTeamUsageCache((prev) => ({ ...prev, [teamId]: data }));
+        } catch {
+          setTeamUsageCache((prev) => ({ ...prev, [teamId]: null }));
+        } finally {
+          setTeamUsageLoading((prev) => ({ ...prev, [teamId]: false }));
+        }
+      }, [api, dateRange, teamUsageCache, teamUsageLoading]);
+      const allowedModels = (0, import_react5.useMemo)(() => {
+        if (!allModels?.length) return [];
+        const userModels = userInfo?.models;
+        const teamModels = teams?.flatMap((t) => t.models ?? []);
+        const hasUserRestriction = userModels && userModels.length > 0;
+        const hasTeamRestriction = teamModels && teamModels.length > 0;
+        if (!hasUserRestriction && !hasTeamRestriction) return allModels;
+        const allowed = /* @__PURE__ */ new Set([
+          ...hasUserRestriction ? userModels : allModels.map((m) => m.model_name),
+          ...hasTeamRestriction ? teamModels : []
+        ]);
+        return allModels.filter((m) => allowed.has(m.model_name));
+      }, [allModels, userInfo, teams]);
+      const handleGenerateKey = (0, import_react5.useCallback)(
+        async (request) => {
+          const response = await api.generateKey(request);
+          setSnackbar({ message: "Key generated successfully", severity: "success" });
+          refreshKeys();
+          return response;
+        },
+        [api, refreshKeys]
+      );
+      const handleUpdateKey = (0, import_react5.useCallback)(
+        async (keyId, request) => {
+          try {
+            await api.updateKey(keyId, request);
+            setSnackbar({ message: "Key updated successfully", severity: "success" });
+            refreshKeys();
+          } catch (e) {
+            setSnackbar({ message: `Failed to update key: ${e.message}`, severity: "error" });
+            throw e;
+          }
+        },
+        [api, refreshKeys]
+      );
+      const handleDeleteKey = (0, import_react5.useCallback)(
+        async (keyId) => {
+          try {
+            await api.deleteKey(keyId);
+            setSnackbar({
+              message: "Key revoked successfully",
+              severity: "success"
+            });
+            refreshKeys();
+          } catch (e) {
+            if (e.body?.success && (e.body?.message?.includes("already deleted") || e.body?.message?.includes("never existed"))) {
+              setSnackbar({
+                message: "Key was already deleted",
+                severity: "warning"
+              });
+              refreshKeys();
+              return;
+            }
+            setSnackbar({
+              message: `Failed to revoke key: ${e.message}`,
+              severity: "error"
+            });
+          } finally {
+            refreshKeys();
+          }
+        },
+        [api, refreshKeys]
+      );
+      const isInitialLoading = userLoading && !userInfo;
+      if (isInitialLoading) {
+        return /* @__PURE__ */ import_react5.default.createElement(import_material5.Box, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "50vh" }, /* @__PURE__ */ import_react5.default.createElement(import_material5.CircularProgress, null));
+      }
+      if (userError || !userInfo) {
+        const isProvisioningEnabled = userError?.body?.provisioning === true;
+        const hint = userError?.body?.hint;
+        return /* @__PURE__ */ import_react5.default.createElement(import_material5.Box, { p: 3 }, /* @__PURE__ */ import_react5.default.createElement(import_material5.Paper, { sx: { p: 3 } }, /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { variant: "h6", gutterBottom: true }, "Account not provisioned"), /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { color: "text.secondary", paragraph: true }, "Your Backstage account is not linked to a LiteLLM user."), hint ? /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { variant: "body2", color: "text.secondary" }, hint) : /* @__PURE__ */ import_react5.default.createElement(import_material5.Typography, { 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_react5.default.createElement(import_material5.Box, { p: 3 }, /* @__PURE__ */ import_react5.default.createElement(import_material5.Grid, { container: true, spacing: 2 }, /* @__PURE__ */ import_react5.default.createElement(import_material5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ import_react5.default.createElement(DashboardHeader, { userInfo, teams: teams ?? [], loading: userLoading || teamsLoading })), /* @__PURE__ */ import_react5.default.createElement(import_material5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ import_react5.default.createElement(
+        TeamUsage,
+        {
+          teams: teams ?? [],
+          loading: teamsLoading,
+          dateRange,
+          getTeamUsage: (teamId) => {
+            if (teamUsageCache[teamId] === void 0) loadTeamUsage(teamId);
+            return teamUsageCache[teamId] ?? null;
+          },
+          getTeamUsageLoading: (teamId) => teamUsageLoading[teamId] ?? false
+        }
+      )), /* @__PURE__ */ import_react5.default.createElement(import_material5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ import_react5.default.createElement(
+        KeysTable,
+        {
+          keys: keys ?? [],
+          models: allowedModels,
+          teams: teams ?? [],
+          loading: keysLoading || modelsLoading,
+          onGenerateKey: handleGenerateKey,
+          onUpdateKey: handleUpdateKey,
+          onDeleteKey: handleDeleteKey
+        }
+      )), /* @__PURE__ */ import_react5.default.createElement(import_material5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ import_react5.default.createElement(
+        UsageStats,
+        {
+          usage: usage ?? null,
+          models: allModels ?? [],
+          dateRange,
+          onDateRangeChange: setDateRange,
+          loading: usageLoading
+        }
+      ))), /* @__PURE__ */ import_react5.default.createElement(
+        import_material5.Snackbar,
+        {
+          open: !!snackbar,
+          autoHideDuration: 5e3,
+          onClose: () => setSnackbar(null),
+          anchorOrigin: { vertical: "bottom", horizontal: "right" }
+        },
+        snackbar ? /* @__PURE__ */ import_react5.default.createElement(import_material5.Alert, { severity: snackbar.severity, onClose: () => setSnackbar(null) }, snackbar.message) : void 0
+      ));
+    };
+  }
+});
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DashboardHeader: () => DashboardHeader,
+  KeysTable: () => KeysTable,
+  LiteLLMPage: () => LiteLLMPage,
+  LiteLlmApi: () => LiteLlmApi,
+  TeamUsage: () => TeamUsage,
+  UsageStats: () => UsageStats,
+  liteLlmApiRef: () => liteLlmApiRef,
+  litellmPlugin: () => litellmPlugin
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/plugin.tsx
+var import_react6 = __toESM(require("react"));
+var import_icons_material4 = require("@mui/icons-material");
+var import_frontend_plugin_api = require("@backstage/frontend-plugin-api");
+init_api();
+var liteLlmApi = import_frontend_plugin_api.ApiBlueprint.make({
+  params: (defineParams) => defineParams({
+    api: liteLlmApiRef,
+    deps: { fetchApi: import_frontend_plugin_api.fetchApiRef },
+    factory: ({ fetchApi }) => new LiteLlmApi(fetchApi)
+  })
+});
+var liteLlmPage = import_frontend_plugin_api.PageBlueprint.make({
+  params: {
+    path: "/litellm",
+    title: "LiteLLM",
+    icon: /* @__PURE__ */ import_react6.default.createElement(import_icons_material4.TrendingUp, null),
+    loader: async () => {
+      const { LiteLLMPage: LiteLLMPage2 } = await Promise.resolve().then(() => (init_LiteLLMPage(), LiteLLMPage_exports));
+      return /* @__PURE__ */ import_react6.default.createElement(LiteLLMPage2, null);
+    }
+  }
+});
+var litellmPlugin = (0, import_frontend_plugin_api.createFrontendPlugin)({
+  pluginId: "litellm",
+  extensions: [liteLlmApi, liteLlmPage]
+});
+
+// src/index.ts
+init_LiteLLMPage();
+init_DashboardHeader();
+init_KeysTable();
+init_UsageStats();
+init_TeamUsage();
+init_api();
+//# sourceMappingURL=index.cjs.js.map