usage-board 2.1.2 → 3.0.0

package/dist/server/index.mjs

@@ -1,14 +1,18 @@
-import process from 'node:process';globalThis._importMeta_={url:import.meta.url,env:process.env};export { Y as handler, Z as listener, _ as websocket } from './chunks/nitro/nitro.mjs';
-import 'node:os';
-import 'node:path';
-import 'node:fs';
-import 'node:fs/promises';
+import process from 'node:process';globalThis._importMeta_={url:import.meta.url,env:process.env};export { t as handler, v as listener, x as websocket } from './chunks/nitro/nitro.mjs';
 import 'node:http';
 import 'node:https';
 import 'node:events';
 import 'node:buffer';
+import 'node:fs';
+import 'node:path';
 import 'node:crypto';
+import 'node:sqlite';
 import 'node:url';
+import 'fs';
+import 'node:fs/promises';
+import 'node:stream';
+import 'node:string_decoder';
+import 'node:os';
 import 'node:util';
 import 'node:process';
 import 'node:tty';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "usage-board",
     "type": "module",
-    "version": "2.1.2",
+    "version": "3.0.0",
     "packageManager": "pnpm@10.33.0",
     "description": "An all-in-one dashboard to quickly analyze token usage from local json files",
     "license": "MIT",
@@ -27,7 +27,7 @@
         "dist"
     ],
     "scripts": {
-        "build": "nuxt build && tsdown && rm ./dist/nitro.json",
+        "build": "nuxt build && tsdown && rimraf ./dist/nitro.json",
         "dev": "nuxt dev",
         "generate": "nuxt generate",
         "preview": "nuxt preview",
@@ -36,7 +36,7 @@
         "lint:fix": "eslint --fix",
         "dev:cli": "tsdown -w",
         "test": "vitest",
-        "prepare": "simple-git-hooks",
+        "prepare": "nuxt prepare && simple-git-hooks",
         "prepublishOnly": "pnpm build"
     },
     "publishConfig": {
@@ -75,13 +75,14 @@
         "embla-carousel-vue": "^8.6.0",
         "eslint": "^10.2.0",
         "get-port-please": "^3.2.0",
-        "lint-staged": "^16.4.0",
         "lucide-vue-next": "^0.545.0",
+        "nano-staged": "^1.0.2",
         "nuxt": "^4.4.2",
         "open": "^11.0.0",
         "path-type": "^6.0.0",
         "picocolors": "^1.1.1",
         "reka-ui": "^2.9.5",
+        "rimraf": "^6.1.3",
         "shadcn-nuxt": "^2.6.2",
         "simple-git-hooks": "^2.13.1",
         "tailwind-merge": "^3.5.0",
@@ -101,10 +102,10 @@
         "zod": "3.25.76"
     },
     "simple-git-hooks": {
-        "pre-commit": "npx lint-staged",
+        "pre-commit": "npx nano-staged",
         "commit-msg": "node scripts/verify-commit.js"
     },
-    "lint-staged": {
+    "nano-staged": {
         "*": "eslint --fix"
     }
 }

package/dist/public/_nuxt/C6ydMk2z.js

