hermium 0.2.0 → 0.3.1

package/dist/server/_ssr/usage-Bs2-LXGz.mjs

@@ -0,0 +1,298 @@
+import { j as jsxRuntimeExports, r as reactExports } from "../_libs/react.mjs";
+import { r as request } from "./router-CUAfx91O.mjs";
+import "../_libs/tanstack__react-router.mjs";
+import "../_libs/tanstack__router-core.mjs";
+import "../_libs/tanstack__history.mjs";
+import "node:stream/web";
+import "node:stream";
+import "../_libs/react-dom.mjs";
+import "util";
+import "crypto";
+import "async_hooks";
+import "stream";
+import "../_libs/isbot.mjs";
+import "../_libs/clsx.mjs";
+import "../_libs/tailwind-merge.mjs";
+import "../_libs/class-variance-authority.mjs";
+import "../_libs/zustand.mjs";
+import "../_libs/tabler__icons-react.mjs";
+import "../_libs/base-ui__react.mjs";
+import "../_libs/base-ui__utils.mjs";
+import "../_libs/use-sync-external-store.mjs";
+import "../_libs/floating-ui__utils.mjs";
+import "../_libs/floating-ui__react-dom.mjs";
+import "../_libs/floating-ui__dom.mjs";
+import "../_libs/floating-ui__core.mjs";
+async function fetchUsageStats(days = 30) {
+  const params = new URLSearchParams({ days: String(days) });
+  return request(`/api/hermes/usage/stats?${params}`);
+}
+const MODEL_COLORS = ["#4fd1c5", "#63b3ed", "#f6ad55", "#b794f4", "#68d391", "#fc8181", "#f687b3", "#90cdf4", "#fbd38d", "#9ae6b4"];
+function normalizeModel(model) {
+  return (model || "").trim() || "unknown";
+}
+function getModelColor(model) {
+  const normalized = normalizeModel(model);
+  let hash = 0;
+  for (let i = 0; i < normalized.length; i++) {
+    hash = (hash << 5) - hash + normalized.charCodeAt(i);
+    hash |= 0;
+  }
+  return MODEL_COLORS[Math.abs(hash) % MODEL_COLORS.length];
+}
+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 formatCost(n) {
+  if (n === 0) return "$0.00";
+  if (n < 0.01) return "<$0.01";
+  return "$" + n.toFixed(2);
+}
+function percent(part, total) {
+  if (total <= 0) return 0;
+  return part / total * 100;
+}
+function cacheHitRate(input, cacheRead) {
+  const total = input + cacheRead;
+  if (total === 0) return "--";
+  return (cacheRead / total * 100).toFixed(1) + "%";
+}
+function useUsageStats(days = 30) {
+  const [stats, setStats] = reactExports.useState(null);
+  const [loading, setLoading] = reactExports.useState(false);
+  reactExports.useEffect(() => {
+    setLoading(true);
+    fetchUsageStats(days).then(setStats).catch(console.error).finally(() => setLoading(false));
+  }, [days]);
+  return {
+    stats,
+    loading
+  };
+}
+function StatCard({
+  label,
+  value,
+  sub
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-muted-foreground mb-1", children: label }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xl font-semibold", children: value }),
+    sub && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[11px] text-muted-foreground mt-1", children: sub })
+  ] });
+}
+function StatCards({
+  stats
+}) {
+  const totalTokens = stats.total_input_tokens + stats.total_output_tokens;
+  const totalCache = stats.total_cache_read_tokens;
+  const cacheRate = totalTokens + totalCache > 0 ? (totalCache / (stats.total_input_tokens + totalCache) * 100).toFixed(1) + "%" : "--";
+  const daysWithActivity = stats.daily_usage.filter((d) => d.sessions > 0).length;
+  const avgPerDay = daysWithActivity > 0 ? (stats.total_sessions / daysWithActivity).toFixed(1) : "0.0";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-3 mb-5", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(StatCard, { label: "Total Tokens", value: formatTokens(totalTokens), sub: `${formatTokens(stats.total_input_tokens)} input / ${formatTokens(stats.total_output_tokens)} output` }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(StatCard, { label: "Total Sessions", value: String(stats.total_sessions), sub: `${avgPerDay} avg/day` }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(StatCard, { label: "Estimated Cost", value: formatCost(stats.total_cost ?? 0) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(StatCard, { label: "Cache Hit Rate", value: cacheRate, sub: totalCache > 0 ? `${formatTokens(totalCache)} tokens` : void 0 })
+  ] });
+}
+function DailyTrend({
+  stats
+}) {
+  const daily = reactExports.useMemo(() => {
+    return (stats.daily_usage ?? []).map((d) => {
+      const visual = d.input_tokens + d.output_tokens + d.cache_read_tokens;
+      return {
+        ...d,
+        visualTokens: visual,
+        inputPercent: percent(d.input_tokens, visual),
+        outputPercent: percent(d.output_tokens, visual),
+        cachePercent: percent(d.cache_read_tokens, visual)
+      };
+    });
+  }, [stats]);
+  const maxTokens = reactExports.useMemo(() => Math.max(...daily.map((d) => d.visualTokens), 1), [daily]);
+  if (daily.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-lg border bg-card p-4 mb-5", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold text-secondary-foreground mb-3", children: "Daily Trend" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-0.5 mb-2", children: daily.map((d) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0 flex flex-col items-center relative group", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full h-36 bg-muted/40 rounded-t-sm flex items-end overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full flex flex-col-reverse justify-start transition-all", style: {
+        height: `${d.visualTokens / maxTokens * 100}%`
+      }, children: [
+        d.output_tokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full bg-emerald-500/80", style: {
+          height: `${d.outputPercent}%`
+        } }),
+        d.input_tokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full bg-indigo-500/80", style: {
+          height: `${d.inputPercent}%`
+        } }),
+        d.cache_read_tokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full bg-amber-400/80", style: {
+          height: `${d.cachePercent}%`
+        } })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "hidden group-hover:block absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 bg-popover text-popover-foreground text-[11px] whitespace-nowrap z-10 rounded-md border px-2 py-1.5 shadow-md", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold mb-0.5", children: d.date }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          "Input: ",
+          formatTokens(d.input_tokens)
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          "Output: ",
+          formatTokens(d.output_tokens)
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          "Cache read: ",
+          formatTokens(d.cache_read_tokens)
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          "Cache write: ",
+          formatTokens(d.cache_write_tokens)
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          "Hit rate: ",
+          cacheHitRate(d.input_tokens, d.cache_read_tokens)
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          "Sessions: ",
+          d.sessions
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          "Cost: ",
+          formatCost(d.cost ?? 0)
+        ] })
+      ] })
+    ] }, d.date)) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between text-[10px] text-muted-foreground mb-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: daily[0]?.date.slice(5) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: daily[daily.length - 1]?.date.slice(5) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground mb-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-2 h-2 rounded-sm bg-indigo-500/80" }),
+        " Input"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-2 h-2 rounded-sm bg-emerald-500/80" }),
+        " Output"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-2 h-2 rounded-sm bg-amber-400/80" }),
+        " Cache read"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { className: "w-full text-[11px] border-collapse", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { className: "text-muted-foreground text-left", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "pb-1.5 pr-2 font-medium", children: "Date" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "pb-1.5 pr-2 font-medium text-right", children: "Input" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "pb-1.5 pr-2 font-medium text-right", children: "Output" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "pb-1.5 pr-2 font-medium text-right", children: "Cache read" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "pb-1.5 pr-2 font-medium text-right", children: "Cache write" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "pb-1.5 pr-2 font-medium text-right", children: "Hit rate" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "pb-1.5 pr-2 font-medium text-right", children: "Sessions" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "pb-1.5 pr-2 font-medium text-right", children: "Cost" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: [...daily].reverse().map((d) => /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { className: "border-t", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "py-1.5 pr-2", children: d.date }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "py-1.5 pr-2 text-right", children: formatTokens(d.input_tokens) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "py-1.5 pr-2 text-right", children: formatTokens(d.output_tokens) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "py-1.5 pr-2 text-right", children: formatTokens(d.cache_read_tokens) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "py-1.5 pr-2 text-right", children: formatTokens(d.cache_write_tokens) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "py-1.5 pr-2 text-right", children: cacheHitRate(d.input_tokens, d.cache_read_tokens) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "py-1.5 pr-2 text-right", children: d.sessions }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "py-1.5 pr-2 text-right", children: formatCost(d.cost ?? 0) })
+      ] }, d.date)) })
+    ] }) })
+  ] });
+}
+function ModelBreakdown({
+  stats
+}) {
+  const models = reactExports.useMemo(() => {
+    return (stats.model_usage ?? []).map((m) => {
+      const total = m.input_tokens + m.output_tokens;
+      const visual = total + m.cache_read_tokens;
+      return {
+        model: normalizeModel(m.model),
+        inputTokens: m.input_tokens,
+        outputTokens: m.output_tokens,
+        cacheTokens: m.cache_read_tokens,
+        cacheWriteTokens: m.cache_write_tokens,
+        totalTokens: total,
+        visualTokens: visual,
+        sessions: m.sessions,
+        color: getModelColor(m.model),
+        inputPercent: percent(m.input_tokens, visual),
+        outputPercent: percent(m.output_tokens, visual),
+        cachePercent: percent(m.cache_read_tokens, visual)
+      };
+    }).sort((a, b) => b.visualTokens - a.visualTokens);
+  }, [stats]);
+  const maxTokens = reactExports.useMemo(() => Math.max(...models.map((m) => m.visualTokens), 1), [models]);
+  if (models.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-lg border bg-card p-4 mb-5", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold text-secondary-foreground mb-3", children: "Model Breakdown" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground mb-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-2 h-2 rounded-sm bg-indigo-500/80" }),
+        " Input"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-2 h-2 rounded-sm bg-emerald-500/80" }),
+        " Output"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-2 h-2 rounded-sm bg-amber-400/80" }),
+        " Cache read"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-2", children: models.map((m) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2.5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-2 h-2 rounded-sm shrink-0", style: {
+        background: m.color
+      } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-mono text-secondary-foreground w-32 shrink-0 truncate", title: m.model, children: m.model }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 h-4 bg-muted/40 rounded-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full flex min-w-[2px] transition-all", style: {
+        width: `${m.visualTokens / maxTokens * 100}%`
+      }, children: [
+        m.inputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full bg-indigo-500/80", style: {
+          width: `${m.inputPercent}%`
+        } }),
+        m.outputTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full bg-emerald-500/80", style: {
+          width: `${m.outputPercent}%`
+        } }),
+        m.cacheTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full bg-amber-400/80", style: {
+          width: `${m.cachePercent}%`
+        } })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-muted-foreground w-20 text-right shrink-0", children: [
+        formatTokens(m.totalTokens),
+        m.cacheTokens > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[10px] text-amber-500 ml-1", children: [
+          "+",
+          formatTokens(m.cacheTokens)
+        ] })
+      ] })
+    ] }, m.model)) })
+  ] });
+}
+function UsagePage() {
+  const {
+    stats,
+    loading
+  } = useUsageStats(30);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto p-4 md:p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mx-auto max-w-5xl", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { className: "mb-5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-lg font-semibold", children: "Usage" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Token consumption and cost estimates over the last 30 days." })
+    ] }),
+    loading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-muted-foreground py-8", children: "Loading usage stats…" }),
+    !loading && !stats && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-muted-foreground py-8", children: "Failed to load usage data." }),
+    !loading && stats && stats.total_sessions === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-muted-foreground py-8", children: "No usage data yet." }),
+    !loading && stats && stats.total_sessions > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(StatCards, { stats }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ModelBreakdown, { stats }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(DailyTrend, { stats })
+    ] })
+  ] }) });
+}
+export {
+  UsagePage as component
+};

