@flanksource/clicky-ui 0.3.9 → 0.3.11

package/dist/data/chat/ContextMeter.cjs

@@ -0,0 +1,164 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../../lib/utils.cjs");
+const tokens = require("../../lib/tokens.cjs");
+const HoverCard = require("../../overlay/HoverCard.cjs");
+function barTone(pct) {
+  return pct > 80 ? "bg-red-500" : pct > 50 ? "bg-amber-500" : "bg-emerald-500";
+}
+function ringTone(pct) {
+  return pct > 80 ? "text-red-500" : pct > 50 ? "text-amber-500" : "text-emerald-500";
+}
+function textTone(pct) {
+  return pct > 80 ? "text-red-600 [[data-theme=dark]_&]:text-red-400" : pct > 50 ? "text-amber-600 [[data-theme=dark]_&]:text-amber-400" : "text-emerald-600 [[data-theme=dark]_&]:text-emerald-400";
+}
+function Row({ label, value }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium tabular-nums", children: value })
+  ] });
+}
+function anyPositive(...values) {
+  return values.some((v) => v != null && v > 0);
+}
+function bucketRows(tokens2, cost) {
+  const rows = [
+    { label: "Input", tokens: tokens2 == null ? void 0 : tokens2.input, cost: cost == null ? void 0 : cost.input },
+    { label: "Output", tokens: tokens2 == null ? void 0 : tokens2.output, cost: cost == null ? void 0 : cost.output },
+    { label: "Reasoning", tokens: tokens2 == null ? void 0 : tokens2.reasoning, cost: cost == null ? void 0 : cost.reasoning },
+    { label: "Cache read", tokens: tokens2 == null ? void 0 : tokens2.cacheRead, cost: cost == null ? void 0 : cost.cacheRead },
+    { label: "Cache write", tokens: tokens2 == null ? void 0 : tokens2.cacheWrite, cost: cost == null ? void 0 : cost.cacheWrite }
+  ];
+  return rows.filter((row) => (row.tokens ?? 0) > 0 || (row.cost ?? 0) > 0);
+}
+function UsageTable({
+  rows,
+  totalTokens,
+  totalCost,
+  showTokens,
+  showCost
+}) {
+  const numCell = "px-1 py-0.5 text-right tabular-nums";
+  return /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-1 py-0.5 text-left font-medium" }),
+      showTokens && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-1 py-0.5 text-right font-medium", children: "Tokens" }),
+      showCost && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-1 py-0.5 text-right font-medium", children: "Cost" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+      rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-1 py-0.5 text-left text-muted-foreground", children: row.label }),
+        showTokens && /* @__PURE__ */ jsxRuntime.jsx("td", { className: numCell, children: row.tokens ? tokens.compactTokens(row.tokens) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/50", children: "—" }) }),
+        showCost && /* @__PURE__ */ jsxRuntime.jsx("td", { className: numCell, children: row.cost ? tokens.formatCost(row.cost) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/50", children: "—" }) })
+      ] }, row.label)),
+      /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-t border-border font-medium", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-1 py-0.5 text-left", children: "Total" }),
+        showTokens && /* @__PURE__ */ jsxRuntime.jsx("td", { className: numCell, children: tokens.compactTokens(totalTokens) }),
+        showCost && /* @__PURE__ */ jsxRuntime.jsx("td", { className: numCell, children: tokens.formatCost(totalCost) })
+      ] })
+    ] })
+  ] });
+}
+function ContextMeter({
+  mode = "bar",
+  usedPercent,
+  usedTokens,
+  windowTokens,
+  messageCount,
+  model,
+  modelIcon: Glyph,
+  tokens: tokens$1,
+  cost,
+  budget,
+  className
+}) {
+  const pct = Math.min(100, Math.max(0, Math.round(usedPercent)));
+  const totalTokens = (tokens$1 == null ? void 0 : tokens$1.total) ?? 0;
+  const totalCost = (cost == null ? void 0 : cost.total) ?? 0;
+  const trigger = mode === "gauge" ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: utils.cn(
+        "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+        className
+      ),
+      "aria-label": `Context ${pct}% used`,
+      children: [
+        Glyph && /* @__PURE__ */ jsxRuntime.jsx(Glyph, { className: "size-3.5 shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", className: utils.cn("shrink-0", ringTone(pct)), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "8", fill: "none", stroke: "currentColor", strokeWidth: "2.5", opacity: "0.15" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: "10",
+              cy: "10",
+              r: "8",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2.5",
+              strokeDasharray: 2 * Math.PI * 8,
+              strokeDashoffset: (1 - pct / 100) * 2 * Math.PI * 8,
+              strokeLinecap: "round",
+              transform: "rotate(-90 10 10)"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("text", { x: "10", y: "10", textAnchor: "middle", dominantBaseline: "central", fontSize: "6", fill: "currentColor", fontWeight: "600", children: pct })
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: utils.cn(
+        "inline-flex items-center gap-1.5 rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground",
+        className
+      ),
+      "aria-label": `Context ${pct}% used`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: "ctx" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-16 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("block h-full rounded-full transition-all", barTone(pct)), style: { width: `${pct}%` } }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: utils.cn("shrink-0 font-medium tabular-nums", textTone(pct)), children: [
+          pct,
+          "%"
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(HoverCard.HoverCard, { trigger, placement: "bottom", cardClassName: "w-72 p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2.5 text-xs", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: "Context usage" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: utils.cn("font-semibold tabular-nums", textTone(pct)), children: [
+        pct,
+        "%"
+      ] })
+    ] }),
+    model && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b border-border pb-2", children: [
+      Glyph && /* @__PURE__ */ jsxRuntime.jsx(Glyph, { className: "size-4 shrink-0" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", title: model, children: model })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("h-full rounded-full", barTone(pct)), style: { width: `${pct}%` } }) }),
+      windowTokens ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Window", value: `${tokens.compactTokens(usedTokens ?? 0)} / ${tokens.compactTokens(windowTokens)}` }),
+        /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Free", value: `${100 - pct}%` })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Used", value: `${pct}%` }),
+      messageCount != null ? /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Messages", value: String(messageCount) }) : null
+    ] }),
+    (totalTokens > 0 || totalCost > 0 || budget) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5 border-t border-border pt-2", children: [
+      (totalTokens > 0 || totalCost > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+        UsageTable,
+        {
+          rows: bucketRows(tokens$1, cost),
+          totalTokens,
+          totalCost,
+          showTokens: totalTokens > 0,
+          showCost: totalCost > 0
+        }
+      ),
+      (budget == null ? void 0 : budget.total) != null && budget.total > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Budget", value: `${tokens.formatCost(budget.used ?? 0)} / ${tokens.formatCost(budget.total)}` }) : (budget == null ? void 0 : budget.remaining) != null ? /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Budget left", value: tokens.formatCost(budget.remaining) }) : anyPositive(budget == null ? void 0 : budget.used) ? /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Budget", value: tokens.formatCost((budget == null ? void 0 : budget.used) ?? 0) }) : null
+    ] })
+  ] }) });
+}
+exports.ContextMeter = ContextMeter;
+//# sourceMappingURL=ContextMeter.cjs.map