@@ -1,25 +0,0 @@
-import{I as ne,S as ve,C as be,f as ue,z as he,A as ye,_ as xe,g as $,n as z}from"./chy2QJx0.js";import{z as ae,a1 as ke,a2 as _e,o as i,B as q,w as K,a as n,b as R,D as l,I as Y,c as b,S as U,t as m,K as A,J as I,h as s,a4 as ce,a8 as $e,Y as te}from"./Dn8cXZx3.js";const we={key:0,class:"pointer-events-none absolute inset-0 z-10"},Te={class:"mt-4 flex flex-wrap items-center justify-center gap-3 text-xs text-muted-foreground"},Me={class:"font-medium text-foreground tabular-nums"},Ce=288,De=ae({name:"StatisticalAnalysisModelUsagePanel",__name:"ModelUsagePanel",props:{monthlyItems:{},year:{}},setup(H){const g=H,B=["#2563eb","#f97316","#0891b2","#8b5cf6","#059669","#f43f5e"],k={bottom:32,left:56,right:12,top:8},F=[0,void 0],S=ke("chartRoot"),{width:P}=_e(S),w=ce(null),d=ce(null),T=s(()=>g.year??ge(g.monthlyItems)??new Date().getFullYear()),f=s(()=>Array.from({length:12},(e,r)=>{const u=`${r+1}`.padStart(2,"0");return`${T.value}-${u}`})),N=s(()=>[0,Math.max(f.value.length-1,0)]),p=s(()=>f.value.map((e,r)=>r)),G=s(()=>g.monthlyItems.filter(e=>e.month.startsWith(`${T.value}-`))),J=s(()=>Array.from(new Set(G.value.map(e=>e.model)))),j=s(()=>f.value.map((e,r)=>{const u=Object.fromEntries(J.value.map(c=>[c,G.value.find(v=>v.month===e&&v.model===c)?.tokenTotal??0]));return{month:e,monthIndex:r,tokensByModel:u,totalTokens:Object.values(u).reduce((c,v)=>c+v,0)}})),_=s(()=>J.value.map((e,r)=>{const u=ee(r),c=j.value.reduce((v,X)=>v+(X.tokensByModel[e]??0),0);return{color:u,model:e,totalLabel:$(c),totalTokens:c}}).sort((e,r)=>r.totalTokens-e.totalTokens)),O=s(()=>_.value.map(e=>r=>r.tokensByModel[e.model]??0)),Q=s(()=>Object.fromEntries(_.value.map(e=>[e.model,{color:e.color,label:e.model}]))),Z=s(()=>_.value.map(e=>`
-    <linearGradient id="${re(e.model)}" x1="0" y1="0" x2="0" y2="1">
-        <stop offset="0%" stop-color="${e.color}" stop-opacity="0.45" />
-        <stop offset="100%" stop-color="${e.color}" stop-opacity="0.08" />
-    </linearGradient>
-`).join("")),V=s(()=>j.value.length>0&&_.value.length>0),L=s(()=>k.left),M=s(()=>k.top),C=s(()=>Math.max(P.value-k.left-k.right,0)),D=s(()=>Math.max(Ce-k.top-k.bottom,0)),E=s(()=>M.value+D.value),t=s(()=>Math.max(...j.value.map(e=>e.totalTokens),0)),a=s(()=>{if(w.value===null||d.value===null)return null;const e=j.value[w.value];if(!e||C.value<=0||D.value<=0)return null;const r=f.value.length<=1?0:w.value/(f.value.length-1),u=L.value+r*C.value,c=le(d.value,M.value,E.value),X=(D.value<=0?0:1-(c-M.value)/D.value)*t.value;return{x:u,xLabel:me(e.month),y:c,yLabel:$(X)}});function h(e){return e.monthIndex}function o(e,r){const u=_.value[r];return u?`url(#${re(u.model)})`:ee(0)}function W(e,r){return _.value[r]?.color??ee(0)}function y(e,r){return _.value[r]?.color??ee(0)}function x(e){const r=_.value.map(u=>({...u,tokenTotal:e.tokensByModel[u.model]??0})).sort((u,c)=>c.tokenTotal-u.tokenTotal);return`
-        <div class="grid min-w-48 gap-2 rounded-md border bg-background px-3 py-2 text-xs shadow-lg">
-            <div class="font-medium text-foreground">${oe(e.month)} ${e.month.slice(0,4)}</div>
-            <div class="grid gap-1 text-muted-foreground">
-                ${r.map(u=>`
-                    <div class="flex items-center justify-between gap-4">
-                        <span class="flex items-center gap-2">
-                            <span class="size-2 rounded-sm" style="background-color: ${u.color}"></span>
-                            ${fe(u.model)}
-                        </span>
-                        <span class="font-mono font-medium text-foreground">${$(u.tokenTotal)}</span>
-                    </div>
-                `).join("")}
-            </div>
-            <div class="flex justify-between gap-4 border-t pt-2 text-muted-foreground">
-                <span>Total</span>
-                <span class="font-mono font-semibold text-foreground">${$(e.totalTokens)}</span>
-            </div>
-        </div>
-    `}function ie(e){if(e instanceof Date)return"";const r=f.value[e];return r?oe(r):""}function de(e){return e instanceof Date?"":$(e)}function oe(e){const[r,u]=e.split("-"),c=new Date(Number(r),Number(u)-1,1);return new Intl.DateTimeFormat("en-US",{month:"short"}).format(c)}function me(e){return`${oe(e)} ${e.slice(0,4)}`}function pe(e){const r=S.value?.getBoundingClientRect();if(!r)return;const u=e.clientX-r.left,c=e.clientY-r.top,v=L.value+C.value;if(u<L.value||u>v||c<M.value||c>E.value||C.value<=0||!V.value||f.value.length===0){se();return}const X=le((u-L.value)/Math.max(C.value,1),0,1);w.value=f.value.length<=1?0:Math.round(X*(f.value.length-1)),d.value=c}function se(){w.value=null,d.value=null}function ge(e){const u=[...e].sort((c,v)=>v.month.localeCompare(c.month))[0]?.month?.split("-")[0];return u?Number(u):null}function re(e){return`model-usage-${e.replace(/[^a-z0-9]+/gi,"-").toLowerCase()}`}function ee(e){return B[e%B.length]??"#2563eb"}function le(e,r,u){return Math.min(Math.max(e,r),u)}function fe(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}return(e,r)=>{const u=xe,c=ne;return i(),q(c,{description:"Monthly token trends by model",icon:"solar:cpu-line-duotone",title:"Model Usage"},{default:K(()=>[n("div",{ref_key:"chartRoot",ref:S,class:"relative",onPointerleave:se,onPointermove:pe},[R(u,{class:"h-72 w-full",config:l(Q)},{default:K(()=>[R(l(ve),{"auto-margin":!1,data:l(j),height:288,margin:k,"svg-defs":l(Z),"x-domain":l(N),"y-domain":F},{default:K(()=>[R(l(be),{color:o,line:!0,"line-color":W,"line-width":2.5,opacity:.82,x:h,y:l(O)},null,8,["y"]),R(l(ue),{"grid-line":!1,"tick-format":ie,"tick-values":l(p),type:"x"},null,8,["tick-values"]),R(l(ue),{"num-ticks":4,"tick-format":de,type:"y"}),l(V)?(i(),q(l(he),{key:0})):Y("",!0),l(V)?(i(),q(l(ye),{key:1,color:y,template:x,x:h,"y-stacked":l(O)},null,8,["y-stacked"])):Y("",!0)]),_:1},8,["data","svg-defs","x-domain"])]),_:1},8,["config"]),l(a)?(i(),b("div",we,[n("div",{class:"absolute border-l border-dashed border-border/80",style:U({height:`${l(D)}px`,left:`${l(a).x}px`,top:`${l(M)}px`})},null,4),n("div",{class:"absolute border-t border-dashed border-border/80",style:U({left:`${l(L)}px`,top:`${l(a).y}px`,width:`${l(C)}px`})},null,4),n("div",{class:"absolute rounded-sm bg-foreground px-2 py-1 text-[11px] font-medium text-background shadow-sm",style:U({left:`${l(a).x}px`,top:`${l(E)+6}px`,transform:"translateX(-50%)"})},m(l(a).xLabel),5),n("div",{class:"absolute rounded-sm bg-foreground px-2 py-1 text-[11px] font-medium text-background shadow-sm",style:U({left:`${Math.max(l(L)-8,0)}px`,top:`${l(a).y}px`,transform:"translate(-100%, -50%)"})},m(l(a).yLabel),5)])):Y("",!0)],544),n("div",Te,[(i(!0),b(I,null,A(l(_),v=>(i(),b("div",{key:v.model,class:"flex items-center gap-2"},[n("span",{class:"size-2.5 rounded-sm",style:U({backgroundColor:v.color})},null,4),n("span",null,m(v.model),1),n("span",Me,m(v.totalLabel),1)]))),128))])]),_:1})}}}),ut=Object.assign(De,{__name:"StatisticalAnalysisModelUsagePanel"}),Se={class:"space-y-3"},Le={class:"flex flex-col flex-1"},Ue={class:"truncate text-sm font-medium tracking-tight"},Be={class:"mt-1 truncate text-xs text-muted-foreground"},Pe={class:"text-right"},je={class:"text-xs font-medium tracking-tight tabular-nums"},Ae={class:"mt-1 flex items-center justify-end gap-1"},Ie=ae({name:"StatisticalAnalysisProjectUsagePanel",__name:"ProjectUsagePanel",props:{items:{}},setup(H){const g=H,B=[{trend:"+12.4%",trendTone:"up"},{trend:"-8.2%",trendTone:"down"},{trend:"+22.1%",trendTone:"up"},{trend:"+15.8%",trendTone:"up"},{trend:"-3.4%",trendTone:"down"},{trend:"+9.6%",trendTone:"up"},{trend:"-5.1%",trendTone:"down"},{trend:"+4.7%",trendTone:"up"}],k=s(()=>g.items.slice(0,6).map((d,T)=>{const f=B[T]??{trend:"+0.0%",trendTone:"up"};return{...d,shortName:w(d.label),trend:f.trend,trendTone:f.trendTone}}));function F(d){return d==="down"?"lucide:trending-down":"lucide:trending-up"}function S(d){return d==="down"?"size-3 text-red-500":"size-3 text-emerald-600 dark:text-emerald-400"}function P(d){return d==="down"?"text-sm font-medium text-red-500 tabular-nums":"text-sm font-medium text-emerald-600 dark:text-emerald-400 tabular-nums"}function w(d){return d.split(/[-_\s]+/).filter(Boolean).slice(0,2).map(T=>T[0]?.toUpperCase()??"").join("")}return(d,T)=>{const f=$e,N=ne;return i(),q(N,{description:"Best performers by spend",icon:"lucide:folder-git-2",title:"Top Projects"},{default:K(()=>[n("div",Se,[(i(!0),b(I,null,A(l(k),p=>(i(),b("div",{key:p.repository,class:"flex justify-between items-center gap-3 rounded-md transition-colors"},[n("div",Le,[n("p",Ue,m(p.label),1),n("p",Be,m(p.detail),1)]),n("div",Pe,[n("p",je,m(p.value),1),n("div",Ae,[R(f,{class:te(S(p.trendTone)),mode:"svg",name:F(p.trendTone)},null,8,["class","name"]),n("span",{class:te(P(p.trendTone))},m(p.trend),3)])])]))),128))])]),_:1})}}}),ct=Object.assign(Ie,{__name:"StatisticalAnalysisProjectUsagePanel"}),Ne={class:"mb-4 grid grid-cols-1 gap-3 sm:grid-cols-3"},ze={class:"text-xs text-muted-foreground"},Re={class:"mt-1 text-lg font-semibold tabular-nums"},Ye={class:"border-b pb-4"},He=["aria-label","tabindex"],Fe={class:"sr-only"},Ge={key:0,class:"pointer-events-none absolute bottom-full left-1/2 z-30 mb-2 hidden min-w-40 -translate-x-1/2 gap-1 rounded-md border bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-md group-hover:grid group-focus-visible:grid",role:"tooltip"},Oe={class:"font-medium"},Ve={key:0,class:"flex items-center justify-between gap-4 text-muted-foreground"},Ee={class:"font-mono font-medium text-foreground"},We={class:"flex items-center justify-between gap-4 text-muted-foreground"},Xe={class:"font-mono font-medium text-foreground"},qe={key:1,class:"flex items-center justify-between gap-4 text-muted-foreground"},Ke={class:"font-mono font-medium text-foreground"},Je={class:"mt-4 flex items-center justify-between gap-4"},Qe={class:"text-xs text-muted-foreground"},Ze={class:"flex items-center gap-1 text-xs text-muted-foreground"},et={class:"mt-4 grid grid-cols-1 gap-3 sm:grid-cols-3"},tt={class:"text-xs text-muted-foreground"},ot={class:"mt-1 flex items-center justify-between gap-2"},nt={class:"text-sm font-semibold"},at={class:"text-xs text-muted-foreground"},st=ae({name:"UsageHeatmapPanel",__name:"UsageHeatmapPanel",props:{heatMetric:{default:"tokens"},items:{},title:{}},setup(H){const g=H,B=["bg-zinc-100 dark:bg-zinc-800/80","bg-emerald-50 dark:bg-emerald-950/70","bg-emerald-100 dark:bg-emerald-900/70","bg-teal-100 dark:bg-teal-900/75","bg-teal-200 dark:bg-teal-800/80","bg-cyan-200 dark:bg-cyan-800/85","bg-cyan-300 dark:bg-cyan-700/90","bg-sky-300 dark:bg-sky-600/90","bg-sky-400 dark:bg-sky-500/95","bg-blue-500 dark:bg-blue-400"],k=[...B],F=[{key:"sun",label:"S",row:"1"},{key:"mon",label:"M",row:"2"},{key:"tue",label:"T",row:"3"},{key:"wed",label:"W",row:"4"},{key:"thu",label:"T",row:"5"},{key:"fri",label:"F",row:"6"},{key:"sat",label:"S",row:"7"}],S=s(()=>M(new Date)),P=s(()=>{const t=M(S.value);return t.setDate(t.getDate()-364),t}),w=s(()=>`${D(P.value)} - ${D(S.value)}`),d=s(()=>g.heatMetric==="cost"?"spend":"tokens"),T=s(()=>`${w.value} ${d.value} heatmap. Darker cells mean higher daily ${d.value}.`),f=s(()=>`Colored by daily ${d.value}`),N=s(()=>{const t=new Map(g.items.map(a=>[C(L(a.date)),a]));return Array.from({length:365},(a,h)=>{const o=M(P.value);return o.setDate(o.getDate()+h),{date:o,usage:t.get(C(o))}})}),p=s(()=>{const t=Math.max(...N.value.map(a=>g.heatMetric==="cost"?a.usage?.costUSD??0:a.usage?.totalTokens??0));return N.value.map(a=>{const h=a.usage?.costUSD??0,o=a.usage?.totalTokens??0,W=g.heatMetric==="cost"?h:o;return{colorClass:B[E(W,t)],costLabel:z(h),costUSD:h,date:D(a.date),hasUsage:!!a.usage,tokenLabel:$(o),totalTokens:o}})}),G=s(()=>{const t=P.value.getDay(),a=(7-(t+p.value.length)%7)%7,h=Array.from({length:t},(y,x)=>({column:String(Math.floor(x/7)+2),colorClass:"bg-transparent",costLabel:"",date:"",isBlank:!0,key:`blank-${x}`,row:String(x%7+1),title:"No date",tokenLabel:""})),o=p.value.map((y,x)=>({...y,column:String(Math.floor((t+x)/7)+2),isBlank:!1,key:y.date,row:String((t+x)%7+1),title:g.heatMetric==="cost"?`${y.date}: ${z(y.costUSD)} / ${$(y.totalTokens)} tokens`:`${y.date}: ${$(y.totalTokens)} tokens / ${z(y.costUSD)}`})),W=Array.from({length:a},(y,x)=>({column:String(Math.floor((t+p.value.length+x)/7)+2),colorClass:"bg-transparent",costLabel:"",date:"",isBlank:!0,key:`trailing-blank-${x}`,row:String((t+p.value.length+x)%7+1),title:"No date",tokenLabel:""}));return[...h,...o,...W]}),J=s(()=>Math.ceil(G.value.length/7)),j=s(()=>({gridTemplateColumns:`max-content repeat(${J.value}, minmax(0, 1fr))`,gridTemplateRows:"repeat(7, minmax(0, 1fr))"})),_=s(()=>p.value.filter(t=>t.hasUsage).slice(-3)),O=s(()=>p.value.filter(t=>t.hasUsage).length),Q=s(()=>z(p.value.reduce((t,a)=>t+a.costUSD,0))),Z=s(()=>$(p.value.reduce((t,a)=>t+a.totalTokens,0))),V=s(()=>g.heatMetric==="cost"?[{key:"year-cost",label:"Year Spend",value:Q.value},{key:"year-tokens",label:"Year Tokens",value:Z.value},{key:"active-days",label:"Active Days",value:String(O.value)}]:[{key:"year-tokens",label:"Year Tokens",value:Z.value},{key:"year-cost",label:"Year Spend",value:Q.value},{key:"active-days",label:"Active Days",value:String(O.value)}]);function L(t){return new Date(t)}function M(t){return new Date(t.getFullYear(),t.getMonth(),t.getDate())}function C(t){const a=t.getFullYear(),h=`${t.getMonth()+1}`.padStart(2,"0"),o=`${t.getDate()}`.padStart(2,"0");return`${a}-${h}-${o}`}function D(t){return new Intl.DateTimeFormat("en-US",{day:"2-digit",month:"short",year:"numeric"}).format(t)}function E(t,a){return t<=0||a<=0?0:Math.min(9,Math.max(1,Math.ceil(t/a*9)))}return(t,a)=>{const h=ne;return i(),q(h,{description:T.value,icon:"lucide:calendar-days",title:g.title},{default:K(()=>[n("div",Ne,[(i(!0),b(I,null,A(V.value,o=>(i(),b("div",{key:o.key,class:"rounded-md border px-3 py-2"},[n("p",ze,m(o.label),1),n("p",Re,m(o.value),1)]))),128))]),n("div",Ye,[n("div",{class:"grid w-full gap-1",style:U(j.value)},[(i(),b(I,null,A(F,o=>n("span",{key:o.key,class:"flex items-center justify-end pr-1 text-[10px] text-muted-foreground",style:U({gridColumn:"1",gridRow:o.row})},m(o.label),5)),64)),(i(!0),b(I,null,A(G.value,o=>(i(),b("div",{key:o.key,class:te(["group relative aspect-square w-full max-w-3 justify-self-center rounded-sm border border-black/5 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/50 dark:border-white/10",[o.colorClass,{"border-transparent opacity-0":o.isBlank}]]),"aria-label":o.title,style:U({gridColumn:o.column,gridRow:o.row}),tabindex:o.isBlank?-1:0},[n("span",Fe,m(o.title),1),o.isBlank?Y("",!0):(i(),b("div",Ge,[n("span",Oe,m(o.date),1),g.heatMetric==="tokens"?(i(),b("span",Ve,[a[0]||(a[0]=n("span",null,"Tokens",-1)),n("span",Ee,m(o.tokenLabel),1)])):Y("",!0),n("span",We,[a[1]||(a[1]=n("span",null,"Cost",-1)),n("span",Xe,m(o.costLabel),1)]),g.heatMetric==="cost"?(i(),b("span",qe,[a[2]||(a[2]=n("span",null,"Tokens",-1)),n("span",Ke,m(o.tokenLabel),1)])):Y("",!0),a[3]||(a[3]=n("span",{class:"absolute top-full left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-r border-b border-border bg-popover"},null,-1))]))],14,He))),128))],4),n("div",Je,[n("p",Qe,m(f.value),1),n("div",Ze,[a[4]||(a[4]=n("span",null,"Less",-1)),(i(),b(I,null,A(k,o=>n("span",{key:o,class:te(["size-3 rounded-[2px] border border-black/5 dark:border-white/10",o])},null,2)),64)),a[5]||(a[5]=n("span",null,"More",-1))])])]),n("div",et,[(i(!0),b(I,null,A(_.value,o=>(i(),b("div",{key:o.date,class:"rounded-md border px-3 py-2"},[n("p",tt,m(o.date),1),n("div",ot,[n("span",nt,m(g.heatMetric==="cost"?("formatCurrency"in t?t.formatCurrency:l(z))(o.costUSD):("formatCompactNumber"in t?t.formatCompactNumber:l($))(o.totalTokens)),1),n("span",at,m(g.heatMetric==="cost"?("formatCompactNumber"in t?t.formatCompactNumber:l($))(o.totalTokens):("formatCurrency"in t?t.formatCurrency:l(z))(o.costUSD)),1)])]))),128))])]),_:1},8,["description","title"])}}}),it=Object.assign(st,{__name:"UsageHeatmapPanel"});export{ut as _,ct as a,it as b};