@acarmisc/backstage-plugin-litellm 0.23.0 → 0.25.0

package/dist/budget.d.ts

@@ -45,6 +45,36 @@ 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';
+    /**
+     * The limit of this level nearest its cap, or undefined when the user has
+     * no cap at this level (render an empty gauge).
+     */
+    limit?: BudgetLimit;
+    /** How many limits apply at this level (1 for a personal budget). */
+    count: number;
+}
+/**
+ * Collapses a `BudgetSummary` to exactly one gauge per enforcement level —
+ * key, user, team — carrying the limit nearest its cap and how many limits
+ * that level holds. Every level is always returned, with `limit` undefined
+ * when the user has no cap there, so the caller can render a stable row.
+ *
+ * Pass a summary built with a large `maxKeys` (e.g. `keys.length`) so the
+ * nearest key is present even when it falls outside the display cap; a key
+ * count hidden by that cap is still reflected in `count`.
+ */
+export declare function buildBudgetGauges(summary: BudgetSummary): BudgetGauge[];
 /**
  * One-line summary of a `BudgetSummary`, for a collapsed/compact header:
  * how many concrete limits the user is subject to, and the one closest to

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/LiteLLMBudgetGauges.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Condensed budget card for a homepage column: one ring gauge per
+ * enforcement level (key → personal → team), each showing the limit nearest
+ * its cap. Where the full `LiteLLMBudgetWidget` lists every limit as a
+ * spend-vs-cap meter, this trades detail for density — a single row of rings
+ * with a label and spend figure under each.
+ *
+ * Gauges are always rendered in the same order, with an empty ring when the
+ * 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;
+    /** Ring diameter in px. Defaults to 72. */
+    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;
+    /**
+     * 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/ui.d.ts

@@ -156,6 +156,26 @@ export declare const Meter: React.FC<{
     tone?: Tone;
     height?: number;
 }>;
+/**
+ * Ring gauge for at-a-glance ratios. Hand-drawn SVG rather than MUI's
+ * `CircularProgress`: the track has to stay a neutral hairline (MUI tints it
+ * from the bar colour, so an empty ring reads as full), and the value may
+ * legitimately exceed 100% — the arc clamps at a full turn while the centre
+ * label keeps the real number.
+ */
+export declare const Gauge: React.FC<{
+    /** Share consumed, 0..100+ (unclamped for the label). */
+    value: number;
+    tone?: Tone;
+    /** Outer diameter in px. */
+    size?: number;
+    /** Ring thickness in px. */
+    thickness?: number;
+    /** Centre content; defaults to the rounded percentage. */
+    label?: React.ReactNode;
+    /** Small caption under the value, inside the ring. */
+    caption?: React.ReactNode;
+}>;
 /**
  * Secondary navigation inside a card. Hand-rolled rather than a second set of
  * `Tabs` so it reads as subordinate to the page tabs instead of competing