@carlonicora/nextjs-jsonapi 2.1.2 → 2.2.0

package/dist/features/tokenusage/index.js

@@ -26,7 +26,7 @@
 
 
 
-var _chunkTEJDX7X7js = require('../../chunk-TEJDX7X7.js');
+var _chunkHPKCZMQXjs = require('../../chunk-HPKCZMQX.js');
 require('../../chunk-JG7MCYCW.js');
 
 
@@ -64,7 +64,7 @@ function TokenUsageAdminFilterBar({ granularity, companyId, metric, companies, o
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-wrap items-center gap-2", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkTEJDX7X7js.DateRangeSelector,
+      _chunkHPKCZMQXjs.DateRangeSelector,
       {
         onDateChange: (range) => {
           if (!_optionalChain([range, 'optionalAccess', _ => _.from]) || !_optionalChain([range, 'optionalAccess', _2 => _2.to])) return;
@@ -99,16 +99,16 @@ function TokenUsageAdminFilterBar({ granularity, companyId, metric, companies, o
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkTEJDX7X7js.Select,
+      _chunkHPKCZMQXjs.Select,
       {
         items: companyItems,
         value: _nullishCoalesce(companyId, () => ( ALL_COMPANIES)),
         onValueChange: (value) => onChange({ companyId: !value || value === ALL_COMPANIES ? void 0 : value }),
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.SelectTrigger, { className: "w-56", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.SelectValue, { placeholder: t("token_usage.admin.all_companies") }) }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkTEJDX7X7js.SelectContent, { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.SelectItem, { value: ALL_COMPANIES, children: t("token_usage.admin.all_companies") }),
-            companies.map((company) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.SelectItem, { value: company.id, children: company.label }, company.id))
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.SelectTrigger, { className: "w-56", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.SelectValue, { placeholder: t("token_usage.admin.all_companies") }) }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHPKCZMQXjs.SelectContent, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.SelectItem, { value: ALL_COMPANIES, children: t("token_usage.admin.all_companies") }),
+            companies.map((company) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.SelectItem, { value: company.id, children: company.label }, company.id))
           ] })
         ]
       }
