@flanksource/clicky-ui 0.3.10 → 0.3.11

package/dist/data/chat/ContextUsage.cjs

@@ -1,99 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const utils = require("../../lib/utils.cjs");
-const DropdownMenu = require("../../overlay/DropdownMenu.cjs");
-function formatTokens(n) {
-  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
-  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}K`;
-  return String(n);
-}
-function tone(pct) {
-  return pct > 80 ? "text-red-500" : pct > 50 ? "text-amber-500" : "text-emerald-500";
-}
-function barTone(pct) {
-  return pct > 80 ? "bg-red-500" : pct > 50 ? "bg-amber-500" : "bg-emerald-500";
-}
-function ContextUsage({
-  usedTokens,
-  maxTokens,
-  messageCount,
-  modelLabel,
-  modelIcon: Glyph,
-  cost,
-  className = ""
-}) {
-  const pct = maxTokens > 0 ? Math.min(100, Math.round(usedTokens / maxTokens * 100)) : 0;
-  const radius = 8;
-  const circumference = 2 * Math.PI * radius;
-  const offset = circumference - pct / 100 * circumference;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenu.DropdownMenu,
-    {
-      align: "right",
-      className,
-      menuClassName: "w-64 p-3",
-      trigger: /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          title: "Context usage",
-          className: "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",
-          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", tone(pct)), children: [
-              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: radius, fill: "none", stroke: "currentColor", strokeWidth: "2.5", opacity: "0.15" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "circle",
-                {
-                  cx: "10",
-                  cy: "10",
-                  r: radius,
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2.5",
-                  strokeDasharray: circumference,
-                  strokeDashoffset: offset,
-                  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 })
-            ] })
-          ]
-        }
-      ),
-      children: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2.5 text-xs", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold", children: "Context Usage" }),
-        modelLabel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          Glyph && /* @__PURE__ */ jsxRuntime.jsx(Glyph, { className: "size-4 shrink-0" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: modelLabel })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Tokens" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-              formatTokens(usedTokens),
-              " / ",
-              formatTokens(maxTokens)
-            ] })
-          ] }),
-          /* @__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 transition-all", barTone(pct)), style: { width: `${pct}%` } }) })
-        ] }),
-        messageCount != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Messages" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: messageCount })
-        ] }),
-        cost != null && cost > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Est. cost" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            "$",
-            cost < 0.01 ? cost.toFixed(4) : cost.toFixed(2)
-          ] })
-        ] })
-      ] })
-    }
-  );
-}
-exports.ContextUsage = ContextUsage;
-//# sourceMappingURL=ContextUsage.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ContextUsage.cjs","sources":["../../../src/data/chat/ContextUsage.tsx"],"sourcesContent":["import type { ComponentType } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { DropdownMenu } from \"../../overlay/DropdownMenu\";\n\nexport type ContextUsageProps = {\n  usedTokens: number;\n  maxTokens: number;\n  messageCount?: number;\n  modelLabel?: string;\n  /** Optional model glyph rendered beside the label. */\n  modelIcon?: ComponentType<{ className?: string }>;\n  cost?: number;\n  className?: string;\n};\n\nfunction formatTokens(n: number): string {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;\n  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;\n  return String(n);\n}\n\nfunction tone(pct: number): string {\n  return pct > 80 ? \"text-red-500\" : pct > 50 ? \"text-amber-500\" : \"text-emerald-500\";\n}\n\nfunction barTone(pct: number): string {\n  return pct > 80 ? \"bg-red-500\" : pct > 50 ? \"bg-amber-500\" : \"bg-emerald-500\";\n}\n\n/** A compact token/cost gauge: a circular percentage indicator that opens a\n *  popover with the model, token usage and estimated cost. Display-only — the\n *  caller feeds the numbers (clicky's backend does not yet emit token usage, so\n *  wiring real values is a follow-on). */\nexport function ContextUsage({\n  usedTokens,\n  maxTokens,\n  messageCount,\n  modelLabel,\n  modelIcon: Glyph,\n  cost,\n  className = \"\",\n}: ContextUsageProps) {\n  const pct = maxTokens > 0 ? Math.min(100, Math.round((usedTokens / maxTokens) * 100)) : 0;\n  const radius = 8;\n  const circumference = 2 * Math.PI * radius;\n  const offset = circumference - (pct / 100) * circumference;\n\n  return (\n    <DropdownMenu\n      align=\"right\"\n      className={className}\n      menuClassName=\"w-64 p-3\"\n      trigger={\n        <button\n          type=\"button\"\n          title=\"Context usage\"\n          className=\"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        >\n          {Glyph && <Glyph className=\"size-3.5 shrink-0\" />}\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" className={cn(\"shrink-0\", tone(pct))}>\n            <circle cx=\"10\" cy=\"10\" r={radius} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" opacity=\"0.15\" />\n            <circle\n              cx=\"10\"\n              cy=\"10\"\n              r={radius}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n              strokeDasharray={circumference}\n              strokeDashoffset={offset}\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        </button>\n      }\n    >\n      {() => (\n        <div className=\"space-y-2.5 text-xs\">\n          <div className=\"text-xs font-semibold\">Context Usage</div>\n          {modelLabel && (\n            <div className=\"flex items-center gap-2\">\n              {Glyph && <Glyph className=\"size-4 shrink-0\" />}\n              <span className=\"font-medium\">{modelLabel}</span>\n            </div>\n          )}\n          <div>\n            <div className=\"mb-1 flex justify-between\">\n              <span className=\"text-muted-foreground\">Tokens</span>\n              <span>\n                {formatTokens(usedTokens)} / {formatTokens(maxTokens)}\n              </span>\n            </div>\n            <div className=\"h-1.5 overflow-hidden rounded-full bg-muted\">\n              <div className={cn(\"h-full rounded-full transition-all\", barTone(pct))} style={{ width: `${pct}%` }} />\n            </div>\n          </div>\n          {messageCount != null && (\n            <div className=\"flex justify-between\">\n              <span className=\"text-muted-foreground\">Messages</span>\n              <span>{messageCount}</span>\n            </div>\n          )}\n          {cost != null && cost > 0 && (\n            <div className=\"flex justify-between\">\n              <span className=\"text-muted-foreground\">Est. cost</span>\n              <span>${cost < 0.01 ? cost.toFixed(4) : cost.toFixed(2)}</span>\n            </div>\n          )}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n"],"names":["jsx","DropdownMenu","jsxs","cn"],"mappings":"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"}

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

@@ -1,19 +0,0 @@
-import { ComponentType } from 'react';
-export type ContextUsageProps = {
-    usedTokens: number;
-    maxTokens: number;
-    messageCount?: number;
-    modelLabel?: string;
-    /** Optional model glyph rendered beside the label. */
-    modelIcon?: ComponentType<{
-        className?: string;
-    }>;
-    cost?: number;
-    className?: string;
-};
-/** A compact token/cost gauge: a circular percentage indicator that opens a
- *  popover with the model, token usage and estimated cost. Display-only — the
- *  caller feeds the numbers (clicky's backend does not yet emit token usage, so
- *  wiring real values is a follow-on). */
-export declare function ContextUsage({ usedTokens, maxTokens, messageCount, modelLabel, modelIcon: Glyph, cost, className, }: ContextUsageProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ContextUsage.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ContextUsage.d.ts","sourceRoot":"","sources":["../../../src/data/chat/ContextUsage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI3C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgBF;;;0CAG0C;AAC1C,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAS,EAAE,KAAK,EAChB,IAAI,EACJ,SAAc,GACf,EAAE,iBAAiB,2CA2EnB"}

package/dist/data/chat/ContextUsage.js

@@ -1,99 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../../lib/utils.js";
-import { DropdownMenu } from "../../overlay/DropdownMenu.js";
-function formatTokens(n) {
-  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
-  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}K`;
-  return String(n);
-}
-function tone(pct) {
-  return pct > 80 ? "text-red-500" : pct > 50 ? "text-amber-500" : "text-emerald-500";
-}
-function barTone(pct) {
-  return pct > 80 ? "bg-red-500" : pct > 50 ? "bg-amber-500" : "bg-emerald-500";
-}
-function ContextUsage({
-  usedTokens,
-  maxTokens,
-  messageCount,
-  modelLabel,
-  modelIcon: Glyph,
-  cost,
-  className = ""
-}) {
-  const pct = maxTokens > 0 ? Math.min(100, Math.round(usedTokens / maxTokens * 100)) : 0;
-  const radius = 8;
-  const circumference = 2 * Math.PI * radius;
-  const offset = circumference - pct / 100 * circumference;
-  return /* @__PURE__ */ jsx(
-    DropdownMenu,
-    {
-      align: "right",
-      className,
-      menuClassName: "w-64 p-3",
-      trigger: /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          title: "Context usage",
-          className: "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",
-          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", tone(pct)), children: [
-              /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: radius, fill: "none", stroke: "currentColor", strokeWidth: "2.5", opacity: "0.15" }),
-              /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  cx: "10",
-                  cy: "10",
-                  r: radius,
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2.5",
-                  strokeDasharray: circumference,
-                  strokeDashoffset: offset,
-                  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 })
-            ] })
-          ]
-        }
-      ),
-      children: () => /* @__PURE__ */ jsxs("div", { className: "space-y-2.5 text-xs", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold", children: "Context Usage" }),
-        modelLabel && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          Glyph && /* @__PURE__ */ jsx(Glyph, { className: "size-4 shrink-0" }),
-          /* @__PURE__ */ jsx("span", { className: "font-medium", children: modelLabel })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs("div", { className: "mb-1 flex justify-between", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Tokens" }),
-            /* @__PURE__ */ jsxs("span", { children: [
-              formatTokens(usedTokens),
-              " / ",
-              formatTokens(maxTokens)
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx("div", { className: cn("h-full rounded-full transition-all", barTone(pct)), style: { width: `${pct}%` } }) })
-        ] }),
-        messageCount != null && /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Messages" }),
-          /* @__PURE__ */ jsx("span", { children: messageCount })
-        ] }),
-        cost != null && cost > 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Est. cost" }),
-          /* @__PURE__ */ jsxs("span", { children: [
-            "$",
-            cost < 0.01 ? cost.toFixed(4) : cost.toFixed(2)
-          ] })
-        ] })
-      ] })
-    }
-  );
-}
-export {
-  ContextUsage
-};
-//# sourceMappingURL=ContextUsage.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ContextUsage.js","sources":["../../../src/data/chat/ContextUsage.tsx"],"sourcesContent":["import type { ComponentType } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { DropdownMenu } from \"../../overlay/DropdownMenu\";\n\nexport type ContextUsageProps = {\n  usedTokens: number;\n  maxTokens: number;\n  messageCount?: number;\n  modelLabel?: string;\n  /** Optional model glyph rendered beside the label. */\n  modelIcon?: ComponentType<{ className?: string }>;\n  cost?: number;\n  className?: string;\n};\n\nfunction formatTokens(n: number): string {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;\n  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;\n  return String(n);\n}\n\nfunction tone(pct: number): string {\n  return pct > 80 ? \"text-red-500\" : pct > 50 ? \"text-amber-500\" : \"text-emerald-500\";\n}\n\nfunction barTone(pct: number): string {\n  return pct > 80 ? \"bg-red-500\" : pct > 50 ? \"bg-amber-500\" : \"bg-emerald-500\";\n}\n\n/** A compact token/cost gauge: a circular percentage indicator that opens a\n *  popover with the model, token usage and estimated cost. Display-only — the\n *  caller feeds the numbers (clicky's backend does not yet emit token usage, so\n *  wiring real values is a follow-on). */\nexport function ContextUsage({\n  usedTokens,\n  maxTokens,\n  messageCount,\n  modelLabel,\n  modelIcon: Glyph,\n  cost,\n  className = \"\",\n}: ContextUsageProps) {\n  const pct = maxTokens > 0 ? Math.min(100, Math.round((usedTokens / maxTokens) * 100)) : 0;\n  const radius = 8;\n  const circumference = 2 * Math.PI * radius;\n  const offset = circumference - (pct / 100) * circumference;\n\n  return (\n    <DropdownMenu\n      align=\"right\"\n      className={className}\n      menuClassName=\"w-64 p-3\"\n      trigger={\n        <button\n          type=\"button\"\n          title=\"Context usage\"\n          className=\"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        >\n          {Glyph && <Glyph className=\"size-3.5 shrink-0\" />}\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" className={cn(\"shrink-0\", tone(pct))}>\n            <circle cx=\"10\" cy=\"10\" r={radius} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" opacity=\"0.15\" />\n            <circle\n              cx=\"10\"\n              cy=\"10\"\n              r={radius}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n              strokeDasharray={circumference}\n              strokeDashoffset={offset}\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        </button>\n      }\n    >\n      {() => (\n        <div className=\"space-y-2.5 text-xs\">\n          <div className=\"text-xs font-semibold\">Context Usage</div>\n          {modelLabel && (\n            <div className=\"flex items-center gap-2\">\n              {Glyph && <Glyph className=\"size-4 shrink-0\" />}\n              <span className=\"font-medium\">{modelLabel}</span>\n            </div>\n          )}\n          <div>\n            <div className=\"mb-1 flex justify-between\">\n              <span className=\"text-muted-foreground\">Tokens</span>\n              <span>\n                {formatTokens(usedTokens)} / {formatTokens(maxTokens)}\n              </span>\n            </div>\n            <div className=\"h-1.5 overflow-hidden rounded-full bg-muted\">\n              <div className={cn(\"h-full rounded-full transition-all\", barTone(pct))} style={{ width: `${pct}%` }} />\n            </div>\n          </div>\n          {messageCount != null && (\n            <div className=\"flex justify-between\">\n              <span className=\"text-muted-foreground\">Messages</span>\n              <span>{messageCount}</span>\n            </div>\n          )}\n          {cost != null && cost > 0 && (\n            <div className=\"flex justify-between\">\n              <span className=\"text-muted-foreground\">Est. cost</span>\n              <span>${cost < 0.01 ? cost.toFixed(4) : cost.toFixed(2)}</span>\n            </div>\n          )}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n"],"names":[],"mappings":"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"}