@acarmisc/backstage-plugin-litellm 0.2.1 → 0.3.0

package/dist/index.esm.js

@@ -955,10 +955,106 @@ init_DashboardHeader();
 init_KeysTable();
 init_UsageStats();
 init_TeamUsage();
+
+// src/components/LiteLLMHomeWidget.tsx
+init_api();
+import React7, { useState as useState5, useEffect as useEffect2 } from "react";
+import {
+  Paper as Paper6,
+  Box as Box6,
+  Typography as Typography6,
+  FormControl as FormControl2,
+  Select as Select2,
+  MenuItem as MenuItem3,
+  Grid as Grid3,
+  CircularProgress as CircularProgress5,
+  Alert as Alert2
+} from "@mui/material";
+import { AreaChart as AreaChart3, Area as Area3, ResponsiveContainer as ResponsiveContainer3 } from "recharts";
+import { useApi as useApi2 } from "@backstage/core-plugin-api";
+var fmtUsd2 = (n) => `$${(n ?? 0).toFixed(n < 1 ? 4 : 2)}`;
+var fmtInt2 = (n) => (n ?? 0).toLocaleString();
+function presetToDateRange(preset) {
+  const end = /* @__PURE__ */ new Date();
+  const start = /* @__PURE__ */ new Date();
+  if (preset === "today") {
+    start.setHours(0, 0, 0, 0);
+  } else if (preset === "7d") {
+    start.setDate(start.getDate() - 7);
+  } else {
+    start.setDate(start.getDate() - 30);
+  }
+  return { start, end };
+}
+var Kpi = ({ label, value }) => /* @__PURE__ */ React7.createElement(Box6, null, /* @__PURE__ */ React7.createElement(Typography6, { variant: "caption", color: "text.secondary", display: "block" }, label), /* @__PURE__ */ React7.createElement(Typography6, { variant: "subtitle1", fontWeight: 600 }, value));
+var LiteLLMHomeWidget = ({
+  defaultPeriod = "7d",
+  title = "LiteLLM Usage"
+}) => {
+  const api = useApi2(liteLlmApiRef);
+  const [period, setPeriod] = useState5(defaultPeriod);
+  const [loading, setLoading] = useState5(true);
+  const [error, setError] = useState5(null);
+  const [usage, setUsage] = useState5(null);
+  const [keys, setKeys] = useState5([]);
+  useEffect2(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    const { start, end } = presetToDateRange(period);
+    const startDate = start.toISOString().split("T")[0];
+    const endDate = end.toISOString().split("T")[0];
+    Promise.all([api.getUsage(startDate, endDate), api.listKeys()]).then(([usageData, keysData]) => {
+      if (!cancelled) {
+        setUsage(usageData);
+        setKeys(keysData);
+        setLoading(false);
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        setError(err.message ?? "Failed to load usage data");
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [api, period]);
+  const dailyData = (usage?.daily_usage ?? []).map((d) => ({
+    date: d.date,
+    spend: d.spend
+  }));
+  const hasSparkline = dailyData.length > 0;
+  return /* @__PURE__ */ React7.createElement(Paper6, { sx: { p: 2 } }, /* @__PURE__ */ React7.createElement(Box6, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1.5 }, /* @__PURE__ */ React7.createElement(Typography6, { variant: "h6" }, title), /* @__PURE__ */ React7.createElement(FormControl2, { size: "small", sx: { minWidth: 90 } }, /* @__PURE__ */ React7.createElement(
+    Select2,
+    {
+      value: period,
+      onChange: (e) => setPeriod(e.target.value),
+      displayEmpty: true
+    },
+    /* @__PURE__ */ React7.createElement(MenuItem3, { value: "today" }, "Today"),
+    /* @__PURE__ */ React7.createElement(MenuItem3, { value: "7d" }, "7d"),
+    /* @__PURE__ */ React7.createElement(MenuItem3, { value: "30d" }, "30d")
+  ))), loading && /* @__PURE__ */ React7.createElement(Box6, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ React7.createElement(CircularProgress5, { size: 32 })), !loading && error && /* @__PURE__ */ React7.createElement(Alert2, { severity: "error", sx: { mt: 1 } }, error), !loading && !error && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Grid3, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ React7.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React7.createElement(Kpi, { label: "USD Spent", value: fmtUsd2(usage?.total_spend ?? 0) })), /* @__PURE__ */ React7.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React7.createElement(Kpi, { label: "Tokens In", value: fmtInt2(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ React7.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React7.createElement(Kpi, { label: "Tokens Out", value: fmtInt2(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ React7.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React7.createElement(Kpi, { label: "Keys", value: fmtInt2(keys.length) }))), hasSparkline && /* @__PURE__ */ React7.createElement(Box6, { height: 120 }, /* @__PURE__ */ React7.createElement(ResponsiveContainer3, { width: "100%", height: "100%" }, /* @__PURE__ */ React7.createElement(AreaChart3, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ React7.createElement(
+    Area3,
+    {
+      type: "monotone",
+      dataKey: "spend",
+      stroke: "#8884d8",
+      fill: "#8884d8",
+      fillOpacity: 0.3,
+      dot: false,
+      isAnimationActive: false
+    }
+  ))))));
+};
+
+// src/index.ts
 init_api();
 export {
   DashboardHeader,
   KeysTable,
+  LiteLLMHomeWidget,
   LiteLLMPage,
   LiteLlmApi,
   TeamUsage,