@carlonicora/nextjs-jsonapi 5.7.3 → 6.1.0

package/dist/features/tokenusage/index.mjs

@@ -9,7 +9,7 @@ import {
   percentageDelta,
   seriesColor,
   useUsageFormatters
-} from "../../chunk-6KAYEYFU.mjs";
+} from "../../chunk-RYZYKG6W.mjs";
 import {
   Button,
   Card,
@@ -36,9 +36,12 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
   usePageUrlGenerator
-} from "../../chunk-JCNB5KTQ.mjs";
-import "../../chunk-RJMLAW5O.mjs";
+} from "../../chunk-U7DR5VDT.mjs";
+import "../../chunk-JVJS5RHB.mjs";
 import "../../chunk-PW42LRSL.mjs";
 import {
   AbstractService,
@@ -57,7 +60,7 @@ import {
   configureTokenUsage,
   getTokenUsageCurrency,
   tokenUsageModules
-} from "../../chunk-CJS5WA4E.mjs";
+} from "../../chunk-USYZNWKS.mjs";
 import "../../chunk-V5MI7RNB.mjs";
 import "../../chunk-AUXK7QSA.mjs";
 import "../../chunk-PI56A4DG.mjs";
@@ -594,6 +597,7 @@ import { useTranslations as useTranslations5 } from "next-intl";
 
 // src/features/tokenusage/lib/operation-label.ts
 var OPERATION_LABEL_NAMESPACE = "token_usage.types";
+var OPERATION_DESCRIPTION_NAMESPACE = "token_usage.type_descriptions";
 var toCamelCase = /* @__PURE__ */ __name((value) => {
   const parts = value.split(/[^a-zA-Z0-9]+/).filter(Boolean);
   if (parts.length === 0) return value;
@@ -605,6 +609,10 @@ var operationLabel = /* @__PURE__ */ __name((type, translate, has) => {
   const key = `${OPERATION_LABEL_NAMESPACE}.${toCamelCase(type)}`;
   return has(key) ? translate(key) : type;
 }, "operationLabel");
+var operationDescription = /* @__PURE__ */ __name((type, translate, has) => {
+  const key = `${OPERATION_DESCRIPTION_NAMESPACE}.${toCamelCase(type)}`;
+  return has(key) ? translate(key) : void 0;
+}, "operationDescription");
 
 // src/features/tokenusage/components/TokenUsageRankedBar.tsx
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -620,6 +628,31 @@ function TokenUsageRankedBar({ rows, metric, emptyLabel, labelsAreOperationTypes
       (key) => t.has(key)
     );
   }, "renderLabel");
+  const renderDescription = /* @__PURE__ */ __name((row) => {
+    if (row.id === "other" || !labelsAreOperationTypes) return void 0;
+    return operationDescription(
+      row.label,
+      (key) => t(key),
+      (key) => t.has(key)
+    );
+  }, "renderDescription");
+  const renderLabelCell = /* @__PURE__ */ __name((row) => {
+    const label = /* @__PURE__ */ jsx5("span", { className: "text-muted-foreground truncate text-xs", children: renderLabel(row) });
+    const description = renderDescription(row);
+    if (!description) return label;
+    return /* @__PURE__ */ jsxs4(Tooltip, { children: [
+      /* @__PURE__ */ jsx5(
+        TooltipTrigger,
+        {
+          "data-testid": `ranked-description-${row.id}`,
+          className: "min-w-0 cursor-help justify-self-start truncate",
+          render: /* @__PURE__ */ jsx5("div", {}),
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx5(TooltipContent, { side: "top", className: "max-w-xs", children: /* @__PURE__ */ jsx5("p", { className: "text-xs", children: description }) })
+    ] });
+  }, "renderLabelCell");
   if (rows.length === 0) {
     return /* @__PURE__ */ jsx5("p", { className: "text-muted-foreground py-6 text-center text-sm", children: emptyLabel });
   }
@@ -634,7 +667,7 @@ function TokenUsageRankedBar({ rows, metric, emptyLabel, labelsAreOperationTypes
     const share = total > 0 ? value / total * 100 : 0;
     return /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-x-3 gap-y-0.5 py-0.5", children: [
       /* @__PURE__ */ jsxs4("div", { className: "grid min-w-0 gap-0.5", children: [
-        /* @__PURE__ */ jsx5("span", { className: "text-muted-foreground truncate text-xs", children: renderLabel(row) }),
+        renderLabelCell(row),
         /* @__PURE__ */ jsx5("div", { className: "bg-muted h-2 w-full overflow-hidden rounded-r-[4px]", dir: "ltr", children: /* @__PURE__ */ jsx5(
           "div",
           {