llmxray 0.4.1 → 0.4.2

package/dist/assets/CostDashboardPage-BKQDsZhx.js

@@ -0,0 +1 @@
+import{d as B,a as b,b as g,e as m,f as t,t as a,j as f,l as w,p as _,u as p,F as E,k as I}from"./index-534TcCbY.js";import{u as G}from"./metrics-store-7m97Sb7w.js";import{C as y,a as k,L as $,B as N,p as C,c as T,d as M,f as R,P as z,b as A,i as L,e as F}from"./index-ClITfJ3t.js";import{I as q}from"./info-Eg1tUw1x.js";const v=[{family:"llama3.2",inputPer1M:.04,outputPer1M:.04,source:"Together AI"},{family:"llama3.1",inputPer1M:.05,outputPer1M:.08,source:"Groq"},{family:"llama3",inputPer1M:.05,outputPer1M:.08,source:"Groq"},{family:"gemma3",inputPer1M:.1,outputPer1M:.1,source:"Google"},{family:"gemma2",inputPer1M:.07,outputPer1M:.07,source:"Google"},{family:"gemma",inputPer1M:.07,outputPer1M:.07,source:"Google"},{family:"mistral",inputPer1M:.25,outputPer1M:.25,source:"Mistral"},{family:"mixtral",inputPer1M:.6,outputPer1M:.6,source:"Mistral"},{family:"phi4",inputPer1M:.07,outputPer1M:.14,source:"Azure"},{family:"phi3",inputPer1M:.07,outputPer1M:.14,source:"Azure"},{family:"qwen2.5",inputPer1M:.15,outputPer1M:.15,source:"Alibaba"},{family:"qwen2",inputPer1M:.15,outputPer1M:.15,source:"Alibaba"},{family:"deepseek-r1",inputPer1M:.55,outputPer1M:2.19,source:"DeepSeek"},{family:"deepseek-coder",inputPer1M:.14,outputPer1M:.28,source:"DeepSeek"},{family:"codellama",inputPer1M:.05,outputPer1M:.08,source:"Estimated"},{family:"qwen2.5-coder",inputPer1M:.15,outputPer1M:.15,source:"Estimated"},{family:"command-r",inputPer1M:.5,outputPer1M:1.5,source:"Cohere"},{family:"starcoder",inputPer1M:.1,outputPer1M:.1,source:"Estimated"}],O={family:"unknown",inputPer1M:.1,outputPer1M:.1,source:"Estimated"};function S(l){const o=l.toLowerCase().split(":")[0],s=v.find(e=>o===e.family);if(s)return s;const n=v.find(e=>o.startsWith(e.family));return n||{...O,family:o}}function D(l,o,s){return(l*s.inputPer1M+o*s.outputPer1M)/1e6}const U=B("cost",()=>{const l=G(),o=b(()=>{const u=new Map;for(const r of l.metricsBySession.values()){const c=u.get(r.model);if(c)c.promptTokens+=r.promptTokenCount,c.completionTokens+=r.completionTokenCount,c.totalTokens+=r.totalTokenCount,c.sessionCount++;else{const h=S(r.model);u.set(r.model,{model:r.model,promptTokens:r.promptTokenCount,completionTokens:r.completionTokenCount,totalTokens:r.totalTokenCount,sessionCount:1,estimatedCost:0,pricing:h})}}const i=[...u.values()];for(const r of i)r.estimatedCost=D(r.promptTokens,r.completionTokens,r.pricing);return i.sort((r,c)=>c.totalTokens-r.totalTokens)}),s=b(()=>{const u=new Map;for(const i of l.metricsBySession.values()){const r=new Date(i.startedAt).toISOString().slice(0,10),c=u.get(r),h=S(i.model),P=D(i.promptTokenCount,i.completionTokenCount,h);c?(c.promptTokens+=i.promptTokenCount,c.completionTokens+=i.completionTokenCount,c.totalTokens+=i.totalTokenCount,c.sessionCount++,c.estimatedCost+=P):u.set(r,{date:r,promptTokens:i.promptTokenCount,completionTokens:i.completionTokenCount,totalTokens:i.totalTokenCount,sessionCount:1,estimatedCost:P})}return[...u.values()].sort((i,r)=>i.date.localeCompare(r.date))}),n=b(()=>o.value.reduce((u,i)=>u+i.estimatedCost,0)),e=b(()=>o.value.reduce((u,i)=>u+i.totalTokens,0)),d=b(()=>o.value.reduce((u,i)=>u+i.sessionCount,0)),x=b(()=>d.value>0?n.value/d.value:0);return{modelUsage:o,dailyUsage:s,totalEstimatedCost:n,totalTokens:e,totalSessions:d,avgCostPerSession:x}}),j={class:"grid grid-cols-2 gap-3 lg:grid-cols-4"},V={class:"rounded-lg border border-border-default bg-surface-raised p-4"},K={class:"text-[10px] font-medium uppercase tracking-wide text-text-muted"},W={class:"mt-1 text-2xl font-semibold text-text-primary"},H={class:"rounded-lg border border-border-default bg-surface-raised p-4"},J={class:"text-[10px] font-medium uppercase tracking-wide text-text-muted"},Q={class:"mt-1 text-2xl font-semibold text-text-primary"},X={class:"rounded-lg border border-border-default bg-surface-raised p-4"},Y={class:"text-[10px] font-medium uppercase tracking-wide text-text-muted"},Z={class:"mt-1 text-2xl font-semibold text-accent"},tt={class:"rounded-lg border border-border-default bg-surface-raised p-4"},et={class:"text-[10px] font-medium uppercase tracking-wide text-text-muted"},ot={class:"mt-1 text-2xl font-semibold text-text-primary"},st=g({__name:"CostSummaryCards",props:{totalTokens:{},totalSessions:{},estimatedCost:{},avgCostPerSession:{}},setup(l){function o(n){return n<.01?"< $0.01":`$${n.toFixed(2)}`}function s(n){return n>=1e6?`${(n/1e6).toFixed(1)}M`:n>=1e3?`${(n/1e3).toFixed(1)}K`:n.toString()}return(n,e)=>(f(),m("div",j,[t("div",V,[t("p",K,a(n.$t("cost.summary.totalTokens")),1),t("p",W,a(s(l.totalTokens)),1)]),t("div",H,[t("p",J,a(n.$t("cost.summary.totalSessions")),1),t("p",Q,a(l.totalSessions),1)]),t("div",X,[t("p",Y,a(n.$t("cost.summary.estimatedCost")),1),t("p",Z,a(o(l.estimatedCost)),1)]),t("div",tt,[t("p",et,a(n.$t("cost.summary.avgCostPerSession")),1),t("p",ot,a(o(l.avgCostPerSession)),1)])]))}}),at={class:"rounded-lg border border-border-default bg-surface-raised p-4"},nt={class:"mb-3 text-sm font-medium text-text-secondary"},rt=g({__name:"TokenUsageByModelChart",props:{data:{}},setup(l){y.register(k,$,N,C,T,M);const o=l,s=b(()=>({labels:o.data.map(e=>e.model),datasets:[{label:"Prompt",data:o.data.map(e=>e.promptTokens),backgroundColor:"#818cf8"},{label:"Completion",data:o.data.map(e=>e.completionTokens),backgroundColor:"#a855f7"}]})),n={indexAxis:"y",responsive:!0,maintainAspectRatio:!1,plugins:{legend:{position:"bottom",labels:{color:"#94a3b8",font:{size:11}}},tooltip:{callbacks:{label:e=>`${e.dataset.label??""}: ${(e.parsed.x??0).toLocaleString()} tokens`}}},scales:{x:{stacked:!0,ticks:{color:"#94a3b8",font:{size:10}},grid:{color:"rgba(71, 85, 105, 0.3)"}},y:{stacked:!0,ticks:{color:"#94a3b8",font:{size:11}},grid:{display:!1}}}};return(e,d)=>(f(),m("div",at,[t("h3",nt,a(e.$t("cost.charts.tokensByModel")),1),t("div",{style:w({height:Math.max(120,l.data.length*40)+"px"})},[_(p(R),{data:s.value,options:n},null,8,["data"])],4)]))}}),it={class:"rounded-lg border border-border-default bg-surface-raised p-4"},lt={class:"mb-3 text-sm font-medium text-text-secondary"},dt={class:"h-64"},ct=g({__name:"DailyUsageChart",props:{data:{}},setup(l){y.register(k,$,z,A,C,T,M,L);const o=l,s=b(()=>({labels:o.data.map(e=>e.date),datasets:[{label:"Tokens",data:o.data.map(e=>e.totalTokens),borderColor:"#818cf8",backgroundColor:"rgba(129, 140, 248, 0.1)",fill:!0,tension:.3,yAxisID:"y"},{label:"Est. Cost ($)",data:o.data.map(e=>e.estimatedCost),borderColor:"#a855f7",backgroundColor:"transparent",borderDash:[4,4],tension:.3,yAxisID:"y1"}]})),n={responsive:!0,maintainAspectRatio:!1,interaction:{mode:"index",intersect:!1},plugins:{legend:{position:"bottom",labels:{color:"#94a3b8",font:{size:11}}},tooltip:{callbacks:{label:e=>{const d=e.dataset.label??"",x=e.parsed.y??0;return d==="Est. Cost ($)"?`${d}: $${x.toFixed(4)}`:`${d}: ${x.toLocaleString()}`}}}},scales:{x:{ticks:{color:"#94a3b8",font:{size:10}},grid:{color:"rgba(71, 85, 105, 0.3)"}},y:{type:"linear",position:"left",ticks:{color:"#94a3b8",font:{size:10}},grid:{color:"rgba(71, 85, 105, 0.3)"},title:{display:!0,text:"Tokens",color:"#94a3b8",font:{size:10}}},y1:{type:"linear",position:"right",ticks:{color:"#94a3b8",font:{size:10},callback:e=>`$${Number(e).toFixed(4)}`},grid:{display:!1},title:{display:!0,text:"Cost ($)",color:"#94a3b8",font:{size:10}}}}};return(e,d)=>(f(),m("div",it,[t("h3",lt,a(e.$t("cost.charts.dailyUsage")),1),t("div",dt,[_(p(F),{data:s.value,options:n},null,8,["data"])])]))}}),ut={class:"rounded-lg border border-border-default bg-surface-raised p-4"},pt={class:"mb-3 text-sm font-medium text-text-secondary"},mt={key:0,class:"h-48"},ft={key:1,class:"py-6 text-center text-xs text-text-muted"},bt=g({__name:"CostTrendChart",setup(l){y.register(k,$,z,A,C,T,M,L);const o=U(),s=b(()=>({labels:o.dailyUsage.map(d=>d.date),datasets:[{label:"Est. Cost ($)",data:o.dailyUsage.map(d=>d.estimatedCost),borderColor:"#f472b6",backgroundColor:"rgba(244, 114, 182, 0.1)",fill:!0,tension:.3,pointRadius:3}]})),n={responsive:!0,maintainAspectRatio:!1,plugins:{legend:{display:!1},tooltip:{callbacks:{label:d=>`$${(d.parsed.y??0).toFixed(4)}`}}},scales:{x:{ticks:{color:"#94a3b8",font:{size:10}},grid:{color:"rgba(71, 85, 105, 0.3)"}},y:{ticks:{color:"#94a3b8",font:{size:10},callback:d=>`$${Number(d).toFixed(4)}`},grid:{color:"rgba(71, 85, 105, 0.3)"}}}},e=b(()=>o.dailyUsage.length>0);return(d,x)=>(f(),m("div",ut,[t("h3",pt,a(d.$t("cost.charts.costTrend")),1),e.value?(f(),m("div",mt,[_(p(F),{data:s.value,options:n},null,8,["data"])])):(f(),m("p",ft,a(d.$t("cost.noData")),1))]))}}),_t={class:"rounded-lg border border-border-default bg-surface-raised p-4"},gt={class:"mb-3 text-sm font-medium text-text-secondary"},xt={class:"overflow-x-auto"},ht={class:"w-full text-xs"},yt={class:"border-b border-border-default text-text-muted"},kt={class:"px-2 py-2 text-start font-medium"},$t={class:"px-2 py-2 text-end font-medium"},Ct={class:"px-2 py-2 text-end font-medium"},Tt={class:"px-2 py-2 text-end font-medium"},Mt={class:"px-2 py-2 text-end font-medium"},Pt={class:"px-2 py-2 text-end font-medium"},vt={class:"px-2 py-2 text-end font-medium"},St={class:"px-2 py-2 font-medium text-text-primary"},Dt={class:"px-2 py-2 text-end"},Et={class:"px-2 py-2 text-end"},zt={class:"px-2 py-2 text-end"},At={class:"px-2 py-2 text-end"},Lt={class:"px-2 py-2 text-end text-accent"},Ft={class:"px-2 py-2 text-end text-text-muted"},Ut=g({__name:"ModelBreakdownTable",props:{data:{}},setup(l){function o(s){return s<1e-4?"< $0.0001":s<.01?`$${s.toFixed(4)}`:`$${s.toFixed(2)}`}return(s,n)=>(f(),m("div",_t,[t("h3",gt,a(s.$t("cost.table.model")),1),t("div",xt,[t("table",ht,[t("thead",null,[t("tr",yt,[t("th",kt,a(s.$t("cost.table.model")),1),t("th",$t,a(s.$t("cost.table.sessions")),1),t("th",Ct,a(s.$t("cost.table.promptTokens")),1),t("th",Tt,a(s.$t("cost.table.completionTokens")),1),t("th",Mt,a(s.$t("cost.table.totalTokens")),1),t("th",Pt,a(s.$t("cost.table.estimatedCost")),1),t("th",vt,a(s.$t("cost.table.pricingSource")),1)])]),t("tbody",null,[(f(!0),m(E,null,I(l.data,e=>(f(),m("tr",{key:e.model,class:"border-b border-border-default/50 text-text-secondary hover:bg-surface-overlay transition-colors"},[t("td",St,a(e.model),1),t("td",Dt,a(e.sessionCount),1),t("td",Et,a(e.promptTokens.toLocaleString()),1),t("td",zt,a(e.completionTokens.toLocaleString()),1),t("td",At,a(e.totalTokens.toLocaleString()),1),t("td",Lt,a(o(e.estimatedCost)),1),t("td",Ft,a(e.pricing.source),1)]))),128))])])])]))}}),Bt={class:"h-full overflow-y-auto p-6"},wt={class:"mb-6 text-lg font-semibold text-text-primary"},It={class:"mt-6 grid gap-6 lg:grid-cols-2"},Gt={class:"mt-6"},Nt={class:"mt-6"},Rt={class:"mt-6 flex items-start gap-2 rounded-lg border border-border-default bg-surface-raised p-4 text-xs text-text-muted"},qt={key:1,class:"flex h-64 items-center justify-center"},Ot={class:"text-sm text-text-muted"},Ht=g({__name:"CostDashboardPage",setup(l){const o=U();return(s,n)=>(f(),m("div",Bt,[t("h1",wt,a(s.$t("cost.title")),1),p(o).totalSessions>0?(f(),m(E,{key:0},[_(st,{"total-tokens":p(o).totalTokens,"total-sessions":p(o).totalSessions,"estimated-cost":p(o).totalEstimatedCost,"avg-cost-per-session":p(o).avgCostPerSession},null,8,["total-tokens","total-sessions","estimated-cost","avg-cost-per-session"]),t("div",It,[_(rt,{data:p(o).modelUsage},null,8,["data"]),_(ct,{data:p(o).dailyUsage},null,8,["data"])]),t("div",Gt,[_(bt)]),t("div",Nt,[_(Ut,{data:p(o).modelUsage},null,8,["data"])]),t("div",Rt,[_(p(q),{class:"mt-0.5 h-3.5 w-3.5 shrink-0"}),t("p",null,a(s.$t("cost.disclaimer")),1)])],64)):(f(),m("div",qt,[t("p",Ot,a(s.$t("cost.noData")),1)]))]))}});export{Ht as default};