@acarmisc/backstage-plugin-litellm 0.14.0 → 0.15.0

package/dist/index.esm.js

@@ -1405,7 +1405,28 @@ print(response.choices[0].message.content)`,
       { "id": "${model}", "name": "${model}" }
     ]
   }
-}`
+}`,
+    claudeCode: `# Option 1 \u2014 Static key (Method 1: Unified Endpoint)
+export ANTHROPIC_AUTH_TOKEN="${key}"
+export ANTHROPIC_BASE_URL="${base}"
+claude --model ${model}
+
+# Option 2 \u2014 Dynamic key via helper script
+# 1. Create ~/bin/get-litellm-key.sh:
+cat > ~/bin/get-litellm-key.sh << 'SCRIPT'
+#!/bin/bash
+curl -s -X POST ${base}/key/generate \\
+  -H "Authorization: Bearer ${key}" \\
+  -H "Content-Type: application/json" \\
+  -d '{}' | jq -r '.key'
+SCRIPT
+chmod +x ~/bin/get-litellm-key.sh
+
+# 2. Add to ~/.claude/settings.json:
+#   { "apiKeyHelper": "~/bin/get-litellm-key.sh" }
+
+# 3. Set refresh interval (optional, default 1h):
+export CLAUDE_CODE_API_KEY_HELPER_TTL_MS=3600000`
   };
 }
 function aliasHelperText(aliasError, aliasDuplicate) {
@@ -1466,13 +1487,15 @@ var init_GenerateKeyDialog = __esm({
     ALL_PROXY_MODELS = "all-proxy-models";
     SNIPPET_FILE_HINTS = {
       opencode: "Add to ~/.config/opencode/opencode.json",
-      pi: "Add to ~/.pi/agent/models.json"
+      pi: "Add to ~/.pi/agent/models.json",
+      "claude-code": "Requires Claude Code CLI installed"
     };
     SnippetTabs = ({ snippets, model, onCopy }) => {
       const [tab, setTab] = useState2("curl");
-      const code = snippets[tab];
+      const snippetKey = tab === "claude-code" ? "claudeCode" : tab;
+      const code = snippets[snippetKey];
       const fileHint = SNIPPET_FILE_HINTS[tab];
-      return /* @__PURE__ */ React4.createElement(Box4, null, /* @__PURE__ */ React4.createElement(Tabs, { value: tab, onChange: (_, v) => setTab(v), sx: { mb: 1 }, variant: "scrollable" }, /* @__PURE__ */ React4.createElement(Tab, { label: "curl", value: "curl" }), /* @__PURE__ */ React4.createElement(Tab, { label: "OpenAI SDK", value: "openai" }), /* @__PURE__ */ React4.createElement(Tab, { label: "opencode", value: "opencode" }), /* @__PURE__ */ React4.createElement(Tab, { label: "pi", value: "pi" })), fileHint && /* @__PURE__ */ React4.createElement(Typography4, { variant: "caption", color: "text.secondary", display: "block", mb: 0.5 }, fileHint), /* @__PURE__ */ React4.createElement(
+      return /* @__PURE__ */ React4.createElement(Box4, null, /* @__PURE__ */ React4.createElement(Tabs, { value: tab, onChange: (_, v) => setTab(v), sx: { mb: 1 }, variant: "scrollable" }, /* @__PURE__ */ React4.createElement(Tab, { label: "curl", value: "curl" }), /* @__PURE__ */ React4.createElement(Tab, { label: "OpenAI SDK", value: "openai" }), /* @__PURE__ */ React4.createElement(Tab, { label: "opencode", value: "opencode" }), /* @__PURE__ */ React4.createElement(Tab, { label: "pi", value: "pi" }), /* @__PURE__ */ React4.createElement(Tab, { label: "Claude Code", value: "claude-code" })), fileHint && /* @__PURE__ */ React4.createElement(Typography4, { variant: "caption", color: "text.secondary", display: "block", mb: 0.5 }, fileHint), /* @__PURE__ */ React4.createElement(
         Box4,
         {
           position: "relative",
@@ -2400,24 +2423,169 @@ var init_TeamUsage = __esm({
   }
 });
 
-// src/components/AuditLog.tsx
-import React7, { useState as useState5, useCallback } from "react";
+// src/components/ModelsTable.tsx
+import React7, { useState as useState5, useMemo as useMemo5, useCallback } from "react";
 import Box7 from "@mui/material/Box";
-import Typography7 from "@mui/material/Typography";
 import Table4 from "@mui/material/Table";
 import TableBody4 from "@mui/material/TableBody";
 import TableCell4 from "@mui/material/TableCell";
 import TableContainer4 from "@mui/material/TableContainer";
 import TableHead4 from "@mui/material/TableHead";
 import TableRow4 from "@mui/material/TableRow";
+import Typography7 from "@mui/material/Typography";
+import MenuItem3 from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import Tooltip3 from "@mui/material/Tooltip";
+import Snackbar from "@mui/material/Snackbar";
+import Alert2 from "@mui/material/Alert";
+import { alpha as alpha5, useTheme as useTheme2 } from "@mui/material/styles";
+function fmtCostPerToken(cost) {
+  if (cost === void 0 || cost === null) return "\u2014";
+  if (cost === 0) return "$0";
+  if (cost < 1e-6) return `$${(cost * 1e6).toFixed(2)}/M`;
+  if (cost < 1e-3) return `$${(cost * 1e3).toFixed(3)}/K`;
+  return `$${cost.toFixed(4)}`;
+}
+function fmtTokens(n) {
+  if (n === void 0 || n === null) return "\u2014";
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(0)}K`;
+  return String(n);
+}
+var ModelsTable;
+var init_ModelsTable = __esm({
+  "src/components/ModelsTable.tsx"() {
+    "use strict";
+    init_ui();
+    ModelsTable = ({ allModels, teams, loading }) => {
+      const theme = useTheme2();
+      const [selectedTeamId, setSelectedTeamId] = useState5("");
+      const [copiedSnackbar, setCopiedSnackbar] = useState5(false);
+      const selectedTeam = useMemo5(
+        () => teams.find((t) => t.team_id === selectedTeamId) ?? null,
+        [teams, selectedTeamId]
+      );
+      const filteredModels = useMemo5(() => {
+        if (!selectedTeam) return [];
+        const teamModels = selectedTeam.models ?? [];
+        if (teamModels.length === 0) return allModels;
+        const allowed = new Set(teamModels);
+        return allModels.filter((m) => allowed.has(m.model_name));
+      }, [allModels, selectedTeam]);
+      const handleCopyModelId = useCallback((modelId) => {
+        navigator.clipboard.writeText(modelId).then(() => setCopiedSnackbar(true));
+      }, []);
+      const modeColor = (mode) => {
+        switch (mode) {
+          case "chat":
+            return theme.palette.info.main;
+          case "embedding":
+            return theme.palette.success.main;
+          case "completion":
+            return theme.palette.primary.main;
+          case "image":
+            return theme.palette.warning.main;
+          default:
+            return theme.palette.info.main;
+        }
+      };
+      return /* @__PURE__ */ React7.createElement(
+        SectionCard,
+        {
+          title: "Available Models",
+          subtitle: selectedTeam ? `${filteredModels.length} model${filteredModels.length !== 1 ? "s" : ""} in ${selectedTeam.team_alias ?? selectedTeam.team_id}` : "Select a team to view its models"
+        },
+        /* @__PURE__ */ React7.createElement(Box7, { sx: { px: 2.5, pb: 2.5, pt: 1 } }, /* @__PURE__ */ React7.createElement(FormControl, { size: "small", sx: { minWidth: 240, mb: 2 } }, /* @__PURE__ */ React7.createElement(InputLabel, { id: "team-select-label" }, "Team"), /* @__PURE__ */ React7.createElement(
+          Select,
+          {
+            labelId: "team-select-label",
+            value: selectedTeamId,
+            label: "Team",
+            onChange: (e) => setSelectedTeamId(e.target.value)
+          },
+          teams.map((t) => /* @__PURE__ */ React7.createElement(MenuItem3, { key: t.team_id, value: t.team_id }, t.team_alias ?? t.team_id))
+        ))),
+        loading && /* @__PURE__ */ React7.createElement(EmptyState, { message: "Loading models\u2026" }),
+        !loading && !selectedTeamId && /* @__PURE__ */ React7.createElement(
+          EmptyState,
+          {
+            message: "Select a team to see available models",
+            hint: "Each team may have a different set of models assigned"
+          }
+        ),
+        !loading && selectedTeamId && filteredModels.length === 0 && /* @__PURE__ */ React7.createElement(
+          EmptyState,
+          {
+            message: "No models available for this team",
+            hint: allModels.length === 0 ? "No models are configured in the system" : "None of the team's assigned models were found in the catalog"
+          }
+        ),
+        !loading && filteredModels.length > 0 && /* @__PURE__ */ React7.createElement(TableContainer4, null, /* @__PURE__ */ React7.createElement(Table4, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React7.createElement(TableHead4, null, /* @__PURE__ */ React7.createElement(TableRow4, null, /* @__PURE__ */ React7.createElement(TableCell4, null, "Model ID"), /* @__PURE__ */ React7.createElement(TableCell4, null, "Mode"), /* @__PURE__ */ React7.createElement(TableCell4, { align: "right" }, "Input Cost"), /* @__PURE__ */ React7.createElement(TableCell4, { align: "right" }, "Output Cost"), /* @__PURE__ */ React7.createElement(TableCell4, { align: "right" }, "Max Input"), /* @__PURE__ */ React7.createElement(TableCell4, { align: "right" }, "Max Output"), /* @__PURE__ */ React7.createElement(TableCell4, null, "Capabilities"))), /* @__PURE__ */ React7.createElement(TableBody4, null, filteredModels.map((m) => /* @__PURE__ */ React7.createElement(TableRow4, { key: m.model_name, hover: true }, /* @__PURE__ */ React7.createElement(TableCell4, null, /* @__PURE__ */ React7.createElement(Box7, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(TagChip, { label: m.model_name, title: m.model_name }), /* @__PURE__ */ React7.createElement(Tooltip3, { title: "Copy model ID" }, /* @__PURE__ */ React7.createElement(
+          Box7,
+          {
+            component: "span",
+            role: "button",
+            tabIndex: 0,
+            onClick: () => handleCopyModelId(m.model_name),
+            onKeyDown: (e) => e.key === "Enter" && handleCopyModelId(m.model_name),
+            sx: quietIconButtonSx("accent"),
+            style: { cursor: "pointer", display: "inline-flex" }
+          },
+          /* @__PURE__ */ React7.createElement(ContentCopyIcon, { sx: { fontSize: 14 } })
+        )))), /* @__PURE__ */ React7.createElement(TableCell4, null, /* @__PURE__ */ React7.createElement(
+          Box7,
+          {
+            component: "span",
+            sx: {
+              display: "inline-block",
+              px: 0.75,
+              py: 0.25,
+              borderRadius: 1,
+              fontSize: 11,
+              fontWeight: 600,
+              textTransform: "capitalize",
+              bgcolor: alpha5(modeColor(m.mode), 0.1),
+              color: modeColor(m.mode)
+            }
+          },
+          m.mode
+        )), /* @__PURE__ */ React7.createElement(TableCell4, { align: "right" }, /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.input_cost_per_token))), /* @__PURE__ */ React7.createElement(TableCell4, { align: "right" }, /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtCostPerToken(m.output_cost_per_token))), /* @__PURE__ */ React7.createElement(TableCell4, { align: "right" }, /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_input_tokens))), /* @__PURE__ */ React7.createElement(TableCell4, { align: "right" }, /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2", sx: { fontVariantNumeric: "tabular-nums" } }, fmtTokens(m.max_output_tokens))), /* @__PURE__ */ React7.createElement(TableCell4, null, /* @__PURE__ */ React7.createElement(Box7, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap" } }, m.supports_function_calling && /* @__PURE__ */ React7.createElement(TagChip, { label: "Fn", title: "Function calling" }), m.supports_vision && /* @__PURE__ */ React7.createElement(TagChip, { label: "\u{1F441}", title: "Vision" })))))))),
+        /* @__PURE__ */ React7.createElement(
+          Snackbar,
+          {
+            open: copiedSnackbar,
+            autoHideDuration: 2e3,
+            onClose: () => setCopiedSnackbar(false),
+            anchorOrigin: { vertical: "bottom", horizontal: "center" }
+          },
+          /* @__PURE__ */ React7.createElement(Alert2, { severity: "success", variant: "filled", sx: { fontSize: 13 } }, "Model ID copied to clipboard")
+        )
+      );
+    };
+  }
+});
+
+// src/components/AuditLog.tsx
+import React8, { useState as useState6, useCallback as useCallback2 } from "react";
+import Box8 from "@mui/material/Box";
+import Typography8 from "@mui/material/Typography";
+import Table5 from "@mui/material/Table";
+import TableBody5 from "@mui/material/TableBody";
+import TableCell5 from "@mui/material/TableCell";
+import TableContainer5 from "@mui/material/TableContainer";
+import TableHead5 from "@mui/material/TableHead";
+import TableRow5 from "@mui/material/TableRow";
 import TablePagination from "@mui/material/TablePagination";
 import TextField4 from "@mui/material/TextField";
