@acarmisc/backstage-plugin-litellm 0.37.0 → 0.39.0

package/dist/index.cjs.js

@@ -317,6 +317,25 @@ var init_api = __esm({
           end_date: endDate
         });
       }
+      async getSpendLogs(params) {
+        const strParams = {
+          start_date: params.startDate,
+          end_date: params.endDate
+        };
+        if (params.userId) strParams.userId = params.userId;
+        if (params.teamId) strParams.teamId = params.teamId;
+        if (params.page !== void 0) strParams.page = String(params.page);
+        if (params.pageSize !== void 0) strParams.page_size = String(params.pageSize);
+        return this.get("/insights/spend-logs", strParams);
+      }
+      async getQuality(params) {
+        const strParams = {
+          start_date: params.startDate,
+          end_date: params.endDate
+        };
+        if (params.userId) strParams.userId = params.userId;
+        return this.get("/insights/quality", strParams);
+      }
       async getConfig() {
         return this.get("/config");
       }
@@ -715,7 +734,7 @@ var init_surfaces = __esm({
     import_styles3 = require("@mui/material/styles");
     init_tokens();
     import_jsx_runtime3 = require("react/jsx-runtime");
-    SectionCard = ({ title, subtitle, actions, flush = false, children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_Paper2.default, { sx: { borderRadius: 2, overflow: "hidden" }, children: [
+    SectionCard = ({ title, subtitle, description, actions, flush = false, children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_Paper2.default, { sx: { borderRadius: 2, overflow: "hidden" }, children: [
       (title || actions) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         import_Box3.default,
         {
@@ -737,6 +756,7 @@ var init_surfaces = __esm({
           ]
         }
       ),
+      description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Typography2.default, { variant: "body2", color: "text.secondary", sx: { px: 2.5, pb: 1.5 }, children: description }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Box3.default, { sx: flush ? void 0 : { px: 2.5, pb: 2.5, pt: title ? 0 : 2.5 }, children })
     ] });
     ChartCard = ({ title, meta, height = 240, children }) => (
@@ -5661,295 +5681,431 @@ var init_ModelsTable = __esm({
   }
 });
 
-// src/components/AuditLog.tsx
-function actionTone(action) {
-  if (!action) return "neutral";
-  for (const [key, tone] of Object.entries(ACTION_TONES)) {
-    if (action.toLowerCase().includes(key)) return tone;
+// src/insights.ts
+var costPer1k, summarizeUsage, scorePractices, modelOpportunities;
+var init_insights = __esm({
+  "src/insights.ts"() {
+    "use strict";
+    costPer1k = (model, spend, tokens, models) => {
+      const info = models?.find((m) => m.model_name === model);
+      const listed = info?.input_cost_per_token !== void 0 && info?.input_cost_per_token !== null && info?.output_cost_per_token !== void 0 && info?.output_cost_per_token !== null ? (info.input_cost_per_token + info.output_cost_per_token) / 2 * 1e3 : null;
+      if (listed !== null) return listed;
+      return tokens > 0 ? spend / tokens * 1e3 : null;
+    };
+    summarizeUsage = (usage, models, premiumThresholdPer1k = 0.01) => {
+      if (!usage) {
+        return {
+          costPer1kTokens: null,
+          costPerRequest: null,
+          outputInputRatio: null,
+          retryWasteUsd: 0,
+          retryWasteShare: 0,
+          successRate: null,
+          premiumShare: 0,
+          premiumSpend: 0,
+          topModelConcentration: 0,
+          projectedMonthSpend: null,
+          burnMultiple: null
+        };
+      }
+      const {
+        total_spend: spend,
+        total_tokens: tokens,
+        prompt_tokens: prompt,
+        completion_tokens: completion,
+        api_requests: reqs,
+        successful_requests: ok,
+        failed_requests: failed,
+        usage_by_model: byModel
+      } = usage;
+      const wasteShare = reqs > 0 ? failed / reqs : 0;
+      const entries = Object.entries(byModel ?? {});
+      const topSpend = entries.reduce((m, [, d]) => Math.max(m, d.total_spend), 0);
+      const premiumSpend = entries.filter(([name, d]) => (costPer1k(name, d.total_spend, d.total_tokens, models) ?? 0) > premiumThresholdPer1k).reduce((s, [, d]) => s + d.total_spend, 0);
+      const days = usage.daily_usage?.length ?? 0;
+      const projected = days > 0 ? spend / days * 30 : null;
+      return {
+        costPer1kTokens: tokens > 0 ? spend / tokens * 1e3 : null,
+        costPerRequest: reqs > 0 ? spend / reqs : null,
+        outputInputRatio: prompt > 0 ? completion / prompt : null,
+        retryWasteUsd: spend * wasteShare,
+        retryWasteShare: wasteShare,
+        successRate: reqs > 0 ? ok / reqs : null,
+        premiumShare: spend > 0 ? premiumSpend / spend : 0,
+        premiumSpend,
+        topModelConcentration: spend > 0 ? topSpend / spend : 0,
+        projectedMonthSpend: projected,
+        burnMultiple: projected !== null && spend > 0 ? projected / spend : null
+      };
+    };
+    scorePractices = (summary, keyStats) => {
+      const band = (v, limits) => {
+        for (const [max, pts] of limits) {
+          if (v <= max) return pts;
+        }
+        return 0;
+      };
+      const waste = band(summary.retryWasteShare, [[0.01, 30], [0.05, 20], [0.1, 10]]);
+      const premium = band(summary.premiumShare, [[0.2, 25], [0.5, 15], [0.8, 5]]);
+      const conc = band(summary.topModelConcentration, [[0.5, 20], [0.8, 10]]);
+      const bad = keyStats.totalKeys > 0 ? (keyStats.idleKeys + keyStats.uncappedKeys) / keyStats.totalKeys : 0;
+      const hygiene = keyStats.totalKeys === 0 ? 25 : band(bad, [[0, 25], [0.2, 15], [0.5, 5]]);
+      const checks = [
+        { id: "retry-waste", label: "Low retry waste", points: waste, maxPoints: 30, detail: `${(summary.retryWasteShare * 100).toFixed(1)}% of requests failed` },
+        { id: "premium-mix", label: "Balanced model mix", points: premium, maxPoints: 25, detail: `${(summary.premiumShare * 100).toFixed(1)}% of spend on premium models` },
+        { id: "concentration", label: "No single-model lock-in", points: conc, maxPoints: 20, detail: `Top model is ${(summary.topModelConcentration * 100).toFixed(1)}% of spend` },
+        { id: "key-hygiene", label: "Key hygiene", points: hygiene, maxPoints: 25, detail: `${keyStats.idleKeys} idle, ${keyStats.uncappedKeys} uncapped of ${keyStats.totalKeys} keys` }
+      ];
+      return { total: checks.reduce((s, c) => s + c.points, 0), checks };
+    };
+    modelOpportunities = (usage, models, premiumThresholdPer1k = 0.01) => {
+      if (!usage) return [];
+      const entries = Object.entries(usage.usage_by_model ?? {});
+      const overallRate = usage.api_requests > 0 ? usage.failed_requests / usage.api_requests : 0;
+      return entries.map(([model, d]) => {
+        const failureRate = d.api_requests > 0 ? d.failed_requests / d.api_requests : null;
+        const avgCostPerRequest = d.api_requests > 0 ? d.total_spend / d.api_requests : 0;
+        const completionShare = d.total_tokens > 0 ? d.completion_tokens / d.total_tokens : 0;
+        const per1k = costPer1k(model, d.total_spend, d.total_tokens, models) ?? 0;
+        const spendShare = usage.total_spend > 0 ? d.total_spend / usage.total_spend : 0;
+        if (failureRate !== null && overallRate > 0 && failureRate > 2 * overallRate && d.api_requests >= 10) {
+          return { model, spend: d.total_spend, requests: d.api_requests, failureRate, avgCostPerRequest, flag: "failure-outlier", hint: `Fails ${(failureRate * 100).toFixed(1)}% vs ${(overallRate * 100).toFixed(1)}% overall` };
+        }
+        if (per1k > premiumThresholdPer1k && completionShare < 0.3 && spendShare > 0.05) {
+          return { model, spend: d.total_spend, requests: d.api_requests, failureRate, avgCostPerRequest, flag: "downgrade-candidate", hint: `$${per1k.toFixed(3)}/1k with ${(completionShare * 100).toFixed(0)}% output \u2014 try a cheaper model` };
+        }
+        return { model, spend: d.total_spend, requests: d.api_requests, failureRate, avgCostPerRequest, flag: "ok", hint: "No action" };
+      });
+    };
   }
-  return "info";
-}
-function prettyTableName(name) {
-  if (!name) return "\u2014";
-  return TABLE_LABELS[name] ?? name;
+});
+
+// src/dates.ts
+function toLocalDay(d) {
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
 }
-function formatDateTime(iso) {
-  try {
-    return new Date(iso).toLocaleString();
-  } catch {
-    return iso;
-  }
+function monthToDateRange(now = /* @__PURE__ */ new Date()) {
+  const start = new Date(now.getFullYear(), now.getMonth(), 1);
+  return {
+    startDate: toLocalDay(start),
+    endDate: toLocalDay(now)
+  };
 }
-function renderAuditLogBody(loading, entries) {
-  if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableRow6.default, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { colSpan: 6, sx: { py: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Skeleton6.default, { variant: "rounded", height: 160 }) }) });
-  }
-  if (entries.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableRow6.default, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { colSpan: 6, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      EmptyState,
-      {
-        message: "No audit events found",
-        hint: "Try widening the filters or a different time window."
-      }
-    ) }) });
+var init_dates = __esm({
+  "src/dates.ts"() {
+    "use strict";
   }
-  return entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DetailRow, { entry }, entry.id));
-}
-var import_react12, import_Box16, import_Typography14, import_Table6, import_TableBody6, import_TableCell6, import_TableContainer6, import_TableHead6, import_TableRow6, import_TablePagination, import_TextField6, import_MenuItem5, import_Skeleton6, import_Collapse3, import_IconButton7, import_Alert5, import_styles12, import_icons_material9, import_react_use, import_jsx_runtime17, ACTION_TONES, TABLE_LABELS, DetailRow, AuditLog;
-var init_AuditLog = __esm({
-  "src/components/AuditLog.tsx"() {
+});
+
+// src/components/InsightsTab.tsx
+var import_react12, import_Box16, import_Grid2, import_Typography14, import_Alert5, import_Button7, import_Table6, import_TableBody6, import_TableCell6, import_TableContainer6, import_TableHead6, import_TableRow6, import_Skeleton6, import_react_use, import_jsx_runtime17, FLAG_TONE, FLAG_LABEL, fmtRatio, fmtPct1, failedRow, InsightsTab;
+var init_InsightsTab = __esm({
+  "src/components/InsightsTab.tsx"() {
     "use strict";
     import_react12 = require("react");
     import_Box16 = __toESM(require("@mui/material/Box"));
+    import_Grid2 = __toESM(require("@mui/material/Grid"));
     import_Typography14 = __toESM(require("@mui/material/Typography"));
+    import_Alert5 = __toESM(require("@mui/material/Alert"));
+    import_Button7 = __toESM(require("@mui/material/Button"));
     import_Table6 = __toESM(require("@mui/material/Table"));
     import_TableBody6 = __toESM(require("@mui/material/TableBody"));
     import_TableCell6 = __toESM(require("@mui/material/TableCell"));
     import_TableContainer6 = __toESM(require("@mui/material/TableContainer"));
     import_TableHead6 = __toESM(require("@mui/material/TableHead"));
     import_TableRow6 = __toESM(require("@mui/material/TableRow"));
-    import_TablePagination = __toESM(require("@mui/material/TablePagination"));
-    import_TextField6 = __toESM(require("@mui/material/TextField"));
-    import_MenuItem5 = __toESM(require("@mui/material/MenuItem"));
     import_Skeleton6 = __toESM(require("@mui/material/Skeleton"));
-    import_Collapse3 = __toESM(require("@mui/material/Collapse"));
-    import_IconButton7 = __toESM(require("@mui/material/IconButton"));
-    import_Alert5 = __toESM(require("@mui/material/Alert"));
-    import_styles12 = require("@mui/material/styles");
-    import_icons_material9 = require("@mui/icons-material");
     import_react_use = require("react-use");
+    init_insights();
+    init_format();
+    init_dates();
     init_ui();
     import_jsx_runtime17 = require("react/jsx-runtime");
-    ACTION_TONES = {
-      created: "success",
-      deleted: "danger",
-      updated: "warning",
-      blocked: "danger",
-      unblocked: "success"
+    FLAG_TONE = {
+      "failure-outlier": "danger",
+      "downgrade-candidate": "warning",
+      ok: "success"
     };
-    TABLE_LABELS = {
-      LiteLLM_VerificationToken: "Key",
-      LiteLLM_TeamTable: "Team",
-      LiteLLM_TeamMembership: "Team member",
-      LiteLLM_ObjectPermissionTable: "Team access (KB / MCP)",
-      LiteLLM_UserTable: "User"
+    FLAG_LABEL = {
+      "failure-outlier": "Failure outlier",
+      "downgrade-candidate": "Downgrade candidate",
+      ok: "OK"
     };
-    DetailRow = ({ entry }) => {
-      const [open, setOpen] = (0, import_react12.useState)(false);
-      const hasDetail = entry.before_value || entry.updated_values;
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_TableRow6.default, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { sx: { width: 40, pr: 0 }, children: hasDetail && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-            import_IconButton7.default,
-            {
-              size: "small",
-              onClick: () => setOpen((o) => !o),
-              "aria-label": open ? "Hide changes" : "Show changes",
-              "aria-expanded": open,
-              sx: (theme) => ({
-                color: theme.palette.text.secondary,
-                transform: open ? "rotate(180deg)" : "none",
-                transition: theme.transitions.create("transform")
-              }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_material9.KeyboardArrowDown, { fontSize: "small" })
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { sx: { whiteSpace: "nowrap" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Typography14.default, { variant: "body2", color: "text.secondary", children: formatDateTime(entry.updated_at) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { children: entry.action && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StatusPill, { label: entry.action, tone: actionTone(entry.action) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Typography14.default, { variant: "body2", children: prettyTableName(entry.table_name) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-            import_Typography14.default,
+    fmtRatio = (n) => n === null || Number.isNaN(n) ? "\u2014" : `${n.toFixed(2)}\xD7`;
+    fmtPct1 = (n) => n === null || Number.isNaN(n) ? "\u2014" : `${(n * 100).toFixed(1)}%`;
+    failedRow = (status) => /fail|error/i.test(status ?? "");
+    InsightsTab = ({
+      api,
+      usage,
+      models,
+      keys,
+      dateRange,
+      loading
+    }) => {
+      const summary = (0, import_react12.useMemo)(() => summarizeUsage(usage, models), [usage, models]);
+      const keyStats = (0, import_react12.useMemo)(
+        () => ({
+          idleKeys: keys.filter((k) => (k.spend ?? 0) === 0).length,
+          uncappedKeys: keys.filter((k) => k.max_budget === void 0 || k.max_budget === null).length,
+          totalKeys: keys.length
+        }),
+        [keys]
+      );
+      const score = (0, import_react12.useMemo)(
+        () => scorePractices(summary, keyStats),
+        [summary, keyStats]
+      );
+      const opportunities = (0, import_react12.useMemo)(() => {
+        const opps = modelOpportunities(usage, models);
+        return [...opps].sort(
+          (a, b) => (a.flag === "ok" ? 1 : 0) - (b.flag === "ok" ? 1 : 0)
+        );
+      }, [usage, models]);
+      const {
+        value: spendLogs,
+        loading: logsLoading,
+        error: logsError,
+        retry: retryLogs
+      } = (0, import_react_use.useAsyncRetry)(async () => {
+        return api.getSpendLogs({
+          startDate: toLocalDay(dateRange.start),
+          endDate: toLocalDay(dateRange.end),
+          pageSize: 1e3
+        });
+      }, [api, dateRange]);
+      const {
+        value: quality,
+        loading: qualityLoading,
+        error: qualityError,
+        retry: retryQuality
+      } = (0, import_react_use.useAsyncRetry)(async () => {
+        if (typeof api.getQuality !== "function") return { configured: false };
+        return api.getQuality({
+          startDate: toLocalDay(dateRange.start),
+          endDate: toLocalDay(dateRange.end)
+        });
+      }, [api, dateRange]);
+      const renderQualityBody = () => {
+        if (qualityLoading) return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Skeleton6.default, { variant: "rounded", height: 120 });
+        if (qualityError) {
+          return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Alert5.default, { severity: "error", children: [
+            "Failed to load quality scores: ",
+            qualityError.message || "Unknown error",
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Box16.default, { sx: { mt: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Button7.default, { size: "small", onClick: retryQuality, children: "Retry" }) })
+          ] });
+        }
+        if (!quality || quality.configured === false) {
+          return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            EmptyState,
             {
-              variant: "body2",
-              component: "code",
-              color: "text.secondary",
-              title: entry.object_id ?? void 0,
-              sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 12 },
-              children: entry.object_id ? entry.object_id.slice(0, 20) + (entry.object_id.length > 20 ? "\u2026" : "") : "\u2014"
+              message: "Quality scores \u2014 connect Langfuse",
+              hint: "LLM-as-judge evaluation is not configured for this deployment."
             }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { children: entry.changed_by ?? "\u2014" })
-        ] }),
-        hasDetail && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableRow6.default, { sx: { "&&:hover": { bgcolor: "transparent" } }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { colSpan: 6, sx: { "&&": { py: 0, border: 0 } }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Collapse3.default, { in: open, unmountOnExit: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-          import_Box16.default,
-          {
-            display: "flex",
-            gap: 2,
-            flexWrap: "wrap",
-            sx: (theme) => ({
-              p: 2,
-              mb: 1.5,
-              borderRadius: 1.5,
-              bgcolor: (0, import_styles12.alpha)(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.05 : 0.03)
-            }),
-            children: [
-              entry.before_value && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Box16.default, { flex: 1, minWidth: 200, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                  import_Typography14.default,
-                  {
-                    variant: "caption",
-                    color: "text.secondary",
-                    display: "block",
-                    mb: 0.75,
-                    sx: { fontSize: 10.5, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase" },
-                    children: "Before"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Typography14.default, { component: "pre", variant: "caption", sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", whiteSpace: "pre-wrap", wordBreak: "break-all", m: 0 }, children: JSON.stringify(entry.before_value, null, 2) })
-              ] }),
-              entry.updated_values && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Box16.default, { flex: 1, minWidth: 200, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                  import_Typography14.default,
-                  {
-                    variant: "caption",
-                    color: "text.secondary",
-                    display: "block",
-                    mb: 0.75,
-                    sx: { fontSize: 10.5, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase" },
-                    children: "After"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Typography14.default, { component: "pre", variant: "caption", sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", whiteSpace: "pre-wrap", wordBreak: "break-all", m: 0 }, children: JSON.stringify(entry.updated_values, null, 2) })
+          );
+        }
+        if (quality.byModel.length === 0 && quality.scores.length === 0) {
+          return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EmptyState, { message: "No quality data in this period" });
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Box16.default, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+          quality.byModel.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Box16.default, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: quality.byModel.map((m) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Box16.default, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Box16.default, { sx: { display: "flex", justifyContent: "space-between", gap: 1, mb: 0.5 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Typography14.default, { variant: "body2", sx: { fontWeight: 600 }, children: m.model }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Typography14.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" }, children: [
+              fmtUsd(m.cost),
+              " \xB7 ",
+              fmtInt(m.tokens),
+              " tokens"
+            ] })
+          ] }) }, m.model)) }),
+          quality.scores.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Box16.default, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: quality.scores.map((s) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Box16.default, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Box16.default, { sx: { display: "flex", justifyContent: "space-between", gap: 1, mb: 0.5 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Typography14.default, { variant: "body2", sx: { fontWeight: 600 }, children: s.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Typography14.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" }, children: [
+                s.avg.toFixed(2),
+                s.count > 0 ? ` \xB7 n=${fmtInt(s.count)}` : ""
               ] })
-            ]
-          }
-        ) }) }) })
-      ] });
-    };
-    AuditLog = ({ api }) => {
-      const [page, setPage] = (0, import_react12.useState)(0);
-      const [pageSize, setPageSize] = (0, import_react12.useState)(25);
-      const [filters, setFilters] = (0, import_react12.useState)({});
-      const fetchParams = (0, import_react12.useMemo)(
-        () => ({ page: page + 1, page_size: pageSize, ...filters }),
-        [page, pageSize, filters]
-      );
-      const { value, loading, error } = (0, import_react_use.useAsync)(
-        () => api.getAuditLogs(fetchParams),
-        [api, fetchParams]
-      );
-      const entries = value?.audit_logs ?? [];
-      const total = value?.total ?? 0;
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-        SectionCard,
-        {
-          title: "Audit Log",
-          subtitle: loading ? "Loading\u2026" : `${total.toLocaleString()} event${total === 1 ? "" : "s"}`,
-          flush: true,
-          actions: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-              import_TextField6.default,
-              {
-                size: "small",
-                label: "Action",
-                select: true,
-                value: filters.action ?? "",
-                onChange: (e) => {
-                  setFilters((f) => ({ ...f, action: e.target.value || void 0 }));
-                  setPage(0);
-                },
-                sx: { minWidth: 150 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_MenuItem5.default, { value: "", children: "All actions" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_MenuItem5.default, { value: "created", children: "Created" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_MenuItem5.default, { value: "updated", children: "Updated" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_MenuItem5.default, { value: "deleted", children: "Deleted" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_MenuItem5.default, { value: "blocked", children: "Blocked" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-              import_TextField6.default,
-              {
-                size: "small",
-                label: "Table",
-                select: true,
-                value: filters.table_name ?? "",
-                onChange: (e) => {
-                  setFilters((f) => ({ ...f, table_name: e.target.value || void 0 }));
-                  setPage(0);
-                },
-                sx: { minWidth: 150 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_MenuItem5.default, { value: "", children: "All tables" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_MenuItem5.default, { value: "LiteLLM_VerificationToken", children: "Key" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_MenuItem5.default, { value: "LiteLLM_TeamTable", children: "Team" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_MenuItem5.default, { value: "LiteLLM_TeamMembership", children: "Team member" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_MenuItem5.default, { value: "LiteLLM_ObjectPermissionTable", children: "Team access (KB / MCP)" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_MenuItem5.default, { value: "LiteLLM_UserTable", children: "User" })
-                ]
-              }
-            ),
+            ] }),
             /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              import_TextField6.default,
+              Meter,
               {
-                size: "small",
-                label: "Changed by",
-                value: filters.changed_by ?? "",
-                onChange: (e) => {
-                  setFilters((f) => ({ ...f, changed_by: e.target.value || void 0 }));
-                  setPage(0);
-                },
-                sx: { minWidth: 180 }
+                value: s.avg <= 1 ? s.avg * 100 : s.avg,
+                ariaLabel: `${s.name}: average ${s.avg.toFixed(2)}`
               }
             )
-          ] }),
-          children: [
-            error && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Box16.default, { px: 2.5, pb: 2, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Alert5.default, { severity: "error", children: error.message }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableContainer6.default, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Table6.default, { size: "small", sx: dataTableSx, children: [
+          ] }, s.name)) })
+        ] });
+      };
+      const logStats = (0, import_react12.useMemo)(() => {
+        const rows = spendLogs?.data ?? [];
+        const hits = rows.filter((r) => r.cacheHit);
+        const cachedPromptTokens = hits.reduce((s, r) => s + (r.promptTokens ?? 0), 0);
+        const priced = models.map((m) => m.input_cost_per_token).filter((p) => p !== null && p !== void 0 && p > 0);
+        const avgInputPrice = priced.length > 0 ? priced.reduce((s, p) => s + p, 0) / priced.length : null;
+        return {
+          total: spendLogs?.total ?? rows.length,
+          hitRate: rows.length > 0 ? hits.length / rows.length : null,
+          // Estimate: cached prompt tokens billed at the average listed input price.
+          savedUsd: avgInputPrice !== null ? cachedPromptTokens * avgInputPrice : null,
+          failedWasteUsd: rows.filter((r) => failedRow(r.status)).reduce((s, r) => s + (r.spend ?? 0), 0),
+          truncated: spendLogs?.truncated ?? false
+        };
+      }, [spendLogs, models]);
+      const renderSpendLogsBody = () => {
+        if (logsLoading) return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Skeleton6.default, { variant: "rounded", height: 120 });
+        if (logsError) {
+          return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Alert5.default, { severity: "error", children: [
+            "Failed to load spend logs: ",
+            logsError.message || "Unknown error",
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Box16.default, { sx: { mt: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Button7.default, { size: "small", onClick: retryLogs, children: "Retry" }) })
+          ] });
+        }
+        if ((spendLogs?.data ?? []).length === 0) {
+          return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EmptyState, { message: "No spend logs in this period" });
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Box16.default, { sx: { display: "flex", gap: 3, flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Stat, { label: "Cache-hit rate", value: fmtPct1(logStats.hitRate) }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            Stat,
+            {
+              label: "Cache savings (est.)",
+              value: logStats.savedUsd !== null ? fmtUsd(logStats.savedUsd) : "\u2014"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Stat, { label: "Failed-request waste", value: fmtUsd(logStats.failedWasteUsd) }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Stat, { label: "Log rows", value: fmtInt(logStats.total) }),
+          logStats.truncated && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Typography14.default, { variant: "caption", color: "text.secondary", children: "Showing the first 1,000 rows \u2014 figures are a lower bound." })
+        ] });
+      };
+      const kpis = [
+        {
+          label: "Cost / 1k tokens",
+          value: summary.costPer1kTokens !== null ? fmtUsd(summary.costPer1kTokens) : "\u2014",
+          tone: "accent"
+        },
+        {
+          label: "Cost / request",
+          value: summary.costPerRequest !== null ? fmtUsd(summary.costPerRequest) : "\u2014",
+          tone: "info"
+        },
+        {
+          label: "Out : in ratio",
+          value: fmtRatio(summary.outputInputRatio),
+          tone: "neutral"
+        },
+        {
+          label: "Retry waste",
+          value: fmtUsd(summary.retryWasteUsd),
+          hint: `${fmtPct1(summary.retryWasteShare)} of spend`,
+          tone: "warning"
+        },
+        {
+          label: "Success rate",
+          value: fmtPct1(summary.successRate),
+          tone: "success"
+        }
+      ];
+      const renderEfficiencyBody = () => {
+        if (loading) return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Skeleton6.default, { variant: "rounded", height: 96 });
+        if (!usage) return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EmptyState, { message: "No usage in this period" });
+        return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MetricStrip, { metrics: kpis });
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Box16.default, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          SectionCard,
+          {
+            title: "Efficiency",
+            subtitle: `${dateRange.start.toLocaleDateString()} \u2013 ${dateRange.end.toLocaleDateString()}`,
+            description: "What each token and request costs, and how much failed requests waste.",
+            children: renderEfficiencyBody()
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Grid2.default, { container: true, spacing: 2, alignItems: "flex-start", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Grid2.default, { item: true, xs: 12, md: 5, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            SectionCard,
+            {
+              title: "Practice score",
+              subtitle: "Out of 100",
+              description: "Five everyday habits in one number \u2014 higher means cheaper, safer usage.",
+              children: loading ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Skeleton6.default, { variant: "rounded", height: 160 }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Box16.default, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Typography14.default, { sx: { fontSize: 30, fontWeight: 700, fontVariantNumeric: "tabular-nums" }, children: [
+                  score.total,
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Typography14.default, { component: "span", color: "text.secondary", sx: { fontSize: 16 }, children: "/100" })
+                ] }),
+                score.checks.map((c) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Box16.default, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Box16.default, { sx: { display: "flex", justifyContent: "space-between", gap: 1, mb: 0.5 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Typography14.default, { variant: "body2", sx: { fontWeight: 600 }, children: c.label }),
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Typography14.default, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" }, children: [
+                      c.points,
+                      "/",
+                      c.maxPoints
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    Meter,
+                    {
+                      value: c.maxPoints > 0 ? c.points / c.maxPoints * 100 : 0,
+                      ariaLabel: `${c.label}: ${c.points} of ${c.maxPoints}`
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Typography14.default, { variant: "caption", color: "text.secondary", children: c.detail })
+                ] }, c.id))
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Grid2.default, { item: true, xs: 12, md: 7, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            SectionCard,
+            {
+              title: "Cache & errors",
+              subtitle: "From spend logs (estimate)",
+              description: "Repeated prompts served from cache save money; failures still bill.",
+              children: renderSpendLogsBody()
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          SectionCard,
+          {
+            title: "Model opportunities",
+            description: "Where a cheaper model or a reliability fix would save the most.",
+            flush: true,
+            children: loading ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Box16.default, { sx: { p: 2.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Skeleton6.default, { variant: "rounded", height: 120 }) }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableContainer6.default, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Table6.default, { size: "small", sx: dataTableSx, children: [
               /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableHead6.default, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_TableRow6.default, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { sx: { width: 40 } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { children: "Time" }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { children: "Action" }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { children: "Table" }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { children: "Object ID" }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { children: "Changed By" })
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { children: "Model" }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { align: "right", children: "Spend" }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { align: "right", children: "Requests" }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { align: "right", children: "Failure" }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { align: "right", children: "Avg / req" }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { children: "Signal" })
               ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableBody6.default, { children: renderAuditLogBody(loading, entries) })
-            ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              import_TablePagination.default,
-              {
-                component: "div",
-                count: total,
-                page,
-                onPageChange: (_, p) => setPage(p),
-                rowsPerPage: pageSize,
-                onRowsPerPageChange: (e) => {
-                  setPageSize(Number(e.target.value));
-                  setPage(0);
-                },
-                rowsPerPageOptions: [10, 25, 50],
-                sx: (theme) => ({ borderTop: `1px solid ${theme.palette.divider}` })
-              }
-            )
-          ]
-        }
-      );
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableBody6.default, { children: opportunities.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableRow6.default, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { colSpan: 6, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EmptyState, { message: "No model activity in this period" }) }) }) : opportunities.map((o) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_TableRow6.default, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Typography14.default, { variant: "body2", sx: { fontWeight: 600 }, children: o.model }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { align: "right", children: fmtUsd(o.spend) }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { align: "right", children: fmtInt(o.requests) }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { align: "right", children: fmtPct1(o.failureRate) }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_TableCell6.default, { align: "right", children: fmtUsd(o.avgCostPerRequest) }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_TableCell6.default, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StatusPill, { label: FLAG_LABEL[o.flag], tone: FLAG_TONE[o.flag], title: o.hint }),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Typography14.default, { variant: "caption", color: "text.secondary", sx: { display: "block", mt: 0.25 }, children: o.hint })
+                ] })
+              ] }, o.model)) })
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          SectionCard,
+          {
+            title: "Quality scores",
+            description: "Independent answer-quality scores from Langfuse, when connected.",
+            children: renderQualityBody()
+          }
+        )
+      ] });
     };
   }
 });
 
