@acarmisc/backstage-plugin-litellm 0.37.0 → 0.39.0

package/dist/index.esm.js

@@ -295,6 +295,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");
       }
@@ -693,7 +712,7 @@ var init_surfaces = __esm({
   "src/components/ui/surfaces.tsx"() {
     "use strict";
     init_tokens();
-    SectionCard = ({ title, subtitle, actions, flush = false, children }) => /* @__PURE__ */ jsxs3(Paper2, { sx: { borderRadius: 2, overflow: "hidden" }, children: [
+    SectionCard = ({ title, subtitle, description, actions, flush = false, children }) => /* @__PURE__ */ jsxs3(Paper2, { sx: { borderRadius: 2, overflow: "hidden" }, children: [
       (title || actions) && /* @__PURE__ */ jsxs3(
         Box3,
         {
@@ -715,6 +734,7 @@ var init_surfaces = __esm({
           ]
         }
       ),
+      description && /* @__PURE__ */ jsx3(Typography2, { variant: "body2", color: "text.secondary", sx: { px: 2.5, pb: 1.5 }, children: description }),
       /* @__PURE__ */ jsx3(Box3, { sx: flush ? void 0 : { px: 2.5, pb: 2.5, pt: title ? 0 : 2.5 }, children })
     ] });
     ChartCard = ({ title, meta, height = 240, children }) => (
@@ -5664,271 +5684,101 @@ var init_ModelsTable = __esm({
   }
 });
 
-// src/components/AuditLog.tsx
-import { useMemo as useMemo8, useState as useState11 } from "react";
-import Box16 from "@mui/material/Box";
-import Typography14 from "@mui/material/Typography";
-import Table6 from "@mui/material/Table";
-import TableBody6 from "@mui/material/TableBody";
-import TableCell6 from "@mui/material/TableCell";
-import TableContainer6 from "@mui/material/TableContainer";
-import TableHead6 from "@mui/material/TableHead";
-import TableRow6 from "@mui/material/TableRow";
-import TablePagination from "@mui/material/TablePagination";
-import TextField6 from "@mui/material/TextField";
-import MenuItem5 from "@mui/material/MenuItem";
-import Skeleton6 from "@mui/material/Skeleton";
-import Collapse3 from "@mui/material/Collapse";
-import IconButton7 from "@mui/material/IconButton";
-import Alert5 from "@mui/material/Alert";
-import { alpha as alpha12 } from "@mui/material/styles";
-import { KeyboardArrowDown } from "@mui/icons-material";
-import { useAsync } from "react-use";
-import { Fragment as Fragment9, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
-function actionTone(action) {
-  if (!action) return "neutral";
-  for (const [key, tone] of Object.entries(ACTION_TONES)) {
-    if (action.toLowerCase().includes(key)) return tone;
-  }
-  return "info";
-}
-function prettyTableName(name) {
-  if (!name) return "\u2014";
-  return TABLE_LABELS[name] ?? name;
-}
-function formatDateTime(iso) {
-  try {
-    return new Date(iso).toLocaleString();
-  } catch {
-    return iso;
-  }
-}
-function renderAuditLogBody(loading, entries) {
-  if (loading) {
-    return /* @__PURE__ */ jsx17(TableRow6, { children: /* @__PURE__ */ jsx17(TableCell6, { colSpan: 6, sx: { py: 2 }, children: /* @__PURE__ */ jsx17(Skeleton6, { variant: "rounded", height: 160 }) }) });
-  }
-  if (entries.length === 0) {
-    return /* @__PURE__ */ jsx17(TableRow6, { children: /* @__PURE__ */ jsx17(TableCell6, { colSpan: 6, children: /* @__PURE__ */ jsx17(
-      EmptyState,
-      {
-        message: "No audit events found",
-        hint: "Try widening the filters or a different time window."
-      }
-    ) }) });
-  }
-  return entries.map((entry) => /* @__PURE__ */ jsx17(DetailRow, { entry }, entry.id));
-}
-var ACTION_TONES, TABLE_LABELS, DetailRow, AuditLog;
-var init_AuditLog = __esm({
-  "src/components/AuditLog.tsx"() {
+// src/insights.ts
+var costPer1k, summarizeUsage, scorePractices, modelOpportunities;
+var init_insights = __esm({
+  "src/insights.ts"() {
     "use strict";
-    init_ui();
-    ACTION_TONES = {
-      created: "success",
-      deleted: "danger",
-      updated: "warning",
-      blocked: "danger",
-      unblocked: "success"
+    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;
     };
-    TABLE_LABELS = {
-      LiteLLM_VerificationToken: "Key",
-      LiteLLM_TeamTable: "Team",
-      LiteLLM_TeamMembership: "Team member",
-      LiteLLM_ObjectPermissionTable: "Team access (KB / MCP)",
-      LiteLLM_UserTable: "User"
+    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
+      };
     };
-    DetailRow = ({ entry }) => {
-      const [open, setOpen] = useState11(false);
-      const hasDetail = entry.before_value || entry.updated_values;
-      return /* @__PURE__ */ jsxs16(Fragment9, { children: [
-        /* @__PURE__ */ jsxs16(TableRow6, { children: [
-          /* @__PURE__ */ jsx17(TableCell6, { sx: { width: 40, pr: 0 }, children: hasDetail && /* @__PURE__ */ jsx17(
-            IconButton7,
-            {
-              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__ */ jsx17(KeyboardArrowDown, { fontSize: "small" })
-            }
-          ) }),
-          /* @__PURE__ */ jsx17(TableCell6, { sx: { whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsx17(Typography14, { variant: "body2", color: "text.secondary", children: formatDateTime(entry.updated_at) }) }),
-          /* @__PURE__ */ jsx17(TableCell6, { children: entry.action && /* @__PURE__ */ jsx17(StatusPill, { label: entry.action, tone: actionTone(entry.action) }) }),
-          /* @__PURE__ */ jsx17(TableCell6, { children: /* @__PURE__ */ jsx17(Typography14, { variant: "body2", children: prettyTableName(entry.table_name) }) }),
-          /* @__PURE__ */ jsx17(TableCell6, { children: /* @__PURE__ */ jsx17(
-            Typography14,
-            {
-              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"
-            }
-          ) }),
-          /* @__PURE__ */ jsx17(TableCell6, { children: entry.changed_by ?? "\u2014" })
-        ] }),
-        hasDetail && /* @__PURE__ */ jsx17(TableRow6, { sx: { "&&:hover": { bgcolor: "transparent" } }, children: /* @__PURE__ */ jsx17(TableCell6, { colSpan: 6, sx: { "&&": { py: 0, border: 0 } }, children: /* @__PURE__ */ jsx17(Collapse3, { in: open, unmountOnExit: true, children: /* @__PURE__ */ jsxs16(
-          Box16,
-          {
-            display: "flex",
-            gap: 2,
-            flexWrap: "wrap",
-            sx: (theme) => ({
-              p: 2,
-              mb: 1.5,
-              borderRadius: 1.5,
-              bgcolor: alpha12(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.05 : 0.03)
-            }),
-            children: [
-              entry.before_value && /* @__PURE__ */ jsxs16(Box16, { flex: 1, minWidth: 200, children: [
-                /* @__PURE__ */ jsx17(
-                  Typography14,
-                  {
-                    variant: "caption",
-                    color: "text.secondary",
-                    display: "block",
-                    mb: 0.75,
-                    sx: { fontSize: 10.5, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase" },
-                    children: "Before"
-                  }
-                ),
-                /* @__PURE__ */ jsx17(Typography14, { 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__ */ jsxs16(Box16, { flex: 1, minWidth: 200, children: [
-                /* @__PURE__ */ jsx17(
-                  Typography14,
-                  {
-                    variant: "caption",
-                    color: "text.secondary",
-                    display: "block",
-                    mb: 0.75,
-                    sx: { fontSize: 10.5, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase" },
-                    children: "After"
-                  }
-                ),
-                /* @__PURE__ */ jsx17(Typography14, { 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) })
-              ] })
-            ]
-          }
-        ) }) }) })
-      ] });
+    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 };
     };
-    AuditLog = ({ api }) => {
-      const [page, setPage] = useState11(0);
-      const [pageSize, setPageSize] = useState11(25);
-      const [filters, setFilters] = useState11({});
-      const fetchParams = useMemo8(
-        () => ({ page: page + 1, page_size: pageSize, ...filters }),
-        [page, pageSize, filters]
-      );
-      const { value, loading, error } = useAsync(
-        () => api.getAuditLogs(fetchParams),
-        [api, fetchParams]
-      );
-      const entries = value?.audit_logs ?? [];
-      const total = value?.total ?? 0;
-      return /* @__PURE__ */ jsxs16(
-        SectionCard,
-        {
-          title: "Audit Log",
-          subtitle: loading ? "Loading\u2026" : `${total.toLocaleString()} event${total === 1 ? "" : "s"}`,
-          flush: true,
-          actions: /* @__PURE__ */ jsxs16(Fragment9, { children: [
-            /* @__PURE__ */ jsxs16(
-              TextField6,
-              {
-                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__ */ jsx17(MenuItem5, { value: "", children: "All actions" }),
-                  /* @__PURE__ */ jsx17(MenuItem5, { value: "created", children: "Created" }),
-                  /* @__PURE__ */ jsx17(MenuItem5, { value: "updated", children: "Updated" }),
-                  /* @__PURE__ */ jsx17(MenuItem5, { value: "deleted", children: "Deleted" }),
-                  /* @__PURE__ */ jsx17(MenuItem5, { value: "blocked", children: "Blocked" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs16(
-              TextField6,
-              {
-                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__ */ jsx17(MenuItem5, { value: "", children: "All tables" }),
-                  /* @__PURE__ */ jsx17(MenuItem5, { value: "LiteLLM_VerificationToken", children: "Key" }),
-                  /* @__PURE__ */ jsx17(MenuItem5, { value: "LiteLLM_TeamTable", children: "Team" }),
-                  /* @__PURE__ */ jsx17(MenuItem5, { value: "LiteLLM_TeamMembership", children: "Team member" }),
-                  /* @__PURE__ */ jsx17(MenuItem5, { value: "LiteLLM_ObjectPermissionTable", children: "Team access (KB / MCP)" }),
-                  /* @__PURE__ */ jsx17(MenuItem5, { value: "LiteLLM_UserTable", children: "User" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx17(
-              TextField6,
-              {
-                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 }
-              }
-            )
-          ] }),
-          children: [
-            error && /* @__PURE__ */ jsx17(Box16, { px: 2.5, pb: 2, children: /* @__PURE__ */ jsx17(Alert5, { severity: "error", children: error.message }) }),
-            /* @__PURE__ */ jsx17(TableContainer6, { children: /* @__PURE__ */ jsxs16(Table6, { size: "small", sx: dataTableSx, children: [
-              /* @__PURE__ */ jsx17(TableHead6, { children: /* @__PURE__ */ jsxs16(TableRow6, { children: [
-                /* @__PURE__ */ jsx17(TableCell6, { sx: { width: 40 } }),
-                /* @__PURE__ */ jsx17(TableCell6, { children: "Time" }),
-                /* @__PURE__ */ jsx17(TableCell6, { children: "Action" }),
-                /* @__PURE__ */ jsx17(TableCell6, { children: "Table" }),
-                /* @__PURE__ */ jsx17(TableCell6, { children: "Object ID" }),
-                /* @__PURE__ */ jsx17(TableCell6, { children: "Changed By" })
-              ] }) }),
-              /* @__PURE__ */ jsx17(TableBody6, { children: renderAuditLogBody(loading, entries) })
-            ] }) }),
-            /* @__PURE__ */ jsx17(
-              TablePagination,
-              {
-                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}` })
-              }
-            )
-          ]
+    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" };
+      });
     };
   }
 });
@@ -5953,6 +5803,312 @@ var init_dates = __esm({
   }
 });
 
+// src/components/InsightsTab.tsx
+import { useMemo as useMemo8 } from "react";
+import Box16 from "@mui/material/Box";
+import Grid2 from "@mui/material/Grid";
+import Typography14 from "@mui/material/Typography";
+import Alert5 from "@mui/material/Alert";
+import Button7 from "@mui/material/Button";
+import Table6 from "@mui/material/Table";
+import TableBody6 from "@mui/material/TableBody";
+import TableCell6 from "@mui/material/TableCell";
+import TableContainer6 from "@mui/material/TableContainer";
+import TableHead6 from "@mui/material/TableHead";
+import TableRow6 from "@mui/material/TableRow";
+import Skeleton6 from "@mui/material/Skeleton";
+import { useAsyncRetry } from "react-use";
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+var FLAG_TONE, FLAG_LABEL, fmtRatio, fmtPct1, failedRow, InsightsTab;
+var init_InsightsTab = __esm({
+  "src/components/InsightsTab.tsx"() {
+    "use strict";
+    init_insights();
+    init_format();
+    init_dates();
+    init_ui();
+    FLAG_TONE = {
+      "failure-outlier": "danger",
+      "downgrade-candidate": "warning",
+      ok: "success"
+    };
+    FLAG_LABEL = {
+      "failure-outlier": "Failure outlier",
+      "downgrade-candidate": "Downgrade candidate",
+      ok: "OK"
+    };
+    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 = useMemo8(() => summarizeUsage(usage, models), [usage, models]);
+      const keyStats = useMemo8(
+        () => ({
+          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 = useMemo8(
+        () => scorePractices(summary, keyStats),
+        [summary, keyStats]
+      );
+      const opportunities = useMemo8(() => {
+        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
+      } = 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
+      } = 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__ */ jsx17(Skeleton6, { variant: "rounded", height: 120 });
+        if (qualityError) {
+          return /* @__PURE__ */ jsxs16(Alert5, { severity: "error", children: [
+            "Failed to load quality scores: ",
+            qualityError.message || "Unknown error",
+            /* @__PURE__ */ jsx17(Box16, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx17(Button7, { size: "small", onClick: retryQuality, children: "Retry" }) })
+          ] });
+        }
+        if (!quality || quality.configured === false) {
+          return /* @__PURE__ */ jsx17(
+            EmptyState,
+            {
+              message: "Quality scores \u2014 connect Langfuse",
+              hint: "LLM-as-judge evaluation is not configured for this deployment."
+            }
+          );
+        }
+        if (quality.byModel.length === 0 && quality.scores.length === 0) {
+          return /* @__PURE__ */ jsx17(EmptyState, { message: "No quality data in this period" });
+        }
+        return /* @__PURE__ */ jsxs16(Box16, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+          quality.byModel.length > 0 && /* @__PURE__ */ jsx17(Box16, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: quality.byModel.map((m) => /* @__PURE__ */ jsx17(Box16, { children: /* @__PURE__ */ jsxs16(Box16, { sx: { display: "flex", justifyContent: "space-between", gap: 1, mb: 0.5 }, children: [
+            /* @__PURE__ */ jsx17(Typography14, { variant: "body2", sx: { fontWeight: 600 }, children: m.model }),
+            /* @__PURE__ */ jsxs16(Typography14, { 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__ */ jsx17(Box16, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: quality.scores.map((s) => /* @__PURE__ */ jsxs16(Box16, { children: [
+            /* @__PURE__ */ jsxs16(Box16, { sx: { display: "flex", justifyContent: "space-between", gap: 1, mb: 0.5 }, children: [
+              /* @__PURE__ */ jsx17(Typography14, { variant: "body2", sx: { fontWeight: 600 }, children: s.name }),
+              /* @__PURE__ */ jsxs16(Typography14, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" }, children: [
+                s.avg.toFixed(2),
+                s.count > 0 ? ` \xB7 n=${fmtInt(s.count)}` : ""
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx17(
+              Meter,
+              {
+                value: s.avg <= 1 ? s.avg * 100 : s.avg,
+                ariaLabel: `${s.name}: average ${s.avg.toFixed(2)}`
+              }
+            )
+          ] }, s.name)) })
+        ] });
+      };
+      const logStats = useMemo8(() => {
+        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__ */ jsx17(Skeleton6, { variant: "rounded", height: 120 });
+        if (logsError) {
+          return /* @__PURE__ */ jsxs16(Alert5, { severity: "error", children: [
+            "Failed to load spend logs: ",
+            logsError.message || "Unknown error",
+            /* @__PURE__ */ jsx17(Box16, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx17(Button7, { size: "small", onClick: retryLogs, children: "Retry" }) })
+          ] });
+        }
+        if ((spendLogs?.data ?? []).length === 0) {
+          return /* @__PURE__ */ jsx17(EmptyState, { message: "No spend logs in this period" });
+        }
+        return /* @__PURE__ */ jsxs16(Box16, { sx: { display: "flex", gap: 3, flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ jsx17(Stat, { label: "Cache-hit rate", value: fmtPct1(logStats.hitRate) }),
+          /* @__PURE__ */ jsx17(
+            Stat,
+            {
+              label: "Cache savings (est.)",
+              value: logStats.savedUsd !== null ? fmtUsd(logStats.savedUsd) : "\u2014"
+            }
+          ),
+          /* @__PURE__ */ jsx17(Stat, { label: "Failed-request waste", value: fmtUsd(logStats.failedWasteUsd) }),
+          /* @__PURE__ */ jsx17(Stat, { label: "Log rows", value: fmtInt(logStats.total) }),
+          logStats.truncated && /* @__PURE__ */ jsx17(Typography14, { 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__ */ jsx17(Skeleton6, { variant: "rounded", height: 96 });
+        if (!usage) return /* @__PURE__ */ jsx17(EmptyState, { message: "No usage in this period" });
+        return /* @__PURE__ */ jsx17(MetricStrip, { metrics: kpis });
+      };
+      return /* @__PURE__ */ jsxs16(Box16, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+        /* @__PURE__ */ jsx17(
+          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__ */ jsxs16(Grid2, { container: true, spacing: 2, alignItems: "flex-start", children: [
+          /* @__PURE__ */ jsx17(Grid2, { item: true, xs: 12, md: 5, children: /* @__PURE__ */ jsx17(
+            SectionCard,
+            {
+              title: "Practice score",
+              subtitle: "Out of 100",
+              description: "Five everyday habits in one number \u2014 higher means cheaper, safer usage.",
+              children: loading ? /* @__PURE__ */ jsx17(Skeleton6, { variant: "rounded", height: 160 }) : /* @__PURE__ */ jsxs16(Box16, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: [
+                /* @__PURE__ */ jsxs16(Typography14, { sx: { fontSize: 30, fontWeight: 700, fontVariantNumeric: "tabular-nums" }, children: [
+                  score.total,
+                  /* @__PURE__ */ jsx17(Typography14, { component: "span", color: "text.secondary", sx: { fontSize: 16 }, children: "/100" })
+                ] }),
+                score.checks.map((c) => /* @__PURE__ */ jsxs16(Box16, { children: [
+                  /* @__PURE__ */ jsxs16(Box16, { sx: { display: "flex", justifyContent: "space-between", gap: 1, mb: 0.5 }, children: [
+                    /* @__PURE__ */ jsx17(Typography14, { variant: "body2", sx: { fontWeight: 600 }, children: c.label }),
+                    /* @__PURE__ */ jsxs16(Typography14, { variant: "caption", color: "text.secondary", sx: { fontVariantNumeric: "tabular-nums" }, children: [
+                      c.points,
+                      "/",
+                      c.maxPoints
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx17(
+                    Meter,
+                    {
+                      value: c.maxPoints > 0 ? c.points / c.maxPoints * 100 : 0,
+                      ariaLabel: `${c.label}: ${c.points} of ${c.maxPoints}`
+                    }
+                  ),
+                  /* @__PURE__ */ jsx17(Typography14, { variant: "caption", color: "text.secondary", children: c.detail })
+                ] }, c.id))
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsx17(Grid2, { item: true, xs: 12, md: 7, children: /* @__PURE__ */ jsx17(
+            SectionCard,
+            {
+              title: "Cache & errors",
+              subtitle: "From spend logs (estimate)",
+              description: "Repeated prompts served from cache save money; failures still bill.",
+              children: renderSpendLogsBody()
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx17(
+          SectionCard,
+          {
+            title: "Model opportunities",
+            description: "Where a cheaper model or a reliability fix would save the most.",
+            flush: true,
+            children: loading ? /* @__PURE__ */ jsx17(Box16, { sx: { p: 2.5 }, children: /* @__PURE__ */ jsx17(Skeleton6, { variant: "rounded", height: 120 }) }) : /* @__PURE__ */ jsx17(TableContainer6, { children: /* @__PURE__ */ jsxs16(Table6, { size: "small", sx: dataTableSx, children: [
+              /* @__PURE__ */ jsx17(TableHead6, { children: /* @__PURE__ */ jsxs16(TableRow6, { children: [
+                /* @__PURE__ */ jsx17(TableCell6, { children: "Model" }),
+                /* @__PURE__ */ jsx17(TableCell6, { align: "right", children: "Spend" }),
+                /* @__PURE__ */ jsx17(TableCell6, { align: "right", children: "Requests" }),
+                /* @__PURE__ */ jsx17(TableCell6, { align: "right", children: "Failure" }),
+                /* @__PURE__ */ jsx17(TableCell6, { align: "right", children: "Avg / req" }),
+                /* @__PURE__ */ jsx17(TableCell6, { children: "Signal" })
+              ] }) }),
+              /* @__PURE__ */ jsx17(TableBody6, { children: opportunities.length === 0 ? /* @__PURE__ */ jsx17(TableRow6, { children: /* @__PURE__ */ jsx17(TableCell6, { colSpan: 6, children: /* @__PURE__ */ jsx17(EmptyState, { message: "No model activity in this period" }) }) }) : opportunities.map((o) => /* @__PURE__ */ jsxs16(TableRow6, { children: [
+                /* @__PURE__ */ jsx17(TableCell6, { children: /* @__PURE__ */ jsx17(Typography14, { variant: "body2", sx: { fontWeight: 600 }, children: o.model }) }),
+                /* @__PURE__ */ jsx17(TableCell6, { align: "right", children: fmtUsd(o.spend) }),
+                /* @__PURE__ */ jsx17(TableCell6, { align: "right", children: fmtInt(o.requests) }),
+                /* @__PURE__ */ jsx17(TableCell6, { align: "right", children: fmtPct1(o.failureRate) }),
+                /* @__PURE__ */ jsx17(TableCell6, { align: "right", children: fmtUsd(o.avgCostPerRequest) }),
+                /* @__PURE__ */ jsxs16(TableCell6, { children: [
+                  /* @__PURE__ */ jsx17(StatusPill, { label: FLAG_LABEL[o.flag], tone: FLAG_TONE[o.flag], title: o.hint }),
+                  /* @__PURE__ */ jsx17(Typography14, { variant: "caption", color: "text.secondary", sx: { display: "block", mt: 0.25 }, children: o.hint })
+                ] })
+              ] }, o.model)) })
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ jsx17(
+          SectionCard,
+          {
+            title: "Quality scores",
+            description: "Independent answer-quality scores from Langfuse, when connected.",
+            children: renderQualityBody()
+          }
+        )
+      ] });
+    };
+  }
+});
+
 // src/feedback.ts
 function toastFor(kind, errorMsg) {
   switch (kind) {
@@ -6047,20 +6203,20 @@ var LiteLLMPage_exports = {};
 __export(LiteLLMPage_exports, {
   LiteLLMPage: () => LiteLLMPage
 });
-import { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo9, useState as useState12 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo9, useState as useState11 } from "react";
 import Box17 from "@mui/material/Box";
 import Alert6 from "@mui/material/Alert";
-import Button7 from "@mui/material/Button";
+import Button8 from "@mui/material/Button";
 import Typography15 from "@mui/material/Typography";
 import Tabs2 from "@mui/material/Tabs";
 import Tab2 from "@mui/material/Tab";
-import Grid2 from "@mui/material/Grid";
+import Grid3 from "@mui/material/Grid";
 import Accordion2 from "@mui/material/Accordion";
 import AccordionSummary2 from "@mui/material/AccordionSummary";
 import AccordionDetails2 from "@mui/material/AccordionDetails";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { useSearchParams } from "react-router-dom";
-import { useAsync as useAsync2, useAsyncRetry } from "react-use";
+import { useAsync, useAsyncRetry as useAsyncRetry2 } from "react-use";
 import { useApi as useApi4, alertApiRef as alertApiRef2 } from "@backstage/core-plugin-api";
 import { Content, Progress } from "@backstage/core-components";
 import { usePermission as usePermission3 } from "@backstage/plugin-permission-react";
@@ -6098,20 +6254,20 @@ var init_LiteLLMPage = __esm({
     init_LiteLLMBudgetWidget();
     init_TeamUsage();
     init_ModelsTable();
-    init_AuditLog();
+    init_InsightsTab();
     init_api();
     init_dates();
     init_feedback();
     init_teamMemberManager();
     init_unprovisionedCopy();
     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 = useApi4(liteLlmApiRef);
       const alertApi = useApi4(alertApiRef2);
-      const [dateRange, setDateRange] = useState12(initDateRange);
-      const [currentPreset, setCurrentPreset] = useState12(() => {
+      const [dateRange, setDateRange] = useState11(initDateRange);
+      const [currentPreset, setCurrentPreset] = useState11(() => {
         try {
           return localStorage.getItem(PERIOD_LS_KEY2) ?? "7d";
         } catch {
@@ -6119,15 +6275,15 @@ var init_LiteLLMPage = __esm({
         }
       });
       const [searchParams, setSearchParams] = useSearchParams();
-      const [activeTab, setActiveTab] = useState12(() => {
+      const [activeTab, setActiveTab] = useState11(() => {
         const t = searchParams.get("tab");
         return isPageTab(t) ? t : "overview";
       });
-      const [filter, setFilter] = useState12(() => {
+      const [filter, setFilter] = useState11(() => {
         const f = searchParams.get("filter");
         return f === "expired" || f === "expiring" ? f : void 0;
       });
-      const [generateDialogOpen, setGenerateDialogOpen] = useState12(
+      const [generateDialogOpen, setGenerateDialogOpen] = useState11(
         () => searchParams.get("generate") === "1"
       );
       useEffect6(() => {
@@ -6183,31 +6339,31 @@ var init_LiteLLMPage = __esm({
           { replace: true }
         );
       }, [setSearchParams]);
-      const [manageTeam, setManageTeam] = useState12(null);
-      const [keyToEdit, setKeyToEdit] = useState12(null);
+      const [manageTeam, setManageTeam] = useState11(null);
+      const [keyToEdit, setKeyToEdit] = useState11(null);
       const keyFormOpen = generateDialogOpen || !!keyToEdit;
-      const [teamUsageCache, setTeamUsageCache] = useState12({});
-      const [teamUsageLoading, setTeamUsageLoading] = useState12({});
-      const [memberUsageCache, setMemberUsageCache] = useState12({});
-      const [memberUsageLoading, setMemberUsageLoading] = useState12({});
-      const { value: userInfo, loading: userLoading, error: userError } = useAsync2(
+      const [teamUsageCache, setTeamUsageCache] = useState11({});
+      const [teamUsageLoading, setTeamUsageLoading] = useState11({});
+      const [memberUsageCache, setMemberUsageCache] = useState11({});
+      const [memberUsageLoading, setMemberUsageLoading] = useState11({});
+      const { value: userInfo, loading: userLoading, error: userError } = useAsync(
         () => api.getUserInfo(),
         [api]
       );
-      const { value: keys, loading: keysLoading, error: keysError, retry: refreshKeys } = useAsyncRetry(
+      const { value: keys, loading: keysLoading, error: keysError, retry: refreshKeys } = useAsyncRetry2(
         () => api.listKeys(),
         [api]
       );
-      const { value: allModels, loading: modelsLoading, error: modelsError, retry: refreshModels } = useAsyncRetry(
+      const { value: allModels, loading: modelsLoading, error: modelsError, retry: refreshModels } = useAsyncRetry2(
         () => api.listModels(),
         [api]
       );
-      const { value: allTeams, loading: teamsLoading, error: teamsError, retry: refreshTeams } = useAsyncRetry(
+      const { value: allTeams, loading: teamsLoading, error: teamsError, retry: refreshTeams } = useAsyncRetry2(
         () => api.getTeams(),
         [api]
       );
-      const { value: liteLlmConfig } = useAsync2(() => api.getConfig(), [api]);
-      const { value: managedTeams } = useAsync2(
+      const { value: liteLlmConfig } = useAsync(() => api.getConfig(), [api]);
+      const { value: managedTeams } = useAsync(
         async () => liteLlmConfig?.teamManagement?.enabled ? api.getManagedTeams().catch(() => []) : [],
         [api, liteLlmConfig]
       );
@@ -6218,11 +6374,11 @@ var init_LiteLLMPage = __esm({
       const { allowed: canManageMcpServers } = usePermission3({ permission: litellmTeamMcpManagePermission });
       const teamMgmtEnabled = liteLlmConfig?.teamManagement?.enabled ?? false;
       const objectPermsEnabled = liteLlmConfig?.teamManagement?.objectPermissionsEnabled ?? false;
-      const { value: vectorStores } = useAsync2(
+      const { value: vectorStores } = useAsync(
         async () => objectPermsEnabled ? api.getVectorStores().catch(() => []) : [],
         [api, objectPermsEnabled]
       );
-      const { value: mcpServers } = useAsync2(
+      const { value: mcpServers } = useAsync(
         async () => objectPermsEnabled ? api.getMcpServers().catch(() => []) : [],
         [api, objectPermsEnabled]
       );
@@ -6238,7 +6394,7 @@ var init_LiteLLMPage = __esm({
           (t) => t.members_with_roles?.some((m) => m.user_id === userId)
         );
       }, [allTeams, userInfo]);
-      const { value: usage, loading: usageLoading, error: usageError, retry: refreshUsage } = useAsyncRetry(async () => {
+      const { value: usage, loading: usageLoading, error: usageError, retry: refreshUsage } = useAsyncRetry2(async () => {
         const startDate = toLocalDay(dateRange.start);
         const endDate = toLocalDay(dateRange.end);
         return api.getUsage(startDate, endDate);
@@ -6446,7 +6602,7 @@ var init_LiteLLMPage = __esm({
             /* @__PURE__ */ jsx18(Tab2, { label: "Keys", value: "keys" }),
             /* @__PURE__ */ jsx18(Tab2, { label: "Teams", value: "teams" }),
             /* @__PURE__ */ jsx18(Tab2, { label: "Models", value: "models" }),
-            userInfo.can_view_audit && /* @__PURE__ */ jsx18(Tab2, { label: "Audit Log", value: "audit" })
+            /* @__PURE__ */ jsx18(Tab2, { label: "Insights", value: "insights" })
           ]
         }
       );
@@ -6500,7 +6656,7 @@ var init_LiteLLMPage = __esm({
                       }
                     ),
                     /* @__PURE__ */ jsx18(
-                      Button7,
+                      Button8,
                       {
                         variant: "contained",
                         color: "primary",
@@ -6512,8 +6668,8 @@ var init_LiteLLMPage = __esm({
                 }
               ) });
             }
-            return /* @__PURE__ */ jsxs17(Grid2, { container: true, spacing: 2, alignItems: "flex-start", children: [
-              /* @__PURE__ */ jsx18(Grid2, { item: true, xs: 12, lg: 8, children: /* @__PURE__ */ jsx18(
+            return /* @__PURE__ */ jsxs17(Grid3, { container: true, spacing: 2, alignItems: "flex-start", children: [
+              /* @__PURE__ */ jsx18(Grid3, { item: true, xs: 12, lg: 8, children: /* @__PURE__ */ jsx18(
                 UsageStats,
                 {
                   usage: usage ?? null,
@@ -6527,7 +6683,7 @@ var init_LiteLLMPage = __esm({
                   userInfo
                 }
               ) }),
-              /* @__PURE__ */ jsx18(Grid2, { item: true, xs: 12, lg: 4, children: /* @__PURE__ */ jsx18(LiteLLMBudgetWidget, { compact: true, collapsible: true, userInfo: userInfo ?? null, teams, keys: keys ?? [] }) })
+              /* @__PURE__ */ jsx18(Grid3, { item: true, xs: 12, lg: 4, children: /* @__PURE__ */ jsx18(LiteLLMBudgetWidget, { compact: true, collapsible: true, userInfo: userInfo ?? null, teams, keys: keys ?? [] }) })
             ] });
           })(),
           activeTab === "keys" && (() => {
@@ -6535,7 +6691,7 @@ var init_LiteLLMPage = __esm({
               return /* @__PURE__ */ jsxs17(Alert6, { severity: "error", children: [
                 "Failed to load keys: ",
                 keysError.message || "Unknown error",
-                /* @__PURE__ */ jsx18(Box17, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx18(Button7, { size: "small", onClick: refreshKeys, children: "Retry" }) })
+                /* @__PURE__ */ jsx18(Box17, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx18(Button8, { size: "small", onClick: refreshKeys, children: "Retry" }) })
               ] });
             }
             return /* @__PURE__ */ jsx18(
@@ -6559,7 +6715,7 @@ var init_LiteLLMPage = __esm({
               return /* @__PURE__ */ jsxs17(Alert6, { severity: "error", children: [
                 "Failed to load teams: ",
                 teamsError.message || "Unknown error",
-                /* @__PURE__ */ jsx18(Box17, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx18(Button7, { size: "small", onClick: refreshTeams, children: "Retry" }) })
+                /* @__PURE__ */ jsx18(Box17, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx18(Button8, { size: "small", onClick: refreshTeams, children: "Retry" }) })
               ] });
             }
             const teamsById = /* @__PURE__ */ new Map();
@@ -6596,7 +6752,7 @@ var init_LiteLLMPage = __esm({
               return /* @__PURE__ */ jsxs17(Alert6, { severity: "error", children: [
                 "Failed to load models: ",
                 modelsError.message || "Unknown error",
-                /* @__PURE__ */ jsx18(Box17, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx18(Button7, { size: "small", onClick: refreshModels, children: "Retry" }) })
+                /* @__PURE__ */ jsx18(Box17, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx18(Button8, { size: "small", onClick: refreshModels, children: "Retry" }) })
               ] });
             }
             return /* @__PURE__ */ jsx18(
@@ -6608,7 +6764,17 @@ var init_LiteLLMPage = __esm({
               }
             );
           })(),
-          activeTab === "audit" && userInfo.can_view_audit && /* @__PURE__ */ jsx18(AuditLog, { api })
+          activeTab === "insights" && /* @__PURE__ */ jsx18(
+            InsightsTab,
+            {
+              api,
+              usage: usage ?? null,
+              models: allModels ?? [],
+              keys: keys ?? [],
+              dateRange,
+              loading: usageLoading
+            }
+          )
         ] }),
         /* @__PURE__ */ jsx18(
           KeyFormDialog,
@@ -6782,17 +6948,17 @@ var ConnectPage_exports = {};
 __export(ConnectPage_exports, {
   ConnectPage: () => ConnectPage
 });
-import { useState as useState13 } from "react";
+import { useState as useState12 } from "react";
 import Alert7 from "@mui/material/Alert";
 import Box18 from "@mui/material/Box";
-import Button8 from "@mui/material/Button";
+import Button9 from "@mui/material/Button";
 import Checkbox3 from "@mui/material/Checkbox";
 import FormControlLabel3 from "@mui/material/FormControlLabel";
 import FormGroup from "@mui/material/FormGroup";
 import Paper9 from "@mui/material/Paper";
 import Typography16 from "@mui/material/Typography";
 import { useSearchParams as useSearchParams2 } from "react-router-dom";
-import { useAsync as useAsync3 } from "react-use";
+import { useAsync as useAsync2 } from "react-use";
 import { useApi as useApi5 } from "@backstage/core-plugin-api";
 import { Content as Content2, Progress as Progress2 } from "@backstage/core-components";
 import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -6809,10 +6975,10 @@ var init_ConnectPage = __esm({
       const state = params.get("state") ?? "";
       const client = params.get("client") || "a local application";
       const have = new Set((params.get("have") ?? "").split(",").filter(Boolean));
-      const teams = useAsync3(() => api.getTeams(), [api]);
-      const [selected, setSelected] = useState13();
-      const [busy, setBusy] = useState13(false);
-      const [error, setError] = useState13();
+      const teams = useAsync2(() => api.getTeams(), [api]);
+      const [selected, setSelected] = useState12();
+      const [busy, setBusy] = useState12(false);
+      const [error, setError] = useState12();
       if (!isLoopbackCallback(redirectUri)) {
         return /* @__PURE__ */ jsx19(Content2, { children: /* @__PURE__ */ jsx19(Alert7, { severity: "error", children: "Invalid connection link: redirect_uri must be http://localhost:<port>/callback." }) });
       }
@@ -6860,7 +7026,7 @@ var init_ConnectPage = __esm({
         )) }),
         error && /* @__PURE__ */ jsx19(Alert7, { severity: "error", sx: { mb: 2 }, children: error }),
         /* @__PURE__ */ jsx19(
-          Button8,
+          Button9,
           {
             variant: "contained",
             onClick: connect,
@@ -6937,13 +7103,13 @@ init_format();
 init_dates();
 init_ui();
 init_widgetState();
-import { useEffect as useEffect7, useMemo as useMemo10, useState as useState14 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo10, useState as useState13 } from "react";
 import Paper10 from "@mui/material/Paper";
 import Box19 from "@mui/material/Box";
 import Typography17 from "@mui/material/Typography";
 import FormControl2 from "@mui/material/FormControl";
 import Select2 from "@mui/material/Select";
-import MenuItem6 from "@mui/material/MenuItem";
+import MenuItem5 from "@mui/material/MenuItem";
 import Skeleton7 from "@mui/material/Skeleton";
 import { AreaChart as AreaChart3, Area as Area3, XAxis as XAxis3, Tooltip as Tooltip8, ResponsiveContainer as ResponsiveContainer3 } from "recharts";
 import { useApi as useApi6 } from "@backstage/core-plugin-api";
@@ -6993,7 +7159,7 @@ function usageSummary(usage) {
 }
 
 // src/components/LiteLLMHomeWidget.tsx
-import { Fragment as Fragment10, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 function presetToDateRange(preset) {
   const end = /* @__PURE__ */ new Date();
   const start = /* @__PURE__ */ new Date();
@@ -7014,10 +7180,10 @@ var LiteLLMHomeWidget = ({
   const api = useApi6(liteLlmApiRef);
   const moduleRouteRef = useRouteRef2(rootRouteRef);
   const { userInfo, keys, loading: profileLoading, error: profileError } = useLiteLLMProfile();
-  const [period, setPeriod] = useState14(defaultPeriod);
-  const [usageLoading, setUsageLoading] = useState14(true);
-  const [usageError, setUsageError] = useState14(null);
-  const [usage, setUsage] = useState14(null);
+  const [period, setPeriod] = useState13(defaultPeriod);
+  const [usageLoading, setUsageLoading] = useState13(true);
+  const [usageError, setUsageError] = useState13(null);
+  const [usage, setUsage] = useState13(null);
   useEffect7(() => {
     let cancelled = false;
     setUsageLoading(true);
@@ -7073,9 +7239,9 @@ var LiteLLMHomeWidget = ({
           displayEmpty: true,
           inputProps: { "aria-label": "Usage period" },
           children: [
-            /* @__PURE__ */ jsx21(MenuItem6, { value: "today", children: "Today" }),
-            /* @__PURE__ */ jsx21(MenuItem6, { value: "7d", children: "7d" }),
-            /* @__PURE__ */ jsx21(MenuItem6, { value: "30d", children: "30d" })
+            /* @__PURE__ */ jsx21(MenuItem5, { value: "today", children: "Today" }),
+            /* @__PURE__ */ jsx21(MenuItem5, { value: "7d", children: "7d" }),
+            /* @__PURE__ */ jsx21(MenuItem5, { value: "30d", children: "30d" })
           ]
         }
       ) })
@@ -7087,7 +7253,7 @@ var LiteLLMHomeWidget = ({
     viewState.kind === "error" && /* @__PURE__ */ jsx21(Typography17, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: viewState.message }),
     viewState.kind === "unprovisioned" && /* @__PURE__ */ jsx21(Typography17, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: UNPROVISIONED_MSG }),
     viewState.kind === "ready" && partialFailure && /* @__PURE__ */ jsx21(Box19, { sx: { mt: 1, mb: 1, p: 1, backgroundColor: "action.hover", borderRadius: 1 }, children: /* @__PURE__ */ jsx21(Typography17, { variant: "body2", color: "text.secondary", children: USAGE_UNAVAILABLE_MSG }) }),
-    viewState.kind === "ready" && /* @__PURE__ */ jsxs19(Fragment10, { children: [
+    viewState.kind === "ready" && /* @__PURE__ */ jsxs19(Fragment9, { children: [
       /* @__PURE__ */ jsx21(
         Typography17,
         {
@@ -7100,7 +7266,7 @@ var LiteLLMHomeWidget = ({
           children: viewState.usageUnavailable ? USAGE_UNAVAILABLE_MSG : usageSummary(usage)
         }
       ),
-      hasSparkline && !viewState.usageUnavailable && /* @__PURE__ */ jsxs19(Fragment10, { children: [
+      hasSparkline && !viewState.usageUnavailable && /* @__PURE__ */ jsxs19(Fragment9, { children: [
         /* @__PURE__ */ jsx21(
           Box19,
           {
@@ -7146,14 +7312,14 @@ init_useLiteLLMProfile();
 init_api();
 init_format();
 init_dates();
-import { useCallback as useCallback5, useEffect as useEffect8, useId as useId2, useMemo as useMemo11, useState as useState15 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect8, useId as useId2, useMemo as useMemo11, useState as useState14 } from "react";
 import { useRouteRef as useRouteRef3 } from "@backstage/frontend-plugin-api";
 import Paper11 from "@mui/material/Paper";
 import Box20 from "@mui/material/Box";
-import Button9 from "@mui/material/Button";
+import Button10 from "@mui/material/Button";
 import Typography18 from "@mui/material/Typography";
 import Skeleton8 from "@mui/material/Skeleton";
-import Collapse4 from "@mui/material/Collapse";
+import Collapse3 from "@mui/material/Collapse";
 import { useTheme as useTheme4 } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { ExpandMore as ExpandMore4 } from "@mui/icons-material";
@@ -7186,7 +7352,7 @@ init_GenerateKeyButton();
 init_BudgetLimitList();
 init_budget();
 init_routes();
-import { Fragment as Fragment11, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 var LEVEL = {
   key: { name: "Key", none: "No cap (unlimited)" },
   user: { name: "User", none: "No personal budget" },
@@ -7339,7 +7505,7 @@ var LevelRow = ({
         ),
         /* @__PURE__ */ jsxs20(Box20, { sx: { minWidth: 0 }, children: [
           /* @__PURE__ */ jsx22(Tag, { tone: tone === "warning" || tone === "danger" ? tone : void 0, children: name }),
-          limit ? /* @__PURE__ */ jsxs20(Fragment11, { children: [
+          limit ? /* @__PURE__ */ jsxs20(Fragment10, { children: [
             /* @__PURE__ */ jsx22(
               Typography18,
               {
@@ -7570,17 +7736,17 @@ var LiteLLMBudgetGauges = ({
   const moduleRouteRef = useRouteRef3(rootRouteRef);
   const moduleHref = propModuleHref ?? moduleRouteRef?.();
   const { userInfo: hookUserInfo, teams: hookTeams, keys: hookKeys, loading: profileLoading, error: profileError } = useLiteLLMProfile();
-  const [usageLoading, setUsageLoading] = useState15(true);
-  const [usageError, setUsageError] = useState15(null);
-  const [dailySpend, setDailySpend] = useState15([]);
-  const [mtdSpend, setMtdSpend] = useState15(0);
+  const [usageLoading, setUsageLoading] = useState14(true);
+  const [usageError, setUsageError] = useState14(null);
+  const [dailySpend, setDailySpend] = useState14([]);
+  const [mtdSpend, setMtdSpend] = useState14(0);
   const user = propUserInfo !== void 0 ? propUserInfo : hookUserInfo;
   const teams = propTeams !== void 0 ? propTeams : hookTeams;
   const keys = propKeys !== void 0 ? propKeys : hookKeys;
   const loading = propUserInfo === void 0 ? profileLoading : usageLoading;
   const error = propUserInfo === void 0 ? profileError : usageError;
   const isControlled = expanded !== void 0;
-  const [uncontrolledExpanded, setUncontrolledExpanded] = useState15(defaultExpanded);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState14(defaultExpanded);
   const isExpanded = isControlled ? expanded : uncontrolledExpanded;
   const toggleExpanded = useCallback5(() => {
     const next = !isExpanded;
@@ -7664,10 +7830,10 @@ var LiteLLMBudgetGauges = ({
         return onCreateKey ? /* @__PURE__ */ jsx22(GenerateKeyButton, { size: "small", label, onClick: onCreateKey }, key) : /* @__PURE__ */ jsx22(GenerateKeyButton, { size: "small", label, to: `${moduleHref}?generate=1` }, key);
       case "module":
         if (!moduleHref) return null;
-        return /* @__PURE__ */ jsx22(Button9, { size: "small", variant: "text", component: Link4, to: moduleHref, children: label }, key);
+        return /* @__PURE__ */ jsx22(Button10, { size: "small", variant: "text", component: Link4, to: moduleHref, children: label }, key);
       case "all-limits":
         return /* @__PURE__ */ jsx22(
-          Button9,
+          Button10,
           {
             size: "small",
             variant: "text",
@@ -7716,7 +7882,7 @@ var LiteLLMBudgetGauges = ({
     ] }, i)) }),
     viewState.kind === "error" && /* @__PURE__ */ jsx22(Typography18, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: viewState.message }),
     viewState.kind === "unprovisioned" && /* @__PURE__ */ jsx22(Typography18, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: UNPROVISIONED_MSG }),
-    viewState.kind === "ready" && /* @__PURE__ */ jsxs20(Fragment11, { children: [
+    viewState.kind === "ready" && /* @__PURE__ */ jsxs20(Fragment10, { children: [
       /* @__PURE__ */ jsxs20(
         Box20,
         {
@@ -7770,7 +7936,7 @@ var LiteLLMBudgetGauges = ({
           maxBudget: user?.max_budget ?? void 0
         }
       ) }),
-      /* @__PURE__ */ jsx22(Collapse4, { in: isExpanded, unmountOnExit: true, children: /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx22(Collapse3, { in: isExpanded, unmountOnExit: true, children: /* @__PURE__ */ jsx22(
         Box20,
         {
           id: expandedRegionId,