@acarmisc/backstage-plugin-litellm 0.38.0 → 0.39.0

package/dist/index.esm.js

@@ -306,6 +306,14 @@ var init_api = __esm({
         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");
       }
@@ -704,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,
         {
@@ -726,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 }) => (
@@ -5682,7 +5691,7 @@ var init_insights = __esm({
     "use strict";
     costPer1k = (model, spend, tokens, models) => {
       const info = models?.find((m) => m.model_name === model);
-      const listed = info?.input_cost_per_token != null && info?.output_cost_per_token != null ? (info.input_cost_per_token + info.output_cost_per_token) / 2 * 1e3 : null;
+      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;
     };
@@ -5733,11 +5742,17 @@ var init_insights = __esm({
       };
     };
     scorePractices = (summary, keyStats) => {
-      const waste = summary.retryWasteShare <= 0.01 ? 30 : summary.retryWasteShare <= 0.05 ? 20 : summary.retryWasteShare <= 0.1 ? 10 : 0;
-      const premium = summary.premiumShare <= 0.2 ? 25 : summary.premiumShare <= 0.5 ? 15 : summary.premiumShare <= 0.8 ? 5 : 0;
-      const conc = summary.topModelConcentration <= 0.5 ? 20 : summary.topModelConcentration <= 0.8 ? 10 : 0;
+      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 : bad === 0 ? 25 : bad <= 0.2 ? 15 : bad <= 0.5 ? 5 : 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` },
@@ -5864,6 +5879,67 @@ var init_InsightsTab = __esm({
           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);
@@ -5944,64 +6020,90 @@ var init_InsightsTab = __esm({
           {
             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", 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)", children: renderSpendLogsBody() }) })
+          /* @__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", 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", children: /* @__PURE__ */ jsx17(
-          EmptyState,
+        /* @__PURE__ */ jsx17(
+          SectionCard,
           {
-            message: "Quality scores \u2014 connect Langfuse",
-            hint: "LLM-as-judge evaluation is not configured for this deployment."
+            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()
+          }
+        )
       ] });
     };
   }