package/dist/data/chat/ContextMeter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMeter.cjs","sources":["../../../src/data/chat/ContextMeter.tsx"],"sourcesContent":["import { cn } from \"../../lib/utils\";\nimport { compactTokens, formatCost } from \"../../lib/tokens\";\nimport type { StaticIconComponent } from \"../Icon\";\nimport { HoverCard } from \"../../overlay/HoverCard\";\n\nexport type ContextMeterMode = \"bar\" | \"gauge\";\n\nexport type ContextMeterTokens = {\n  input?: number | undefined;\n  output?: number | undefined;\n  reasoning?: number | undefined;\n  cacheRead?: number | undefined;\n  cacheWrite?: number | undefined;\n  total?: number | undefined;\n};\n\nexport type ContextMeterCost = {\n  input?: number | undefined;\n  output?: number | undefined;\n  reasoning?: number | undefined;\n  cacheRead?: number | undefined;\n  cacheWrite?: number | undefined;\n  total?: number | undefined;\n};\n\nexport type ContextMeterBudget = {\n  used?: number | undefined;\n  total?: number | undefined;\n  remaining?: number | undefined;\n};\n\nexport type ContextMeterProps = {\n  /** Trigger shape: a compact `bar` (session header) or a circular `gauge`\n   *  (chat toolbar). Both open the same hover popover. */\n  mode?: ContextMeterMode;\n  /** Share of the context window used, 0–100 — drives the fill and tone. */\n  usedPercent: number;\n  /** Context-window tokens shown in the popover. */\n  usedTokens?: number | undefined;\n  windowTokens?: number | undefined;\n  /** Message count shown in the popover (chat). */\n  messageCount?: number | undefined;\n  /** Model id/label and its brand glyph. */\n  model?: string | undefined;\n  modelIcon?: StaticIconComponent | undefined;\n  /** Per-bucket token counts for the popover breakdown. */\n  tokens?: ContextMeterTokens | undefined;\n  /** Per-bucket costs (USD) for the popover breakdown. */\n  cost?: ContextMeterCost | undefined;\n  budget?: ContextMeterBudget | undefined;\n  className?: string | undefined;\n};\n\nfunction barTone(pct: number): string {\n  return pct > 80 ? \"bg-red-500\" : pct > 50 ? \"bg-amber-500\" : \"bg-emerald-500\";\n}\n\nfunction ringTone(pct: number): string {\n  return pct > 80 ? \"text-red-500\" : pct > 50 ? \"text-amber-500\" : \"text-emerald-500\";\n}\n\nfunction textTone(pct: number): string {\n  return pct > 80\n    ? \"text-red-600 [[data-theme=dark]_&]:text-red-400\"\n    : pct > 50\n      ? \"text-amber-600 [[data-theme=dark]_&]:text-amber-400\"\n      : \"text-emerald-600 [[data-theme=dark]_&]:text-emerald-400\";\n}\n\nfunction Row({ label, value }: { label: string; value: string }) {\n  return (\n    <div className=\"flex justify-between gap-4\">\n      <span className=\"text-muted-foreground\">{label}</span>\n      <span className=\"font-medium tabular-nums\">{value}</span>\n    </div>\n  );\n}\n\nfunction anyPositive(...values: (number | undefined)[]): boolean {\n  return values.some((v) => v != null && v > 0);\n}\n\ntype BucketRow = { label: string; tokens?: number | undefined; cost?: number | undefined };\n\n/** One row per token/cost bucket, kept only when it carries a token or cost\n *  value. Cache stays split into read and write on both axes. */\nfunction bucketRows(tokens?: ContextMeterTokens, cost?: ContextMeterCost): BucketRow[] {\n  const rows: BucketRow[] = [\n    { label: \"Input\", tokens: tokens?.input, cost: cost?.input },\n    { label: \"Output\", tokens: tokens?.output, cost: cost?.output },\n    { label: \"Reasoning\", tokens: tokens?.reasoning, cost: cost?.reasoning },\n    { label: \"Cache read\", tokens: tokens?.cacheRead, cost: cost?.cacheRead },\n    { label: \"Cache write\", tokens: tokens?.cacheWrite, cost: cost?.cacheWrite },\n  ];\n  return rows.filter((row) => (row.tokens ?? 0) > 0 || (row.cost ?? 0) > 0);\n}\n\nfunction UsageTable({\n  rows,\n  totalTokens,\n  totalCost,\n  showTokens,\n  showCost,\n}: {\n  rows: BucketRow[];\n  totalTokens: number;\n  totalCost: number;\n  showTokens: boolean;\n  showCost: boolean;\n}) {\n  const numCell = \"px-1 py-0.5 text-right tabular-nums\";\n  return (\n    <table className=\"w-full border-collapse\">\n      <thead>\n        <tr className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">\n          <th className=\"px-1 py-0.5 text-left font-medium\" />\n          {showTokens && <th className=\"px-1 py-0.5 text-right font-medium\">Tokens</th>}\n          {showCost && <th className=\"px-1 py-0.5 text-right font-medium\">Cost</th>}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((row) => (\n          <tr key={row.label}>\n            <td className=\"px-1 py-0.5 text-left text-muted-foreground\">{row.label}</td>\n            {showTokens && (\n              <td className={numCell}>\n                {row.tokens ? compactTokens(row.tokens) : <span className=\"text-muted-foreground/50\">—</span>}\n              </td>\n            )}\n            {showCost && (\n              <td className={numCell}>\n                {row.cost ? formatCost(row.cost) : <span className=\"text-muted-foreground/50\">—</span>}\n              </td>\n            )}\n          </tr>\n        ))}\n        <tr className=\"border-t border-border font-medium\">\n          <td className=\"px-1 py-0.5 text-left\">Total</td>\n          {showTokens && <td className={numCell}>{compactTokens(totalTokens)}</td>}\n          {showCost && <td className={numCell}>{formatCost(totalCost)}</td>}\n        </tr>\n      </tbody>\n    </table>\n  );\n}\n\n/** Unified context-window meter. Renders as a compact progress `bar` or a\n *  circular `gauge`; hovering or focusing it opens a popover with the model, the\n *  context-window breakdown, per-bucket token usage and the cost + budget\n *  detail. Domain-agnostic — callers feed plain numbers. */\nexport function ContextMeter({\n  mode = \"bar\",\n  usedPercent,\n  usedTokens,\n  windowTokens,\n  messageCount,\n  model,\n  modelIcon: Glyph,\n  tokens,\n  cost,\n  budget,\n  className,\n}: ContextMeterProps) {\n  const pct = Math.min(100, Math.max(0, Math.round(usedPercent)));\n  const totalTokens = tokens?.total ?? 0;\n  const totalCost = cost?.total ?? 0;\n\n  const trigger =\n    mode === \"gauge\" ? (\n      <span\n        className={cn(\n          \"inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground\",\n          className,\n        )}\n        aria-label={`Context ${pct}% used`}\n      >\n        {Glyph && <Glyph className=\"size-3.5 shrink-0\" />}\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" className={cn(\"shrink-0\", ringTone(pct))}>\n          <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" opacity=\"0.15\" />\n          <circle\n            cx=\"10\"\n            cy=\"10\"\n            r=\"8\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2.5\"\n            strokeDasharray={2 * Math.PI * 8}\n            strokeDashoffset={(1 - pct / 100) * 2 * Math.PI * 8}\n            strokeLinecap=\"round\"\n            transform=\"rotate(-90 10 10)\"\n          />\n          <text x=\"10\" y=\"10\" textAnchor=\"middle\" dominantBaseline=\"central\" fontSize=\"6\" fill=\"currentColor\" fontWeight=\"600\">\n            {pct}\n          </text>\n        </svg>\n      </span>\n    ) : (\n      <span\n        className={cn(\n          \"inline-flex items-center gap-1.5 rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground\",\n          className,\n        )}\n        aria-label={`Context ${pct}% used`}\n      >\n        <span className=\"shrink-0\">ctx</span>\n        <span className=\"h-1.5 w-16 overflow-hidden rounded-full bg-muted\">\n          <span className={cn(\"block h-full rounded-full transition-all\", barTone(pct))} style={{ width: `${pct}%` }} />\n        </span>\n        <span className={cn(\"shrink-0 font-medium tabular-nums\", textTone(pct))}>{pct}%</span>\n      </span>\n    );\n\n  return (\n    <HoverCard trigger={trigger} placement=\"bottom\" cardClassName=\"w-72 p-3\">\n      <div className=\"space-y-2.5 text-xs\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <span className=\"font-semibold\">Context usage</span>\n          <span className={cn(\"font-semibold tabular-nums\", textTone(pct))}>{pct}%</span>\n        </div>\n\n        {model && (\n          <div className=\"flex items-center gap-2 border-b border-border pb-2\">\n            {Glyph && <Glyph className=\"size-4 shrink-0\" />}\n            <span className=\"truncate font-medium\" title={model}>\n              {model}\n            </span>\n          </div>\n        )}\n\n        <div className=\"space-y-1.5\">\n          <div className=\"h-1.5 overflow-hidden rounded-full bg-muted\">\n            <div className={cn(\"h-full rounded-full\", barTone(pct))} style={{ width: `${pct}%` }} />\n          </div>\n          {windowTokens ? (\n            <>\n              <Row label=\"Window\" value={`${compactTokens(usedTokens ?? 0)} / ${compactTokens(windowTokens)}`} />\n              <Row label=\"Free\" value={`${100 - pct}%`} />\n            </>\n          ) : (\n            <Row label=\"Used\" value={`${pct}%`} />\n          )}\n          {messageCount != null ? <Row label=\"Messages\" value={String(messageCount)} /> : null}\n        </div>\n\n        {(totalTokens > 0 || totalCost > 0 || budget) && (\n          <div className=\"space-y-1.5 border-t border-border pt-2\">\n            {(totalTokens > 0 || totalCost > 0) && (\n              <UsageTable\n                rows={bucketRows(tokens, cost)}\n                totalTokens={totalTokens}\n                totalCost={totalCost}\n                showTokens={totalTokens > 0}\n                showCost={totalCost > 0}\n              />\n            )}\n            {budget?.total != null && budget.total > 0 ? (\n              <Row label=\"Budget\" value={`${formatCost(budget.used ?? 0)} / ${formatCost(budget.total)}`} />\n            ) : budget?.remaining != null ? (\n              <Row label=\"Budget left\" value={formatCost(budget.remaining)} />\n            ) : anyPositive(budget?.used) ? (\n              <Row label=\"Budget\" value={formatCost(budget?.used ?? 0)} />\n            ) : null}\n          </div>\n        )}\n      </div>\n    </HoverCard>\n  );\n}\n"],"names":["jsxs","jsx","tokens","compactTokens","formatCost","cn","HoverCard","Fragment"],"mappings":"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"}

