@copilotz/admin 0.9.28 → 0.9.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +120 -146
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +120 -147
- package/dist/index.js.map +1 -1
- package/dist/styles.css +2 -32
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -580,16 +580,6 @@ function CardHeader({ className, ...props }) {
|
|
|
580
580
|
}
|
|
581
581
|
);
|
|
582
582
|
}
|
|
583
|
-
function CardTitle({ className, ...props }) {
|
|
584
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
585
|
-
"div",
|
|
586
|
-
{
|
|
587
|
-
"data-slot": "card-title",
|
|
588
|
-
className: cn("leading-none font-semibold", className),
|
|
589
|
-
...props
|
|
590
|
-
}
|
|
591
|
-
);
|
|
592
|
-
}
|
|
593
583
|
function CardContent({ className, ...props }) {
|
|
594
584
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
595
585
|
"div",
|
|
@@ -1885,7 +1875,7 @@ function UsageDashboard({
|
|
|
1885
1875
|
}, [loadUsage, setHeaderRefresh]);
|
|
1886
1876
|
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "grid h-full min-h-0 grid-rows-[auto_minmax(0,4fr)_minmax(0,5fr)] gap-3", children: [
|
|
1887
1877
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-3", children: [
|
|
1888
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-3 xl:flex-row xl:items-
|
|
1878
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between", children: [
|
|
1889
1879
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "min-w-0", children: [
|
|
1890
1880
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "text-xl font-semibold tracking-tight", children: config.labels.llmUsageTitle }),
|
|
1891
1881
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mt-1 flex flex-wrap items-center gap-2", children: [
|
|
@@ -1926,34 +1916,19 @@ function UsageDashboard({
|
|
|
1926
1916
|
}
|
|
1927
1917
|
)
|
|
1928
1918
|
] }),
|
|
1929
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
] }) }) }),
|
|
1943
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardContent, { className: "min-h-0 flex-1 px-2 lg:px-4", children: error ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive", children: error }) : chartState.data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1944
|
-
EmptyDashboard,
|
|
1945
|
-
{
|
|
1946
|
-
description: config.labels.noResults,
|
|
1947
|
-
title: "No usage"
|
|
1948
|
-
}
|
|
1949
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1950
|
-
UsageChart,
|
|
1951
|
-
{
|
|
1952
|
-
chartState,
|
|
1953
|
-
metricKind
|
|
1954
|
-
}
|
|
1955
|
-
) })
|
|
1956
|
-
] }),
|
|
1919
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Card, { className: "min-h-0 gap-0 overflow-hidden py-2", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardContent, { className: "min-h-0 flex-1 px-2 lg:px-4", children: error ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive", children: error }) : chartState.data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1920
|
+
EmptyDashboard,
|
|
1921
|
+
{
|
|
1922
|
+
description: config.labels.noResults,
|
|
1923
|
+
title: "No usage"
|
|
1924
|
+
}
|
|
1925
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1926
|
+
UsageChart,
|
|
1927
|
+
{
|
|
1928
|
+
chartState,
|
|
1929
|
+
metricKind
|
|
1930
|
+
}
|
|
1931
|
+
) }) }),
|
|
1957
1932
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1958
1933
|
UsageTable,
|
|
1959
1934
|
{
|
|
@@ -2042,7 +2017,7 @@ function UsageChart({
|
|
|
2042
2017
|
}
|
|
2043
2018
|
),
|
|
2044
2019
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2045
|
-
|
|
2020
|
+
Tooltip,
|
|
2046
2021
|
{
|
|
2047
2022
|
content: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2048
2023
|
ChartTooltipContent,
|
|
@@ -2087,72 +2062,62 @@ function UsageTable({
|
|
|
2087
2062
|
}) {
|
|
2088
2063
|
const totalValue = getUsageTotalValue(totals, metricKind, dimension);
|
|
2089
2064
|
const filterable = groupBy !== "namespace";
|
|
2090
|
-
return /* @__PURE__ */ (0, import_jsx_runtime13.
|
|
2091
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2092
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2093
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2065
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Card, { className: "min-h-0 gap-0 overflow-hidden py-0", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardContent, { className: "min-h-0 flex-1 overflow-hidden px-0", children: rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "px-5 py-4 text-sm text-muted-foreground", children: labels.noResults }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "h-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { className: "w-full min-w-[940px] text-sm", children: [
|
|
2066
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { className: "sticky top-0 z-10 bg-card", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("tr", { className: "border-b text-left text-xs uppercase tracking-[0.12em] text-muted-foreground", children: [
|
|
2067
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-5 py-2.5 font-medium", children: getGroupByLabel(groupBy) }),
|
|
2068
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-3 py-2.5 text-right font-medium", children: getUsageSummaryLabel(labels, metricKind, dimension) }),
|
|
2069
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-3 py-2.5 text-right font-medium", children: "Share" }),
|
|
2070
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-3 py-2.5 text-right font-medium", children: "Calls" }),
|
|
2071
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-3 py-2.5 text-right font-medium", children: "Input" }),
|
|
2072
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-3 py-2.5 text-right font-medium", children: "Output" }),
|
|
2073
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-3 py-2.5 text-right font-medium", children: "Reasoning" }),
|
|
2074
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-3 py-2.5 text-right font-medium", children: "Cache read" }),
|
|
2075
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "px-5 py-2.5 text-right font-medium", children: "Avg/call" })
|
|
2098
2076
|
] }) }),
|
|
2099
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
className:
|
|
2117
|
-
|
|
2118
|
-
|
|
2119
|
-
|
|
2120
|
-
|
|
2121
|
-
children:
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
metricKind
|
|
2144
|
-
) }),
|
|
2145
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "px-5 py-3 text-right", children: formatMetricValue(
|
|
2146
|
-
row.totalCalls > 0 ? row.value / row.totalCalls : 0,
|
|
2147
|
-
metricKind
|
|
2148
|
-
) })
|
|
2149
|
-
]
|
|
2150
|
-
},
|
|
2151
|
-
row.groupKey
|
|
2152
|
-
);
|
|
2153
|
-
}) })
|
|
2154
|
-
] }) }) })
|
|
2155
|
-
] });
|
|
2077
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: rows.slice(0, 60).map((row) => {
|
|
2078
|
+
const share = totalValue > 0 ? row.value / totalValue : 0;
|
|
2079
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
2080
|
+
"tr",
|
|
2081
|
+
{
|
|
2082
|
+
className: cn(
|
|
2083
|
+
"border-b last:border-0",
|
|
2084
|
+
filterable && "cursor-pointer transition-colors hover:bg-muted/50"
|
|
2085
|
+
),
|
|
2086
|
+
onClick: () => filterable && onRowFilter(row),
|
|
2087
|
+
children: [
|
|
2088
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("td", { className: "px-5 py-3", children: [
|
|
2089
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "max-w-80 truncate font-medium", children: row.groupLabel }),
|
|
2090
|
+
row.groupKey !== row.groupLabel && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mt-0.5 max-w-80 truncate text-xs text-muted-foreground", children: row.groupKey })
|
|
2091
|
+
] }),
|
|
2092
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "px-3 py-3 text-right font-medium", children: formatMetricValue(row.value, metricKind) }),
|
|
2093
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "px-3 py-3 text-right", children: formatPercent(share) }),
|
|
2094
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "px-3 py-3 text-right", children: formatNumber(row.totalCalls) }),
|
|
2095
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "px-3 py-3 text-right", children: formatMetricValue(
|
|
2096
|
+
getUsageTotalValue(row, metricKind, "input"),
|
|
2097
|
+
metricKind
|
|
2098
|
+
) }),
|
|
2099
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "px-3 py-3 text-right", children: formatMetricValue(
|
|
2100
|
+
getUsageTotalValue(row, metricKind, "output"),
|
|
2101
|
+
metricKind
|
|
2102
|
+
) }),
|
|
2103
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "px-3 py-3 text-right", children: formatMetricValue(
|
|
2104
|
+
getUsageTotalValue(row, metricKind, "reasoning"),
|
|
2105
|
+
metricKind
|
|
2106
|
+
) }),
|
|
2107
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "px-3 py-3 text-right", children: formatMetricValue(
|
|
2108
|
+
getUsageTotalValue(row, metricKind, "cacheRead"),
|
|
2109
|
+
metricKind
|
|
2110
|
+
) }),
|
|
2111
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "px-5 py-3 text-right", children: formatMetricValue(
|
|
2112
|
+
row.totalCalls > 0 ? row.value / row.totalCalls : 0,
|
|
2113
|
+
metricKind
|
|
2114
|
+
) })
|
|
2115
|
+
]
|
|
2116
|
+
},
|
|
2117
|
+
row.groupKey
|
|
2118
|
+
);
|
|
2119
|
+
}) })
|
|
2120
|
+
] }) }) }) });
|
|
2156
2121
|
}
|
|
2157
2122
|
function DashboardHeaderControls({
|
|
2158
2123
|
attribution,
|
|
@@ -2374,57 +2339,66 @@ function InlineFilters({
|
|
|
2374
2339
|
] });
|
|
2375
2340
|
}
|
|
2376
2341
|
function HeaderSelect(props) {
|
|
2377
|
-
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
2378
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2379
|
-
SelectTrigger,
|
|
2380
|
-
{
|
|
2381
|
-
"aria-label": props.label,
|
|
2382
|
-
className: cn("h-8 bg-background text-xs", props.width),
|
|
2383
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectValue, {})
|
|
2384
|
-
}
|
|
2385
|
-
),
|
|
2386
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectContent, { children: props.options.map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItem, { value, children: label }, value)) })
|
|
2387
|
-
] });
|
|
2388
|
-
}
|
|
2389
|
-
function UsageSelect(props) {
|
|
2390
|
-
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: cn("space-y-1", props.compact && "w-[116px]"), children: [
|
|
2391
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sr-only", children: props.label }),
|
|
2342
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Tooltip, { children: [
|
|
2392
2343
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Select, { value: props.value, onValueChange: props.onValueChange, children: [
|
|
2393
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2344
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2394
2345
|
SelectTrigger,
|
|
2395
2346
|
{
|
|
2396
2347
|
"aria-label": props.label,
|
|
2397
|
-
className: cn(
|
|
2398
|
-
"w-full min-w-0 bg-background",
|
|
2399
|
-
props.compact ? "h-8 text-xs" : "h-9"
|
|
2400
|
-
),
|
|
2348
|
+
className: cn("h-8 bg-background text-xs", props.width),
|
|
2401
2349
|
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectValue, {})
|
|
2402
2350
|
}
|
|
2403
|
-
),
|
|
2351
|
+
) }),
|
|
2404
2352
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectContent, { children: props.options.map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItem, { value, children: label }, value)) })
|
|
2405
|
-
] })
|
|
2353
|
+
] }),
|
|
2354
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipContent, { children: props.label })
|
|
2355
|
+
] });
|
|
2356
|
+
}
|
|
2357
|
+
function UsageSelect(props) {
|
|
2358
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Tooltip, { children: [
|
|
2359
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: cn("space-y-1", props.compact && "w-[116px]"), children: [
|
|
2360
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sr-only", children: props.label }),
|
|
2361
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Select, { value: props.value, onValueChange: props.onValueChange, children: [
|
|
2362
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2363
|
+
SelectTrigger,
|
|
2364
|
+
{
|
|
2365
|
+
"aria-label": props.label,
|
|
2366
|
+
className: cn(
|
|
2367
|
+
"w-full min-w-0 bg-background",
|
|
2368
|
+
props.compact ? "h-8 text-xs" : "h-9"
|
|
2369
|
+
),
|
|
2370
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectValue, {})
|
|
2371
|
+
}
|
|
2372
|
+
) }),
|
|
2373
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectContent, { children: props.options.map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItem, { value, children: label }, value)) })
|
|
2374
|
+
] })
|
|
2375
|
+
] }),
|
|
2376
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipContent, { children: props.label })
|
|
2406
2377
|
] });
|
|
2407
2378
|
}
|
|
2408
2379
|
function FilterInput(props) {
|
|
2409
|
-
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
2410
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
|
|
2414
|
-
|
|
2415
|
-
|
|
2416
|
-
|
|
2417
|
-
|
|
2418
|
-
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
2422
|
-
|
|
2423
|
-
|
|
2424
|
-
|
|
2425
|
-
|
|
2426
|
-
|
|
2427
|
-
|
|
2380
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Tooltip, { children: [
|
|
2381
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: cn("space-y-1", props.compact && "w-[150px]"), children: [
|
|
2382
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sr-only", children: props.label }),
|
|
2383
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative", children: [
|
|
2384
|
+
props.icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: props.icon }),
|
|
2385
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2386
|
+
Input,
|
|
2387
|
+
{
|
|
2388
|
+
"aria-label": props.label,
|
|
2389
|
+
className: cn(
|
|
2390
|
+
"bg-background",
|
|
2391
|
+
props.compact ? "h-8 text-xs" : "h-9",
|
|
2392
|
+
props.icon && "pl-8"
|
|
2393
|
+
),
|
|
2394
|
+
onChange: (event) => props.onChange(event.target.value),
|
|
2395
|
+
type: props.type ?? "text",
|
|
2396
|
+
value: props.value
|
|
2397
|
+
}
|
|
2398
|
+
)
|
|
2399
|
+
] }) })
|
|
2400
|
+
] }),
|
|
2401
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipContent, { children: props.label })
|
|
2428
2402
|
] });
|
|
2429
2403
|
}
|
|
2430
2404
|
function EmptyDashboard({
|