@acarmisc/backstage-plugin-litellm 0.6.0 → 0.8.0

package/dist/api.d.ts

@@ -12,6 +12,9 @@ export interface LiteLlmApiInterface {
     blockKey(keyId: string): Promise<void>;
     unblockKey(keyId: string): Promise<void>;
     resetKeySpend(keyId: string): Promise<void>;
+    pruneExpiredKeys(): Promise<{
+        pruned: number;
+    }>;
     listModels(): Promise<ModelInfo[]>;
     getTeams(): Promise<TeamInfo[]>;
     getUsage(startDate: string, endDate: string): Promise<UsageMetrics>;
@@ -19,6 +22,8 @@ export interface LiteLlmApiInterface {
     getAuditLogs(params: AuditLogsParams): Promise<PaginatedAuditLogs>;
 }
 export declare const liteLlmApiRef: import("@backstage/core-plugin-api").ApiRef<LiteLlmApiInterface>;
+export type ExpiryStatus = 'expired' | 'soon' | 'ok';
+export declare function expiryStatus(expiresAt?: string): ExpiryStatus | null;
 export declare class LiteLlmApi implements LiteLlmApiInterface {
     private fetchApi;
     private basePath;
@@ -38,6 +43,9 @@ export declare class LiteLlmApi implements LiteLlmApiInterface {
     blockKey(keyId: string): Promise<void>;
     unblockKey(keyId: string): Promise<void>;
     resetKeySpend(keyId: string): Promise<void>;
+    pruneExpiredKeys(): Promise<{
+        pruned: number;
+    }>;
     getAuditLogs(params: AuditLogsParams): Promise<PaginatedAuditLogs>;
     listModels(): Promise<ModelInfo[]>;
     getTeams(): Promise<TeamInfo[]>;

package/dist/api.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/KeysTable.d.ts

@@ -12,6 +12,9 @@ interface KeysTableProps {
     onUnblockKey: (keyId: string) => Promise<void>;
     onResetKeySpend: (keyId: string) => Promise<void>;
     onDeleteKey: (keyId: string) => Promise<void>;
+    onPruneExpiredKeys: () => Promise<{
+        pruned: number;
+    }>;
 }
 export declare const KeysTable: React.FC<KeysTableProps>;
 export {};

package/dist/components/TeamUsage.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
-import { TeamInfo, UsageMetrics, DateRange } from '../types';
+import { TeamInfo, UsageMetrics } from '../types';
 interface TeamUsageProps {
     teams: TeamInfo[];
     loading: boolean;
-    dateRange: DateRange;
     getTeamUsage: (teamId: string) => UsageMetrics | null;
     getTeamUsageLoading: (teamId: string) => boolean;
 }

package/dist/format.d.ts

@@ -0,0 +1,2 @@
+export declare const fmtUsd: (n: number) => string;
+export declare const fmtInt: (n: number) => string;

package/dist/format.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.cjs.js

@@ -36,6 +36,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/api.ts
+function expiryStatus(expiresAt) {
+  if (!expiresAt) return null;
+  const diff = new Date(expiresAt).getTime() - Date.now();
+  const days = diff / (1e3 * 60 * 60 * 24);
+  if (days < 0) return "expired";
+  if (days < 7) return "soon";
+  return "ok";
+}
 var import_core_plugin_api, ApiError, liteLlmApiRef, LiteLlmApi;
 var init_api = __esm({
   "src/api.ts"() {
@@ -122,6 +130,19 @@ var init_api = __esm({
       async resetKeySpend(keyId) {
         await this.post(`/keys/${encodeURIComponent(keyId)}/reset_spend`, {});
       }
+      async pruneExpiredKeys() {
+        const keys = await this.get("/keys");
+        const expired = keys.filter((k) => expiryStatus(k.expires_at) === "expired");
+        if (expired.length === 0) return { pruned: 0 };
+        for (const key of expired) {
+          try {
+            await this.del(`/keys/${encodeURIComponent(key.token ?? key.key)}`);
+          } catch (err) {
+            console.warn(`Failed to delete expired key ${key.token ?? key.key}:`, err);
+          }
+        }
+        return { pruned: expired.length };
+      }
       async getAuditLogs(params) {
         const strParams = {};
         if (params.page !== void 0) strParams.page = String(params.page);
@@ -179,14 +200,6 @@ var init_DashboardHeader = __esm({
 });
 
 // src/components/KeysTable.tsx
-function expiryStatus(expiresAt) {
-  if (!expiresAt) return null;
-  const diff = new Date(expiresAt).getTime() - Date.now();
-  const days = diff / (1e3 * 60 * 60 * 24);
-  if (days < 0) return "expired";
-  if (days < 7) return "soon";
-  return "ok";
-}
 function ExpiryChip({ expiresAt }) {
   const status = expiryStatus(expiresAt);
   if (!status) return /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "body2", color: "text.secondary" }, "-");
@@ -213,6 +226,7 @@ var init_KeysTable = __esm({
     import_react2 = __toESM(require("react"));
     import_material2 = require("@mui/material");
     import_icons_material = require("@mui/icons-material");
+    init_api();
     maskKey = (key) => {
       if (key.length <= 8) return "***";
       return `${key.slice(0, 4)}...${key.slice(-4)}`;
@@ -257,7 +271,8 @@ var init_KeysTable = __esm({
       onBlockKey,
       onUnblockKey,
       onResetKeySpend,
-      onDeleteKey
+      onDeleteKey,
+      onPruneExpiredKeys
     }) => {
       const [generateModalOpen, setGenerateModalOpen] = (0, import_react2.useState)(false);
       const [newKeyValue, setNewKeyValue] = (0, import_react2.useState)(null);
@@ -370,6 +385,23 @@ var init_KeysTable = __esm({
       const copyToClipboard = (text) => {
         navigator.clipboard.writeText(text);
       };
+      const [pruneConfirmCount, setPruneConfirmCount] = (0, import_react2.useState)(null);
+      const [pruneSubmitting, setPruneSubmitting] = (0, import_react2.useState)(false);
+      const expiredKeys = (0, import_react2.useMemo)(() => {
+        return keys.filter((k) => expiryStatus(k.expires_at) === "expired");
+      }, [keys]);
+      const handlePruneExpired = async () => {
+        if (pruneConfirmCount === null || pruneConfirmCount === 0) return;
+        setPruneSubmitting(true);
+        try {
+          await onPruneExpiredKeys();
+        } catch (error) {
+          console.error("Failed to prune expired keys:", error);
+        } finally {
+          setPruneSubmitting(false);
+          setPruneConfirmCount(null);
+        }
+      };
       const modelOption = (m) => {
         const inCost = fmtCost(m.input_cost_per_token);
         const outCost = fmtCost(m.output_cost_per_token);
@@ -387,6 +419,17 @@ var init_KeysTable = __esm({
             startAdornment: /* @__PURE__ */ import_react2.default.createElement(import_material2.InputAdornment, { position: "start" }, /* @__PURE__ */ import_react2.default.createElement(import_icons_material.Search, { fontSize: "small" }))
           }
         }
+      ), expiredKeys.length > 0 && /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.Button,
+        {
+          variant: "outlined",
+          color: "error",
+          startIcon: /* @__PURE__ */ import_react2.default.createElement(import_icons_material.Autorenew, null),
+          onClick: () => setPruneConfirmCount(expiredKeys.length)
+        },
+        "Prune expired (",
+        expiredKeys.length,
+        ")"
       ), /* @__PURE__ */ import_react2.default.createElement(
         import_material2.Button,
         {
@@ -650,24 +693,44 @@ var init_KeysTable = __esm({
           disabled: deleteSubmitting
         },
         deleteSubmitting ? /* @__PURE__ */ import_react2.default.createElement(import_material2.CircularProgress, { size: 20 }) : "Revoke"
+      ))), /* @__PURE__ */ import_react2.default.createElement(import_material2.Dialog, { open: pruneConfirmCount !== null, onClose: () => setPruneConfirmCount(null), maxWidth: "xs", fullWidth: true }, /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogTitle, null, "Prune Expired Keys?"), /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogContent, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, null, "This will permanently delete ", pruneConfirmCount, " expired key", pruneConfirmCount !== 1 ? "s" : "", " from LiteLLM. Any integrations using them will stop working immediately.")), /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogActions, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Button, { onClick: () => setPruneConfirmCount(null), disabled: pruneSubmitting }, "Cancel"), /* @__PURE__ */ import_react2.default.createElement(
+        import_material2.Button,
+        {
+          onClick: handlePruneExpired,
+          variant: "contained",
+          color: "error",
+          disabled: pruneSubmitting
+        },
+        pruneSubmitting ? /* @__PURE__ */ import_react2.default.createElement(import_material2.CircularProgress, { size: 20 }) : "Prune"
       ))));
     };
   }
 });
 
+// src/format.ts
+var fmtUsd, fmtInt;
+var init_format = __esm({
+  "src/format.ts"() {
+    "use strict";
+    fmtUsd = (n) => `$${(n ?? 0).toFixed(n < 1 ? 4 : 2)}`;
+    fmtInt = (n) => (n ?? 0).toLocaleString();
+  }
+});
+
 // src/components/UsageStats.tsx
 function modelColor(model) {
   let h = 5381;
   for (let i = 0; i < model.length; i++) h = (h << 5) + h + model.charCodeAt(i) >>> 0;
   return MODEL_COLORS[h % MODEL_COLORS.length];
 }
-var import_react3, import_material3, import_recharts, TOP_N_MODELS, PERIOD_LS_KEY, MODEL_COLORS, fmtUsd, fmtInt, fmtPct, KpiCard, ChartSkeleton, EmptyChart, UsageStats;
+var import_react3, import_material3, import_recharts, TOP_N_MODELS, PERIOD_LS_KEY, MODEL_COLORS, fmtPct, KpiCard, ChartSkeleton, EmptyChart, 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");
+    init_format();
     TOP_N_MODELS = 6;
     PERIOD_LS_KEY = "litellm_usage_period";
     MODEL_COLORS = [
@@ -682,8 +745,6 @@ var init_UsageStats = __esm({
       "#a4de6c",
       "#d0ed57"
     ];
-    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);
     ChartSkeleton = ({ height = 260 }) => /* @__PURE__ */ import_react3.default.createElement(import_material3.Skeleton, { variant: "rectangular", height, sx: { borderRadius: 1 } });
@@ -866,7 +927,7 @@ var init_UsageStats = __esm({
 });
 
 // src/components/TeamUsage.tsx
-var import_react4, import_material4, import_icons_material2, import_recharts2, TeamCard, TeamUsage;
+var import_react4, import_material4, import_icons_material2, import_recharts2, Stat, TeamCard, TeamUsage;
 var init_TeamUsage = __esm({
   "src/components/TeamUsage.tsx"() {
     "use strict";
@@ -874,6 +935,7 @@ var init_TeamUsage = __esm({
     import_material4 = require("@mui/material");
     import_icons_material2 = require("@mui/icons-material");
     import_recharts2 = require("recharts");
+    Stat = ({ label, value }) => /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, null, /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "caption", color: "text.secondary", display: "block" }, label), /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "body2", fontWeight: 600, sx: { fontFamily: "monospace" } }, value));
     TeamCard = ({ team, usage, usageLoading }) => {
       const [expanded, setExpanded] = (0, import_react4.useState)(false);
       const budget = team.max_budget ?? 0;
@@ -882,7 +944,43 @@ var init_TeamUsage = __esm({
       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_material2.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_material2.ExpandLess, null) : /* @__PURE__ */ import_react4.default.createElement(import_icons_material2.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(
+      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_material2.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 || "Untitled team"), /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "caption", color: "text.secondary", sx: { fontFamily: "monospace" } }, team.team_id)), /* @__PURE__ */ import_react4.default.createElement(import_material4.IconButton, { size: "small", onClick: () => setExpanded((e) => !e), "aria-label": "toggle details" }, expanded ? /* @__PURE__ */ import_react4.default.createElement(import_icons_material2.ExpandLess, null) : /* @__PURE__ */ import_react4.default.createElement(import_icons_material2.ExpandMore, null))), /* @__PURE__ */ import_react4.default.createElement(import_material4.Stack, { direction: "row", spacing: 3, mt: 1.5, flexWrap: "wrap", useFlexGap: true, gap: 1.5 }, /* @__PURE__ */ import_react4.default.createElement(
+        Stat,
+        {
+          label: "Members",
+          value: team.members_with_roles?.length ? String(team.members_with_roles.length) : "\u2014"
+        }
+      ), /* @__PURE__ */ import_react4.default.createElement(
+        Stat,
+        {
+          label: "Models",
+          value: team.models?.length ? String(team.models.length) : "All"
+        }
+      ), /* @__PURE__ */ import_react4.default.createElement(
+        Stat,
+        {
+          label: "Budget",
+          value: budget > 0 ? `$${budget.toFixed(2)}` : "Unlimited"
+        }
+      ), /* @__PURE__ */ import_react4.default.createElement(
+        Stat,
+        {
+          label: "Spend",
+          value: `$${spend.toFixed(2)}`
+        }
+      ), /* @__PURE__ */ import_react4.default.createElement(
+        Stat,
+        {
+          label: "TPM",
+          value: team.tpm_limit != null && team.tpm_limit > 0 ? String(team.tpm_limit) : "\u2014"
+        }
+      ), /* @__PURE__ */ import_react4.default.createElement(
+        Stat,
+        {
+          label: "RPM",
+          value: team.rpm_limit != null && team.rpm_limit > 0 ? String(team.rpm_limit) : "\u2014"
+        }
+      )), 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",
@@ -890,14 +988,14 @@ var init_TeamUsage = __esm({
           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(
+      )), /* @__PURE__ */ import_react4.default.createElement(import_material4.Collapse, { in: expanded }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { mt: 2 }, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ import_react4.default.createElement(import_icons_material2.Speed, { fontSize: "small", color: "action" }), /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary" }, "Rate limits")), /* @__PURE__ */ import_react4.default.createElement(import_material4.Stack, { direction: "row", spacing: 3, flexWrap: "wrap", useFlexGap: true, gap: 1.5, mb: 2 }, /* @__PURE__ */ import_react4.default.createElement(Stat, { label: "TPM limit", value: team.tpm_limit != null && team.tpm_limit > 0 ? String(team.tpm_limit) : "Unlimited" }), /* @__PURE__ */ import_react4.default.createElement(Stat, { label: "RPM limit", value: team.rpm_limit != null && team.rpm_limit > 0 ? String(team.rpm_limit) : "Unlimited" }), /* @__PURE__ */ import_react4.default.createElement(Stat, { label: "Max budget", value: budget > 0 ? `$${budget.toFixed(2)}` : "Unlimited" })), /* @__PURE__ */ import_react4.default.createElement(import_material4.Divider, { sx: { mb: 2 } }), /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary", gutterBottom: true }, "Models"), team.models?.length ? /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", gap: 0.5, flexWrap: "wrap", mb: 2 }, 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: "body2", color: "text.secondary", mb: 2 }, "All models allowed"), /* @__PURE__ */ import_react4.default.createElement(import_material4.Divider, { sx: { mb: 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, mb: 2 }, /* @__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 })))), /* @__PURE__ */ import_react4.default.createElement(import_material4.Divider, { sx: { mb: 2 } })) : null, /* @__PURE__ */ import_react4.default.createElement(import_material4.Box, { display: "flex", alignItems: "center", gap: 1, mb: 1 }, /* @__PURE__ */ import_react4.default.createElement(import_icons_material2.Memory, { fontSize: "small", color: "action" }), /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "subtitle2", color: "text.secondary" }, "Members")), team.members_with_roles?.length ? /* @__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)));
+      ))))))) : /* @__PURE__ */ import_react4.default.createElement(import_material4.Typography, { variant: "body2", color: "text.secondary" }, "No members assigned."))));
     };
     TeamUsage = ({
       teams,
@@ -1236,6 +1334,19 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
+      const handlePruneExpiredKeys = (0, import_react6.useCallback)(
+        async () => {
+          try {
+            const result = await api.pruneExpiredKeys();
+            setSnackbar({ message: `Pruned ${result.pruned} expired key${result.pruned !== 1 ? "s" : ""}`, severity: "success" });
+            refreshKeys();
+          } catch (e) {
+            setSnackbar({ message: `Failed to prune expired keys: ${e.message}`, severity: "error" });
+          }
+          return { pruned: 0 };
+        },
+        [api, refreshKeys]
+      );
       const isInitialLoading = userLoading && !userInfo;
       if (isInitialLoading) {
         return /* @__PURE__ */ import_react6.default.createElement(import_material6.Box, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "50vh" }, /* @__PURE__ */ import_react6.default.createElement(import_material6.CircularProgress, null));
@@ -1279,14 +1390,14 @@ var init_LiteLLMPage = __esm({
           onBlockKey: handleBlockKey,
           onUnblockKey: handleUnblockKey,
           onResetKeySpend: handleResetKeySpend,
-          onDeleteKey: handleDeleteKey
+          onDeleteKey: handleDeleteKey,
+          onPruneExpiredKeys: handlePruneExpiredKeys
         }
       ), activeTab === "teams" && /* @__PURE__ */ import_react6.default.createElement(
         TeamUsage,
         {
           teams: teams ?? [],
           loading: teamsLoading,
-          dateRange,
           getTeamUsage: (teamId) => {
             if (teamUsageCache[teamId] === void 0) loadTeamUsage(teamId);
             return teamUsageCache[teamId] ?? null;
@@ -1363,8 +1474,7 @@ var import_material7 = require("@mui/material");
 var import_recharts3 = require("recharts");
 var import_core_plugin_api3 = require("@backstage/core-plugin-api");
 init_api();
-var fmtUsd2 = (n) => `$${(n ?? 0).toFixed(n < 1 ? 4 : 2)}`;
-var fmtInt2 = (n) => (n ?? 0).toLocaleString();
+init_format();
 function presetToDateRange(preset) {
   const end = /* @__PURE__ */ new Date();
   const start = /* @__PURE__ */ new Date();
@@ -1426,7 +1536,7 @@ var LiteLLMHomeWidget = ({
     /* @__PURE__ */ import_react8.default.createElement(import_material7.MenuItem, { value: "today" }, "Today"),
     /* @__PURE__ */ import_react8.default.createElement(import_material7.MenuItem, { value: "7d" }, "7d"),
     /* @__PURE__ */ import_react8.default.createElement(import_material7.MenuItem, { value: "30d" }, "30d")
-  ))), loading && /* @__PURE__ */ import_react8.default.createElement(import_material7.Box, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ import_react8.default.createElement(import_material7.CircularProgress, { size: 32 })), !loading && error && /* @__PURE__ */ import_react8.default.createElement(import_material7.Alert, { severity: "error", sx: { mt: 1 } }, error), !loading && !error && /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react8.default.createElement(Kpi, { label: "USD Spent", value: fmtUsd2(usage?.total_spend ?? 0) })), /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react8.default.createElement(Kpi, { label: "Tokens In", value: fmtInt2(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react8.default.createElement(Kpi, { label: "Tokens Out", value: fmtInt2(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react8.default.createElement(Kpi, { label: "Keys", value: fmtInt2(keys.length) }))), hasSparkline && /* @__PURE__ */ import_react8.default.createElement(import_material7.Box, { height: 120 }, /* @__PURE__ */ import_react8.default.createElement(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react8.default.createElement(import_recharts3.AreaChart, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ import_react8.default.createElement(
+  ))), loading && /* @__PURE__ */ import_react8.default.createElement(import_material7.Box, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ import_react8.default.createElement(import_material7.CircularProgress, { size: 32 })), !loading && error && /* @__PURE__ */ import_react8.default.createElement(import_material7.Alert, { severity: "error", sx: { mt: 1 } }, error), !loading && !error && /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react8.default.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react8.default.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react8.default.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ import_react8.default.createElement(import_material7.Grid, { item: true, xs: 6 }, /* @__PURE__ */ import_react8.default.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ import_react8.default.createElement(import_material7.Box, { height: 120 }, /* @__PURE__ */ import_react8.default.createElement(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react8.default.createElement(import_recharts3.AreaChart, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ import_react8.default.createElement(
     import_recharts3.Area,
     {
       type: "monotone",