@@ -131,7 +131,7 @@ function Segmented({
       children: options.map((option) => {
         const selected = option.value === value;
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkTEJDX7X7js.Button,
+          _chunkHPKCZMQXjs.Button,
           {
             type: "button",
             size: "sm",
@@ -212,7 +212,7 @@ var TokenUsageAdminProvider = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void
   topN = DEFAULT_TOP_N
 }) => {
   const t = _nextintl.useTranslations.call(void 0, );
-  const generateUrl = _chunkTEJDX7X7js.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkHPKCZMQXjs.usePageUrlGenerator.call(void 0, );
   const [filters, setFilterState] = _react.useState.call(void 0, () => {
     const range = defaultRange();
     return {
@@ -330,7 +330,7 @@ var TokenUsageAdminProvider = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void
       error
     ]
   );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.SharedProvider, { value: { breadcrumbs: breadcrumb(), title: title() }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageAdminContext.Provider, { value: contextValue, children }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.SharedProvider, { value: { breadcrumbs: breadcrumb(), title: title() }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageAdminContext.Provider, { value: contextValue, children }) });
 }, "TokenUsageAdminProvider");
 var useTokenUsageAdmin = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, () => {
   const ctx = _react.useContext.call(void 0, TokenUsageAdminContext);
@@ -458,7 +458,7 @@ function LeadTile({
   delta,
   previousLabel
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.Card, { "data-testid": testId, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkTEJDX7X7js.CardContent, { className: "grid gap-1", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.Card, { "data-testid": testId, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHPKCZMQXjs.CardContent, { className: "grid gap-1", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: label }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-primary text-xl font-semibold tabular-nums", children: value }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-center gap-1", children: [
@@ -474,7 +474,7 @@ function SupportingTile({
   value,
   delta
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.Card, { "data-testid": testId, size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkTEJDX7X7js.CardContent, { className: "grid gap-1", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.Card, { "data-testid": testId, size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHPKCZMQXjs.CardContent, { className: "grid gap-1", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: label }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm font-medium tabular-nums", children: value }),
@@ -566,8 +566,8 @@ function TokenUsageBreakdownTable({ rows, metric }) {
     // The package's <Table> wraps itself in an `overflow-x-clip` container, which
     // would swallow the overflow before this scroller ever saw it — hence the
     // child override. Wide metric tables must scroll, never widen the page.
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "overflow-x-auto [&_[data-slot=table-container]]:overflow-x-visible", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkTEJDX7X7js.Table, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.TableHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.TableRow, { children: columns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.TableHead, { className: _chunk6YIZX26Tjs.cn.call(void 0, column.numeric && "text-right"), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "overflow-x-auto [&_[data-slot=table-container]]:overflow-x-visible", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHPKCZMQXjs.Table, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.TableHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.TableRow, { children: columns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.TableHead, { className: _chunk6YIZX26Tjs.cn.call(void 0, column.numeric && "text-right"), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         "button",
         {
           type: "button",
@@ -582,20 +582,20 @@ function TokenUsageBreakdownTable({ rows, metric }) {
           ]
         }
       ) }, column.key)) }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.TableBody, { children: sortedRows.map((row) => {
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.TableBody, { children: sortedRows.map((row) => {
         const value = metricValue(row, metric);
         const share = total > 0 ? value / total * 100 : 0;
-        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkTEJDX7X7js.TableRow, { "data-testid": `breakdown-row-${row.id}`, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.TableCell, { className: "text-xs", children: row.id === "other" ? t("token_usage.admin.other") : row.label }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.TableCell, { className: "text-muted-foreground text-xs", children: _nullishCoalesce(row.sublabel, () => ( "")) }),
-          showActiveUsers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.TableCell, { className: "text-right text-xs tabular-nums", children: row.activeUsers === void 0 ? "" : formatDecimal(row.activeUsers, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.calls, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.tokensIn, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.tokensOut, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.TableCell, { className: "text-right text-xs tabular-nums", children: formatPercent(cacheHitPercentage(row.cached, row.tokensIn)) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.TableCell, { className: "text-right text-xs tabular-nums", children: formatMetricValue(row.cost, "cost") }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.TableCell, { className: "text-right text-xs tabular-nums", children: formatMetricValue(row.credits, "credits") }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.TableCell, { className: "text-right text-xs tabular-nums", children: formatPercent(share) })
+        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHPKCZMQXjs.TableRow, { "data-testid": `breakdown-row-${row.id}`, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.TableCell, { className: "text-xs", children: row.id === "other" ? t("token_usage.admin.other") : row.label }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.TableCell, { className: "text-muted-foreground text-xs", children: _nullishCoalesce(row.sublabel, () => ( "")) }),
+          showActiveUsers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.TableCell, { className: "text-right text-xs tabular-nums", children: row.activeUsers === void 0 ? "" : formatDecimal(row.activeUsers, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.calls, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.tokensIn, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.tokensOut, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatPercent(cacheHitPercentage(row.cached, row.tokensIn)) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatMetricValue(row.cost, "cost") }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatMetricValue(row.credits, "credits") }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatPercent(share) })
         ] }, row.id);
       }) })
     ] }) })
@@ -789,7 +789,7 @@ function TokenUsageTimelineChart({ rows, metric, stackBy, className }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", "data-testid": "timeline-data", children: JSON.stringify(chartData) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", "data-testid": "timeline-series", children: JSON.stringify(seriesKeys) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.ChartContainer, { config: chartConfig, className: "aspect-auto h-72 w-full", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _recharts.BarChart, { accessibilityLayer: true, data: chartData, margin: { top: 8, right: 8, bottom: 0, left: 0 }, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.ChartContainer, { config: chartConfig, className: "aspect-auto h-72 w-full", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _recharts.BarChart, { accessibilityLayer: true, data: chartData, margin: { top: 8, right: 8, bottom: 0, left: 0 }, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _recharts.CartesianGrid, { vertical: false }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         _recharts.XAxis,
@@ -813,17 +813,17 @@ function TokenUsageTimelineChart({ rows, metric, stackBy, className }) {
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkTEJDX7X7js.ChartTooltip,
+        _chunkHPKCZMQXjs.ChartTooltip,
         {
           content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkTEJDX7X7js.ChartTooltipContent,
+            _chunkHPKCZMQXjs.ChartTooltipContent,
             {
               labelFormatter: (value) => formatBucket.format(/* @__PURE__ */ new Date(`${String(value)}T00:00:00.000Z`))
             }
           )
         }
       ),
-      seriesKeys.length >= 2 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.ChartLegend, { content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.ChartLegendContent, {}) }) : null,
+      seriesKeys.length >= 2 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.ChartLegend, { content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.ChartLegendContent, {}) }) : null,
       seriesKeys.map((series, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         _recharts.Bar,
         {
@@ -869,19 +869,19 @@ function TokenUsageAdminContainer() {
     [t]
   );
   if (error) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.Card, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-destructive text-xs/relaxed", children: error }) }) }) }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.Card, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-destructive text-xs/relaxed", children: error }) }) }) }) });
   }