-import MenuItem3 from "@mui/material/MenuItem";
+import MenuItem4 from "@mui/material/MenuItem";
 import Skeleton5 from "@mui/material/Skeleton";
 import Collapse2 from "@mui/material/Collapse";
 import IconButton4 from "@mui/material/IconButton";
-import Alert2 from "@mui/material/Alert";
-import { alpha as alpha5 } from "@mui/material/styles";
+import Alert3 from "@mui/material/Alert";
+import { alpha as alpha6 } from "@mui/material/styles";
 import { KeyboardArrowDown } from "@mui/icons-material";
 import { useAsync } from "react-use";
 function actionTone(action) {
@@ -2440,10 +2608,10 @@ function formatDateTime(iso) {
 }
 function renderAuditLogBody(loading, entries) {
   if (loading) {
-    return /* @__PURE__ */ React7.createElement(TableRow4, null, /* @__PURE__ */ React7.createElement(TableCell4, { colSpan: 6, sx: { py: 2 } }, /* @__PURE__ */ React7.createElement(Skeleton5, { variant: "rounded", height: 160 })));
+    return /* @__PURE__ */ React8.createElement(TableRow5, null, /* @__PURE__ */ React8.createElement(TableCell5, { colSpan: 6, sx: { py: 2 } }, /* @__PURE__ */ React8.createElement(Skeleton5, { variant: "rounded", height: 160 })));
   }
   if (entries.length === 0) {
-    return /* @__PURE__ */ React7.createElement(TableRow4, null, /* @__PURE__ */ React7.createElement(TableCell4, { colSpan: 6 }, /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React8.createElement(TableRow5, null, /* @__PURE__ */ React8.createElement(TableCell5, { colSpan: 6 }, /* @__PURE__ */ React8.createElement(
       EmptyState,
       {
         message: "No audit events found",
@@ -2451,7 +2619,7 @@ function renderAuditLogBody(loading, entries) {
       }
     )));
   }
-  return entries.map((entry) => /* @__PURE__ */ React7.createElement(DetailRow, { key: entry.id, entry }));
+  return entries.map((entry) => /* @__PURE__ */ React8.createElement(DetailRow, { key: entry.id, entry }));
 }
 var ACTION_TONES, TABLE_LABELS, DetailRow, AuditLog;
 var init_AuditLog = __esm({
@@ -2471,9 +2639,9 @@ var init_AuditLog = __esm({
       LiteLLM_UserTable: "User"
     };
     DetailRow = ({ entry }) => {
-      const [open, setOpen] = useState5(false);
+      const [open, setOpen] = useState6(false);
       const hasDetail = entry.before_value || entry.updated_values;
-      return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(TableRow4, null, /* @__PURE__ */ React7.createElement(TableCell4, { sx: { width: 40, pr: 0 } }, hasDetail && /* @__PURE__ */ React7.createElement(
+      return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(TableRow5, null, /* @__PURE__ */ React8.createElement(TableCell5, { sx: { width: 40, pr: 0 } }, hasDetail && /* @__PURE__ */ React8.createElement(
         IconButton4,
         {
           size: "small",
@@ -2486,9 +2654,9 @@ var init_AuditLog = __esm({
             transition: theme.transitions.create("transform")
           })
         },
-        /* @__PURE__ */ React7.createElement(KeyboardArrowDown, { fontSize: "small" })
-      )), /* @__PURE__ */ React7.createElement(TableCell4, { sx: { whiteSpace: "nowrap" } }, /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2", color: "text.secondary" }, formatDateTime(entry.updated_at))), /* @__PURE__ */ React7.createElement(TableCell4, null, entry.action && /* @__PURE__ */ React7.createElement(StatusPill, { label: entry.action, tone: actionTone(entry.action) })), /* @__PURE__ */ React7.createElement(TableCell4, null, /* @__PURE__ */ React7.createElement(Typography7, { variant: "body2" }, prettyTableName(entry.table_name))), /* @__PURE__ */ React7.createElement(TableCell4, null, /* @__PURE__ */ React7.createElement(
-        Typography7,
+        /* @__PURE__ */ React8.createElement(KeyboardArrowDown, { fontSize: "small" })
+      )), /* @__PURE__ */ React8.createElement(TableCell5, { sx: { whiteSpace: "nowrap" } }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", color: "text.secondary" }, formatDateTime(entry.updated_at))), /* @__PURE__ */ React8.createElement(TableCell5, null, entry.action && /* @__PURE__ */ React8.createElement(StatusPill, { label: entry.action, tone: actionTone(entry.action) })), /* @__PURE__ */ React8.createElement(TableCell5, null, /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2" }, prettyTableName(entry.table_name))), /* @__PURE__ */ React8.createElement(TableCell5, null, /* @__PURE__ */ React8.createElement(
+        Typography8,
         {
           variant: "body2",
           component: "code",
@@ -2497,8 +2665,8 @@ var init_AuditLog = __esm({
           sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 12 }
         },
         entry.object_id ? entry.object_id.slice(0, 20) + (entry.object_id.length > 20 ? "\u2026" : "") : "\u2014"
-      )), /* @__PURE__ */ React7.createElement(TableCell4, null, entry.changed_by ?? "\u2014")), hasDetail && /* @__PURE__ */ React7.createElement(TableRow4, { sx: { "&&:hover": { bgcolor: "transparent" } } }, /* @__PURE__ */ React7.createElement(TableCell4, { colSpan: 6, sx: { "&&": { py: 0, border: 0 } } }, /* @__PURE__ */ React7.createElement(Collapse2, { in: open, unmountOnExit: true }, /* @__PURE__ */ React7.createElement(
-        Box7,
+      )), /* @__PURE__ */ React8.createElement(TableCell5, null, entry.changed_by ?? "\u2014")), hasDetail && /* @__PURE__ */ React8.createElement(TableRow5, { sx: { "&&:hover": { bgcolor: "transparent" } } }, /* @__PURE__ */ React8.createElement(TableCell5, { colSpan: 6, sx: { "&&": { py: 0, border: 0 } } }, /* @__PURE__ */ React8.createElement(Collapse2, { in: open, unmountOnExit: true }, /* @__PURE__ */ React8.createElement(
+        Box8,
         {
           display: "flex",
           gap: 2,
@@ -2507,11 +2675,11 @@ var init_AuditLog = __esm({
             p: 2,
             mb: 1.5,
             borderRadius: 1.5,
-            bgcolor: alpha5(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.05 : 0.03)
+            bgcolor: alpha6(theme.palette.text.primary, theme.palette.mode === "dark" ? 0.05 : 0.03)
           })
         },
-        entry.before_value && /* @__PURE__ */ React7.createElement(Box7, { flex: 1, minWidth: 200 }, /* @__PURE__ */ React7.createElement(
-          Typography7,
+        entry.before_value && /* @__PURE__ */ React8.createElement(Box8, { flex: 1, minWidth: 200 }, /* @__PURE__ */ React8.createElement(
+          Typography8,
           {
             variant: "caption",
             color: "text.secondary",
@@ -2520,9 +2688,9 @@ var init_AuditLog = __esm({
             sx: { fontSize: 10.5, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase" }
           },
           "Before"
-        ), /* @__PURE__ */ React7.createElement(Typography7, { component: "pre", variant: "caption", sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", whiteSpace: "pre-wrap", wordBreak: "break-all", m: 0 } }, JSON.stringify(entry.before_value, null, 2))),
-        entry.updated_values && /* @__PURE__ */ React7.createElement(Box7, { flex: 1, minWidth: 200 }, /* @__PURE__ */ React7.createElement(
-          Typography7,
+        ), /* @__PURE__ */ React8.createElement(Typography8, { component: "pre", variant: "caption", sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", whiteSpace: "pre-wrap", wordBreak: "break-all", m: 0 } }, JSON.stringify(entry.before_value, null, 2))),
+        entry.updated_values && /* @__PURE__ */ React8.createElement(Box8, { flex: 1, minWidth: 200 }, /* @__PURE__ */ React8.createElement(
+          Typography8,
           {
             variant: "caption",
             color: "text.secondary",
@@ -2531,14 +2699,14 @@ var init_AuditLog = __esm({
             sx: { fontSize: 10.5, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase" }
           },
           "After"
-        ), /* @__PURE__ */ React7.createElement(Typography7, { component: "pre", variant: "caption", sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", whiteSpace: "pre-wrap", wordBreak: "break-all", m: 0 } }, JSON.stringify(entry.updated_values, null, 2)))
+        ), /* @__PURE__ */ React8.createElement(Typography8, { component: "pre", variant: "caption", sx: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", whiteSpace: "pre-wrap", wordBreak: "break-all", m: 0 } }, JSON.stringify(entry.updated_values, null, 2)))
       )))));
     };
     AuditLog = ({ api }) => {
-      const [page, setPage] = useState5(0);
-      const [pageSize, setPageSize] = useState5(25);
-      const [filters, setFilters] = useState5({});
-      const fetchParams = useCallback(
+      const [page, setPage] = useState6(0);
+      const [pageSize, setPageSize] = useState6(25);
+      const [filters, setFilters] = useState6({});
+      const fetchParams = useCallback2(
         () => ({ page: page + 1, page_size: pageSize, ...filters }),
         [page, pageSize, filters]
       )();
@@ -2548,13 +2716,13 @@ var init_AuditLog = __esm({
       );
       const entries = value?.audit_logs ?? [];
       const total = value?.total ?? 0;
-      return /* @__PURE__ */ React7.createElement(
+      return /* @__PURE__ */ React8.createElement(
         SectionCard,
         {
           title: "Audit Log",
           subtitle: loading ? "Loading\u2026" : `${total.toLocaleString()} event${total === 1 ? "" : "s"}`,
           flush: true,
-          actions: /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
+          actions: /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
             TextField4,
             {
               size: "small",
@@ -2567,12 +2735,12 @@ var init_AuditLog = __esm({
               },
               sx: { minWidth: 150 }
             },
-            /* @__PURE__ */ React7.createElement(MenuItem3, { value: "" }, "All actions"),
-            /* @__PURE__ */ React7.createElement(MenuItem3, { value: "created" }, "Created"),
-            /* @__PURE__ */ React7.createElement(MenuItem3, { value: "updated" }, "Updated"),
-            /* @__PURE__ */ React7.createElement(MenuItem3, { value: "deleted" }, "Deleted"),
-            /* @__PURE__ */ React7.createElement(MenuItem3, { value: "blocked" }, "Blocked")
-          ), /* @__PURE__ */ React7.createElement(
+            /* @__PURE__ */ React8.createElement(MenuItem4, { value: "" }, "All actions"),
+            /* @__PURE__ */ React8.createElement(MenuItem4, { value: "created" }, "Created"),
+            /* @__PURE__ */ React8.createElement(MenuItem4, { value: "updated" }, "Updated"),
+            /* @__PURE__ */ React8.createElement(MenuItem4, { value: "deleted" }, "Deleted"),
+            /* @__PURE__ */ React8.createElement(MenuItem4, { value: "blocked" }, "Blocked")
+          ), /* @__PURE__ */ React8.createElement(
             TextField4,
             {
               size: "small",
@@ -2585,11 +2753,11 @@ var init_AuditLog = __esm({
               },
               sx: { minWidth: 150 }
             },
-            /* @__PURE__ */ React7.createElement(MenuItem3, { value: "" }, "All tables"),
-            /* @__PURE__ */ React7.createElement(MenuItem3, { value: "LiteLLM_VerificationToken" }, "Key"),
-            /* @__PURE__ */ React7.createElement(MenuItem3, { value: "LiteLLM_TeamTable" }, "Team"),
-            /* @__PURE__ */ React7.createElement(MenuItem3, { value: "LiteLLM_UserTable" }, "User")
-          ), /* @__PURE__ */ React7.createElement(
+            /* @__PURE__ */ React8.createElement(MenuItem4, { value: "" }, "All tables"),
+            /* @__PURE__ */ React8.createElement(MenuItem4, { value: "LiteLLM_VerificationToken" }, "Key"),
+            /* @__PURE__ */ React8.createElement(MenuItem4, { value: "LiteLLM_TeamTable" }, "Team"),
+            /* @__PURE__ */ React8.createElement(MenuItem4, { value: "LiteLLM_UserTable" }, "User")
+          ), /* @__PURE__ */ React8.createElement(
             TextField4,
             {
               size: "small",
@@ -2603,9 +2771,9 @@ var init_AuditLog = __esm({
             }
           ))
         },
-        error && /* @__PURE__ */ React7.createElement(Box7, { px: 2.5, pb: 2 }, /* @__PURE__ */ React7.createElement(Alert2, { severity: "error" }, error.message)),
-        /* @__PURE__ */ React7.createElement(TableContainer4, null, /* @__PURE__ */ React7.createElement(Table4, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React7.createElement(TableHead4, null, /* @__PURE__ */ React7.createElement(TableRow4, null, /* @__PURE__ */ React7.createElement(TableCell4, { sx: { width: 40 } }), /* @__PURE__ */ React7.createElement(TableCell4, null, "Time"), /* @__PURE__ */ React7.createElement(TableCell4, null, "Action"), /* @__PURE__ */ React7.createElement(TableCell4, null, "Table"), /* @__PURE__ */ React7.createElement(TableCell4, null, "Object ID"), /* @__PURE__ */ React7.createElement(TableCell4, null, "Changed By"))), /* @__PURE__ */ React7.createElement(TableBody4, null, renderAuditLogBody(loading, entries)))),
-        /* @__PURE__ */ React7.createElement(
+        error && /* @__PURE__ */ React8.createElement(Box8, { px: 2.5, pb: 2 }, /* @__PURE__ */ React8.createElement(Alert3, { severity: "error" }, error.message)),
+        /* @__PURE__ */ React8.createElement(TableContainer5, null, /* @__PURE__ */ React8.createElement(Table5, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React8.createElement(TableHead5, null, /* @__PURE__ */ React8.createElement(TableRow5, null, /* @__PURE__ */ React8.createElement(TableCell5, { sx: { width: 40 } }), /* @__PURE__ */ React8.createElement(TableCell5, null, "Time"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Action"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Table"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Object ID"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Changed By"))), /* @__PURE__ */ React8.createElement(TableBody5, null, renderAuditLogBody(loading, entries)))),
+        /* @__PURE__ */ React8.createElement(
           TablePagination,
           {
             component: "div",
@@ -2631,12 +2799,12 @@ var LiteLLMPage_exports = {};
 __export(LiteLLMPage_exports, {
   LiteLLMPage: () => LiteLLMPage
 });
-import React8, { useState as useState6, useCallback as useCallback2, useMemo as useMemo5 } from "react";
-import Box8 from "@mui/material/Box";
-import Snackbar from "@mui/material/Snackbar";
-import Alert3 from "@mui/material/Alert";
+import React9, { useState as useState7, useCallback as useCallback3, useMemo as useMemo6 } from "react";
+import Box9 from "@mui/material/Box";
+import Snackbar2 from "@mui/material/Snackbar";
+import Alert4 from "@mui/material/Alert";
 import CircularProgress4 from "@mui/material/CircularProgress";
-import Typography8 from "@mui/material/Typography";
+import Typography9 from "@mui/material/Typography";
 import Paper5 from "@mui/material/Paper";
 import Tabs2 from "@mui/material/Tabs";
 import Tab2 from "@mui/material/Tab";
@@ -2665,17 +2833,18 @@ var init_LiteLLMPage = __esm({
     init_GenerateKeyDialog();
     init_UsageStats();
     init_TeamUsage();
+    init_ModelsTable();
     init_AuditLog();
     init_api();
     PERIOD_LS_KEY2 = "litellm_usage_period";
     LiteLLMPage = () => {
       const api = useApi(liteLlmApiRef);
-      const [dateRange, setDateRange] = useState6(initDateRange);
-      const [activeTab, setActiveTab] = useState6("overview");
-      const [snackbar, setSnackbar] = useState6(null);
-      const [generateDialogOpen, setGenerateDialogOpen] = useState6(false);
-      const [teamUsageCache, setTeamUsageCache] = useState6({});
-      const [teamUsageLoading, setTeamUsageLoading] = useState6({});
+      const [dateRange, setDateRange] = useState7(initDateRange);
+      const [activeTab, setActiveTab] = useState7("overview");
+      const [snackbar, setSnackbar] = useState7(null);
+      const [generateDialogOpen, setGenerateDialogOpen] = useState7(false);
+      const [teamUsageCache, setTeamUsageCache] = useState7({});
+      const [teamUsageLoading, setTeamUsageLoading] = useState7({});
       const { value: userInfo, loading: userLoading, error: userError } = useAsync2(
         () => api.getUserInfo(),
         [api]
@@ -2700,7 +2869,7 @@ var init_LiteLLMPage = __esm({
         [api]
       );
       const { value: liteLlmConfig } = useAsync2(() => api.getConfig(), [api]);
-      const teams = useMemo5(() => {
+      const teams = useMemo6(() => {
         if (!allTeams?.length) return [];
         if (!userInfo) return allTeams;
         const userId = userInfo.user_id;
@@ -2717,12 +2886,12 @@ var init_LiteLLMPage = __esm({
         const endDate = dateRange.end.toISOString().split("T")[0];
         return api.getUsage(startDate, endDate);
       }, [api, dateRange]);
-      const handleDateRangeChange = useCallback2((range) => {
+      const handleDateRangeChange = useCallback3((range) => {
         setDateRange(range);
         setTeamUsageCache({});
         setTeamUsageLoading({});
       }, [setDateRange]);
-      const loadTeamUsage = useCallback2(async (teamId) => {
+      const loadTeamUsage = useCallback3(async (teamId) => {
         if (teamUsageCache[teamId] !== void 0 || teamUsageLoading[teamId]) return;
         setTeamUsageLoading((prev) => ({ ...prev, [teamId]: true }));
         try {
@@ -2736,7 +2905,7 @@ var init_LiteLLMPage = __esm({
           setTeamUsageLoading((prev) => ({ ...prev, [teamId]: false }));
         }
       }, [api, dateRange, teamUsageCache, teamUsageLoading]);
-      const allowedModels = useMemo5(() => {
+      const allowedModels = useMemo6(() => {
         if (!allModels?.length) return [];
         const userModels = userInfo?.models;
         const teamModels = teams?.flatMap((t) => t.models ?? []);
@@ -2749,7 +2918,7 @@ var init_LiteLLMPage = __esm({
         ]);
         return allModels.filter((m) => allowed.has(m.model_name));
       }, [allModels, userInfo, teams]);
-      const handleGenerateKey = useCallback2(
+      const handleGenerateKey = useCallback3(
         async (request) => {
           try {
             const response = await api.generateKey(request);
@@ -2763,7 +2932,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleUpdateKey = useCallback2(
+      const handleUpdateKey = useCallback3(
         async (keyId, request) => {
           try {
             await api.updateKey(keyId, request);
@@ -2776,7 +2945,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleBlockKey = useCallback2(
+      const handleBlockKey = useCallback3(
         async (keyId) => {
           try {
             await api.blockKey(keyId);
@@ -2788,7 +2957,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleUnblockKey = useCallback2(
+      const handleUnblockKey = useCallback3(
         async (keyId) => {
           try {
             await api.unblockKey(keyId);
@@ -2800,7 +2969,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleResetKeySpend = useCallback2(
+      const handleResetKeySpend = useCallback3(
         async (keyId) => {
           try {
             await api.resetKeySpend(keyId);
@@ -2812,7 +2981,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleDeleteKey = useCallback2(
+      const handleDeleteKey = useCallback3(
         async (keyId) => {
           try {
             await api.deleteKey(keyId);
@@ -2829,7 +2998,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handlePruneExpiredKeys = useCallback2(
+      const handlePruneExpiredKeys = useCallback3(
         async () => {
           try {
             const result = await api.pruneExpiredKeys();
@@ -2844,14 +3013,14 @@ var init_LiteLLMPage = __esm({
       );
       const isInitialLoading = userLoading && !userInfo;
       if (isInitialLoading) {
-        return /* @__PURE__ */ React8.createElement(Box8, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "50vh" }, /* @__PURE__ */ React8.createElement(CircularProgress4, null));
+        return /* @__PURE__ */ React9.createElement(Box9, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "50vh" }, /* @__PURE__ */ React9.createElement(CircularProgress4, null));
       }
       if (userError || !userInfo) {
         const isProvisioningEnabled = userError?.body?.provisioning === true;
         const hint = userError?.body?.hint;
-        return /* @__PURE__ */ React8.createElement(Box8, { p: 3 }, /* @__PURE__ */ React8.createElement(Paper5, { sx: { p: 3 } }, /* @__PURE__ */ React8.createElement(Typography8, { variant: "h6", gutterBottom: true }, "Account not provisioned"), /* @__PURE__ */ React8.createElement(Typography8, { color: "text.secondary", paragraph: true }, "Your Backstage account is not linked to a LiteLLM user."), hint ? /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", color: "text.secondary" }, hint) : /* @__PURE__ */ React8.createElement(Typography8, { variant: "body2", color: "text.secondary" }, isProvisioningEnabled ? "Auto-provisioning is enabled but failed. Check the backend logs." : "Set litellm.provisioning.enabled: true in app-config.yaml to enable auto-provisioning, or ask your administrator to create the account manually.")));
+        return /* @__PURE__ */ React9.createElement(Box9, { p: 3 }, /* @__PURE__ */ React9.createElement(Paper5, { sx: { p: 3 } }, /* @__PURE__ */ React9.createElement(Typography9, { variant: "h6", gutterBottom: true }, "Account not provisioned"), /* @__PURE__ */ React9.createElement(Typography9, { color: "text.secondary", paragraph: true }, "Your Backstage account is not linked to a LiteLLM user."), hint ? /* @__PURE__ */ React9.createElement(Typography9, { variant: "body2", color: "text.secondary" }, hint) : /* @__PURE__ */ React9.createElement(Typography9, { variant: "body2", color: "text.secondary" }, isProvisioningEnabled ? "Auto-provisioning is enabled but failed. Check the backend logs." : "Set litellm.provisioning.enabled: true in app-config.yaml to enable auto-provisioning, or ask your administrator to create the account manually.")));
       }
-      const pageTabs = /* @__PURE__ */ React8.createElement(
+      const pageTabs = /* @__PURE__ */ React9.createElement(
         Tabs2,
         {
           value: activeTab,
@@ -2864,12 +3033,13 @@ var init_LiteLLMPage = __esm({
             '& [class*="MuiTab-root"]': { minHeight: 44, textTransform: "none", fontSize: 14 }
           }
         },
-        /* @__PURE__ */ React8.createElement(Tab2, { label: "Overview", value: "overview" }),
-        /* @__PURE__ */ React8.createElement(Tab2, { label: "Keys", value: "keys" }),
-        /* @__PURE__ */ React8.createElement(Tab2, { label: "Teams", value: "teams" }),
-        userInfo.can_view_audit && /* @__PURE__ */ React8.createElement(Tab2, { label: "Audit Log", value: "audit" })
+        /* @__PURE__ */ React9.createElement(Tab2, { label: "Overview", value: "overview" }),
+        /* @__PURE__ */ React9.createElement(Tab2, { label: "Keys", value: "keys" }),
+        /* @__PURE__ */ React9.createElement(Tab2, { label: "Teams", value: "teams" }),
+        /* @__PURE__ */ React9.createElement(Tab2, { label: "Models", value: "models" }),
+        userInfo.can_view_audit && /* @__PURE__ */ React9.createElement(Tab2, { label: "Audit Log", value: "audit" })
       );
-      return /* @__PURE__ */ React8.createElement(Box8, { sx: { p: 3, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React8.createElement(
+      return /* @__PURE__ */ React9.createElement(Box9, { sx: { p: 3, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React9.createElement(
         DashboardHeader,
         {
           userInfo,
@@ -2879,7 +3049,7 @@ var init_LiteLLMPage = __esm({
           onGenerateKeyClick: () => setGenerateDialogOpen(true),
           tabs: pageTabs
         }
-      ), activeTab === "overview" && /* @__PURE__ */ React8.createElement(
+      ), activeTab === "overview" && /* @__PURE__ */ React9.createElement(
         UsageStats,
         {
           usage: usage ?? null,
@@ -2889,7 +3059,7 @@ var init_LiteLLMPage = __esm({
           loading: usageLoading,
           userInfo
         }
-      ), activeTab === "keys" && /* @__PURE__ */ React8.createElement(
+      ), activeTab === "keys" && /* @__PURE__ */ React9.createElement(
         KeysTable,
         {
           keys: keys ?? [],
@@ -2903,7 +3073,7 @@ var init_LiteLLMPage = __esm({
           onDeleteKey: handleDeleteKey,
           onPruneExpiredKeys: handlePruneExpiredKeys
         }
-      ), activeTab === "teams" && /* @__PURE__ */ React8.createElement(
+      ), activeTab === "teams" && /* @__PURE__ */ React9.createElement(
         TeamUsage,
         {
           teams: teams ?? [],
@@ -2914,7 +3084,14 @@ var init_LiteLLMPage = __esm({
           },
           getTeamUsageLoading: (teamId) => teamUsageLoading[teamId] ?? false
         }
-      ), activeTab === "audit" && userInfo.can_view_audit && /* @__PURE__ */ React8.createElement(AuditLog, { api }), /* @__PURE__ */ React8.createElement(
+      ), activeTab === "models" && /* @__PURE__ */ React9.createElement(
+        ModelsTable,
+        {
+          allModels: allModels ?? [],
+          teams: teams ?? [],
+          loading: modelsLoading
+        }
+      ), activeTab === "audit" && userInfo.can_view_audit && /* @__PURE__ */ React9.createElement(AuditLog, { api }), /* @__PURE__ */ React9.createElement(
         GenerateKeyDialog,
         {
           open: generateDialogOpen,
@@ -2927,15 +3104,15 @@ var init_LiteLLMPage = __esm({
           onGenerateKey: handleGenerateKey,
           onGetConfig: () => api.getConfig()
         }
-      ), /* @__PURE__ */ React8.createElement(
-        Snackbar,
+      ), /* @__PURE__ */ React9.createElement(
+        Snackbar2,
         {
           open: !!snackbar,
           autoHideDuration: 5e3,
           onClose: () => setSnackbar(null),
           anchorOrigin: { vertical: "bottom", horizontal: "right" }
         },
-        snackbar ? /* @__PURE__ */ React8.createElement(Alert3, { severity: snackbar.severity, onClose: () => setSnackbar(null) }, snackbar.message) : void 0
+        snackbar ? /* @__PURE__ */ React9.createElement(Alert4, { severity: snackbar.severity, onClose: () => setSnackbar(null) }, snackbar.message) : void 0
       ));
     };
   }
@@ -2943,7 +3120,7 @@ var init_LiteLLMPage = __esm({
 
 // src/plugin.tsx
 init_api();
-import React9 from "react";
+import React10 from "react";
 import { TrendingUp as TrendingUpIcon } from "@mui/icons-material";
 import {
   createFrontendPlugin,
@@ -2962,10 +3139,10 @@ var liteLlmPage = PageBlueprint.make({
   params: {
     path: "/litellm",
     title: "LiteLLM",
-    icon: /* @__PURE__ */ React9.createElement(TrendingUpIcon, null),
+    icon: /* @__PURE__ */ React10.createElement(TrendingUpIcon, null),
     loader: async () => {
       const { LiteLLMPage: LiteLLMPage2 } = await Promise.resolve().then(() => (init_LiteLLMPage(), LiteLLMPage_exports));
-      return /* @__PURE__ */ React9.createElement(LiteLLMPage2, null);
+      return /* @__PURE__ */ React10.createElement(LiteLLMPage2, null);
     }
   }
 });
@@ -2984,16 +3161,16 @@ init_TeamUsage();
 // src/components/LiteLLMHomeWidget.tsx
 init_api();
 init_format();
-import React10, { useState as useState7, useEffect as useEffect2 } from "react";
+import React11, { useState as useState8, useEffect as useEffect2 } from "react";
 import Paper6 from "@mui/material/Paper";
-import Box9 from "@mui/material/Box";
-import Typography9 from "@mui/material/Typography";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import MenuItem4 from "@mui/material/MenuItem";
+import Box10 from "@mui/material/Box";
+import Typography10 from "@mui/material/Typography";
+import FormControl2 from "@mui/material/FormControl";
+import Select2 from "@mui/material/Select";
+import MenuItem5 from "@mui/material/MenuItem";
 import Grid2 from "@mui/material/Grid";
 import CircularProgress5 from "@mui/material/CircularProgress";
-import Alert4 from "@mui/material/Alert";
+import Alert5 from "@mui/material/Alert";
 import { AreaChart as AreaChart3, Area as Area3, ResponsiveContainer as ResponsiveContainer3 } from "recharts";
 import { useApi as useApi2 } from "@backstage/core-plugin-api";
 function presetToDateRange(preset) {
@@ -3008,18 +3185,18 @@ function presetToDateRange(preset) {
   }
   return { start, end };
 }
-var Kpi = ({ label, value }) => /* @__PURE__ */ React10.createElement(Box9, null, /* @__PURE__ */ React10.createElement(Typography9, { variant: "caption", color: "text.secondary", display: "block" }, label), /* @__PURE__ */ React10.createElement(Typography9, { variant: "subtitle1", fontWeight: 600 }, value));
+var Kpi = ({ label, value }) => /* @__PURE__ */ React11.createElement(Box10, null, /* @__PURE__ */ React11.createElement(Typography10, { variant: "caption", color: "text.secondary", display: "block" }, label), /* @__PURE__ */ React11.createElement(Typography10, { variant: "subtitle1", fontWeight: 600 }, value));
 var LiteLLMHomeWidget = ({
   defaultPeriod = "7d",
   title = "LiteLLM Usage"
 }) => {
   const api = useApi2(liteLlmApiRef);
-  const [period, setPeriod] = useState7(defaultPeriod);
-  const [loading, setLoading] = useState7(true);
-  const [usageError, setUsageError] = useState7(null);
-  const [keysError, setKeysError] = useState7(null);
-  const [usage, setUsage] = useState7(null);
-  const [keys, setKeys] = useState7([]);
+  const [period, setPeriod] = useState8(defaultPeriod);
+  const [loading, setLoading] = useState8(true);
+  const [usageError, setUsageError] = useState8(null);
+  const [keysError, setKeysError] = useState8(null);
+  const [usage, setUsage] = useState8(null);
+  const [keys, setKeys] = useState8([]);
   useEffect2(() => {
     let cancelled = false;
     setLoading(true);
@@ -3057,17 +3234,17 @@ var LiteLLMHomeWidget = ({
     spend: d.spend
   }));
   const hasSparkline = dailyData.length > 0;
-  return /* @__PURE__ */ React10.createElement(Paper6, { sx: { p: 2 } }, /* @__PURE__ */ React10.createElement(Box9, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1.5 }, /* @__PURE__ */ React10.createElement(Typography9, { variant: "h6" }, title), /* @__PURE__ */ React10.createElement(FormControl, { size: "small", sx: { minWidth: 90 } }, /* @__PURE__ */ React10.createElement(
-    Select,
+  return /* @__PURE__ */ React11.createElement(Paper6, { sx: { p: 2 } }, /* @__PURE__ */ React11.createElement(Box10, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1.5 }, /* @__PURE__ */ React11.createElement(Typography10, { variant: "h6" }, title), /* @__PURE__ */ React11.createElement(FormControl2, { size: "small", sx: { minWidth: 90 } }, /* @__PURE__ */ React11.createElement(
+    Select2,
     {
       value: period,
       onChange: (e) => setPeriod(e.target.value),
       displayEmpty: true
     },
-    /* @__PURE__ */ React10.createElement(MenuItem4, { value: "today" }, "Today"),
-    /* @__PURE__ */ React10.createElement(MenuItem4, { value: "7d" }, "7d"),
-    /* @__PURE__ */ React10.createElement(MenuItem4, { value: "30d" }, "30d")
-  ))), loading && /* @__PURE__ */ React10.createElement(Box9, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ React10.createElement(CircularProgress5, { size: 32 })), !loading && totalFailure && /* @__PURE__ */ React10.createElement(Alert4, { severity: "error", sx: { mt: 1 } }, usageError ?? "Failed to load usage data"), !loading && !totalFailure && /* @__PURE__ */ React10.createElement(React10.Fragment, null, partialFailure && /* @__PURE__ */ React10.createElement(Alert4, { severity: "warning", sx: { mt: 1, mb: 1 } }, usageError ? `Usage data unavailable (${usageError}).` : "", keysError ? ` Key list unavailable (${keysError}).` : "", " Showing what loaded."), /* @__PURE__ */ React10.createElement(Grid2, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ React10.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ React10.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ React10.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ React10.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ React10.createElement(Box9, { height: 120 }, /* @__PURE__ */ React10.createElement(ResponsiveContainer3, { width: "100%", height: "100%" }, /* @__PURE__ */ React10.createElement(AreaChart3, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React11.createElement(MenuItem5, { value: "today" }, "Today"),
+    /* @__PURE__ */ React11.createElement(MenuItem5, { value: "7d" }, "7d"),
+    /* @__PURE__ */ React11.createElement(MenuItem5, { value: "30d" }, "30d")
+  ))), loading && /* @__PURE__ */ React11.createElement(Box10, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ React11.createElement(CircularProgress5, { size: 32 })), !loading && totalFailure && /* @__PURE__ */ React11.createElement(Alert5, { severity: "error", sx: { mt: 1 } }, usageError ?? "Failed to load usage data"), !loading && !totalFailure && /* @__PURE__ */ React11.createElement(React11.Fragment, null, partialFailure && /* @__PURE__ */ React11.createElement(Alert5, { severity: "warning", sx: { mt: 1, mb: 1 } }, usageError ? `Usage data unavailable (${usageError}).` : "", keysError ? ` Key list unavailable (${keysError}).` : "", " Showing what loaded."), /* @__PURE__ */ React11.createElement(Grid2, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ React11.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React11.createElement(Kpi, { label: "USD Spent", value: fmtUsd(usage?.total_spend ?? 0) })), /* @__PURE__ */ React11.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React11.createElement(Kpi, { label: "Tokens In", value: fmtInt(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ React11.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React11.createElement(Kpi, { label: "Tokens Out", value: fmtInt(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ React11.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React11.createElement(Kpi, { label: "Keys", value: fmtInt(keys.length) }))), hasSparkline && /* @__PURE__ */ React11.createElement(Box10, { height: 120 }, /* @__PURE__ */ React11.createElement(ResponsiveContainer3, { width: "100%", height: "100%" }, /* @__PURE__ */ React11.createElement(AreaChart3, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ React11.createElement(
     Area3,
     {
       type: "monotone",