-// src/dates.ts
-function toLocalDay(d) {
-  const year = d.getFullYear();
-  const month = String(d.getMonth() + 1).padStart(2, "0");
-  const day = String(d.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
-}
-function monthToDateRange(now = /* @__PURE__ */ new Date()) {
-  const start = new Date(now.getFullYear(), now.getMonth(), 1);
-  return {
-    startDate: toLocalDay(start),
-    endDate: toLocalDay(now)
-  };
-}
-var init_dates = __esm({
-  "src/dates.ts"() {
-    "use strict";
-  }
-});
-
 // src/feedback.ts
 function toastFor(kind, errorMsg) {
   switch (kind) {
@@ -6058,18 +6214,18 @@ function initDateRange() {
   else start.setDate(start.getDate() - 7);
   return { start, end };
 }
-var import_react13, import_Box17, import_Alert6, import_Button7, import_Typography15, import_Tabs2, import_Tab2, import_Grid2, import_Accordion2, import_AccordionSummary2, import_AccordionDetails2, import_ExpandMore, import_react_router_dom, import_react_use2, import_core_plugin_api5, import_core_components3, import_plugin_permission_react3, import_backstage_plugin_litellm_common5, import_jsx_runtime18, PERIOD_LS_KEY2, PAGE_TABS, isPageTab, LiteLLMPage;
+var import_react13, import_Box17, import_Alert6, import_Button8, import_Typography15, import_Tabs2, import_Tab2, import_Grid3, import_Accordion2, import_AccordionSummary2, import_AccordionDetails2, import_ExpandMore, import_react_router_dom, import_react_use2, import_core_plugin_api5, import_core_components3, import_plugin_permission_react3, import_backstage_plugin_litellm_common5, import_jsx_runtime18, PERIOD_LS_KEY2, PAGE_TABS, isPageTab, LiteLLMPage;
 var init_LiteLLMPage = __esm({
   "src/components/LiteLLMPage.tsx"() {
     "use strict";
     import_react13 = require("react");
     import_Box17 = __toESM(require("@mui/material/Box"));
     import_Alert6 = __toESM(require("@mui/material/Alert"));
-    import_Button7 = __toESM(require("@mui/material/Button"));
+    import_Button8 = __toESM(require("@mui/material/Button"));
     import_Typography15 = __toESM(require("@mui/material/Typography"));
     import_Tabs2 = __toESM(require("@mui/material/Tabs"));
     import_Tab2 = __toESM(require("@mui/material/Tab"));
-    import_Grid2 = __toESM(require("@mui/material/Grid"));
+    import_Grid3 = __toESM(require("@mui/material/Grid"));
     import_Accordion2 = __toESM(require("@mui/material/Accordion"));
     import_AccordionSummary2 = __toESM(require("@mui/material/AccordionSummary"));
     import_AccordionDetails2 = __toESM(require("@mui/material/AccordionDetails"));
@@ -6087,7 +6243,7 @@ var init_LiteLLMPage = __esm({
     init_LiteLLMBudgetWidget();
     init_TeamUsage();
     init_ModelsTable();
-    init_AuditLog();
+    init_InsightsTab();
     init_api();
     init_dates();
     import_backstage_plugin_litellm_common5 = require("@acarmisc/backstage-plugin-litellm-common");
@@ -6096,7 +6252,7 @@ var init_LiteLLMPage = __esm({
     init_unprovisionedCopy();
     import_jsx_runtime18 = require("react/jsx-runtime");
     PERIOD_LS_KEY2 = "litellm_usage_period";
-    PAGE_TABS = ["overview", "keys", "teams", "models", "audit"];
+    PAGE_TABS = ["overview", "keys", "teams", "models", "insights"];
     isPageTab = (v) => !!v && PAGE_TABS.includes(v);
     LiteLLMPage = () => {
       const api = (0, import_core_plugin_api5.useApi)(liteLlmApiRef);
@@ -6437,7 +6593,7 @@ var init_LiteLLMPage = __esm({
             /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Tab2.default, { label: "Keys", value: "keys" }),
             /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Tab2.default, { label: "Teams", value: "teams" }),
             /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Tab2.default, { label: "Models", value: "models" }),
-            userInfo.can_view_audit && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Tab2.default, { label: "Audit Log", value: "audit" })
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Tab2.default, { label: "Insights", value: "insights" })
           ]
         }
       );
@@ -6491,7 +6647,7 @@ var init_LiteLLMPage = __esm({
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                      import_Button7.default,
+                      import_Button8.default,
                       {
                         variant: "contained",
                         color: "primary",
@@ -6503,8 +6659,8 @@ var init_LiteLLMPage = __esm({
                 }
               ) });
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_Grid2.default, { container: true, spacing: 2, alignItems: "flex-start", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Grid2.default, { item: true, xs: 12, lg: 8, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_Grid3.default, { container: true, spacing: 2, alignItems: "flex-start", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Grid3.default, { item: true, xs: 12, lg: 8, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 UsageStats,
                 {
                   usage: usage ?? null,
@@ -6518,7 +6674,7 @@ var init_LiteLLMPage = __esm({
                   userInfo
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Grid2.default, { item: true, xs: 12, lg: 4, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LiteLLMBudgetWidget, { compact: true, collapsible: true, userInfo: userInfo ?? null, teams, keys: keys ?? [] }) })
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Grid3.default, { item: true, xs: 12, lg: 4, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LiteLLMBudgetWidget, { compact: true, collapsible: true, userInfo: userInfo ?? null, teams, keys: keys ?? [] }) })
             ] });
           })(),
           activeTab === "keys" && (() => {
@@ -6526,7 +6682,7 @@ var init_LiteLLMPage = __esm({
               return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_Alert6.default, { severity: "error", children: [
                 "Failed to load keys: ",
                 keysError.message || "Unknown error",
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Box17.default, { sx: { mt: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Button7.default, { size: "small", onClick: refreshKeys, children: "Retry" }) })
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Box17.default, { sx: { mt: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Button8.default, { size: "small", onClick: refreshKeys, children: "Retry" }) })
               ] });
             }
             return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -6550,7 +6706,7 @@ var init_LiteLLMPage = __esm({
               return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_Alert6.default, { severity: "error", children: [
                 "Failed to load teams: ",
                 teamsError.message || "Unknown error",
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Box17.default, { sx: { mt: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Button7.default, { size: "small", onClick: refreshTeams, children: "Retry" }) })
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Box17.default, { sx: { mt: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Button8.default, { size: "small", onClick: refreshTeams, children: "Retry" }) })
               ] });
             }
             const teamsById = /* @__PURE__ */ new Map();
@@ -6587,7 +6743,7 @@ var init_LiteLLMPage = __esm({
               return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_Alert6.default, { severity: "error", children: [
                 "Failed to load models: ",
                 modelsError.message || "Unknown error",
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Box17.default, { sx: { mt: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Button7.default, { size: "small", onClick: refreshModels, children: "Retry" }) })
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Box17.default, { sx: { mt: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Button8.default, { size: "small", onClick: refreshModels, children: "Retry" }) })
               ] });
             }
             return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -6599,7 +6755,17 @@ var init_LiteLLMPage = __esm({
               }
             );
           })(),