package/dist/server/_tanstack-start-manifest_v-C7Upe2TI.mjs

@@ -0,0 +1,4 @@
+const tsrStartManifest = () => ({ routes: { __root__: { filePath: "/home/abbskhnv/Desktop/hermium-new/packages/web/src/routes/__root.tsx", children: ["/", "/memory", "/settings", "/skills", "/usage", "/chat/$sessionId", "/chat/"], assets: [{ tag: "link", attrs: { rel: "stylesheet", href: "/assets/css/index-Dfs9RUU9.css", type: "text/css" } }], preloads: ["/assets/js/index-BDLsrzTe.js", "/assets/js/base-ui-Ls-HE_Zl.js", "/assets/js/router-B8BATVn7.js"] }, "/": { filePath: "/home/abbskhnv/Desktop/hermium-new/packages/web/src/routes/index.tsx", children: void 0, assets: [], preloads: ["/assets/js/index-DRH0t4ti.js", "/assets/js/ChatInputBlock-BgJMx5nW.js"] }, "/memory": { filePath: "/home/abbskhnv/Desktop/hermium-new/packages/web/src/routes/memory.tsx", children: void 0, assets: [], preloads: ["/assets/js/memory-CHpNNtU2.js", "/assets/js/MarkdownMessage-Dd6VsKhk.js"] }, "/settings": { filePath: "/home/abbskhnv/Desktop/hermium-new/packages/web/src/routes/settings.tsx", children: void 0, assets: [], preloads: ["/assets/js/settings-CRV3Pp8x.js"] }, "/skills": { filePath: "/home/abbskhnv/Desktop/hermium-new/packages/web/src/routes/skills.tsx", children: void 0, assets: [], preloads: ["/assets/js/skills-C8G72gXr.js", "/assets/js/MarkdownMessage-Dd6VsKhk.js"] }, "/usage": { filePath: "/home/abbskhnv/Desktop/hermium-new/packages/web/src/routes/usage.tsx", children: void 0, assets: [], preloads: ["/assets/js/usage-Bev8hqwh.js"] }, "/chat/$sessionId": { filePath: "/home/abbskhnv/Desktop/hermium-new/packages/web/src/routes/chat.$sessionId.tsx", children: void 0, assets: [], preloads: ["/assets/js/chat._sessionId-Yif-J0_7.js", "/assets/js/MarkdownMessage-Dd6VsKhk.js", "/assets/js/ChatInputBlock-BgJMx5nW.js"] }, "/chat/": { filePath: "/home/abbskhnv/Desktop/hermium-new/packages/web/src/routes/chat.index.tsx", children: void 0, assets: [], preloads: ["/assets/js/chat.index-QgwoSqOs.js"] } }, clientEntry: "/assets/js/index-BDLsrzTe.js" });
+export {
+  tsrStartManifest
+};