-  if (isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.RoundPageContainer, { fullWidth: true, forceHeader: true });
+  if (isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.RoundPageContainer, { fullWidth: true, forceHeader: true });
   const emptyLabel = t("token_usage.admin.no_data");
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-col gap-4 p-4", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-col gap-4 p-4", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageAdminTiles, { summary, metric: filters.metric, singleCustomerMode }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkTEJDX7X7js.Card, { children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkTEJDX7X7js.CardHeader, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.CardTitle, { children: t("token_usage.admin.usage_over_time") }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.CardAction, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHPKCZMQXjs.Card, { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHPKCZMQXjs.CardHeader, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.CardTitle, { children: t("token_usage.admin.usage_over_time") }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.CardAction, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: t("token_usage.admin.stack_by") }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            _chunkTEJDX7X7js.Select,
+            _chunkHPKCZMQXjs.Select,
             {
               items: stackByItems,
               value: filters.stackBy,
@@ -889,29 +889,29 @@ function TokenUsageAdminContainer() {
                 if (value) setFilters({ stackBy: value });
               },
               children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.SelectTrigger, { size: "sm", className: "w-36", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.SelectValue, {}) }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.SelectContent, { children: STACK_BY_VALUES.map((value) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.SelectItem, { value, children: stackByItems[value] }, value)) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.SelectTrigger, { size: "sm", className: "w-36", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.SelectValue, {}) }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.SelectContent, { children: STACK_BY_VALUES.map((value) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.SelectItem, { value, children: stackByItems[value] }, value)) })
               ]
             }
           )
         ] }) })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageTimelineChart, { rows: timeline, metric: filters.metric, stackBy: filters.stackBy }) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageTimelineChart, { rows: timeline, metric: filters.metric, stackBy: filters.stackBy }) })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid gap-4 md:grid-cols-2", children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkTEJDX7X7js.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.CardTitle, { children: t("token_usage.admin.by_company") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byCompany, metric: filters.metric, emptyLabel }) })
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHPKCZMQXjs.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.CardTitle, { children: t("token_usage.admin.by_company") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byCompany, metric: filters.metric, emptyLabel }) })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkTEJDX7X7js.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.CardTitle, { children: t("token_usage.admin.by_user") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byUser, metric: filters.metric, emptyLabel }) })
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHPKCZMQXjs.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.CardTitle, { children: t("token_usage.admin.by_user") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byUser, metric: filters.metric, emptyLabel }) })
       ] })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk6YIZX26Tjs.cn.call(void 0, "grid gap-4", !singleCustomerMode && "md:grid-cols-2"), children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkTEJDX7X7js.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.CardTitle, { children: t("token_usage.admin.customer_by_operation") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHPKCZMQXjs.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.CardTitle, { children: t("token_usage.admin.customer_by_operation") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           TokenUsageRankedBar,
           {
             rows: byCustomerOperation,
@@ -921,9 +921,9 @@ function TokenUsageAdminContainer() {
           }
         ) })
       ] }),
-      !singleCustomerMode && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkTEJDX7X7js.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.CardTitle, { children: t("token_usage.admin.platform_by_operation") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      !singleCustomerMode && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHPKCZMQXjs.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.CardTitle, { children: t("token_usage.admin.platform_by_operation") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           TokenUsageRankedBar,
           {
             rows: byOperation,
@@ -934,9 +934,9 @@ function TokenUsageAdminContainer() {
         ) })
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkTEJDX7X7js.Card, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.CardTitle, { children: t("token_usage.admin.detail") }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTEJDX7X7js.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageBreakdownTable, { rows: byCompany, metric: filters.metric }) })
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHPKCZMQXjs.Card, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.CardTitle, { children: t("token_usage.admin.detail") }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPKCZMQXjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageBreakdownTable, { rows: byCompany, metric: filters.metric }) })
     ] })
   ] }) });
 }

