@acarmisc/backstage-plugin-litellm 0.15.2 → 0.15.3

package/README.md

@@ -8,6 +8,17 @@ Pair this package with the backend, [`@acarmisc/backstage-plugin-litellm-backend
 
 Full setup docs, configuration reference, and architecture notes live in the [project README](https://github.com/acarmisc/backstage-plugin-litellm-govai#readme).
 
+## Screenshots
+
+| View | Preview |
+|------|---------|
+| Home widget — `LiteLLMHomeWidget` | ![Home widget](../../docs/screenshots/home-widget.png) |
+| Overview / Usage Analytics | ![Usage analytics](../../docs/screenshots/usage-analytics.png) |
+| Keys tab — virtual key inventory | ![Keys tab](../../docs/screenshots/keys-tab.png) |
+| Generate New Key dialog | ![Generate New Key dialog](../../docs/screenshots/generate-key-dialog.png) |
+| Models tab | ![Models tab](../../docs/screenshots/models-tab.png) |
+| Compact "Create Key" card | ![Create Key card](../../docs/screenshots/key-card.png) |
+
 ## Installation
 
 This plugin is designed to be used **within a Backstage monorepo**.
@@ -22,6 +33,8 @@ You'll also need the backend package installed and configured — see its [READM
 
 ### Full page
 
+The `LiteLLMPage` component renders the four-tab governance view: **Overview** (usage KPIs + charts), **Keys** (virtual key inventory), **Teams** (team-scoped usage), and **Models** (proxy model catalog).
+
 ```tsx
 import { litellmPlugin, LiteLLMPage } from '@acarmisc/backstage-plugin-litellm';
 
@@ -29,9 +42,11 @@ import { litellmPlugin, LiteLLMPage } from '@acarmisc/backstage-plugin-litellm';
 <Route path="/litellm" element={<LiteLLMPage />} />
 ```
 
+![Usage Analytics full page](../../docs/screenshots/usage-analytics-overview.png)
+
 ### Home page widget
 
-`LiteLLMHomeWidget` is a compact card for the Backstage homepage. It shows the signed-in user's own usage — identity is resolved server-side from the Backstage token, so no `userId` prop is required.
+`LiteLLMHomeWidget` is a compact card for the Backstage homepage. It shows the signed-in user's own usage — identity is resolved server-side from the Backstage token, so no `userId` prop is required. The header includes a `Today` / `7d` / `30d` period selector and a daily-spend sparkline.
 
 ```tsx
 import { LiteLLMHomeWidget } from '@acarmisc/backstage-plugin-litellm';
@@ -44,6 +59,28 @@ import { LiteLLMHomeWidget } from '@acarmisc/backstage-plugin-litellm';
 | `defaultPeriod` | `'today' \| '7d' \| '30d'` | `'7d'` | Period shown on first render |
 | `title` | `string` | `'LiteLLM Usage'` | Card title override |
 
+A slimmer **Create Key** card variant is available for surfaces that only need a one-click shortcut into the key-mint flow:
+
+![Create Key card](../../docs/screenshots/key-card.png)
+
+### Keys tab
+
+The **Keys** tab lists every virtual key you own with its alias, key ID, creation and expiry dates, budget bar (`$spent / $limit`), TPM/RPM, and model scope. Each row exposes inline actions: edit, block/unblock, reset spend, and delete.
+
+![Keys tab](../../docs/screenshots/keys-tab.png)
+
+### Generate New Key dialog
+
+The dialog walks the user through aliasing the key, picking a duration, binding a team, restricting model access, setting a max budget, and configuring per-key TPM/RPM caps. Failures (e.g. duplicate alias) surface inline with the upstream error code preserved.
+
+![Generate New Key dialog](../../docs/screenshots/generate-key-dialog.png)
+
+### Models tab
+
+The **Models** tab lists every model the LiteLLM proxy exposes, with per-model input/output cost, max input/output token limits, and capabilities. The team selector scopes the list to the models the bound team is allowed to call.
+
+![Models tab](../../docs/screenshots/models-tab.png)
+
 ## Exports
 
 - `litellmPlugin` — the frontend plugin instance

package/dist/components/UsageStats.d.ts

@@ -4,9 +4,11 @@ interface UsageStatsProps {
     usage: UsageMetrics | null;
     models: ModelInfo[];
     dateRange: DateRange;
-    onDateRangeChange: (range: DateRange) => void;
+    currentPreset: DatePreset;
+    onDateRangeChange: (range: DateRange, preset?: DatePreset) => void;
     loading: boolean;
     userInfo?: UserInfo;
 }
+type DatePreset = 'today' | '24h' | '7d' | '30d';
 export declare const UsageStats: React.FC<UsageStatsProps>;
 export {};

package/dist/index.cjs.js

@@ -1937,6 +1937,7 @@ var init_UsageStats = __esm({
       usage,
       models,
       dateRange,
+      currentPreset,
       onDateRangeChange,
       loading,
       userInfo
@@ -1944,15 +1945,6 @@ var init_UsageStats = __esm({
       const chart = useChartTheme();
       const [selectedModel, setSelectedModel] = (0, import_react5.useState)("all");
       const [tab, setTab] = (0, import_react5.useState)("costs");
-      const selectedPreset = (0, import_react5.useMemo)(() => {
-        if (dateRange.start.toDateString() === dateRange.end.toDateString()) return "today";
-        const diffMs = dateRange.end.getTime() - dateRange.start.getTime();
-        const diffHours = diffMs / (1e3 * 60 * 60);
-        if (diffHours <= 26) return "24h";
-        const diffDays = Math.ceil(diffMs / (1e3 * 60 * 60 * 24));
-        if (diffDays <= 7) return "7d";
-        return "30d";
-      }, [dateRange]);
       const handlePresetChange = (preset) => {
         const end = /* @__PURE__ */ new Date();
         const start = /* @__PURE__ */ new Date();
@@ -1964,7 +1956,7 @@ var init_UsageStats = __esm({
           localStorage.setItem(PERIOD_LS_KEY, preset);
         } catch {
         }
-        onDateRangeChange({ start, end });
+        onDateRangeChange({ start, end }, preset);
       };
       const dailyData = (0, import_react5.useMemo)(
         () => (usage?.daily_usage ?? []).map((d) => ({
@@ -2103,7 +2095,7 @@ var init_UsageStats = __esm({
           select: true,
           size: "small",
           label: "Period",
-          value: selectedPreset,
+          value: currentPreset,
           onChange: (e) => handlePresetChange(e.target.value),
           sx: { minWidth: 160 }
         },
@@ -2113,7 +2105,7 @@ var init_UsageStats = __esm({
         SectionCard,
         {
           title: "Usage Analytics",
-          subtitle: `${PRESET_LABELS[selectedPreset]} \xB7 ${dateRange.start.toLocaleDateString()} \u2013 ${dateRange.end.toLocaleDateString()}`,
+          subtitle: `${PRESET_LABELS[currentPreset]} \xB7 ${dateRange.start.toLocaleDateString()} \u2013 ${dateRange.end.toLocaleDateString()}`,
           actions: periodSelect
         },
         /* @__PURE__ */ import_react5.default.createElement(MetricStrip, { metrics }),
@@ -2880,6 +2872,13 @@ var init_LiteLLMPage = __esm({
     LiteLLMPage = () => {
       const api = (0, import_core_plugin_api2.useApi)(liteLlmApiRef);
       const [dateRange, setDateRange] = (0, import_react9.useState)(initDateRange);
+      const [currentPreset, setCurrentPreset] = (0, import_react9.useState)(() => {
+        try {
+          return localStorage.getItem(PERIOD_LS_KEY2) ?? "7d";
+        } catch {
+          return "7d";
+        }
+      });
       const [activeTab, setActiveTab] = (0, import_react9.useState)("overview");
       const [snackbar, setSnackbar] = (0, import_react9.useState)(null);
       const [generateDialogOpen, setGenerateDialogOpen] = (0, import_react9.useState)(false);
@@ -2926,11 +2925,14 @@ var init_LiteLLMPage = __esm({
         const endDate = dateRange.end.toISOString().split("T")[0];
         return api.getUsage(startDate, endDate);
       }, [api, dateRange]);
-      const handleDateRangeChange = (0, import_react9.useCallback)((range) => {
+      const handleDateRangeChange = (0, import_react9.useCallback)((range, preset) => {
         setDateRange(range);
+        if (preset) {
+          setCurrentPreset(preset);
+        }
         setTeamUsageCache({});
         setTeamUsageLoading({});
-      }, [setDateRange]);
+      }, [setDateRange, setCurrentPreset]);
       const loadTeamUsage = (0, import_react9.useCallback)(async (teamId) => {
         if (teamUsageCache[teamId] !== void 0 || teamUsageLoading[teamId]) return;
         setTeamUsageLoading((prev) => ({ ...prev, [teamId]: true }));
@@ -3095,6 +3097,7 @@ var init_LiteLLMPage = __esm({
           usage: usage ?? null,
           models: allModels ?? [],
           dateRange,
+          currentPreset,
           onDateRangeChange: handleDateRangeChange,
           loading: usageLoading,
           userInfo