package/dist/data/chat/ContextMeter.d.ts

@@ -0,0 +1,50 @@
+import { StaticIconComponent } from '../Icon';
+export type ContextMeterMode = "bar" | "gauge";
+export type ContextMeterTokens = {
+    input?: number | undefined;
+    output?: number | undefined;
+    reasoning?: number | undefined;
+    cacheRead?: number | undefined;
+    cacheWrite?: number | undefined;
+    total?: number | undefined;
+};
+export type ContextMeterCost = {
+    input?: number | undefined;
+    output?: number | undefined;
+    reasoning?: number | undefined;
+    cacheRead?: number | undefined;
+    cacheWrite?: number | undefined;
+    total?: number | undefined;
+};
+export type ContextMeterBudget = {
+    used?: number | undefined;
+    total?: number | undefined;
+    remaining?: number | undefined;
+};
+export type ContextMeterProps = {
+    /** Trigger shape: a compact `bar` (session header) or a circular `gauge`
+     *  (chat toolbar). Both open the same hover popover. */
+    mode?: ContextMeterMode;
+    /** Share of the context window used, 0–100 — drives the fill and tone. */
+    usedPercent: number;
+    /** Context-window tokens shown in the popover. */
+    usedTokens?: number | undefined;
+    windowTokens?: number | undefined;
+    /** Message count shown in the popover (chat). */
+    messageCount?: number | undefined;
+    /** Model id/label and its brand glyph. */
+    model?: string | undefined;
+    modelIcon?: StaticIconComponent | undefined;
+    /** Per-bucket token counts for the popover breakdown. */
+    tokens?: ContextMeterTokens | undefined;
+    /** Per-bucket costs (USD) for the popover breakdown. */
+    cost?: ContextMeterCost | undefined;
+    budget?: ContextMeterBudget | undefined;
+    className?: string | undefined;
+};
+/** Unified context-window meter. Renders as a compact progress `bar` or a
+ *  circular `gauge`; hovering or focusing it opens a popover with the model, the
+ *  context-window breakdown, per-bucket token usage and the cost + budget
+ *  detail. Domain-agnostic — callers feed plain numbers. */
+export declare function ContextMeter({ mode, usedPercent, usedTokens, windowTokens, messageCount, model, modelIcon: Glyph, tokens, cost, budget, className, }: ContextMeterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ContextMeter.d.ts.map

package/dist/data/chat/ContextMeter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMeter.d.ts","sourceRoot":"","sources":["../../../src/data/chat/ContextMeter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGnD,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B;4DACwD;IACxD,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,0EAA0E;IAC1E,WAAW,EAAE,MAAM,CAAC;IACpB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C,yDAAyD;IACzD,MAAM,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACxC,wDAAwD;IACxD,IAAI,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACpC,MAAM,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AA+FF;;;4DAG4D;AAC5D,wBAAgB,YAAY,CAAC,EAC3B,IAAY,EACZ,WAAW,EACX,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,SAAS,EAAE,KAAK,EAChB,MAAM,EACN,IAAI,EACJ,MAAM,EACN,SAAS,GACV,EAAE,iBAAiB,2CAyGnB"}

package/dist/data/chat/ContextMeter.js

@@ -0,0 +1,164 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { compactTokens, formatCost } from "../../lib/tokens.js";
+import { HoverCard } from "../../overlay/HoverCard.js";
+function barTone(pct) {
+  return pct > 80 ? "bg-red-500" : pct > 50 ? "bg-amber-500" : "bg-emerald-500";
+}
+function ringTone(pct) {
+  return pct > 80 ? "text-red-500" : pct > 50 ? "text-amber-500" : "text-emerald-500";
+}
+function textTone(pct) {
+  return pct > 80 ? "text-red-600 [[data-theme=dark]_&]:text-red-400" : pct > 50 ? "text-amber-600 [[data-theme=dark]_&]:text-amber-400" : "text-emerald-600 [[data-theme=dark]_&]:text-emerald-400";
+}
+function Row({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-4", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums", children: value })
+  ] });
+}
+function anyPositive(...values) {
+  return values.some((v) => v != null && v > 0);
+}
+function bucketRows(tokens, cost) {
+  const rows = [
+    { label: "Input", tokens: tokens == null ? void 0 : tokens.input, cost: cost == null ? void 0 : cost.input },
+    { label: "Output", tokens: tokens == null ? void 0 : tokens.output, cost: cost == null ? void 0 : cost.output },
+    { label: "Reasoning", tokens: tokens == null ? void 0 : tokens.reasoning, cost: cost == null ? void 0 : cost.reasoning },
+    { label: "Cache read", tokens: tokens == null ? void 0 : tokens.cacheRead, cost: cost == null ? void 0 : cost.cacheRead },
+    { label: "Cache write", tokens: tokens == null ? void 0 : tokens.cacheWrite, cost: cost == null ? void 0 : cost.cacheWrite }
+  ];
+  return rows.filter((row) => (row.tokens ?? 0) > 0 || (row.cost ?? 0) > 0);
+}
+function UsageTable({
+  rows,
+  totalTokens,
+  totalCost,
+  showTokens,
+  showCost
+}) {
+  const numCell = "px-1 py-0.5 text-right tabular-nums";
+  return /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("th", { className: "px-1 py-0.5 text-left font-medium" }),
+      showTokens && /* @__PURE__ */ jsx("th", { className: "px-1 py-0.5 text-right font-medium", children: "Tokens" }),
+      showCost && /* @__PURE__ */ jsx("th", { className: "px-1 py-0.5 text-right font-medium", children: "Cost" })
+    ] }) }),
+    /* @__PURE__ */ jsxs("tbody", { children: [
+      rows.map((row) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("td", { className: "px-1 py-0.5 text-left text-muted-foreground", children: row.label }),
+        showTokens && /* @__PURE__ */ jsx("td", { className: numCell, children: row.tokens ? compactTokens(row.tokens) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50", children: "—" }) }),
+        showCost && /* @__PURE__ */ jsx("td", { className: numCell, children: row.cost ? formatCost(row.cost) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50", children: "—" }) })
+      ] }, row.label)),
+      /* @__PURE__ */ jsxs("tr", { className: "border-t border-border font-medium", children: [
+        /* @__PURE__ */ jsx("td", { className: "px-1 py-0.5 text-left", children: "Total" }),
+        showTokens && /* @__PURE__ */ jsx("td", { className: numCell, children: compactTokens(totalTokens) }),
+        showCost && /* @__PURE__ */ jsx("td", { className: numCell, children: formatCost(totalCost) })
+      ] })
+    ] })
+  ] });
+}
+function ContextMeter({
+  mode = "bar",
+  usedPercent,
+  usedTokens,
+  windowTokens,
+  messageCount,
+  model,
+  modelIcon: Glyph,
+  tokens,
+  cost,
+  budget,
+  className
+}) {
+  const pct = Math.min(100, Math.max(0, Math.round(usedPercent)));
+  const totalTokens = (tokens == null ? void 0 : tokens.total) ?? 0;
+  const totalCost = (cost == null ? void 0 : cost.total) ?? 0;
+  const trigger = mode === "gauge" ? /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+        className
+      ),
+      "aria-label": `Context ${pct}% used`,
+      children: [
+        Glyph && /* @__PURE__ */ jsx(Glyph, { className: "size-3.5 shrink-0" }),
+        /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", className: cn("shrink-0", ringTone(pct)), children: [
+          /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "8", fill: "none", stroke: "currentColor", strokeWidth: "2.5", opacity: "0.15" }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "10",
+              cy: "10",
+              r: "8",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2.5",
+              strokeDasharray: 2 * Math.PI * 8,
+              strokeDashoffset: (1 - pct / 100) * 2 * Math.PI * 8,
+              strokeLinecap: "round",
+              transform: "rotate(-90 10 10)"
+            }
+          ),
+          /* @__PURE__ */ jsx("text", { x: "10", y: "10", textAnchor: "middle", dominantBaseline: "central", fontSize: "6", fill: "currentColor", fontWeight: "600", children: pct })
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground",
+        className
+      ),
+      "aria-label": `Context ${pct}% used`,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "shrink-0", children: "ctx" }),
+        /* @__PURE__ */ jsx("span", { className: "h-1.5 w-16 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx("span", { className: cn("block h-full rounded-full transition-all", barTone(pct)), style: { width: `${pct}%` } }) }),
+        /* @__PURE__ */ jsxs("span", { className: cn("shrink-0 font-medium tabular-nums", textTone(pct)), children: [
+          pct,
+          "%"
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(HoverCard, { trigger, placement: "bottom", cardClassName: "w-72 p-3", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2.5 text-xs", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Context usage" }),
+      /* @__PURE__ */ jsxs("span", { className: cn("font-semibold tabular-nums", textTone(pct)), children: [
+        pct,
+        "%"
+      ] })
+    ] }),
+    model && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border pb-2", children: [
+      Glyph && /* @__PURE__ */ jsx(Glyph, { className: "size-4 shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "truncate font-medium", title: model, children: model })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx("div", { className: cn("h-full rounded-full", barTone(pct)), style: { width: `${pct}%` } }) }),
+      windowTokens ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Row, { label: "Window", value: `${compactTokens(usedTokens ?? 0)} / ${compactTokens(windowTokens)}` }),
+        /* @__PURE__ */ jsx(Row, { label: "Free", value: `${100 - pct}%` })
+      ] }) : /* @__PURE__ */ jsx(Row, { label: "Used", value: `${pct}%` }),
+      messageCount != null ? /* @__PURE__ */ jsx(Row, { label: "Messages", value: String(messageCount) }) : null
+    ] }),
+    (totalTokens > 0 || totalCost > 0 || budget) && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 border-t border-border pt-2", children: [
+      (totalTokens > 0 || totalCost > 0) && /* @__PURE__ */ jsx(
+        UsageTable,
+        {
+          rows: bucketRows(tokens, cost),
+          totalTokens,
+          totalCost,
+          showTokens: totalTokens > 0,
+          showCost: totalCost > 0
+        }
+      ),
+      (budget == null ? void 0 : budget.total) != null && budget.total > 0 ? /* @__PURE__ */ jsx(Row, { label: "Budget", value: `${formatCost(budget.used ?? 0)} / ${formatCost(budget.total)}` }) : (budget == null ? void 0 : budget.remaining) != null ? /* @__PURE__ */ jsx(Row, { label: "Budget left", value: formatCost(budget.remaining) }) : anyPositive(budget == null ? void 0 : budget.used) ? /* @__PURE__ */ jsx(Row, { label: "Budget", value: formatCost((budget == null ? void 0 : budget.used) ?? 0) }) : null
+    ] })
+  ] }) });
+}
+export {
+  ContextMeter
+};
+//# sourceMappingURL=ContextMeter.js.map