package/dist/features/tokenusage/index.mjs

@@ -26,7 +26,7 @@ import {
   TableHeader,
   TableRow,
   usePageUrlGenerator
-} from "../../chunk-B3ELVSTL.mjs";
+} from "../../chunk-PGW2OP3L.mjs";
 import "../../chunk-MAWTFEY3.mjs";
 import {
   AbstractService,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",

package/src/components/navigations/Header.tsx

@@ -51,8 +51,11 @@ export function Header({ children, mobileChildren, leftContent, logo, className
               </div>
             )
           : children && (
-              <div className="flex w-64 flex-row items-center justify-end gap-x-4 whitespace-nowrap">
-                <div className="flex flex-row items-center justify-end gap-x-4 whitespace-nowrap">{children}</div>
+              // No fixed width: the widget slot sizes to its content and the
+              // breadcrumb (w-full, above) takes the rest. A `w-64` cap here
+              // clipped consumers whose widget set outgrew 256px.
+              <div className="flex shrink-0 flex-row items-center justify-end gap-x-4 whitespace-nowrap">
+                {children}
               </div>
             )}
       </div>

package/src/components/navigations/RecentPagesNavigator.tsx

@@ -3,6 +3,7 @@
 import { useAtomValue } from "jotai";
 import { HistoryIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { usePathname } from "next/navigation";
 import { recentPagesAtom } from "../../atoms";
 import {
   DropdownMenu,
@@ -13,52 +14,82 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   Link,
+  SidebarMenuButton,
+  SidebarMenuItem,
   useSidebar,
 } from "../../shadcnui";
 
+/**
+ * A complete sidebar row. It renders its own SidebarMenuItem and owns its
+ * trigger; consumers drop it into a SidebarMenu and add nothing around it.
+ *
+ * The trigger IS the SidebarMenuButton. Wrapping this component in a
+ * consumer-owned SidebarMenuButton instead — which four apps used to do —
+ * leaves the real trigger as an inline element inside a button that
+ * `group-data-[collapsible=icon]:size-8! p-2! overflow-hidden` clamps to a
+ * 16px content box once the rail collapses. The trigger shrinks to zero width
+ * behind the consumer's own icon, and the icon the user clicks belongs to a
+ * button with no handler.
+ */
 export function RecentPagesNavigator() {
   const recentPages = useAtomValue(recentPagesAtom);
   const t = useTranslations();
-  const { state, isMobile } = useSidebar();
+  const { isMobile } = useSidebar();
+  const pathname = usePathname();
 
-  if (recentPages.length === 0) {
-    return null;
-  }
+  // The page the user is standing on is not somewhere to navigate back to, so
+  // it is hidden while they are there. Filtering happens here rather than in
+  // usePageTracker so the page stays recorded and reappears at the top the
+  // moment they leave. A sub-path counts as being on the entity: the
+  // /campaigns/:id entry is hidden while the user is at /campaigns/:id/canvas.
+  //
+  // usePathname is typed non-nullable but is not trusted to be — usePageTracker
+  // guards it the same way. With no path known, hide nothing rather than
+  // throwing inside a component that renders on every page.
+  const isCurrentPage = (url: string) => !!pathname && (pathname === url || pathname.startsWith(`${url}/`));
+
+  const pages = recentPages.filter((page) => !isCurrentPage(page.url));
+
+  if (pages.length === 0) return null;
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger render={<span />} nativeButton={false}>
-        <span className="flex w-full cursor-pointer items-center gap-2">
-          {/* `state` is the DESKTOP rail's collapse state — useSidebar derives it
-              from `open` alone, never from `openMobile`. On mobile the sidebar
-              always renders as a full-width sheet, so without the !isMobile guard
-              this swaps its label for an icon inside the sheet — and consumers
-              that also render their own item icon end up showing TWO. */}
-          {state === "collapsed" && !isMobile ? (
-            <HistoryIcon className="h-4 w-4" />
-          ) : (
-            <span>{t(`common.recent_pages`)}</span>
-          )}
-        </span>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="w-96">
-        <DropdownMenuGroup>
-          <DropdownMenuLabel>{t(`common.recent_pages`)}</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          {recentPages.map((page, index) => (
-            <DropdownMenuItem key={`${page.url}-${index}`}>
-              <Link href={page.url} className="flex items-center gap-2">
+    <SidebarMenuItem>
+      <DropdownMenu>
+        {/* No collapsed/expanded branch: SidebarMenuButton's own `tooltip` prop
+            renders exactly when the rail is collapsed on desktop, and the label
+            is clipped by the button's overflow-hidden like every other row. */}
+        <DropdownMenuTrigger
+          data-testid="sidebar-recent-pages"
+          render={
+            <SidebarMenuButton
+              className="text-muted-foreground hover:bg-muted/50 cursor-pointer"
+              tooltip={t(`common.recent_pages`)}
+            />
+          }
+        >
+          <HistoryIcon />
+          <span>{t(`common.recent_pages`)}</span>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent side={isMobile ? "bottom" : "right"} align="start" className="w-96">
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>{t(`common.recent_pages`)}</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {pages.map((page, index) => (
+              <DropdownMenuItem
+                key={`${page.url}-${index}`}
+                render={<Link href={page.url} className="flex items-center gap-2" />}
+              >
                 <div className="flex flex-col">
-                  <div className="truncate text-sm">{page.title}</div>
+                  <div className="truncate">{page.title}</div>
                   <div className="text-muted-foreground text-xs font-normal">
                     {t(`entities.${page.moduleType}`, { count: 1 })}
                   </div>
                 </div>
-              </Link>
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
   );
 }

package/src/components/navigations/__tests__/RecentPagesNavigator.spec.tsx

@@ -0,0 +1,166 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { createStore, Provider } from "jotai";
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { recentPagesAtom, type RecentPage } from "../../../atoms";
+import { configureI18n } from "../../../i18n";
+import { SidebarMenu, SidebarProvider } from "../../../shadcnui";
+import { RecentPagesNavigator } from "../RecentPagesNavigator";
+
+// usePathname is globally mocked to "/" in vitest.setup.ts. Override it here so
+// the current-page filter can be exercised. A spec-level vi.mock takes
+// precedence over the setup-file mock for this module.
+const pathnameRef: { current: string | null } = { current: "/" };
+vi.mock("next/navigation", () => ({
+  usePathname: () => pathnameRef.current,
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+    back: vi.fn(),
+    forward: vi.fn(),
+    refresh: vi.fn(),
+  }),
+  useSearchParams: () => new URLSearchParams(),
+  useParams: () => ({}),
+  redirect: vi.fn(),
+  notFound: vi.fn(),
+}));
+
+beforeEach(() => {
+  pathnameRef.current = "/";
+});
+
+beforeAll(() => {
+  // The package Link resolves its inner component at runtime and throws if i18n
+  // was never configured (src/i18n/config.ts).
+  configureI18n({
+    useRouter: () => ({
+      push: vi.fn(),
+      replace: vi.fn(),
+      back: vi.fn(),
+      forward: vi.fn(),
+      refresh: vi.fn(),
+      prefetch: vi.fn(),
+    }),
+    useTranslations: () => (key: string) => key,
+    usePathname: () => "/",
+    Link: ({ href, children, ...rest }: { href: string; children: React.ReactNode; [key: string]: any }) => (
+      <a href={href} {...rest}>
+        {children}
+      </a>
+    ),
+  });
+});
+
+const PAGES: RecentPage[] = [
+  { url: "/npcs/npc-1", title: "Charlie", moduleType: "npcs", timestamp: 2 },
+  { url: "/campaigns/camp-1", title: "Venezia Obscura", moduleType: "campaigns", timestamp: 1 },
+];
+
+function renderNavigator({
+  pages = PAGES,
+  open = true,
+  pathname = "/",
+}: { pages?: RecentPage[]; open?: boolean; pathname?: string | null } = {}) {
+  pathnameRef.current = pathname;
+  const store = createStore();
+  store.set(recentPagesAtom, pages);
+  return render(
+    <Provider store={store}>
+      <SidebarProvider open={open}>
+        <SidebarMenu>
+          <RecentPagesNavigator />
+        </SidebarMenu>
+      </SidebarProvider>
+    </Provider>,
+  );
+}
+
+describe("RecentPagesNavigator", () => {
+  it("renders nothing when no pages have been recorded", () => {
+    renderNavigator({ pages: [] });
+    expect(screen.queryByTestId("sidebar-recent-pages")).toBeNull();
+  });
+
+  it("renders exactly one trigger button", () => {
+    // Regression: four apps wrapped this component in their own
+    // SidebarMenuButton and rendered a second HistoryIcon beside it. The
+    // wrapper had no handler, so the visible icon was dead in the collapsed
+    // rail. Exactly one button, and it must be the trigger.
+    renderNavigator();
+    const triggers = screen.getAllByTestId("sidebar-recent-pages");
+    expect(triggers).toHaveLength(1);
+    expect(triggers[0].tagName).toBe("BUTTON");
+  });
+
+  it("opens the menu when the trigger is clicked in the collapsed rail", async () => {
+    renderNavigator({ open: false });
+    await userEvent.click(screen.getByTestId("sidebar-recent-pages"));
+    expect(await screen.findByText("Charlie")).toBeInTheDocument();
+  });
+
+  it("opens the menu when the trigger is clicked while expanded", async () => {
+    renderNavigator({ open: true });
+    await userEvent.click(screen.getByTestId("sidebar-recent-pages"));
+    expect(await screen.findByText("Venezia Obscura")).toBeInTheDocument();
+  });
+
+  it("shows the entity name over its translated singular type", async () => {
+    renderNavigator();
+    await userEvent.click(screen.getByTestId("sidebar-recent-pages"));
+    expect(await screen.findByText("Charlie")).toBeInTheDocument();
+    // The i18n mock echoes the key back, so the second line is the raw key.
+    expect(screen.getByText("entities.npcs")).toBeInTheDocument();
+    expect(screen.getByText("entities.campaigns")).toBeInTheDocument();
+  });
+
+  it("makes each entry an anchor pointing at the recorded url", async () => {
+    renderNavigator();
+    await userEvent.click(screen.getByTestId("sidebar-recent-pages"));
+    const link = (await screen.findByText("Charlie")).closest("a");
+    expect(link).not.toBeNull();
+    expect(link).toHaveAttribute("href", "/npcs/npc-1");
+  });
+
+  it("hides the entry for the page the user is currently on", async () => {
+    renderNavigator({ pathname: "/npcs/npc-1" });
+    await userEvent.click(screen.getByTestId("sidebar-recent-pages"));
+    expect(await screen.findByText("Venezia Obscura")).toBeInTheDocument();
+    expect(screen.queryByText("Charlie")).toBeNull();
+  });
+
+  it("hides the entry for the entity whose sub-page the user is on", async () => {
+    renderNavigator({ pathname: "/campaigns/camp-1/canvas" });
+    await userEvent.click(screen.getByTestId("sidebar-recent-pages"));
+    expect(await screen.findByText("Charlie")).toBeInTheDocument();
+    expect(screen.queryByText("Venezia Obscura")).toBeNull();
+  });
+
+  it("does not hide an entry whose url is merely a string prefix of the current path", async () => {
+    // "/npcs/npc-1" must not be hidden while on "/npcs/npc-10".
+    renderNavigator({
+      pages: [{ url: "/npcs/npc-1", title: "Charlie", moduleType: "npcs", timestamp: 1 }],
+      pathname: "/npcs/npc-10",
+    });
+    await userEvent.click(screen.getByTestId("sidebar-recent-pages"));
+    expect(await screen.findByText("Charlie")).toBeInTheDocument();
+  });
+
+  it("renders nothing when the only recorded page is the one being viewed", () => {
+    renderNavigator({
+      pages: [{ url: "/npcs/npc-1", title: "Charlie", moduleType: "npcs", timestamp: 1 }],
+      pathname: "/npcs/npc-1",
+    });
+    expect(screen.queryByTestId("sidebar-recent-pages")).toBeNull();
+  });
+
+  it("hides nothing when the pathname is unavailable", async () => {
+    // usePathname is typed non-nullable but can return null in practice; the
+    // sidebar must degrade rather than throw.
+    renderNavigator({ pathname: null as unknown as string });
+    await userEvent.click(screen.getByTestId("sidebar-recent-pages"));
+    expect(await screen.findByText("Charlie")).toBeInTheDocument();
+    expect(screen.getByText("Venezia Obscura")).toBeInTheDocument();
+  });
+});