@statforge/claudestat 1.6.1 → 1.8.0

package/dashboard/dist/assets/TopView-C2qdsy0Y.js

@@ -0,0 +1 @@
+import{j as e,T as d}from"./index-CMhe3KaT.js";import{a,a6 as F,a9 as A,a1 as M,aa as O,W as H}from"./vendor-lucide-ClCW-axQ.js";import{s as S,a as C}from"./shared-BbBtsdh1.js";import"./vendor-react-gHSHIE2L.js";function W({value:o,options:h,onChange:i}){return e.jsx("div",{style:{display:"flex",gap:h.some(n=>n.tip)?6:4},children:h.map(({key:n,label:s,icon:g,color:r,tip:m})=>{const l=o===n,u=r??"#e6edf3";return e.jsx(d,{position:"bottom",align:"left",content:m?e.jsxs("div",{style:{fontSize:11,lineHeight:1.7},children:[e.jsx("div",{style:{fontWeight:700,color:u,marginBottom:4},children:s}),e.jsx("div",{style:{color:"#7d8590"},children:m})]}):void 0,children:e.jsxs("button",{onClick:()=>i(n),style:{display:"flex",alignItems:"center",gap:g?5:0,padding:"4px 8px",fontSize:11,fontWeight:l?600:400,color:l?u:"#8b949e",background:l?r?r+"18":"#21262d":"transparent",border:`1px solid ${l?r?r+"50":"#30363d":"transparent"}`,borderRadius:5,cursor:"pointer"},children:[g&&e.jsx(g,{size:11,color:l?u:void 0})," ",s]})},String(n))})})}function j(o){return o<.001?"$0":o<.01?`$${o.toFixed(4)}`:o<1?`$${o.toFixed(3)}`:`$${o.toFixed(2)}`}function z(o){return o<1e3?`${o}ms`:o<6e4?`${(o/1e3).toFixed(1)}s`:`${(o/6e4).toFixed(1)}m`}const f=["#58a6ff","#3fb950","#d29922","#f0883e","#bc8cff","#f778ba","#79c0ff","#56d364","#e3b341","#ff7b72"];function U(){const[o,h]=a.useState(),[i,n]=a.useState(),[s,g]=a.useState("cost"),[r,m]=a.useState(30),[l,u]=a.useState("all"),[k,b]=a.useState(!1);a.useEffect(()=>{b(!0),fetch(`/api/top?by=${s}&limit=10&days=${r}&source=${l}`).then(t=>t.ok?t.json():void 0).then(t=>{t&&h(t),b(!1)}).catch(()=>b(!1))},[s,r,l]),a.useEffect(()=>{fetch("/cost-projection").then(t=>t.ok?t.json():void 0).then(t=>t&&n(t)).catch(()=>{})},[]);const c=(o==null?void 0:o.tools)??[],$=Math.max(...c.map(t=>t.estimatedCostUsd),.001),D=Math.max(...c.map(t=>t.count),1),T=Math.max(...c.map(t=>t.totalDurationMs),1);return e.jsxs("div",{style:{height:"100%",overflow:"auto",padding:"20px 24px"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:16,marginBottom:20,flexWrap:"wrap"},children:[e.jsx("h2",{style:{margin:0,fontSize:18,fontWeight:700,color:"#e6edf3"},children:"Tool Rankings"}),e.jsx(W,{value:s,options:[{key:"cost",label:"Cost",icon:F,color:"#3fb950",tip:"Estimated USD cost per tool, calculated from each tool's share of total token usage"},{key:"count",label:"Calls",icon:A,color:"#58a6ff",tip:"Total number of invocations in the selected period"},{key:"duration",label:"Duration",icon:M,color:"#e3b341",tip:"Cumulative execution time (sum of all calls)"}],onChange:g}),e.jsx(W,{value:l,options:[{key:"all",label:"All",tip:"Show tools from all AI assistants combined"},{key:"claude-code",label:"Claude Code",color:"#58a6ff",tip:"Show only tools used by Claude Code"},{key:"opencode",label:"OpenCode",color:"#3fb950",tip:"Show only tools used by OpenCode"}],onChange:u}),e.jsx(W,{value:r,options:[7,30,90].map(t=>({key:t,label:`${t}d`})),onChange:m})]}),i&&e.jsxs("div",{style:{display:"flex",gap:12,marginBottom:20},children:[e.jsx(w,{label:"This week",tooltip:"Cost accumulated since Monday of the current week, extrapolated to 7 days",costSoFar:i.weekly.costSoFar,projected:i.weekly.projected,daysWithData:i.weekly.daysWithData}),e.jsx(w,{label:"This month",tooltip:"Cost accumulated since the 1st of the current month, extrapolated to 30 days",costSoFar:i.monthly.costSoFar,projected:i.monthly.projected,daysWithData:i.monthly.daysWithData})]}),c.length===0?e.jsx("div",{style:{color:"#8b949e",fontSize:13,textAlign:"center",marginTop:40},children:k?"Loading…":"No tool usage data for this period."}):e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:6},children:[k&&e.jsx("div",{style:{fontSize:10,color:"#484f58",marginBottom:6},children:"Refreshing…"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"32px 200px 70px 80px 80px",gap:8,padding:"0 8px",fontSize:10,fontWeight:600,color:"#8b949e",textTransform:"uppercase",letterSpacing:"0.5px"},children:[e.jsx("span",{children:"#"}),e.jsx("span",{children:"Tool"}),e.jsx("span",{style:{textAlign:"right"},children:e.jsx(d,{position:"bottom",align:"right",content:e.jsxs("div",{style:{fontSize:11,lineHeight:1.7},children:[e.jsx("div",{style:{fontWeight:700,color:"#58a6ff",marginBottom:4},children:"Calls"}),e.jsx("div",{style:{color:"#7d8590"},children:"Total invocations in the selected period"})]}),children:"Calls"})}),e.jsx("span",{style:{textAlign:"right"},children:e.jsx(d,{position:"bottom",align:"right",content:e.jsxs("div",{style:{fontSize:11,lineHeight:1.7},children:[e.jsx("div",{style:{fontWeight:700,color:"#e3b341",marginBottom:4},children:"Duration"}),e.jsx("div",{style:{color:"#7d8590"},children:"Cumulative execution time across all calls"})]}),children:"Duration"})}),e.jsx("span",{style:{textAlign:"right"},children:e.jsx(d,{position:"bottom",align:"right",content:e.jsxs("div",{style:{fontSize:11,lineHeight:1.7},children:[e.jsx("div",{style:{fontWeight:700,color:"#3fb950",marginBottom:4},children:"Est. Cost"}),e.jsxs("div",{style:{color:"#7d8590"},children:["Proportion of total session cost",e.jsx("br",{}),"attributed to each tool by call count"]})]}),children:"Est. Cost"})})]}),c.map((t,x)=>{const v=s==="cost"?t.estimatedCostUsd/$:s==="count"?t.count/D:t.totalDurationMs/T;return e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"32px 200px 70px 80px 80px",gap:8,padding:"8px",fontSize:12,color:"#e6edf3",background:"#161b22",border:"1px solid #21262d",borderRadius:6,position:"relative",overflow:"hidden"},children:[e.jsx("div",{style:{position:"absolute",top:0,left:0,bottom:0,width:`${Math.max(v*100,2)}%`,background:`${f[x%f.length]}12`,transition:"width 0.3s ease"}}),e.jsx("span",{style:{color:"#8b949e",fontWeight:600,position:"relative"},children:x+1}),e.jsx("span",{style:{display:"flex",alignItems:"center",gap:6,position:"relative"},children:t.tool==="Other"?e.jsx(d,{position:"top",align:"left",content:e.jsxs("div",{style:{fontSize:11,lineHeight:1.7},children:[e.jsx("div",{style:{fontWeight:700,color:"#8b949e",marginBottom:4},children:"Other tools"}),e.jsxs("div",{style:{color:"#7d8590"},children:["Remaining cost not attributed to the",e.jsx("br",{}),"top tools listed above"]})]}),children:e.jsxs("span",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx(O,{size:11,color:"#8b949e"}),t.tool]})}):e.jsxs(e.Fragment,{children:[e.jsx(H,{size:11,color:f[x%f.length],style:{flexShrink:0}}),e.jsx("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},title:t.tool,children:t.tool}),l==="all"&&e.jsx(d,{position:"top",align:"left",content:e.jsxs("div",{style:{fontSize:11,lineHeight:1.7},children:[e.jsx("div",{style:{fontWeight:700,color:C(t.source),marginBottom:4},children:S(t.source)}),e.jsxs("div",{style:{color:"#7d8590"},children:["This tool was invoked by ",S(t.source)]})]}),children:e.jsx("span",{style:{fontSize:9,fontWeight:700,letterSpacing:"0.04em",padding:"1px 5px",borderRadius:3,background:t.source==="opencode"?"#0d1f10":"#0d1e33",border:`1px solid ${C(t.source)}60`,color:C(t.source),cursor:"default",whiteSpace:"nowrap"},children:S(t.source)})})]})}),e.jsx("span",{style:{textAlign:"right",color:"#8b949e",position:"relative"},children:t.tool==="Other"?"—":t.count.toLocaleString()}),e.jsx("span",{style:{textAlign:"right",color:"#8b949e",position:"relative"},children:t.tool==="Other"||t.totalDurationMs===0?"—":z(t.totalDurationMs)}),e.jsx("span",{style:{textAlign:"right",fontWeight:600,color:f[x%f.length],position:"relative"},children:j(t.estimatedCostUsd)})]},`${t.tool}-${t.source}`)}),(()=>{const t=c.filter(p=>p.tool!=="Other"),x=t.reduce((p,y)=>p+y.count,0),v=t.reduce((p,y)=>p+y.totalDurationMs,0),B=c.reduce((p,y)=>p+y.estimatedCostUsd,0);return e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"32px 200px 70px 80px 80px",gap:8,padding:"8px",fontSize:12,borderTop:"1px solid #30363d",marginTop:2},children:[e.jsx("span",{}),e.jsx("span",{style:{color:"#8b949e",fontWeight:600,fontSize:10,textTransform:"uppercase",letterSpacing:"0.5px",alignSelf:"center"},children:"Total shown"}),e.jsx("span",{style:{textAlign:"right",color:"#e6edf3",fontWeight:600},children:x.toLocaleString()}),e.jsx("span",{style:{textAlign:"right",color:"#e6edf3",fontWeight:600},children:z(v)}),e.jsx("span",{style:{textAlign:"right",color:"#e6edf3",fontWeight:700},children:j(B)})]})})()]})]})}function w({label:o,tooltip:h,costSoFar:i,projected:n,daysWithData:s}){return e.jsxs("div",{style:{flex:1,background:"#161b22",border:"1px solid #21262d",borderRadius:8,padding:"14px 16px"},children:[e.jsx(d,{position:"top",align:"left",content:e.jsxs("div",{style:{fontSize:11,lineHeight:1.7},children:[e.jsx("div",{style:{fontWeight:700,color:"#e6edf3",marginBottom:4},children:o}),e.jsx("div",{style:{color:"#7d8590"},children:h})]}),children:e.jsx("div",{style:{fontSize:11,fontWeight:600,color:"#8b949e",marginBottom:8,cursor:"default"},children:o})}),e.jsxs("div",{style:{display:"flex",alignItems:"baseline",gap:8,marginBottom:4},children:[e.jsx("span",{style:{fontSize:22,fontWeight:700,color:"#e6edf3"},children:j(n)}),e.jsx(d,{position:"top",align:"left",content:e.jsxs("div",{style:{fontSize:11,lineHeight:1.7},children:[e.jsx("div",{style:{fontWeight:700,color:"#58a6ff",marginBottom:4},children:"Projected spend"}),e.jsxs("div",{style:{color:"#7d8590"},children:["Extrapolated from daily average based on ",s.toFixed(1)," days of data"]})]}),children:e.jsx("span",{style:{fontSize:11,color:"#8b949e",cursor:"default"},children:"projected"})})]}),e.jsxs("div",{style:{fontSize:11,color:"#484f58"},children:[j(i)," spent over ",s.toFixed(1)," days"]})]})}export{U as TopView};