package/dist/data/chat/ContextMeter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMeter.js","sources":["../../../src/data/chat/ContextMeter.tsx"],"sourcesContent":["import { cn } from \"../../lib/utils\";\nimport { compactTokens, formatCost } from \"../../lib/tokens\";\nimport type { StaticIconComponent } from \"../Icon\";\nimport { HoverCard } from \"../../overlay/HoverCard\";\n\nexport type ContextMeterMode = \"bar\" | \"gauge\";\n\nexport type ContextMeterTokens = {\n  input?: number | undefined;\n  output?: number | undefined;\n  reasoning?: number | undefined;\n  cacheRead?: number | undefined;\n  cacheWrite?: number | undefined;\n  total?: number | undefined;\n};\n\nexport type ContextMeterCost = {\n  input?: number | undefined;\n  output?: number | undefined;\n  reasoning?: number | undefined;\n  cacheRead?: number | undefined;\n  cacheWrite?: number | undefined;\n  total?: number | undefined;\n};\n\nexport type ContextMeterBudget = {\n  used?: number | undefined;\n  total?: number | undefined;\n  remaining?: number | undefined;\n};\n\nexport type ContextMeterProps = {\n  /** Trigger shape: a compact `bar` (session header) or a circular `gauge`\n   *  (chat toolbar). Both open the same hover popover. */\n  mode?: ContextMeterMode;\n  /** Share of the context window used, 0–100 — drives the fill and tone. */\n  usedPercent: number;\n  /** Context-window tokens shown in the popover. */\n  usedTokens?: number | undefined;\n  windowTokens?: number | undefined;\n  /** Message count shown in the popover (chat). */\n  messageCount?: number | undefined;\n  /** Model id/label and its brand glyph. */\n  model?: string | undefined;\n  modelIcon?: StaticIconComponent | undefined;\n  /** Per-bucket token counts for the popover breakdown. */\n  tokens?: ContextMeterTokens | undefined;\n  /** Per-bucket costs (USD) for the popover breakdown. */\n  cost?: ContextMeterCost | undefined;\n  budget?: ContextMeterBudget | undefined;\n  className?: string | undefined;\n};\n\nfunction barTone(pct: number): string {\n  return pct > 80 ? \"bg-red-500\" : pct > 50 ? \"bg-amber-500\" : \"bg-emerald-500\";\n}\n\nfunction ringTone(pct: number): string {\n  return pct > 80 ? \"text-red-500\" : pct > 50 ? \"text-amber-500\" : \"text-emerald-500\";\n}\n\nfunction textTone(pct: number): string {\n  return pct > 80\n    ? \"text-red-600 [[data-theme=dark]_&]:text-red-400\"\n    : pct > 50\n      ? \"text-amber-600 [[data-theme=dark]_&]:text-amber-400\"\n      : \"text-emerald-600 [[data-theme=dark]_&]:text-emerald-400\";\n}\n\nfunction Row({ label, value }: { label: string; value: string }) {\n  return (\n    <div className=\"flex justify-between gap-4\">\n      <span className=\"text-muted-foreground\">{label}</span>\n      <span className=\"font-medium tabular-nums\">{value}</span>\n    </div>\n  );\n}\n\nfunction anyPositive(...values: (number | undefined)[]): boolean {\n  return values.some((v) => v != null && v > 0);\n}\n\ntype BucketRow = { label: string; tokens?: number | undefined; cost?: number | undefined };\n\n/** One row per token/cost bucket, kept only when it carries a token or cost\n *  value. Cache stays split into read and write on both axes. */\nfunction bucketRows(tokens?: ContextMeterTokens, cost?: ContextMeterCost): BucketRow[] {\n  const rows: BucketRow[] = [\n    { label: \"Input\", tokens: tokens?.input, cost: cost?.input },\n    { label: \"Output\", tokens: tokens?.output, cost: cost?.output },\n    { label: \"Reasoning\", tokens: tokens?.reasoning, cost: cost?.reasoning },\n    { label: \"Cache read\", tokens: tokens?.cacheRead, cost: cost?.cacheRead },\n    { label: \"Cache write\", tokens: tokens?.cacheWrite, cost: cost?.cacheWrite },\n  ];\n  return rows.filter((row) => (row.tokens ?? 0) > 0 || (row.cost ?? 0) > 0);\n}\n\nfunction UsageTable({\n  rows,\n  totalTokens,\n  totalCost,\n  showTokens,\n  showCost,\n}: {\n  rows: BucketRow[];\n  totalTokens: number;\n  totalCost: number;\n  showTokens: boolean;\n  showCost: boolean;\n}) {\n  const numCell = \"px-1 py-0.5 text-right tabular-nums\";\n  return (\n    <table className=\"w-full border-collapse\">\n      <thead>\n        <tr className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">\n          <th className=\"px-1 py-0.5 text-left font-medium\" />\n          {showTokens && <th className=\"px-1 py-0.5 text-right font-medium\">Tokens</th>}\n          {showCost && <th className=\"px-1 py-0.5 text-right font-medium\">Cost</th>}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((row) => (\n          <tr key={row.label}>\n            <td className=\"px-1 py-0.5 text-left text-muted-foreground\">{row.label}</td>\n            {showTokens && (\n              <td className={numCell}>\n                {row.tokens ? compactTokens(row.tokens) : <span className=\"text-muted-foreground/50\">—</span>}\n              </td>\n            )}\n            {showCost && (\n              <td className={numCell}>\n                {row.cost ? formatCost(row.cost) : <span className=\"text-muted-foreground/50\">—</span>}\n              </td>\n            )}\n          </tr>\n        ))}\n        <tr className=\"border-t border-border font-medium\">\n          <td className=\"px-1 py-0.5 text-left\">Total</td>\n          {showTokens && <td className={numCell}>{compactTokens(totalTokens)}</td>}\n          {showCost && <td className={numCell}>{formatCost(totalCost)}</td>}\n        </tr>\n      </tbody>\n    </table>\n  );\n}\n\n/** Unified context-window meter. Renders as a compact progress `bar` or a\n *  circular `gauge`; hovering or focusing it opens a popover with the model, the\n *  context-window breakdown, per-bucket token usage and the cost + budget\n *  detail. Domain-agnostic — callers feed plain numbers. */\nexport function ContextMeter({\n  mode = \"bar\",\n  usedPercent,\n  usedTokens,\n  windowTokens,\n  messageCount,\n  model,\n  modelIcon: Glyph,\n  tokens,\n  cost,\n  budget,\n  className,\n}: ContextMeterProps) {\n  const pct = Math.min(100, Math.max(0, Math.round(usedPercent)));\n  const totalTokens = tokens?.total ?? 0;\n  const totalCost = cost?.total ?? 0;\n\n  const trigger =\n    mode === \"gauge\" ? (\n      <span\n        className={cn(\n          \"inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground\",\n          className,\n        )}\n        aria-label={`Context ${pct}% used`}\n      >\n        {Glyph && <Glyph className=\"size-3.5 shrink-0\" />}\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" className={cn(\"shrink-0\", ringTone(pct))}>\n          <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" opacity=\"0.15\" />\n          <circle\n            cx=\"10\"\n            cy=\"10\"\n            r=\"8\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2.5\"\n            strokeDasharray={2 * Math.PI * 8}\n            strokeDashoffset={(1 - pct / 100) * 2 * Math.PI * 8}\n            strokeLinecap=\"round\"\n            transform=\"rotate(-90 10 10)\"\n          />\n          <text x=\"10\" y=\"10\" textAnchor=\"middle\" dominantBaseline=\"central\" fontSize=\"6\" fill=\"currentColor\" fontWeight=\"600\">\n            {pct}\n          </text>\n        </svg>\n      </span>\n    ) : (\n      <span\n        className={cn(\n          \"inline-flex items-center gap-1.5 rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground\",\n          className,\n        )}\n        aria-label={`Context ${pct}% used`}\n      >\n        <span className=\"shrink-0\">ctx</span>\n        <span className=\"h-1.5 w-16 overflow-hidden rounded-full bg-muted\">\n          <span className={cn(\"block h-full rounded-full transition-all\", barTone(pct))} style={{ width: `${pct}%` }} />\n        </span>\n        <span className={cn(\"shrink-0 font-medium tabular-nums\", textTone(pct))}>{pct}%</span>\n      </span>\n    );\n\n  return (\n    <HoverCard trigger={trigger} placement=\"bottom\" cardClassName=\"w-72 p-3\">\n      <div className=\"space-y-2.5 text-xs\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <span className=\"font-semibold\">Context usage</span>\n          <span className={cn(\"font-semibold tabular-nums\", textTone(pct))}>{pct}%</span>\n        </div>\n\n        {model && (\n          <div className=\"flex items-center gap-2 border-b border-border pb-2\">\n            {Glyph && <Glyph className=\"size-4 shrink-0\" />}\n            <span className=\"truncate font-medium\" title={model}>\n              {model}\n            </span>\n          </div>\n        )}\n\n        <div className=\"space-y-1.5\">\n          <div className=\"h-1.5 overflow-hidden rounded-full bg-muted\">\n            <div className={cn(\"h-full rounded-full\", barTone(pct))} style={{ width: `${pct}%` }} />\n          </div>\n          {windowTokens ? (\n            <>\n              <Row label=\"Window\" value={`${compactTokens(usedTokens ?? 0)} / ${compactTokens(windowTokens)}`} />\n              <Row label=\"Free\" value={`${100 - pct}%`} />\n            </>\n          ) : (\n            <Row label=\"Used\" value={`${pct}%`} />\n          )}\n          {messageCount != null ? <Row label=\"Messages\" value={String(messageCount)} /> : null}\n        </div>\n\n        {(totalTokens > 0 || totalCost > 0 || budget) && (\n          <div className=\"space-y-1.5 border-t border-border pt-2\">\n            {(totalTokens > 0 || totalCost > 0) && (\n              <UsageTable\n                rows={bucketRows(tokens, cost)}\n                totalTokens={totalTokens}\n                totalCost={totalCost}\n                showTokens={totalTokens > 0}\n                showCost={totalCost > 0}\n              />\n            )}\n            {budget?.total != null && budget.total > 0 ? (\n              <Row label=\"Budget\" value={`${formatCost(budget.used ?? 0)} / ${formatCost(budget.total)}`} />\n            ) : budget?.remaining != null ? (\n              <Row label=\"Budget left\" value={formatCost(budget.remaining)} />\n            ) : anyPositive(budget?.used) ? (\n              <Row label=\"Budget\" value={formatCost(budget?.used ?? 0)} />\n            ) : null}\n          </div>\n        )}\n      </div>\n    </HoverCard>\n  );\n}\n"],"names":[],"mappings":"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"}