-          activeTab === "audit" && userInfo.can_view_audit && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AuditLog, { api })
+          activeTab === "insights" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            InsightsTab,
+            {
+              api,
+              usage: usage ?? null,
+              models: allModels ?? [],
+              keys: keys ?? [],
+              dateRange,
+              loading: usageLoading
+            }
+          )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           KeyFormDialog,
@@ -6773,14 +6939,14 @@ var ConnectPage_exports = {};
 __export(ConnectPage_exports, {
   ConnectPage: () => ConnectPage
 });
-var import_react14, import_Alert7, import_Box18, import_Button8, import_Checkbox3, import_FormControlLabel3, import_FormGroup, import_Paper9, import_Typography16, import_react_router_dom2, import_react_use3, import_core_plugin_api6, import_core_components4, import_jsx_runtime19, ConnectPage;
+var import_react14, import_Alert7, import_Box18, import_Button9, import_Checkbox3, import_FormControlLabel3, import_FormGroup, import_Paper9, import_Typography16, import_react_router_dom2, import_react_use3, import_core_plugin_api6, import_core_components4, import_jsx_runtime19, ConnectPage;
 var init_ConnectPage = __esm({
   "src/components/ConnectPage.tsx"() {
     "use strict";
     import_react14 = require("react");
     import_Alert7 = __toESM(require("@mui/material/Alert"));
     import_Box18 = __toESM(require("@mui/material/Box"));
-    import_Button8 = __toESM(require("@mui/material/Button"));
+    import_Button9 = __toESM(require("@mui/material/Button"));
     import_Checkbox3 = __toESM(require("@mui/material/Checkbox"));
     import_FormControlLabel3 = __toESM(require("@mui/material/FormControlLabel"));
     import_FormGroup = __toESM(require("@mui/material/FormGroup"));
@@ -6851,7 +7017,7 @@ var init_ConnectPage = __esm({
         )) }),
         error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Alert7.default, { severity: "error", sx: { mb: 2 }, children: error }),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          import_Button8.default,
