@acarmisc/backstage-plugin-litellm 0.1.0

package/dist/index.esm.js

@@ -0,0 +1,626 @@
+// src/plugin.ts
+import { createFrontendPlugin } from "@backstage/frontend-plugin-api";
+import { PageExtension } from "@backstage/frontend-plugin-api";
+
+// src/components/LiteLLMPage.tsx
+import { useState as useState3, useEffect, useCallback } from "react";
+import { Grid as Grid2, Box as Box4, Snackbar, Alert, CircularProgress as CircularProgress3 } from "@material-ui/core";
+import { useAsync } from "react-use";
+
+// src/components/DashboardHeader.tsx
+import { Box, Typography, LinearProgress, Paper, Chip } from "@material-ui/core";
+import { Warning, Group } from "@material-ui/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DashboardHeader = ({ userInfo, loading }) => {
+  if (loading) {
+    return /* @__PURE__ */ jsx(Paper, { style: { padding: 16, marginBottom: 16 }, children: /* @__PURE__ */ jsx(LinearProgress, {}) });
+  }
+  if (!userInfo) {
+    return null;
+  }
+  const budget = userInfo.max_budget ?? 0;
+  const spend = userInfo.current_spend ?? 0;
+  const budgetPercentage = budget > 0 ? Math.min(spend / budget * 100, 100) : 0;
+  const isOverBudget = budget > 0 && spend >= budget;
+  const isNearLimit = budget > 0 && spend >= budget * 0.8 && !isOverBudget;
+  return /* @__PURE__ */ jsx(Paper, { style: { padding: 16, marginBottom: 16 }, children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap", children: [
+    /* @__PURE__ */ jsxs(Box, { flexGrow: 1, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", children: userInfo.email }),
+      userInfo.team_alias && /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 0.5, mt: 0.5, children: [
+        /* @__PURE__ */ jsx(Group, { fontSize: "small", color: "action" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: userInfo.team_alias })
+      ] })
+    ] }),
+    budget > 0 && /* @__PURE__ */ jsxs(Box, { minWidth: 200, children: [
+      /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", mb: 0.5, children: [
+        /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+          "Spend: $",
+          spend.toFixed(2),
+          " / $",
+          budget.toFixed(2)
+        ] }),
+        isOverBudget && /* @__PURE__ */ jsx(Chip, { icon: /* @__PURE__ */ jsx(Warning, {}), label: "Over Budget", size: "small", color: "secondary" }),
+        isNearLimit && /* @__PURE__ */ jsx(Chip, { label: "Near Limit", size: "small", color: "warning" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        LinearProgress,
+        {
+          variant: "determinate",
+          value: budgetPercentage,
+          color: isOverBudget ? "secondary" : isNearLimit ? "warning" : "primary",
+          style: { height: 8, borderRadius: 4 }
+        }
+      )
+    ] })
+  ] }) });
+};
+
+// src/components/KeysTable.tsx
+import { useState } from "react";
+import {
+  Paper as Paper2,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Button,
+  IconButton,
+  Box as Box2,
+  Typography as Typography2,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  TextField,
+  MenuItem,
+  Chip as Chip2,
+  CircularProgress
+} from "@material-ui/core";
+import { ContentCopy, Delete, Add, Visibility, VisibilityOff } from "@material-ui/icons";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var maskKey = (key) => {
+  if (key.length <= 8) return "***";
+  return `${key.slice(0, 4)}...${key.slice(-4)}`;
+};
+var formatDate = (dateStr) => {
+  try {
+    return new Date(dateStr).toLocaleDateString();
+  } catch {
+    return dateStr;
+  }
+};
+var KeysTable = ({
+  keys,
+  models,
+  loading,
+  onGenerateKey,
+  onDeleteKey
+}) => {
+  const [generateModalOpen, setGenerateModalOpen] = useState(false);
+  const [showKeyValue, setShowKeyValue] = useState(null);
+  const [newKeyValue, setNewKeyValue] = useState(null);
+  const [formData, setFormData] = useState({
+    alias: "",
+    models: [],
+    duration: "30d",
+    max_budget: void 0,
+    tpm_limit: void 0
+  });
+  const [submitting, setSubmitting] = useState(false);
+  const handleGenerate = async () => {
+    setSubmitting(true);
+    try {
+      const response = await onGenerateKey(formData);
+      setNewKeyValue(response?.key || "");
+      setFormData({ alias: "", models: [], duration: "30d" });
+    } catch (error) {
+      console.error("Failed to generate key:", error);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const handleCloseModal = () => {
+    setGenerateModalOpen(false);
+    setNewKeyValue(null);
+    setFormData({ alias: "", models: [], duration: "30d" });
+  };
+  const copyToClipboard = (text) => {
+    navigator.clipboard.writeText(text);
+  };
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(Paper2, { style: { marginBottom: 16 }, children: [
+      /* @__PURE__ */ jsxs2(Box2, { display: "flex", justifyContent: "space-between", alignItems: "center", p: 2, children: [
+        /* @__PURE__ */ jsx2(Typography2, { variant: "h6", children: "Virtual Keys" }),
+        /* @__PURE__ */ jsx2(
+          Button,
+          {
+            variant: "contained",
+            color: "primary",
+            startIcon: /* @__PURE__ */ jsx2(Add, {}),
+            onClick: () => setGenerateModalOpen(true),
+            children: "Generate New Key"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx2(TableContainer, { children: /* @__PURE__ */ jsxs2(Table, { children: [
+        /* @__PURE__ */ jsx2(TableHead, { children: /* @__PURE__ */ jsxs2(TableRow, { children: [
+          /* @__PURE__ */ jsx2(TableCell, { children: "Alias" }),
+          /* @__PURE__ */ jsx2(TableCell, { children: "Key" }),
+          /* @__PURE__ */ jsx2(TableCell, { children: "Created" }),
+          /* @__PURE__ */ jsx2(TableCell, { children: "Spend" }),
+          /* @__PURE__ */ jsx2(TableCell, { children: "Budget" }),
+          /* @__PURE__ */ jsx2(TableCell, { children: "TPM Limit" }),
+          /* @__PURE__ */ jsx2(TableCell, { children: "Models" }),
+          /* @__PURE__ */ jsx2(TableCell, { align: "right", children: "Actions" })
+        ] }) }),
+        /* @__PURE__ */ jsx2(TableBody, { children: loading ? /* @__PURE__ */ jsx2(TableRow, { children: /* @__PURE__ */ jsx2(TableCell, { colSpan: 8, align: "center", children: /* @__PURE__ */ jsx2(CircularProgress, { size: 24 }) }) }) : keys.length === 0 ? /* @__PURE__ */ jsx2(TableRow, { children: /* @__PURE__ */ jsx2(TableCell, { colSpan: 8, align: "center", children: /* @__PURE__ */ jsx2(Typography2, { color: "textSecondary", children: "No keys found" }) }) }) : keys.map((key) => /* @__PURE__ */ jsxs2(TableRow, { children: [
+          /* @__PURE__ */ jsx2(TableCell, { children: key.key_alias || "-" }),
+          /* @__PURE__ */ jsx2(TableCell, { children: /* @__PURE__ */ jsxs2(Box2, { display: "flex", alignItems: "center", gap: 0.5, children: [
+            /* @__PURE__ */ jsx2(Typography2, { variant: "body2", component: "code", style: { fontFamily: "monospace" }, children: showKeyValue === key.key ? key.key : maskKey(key.key) }),
+            /* @__PURE__ */ jsx2(
+              IconButton,
+              {
+                size: "small",
+                onClick: () => setShowKeyValue(showKeyValue === key.key ? null : key.key),
+                children: showKeyValue === key.key ? /* @__PURE__ */ jsx2(VisibilityOff, {}) : /* @__PURE__ */ jsx2(Visibility, {})
+              }
+            ),
+            /* @__PURE__ */ jsx2(IconButton, { size: "small", onClick: () => copyToClipboard(key.key), children: /* @__PURE__ */ jsx2(ContentCopy, { fontSize: "small" }) })
+          ] }) }),
+          /* @__PURE__ */ jsx2(TableCell, { children: formatDate(key.created_at) }),
+          /* @__PURE__ */ jsxs2(TableCell, { children: [
+            "$",
+            key.spend?.toFixed(4) || "0.00"
+          ] }),
+          /* @__PURE__ */ jsx2(TableCell, { children: key.max_budget ? `$${key.max_budget}` : "-" }),
+          /* @__PURE__ */ jsx2(TableCell, { children: key.tpm_limit || "-" }),
+          /* @__PURE__ */ jsx2(TableCell, { children: /* @__PURE__ */ jsxs2(Box2, { display: "flex", gap: 0.5, flexWrap: "wrap", children: [
+            key.models?.slice(0, 2).map((model) => /* @__PURE__ */ jsx2(Chip2, { label: model, size: "small" }, model)),
+            (key.models?.length || 0) > 2 && /* @__PURE__ */ jsx2(Chip2, { label: `+${(key.models?.length || 0) - 2}`, size: "small", variant: "outlined" })
+          ] }) }),
+          /* @__PURE__ */ jsx2(TableCell, { align: "right", children: /* @__PURE__ */ jsx2(IconButton, { color: "secondary", onClick: () => onDeleteKey(key.key), children: /* @__PURE__ */ jsx2(Delete, {}) }) })
+        ] }, key.key)) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs2(Dialog, { open: generateModalOpen, onClose: handleCloseModal, maxWidth: "sm", fullWidth: true, children: [
+      /* @__PURE__ */ jsx2(DialogTitle, { children: newKeyValue ? "Key Generated" : "Generate New Key" }),
+      /* @__PURE__ */ jsx2(DialogContent, { children: newKeyValue ? /* @__PURE__ */ jsxs2(Box2, { children: [
+        /* @__PURE__ */ jsx2(Typography2, { variant: "body2", color: "textSecondary", gutterBottom: true, children: "Copy this key now. You won't be able to see it again." }),
+        /* @__PURE__ */ jsxs2(
+          Box2,
+          {
+            display: "flex",
+            alignItems: "center",
+            gap: 1,
+            mt: 2,
+            p: 2,
+            style: { backgroundColor: "#f5f5f5", borderRadius: 4 },
+            children: [
+              /* @__PURE__ */ jsx2(Typography2, { component: "code", style: { fontFamily: "monospace", wordBreak: "break-all" }, children: newKeyValue }),
+              /* @__PURE__ */ jsx2(IconButton, { onClick: () => copyToClipboard(newKeyValue), children: /* @__PURE__ */ jsx2(ContentCopy, {}) })
+            ]
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs2(Box2, { display: "flex", flexDirection: "column", gap: 2, mt: 1, children: [
+        /* @__PURE__ */ jsx2(
+          TextField,
+          {
+            label: "Alias",
+            value: formData.alias || "",
+            onChange: (e) => setFormData({ ...formData, alias: e.target.value }),
+            fullWidth: true
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          TextField,
+          {
+            select: true,
+            label: "Duration",
+            value: formData.duration || "30d",
+            onChange: (e) => setFormData({ ...formData, duration: e.target.value }),
+            fullWidth: true,
+            children: [
+              /* @__PURE__ */ jsx2(MenuItem, { value: "1d", children: "1 Day" }),
+              /* @__PURE__ */ jsx2(MenuItem, { value: "7d", children: "7 Days" }),
+              /* @__PURE__ */ jsx2(MenuItem, { value: "30d", children: "30 Days" }),
+              /* @__PURE__ */ jsx2(MenuItem, { value: "90d", children: "90 Days" }),
+              /* @__PURE__ */ jsx2(MenuItem, { value: "1y", children: "1 Year" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          TextField,
+          {
+            label: "Max Budget (USD)",
+            type: "number",
+            value: formData.max_budget || "",
+            onChange: (e) => setFormData({ ...formData, max_budget: e.target.value ? Number(e.target.value) : void 0 }),
+            fullWidth: true
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          TextField,
+          {
+            label: "TPM Limit",
+            type: "number",
+            value: formData.tpm_limit || "",
+            onChange: (e) => setFormData({ ...formData, tpm_limit: e.target.value ? Number(e.target.value) : void 0 }),
+            fullWidth: true
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          TextField,
+          {
+            select: true,
+            label: "Models",
+            SelectProps: { multiple: true },
+            value: formData.models || [],
+            onChange: (e) => setFormData({ ...formData, models: e.target.value }),
+            fullWidth: true,
+            children: models.map((model) => /* @__PURE__ */ jsx2(MenuItem, { value: model.model_name, children: model.model_name }, model.model_name))
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs2(DialogActions, { children: [
+        /* @__PURE__ */ jsx2(Button, { onClick: handleCloseModal, children: newKeyValue ? "Done" : "Cancel" }),
+        !newKeyValue && /* @__PURE__ */ jsx2(Button, { onClick: handleGenerate, variant: "contained", color: "primary", disabled: submitting, children: submitting ? /* @__PURE__ */ jsx2(CircularProgress, { size: 24 }) : "Generate" })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/UsageStats.tsx
+import { useState as useState2 } from "react";
+import {
+  Paper as Paper3,
+  Box as Box3,
+  Typography as Typography3,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem as MenuItem2,
+  Grid,
+  CircularProgress as CircularProgress2
+} from "@material-ui/core";
+import {
+  AreaChart,
+  Area,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend
+} from "recharts";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DateRangeSelector = ({ preset, onChange, dateRange }) => {
+  return /* @__PURE__ */ jsx3(Box3, { display: "flex", gap: 1, children: ["today", "7d", "30d"].map((p) => /* @__PURE__ */ jsxs3(
+    Select,
+    {
+      value: preset,
+      onChange: (e) => onChange(e.target.value),
+      size: "small",
+      children: [
+        /* @__PURE__ */ jsx3(MenuItem2, { value: "today", children: "Today" }),
+        /* @__PURE__ */ jsx3(MenuItem2, { value: "7d", children: "Last 7 days" }),
+        /* @__PURE__ */ jsx3(MenuItem2, { value: "30d", children: "Last 30 days" })
+      ]
+    },
+    p
+  )) });
+};
+var UsageStats = ({
+  usage,
+  models,
+  dateRange,
+  onDateRangeChange,
+  loading
+}) => {
+  const [selectedModel, setSelectedModel] = useState2("all");
+  if (loading) {
+    return /* @__PURE__ */ jsx3(Paper3, { style: { padding: 16 }, children: /* @__PURE__ */ jsx3(Box3, { display: "flex", justifyContent: "center", p: 4, children: /* @__PURE__ */ jsx3(CircularProgress2, {}) }) });
+  }
+  const formatDate2 = (date) => {
+    return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  };
+  const dailyData = usage?.daily_usage?.map((d) => ({
+    date: d.date,
+    spend: d.spend,
+    promptTokens: d.prompt_tokens,
+    completionTokens: d.completion_tokens,
+    totalTokens: d.total_tokens
+  })) || [];
+  const usageByModelData = Object.entries(usage?.usage_by_model || {}).map(([model, data]) => ({
+    model,
+    spend: data.total_spend,
+    promptTokens: data.prompt_tokens,
+    completionTokens: data.completion_tokens
+  }));
+  const filteredModelData = selectedModel === "all" ? usageByModelData : usageByModelData.filter((d) => d.model === selectedModel);
+  return /* @__PURE__ */ jsxs3(Paper3, { style: { padding: 16 }, children: [
+    /* @__PURE__ */ jsxs3(Box3, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 3, children: [
+      /* @__PURE__ */ jsx3(Typography3, { variant: "h6", children: "Usage Analytics" }),
+      /* @__PURE__ */ jsxs3(Box3, { display: "flex", gap: 2, alignItems: "center", children: [
+        /* @__PURE__ */ jsx3(
+          DateRangeSelector,
+          {
+            preset: "7d",
+            onChange: (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 if (preset === "30d") start.setDate(start.getDate() - 30);
+              onDateRangeChange({ start, end });
+            },
+            dateRange
+          }
+        ),
+        /* @__PURE__ */ jsxs3(FormControl, { size: "small", style: { minWidth: 150 }, children: [
+          /* @__PURE__ */ jsx3(InputLabel, { children: "Model" }),
+          /* @__PURE__ */ jsxs3(Select, { value: selectedModel, onChange: (e) => setSelectedModel(e.target.value), label: "Model", children: [
+            /* @__PURE__ */ jsx3(MenuItem2, { value: "all", children: "All Models" }),
+            models.map((m) => /* @__PURE__ */ jsx3(MenuItem2, { value: m.model_name, children: m.model_name }, m.model_name))
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3(Grid, { container: true, spacing: 3, children: [
+      /* @__PURE__ */ jsxs3(Grid, { item: true, xs: 12, md: 6, children: [
+        /* @__PURE__ */ jsx3(Typography3, { variant: "subtitle2", color: "textSecondary", gutterBottom: true, children: "Daily Spend" }),
+        /* @__PURE__ */ jsx3(Box3, { height: 250, children: /* @__PURE__ */ jsx3(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs3(AreaChart, { data: dailyData, children: [
+          /* @__PURE__ */ jsx3(CartesianGrid, { strokeDasharray: "3 3" }),
+          /* @__PURE__ */ jsx3(XAxis, { dataKey: "date", tick: { fontSize: 12 } }),
+          /* @__PURE__ */ jsx3(YAxis, { tick: { fontSize: 12 }, tickFormatter: (v) => `$${v.toFixed(2)}` }),
+          /* @__PURE__ */ jsx3(Tooltip, { formatter: (value) => [`$${value.toFixed(4)}`, "Spend"] }),
+          /* @__PURE__ */ jsx3(Area, { type: "monotone", dataKey: "spend", stroke: "#8884d8", fill: "#8884d8", fillOpacity: 0.3 })
+        ] }) }) })
+      ] }),
+      /* @__PURE__ */ jsxs3(Grid, { item: true, xs: 12, md: 6, children: [
+        /* @__PURE__ */ jsx3(Typography3, { variant: "subtitle2", color: "textSecondary", gutterBottom: true, children: "Token Usage by Model" }),
+        /* @__PURE__ */ jsx3(Box3, { height: 250, children: /* @__PURE__ */ jsx3(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs3(BarChart, { data: filteredModelData, children: [
+          /* @__PURE__ */ jsx3(CartesianGrid, { strokeDasharray: "3 3" }),
+          /* @__PURE__ */ jsx3(XAxis, { dataKey: "model", tick: { fontSize: 10 } }),
+          /* @__PURE__ */ jsx3(YAxis, { tick: { fontSize: 12 } }),
+          /* @__PURE__ */ jsx3(Tooltip, {}),
+          /* @__PURE__ */ jsx3(Legend, {}),
+          /* @__PURE__ */ jsx3(Bar, { dataKey: "promptTokens", name: "Prompt Tokens", fill: "#8884d8", stackId: "a" }),
+          /* @__PURE__ */ jsx3(Bar, { dataKey: "completionTokens", name: "Completion Tokens", fill: "#82ca9d", stackId: "a" })
+        ] }) }) })
+      ] }),
+      /* @__PURE__ */ jsx3(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs3(Box3, { display: "flex", gap: 4, flexWrap: "wrap", children: [
+        /* @__PURE__ */ jsxs3(Box3, { children: [
+          /* @__PURE__ */ jsx3(Typography3, { variant: "body2", color: "textSecondary", children: "Total Spend" }),
+          /* @__PURE__ */ jsxs3(Typography3, { variant: "h5", children: [
+            "$",
+            usage?.total_spend?.toFixed(4) || "0.00"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3(Box3, { children: [
+          /* @__PURE__ */ jsx3(Typography3, { variant: "body2", color: "textSecondary", children: "Total Tokens" }),
+          /* @__PURE__ */ jsx3(Typography3, { variant: "h5", children: usage?.total_tokens?.toLocaleString() || "0" })
+        ] }),
+        /* @__PURE__ */ jsxs3(Box3, { children: [
+          /* @__PURE__ */ jsx3(Typography3, { variant: "body2", color: "textSecondary", children: "Prompt Tokens" }),
+          /* @__PURE__ */ jsx3(Typography3, { variant: "h5", children: usage?.prompt_tokens?.toLocaleString() || "0" })
+        ] }),
+        /* @__PURE__ */ jsxs3(Box3, { children: [
+          /* @__PURE__ */ jsx3(Typography3, { variant: "body2", color: "textSecondary", children: "Completion Tokens" }),
+          /* @__PURE__ */ jsx3(Typography3, { variant: "h5", children: usage?.completion_tokens?.toLocaleString() || "0" })
+        ] })
+      ] }) })
+    ] })
+  ] });
+};
+
+// src/api.ts
+var LiteLlmApi = class {
+  fetchApi;
+  basePath;
+  constructor(fetchApi, basePath = "/api/litellm") {
+    this.fetchApi = fetchApi;
+    this.basePath = basePath;
+  }
+  async get(path, params) {
+    const url = new URL(`${this.basePath}${path}`, window.location.origin);
+    if (params) {
+      Object.entries(params).forEach(([key, value]) => {
+        url.searchParams.append(key, value);
+      });
+    }
+    const response = await this.fetchApi.fetch(url.toString());
+    if (!response.ok) {
+      throw new Error(`Failed to fetch: ${response.status} ${response.statusText}`);
+    }
+    return response.json();
+  }
+  async post(path, body) {
+    const response = await this.fetchApi.fetch(`${this.basePath}${path}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body)
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to fetch: ${response.status} ${response.statusText}`);
+    }
+    return response.json();
+  }
+  async del(path) {
+    const response = await fetch(`${this.basePath}${path}`, {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" }
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to fetch: ${response.status} ${response.statusText}`);
+    }
+    return response.json();
+  }
+  async getUserInfo(userId) {
+    const params = userId ? { user_id: userId } : void 0;
+    return this.get("/user/info", params);
+  }
+  async listKeys(userId) {
+    const params = userId ? { user_id: userId } : void 0;
+    return this.get("/keys", params);
+  }
+  async generateKey(request) {
+    return this.post("/keys/generate", request);
+  }
+  async deleteKey(keyId) {
+    return this.del(`/keys/${encodeURIComponent(keyId)}`);
+  }
+  async listModels() {
+    return this.get("/models");
+  }
+  async getUsage(startDate, endDate, userId) {
+    const params = { start_date: startDate, end_date: endDate };
+    if (userId) params.user_id = userId;
+    return this.get("/usage", params);
+  }
+};
+
+// src/components/LiteLLMPage.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var LiteLLMPage = ({ fetchApi }) => {
+  const api = new LiteLlmApi(fetchApi);
+  const [dateRange, setDateRange] = useState3(() => {
+    const end = /* @__PURE__ */ new Date();
+    const start = /* @__PURE__ */ new Date();
+    start.setDate(start.getDate() - 7);
+    return { start, end };
+  });
+  const [snackbar, setSnackbar] = useState3(null);
+  const {
+    value: userInfo,
+    loading: userLoading,
+    error: userError
+  } = useAsync(async () => {
+    try {
+      return await api.getUserInfo();
+    } catch (e) {
+      setSnackbar({ message: `Failed to load user info: ${e.message}`, severity: "error" });
+      return null;
+    }
+  }, []);
+  const {
+    value: keys,
+    loading: keysLoading,
+    error: keysError,
+    refresh: refreshKeys
+  } = useAsync(async () => {
+    try {
+      return await api.listKeys();
+    } catch (e) {
+      setSnackbar({ message: `Failed to load keys: ${e.message}`, severity: "error" });
+      return [];
+    }
+  }, []);
+  const {
+    value: models,
+    loading: modelsLoading
+  } = useAsync(async () => {
+    try {
+      return await api.listModels();
+    } catch {
+      return [];
+    }
+  }, []);
+  const {
+    value: usage,
+    loading: usageLoading
+  } = useAsync(async () => {
+    const startDate = dateRange.start.toISOString().split("T")[0];
+    const endDate = dateRange.end.toISOString().split("T")[0];
+    return api.getUsage(startDate, endDate);
+  }, [dateRange]);
+  useEffect(() => {
+    if (userError) {
+      setSnackbar({ message: `Error: ${userError.message}`, severity: "error" });
+    }
+    if (keysError) {
+      setSnackbar({ message: `Error: ${keysError.message}`, severity: "error" });
+    }
+  }, [userError, keysError]);
+  const handleGenerateKey = useCallback(async (request) => {
+    const response = await api.generateKey(request);
+    setSnackbar({ message: "Key generated successfully", severity: "success" });
+    refreshKeys();
+    return response;
+  }, [api, refreshKeys]);
+  const handleDeleteKey = useCallback(async (keyId) => {
+    try {
+      await api.deleteKey(keyId);
+      setSnackbar({ message: "Key revoked successfully", severity: "success" });
+      refreshKeys();
+    } catch (e) {
+      setSnackbar({ message: `Failed to revoke key: ${e.message}`, severity: "error" });
+    }
+  }, [api, refreshKeys]);
+  const isLoading = userLoading || keysLoading || modelsLoading;
+  if (isLoading && !userInfo && !keys) {
+    return /* @__PURE__ */ jsx4(Box4, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "50vh", children: /* @__PURE__ */ jsx4(CircularProgress3, {}) });
+  }
+  return /* @__PURE__ */ jsxs4(Box4, { p: 3, children: [
+    /* @__PURE__ */ jsxs4(Grid2, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx4(Grid2, { item: true, xs: 12, children: /* @__PURE__ */ jsx4(DashboardHeader, { userInfo, loading: userLoading }) }),
+      /* @__PURE__ */ jsx4(Grid2, { item: true, xs: 12, children: /* @__PURE__ */ jsx4(
+        KeysTable,
+        {
+          keys: keys || [],
+          models: models || [],
+          loading: keysLoading,
+          onGenerateKey: handleGenerateKey,
+          onDeleteKey: handleDeleteKey
+        }
+      ) }),
+      /* @__PURE__ */ jsx4(Grid2, { item: true, xs: 12, children: /* @__PURE__ */ jsx4(
+        UsageStats,
+        {
+          usage: usage || null,
+          models: models || [],
+          dateRange,
+          onDateRangeChange: setDateRange,
+          loading: usageLoading
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx4(
+      Snackbar,
+      {
+        open: !!snackbar,
+        autoHideDuration: 5e3,
+        onClose: () => setSnackbar(null),
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        children: snackbar && /* @__PURE__ */ jsx4(Alert, { severity: snackbar.severity, onClose: () => setSnackbar(null), children: snackbar.message })
+      }
+    )
+  ] });
+};
+
+// src/plugin.ts
+var litellmPlugin = createFrontendPlugin({
+  id: "litellm",
+  extensions: [
+    PageExtension.create({
+      id: "litellm.page",
+      defaultPath: "/litellm",
+      title: "LiteLLM",
+      component: {
+        loader: async () => LiteLLMPage
+      }
+    })
+  ]
+});
+export {
+  DashboardHeader,
+  KeysTable,
+  LiteLLMPage,
+  LiteLlmApi,
+  UsageStats,
+  litellmPlugin
+};
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/plugin.ts", "../src/components/LiteLLMPage.tsx", "../src/components/DashboardHeader.tsx", "../src/components/KeysTable.tsx", "../src/components/UsageStats.tsx", "../src/api.ts"],
+  "sourcesContent": ["import { createFrontendPlugin } from '@backstage/frontend-plugin-api';\nimport { PageExtension } from '@backstage/frontend-plugin-api';\nimport { LiteLLMPage } from './components/LiteLLMPage';\n\nexport const litellmPlugin = createFrontendPlugin({\n  id: 'litellm',\n  extensions: [\n    PageExtension.create({\n      id: 'litellm.page',\n      defaultPath: '/litellm',\n      title: 'LiteLLM',\n      component: {\n        loader: async () => LiteLLMPage,\n      },\n    }),\n  ],\n});", "import React, { useState, useEffect, useCallback } from 'react';\nimport { Grid, Box, Snackbar, Alert, CircularProgress } from '@material-ui/core';\nimport { useAsync } from 'react-use';\nimport { DashboardHeader } from './DashboardHeader';\nimport { KeysTable } from './KeysTable';\nimport { UsageStats } from './UsageStats';\nimport { LiteLlmApi } from '../api';\nimport { FetchApi } from '@backstage/core-plugin-api';\nimport { DateRange, GenerateKeyRequest, GenerateKeyResponse } from '../types';\n\ninterface LiteLLMPageProps {\n  fetchApi: FetchApi;\n}\n\nexport const LiteLLMPage: React.FC<LiteLLMPageProps> = ({ fetchApi }) => {\n  const api = new LiteLlmApi(fetchApi);\n\n  const [dateRange, setDateRange] = useState<DateRange>(() => {\n    const end = new Date();\n    const start = new Date();\n    start.setDate(start.getDate() - 7);\n    return { start, end };\n  });\n\n  const [snackbar, setSnackbar] = useState<{ message: string; severity: 'success' | 'error' } | null>(null);\n\n  const {\n    value: userInfo,\n    loading: userLoading,\n    error: userError,\n  } = useAsync(async () => {\n    try {\n      return await api.getUserInfo();\n    } catch (e: any) {\n      setSnackbar({ message: `Failed to load user info: ${e.message}`, severity: 'error' });\n      return null;\n    }\n  }, []);\n\n  const {\n    value: keys,\n    loading: keysLoading,\n    error: keysError,\n    refresh: refreshKeys,\n  } = useAsync(async () => {\n    try {\n      return await api.listKeys();\n    } catch (e: any) {\n      setSnackbar({ message: `Failed to load keys: ${e.message}`, severity: 'error' });\n      return [];\n    }\n  }, []);\n\n  const {\n    value: models,\n    loading: modelsLoading,\n  } = useAsync(async () => {\n    try {\n      return await api.listModels();\n    } catch {\n      return [];\n    }\n  }, []);\n\n  const {\n    value: usage,\n    loading: usageLoading,\n  } = useAsync(async () => {\n    const startDate = dateRange.start.toISOString().split('T')[0];\n    const endDate = dateRange.end.toISOString().split('T')[0];\n    return api.getUsage(startDate, endDate);\n  }, [dateRange]);\n\n  useEffect(() => {\n    if (userError) {\n      setSnackbar({ message: `Error: ${userError.message}`, severity: 'error' });\n    }\n    if (keysError) {\n      setSnackbar({ message: `Error: ${keysError.message}`, severity: 'error' });\n    }\n  }, [userError, keysError]);\n\n  const handleGenerateKey = useCallback(async (request: GenerateKeyRequest): Promise<GenerateKeyResponse> => {\n    const response = await api.generateKey(request);\n    setSnackbar({ message: 'Key generated successfully', severity: 'success' });\n    refreshKeys();\n    return response;\n  }, [api, refreshKeys]);\n\n  const handleDeleteKey = useCallback(async (keyId: string) => {\n    try {\n      await api.deleteKey(keyId);\n      setSnackbar({ message: 'Key revoked successfully', severity: 'success' });\n      refreshKeys();\n    } catch (e: any) {\n      setSnackbar({ message: `Failed to revoke key: ${e.message}`, severity: 'error' });\n    }\n  }, [api, refreshKeys]);\n\n  const isLoading = userLoading || keysLoading || modelsLoading;\n\n  if (isLoading && !userInfo && !keys) {\n    return (\n      <Box display=\"flex\" justifyContent=\"center\" alignItems=\"center\" minHeight=\"50vh\">\n        <CircularProgress />\n      </Box>\n    );\n  }\n\n  return (\n    <Box p={3}>\n      <Grid container spacing={2}>\n        <Grid item xs={12}>\n          <DashboardHeader userInfo={userInfo} loading={userLoading} />\n        </Grid>\n        <Grid item xs={12}>\n          <KeysTable\n            keys={keys || []}\n            models={models || []}\n            loading={keysLoading}\n            onGenerateKey={handleGenerateKey}\n            onDeleteKey={handleDeleteKey}\n          />\n        </Grid>\n        <Grid item xs={12}>\n          <UsageStats\n            usage={usage || null}\n            models={models || []}\n            dateRange={dateRange}\n            onDateRangeChange={setDateRange}\n            loading={usageLoading}\n          />\n        </Grid>\n      </Grid>\n\n      <Snackbar\n        open={!!snackbar}\n        autoHideDuration={5000}\n        onClose={() => setSnackbar(null)}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n      >\n        {snackbar && (\n          <Alert severity={snackbar.severity} onClose={() => setSnackbar(null)}>\n            {snackbar.message}\n          </Alert>\n        )}\n      </Snackbar>\n    </Box>\n  );\n};", "import React from 'react';\nimport { Box, Typography, LinearProgress, Paper, Chip } from '@material-ui/core';\nimport { Warning, Group } from '@material-ui/icons';\nimport { UserInfo } from '../types';\n\ninterface DashboardHeaderProps {\n  userInfo: UserInfo | null;\n  loading: boolean;\n}\n\nexport const DashboardHeader: React.FC<DashboardHeaderProps> = ({ userInfo, loading }) => {\n  if (loading) {\n    return (\n      <Paper style={{ padding: 16, marginBottom: 16 }}>\n        <LinearProgress />\n      </Paper>\n    );\n  }\n\n  if (!userInfo) {\n    return null;\n  }\n\n  const budget = userInfo.max_budget ?? 0;\n  const spend = userInfo.current_spend ?? 0;\n  const budgetPercentage = budget > 0 ? Math.min((spend / budget) * 100, 100) : 0;\n  const isOverBudget = budget > 0 && spend >= budget;\n  const isNearLimit = budget > 0 && spend >= budget * 0.8 && !isOverBudget;\n\n  return (\n    <Paper style={{ padding: 16, marginBottom: 16 }}>\n      <Box display=\"flex\" alignItems=\"center\" gap={2} flexWrap=\"wrap\">\n        <Box flexGrow={1}>\n          <Typography variant=\"h6\">{userInfo.email}</Typography>\n          {userInfo.team_alias && (\n            <Box display=\"flex\" alignItems=\"center\" gap={0.5} mt={0.5}>\n              <Group fontSize=\"small\" color=\"action\" />\n              <Typography variant=\"body2\" color=\"textSecondary\">\n                {userInfo.team_alias}\n              </Typography>\n            </Box>\n          )}\n        </Box>\n\n        {budget > 0 && (\n          <Box minWidth={200}>\n            <Box display=\"flex\" justifyContent=\"space-between\" mb={0.5}>\n              <Typography variant=\"body2\">\n                Spend: ${spend.toFixed(2)} / ${budget.toFixed(2)}\n              </Typography>\n              {isOverBudget && <Chip icon={<Warning />} label=\"Over Budget\" size=\"small\" color=\"secondary\" />}\n              {isNearLimit && <Chip label=\"Near Limit\" size=\"small\" color=\"warning\" />}\n            </Box>\n            <LinearProgress\n              variant=\"determinate\"\n              value={budgetPercentage}\n              color={isOverBudget ? 'secondary' : isNearLimit ? 'warning' : 'primary'}\n              style={{ height: 8, borderRadius: 4 }}\n            />\n          </Box>\n        )}\n      </Box>\n    </Paper>\n  );\n};", "import React, { useState } from 'react';\nimport {\n  Paper,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Button,\n  IconButton,\n  Box,\n  Typography,\n  Dialog,\n  DialogTitle,\n  DialogContent,\n  DialogActions,\n  TextField,\n  MenuItem,\n  Chip,\n  CircularProgress,\n} from '@material-ui/core';\nimport { ContentCopy, Delete, Add, Visibility, VisibilityOff } from '@material-ui/icons';\nimport { VirtualKey, ModelInfo, GenerateKeyRequest } from '../types';\n\ninterface KeysTableProps {\n  keys: VirtualKey[];\n  models: ModelInfo[];\n  loading: boolean;\n  onGenerateKey: (request: GenerateKeyRequest) => Promise<void>;\n  onDeleteKey: (keyId: string) => Promise<void>;\n}\n\nconst maskKey = (key: string): string => {\n  if (key.length <= 8) return '***';\n  return `${key.slice(0, 4)}...${key.slice(-4)}`;\n};\n\nconst formatDate = (dateStr: string): string => {\n  try {\n    return new Date(dateStr).toLocaleDateString();\n  } catch {\n    return dateStr;\n  }\n};\n\nexport const KeysTable: React.FC<KeysTableProps> = ({\n  keys,\n  models,\n  loading,\n  onGenerateKey,\n  onDeleteKey,\n}) => {\n  const [generateModalOpen, setGenerateModalOpen] = useState(false);\n  const [showKeyValue, setShowKeyValue] = useState<string | null>(null);\n  const [newKeyValue, setNewKeyValue] = useState<string | null>(null);\n  const [formData, setFormData] = useState<GenerateKeyRequest>({\n    alias: '',\n    models: [],\n    duration: '30d',\n    max_budget: undefined,\n    tpm_limit: undefined,\n  });\n  const [submitting, setSubmitting] = useState(false);\n\n  const handleGenerate = async () => {\n    setSubmitting(true);\n    try {\n      const response = await onGenerateKey(formData);\n      setNewKeyValue(response?.key || '');\n      setFormData({ alias: '', models: [], duration: '30d' });\n    } catch (error) {\n      console.error('Failed to generate key:', error);\n    } finally {\n      setSubmitting(false);\n    }\n  };\n\n  const handleCloseModal = () => {\n    setGenerateModalOpen(false);\n    setNewKeyValue(null);\n    setFormData({ alias: '', models: [], duration: '30d' });\n  };\n\n  const copyToClipboard = (text: string) => {\n    navigator.clipboard.writeText(text);\n  };\n\n  return (\n    <>\n      <Paper style={{ marginBottom: 16 }}>\n        <Box display=\"flex\" justifyContent=\"space-between\" alignItems=\"center\" p={2}>\n          <Typography variant=\"h6\">Virtual Keys</Typography>\n          <Button\n            variant=\"contained\"\n            color=\"primary\"\n            startIcon={<Add />}\n            onClick={() => setGenerateModalOpen(true)}\n          >\n            Generate New Key\n          </Button>\n        </Box>\n\n        <TableContainer>\n          <Table>\n            <TableHead>\n              <TableRow>\n                <TableCell>Alias</TableCell>\n                <TableCell>Key</TableCell>\n                <TableCell>Created</TableCell>\n                <TableCell>Spend</TableCell>\n                <TableCell>Budget</TableCell>\n                <TableCell>TPM Limit</TableCell>\n                <TableCell>Models</TableCell>\n                <TableCell align=\"right\">Actions</TableCell>\n              </TableRow>\n            </TableHead>\n            <TableBody>\n              {loading ? (\n                <TableRow>\n                  <TableCell colSpan={8} align=\"center\">\n                    <CircularProgress size={24} />\n                  </TableCell>\n                </TableRow>\n              ) : keys.length === 0 ? (\n                <TableRow>\n                  <TableCell colSpan={8} align=\"center\">\n                    <Typography color=\"textSecondary\">No keys found</Typography>\n                  </TableCell>\n                </TableRow>\n              ) : (\n                keys.map((key) => (\n                  <TableRow key={key.key}>\n                    <TableCell>{key.key_alias || '-'}</TableCell>\n                    <TableCell>\n                      <Box display=\"flex\" alignItems=\"center\" gap={0.5}>\n                        <Typography variant=\"body2\" component=\"code\" style={{ fontFamily: 'monospace' }}>\n                          {showKeyValue === key.key ? key.key : maskKey(key.key)}\n                        </Typography>\n                        <IconButton\n                          size=\"small\"\n                          onClick={() => setShowKeyValue(showKeyValue === key.key ? null : key.key)}\n                        >\n                          {showKeyValue === key.key ? <VisibilityOff /> : <Visibility />}\n                        </IconButton>\n                        <IconButton size=\"small\" onClick={() => copyToClipboard(key.key)}>\n                          <ContentCopy fontSize=\"small\" />\n                        </IconButton>\n                      </Box>\n                    </TableCell>\n                    <TableCell>{formatDate(key.created_at)}</TableCell>\n                    <TableCell>${key.spend?.toFixed(4) || '0.00'}</TableCell>\n                    <TableCell>{key.max_budget ? `$${key.max_budget}` : '-'}</TableCell>\n                    <TableCell>{key.tpm_limit || '-'}</TableCell>\n                    <TableCell>\n                      <Box display=\"flex\" gap={0.5} flexWrap=\"wrap\">\n                        {key.models?.slice(0, 2).map((model) => (\n                          <Chip key={model} label={model} size=\"small\" />\n                        ))}\n                        {(key.models?.length || 0) > 2 && (\n                          <Chip label={`+${(key.models?.length || 0) - 2}`} size=\"small\" variant=\"outlined\" />\n                        )}\n                      </Box>\n                    </TableCell>\n                    <TableCell align=\"right\">\n                      <IconButton color=\"secondary\" onClick={() => onDeleteKey(key.key)}>\n                        <Delete />\n                      </IconButton>\n                    </TableCell>\n                  </TableRow>\n                ))\n              )}\n            </TableBody>\n          </Table>\n        </TableContainer>\n      </Paper>\n\n      <Dialog open={generateModalOpen} onClose={handleCloseModal} maxWidth=\"sm\" fullWidth>\n        <DialogTitle>{newKeyValue ? 'Key Generated' : 'Generate New Key'}</DialogTitle>\n        <DialogContent>\n          {newKeyValue ? (\n            <Box>\n              <Typography variant=\"body2\" color=\"textSecondary\" gutterBottom>\n                Copy this key now. You won't be able to see it again.\n              </Typography>\n              <Box\n                display=\"flex\"\n                alignItems=\"center\"\n                gap={1}\n                mt={2}\n                p={2}\n                style={{ backgroundColor: '#f5f5f5', borderRadius: 4 }}\n              >\n                <Typography component=\"code\" style={{ fontFamily: 'monospace', wordBreak: 'break-all' }}>\n                  {newKeyValue}\n                </Typography>\n                <IconButton onClick={() => copyToClipboard(newKeyValue)}>\n                  <ContentCopy />\n                </IconButton>\n              </Box>\n            </Box>\n          ) : (\n            <Box display=\"flex\" flexDirection=\"column\" gap={2} mt={1}>\n              <TextField\n                label=\"Alias\"\n                value={formData.alias || ''}\n                onChange={(e) => setFormData({ ...formData, alias: e.target.value })}\n                fullWidth\n              />\n              <TextField\n                select\n                label=\"Duration\"\n                value={formData.duration || '30d'}\n                onChange={(e) => setFormData({ ...formData, duration: e.target.value })}\n                fullWidth\n              >\n                <MenuItem value=\"1d\">1 Day</MenuItem>\n                <MenuItem value=\"7d\">7 Days</MenuItem>\n                <MenuItem value=\"30d\">30 Days</MenuItem>\n                <MenuItem value=\"90d\">90 Days</MenuItem>\n                <MenuItem value=\"1y\">1 Year</MenuItem>\n              </TextField>\n              <TextField\n                label=\"Max Budget (USD)\"\n                type=\"number\"\n                value={formData.max_budget || ''}\n                onChange={(e) =>\n                  setFormData({ ...formData, max_budget: e.target.value ? Number(e.target.value) : undefined })\n                }\n                fullWidth\n              />\n              <TextField\n                label=\"TPM Limit\"\n                type=\"number\"\n                value={formData.tpm_limit || ''}\n                onChange={(e) =>\n                  setFormData({ ...formData, tpm_limit: e.target.value ? Number(e.target.value) : undefined })\n                }\n                fullWidth\n              />\n              <TextField\n                select\n                label=\"Models\"\n                SelectProps={{ multiple: true }}\n                value={formData.models || []}\n                onChange={(e) => setFormData({ ...formData, models: e.target.value as string[] })}\n                fullWidth\n              >\n                {models.map((model) => (\n                  <MenuItem key={model.model_name} value={model.model_name}>\n                    {model.model_name}\n                  </MenuItem>\n                ))}\n              </TextField>\n            </Box>\n          )}\n        </DialogContent>\n        <DialogActions>\n          <Button onClick={handleCloseModal}>{newKeyValue ? 'Done' : 'Cancel'}</Button>\n          {!newKeyValue && (\n            <Button onClick={handleGenerate} variant=\"contained\" color=\"primary\" disabled={submitting}>\n              {submitting ? <CircularProgress size={24} /> : 'Generate'}\n            </Button>\n          )}\n        </DialogActions>\n      </Dialog>\n    </>\n  );\n};", "import React, { useState } from 'react';\nimport {\n  Paper,\n  Box,\n  Typography,\n  FormControl,\n  InputLabel,\n  Select,\n  MenuItem,\n  Grid,\n  CircularProgress,\n} from '@material-ui/core';\nimport {\n  AreaChart,\n  Area,\n  BarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n  Legend,\n} from 'recharts';\nimport { DateRange, UsageMetrics, ModelInfo } from '../types';\n\ninterface UsageStatsProps {\n  usage: UsageMetrics | null;\n  models: ModelInfo[];\n  dateRange: DateRange;\n  onDateRangeChange: (range: DateRange) => void;\n  loading: boolean;\n}\n\ntype DatePreset = 'today' | '7d' | '30d' | 'custom';\n\nconst DateRangeSelector: React.FC<{\n  preset: DatePreset;\n  onChange: (preset: DatePreset, customRange?: DateRange) => void;\n  dateRange: DateRange;\n}> = ({ preset, onChange, dateRange }) => {\n  return (\n    <Box display=\"flex\" gap={1}>\n      {(['today', '7d', '30d'] as DatePreset[]).map((p) => (\n        <Select\n          key={p}\n          value={preset}\n          onChange={(e) => onChange(e.target.value as DatePreset)}\n          size=\"small\"\n        >\n          <MenuItem value=\"today\">Today</MenuItem>\n          <MenuItem value=\"7d\">Last 7 days</MenuItem>\n          <MenuItem value=\"30d\">Last 30 days</MenuItem>\n        </Select>\n      ))}\n    </Box>\n  );\n};\n\nexport const UsageStats: React.FC<UsageStatsProps> = ({\n  usage,\n  models,\n  dateRange,\n  onDateRangeChange,\n  loading,\n}) => {\n  const [selectedModel, setSelectedModel] = useState<string>('all');\n\n  if (loading) {\n    return (\n      <Paper style={{ padding: 16 }}>\n        <Box display=\"flex\" justifyContent=\"center\" p={4}>\n          <CircularProgress />\n        </Box>\n      </Paper>\n    );\n  }\n\n  const formatDate = (date: Date) => {\n    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });\n  };\n\n  const dailyData = usage?.daily_usage?.map((d) => ({\n    date: d.date,\n    spend: d.spend,\n    promptTokens: d.prompt_tokens,\n    completionTokens: d.completion_tokens,\n    totalTokens: d.total_tokens,\n  })) || [];\n\n  const usageByModelData = Object.entries(usage?.usage_by_model || {}).map(([model, data]) => ({\n    model,\n    spend: data.total_spend,\n    promptTokens: data.prompt_tokens,\n    completionTokens: data.completion_tokens,\n  }));\n\n  const filteredModelData =\n    selectedModel === 'all'\n      ? usageByModelData\n      : usageByModelData.filter((d) => d.model === selectedModel);\n\n  return (\n    <Paper style={{ padding: 16 }}>\n      <Box display=\"flex\" justifyContent=\"space-between\" alignItems=\"center\" mb={3}>\n        <Typography variant=\"h6\">Usage Analytics</Typography>\n        <Box display=\"flex\" gap={2} alignItems=\"center\">\n          <DateRangeSelector\n            preset=\"7d\"\n            onChange={(preset) => {\n              const end = new Date();\n              const start = new Date();\n              if (preset === 'today') start.setHours(0, 0, 0, 0);\n              else if (preset === '7d') start.setDate(start.getDate() - 7);\n              else if (preset === '30d') start.setDate(start.getDate() - 30);\n              onDateRangeChange({ start, end });\n            }}\n            dateRange={dateRange}\n          />\n          <FormControl size=\"small\" style={{ minWidth: 150 }}>\n            <InputLabel>Model</InputLabel>\n            <Select value={selectedModel} onChange={(e) => setSelectedModel(e.target.value)} label=\"Model\">\n              <MenuItem value=\"all\">All Models</MenuItem>\n              {models.map((m) => (\n                <MenuItem key={m.model_name} value={m.model_name}>\n                  {m.model_name}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Box>\n      </Box>\n\n      <Grid container spacing={3}>\n        <Grid item xs={12} md={6}>\n          <Typography variant=\"subtitle2\" color=\"textSecondary\" gutterBottom>\n            Daily Spend\n          </Typography>\n          <Box height={250}>\n            <ResponsiveContainer width=\"100%\" height=\"100%\">\n              <AreaChart data={dailyData}>\n                <CartesianGrid strokeDasharray=\"3 3\" />\n                <XAxis dataKey=\"date\" tick={{ fontSize: 12 }} />\n                <YAxis tick={{ fontSize: 12 }} tickFormatter={(v) => `$${v.toFixed(2)}`} />\n                <Tooltip formatter={(value: number) => [`$${value.toFixed(4)}`, 'Spend']} />\n                <Area type=\"monotone\" dataKey=\"spend\" stroke=\"#8884d8\" fill=\"#8884d8\" fillOpacity={0.3} />\n              </AreaChart>\n            </ResponsiveContainer>\n          </Box>\n        </Grid>\n\n        <Grid item xs={12} md={6}>\n          <Typography variant=\"subtitle2\" color=\"textSecondary\" gutterBottom>\n            Token Usage by Model\n          </Typography>\n          <Box height={250}>\n            <ResponsiveContainer width=\"100%\" height=\"100%\">\n              <BarChart data={filteredModelData}>\n                <CartesianGrid strokeDasharray=\"3 3\" />\n                <XAxis dataKey=\"model\" tick={{ fontSize: 10 }} />\n                <YAxis tick={{ fontSize: 12 }} />\n                <Tooltip />\n                <Legend />\n                <Bar dataKey=\"promptTokens\" name=\"Prompt Tokens\" fill=\"#8884d8\" stackId=\"a\" />\n                <Bar dataKey=\"completionTokens\" name=\"Completion Tokens\" fill=\"#82ca9d\" stackId=\"a\" />\n              </BarChart>\n            </ResponsiveContainer>\n          </Box>\n        </Grid>\n\n        <Grid item xs={12}>\n          <Box display=\"flex\" gap={4} flexWrap=\"wrap\">\n            <Box>\n              <Typography variant=\"body2\" color=\"textSecondary\">Total Spend</Typography>\n              <Typography variant=\"h5\">${usage?.total_spend?.toFixed(4) || '0.00'}</Typography>\n            </Box>\n            <Box>\n              <Typography variant=\"body2\" color=\"textSecondary\">Total Tokens</Typography>\n              <Typography variant=\"h5\">{usage?.total_tokens?.toLocaleString() || '0'}</Typography>\n            </Box>\n            <Box>\n              <Typography variant=\"body2\" color=\"textSecondary\">Prompt Tokens</Typography>\n              <Typography variant=\"h5\">{usage?.prompt_tokens?.toLocaleString() || '0'}</Typography>\n            </Box>\n            <Box>\n              <Typography variant=\"body2\" color=\"textSecondary\">Completion Tokens</Typography>\n              <Typography variant=\"h5\">{usage?.completion_tokens?.toLocaleString() || '0'}</Typography>\n            </Box>\n          </Box>\n        </Grid>\n      </Grid>\n    </Paper>\n  );\n};", "import { FetchApi } from '@backstage/core-plugin-api';\nimport { UserInfo, VirtualKey, ModelInfo, UsageMetrics, GenerateKeyRequest, GenerateKeyResponse } from './types';\n\nexport class LiteLlmApi {\n  private fetchApi: FetchApi;\n  private basePath: string;\n\n  constructor(fetchApi: FetchApi, basePath: string = '/api/litellm') {\n    this.fetchApi = fetchApi;\n    this.basePath = basePath;\n  }\n\n  private async get<T>(path: string, params?: Record<string, string>): Promise<T> {\n    const url = new URL(`${this.basePath}${path}`, window.location.origin);\n    if (params) {\n      Object.entries(params).forEach(([key, value]) => {\n        url.searchParams.append(key, value);\n      });\n    }\n    const response = await this.fetchApi.fetch(url.toString());\n    if (!response.ok) {\n      throw new Error(`Failed to fetch: ${response.status} ${response.statusText}`);\n    }\n    return response.json();\n  }\n\n  private async post<T>(path: string, body: unknown): Promise<T> {\n    const response = await this.fetchApi.fetch(`${this.basePath}${path}`, {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify(body),\n    });\n    if (!response.ok) {\n      throw new Error(`Failed to fetch: ${response.status} ${response.statusText}`);\n    }\n    return response.json();\n  }\n\n  private async del<T>(path: string): Promise<T> {\n    const response = await fetch(`${this.basePath}${path}`, {\n      method: 'DELETE',\n      headers: { 'Content-Type': 'application/json' },\n    });\n    if (!response.ok) {\n      throw new Error(`Failed to fetch: ${response.status} ${response.statusText}`);\n    }\n    return response.json();\n  }\n\n  async getUserInfo(userId?: string): Promise<UserInfo> {\n    const params = userId ? { user_id: userId } : undefined;\n    return this.get<UserInfo>('/user/info', params);\n  }\n\n  async listKeys(userId?: string): Promise<VirtualKey[]> {\n    const params = userId ? { user_id: userId } : undefined;\n    return this.get<VirtualKey[]>('/keys', params);\n  }\n\n  async generateKey(request: GenerateKeyRequest): Promise<GenerateKeyResponse> {\n    return this.post<GenerateKeyResponse>('/keys/generate', request);\n  }\n\n  async deleteKey(keyId: string): Promise<{ success: boolean }> {\n    return this.del<{ success: boolean }>(`/keys/${encodeURIComponent(keyId)}`);\n  }\n\n  async listModels(): Promise<ModelInfo[]> {\n    return this.get<ModelInfo[]>('/models');\n  }\n\n  async getUsage(startDate: string, endDate: string, userId?: string): Promise<UsageMetrics> {\n    const params: Record<string, string> = { start_date: startDate, end_date: endDate };\n    if (userId) params.user_id = userId;\n    return this.get<UsageMetrics>('/usage', params);\n  }\n}"],
+  "mappings": ";AAAA,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;;;ACD9B,SAAgB,YAAAA,WAAU,WAAW,mBAAmB;AACxD,SAAS,QAAAC,OAAM,OAAAC,MAAK,UAAU,OAAO,oBAAAC,yBAAwB;AAC7D,SAAS,gBAAgB;;;ACDzB,SAAS,KAAK,YAAY,gBAAgB,OAAO,YAAY;AAC7D,SAAS,SAAS,aAAa;AAYvB,cAqBI,YArBJ;AAJD,IAAM,kBAAkD,CAAC,EAAE,UAAU,QAAQ,MAAM;AACxF,MAAI,SAAS;AACX,WACE,oBAAC,SAAM,OAAO,EAAE,SAAS,IAAI,cAAc,GAAG,GAC5C,8BAAC,kBAAe,GAClB;AAAA,EAEJ;AAEA,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,SAAS,cAAc;AACtC,QAAM,QAAQ,SAAS,iBAAiB;AACxC,QAAM,mBAAmB,SAAS,IAAI,KAAK,IAAK,QAAQ,SAAU,KAAK,GAAG,IAAI;AAC9E,QAAM,eAAe,SAAS,KAAK,SAAS;AAC5C,QAAM,cAAc,SAAS,KAAK,SAAS,SAAS,OAAO,CAAC;AAE5D,SACE,oBAAC,SAAM,OAAO,EAAE,SAAS,IAAI,cAAc,GAAG,GAC5C,+BAAC,OAAI,SAAQ,QAAO,YAAW,UAAS,KAAK,GAAG,UAAS,QACvD;AAAA,yBAAC,OAAI,UAAU,GACb;AAAA,0BAAC,cAAW,SAAQ,MAAM,mBAAS,OAAM;AAAA,MACxC,SAAS,cACR,qBAAC,OAAI,SAAQ,QAAO,YAAW,UAAS,KAAK,KAAK,IAAI,KACpD;AAAA,4BAAC,SAAM,UAAS,SAAQ,OAAM,UAAS;AAAA,QACvC,oBAAC,cAAW,SAAQ,SAAQ,OAAM,iBAC/B,mBAAS,YACZ;AAAA,SACF;AAAA,OAEJ;AAAA,IAEC,SAAS,KACR,qBAAC,OAAI,UAAU,KACb;AAAA,2BAAC,OAAI,SAAQ,QAAO,gBAAe,iBAAgB,IAAI,KACrD;AAAA,6BAAC,cAAW,SAAQ,SAAQ;AAAA;AAAA,UACjB,MAAM,QAAQ,CAAC;AAAA,UAAE;AAAA,UAAK,OAAO,QAAQ,CAAC;AAAA,WACjD;AAAA,QACC,gBAAgB,oBAAC,QAAK,MAAM,oBAAC,WAAQ,GAAI,OAAM,eAAc,MAAK,SAAQ,OAAM,aAAY;AAAA,QAC5F,eAAe,oBAAC,QAAK,OAAM,cAAa,MAAK,SAAQ,OAAM,WAAU;AAAA,SACxE;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,OAAO;AAAA,UACP,OAAO,eAAe,cAAc,cAAc,YAAY;AAAA,UAC9D,OAAO,EAAE,QAAQ,GAAG,cAAc,EAAE;AAAA;AAAA,MACtC;AAAA,OACF;AAAA,KAEJ,GACF;AAEJ;;;AChEA,SAAgB,gBAAgB;AAChC;AAAA,EACE,SAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAAC;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa,QAAQ,KAAK,YAAY,qBAAqB;AAmEhE,mBAGM,OAAAC,MADF,QAAAC,aAFJ;AAxDJ,IAAM,UAAU,CAAC,QAAwB;AACvC,MAAI,IAAI,UAAU,EAAG,QAAO;AAC5B,SAAO,GAAG,IAAI,MAAM,GAAG,CAAC,CAAC,MAAM,IAAI,MAAM,EAAE,CAAC;AAC9C;AAEA,IAAM,aAAa,CAAC,YAA4B;AAC9C,MAAI;AACF,WAAO,IAAI,KAAK,OAAO,EAAE,mBAAmB;AAAA,EAC9C,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEO,IAAM,YAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAwB,IAAI;AACpE,QAAM,CAAC,aAAa,cAAc,IAAI,SAAwB,IAAI;AAClE,QAAM,CAAC,UAAU,WAAW,IAAI,SAA6B;AAAA,IAC3D,OAAO;AAAA,IACP,QAAQ,CAAC;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,EACb,CAAC;AACD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,QAAM,iBAAiB,YAAY;AACjC,kBAAc,IAAI;AAClB,QAAI;AACF,YAAM,WAAW,MAAM,cAAc,QAAQ;AAC7C,qBAAe,UAAU,OAAO,EAAE;AAClC,kBAAY,EAAE,OAAO,IAAI,QAAQ,CAAC,GAAG,UAAU,MAAM,CAAC;AAAA,IACxD,SAAS,OAAO;AACd,cAAQ,MAAM,2BAA2B,KAAK;AAAA,IAChD,UAAE;AACA,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF;AAEA,QAAM,mBAAmB,MAAM;AAC7B,yBAAqB,KAAK;AAC1B,mBAAe,IAAI;AACnB,gBAAY,EAAE,OAAO,IAAI,QAAQ,CAAC,GAAG,UAAU,MAAM,CAAC;AAAA,EACxD;AAEA,QAAM,kBAAkB,CAAC,SAAiB;AACxC,cAAU,UAAU,UAAU,IAAI;AAAA,EACpC;AAEA,SACE,gBAAAA,MAAA,YACE;AAAA,oBAAAA,MAACL,QAAA,EAAM,OAAO,EAAE,cAAc,GAAG,GAC/B;AAAA,sBAAAK,MAACJ,MAAA,EAAI,SAAQ,QAAO,gBAAe,iBAAgB,YAAW,UAAS,GAAG,GACxE;AAAA,wBAAAG,KAACF,aAAA,EAAW,SAAQ,MAAK,0BAAY;AAAA,QACrC,gBAAAE;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,WAAW,gBAAAA,KAAC,OAAI;AAAA,YAChB,SAAS,MAAM,qBAAqB,IAAI;AAAA,YACzC;AAAA;AAAA,QAED;AAAA,SACF;AAAA,MAEA,gBAAAA,KAAC,kBACC,0BAAAC,MAAC,SACC;AAAA,wBAAAD,KAAC,aACC,0BAAAC,MAAC,YACC;AAAA,0BAAAD,KAAC,aAAU,mBAAK;AAAA,UAChB,gBAAAA,KAAC,aAAU,iBAAG;AAAA,UACd,gBAAAA,KAAC,aAAU,qBAAO;AAAA,UAClB,gBAAAA,KAAC,aAAU,mBAAK;AAAA,UAChB,gBAAAA,KAAC,aAAU,oBAAM;AAAA,UACjB,gBAAAA,KAAC,aAAU,uBAAS;AAAA,UACpB,gBAAAA,KAAC,aAAU,oBAAM;AAAA,UACjB,gBAAAA,KAAC,aAAU,OAAM,SAAQ,qBAAO;AAAA,WAClC,GACF;AAAA,QACA,gBAAAA,KAAC,aACE,oBACC,gBAAAA,KAAC,YACC,0BAAAA,KAAC,aAAU,SAAS,GAAG,OAAM,UAC3B,0BAAAA,KAAC,oBAAiB,MAAM,IAAI,GAC9B,GACF,IACE,KAAK,WAAW,IAClB,gBAAAA,KAAC,YACC,0BAAAA,KAAC,aAAU,SAAS,GAAG,OAAM,UAC3B,0BAAAA,KAACF,aAAA,EAAW,OAAM,iBAAgB,2BAAa,GACjD,GACF,IAEA,KAAK,IAAI,CAAC,QACR,gBAAAG,MAAC,YACC;AAAA,0BAAAD,KAAC,aAAW,cAAI,aAAa,KAAI;AAAA,UACjC,gBAAAA,KAAC,aACC,0BAAAC,MAACJ,MAAA,EAAI,SAAQ,QAAO,YAAW,UAAS,KAAK,KAC3C;AAAA,4BAAAG,KAACF,aAAA,EAAW,SAAQ,SAAQ,WAAU,QAAO,OAAO,EAAE,YAAY,YAAY,GAC3E,2BAAiB,IAAI,MAAM,IAAI,MAAM,QAAQ,IAAI,GAAG,GACvD;AAAA,YACA,gBAAAE;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM,gBAAgB,iBAAiB,IAAI,MAAM,OAAO,IAAI,GAAG;AAAA,gBAEvE,2BAAiB,IAAI,MAAM,gBAAAA,KAAC,iBAAc,IAAK,gBAAAA,KAAC,cAAW;AAAA;AAAA,YAC9D;AAAA,YACA,gBAAAA,KAAC,cAAW,MAAK,SAAQ,SAAS,MAAM,gBAAgB,IAAI,GAAG,GAC7D,0BAAAA,KAAC,eAAY,UAAS,SAAQ,GAChC;AAAA,aACF,GACF;AAAA,UACA,gBAAAA,KAAC,aAAW,qBAAW,IAAI,UAAU,GAAE;AAAA,UACvC,gBAAAC,MAAC,aAAU;AAAA;AAAA,YAAE,IAAI,OAAO,QAAQ,CAAC,KAAK;AAAA,aAAO;AAAA,UAC7C,gBAAAD,KAAC,aAAW,cAAI,aAAa,IAAI,IAAI,UAAU,KAAK,KAAI;AAAA,UACxD,gBAAAA,KAAC,aAAW,cAAI,aAAa,KAAI;AAAA,UACjC,gBAAAA,KAAC,aACC,0BAAAC,MAACJ,MAAA,EAAI,SAAQ,QAAO,KAAK,KAAK,UAAS,QACpC;AAAA,gBAAI,QAAQ,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,UAC5B,gBAAAG,KAACD,OAAA,EAAiB,OAAO,OAAO,MAAK,WAA1B,KAAkC,CAC9C;AAAA,aACC,IAAI,QAAQ,UAAU,KAAK,KAC3B,gBAAAC,KAACD,OAAA,EAAK,OAAO,KAAK,IAAI,QAAQ,UAAU,KAAK,CAAC,IAAI,MAAK,SAAQ,SAAQ,YAAW;AAAA,aAEtF,GACF;AAAA,UACA,gBAAAC,KAAC,aAAU,OAAM,SACf,0BAAAA,KAAC,cAAW,OAAM,aAAY,SAAS,MAAM,YAAY,IAAI,GAAG,GAC9D,0BAAAA,KAAC,UAAO,GACV,GACF;AAAA,aApCa,IAAI,GAqCnB,CACD,GAEL;AAAA,SACF,GACF;AAAA,OACF;AAAA,IAEA,gBAAAC,MAAC,UAAO,MAAM,mBAAmB,SAAS,kBAAkB,UAAS,MAAK,WAAS,MACjF;AAAA,sBAAAD,KAAC,eAAa,wBAAc,kBAAkB,oBAAmB;AAAA,MACjE,gBAAAA,KAAC,iBACE,wBACC,gBAAAC,MAACJ,MAAA,EACC;AAAA,wBAAAG,KAACF,aAAA,EAAW,SAAQ,SAAQ,OAAM,iBAAgB,cAAY,MAAC,mEAE/D;AAAA,QACA,gBAAAG;AAAA,UAACJ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,GAAG;AAAA,YACH,OAAO,EAAE,iBAAiB,WAAW,cAAc,EAAE;AAAA,YAErD;AAAA,8BAAAG,KAACF,aAAA,EAAW,WAAU,QAAO,OAAO,EAAE,YAAY,aAAa,WAAW,YAAY,GACnF,uBACH;AAAA,cACA,gBAAAE,KAAC,cAAW,SAAS,MAAM,gBAAgB,WAAW,GACpD,0BAAAA,KAAC,eAAY,GACf;AAAA;AAAA;AAAA,QACF;AAAA,SACF,IAEA,gBAAAC,MAACJ,MAAA,EAAI,SAAQ,QAAO,eAAc,UAAS,KAAK,GAAG,IAAI,GACrD;AAAA,wBAAAG;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,OAAO,SAAS,SAAS;AAAA,YACzB,UAAU,CAAC,MAAM,YAAY,EAAE,GAAG,UAAU,OAAO,EAAE,OAAO,MAAM,CAAC;AAAA,YACnE,WAAS;AAAA;AAAA,QACX;AAAA,QACA,gBAAAC;AAAA,UAAC;AAAA;AAAA,YACC,QAAM;AAAA,YACN,OAAM;AAAA,YACN,OAAO,SAAS,YAAY;AAAA,YAC5B,UAAU,CAAC,MAAM,YAAY,EAAE,GAAG,UAAU,UAAU,EAAE,OAAO,MAAM,CAAC;AAAA,YACtE,WAAS;AAAA,YAET;AAAA,8BAAAD,KAAC,YAAS,OAAM,MAAK,mBAAK;AAAA,cAC1B,gBAAAA,KAAC,YAAS,OAAM,MAAK,oBAAM;AAAA,cAC3B,gBAAAA,KAAC,YAAS,OAAM,OAAM,qBAAO;AAAA,cAC7B,gBAAAA,KAAC,YAAS,OAAM,OAAM,qBAAO;AAAA,cAC7B,gBAAAA,KAAC,YAAS,OAAM,MAAK,oBAAM;AAAA;AAAA;AAAA,QAC7B;AAAA,QACA,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,MAAK;AAAA,YACL,OAAO,SAAS,cAAc;AAAA,YAC9B,UAAU,CAAC,MACT,YAAY,EAAE,GAAG,UAAU,YAAY,EAAE,OAAO,QAAQ,OAAO,EAAE,OAAO,KAAK,IAAI,OAAU,CAAC;AAAA,YAE9F,WAAS;AAAA;AAAA,QACX;AAAA,QACA,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,MAAK;AAAA,YACL,OAAO,SAAS,aAAa;AAAA,YAC7B,UAAU,CAAC,MACT,YAAY,EAAE,GAAG,UAAU,WAAW,EAAE,OAAO,QAAQ,OAAO,EAAE,OAAO,KAAK,IAAI,OAAU,CAAC;AAAA,YAE7F,WAAS;AAAA;AAAA,QACX;AAAA,QACA,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,QAAM;AAAA,YACN,OAAM;AAAA,YACN,aAAa,EAAE,UAAU,KAAK;AAAA,YAC9B,OAAO,SAAS,UAAU,CAAC;AAAA,YAC3B,UAAU,CAAC,MAAM,YAAY,EAAE,GAAG,UAAU,QAAQ,EAAE,OAAO,MAAkB,CAAC;AAAA,YAChF,WAAS;AAAA,YAER,iBAAO,IAAI,CAAC,UACX,gBAAAA,KAAC,YAAgC,OAAO,MAAM,YAC3C,gBAAM,cADM,MAAM,UAErB,CACD;AAAA;AAAA,QACH;AAAA,SACF,GAEJ;AAAA,MACA,gBAAAC,MAAC,iBACC;AAAA,wBAAAD,KAAC,UAAO,SAAS,kBAAmB,wBAAc,SAAS,UAAS;AAAA,QACnE,CAAC,eACA,gBAAAA,KAAC,UAAO,SAAS,gBAAgB,SAAQ,aAAY,OAAM,WAAU,UAAU,YAC5E,uBAAa,gBAAAA,KAAC,oBAAiB,MAAM,IAAI,IAAK,YACjD;AAAA,SAEJ;AAAA,OACF;AAAA,KACF;AAEJ;;;AC5QA,SAAgB,YAAAE,iBAAgB;AAChC;AAAA,EACE,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAAC;AAAA,EACA;AAAA,EACA,oBAAAC;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAqBC,SAME,OAAAC,MANF,QAAAC,aAAA;AARR,IAAM,oBAID,CAAC,EAAE,QAAQ,UAAU,UAAU,MAAM;AACxC,SACE,gBAAAD,KAACJ,MAAA,EAAI,SAAQ,QAAO,KAAK,GACrB,WAAC,SAAS,MAAM,KAAK,EAAmB,IAAI,CAAC,MAC7C,gBAAAK;AAAA,IAAC;AAAA;AAAA,MAEC,OAAO;AAAA,MACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAmB;AAAA,MACtD,MAAK;AAAA,MAEL;AAAA,wBAAAD,KAACF,WAAA,EAAS,OAAM,SAAQ,mBAAK;AAAA,QAC7B,gBAAAE,KAACF,WAAA,EAAS,OAAM,MAAK,yBAAW;AAAA,QAChC,gBAAAE,KAACF,WAAA,EAAS,OAAM,OAAM,0BAAY;AAAA;AAAA;AAAA,IAP7B;AAAA,EAQP,CACD,GACH;AAEJ;AAEO,IAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,eAAe,gBAAgB,IAAIJ,UAAiB,KAAK;AAEhE,MAAI,SAAS;AACX,WACE,gBAAAM,KAACL,QAAA,EAAM,OAAO,EAAE,SAAS,GAAG,GAC1B,0BAAAK,KAACJ,MAAA,EAAI,SAAQ,QAAO,gBAAe,UAAS,GAAG,GAC7C,0BAAAI,KAACD,mBAAA,EAAiB,GACpB,GACF;AAAA,EAEJ;AAEA,QAAMG,cAAa,CAAC,SAAe;AACjC,WAAO,KAAK,mBAAmB,SAAS,EAAE,OAAO,SAAS,KAAK,UAAU,CAAC;AAAA,EAC5E;AAEA,QAAM,YAAY,OAAO,aAAa,IAAI,CAAC,OAAO;AAAA,IAChD,MAAM,EAAE;AAAA,IACR,OAAO,EAAE;AAAA,IACT,cAAc,EAAE;AAAA,IAChB,kBAAkB,EAAE;AAAA,IACpB,aAAa,EAAE;AAAA,EACjB,EAAE,KAAK,CAAC;AAER,QAAM,mBAAmB,OAAO,QAAQ,OAAO,kBAAkB,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,OAAO;AAAA,IAC3F;AAAA,IACA,OAAO,KAAK;AAAA,IACZ,cAAc,KAAK;AAAA,IACnB,kBAAkB,KAAK;AAAA,EACzB,EAAE;AAEF,QAAM,oBACJ,kBAAkB,QACd,mBACA,iBAAiB,OAAO,CAAC,MAAM,EAAE,UAAU,aAAa;AAE9D,SACE,gBAAAD,MAACN,QAAA,EAAM,OAAO,EAAE,SAAS,GAAG,GAC1B;AAAA,oBAAAM,MAACL,MAAA,EAAI,SAAQ,QAAO,gBAAe,iBAAgB,YAAW,UAAS,IAAI,GACzE;AAAA,sBAAAI,KAACH,aAAA,EAAW,SAAQ,MAAK,6BAAe;AAAA,MACxC,gBAAAI,MAACL,MAAA,EAAI,SAAQ,QAAO,KAAK,GAAG,YAAW,UACrC;AAAA,wBAAAI;AAAA,UAAC;AAAA;AAAA,YACC,QAAO;AAAA,YACP,UAAU,CAAC,WAAW;AACpB,oBAAM,MAAM,oBAAI,KAAK;AACrB,oBAAM,QAAQ,oBAAI,KAAK;AACvB,kBAAI,WAAW,QAAS,OAAM,SAAS,GAAG,GAAG,GAAG,CAAC;AAAA,uBACxC,WAAW,KAAM,OAAM,QAAQ,MAAM,QAAQ,IAAI,CAAC;AAAA,uBAClD,WAAW,MAAO,OAAM,QAAQ,MAAM,QAAQ,IAAI,EAAE;AAC7D,gCAAkB,EAAE,OAAO,IAAI,CAAC;AAAA,YAClC;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA,gBAAAC,MAAC,eAAY,MAAK,SAAQ,OAAO,EAAE,UAAU,IAAI,GAC/C;AAAA,0BAAAD,KAAC,cAAW,mBAAK;AAAA,UACjB,gBAAAC,MAAC,UAAO,OAAO,eAAe,UAAU,CAAC,MAAM,iBAAiB,EAAE,OAAO,KAAK,GAAG,OAAM,SACrF;AAAA,4BAAAD,KAACF,WAAA,EAAS,OAAM,OAAM,wBAAU;AAAA,YAC/B,OAAO,IAAI,CAAC,MACX,gBAAAE,KAACF,WAAA,EAA4B,OAAO,EAAE,YACnC,YAAE,cADU,EAAE,UAEjB,CACD;AAAA,aACH;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,IAEA,gBAAAG,MAAC,QAAK,WAAS,MAAC,SAAS,GACvB;AAAA,sBAAAA,MAAC,QAAK,MAAI,MAAC,IAAI,IAAI,IAAI,GACrB;AAAA,wBAAAD,KAACH,aAAA,EAAW,SAAQ,aAAY,OAAM,iBAAgB,cAAY,MAAC,yBAEnE;AAAA,QACA,gBAAAG,KAACJ,MAAA,EAAI,QAAQ,KACX,0BAAAI,KAAC,uBAAoB,OAAM,QAAO,QAAO,QACvC,0BAAAC,MAAC,aAAU,MAAM,WACf;AAAA,0BAAAD,KAAC,iBAAc,iBAAgB,OAAM;AAAA,UACrC,gBAAAA,KAAC,SAAM,SAAQ,QAAO,MAAM,EAAE,UAAU,GAAG,GAAG;AAAA,UAC9C,gBAAAA,KAAC,SAAM,MAAM,EAAE,UAAU,GAAG,GAAG,eAAe,CAAC,MAAM,IAAI,EAAE,QAAQ,CAAC,CAAC,IAAI;AAAA,UACzE,gBAAAA,KAAC,WAAQ,WAAW,CAAC,UAAkB,CAAC,IAAI,MAAM,QAAQ,CAAC,CAAC,IAAI,OAAO,GAAG;AAAA,UAC1E,gBAAAA,KAAC,QAAK,MAAK,YAAW,SAAQ,SAAQ,QAAO,WAAU,MAAK,WAAU,aAAa,KAAK;AAAA,WAC1F,GACF,GACF;AAAA,SACF;AAAA,MAEA,gBAAAC,MAAC,QAAK,MAAI,MAAC,IAAI,IAAI,IAAI,GACrB;AAAA,wBAAAD,KAACH,aAAA,EAAW,SAAQ,aAAY,OAAM,iBAAgB,cAAY,MAAC,kCAEnE;AAAA,QACA,gBAAAG,KAACJ,MAAA,EAAI,QAAQ,KACX,0BAAAI,KAAC,uBAAoB,OAAM,QAAO,QAAO,QACvC,0BAAAC,MAAC,YAAS,MAAM,mBACd;AAAA,0BAAAD,KAAC,iBAAc,iBAAgB,OAAM;AAAA,UACrC,gBAAAA,KAAC,SAAM,SAAQ,SAAQ,MAAM,EAAE,UAAU,GAAG,GAAG;AAAA,UAC/C,gBAAAA,KAAC,SAAM,MAAM,EAAE,UAAU,GAAG,GAAG;AAAA,UAC/B,gBAAAA,KAAC,WAAQ;AAAA,UACT,gBAAAA,KAAC,UAAO;AAAA,UACR,gBAAAA,KAAC,OAAI,SAAQ,gBAAe,MAAK,iBAAgB,MAAK,WAAU,SAAQ,KAAI;AAAA,UAC5E,gBAAAA,KAAC,OAAI,SAAQ,oBAAmB,MAAK,qBAAoB,MAAK,WAAU,SAAQ,KAAI;AAAA,WACtF,GACF,GACF;AAAA,SACF;AAAA,MAEA,gBAAAA,KAAC,QAAK,MAAI,MAAC,IAAI,IACb,0BAAAC,MAACL,MAAA,EAAI,SAAQ,QAAO,KAAK,GAAG,UAAS,QACnC;AAAA,wBAAAK,MAACL,MAAA,EACC;AAAA,0BAAAI,KAACH,aAAA,EAAW,SAAQ,SAAQ,OAAM,iBAAgB,yBAAW;AAAA,UAC7D,gBAAAI,MAACJ,aAAA,EAAW,SAAQ,MAAK;AAAA;AAAA,YAAE,OAAO,aAAa,QAAQ,CAAC,KAAK;AAAA,aAAO;AAAA,WACtE;AAAA,QACA,gBAAAI,MAACL,MAAA,EACC;AAAA,0BAAAI,KAACH,aAAA,EAAW,SAAQ,SAAQ,OAAM,iBAAgB,0BAAY;AAAA,UAC9D,gBAAAG,KAACH,aAAA,EAAW,SAAQ,MAAM,iBAAO,cAAc,eAAe,KAAK,KAAI;AAAA,WACzE;AAAA,QACA,gBAAAI,MAACL,MAAA,EACC;AAAA,0BAAAI,KAACH,aAAA,EAAW,SAAQ,SAAQ,OAAM,iBAAgB,2BAAa;AAAA,UAC/D,gBAAAG,KAACH,aAAA,EAAW,SAAQ,MAAM,iBAAO,eAAe,eAAe,KAAK,KAAI;AAAA,WAC1E;AAAA,QACA,gBAAAI,MAACL,MAAA,EACC;AAAA,0BAAAI,KAACH,aAAA,EAAW,SAAQ,SAAQ,OAAM,iBAAgB,+BAAiB;AAAA,UACnE,gBAAAG,KAACH,aAAA,EAAW,SAAQ,MAAM,iBAAO,mBAAmB,eAAe,KAAK,KAAI;AAAA,WAC9E;AAAA,SACF,GACF;AAAA,OACF;AAAA,KACF;AAEJ;;;AC9LO,IAAM,aAAN,MAAiB;AAAA,EACd;AAAA,EACA;AAAA,EAER,YAAY,UAAoB,WAAmB,gBAAgB;AACjE,SAAK,WAAW;AAChB,SAAK,WAAW;AAAA,EAClB;AAAA,EAEA,MAAc,IAAO,MAAc,QAA6C;AAC9E,UAAM,MAAM,IAAI,IAAI,GAAG,KAAK,QAAQ,GAAG,IAAI,IAAI,OAAO,SAAS,MAAM;AACrE,QAAI,QAAQ;AACV,aAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AAC/C,YAAI,aAAa,OAAO,KAAK,KAAK;AAAA,MACpC,CAAC;AAAA,IACH;AACA,UAAM,WAAW,MAAM,KAAK,SAAS,MAAM,IAAI,SAAS,CAAC;AACzD,QAAI,CAAC,SAAS,IAAI;AAChB,YAAM,IAAI,MAAM,oBAAoB,SAAS,MAAM,IAAI,SAAS,UAAU,EAAE;AAAA,IAC9E;AACA,WAAO,SAAS,KAAK;AAAA,EACvB;AAAA,EAEA,MAAc,KAAQ,MAAc,MAA2B;AAC7D,UAAM,WAAW,MAAM,KAAK,SAAS,MAAM,GAAG,KAAK,QAAQ,GAAG,IAAI,IAAI;AAAA,MACpE,QAAQ;AAAA,MACR,SAAS,EAAE,gBAAgB,mBAAmB;AAAA,MAC9C,MAAM,KAAK,UAAU,IAAI;AAAA,IAC3B,CAAC;AACD,QAAI,CAAC,SAAS,IAAI;AAChB,YAAM,IAAI,MAAM,oBAAoB,SAAS,MAAM,IAAI,SAAS,UAAU,EAAE;AAAA,IAC9E;AACA,WAAO,SAAS,KAAK;AAAA,EACvB;AAAA,EAEA,MAAc,IAAO,MAA0B;AAC7C,UAAM,WAAW,MAAM,MAAM,GAAG,KAAK,QAAQ,GAAG,IAAI,IAAI;AAAA,MACtD,QAAQ;AAAA,MACR,SAAS,EAAE,gBAAgB,mBAAmB;AAAA,IAChD,CAAC;AACD,QAAI,CAAC,SAAS,IAAI;AAChB,YAAM,IAAI,MAAM,oBAAoB,SAAS,MAAM,IAAI,SAAS,UAAU,EAAE;AAAA,IAC9E;AACA,WAAO,SAAS,KAAK;AAAA,EACvB;AAAA,EAEA,MAAM,YAAY,QAAoC;AACpD,UAAM,SAAS,SAAS,EAAE,SAAS,OAAO,IAAI;AAC9C,WAAO,KAAK,IAAc,cAAc,MAAM;AAAA,EAChD;AAAA,EAEA,MAAM,SAAS,QAAwC;AACrD,UAAM,SAAS,SAAS,EAAE,SAAS,OAAO,IAAI;AAC9C,WAAO,KAAK,IAAkB,SAAS,MAAM;AAAA,EAC/C;AAAA,EAEA,MAAM,YAAY,SAA2D;AAC3E,WAAO,KAAK,KAA0B,kBAAkB,OAAO;AAAA,EACjE;AAAA,EAEA,MAAM,UAAU,OAA8C;AAC5D,WAAO,KAAK,IAA0B,SAAS,mBAAmB,KAAK,CAAC,EAAE;AAAA,EAC5E;AAAA,EAEA,MAAM,aAAmC;AACvC,WAAO,KAAK,IAAiB,SAAS;AAAA,EACxC;AAAA,EAEA,MAAM,SAAS,WAAmB,SAAiB,QAAwC;AACzF,UAAM,SAAiC,EAAE,YAAY,WAAW,UAAU,QAAQ;AAClF,QAAI,OAAQ,QAAO,UAAU;AAC7B,WAAO,KAAK,IAAkB,UAAU,MAAM;AAAA,EAChD;AACF;;;AJ4BQ,gBAAAM,MAOF,QAAAC,aAPE;AA1FD,IAAM,cAA0C,CAAC,EAAE,SAAS,MAAM;AACvE,QAAM,MAAM,IAAI,WAAW,QAAQ;AAEnC,QAAM,CAAC,WAAW,YAAY,IAAIC,UAAoB,MAAM;AAC1D,UAAM,MAAM,oBAAI,KAAK;AACrB,UAAM,QAAQ,oBAAI,KAAK;AACvB,UAAM,QAAQ,MAAM,QAAQ,IAAI,CAAC;AACjC,WAAO,EAAE,OAAO,IAAI;AAAA,EACtB,CAAC;AAED,QAAM,CAAC,UAAU,WAAW,IAAIA,UAAoE,IAAI;AAExG,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,EACT,IAAI,SAAS,YAAY;AACvB,QAAI;AACF,aAAO,MAAM,IAAI,YAAY;AAAA,IAC/B,SAAS,GAAQ;AACf,kBAAY,EAAE,SAAS,6BAA6B,EAAE,OAAO,IAAI,UAAU,QAAQ,CAAC;AACpF,aAAO;AAAA,IACT;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,EACX,IAAI,SAAS,YAAY;AACvB,QAAI;AACF,aAAO,MAAM,IAAI,SAAS;AAAA,IAC5B,SAAS,GAAQ;AACf,kBAAY,EAAE,SAAS,wBAAwB,EAAE,OAAO,IAAI,UAAU,QAAQ,CAAC;AAC/E,aAAO,CAAC;AAAA,IACV;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,EACX,IAAI,SAAS,YAAY;AACvB,QAAI;AACF,aAAO,MAAM,IAAI,WAAW;AAAA,IAC9B,QAAQ;AACN,aAAO,CAAC;AAAA,IACV;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,EACX,IAAI,SAAS,YAAY;AACvB,UAAM,YAAY,UAAU,MAAM,YAAY,EAAE,MAAM,GAAG,EAAE,CAAC;AAC5D,UAAM,UAAU,UAAU,IAAI,YAAY,EAAE,MAAM,GAAG,EAAE,CAAC;AACxD,WAAO,IAAI,SAAS,WAAW,OAAO;AAAA,EACxC,GAAG,CAAC,SAAS,CAAC;AAEd,YAAU,MAAM;AACd,QAAI,WAAW;AACb,kBAAY,EAAE,SAAS,UAAU,UAAU,OAAO,IAAI,UAAU,QAAQ,CAAC;AAAA,IAC3E;AACA,QAAI,WAAW;AACb,kBAAY,EAAE,SAAS,UAAU,UAAU,OAAO,IAAI,UAAU,QAAQ,CAAC;AAAA,IAC3E;AAAA,EACF,GAAG,CAAC,WAAW,SAAS,CAAC;AAEzB,QAAM,oBAAoB,YAAY,OAAO,YAA8D;AACzG,UAAM,WAAW,MAAM,IAAI,YAAY,OAAO;AAC9C,gBAAY,EAAE,SAAS,8BAA8B,UAAU,UAAU,CAAC;AAC1E,gBAAY;AACZ,WAAO;AAAA,EACT,GAAG,CAAC,KAAK,WAAW,CAAC;AAErB,QAAM,kBAAkB,YAAY,OAAO,UAAkB;AAC3D,QAAI;AACF,YAAM,IAAI,UAAU,KAAK;AACzB,kBAAY,EAAE,SAAS,4BAA4B,UAAU,UAAU,CAAC;AACxE,kBAAY;AAAA,IACd,SAAS,GAAQ;AACf,kBAAY,EAAE,SAAS,yBAAyB,EAAE,OAAO,IAAI,UAAU,QAAQ,CAAC;AAAA,IAClF;AAAA,EACF,GAAG,CAAC,KAAK,WAAW,CAAC;AAErB,QAAM,YAAY,eAAe,eAAe;AAEhD,MAAI,aAAa,CAAC,YAAY,CAAC,MAAM;AACnC,WACE,gBAAAF,KAACG,MAAA,EAAI,SAAQ,QAAO,gBAAe,UAAS,YAAW,UAAS,WAAU,QACxE,0BAAAH,KAACI,mBAAA,EAAiB,GACpB;AAAA,EAEJ;AAEA,SACE,gBAAAH,MAACE,MAAA,EAAI,GAAG,GACN;AAAA,oBAAAF,MAACI,OAAA,EAAK,WAAS,MAAC,SAAS,GACvB;AAAA,sBAAAL,KAACK,OAAA,EAAK,MAAI,MAAC,IAAI,IACb,0BAAAL,KAAC,mBAAgB,UAAoB,SAAS,aAAa,GAC7D;AAAA,MACA,gBAAAA,KAACK,OAAA,EAAK,MAAI,MAAC,IAAI,IACb,0BAAAL;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,QAAQ,CAAC;AAAA,UACf,QAAQ,UAAU,CAAC;AAAA,UACnB,SAAS;AAAA,UACT,eAAe;AAAA,UACf,aAAa;AAAA;AAAA,MACf,GACF;AAAA,MACA,gBAAAA,KAACK,OAAA,EAAK,MAAI,MAAC,IAAI,IACb,0BAAAL;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,SAAS;AAAA,UAChB,QAAQ,UAAU,CAAC;AAAA,UACnB;AAAA,UACA,mBAAmB;AAAA,UACnB,SAAS;AAAA;AAAA,MACX,GACF;AAAA,OACF;AAAA,IAEA,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,CAAC,CAAC;AAAA,QACR,kBAAkB;AAAA,QAClB,SAAS,MAAM,YAAY,IAAI;AAAA,QAC/B,cAAc,EAAE,UAAU,UAAU,YAAY,QAAQ;AAAA,QAEvD,sBACC,gBAAAA,KAAC,SAAM,UAAU,SAAS,UAAU,SAAS,MAAM,YAAY,IAAI,GAChE,mBAAS,SACZ;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;;;ADjJO,IAAM,gBAAgB,qBAAqB;AAAA,EAChD,IAAI;AAAA,EACJ,YAAY;AAAA,IACV,cAAc,OAAO;AAAA,MACnB,IAAI;AAAA,MACJ,aAAa;AAAA,MACb,OAAO;AAAA,MACP,WAAW;AAAA,QACT,QAAQ,YAAY;AAAA,MACtB;AAAA,IACF,CAAC;AAAA,EACH;AACF,CAAC;",
+  "names": ["useState", "Grid", "Box", "CircularProgress", "Paper", "Box", "Typography", "Chip", "jsx", "jsxs", "useState", "Paper", "Box", "Typography", "MenuItem", "CircularProgress", "jsx", "jsxs", "formatDate", "jsx", "jsxs", "useState", "Box", "CircularProgress", "Grid"]
+}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@acarmisc/backstage-plugin-litellm",
+  "version": "0.1.0",
+  "backstage": {
+    "role": "frontend-plugin",
+    "pluginId": "litellm",
+    "pluginPackages": [
+      "@govai/backstage-plugin-litellm"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "Apache-2.0",
+  "sideEffects": false,
+  "main": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "echo 'Build dist/ from Backstage monorepo: backstage-cli package build'",
+    "prepack": "echo 'Dist files must be built in Backstage monorepo and copied here'",
+    "postpack": ""
+  },
+  "dependencies": {
+    "@backstage/core-components": "^0.14.10",
+    "@backstage/core-plugin-api": "^1.9.3",
+    "@backstage/frontend-plugin-api": "^0.7.0",
+    "@backstage/plugin-catalog-react": "^1.13.0",
+    "@backstage/theme": "^0.5.6",
+    "@backstage/types": "^1.1.0",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "4.0.0-alpha.61",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-use": "^17.2.4",
+    "recharts": "^2.12.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.28.0",
+    "@backstage/core-app-api": "^0.1.1",
+    "@backstage/dev-utils": "^0.2.18",
+    "@backstage/frontend-test-utils": "^0.1.0",
+    "@backstage/test-utils": "^0.1.0",
+    "@testing-library/dom": "^10.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0"
+  },
+  "peerDependencies": {
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-router-dom": "^6.20.0"
+  }
+}