@acarmisc/backstage-plugin-litellm 0.24.0 → 0.26.0

package/README.md

@@ -86,11 +86,12 @@ The **Models** tab lists every model the LiteLLM proxy exposes, with per-model i
 - `litellmPlugin` — the frontend plugin instance
 - `LiteLLMPage` — main plugin page (keys, usage, team context)
 - `LiteLLMHomeWidget` — homepage usage summary card
-- `GenerateKeyDialog` — shared "Generate New Key" dialog (surfaces failures inline, warns on duplicate aliases)
+- `KeyFormDialog` — shared key form for both generating and editing a key (surfaces failures inline, warns on duplicate aliases, team-scoped model picker, unlimited-budget toggle when gated on)
+- `GenerateKeyDialog` — deprecated wrapper around `KeyFormDialog` with `mode="create"`
 - `DashboardHeader`, `KeysTable`, `UsageStats`, `TeamUsage` — individual page sections, exported for composition
 - `LiteLlmApi`, `liteLlmApiRef` — API client and its Backstage API ref
 
-Note: `DashboardHeader` and `KeysTable` are composition pieces driven by `LiteLLMPage` and their props differ from older versions. `LiteLLMPage` is the supported entry point; composing the sections directly means keeping them in sync with the page's data wiring (keys, models, teams, and the `onGenerateKeyClick` callback).
+Note: `DashboardHeader` and `KeysTable` are composition pieces driven by `LiteLLMPage` and their props differ from older versions. `LiteLLMPage` is the supported entry point; composing the sections directly means keeping them in sync with the page's data wiring (keys, models, teams, and the `onGenerateKeyClick`/`onEditKey` callbacks).
 
 ## License
 

package/dist/SearchInput.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/budget.d.ts