+          import_Button9.default,
           {
             variant: "contained",
             onClick: connect,
@@ -6891,7 +7057,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/plugin.tsx
-var import_icons_material10 = require("@mui/icons-material");
+var import_icons_material9 = require("@mui/icons-material");
 var import_frontend_plugin_api4 = require("@backstage/frontend-plugin-api");
 init_api();
 init_routes();
@@ -6907,7 +7073,7 @@ var liteLlmPage = import_frontend_plugin_api4.PageBlueprint.make({
   params: {
     path: "/litellm",
     title: "LiteLLM",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_material10.TrendingUp, {}),
+    icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_material9.TrendingUp, {}),
     routeRef: rootRouteRef,
     loader: async () => {
       const { LiteLLMPage: LiteLLMPage2 } = await Promise.resolve().then(() => (init_LiteLLMPage(), LiteLLMPage_exports));
@@ -6947,7 +7113,7 @@ var import_Box19 = __toESM(require("@mui/material/Box"));
 var import_Typography17 = __toESM(require("@mui/material/Typography"));
 var import_FormControl2 = __toESM(require("@mui/material/FormControl"));
 var import_Select2 = __toESM(require("@mui/material/Select"));
-var import_MenuItem6 = __toESM(require("@mui/material/MenuItem"));
+var import_MenuItem5 = __toESM(require("@mui/material/MenuItem"));
 var import_Skeleton7 = __toESM(require("@mui/material/Skeleton"));
 var import_recharts3 = require("recharts");
 var import_core_plugin_api7 = require("@backstage/core-plugin-api");
@@ -7084,9 +7250,9 @@ var LiteLLMHomeWidget = ({
           displayEmpty: true,
           inputProps: { "aria-label": "Usage period" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_MenuItem6.default, { value: "today", children: "Today" }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_MenuItem6.default, { value: "7d", children: "7d" }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_MenuItem6.default, { value: "30d", children: "30d" })
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_MenuItem5.default, { value: "today", children: "Today" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_MenuItem5.default, { value: "7d", children: "7d" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_MenuItem5.default, { value: "30d", children: "30d" })
           ]
         }
       ) })
@@ -7157,13 +7323,13 @@ var import_react16 = require("react");
 var import_frontend_plugin_api6 = require("@backstage/frontend-plugin-api");
 var import_Paper11 = __toESM(require("@mui/material/Paper"));
 var import_Box20 = __toESM(require("@mui/material/Box"));
-var import_Button9 = __toESM(require("@mui/material/Button"));
+var import_Button10 = __toESM(require("@mui/material/Button"));
 var import_Typography18 = __toESM(require("@mui/material/Typography"));
 var import_Skeleton8 = __toESM(require("@mui/material/Skeleton"));
-var import_Collapse4 = __toESM(require("@mui/material/Collapse"));
-var import_styles13 = require("@mui/material/styles");
+var import_Collapse3 = __toESM(require("@mui/material/Collapse"));
+var import_styles12 = require("@mui/material/styles");
 var import_useMediaQuery = __toESM(require("@mui/material/useMediaQuery"));
-var import_icons_material11 = require("@mui/icons-material");
+var import_icons_material10 = require("@mui/icons-material");
 var import_recharts4 = require("recharts");
 var import_core_plugin_api8 = require("@backstage/core-plugin-api");
 var import_core_components6 = require("@backstage/core-components");
@@ -7574,7 +7740,7 @@ var LiteLLMBudgetGauges = ({
   keys: propKeys
 }) => {
   const api = (0, import_core_plugin_api8.useApi)(liteLlmApiRef);
-  const theme = (0, import_styles13.useTheme)();
+  const theme = (0, import_styles12.useTheme)();
   const isSmallScreen = (0, import_useMediaQuery.default)(theme.breakpoints.down("sm"));
   const gaugeSize = isSmallScreen ? Math.min(48, size) : size;
   const expandedRegionId = (0, import_react16.useId)();
@@ -7675,10 +7841,10 @@ var LiteLLMBudgetGauges = ({
         return onCreateKey ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GenerateKeyButton, { size: "small", label, onClick: onCreateKey }, key) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GenerateKeyButton, { size: "small", label, to: `${moduleHref}?generate=1` }, key);
       case "module":
         if (!moduleHref) return null;
-        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Button9.default, { size: "small", variant: "text", component: import_core_components6.Link, to: moduleHref, children: label }, key);
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Button10.default, { size: "small", variant: "text", component: import_core_components6.Link, to: moduleHref, children: label }, key);
       case "all-limits":
         return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_Button9.default,
+          import_Button10.default,
           {
             size: "small",
             variant: "text",
@@ -7686,7 +7852,7 @@ var LiteLLMBudgetGauges = ({
             "aria-expanded": isExpanded,
             "aria-controls": expandedRegionId,
             endIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-              import_icons_material11.ExpandMore,
+              import_icons_material10.ExpandMore,
               {
                 sx: (muiTheme) => ({
                   transform: isExpanded ? "rotate(180deg)" : "none",
@@ -7781,7 +7947,7 @@ var LiteLLMBudgetGauges = ({
           maxBudget: user?.max_budget ?? void 0
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Collapse4.default, { in: isExpanded, unmountOnExit: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Collapse3.default, { in: isExpanded, unmountOnExit: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         import_Box20.default,
         {
           id: expandedRegionId,