@@ -45,6 +45,14 @@ export interface BudgetSummary {
  * team falls back to the owner's personal budget.
  */
 export declare function buildBudgetSummary(user: UserInfo | null, teams: TeamInfo[], keys: VirtualKey[], maxKeys?: number): BudgetSummary;
+/**
+ * Every concrete limit across all levels, keys first then personal then
+ * teams. The per-level slices are already sorted by proximity to the cap, so
+ * each level's limits stay ordered; this is the flat list for a "show all
+ * limits" view. Keys beyond a display `maxKeys` are not included — build the
+ * summary with a large `maxKeys` when the full list is needed.
+ */
+export declare function allBudgetLimits(summary: BudgetSummary): BudgetLimit[];
 /** One gauge in the condensed homepage card — a single enforcement level. */
 export interface BudgetGauge {
     kind: 'key' | 'user' | 'team';

package/dist/components/BudgetLimitList.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Shared budget-limit presentation used by both budget cards: the
+ * `LiteLLMBudgetWidget` (full/compact meter list) and the condensed
+ * `LiteLLMBudgetGauges` (expanded "all limits" view). Keeping the card in one
+ * place means a limit reads identically wherever it is shown.
+ */
+import React from 'react';
+import type { Theme } from '@mui/material/styles';
+import { BudgetLimit } from '../budget';
+import { Tone } from './ui';
+/** Semantic colour for a tone, from the host theme. */
+export declare function levelToneColor(tone: Tone | undefined, theme: Theme): string;
+/** Spend-vs-cap meter card for a single limit. */
+export declare const LimitCard: React.FC<{
+    limit: BudgetLimit;
+}>;
+/** A LimitCard prefixed with a small KEY / USER / TEAM tag. */
+export declare const TaggedLimit: React.FC<{
+    limit: BudgetLimit;
+}>;
+/** A key-budget note under a limit list — plain text when no href is given. */
+export declare const MoreKeysNote: React.FC<{
+    count: number;
+    href?: string;
+    label?: string;
+}>;
+/**
+ * Flat list of concrete limits across every level, as tagged meter cards.
+ * Used by the condensed gauges card's expanded view; the full widget renders
+ * its own grouped-by-level rail instead.
+ */
+export declare const BudgetLimitList: React.FC<{
+    limits: BudgetLimit[];
+    /** Keys beyond the supplied limits — rendered as a trailing note. */
+    hiddenKeyCount?: number;
+    keysHref?: string;
+}>;
+/** Inset panel used to hold a nested list of limits inside a card. */
+export declare const LimitListPanel: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/components/GenerateKeyDialog.d.ts

@@ -1,20 +1,21 @@
 import React from 'react';
-import { VirtualKey, ModelInfo, TeamInfo, GenerateKeyRequest, GenerateKeyResponse, LiteLlmConfig } from '../types';
-interface GenerateKeyDialogProps {
+import { GenerateKeyRequest, GenerateKeyResponse, LiteLlmConfig, ModelInfo, TeamInfo, VirtualKey } from '../types';
+/**
+ * @deprecated Use {@link KeyFormDialog} with `mode="create"` instead — this
+ * wrapper only forwards props for backwards compatibility with the public
+ * entrypoint and will be removed in a future release.
+ */
+export declare const GenerateKeyDialog: React.FC<{
     open: boolean;
     onClose: () => void;
     keys: VirtualKey[];
     models: ModelInfo[];
     teams: TeamInfo[];
-    /** Current user's LiteLLM user id, used to pre-fill a default key alias. */
     username?: string;
-    /** Controls for the "Generate New Key" form; see litellm.keyGeneration in app-config.yaml. */
     keyGenerationSettings?: {
         allowUnlimitedBudget: boolean;
         teamRequired: boolean;
     };
     onGenerateKey: (request: GenerateKeyRequest) => Promise<GenerateKeyResponse>;
     onGetConfig: () => Promise<LiteLlmConfig>;
-}
-export declare const GenerateKeyDialog: React.FC<GenerateKeyDialogProps>;
-export {};
+}>;

package/dist/components/KeyFormDialog.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { VirtualKey, ModelInfo, TeamInfo, GenerateKeyRequest, GenerateKeyResponse, UpdateKeyRequest, LiteLlmConfig } from '../types';
+/**
+ * Single form dialog for both key creation (`mode="create"`) and key editing
+ * (`mode="edit"`).
+ *
+ * Create mode: alias (pre-filled), team, models, duration, budget (+unlimited
+ * when gated on), TPM/RPM in the Advanced accordion, and the post-generation
+ * screen with copyable key + starter snippets.
+ *
+ * Edit mode: the same shared fields but no duration (expiry is immutable after
+ * creation) and no team switch (LiteLLM /key/update semantics); adds a masked
+ * key header and the Danger Zone (reset spend). Budget validation, the
+ * unlimited toggle and the team-scoped model filtering behave exactly as they
+ * do at creation time.
+ */
+export type KeyFormDialogMode = 'create' | 'edit';
+export interface KeyFormDialogProps {
+    open: boolean;
+    onClose: () => void;
+    /** `create` generates a new key; `edit` updates an existing one. */
+    mode: KeyFormDialogMode;
+    /** Key being edited (edit mode only). */
+    keyToEdit?: VirtualKey | null;
+    keys: VirtualKey[];
+    models: ModelInfo[];
+    teams: TeamInfo[];
+    /** Current user's LiteLLM user id, used to pre-fill a default key alias. */
+    username?: string;
+    /** Controls for the key form; see litellm.keyGeneration in app-config.yaml. */
+    keyGenerationSettings?: {
+        allowUnlimitedBudget: boolean;
+        teamRequired: boolean;
+    };
+    onCreateKey: (request: GenerateKeyRequest) => Promise<GenerateKeyResponse>;
+    onUpdateKey: (keyId: string, request: UpdateKeyRequest) => Promise<void>;
+    onResetKeySpend?: (keyId: string) => Promise<void>;
+    onGetConfig: () => Promise<LiteLlmConfig>;
+}
+export declare const KeyFormDialog: React.FC<KeyFormDialogProps>;
+export declare function fmtCost(perToken?: number): string | null;
+export declare function formatContextWindow(maxInput?: number, maxOutput?: number): string | null;

package/dist/components/KeysTable.d.ts

@@ -1,15 +1,14 @@
 import React from 'react';
-import { VirtualKey, ModelInfo, UpdateKeyRequest } from '../types';
+import { VirtualKey } from '../types';
 interface KeysTableProps {
     keys: VirtualKey[];
-    models: ModelInfo[];
-    /** Opens the shared "Generate New Key" dialog (rendered at page level). */
+    /** Opens the shared key form dialog in create mode (rendered at page level). */
     onGenerateKeyClick: () => void;
+    /** Opens the shared key form dialog in edit mode for the given key. */
+    onEditKey: (key: VirtualKey) => void;
     loading: boolean;
-    onUpdateKey: (keyId: string, request: UpdateKeyRequest) => Promise<void>;
     onBlockKey: (keyId: string) => Promise<void>;
     onUnblockKey: (keyId: string) => Promise<void>;
-    onResetKeySpend: (keyId: string) => Promise<void>;
     onDeleteKey: (keyId: string) => Promise<void>;
     onPruneExpiredKeys: () => Promise<{
         pruned: number;

package/dist/components/LiteLLMBudgetGauges.d.ts

@@ -9,8 +9,22 @@
  * user has no cap at that level, so the card keeps a stable shape as data
  * loads and across users. When a level holds several limits, the ring shows
  * the one closest to its cap and a "+N more" link counts the rest.
+ *
+ * The bottom action bar is composable: pass any subset of `ctas` — mint a new
+ * key, open the LiteLLM module, or expand the full per-limit list in place —
+ * in the order you want. `action` remains an escape hatch for a fully custom
+ * node; when either is present it renders below a divider.
  */
 import React from 'react';
+/** Preset action-bar buttons. `label` overrides the default copy. */
+export type BudgetCtaKind = 'new-key' | 'module' | 'all-limits';
+export interface BudgetCtaSpec {
+    kind: BudgetCtaKind;
+    /** Override the default label. */
+    label?: string;
+}
+/** Either a bare kind (`'module'`) or a spec object (`{ kind: 'module' }`). */
+export type BudgetCta = BudgetCtaKind | BudgetCtaSpec;
 export interface LiteLLMBudgetGaugesProps {
     /** Optional title override. Defaults to 'Budget'. */
     title?: string;
@@ -18,10 +32,28 @@ export interface LiteLLMBudgetGaugesProps {
     size?: number;
     /** Where the "+N more" key link points. Defaults to the Keys tab. */
     keysHref?: string;
+    /** Where the module CTA points. Defaults to the LiteLLM page. */
+    moduleHref?: string;
+    /**
+     * Called when the "new key" CTA is used. When omitted, the CTA deep-links
+     * to the module with `?generate=1`, which opens the generate-key dialog.
+     */
+    onCreateKey?: () => void;
     /**
-     * Node rendered at the card bottom, below a divider — e.g. a "create key"
-     * button.
+     * Action-bar buttons to render, in order. Defaults to
+     * `['new-key', 'module', 'all-limits']`. Pass `[]` to hide the bar; the
+     * `all-limits` entry is dropped automatically when the user has no limits.
      */
+    ctas?: BudgetCta[];
+    /** Max key limits listed in the expanded view. Defaults to 8. */
+    maxExpandedKeys?: number;
+    /** Controlled expanded state for the all-limits view. */
+    expanded?: boolean;
+    /** Initial expanded state when uncontrolled. Defaults to false. */
+    defaultExpanded?: boolean;
+    /** Notified whenever the expanded state changes. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Fully custom node pinned below the CTAs, below a divider. */
     action?: React.ReactNode;
 }
 export declare const LiteLLMBudgetGauges: React.FC<LiteLLMBudgetGaugesProps>;

package/dist/components/SearchInput.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface SearchInputProps {
+    label?: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    value: string;
+    onInputChange?: (value: string) => void;
+}
+declare const SearchInput: React.FC<SearchInputProps>;
+export default SearchInput;