@kaitranntt/ccs 8.1.4 → 8.2.0-dev.2

package/dist/ui/assets/index-COt1pbk-.js

@@ -1 +0,0 @@
-import{j as e}from"./radix-ui-nu4wz29m.js";import{r as f,E as Le}from"./react-vendor-Bjx91N7w.js";import{u as U,a as R,C as N,b,S as p,c as u,P as k,B as _,d as $e,e as X,f as de,g as Pe,h as ue,i as Re,j as Fe,k as Me,l as De,m as Ae,n as Be,o as xe,p as v,q as P,r as Ie,s as Oe,t as Ue,v as qe}from"./index-CcGVqYOy.js";import{a3 as Ee,am as me,an as se,ao as he,a1 as fe,aa as Ke,G as _e,ap as We,R as Ge,$ as ne,U as He,Z as pe,v as Ve,ae as Q,aq as Ye,Y as ze,C as Qe,ar as Ze,as as Xe}from"./icons-DzKUh8vG.js";import{a as Je,u as q}from"./tanstack-bhJxV1h8.js";import{u as es}from"./use-accounts-BdalFsdY.js";import{K as B,L as ge,f as L,H as ss}from"./utils-CzKF5WmX.js";import{R as je,A as ts,C as as,X as ns,Y as re,T as ye,b as le,P as rs,c as ls,d as os}from"./charts-eIPy2oG6.js";import"./notifications-B4_o8bcr.js";import"./form-utils-CuHzLhJZ.js";function is({data:s,isLoading:t}){const{privacyMode:a}=U(),{t:n}=R(),c=s?.totalTokens??0,r=s?.totalInputTokens??0,o=s?.totalOutputTokens??0,x=s?.totalCacheTokens??0,l=r+o;if(t)return e.jsx("div",{className:"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4",children:[1,2,3,4,5].map(h=>e.jsx(N,{children:e.jsx(b,{className:"p-6",children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(p,{className:"h-4 w-[100px]"}),e.jsx(p,{className:"h-8 w-[80px]"})]}),e.jsx(p,{className:"h-8 w-8 rounded-lg"})]})})},h))});const i=(s?.tokenBreakdown?.cacheCreation?.cost??0)+(s?.tokenBreakdown?.cacheRead?.cost??0),m=s?.totalCost?Math.round(i/s.totalCost*100):0,d=x>0&&c>l,g=x>0&&!d?"Total Tokens (I/O)":n("analyticsSummary.totalTokens"),S=d?`${$(r)} in / ${$(o)} out / ${$(x)} cache`:n("analyticsSummary.totalTokensSubtitle",{input:$(r),output:$(o)}),C=[{title:g,value:c,icon:Ee,format:h=>$(h),color:"text-blue-600",bgColor:"bg-blue-100 dark:bg-blue-900/20",subtitle:S},{title:n("analyticsSummary.totalCost"),value:s?.totalCost??0,icon:me,format:h=>`$${h.toFixed(2)}`,color:"text-green-600",bgColor:"bg-green-100 dark:bg-green-900/20",subtitle:n("analyticsSummary.totalCostSubtitle",{value:s?.averageCostPerDay?.toFixed(2)??"0.00"})},{title:n("analyticsSummary.cacheTokens"),value:s?.totalCacheTokens??0,icon:se,format:h=>$(h),color:"text-cyan-600",bgColor:"bg-cyan-100 dark:bg-cyan-900/20",subtitle:n("analyticsSummary.cacheTokensSubtitle",{cost:i.toFixed(2),percent:m})},{title:n("analyticsSummary.inputCost"),value:s?.tokenBreakdown?.input?.cost??0,icon:he,format:h=>`$${h.toFixed(2)}`,color:"text-purple-600",bgColor:"bg-purple-100 dark:bg-purple-900/20",subtitle:n("analyticsSummary.tokensSubtitle",{value:$(s?.tokenBreakdown?.input?.tokens??0)})},{title:n("analyticsSummary.outputCost"),value:s?.tokenBreakdown?.output?.cost??0,icon:fe,format:h=>`$${h.toFixed(2)}`,color:"text-orange-600",bgColor:"bg-orange-100 dark:bg-orange-900/20",subtitle:n("analyticsSummary.tokensSubtitle",{value:$(s?.tokenBreakdown?.output?.tokens??0)})}];return e.jsx("div",{className:"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4",children:C.map((h,y)=>{const T=h.icon;return e.jsx(N,{className:"hover:shadow-md transition-shadow",children:e.jsx(b,{className:"p-4",children:e.jsxs("div",{className:"flex items-center justify-between space-x-2",children:[e.jsxs("div",{className:"space-y-1 min-w-0",children:[e.jsx("p",{className:"text-xs font-medium text-muted-foreground truncate",children:h.title}),e.jsx("p",{className:u("text-xl font-bold truncate",a&&k),children:h.format(h.value)}),h.subtitle&&e.jsx("p",{className:u("text-[10px] text-muted-foreground truncate",a&&k),children:h.subtitle})]}),e.jsx("div",{className:u("p-2 rounded-lg shrink-0",h.bgColor),children:e.jsx(T,{className:u("h-4 w-4",h.color)})})]})})},y)})})}function $(s){return s>=1e6?`${(s/1e6).toFixed(1)}M`:s>=1e3?`${(s/1e3).toFixed(1)}K`:s.toLocaleString()}function cs({model:s}){const{privacyMode:t}=U(),{t:a}=R(),n=ds(s.ioRatio),r=s.cacheCreationTokens+s.cacheReadTokens>0?"All Tokens":a("analyticsCards.totalTokens");return e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(Ke,{className:"h-4 w-4 text-primary shrink-0"}),e.jsx("h4",{className:"font-semibold leading-none truncate",title:s.model,children:s.model})]}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsxs(_,{variant:"secondary",className:"text-[10px] h-5 px-1.5",children:[s.percentage.toFixed(1),"% usage"]}),e.jsxs(_,{variant:n.variant,className:"text-[10px] h-5 px-1.5",children:[s.ioRatio.toFixed(0),":1 I/O"]})]})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-2",children:[e.jsxs("div",{className:"p-2 rounded-md bg-muted/50 border text-center",children:[e.jsxs("p",{className:u("text-lg font-bold",t&&k),children:["$",s.cost.toFixed(2)]}),e.jsx("p",{className:"text-[10px] text-muted-foreground uppercase tracking-wider",children:a("analyticsCards.totalCost")})]}),e.jsxs("div",{className:"p-2 rounded-md bg-muted/50 border text-center",children:[e.jsx("p",{className:u("text-lg font-bold",t&&k),children:xs(s.tokens)}),e.jsx("p",{className:"text-[10px] text-muted-foreground uppercase tracking-wider",children:r})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("h5",{className:"text-[11px] font-medium text-muted-foreground uppercase tracking-wider",children:"Token Breakdown"}),e.jsxs("div",{className:u("space-y-1",t&&k),children:[e.jsx(Z,{label:"Input",tokens:s.inputTokens,cost:s.costBreakdown.input.cost,color:"#335c67",icon:he}),e.jsx(Z,{label:"Output",tokens:s.outputTokens,cost:s.costBreakdown.output.cost,color:"#fff3b0",icon:fe}),e.jsx(Z,{label:"Cache Write",tokens:s.cacheCreationTokens,cost:s.costBreakdown.cacheCreation.cost,color:"#e09f3e",icon:se}),e.jsx(Z,{label:"Cache Read",tokens:s.cacheReadTokens,cost:s.costBreakdown.cacheRead.cost,color:"#9e2a2b",icon:se})]})]}),e.jsxs("div",{className:"p-2.5 rounded-md border bg-muted/20 space-y-1.5",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(_e,{className:"h-3.5 w-3.5 text-muted-foreground"}),e.jsx("span",{className:"text-xs font-medium",children:a("analyticsCards.inputOutputRatio")})]}),e.jsx("p",{className:"text-[11px] text-muted-foreground leading-snug",children:n.description})]})]})}function Z({label:s,tokens:t,cost:a,color:n,icon:c}){return t===0?null:e.jsxs("div",{className:"flex items-center gap-2 text-xs",children:[e.jsx("div",{className:"w-1 h-6 rounded-full shrink-0",style:{backgroundColor:n}}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"font-medium truncate",children:s}),e.jsxs("span",{className:"font-mono text-muted-foreground",children:["$",a.toFixed(3)]})]}),e.jsxs("div",{className:"flex items-center gap-1.5 text-muted-foreground",children:[e.jsx(c,{className:"h-3 w-3 shrink-0"}),e.jsx("span",{children:us(t)})]})]})]})}function ds(s){return s>=200?{variant:"destructive",description:"Extended thinking or large context loading. Expected for reasoning models."}:s>=50?{variant:"secondary",description:"More input than output. Typical for analysis tasks."}:s>=5?{variant:"outline",description:"Balanced input/output ratio for typical coding tasks."}:{variant:"default",description:"More output than input. Generation-heavy workload."}}function us(s){return s.toLocaleString()}function xs(s){return s>=1e9?`${(s/1e9).toFixed(1)}B`:s>=1e6?`${(s/1e6).toFixed(1)}M`:s>=1e3?`${(s/1e3).toFixed(1)}K`:s.toString()}const ms="/api";function oe(s){const t=s.getFullYear(),a=String(s.getMonth()+1).padStart(2,"0"),n=String(s.getDate()).padStart(2,"0");return`${t}${a}${n}`}function M(s,t){const a=t.toString();return a?`${s}?${a}`:s}function D(s,t){t?.startDate&&s.append("since",oe(t.startDate)),t?.endDate&&s.append("until",oe(t.endDate))}function A(s,t){t?.profile&&s.append("profile",t.profile)}const I={summary:s=>{const t=new URLSearchParams;return D(t,s),A(t,s),F(M("/usage/summary",t))},trends:s=>{const t=new URLSearchParams;return D(t,s),A(t,s),F(M("/usage/daily",t))},hourly:s=>{const t=new URLSearchParams;return D(t,s),A(t,s),F(M("/usage/hourly",t))},models:s=>{const t=new URLSearchParams;return D(t,s),A(t,s),F(M("/usage/models",t))},sessions:s=>{const t=new URLSearchParams;return D(t,s),s?.limit&&t.append("limit",s.limit.toString()),s?.offset&&t.append("offset",s.offset.toString()),A(t,s),F(M("/usage/sessions",t))},monthly:s=>{const t=new URLSearchParams;return D(t,s),A(t,s),F(M("/usage/monthly",t))},refresh:async()=>{if(!(await fetch(`${ms}/usage/refresh`,{method:"POST",headers:{"Content-Type":"application/json"}})).ok)throw new Error("Failed to refresh usage cache")},status:()=>F("/usage/status"),insights:s=>{const t=new URLSearchParams;return D(t,s),A(t,s),F(M("/usage/insights",t))}};async function F(s){const a=await fetch(`/api${s}`,{headers:{"Content-Type":"application/json"}});if(!a.ok){const c=await a.json().catch(()=>({error:"Unknown error"}));throw new Error(c.error||a.statusText)}const n=await a.json();return n.data||n}function hs(s){return q({queryKey:["usage","summary",s],queryFn:()=>I.summary(s),staleTime:60*1e3})}function fs(s){return q({queryKey:["usage","trends",s],queryFn:()=>I.trends(s),staleTime:60*1e3})}function ps(s){return q({queryKey:["usage","hourly",s],queryFn:()=>I.hourly(s),staleTime:60*1e3})}function gs(s){return q({queryKey:["usage","models",s],queryFn:()=>I.models(s),staleTime:60*1e3})}function js(){const s=Je();return f.useCallback(async()=>{await I.refresh(),await s.invalidateQueries({queryKey:["usage"]})},[s])}function ys(){return q({queryKey:["usage","status"],queryFn:()=>I.status(),staleTime:10*1e3,refetchInterval:30*1e3})}function Ns(s){return q({queryKey:["usage","sessions",s],queryFn:()=>I.sessions(s),staleTime:60*1e3})}const bs=50,te="ccs.analytics.selectedProfile",W="all";function ws(){if(typeof globalThis.localStorage>"u")return W;const s=globalThis.localStorage.getItem(te);return!s||s.startsWith("unsupported:")?W:s}function vs(s){if(!(typeof globalThis.localStorage>"u")){if(s===W){globalThis.localStorage.removeItem(te);return}globalThis.localStorage.setItem(te,s)}}function ks(){const[s,t]=f.useState({from:B(new Date,30),to:new Date}),[a,n]=f.useState(!1),[c,r]=f.useState(null),[o,x]=f.useState(ws),[l,i]=f.useState(null),[m,d]=f.useState("daily"),{data:g}=es(),{data:S}=$e(),C=js(),h=f.useCallback(async()=>{n(!0);try{await C()}finally{n(!1)}},[C]),y=f.useMemo(()=>({startDate:s?.from,endDate:s?.to,profile:o===W?void 0:o}),[s?.from,s?.to,o]),T=f.useMemo(()=>{const w=new Set(g?.accounts.map(j=>j.name)??[]),z=[{value:W,label:"All profiles",description:"Includes all analytics sources.",supported:!0},{value:"default",label:"Default Claude",description:"Profile-scoped Claude JSONL data.",supported:!0},...Array.from(w).sort((j,Te)=>j.localeCompare(Te)).map(j=>({value:j,label:j,description:"Profile-scoped account data.",supported:!0}))];for(const j of S?.profiles??[])w.has(j.name)||j.name==="default"||z.push({value:`unsupported:${j.name}`,label:j.name,description:"API profile usage is not yet attributed by stable profile.",supported:!1});return z},[g?.accounts,S?.profiles]),{data:E,isLoading:O}=hs(y),{data:J,isLoading:G}=fs(y),{data:K,isLoading:H}=ps(y),{data:ee,isLoading:V}=gs(y),{data:Ne,isLoading:ae}=Ns({...y,limit:bs}),{data:Y}=ys(),be=f.useCallback(()=>{const w=new Date;t({from:B(w,1),to:w}),d("hourly")},[]),we=f.useCallback(w=>{t(w),d("daily")},[]),ve=f.useCallback(w=>{w.startsWith("unsupported:")||(x(w),vs(w))},[]),ke=f.useMemo(()=>Y?.lastFetch?ge(new Date(Y.lastFetch),{addSuffix:!0}):null,[Y?.lastFetch]),Ce=f.useCallback((w,z)=>{const j=z.currentTarget.getBoundingClientRect();i({x:j.left+j.width/2,y:j.top+j.height/2}),r(w)},[]),Se=f.useCallback(()=>{r(null),i(null)},[]);return{dateRange:s,isRefreshing:a,viewMode:m,selectedProfile:o,profileOptions:T,selectedModel:c,popoverPosition:l,summary:E,trends:J,hourlyData:K,models:ee,sessions:Ne,status:Y,isSummaryLoading:O,isTrendsLoading:G,isHourlyLoading:H,isModelsLoading:V,isSessionsLoading:ae,isLoading:O||G||V||ae,handleRefresh:h,handleTodayClick:be,handleDateRangeChange:we,handleProfileChange:ve,handleModelClick:Ce,handlePopoverClose:Se,lastUpdatedText:ke}}function Cs({value:s,onChange:t,presets:a=[{label:"Last 7 days",range:{from:B(new Date,7),to:new Date}},{label:"Last 30 days",range:{from:B(new Date,30),to:new Date}},{label:"Last 90 days",range:{from:B(new Date,90),to:new Date}}],className:n}){const[c,r]=Le.useState(!1),{t:o}=R(),x=l=>!s||!s.from||!s.to||!l.from||!l.to?!1:L(s.from,"yyyy-MM-dd")===L(l.from,"yyyy-MM-dd")&&L(s.to,"yyyy-MM-dd")===L(l.to,"yyyy-MM-dd");return e.jsxs("div",{className:u("flex flex-wrap items-center gap-2",n),children:[a.map(l=>e.jsx(X,{variant:x(l.range)?"default":"outline",size:"sm",onClick:()=>t(l.range),children:l.label},l.label)),e.jsxs(de,{open:c,onOpenChange:r,children:[e.jsx(Pe,{asChild:!0,children:e.jsxs(X,{id:"date",variant:"outline",className:u("w-auto min-w-[200px] sm:min-w-[240px] justify-start text-left font-normal",!s&&"text-muted-foreground"),children:[e.jsx(We,{className:"mr-2 h-4 w-4"}),s?.from?s.to?e.jsxs(e.Fragment,{children:[L(s.from,"LLL dd, y")," - ",L(s.to,"LLL dd, y")]}):L(s.from,"LLL dd, y"):e.jsx("span",{children:o("dateRangeFilter.pickADate")})]})}),e.jsx(ue,{className:"w-auto p-0",align:"end",children:e.jsx(Re,{initialFocus:!0,mode:"range",defaultMonth:s?.from,selected:s,onSelect:t,numberOfMonths:2})})]})]})}function Ss({dateRange:s,onDateRangeChange:t,onTodayClick:a,onRefresh:n,isRefreshing:c,lastUpdatedText:r,viewMode:o,selectedProfile:x,profileOptions:l,onProfileChange:i}){const{t:m}=R();return e.jsxs("div",{className:"flex flex-col gap-3 shrink-0 xl:flex-row xl:items-center xl:justify-between",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-xl font-semibold",children:m("analytics.title")}),e.jsx("p",{className:"text-sm text-muted-foreground",children:m("analytics.subtitle")})]}),e.jsxs("div",{className:"flex flex-wrap items-center gap-2 xl:justify-end",children:[e.jsxs(Fe,{value:x,onValueChange:i,children:[e.jsx(Me,{className:"h-8 w-[190px]","aria-label":"Analytics profile",children:e.jsx(De,{placeholder:"All profiles"})}),e.jsx(Ae,{children:l.map(d=>e.jsx(Be,{value:d.value,disabled:!d.supported,children:e.jsxs("span",{className:"flex flex-col",children:[e.jsx("span",{children:d.label}),e.jsx("span",{className:"text-xs text-muted-foreground",children:d.description})]})},d.value))})]}),e.jsx(X,{variant:o==="hourly"?"default":"outline",size:"sm",className:"h-8",onClick:a,children:"24H"}),e.jsx(Cs,{className:"flex-wrap",value:s,onChange:t,presets:[{label:"7D",range:{from:B(new Date,7),to:new Date}},{label:"30D",range:{from:B(new Date,30),to:new Date}},{label:m("analytics.month"),range:{from:ss(new Date),to:new Date}},{label:m("analytics.allTime"),range:{from:void 0,to:new Date}}]}),r&&e.jsx("span",{className:"text-xs text-muted-foreground whitespace-nowrap",children:m("analytics.updated",{value:r})}),e.jsx(X,{variant:"outline",size:"sm",className:"gap-2 h-8",onClick:n,disabled:c,children:e.jsx(Ge,{className:`w-3.5 h-3.5 ${c?"animate-spin":""}`})})]}),x!=="all"&&e.jsx("p",{className:"text-xs text-muted-foreground xl:text-right",children:"Selected-profile analytics include only default/account data with stable profile attribution. CLIProxy and native runtime snapshots remain in All profiles."})]})}function Ts({data:s,isLoading:t,granularity:a="daily",className:n}){const{privacyMode:c}=U(),{t:r}=R(),o=f.useMemo(()=>!s||s.length===0?[]:s.map(i=>{const m="hour"in i?i.hour:i.date;return{...i,dateFormatted:Ls(m,a),costRounded:Number(i.cost.toFixed(4))}}),[s,a]);if(t)return e.jsx(p,{className:u("h-full w-full",n)});if(!s||s.length===0)return e.jsx("div",{className:u("h-full flex items-center justify-center",n),children:e.jsx("p",{className:"text-muted-foreground",children:r(a==="hourly"?"analytics.noDailyUsage":"analytics.noUsageData")})});const x=({x:l,y:i,payload:m,isRight:d})=>{const g=d?`$${m.value}`:ie(Number(m.value));return e.jsx("text",{x:l,y:i,dy:4,textAnchor:d?"start":"end",fontSize:12,fill:"currentColor",className:u("fill-muted-foreground",c&&"blur-[4px]"),children:g})};return e.jsx("div",{className:u("w-full h-full",n),children:e.jsx(je,{width:"100%",height:"100%",children:e.jsxs(ts,{data:o,margin:{top:5,right:30,left:20,bottom:5},children:[e.jsxs("defs",{children:[e.jsxs("linearGradient",{id:"tokenGradient",x1:"0",y1:"0",x2:"0",y2:"1",children:[e.jsx("stop",{offset:"5%",stopColor:"#0080FF",stopOpacity:.8}),e.jsx("stop",{offset:"95%",stopColor:"#0080FF",stopOpacity:.1})]}),e.jsxs("linearGradient",{id:"costGradient",x1:"0",y1:"0",x2:"0",y2:"1",children:[e.jsx("stop",{offset:"5%",stopColor:"#00C49F",stopOpacity:.8}),e.jsx("stop",{offset:"95%",stopColor:"#00C49F",stopOpacity:.1})]})]}),e.jsx(as,{strokeDasharray:"3 3",className:"stroke-muted"}),e.jsx(ns,{dataKey:"dateFormatted",tick:{fontSize:12},tickLine:!1,axisLine:{className:"stroke-muted"}}),e.jsx(re,{yAxisId:"left",orientation:"left",tick:l=>e.jsx(x,{...l,isRight:!1}),tickLine:!1,axisLine:{className:"stroke-muted"}}),e.jsx(re,{yAxisId:"right",orientation:"right",tick:l=>e.jsx(x,{...l,isRight:!0}),tickLine:!1,axisLine:{className:"stroke-muted"}}),e.jsx(ye,{content:({active:l,payload:i,label:m})=>!l||!i||!i.length?null:e.jsxs("div",{className:"rounded-lg border bg-background p-3 shadow-lg",children:[e.jsx("p",{className:"font-medium mb-2",children:m}),i.map((d,g)=>e.jsxs("p",{className:u("text-sm",c&&k),style:{color:d.color},children:[d.name,":"," ",d.name==="Tokens"?ie(Number(d.value)||0):`$${d.value}`]},g))]})}),e.jsx(le,{yAxisId:"left",type:"monotone",dataKey:"tokens",stroke:"#0080FF",strokeWidth:2,fillOpacity:1,fill:"url(#tokenGradient)",name:"Tokens"}),e.jsx(le,{yAxisId:"right",type:"monotone",dataKey:"costRounded",stroke:"#00C49F",strokeWidth:2,fillOpacity:1,fill:"url(#costGradient)",name:"Cost"})]})})})}function Ls(s,t){if(t==="hourly"){const[n,c]=s.split(" ");if(n&&c){const r=new Date(`${n}T${c}:00Z`);return L(r,"HH:mm")}return s}const a=new Date(s);return t==="monthly"?L(a,"MMM yyyy"):L(a,"MMM dd")}function ie(s){return s>=1e6?`${(s/1e6).toFixed(1)}M`:s>=1e3?`${(s/1e3).toFixed(1)}K`:s.toLocaleString()}function $s({data:s,isLoading:t,className:a}){const{privacyMode:n}=U(),{t:c}=R(),r=f.useMemo(()=>!s||s.length===0?[]:s.map(l=>({name:l.model,value:l.tokens,cost:l.cost,percentage:l.percentage,fill:xe(l.model)})),[s]);if(t)return e.jsx(p,{className:u("h-full min-h-[100px] w-full",a)});if(!s||s.length===0)return e.jsx("div",{className:u("h-full min-h-[100px] flex items-center justify-center",a),children:e.jsx("p",{className:"text-muted-foreground",children:c("analyticsCards.noModelData")})});const o=({active:l,payload:i})=>{if(!l||!i)return null;const m=i;if(!m.length)return null;const d=m[0].payload;return e.jsxs("div",{className:"rounded-lg border bg-background p-2 shadow-lg text-xs",children:[e.jsx("p",{className:"font-medium mb-1",children:d.name}),e.jsxs("p",{className:u("text-muted-foreground",n&&k),children:[Ps(d.value)," (",d.percentage.toFixed(1),"%)"]}),e.jsxs("p",{className:u("text-muted-foreground",n&&k),children:["$",d.cost.toFixed(4)]})]})},x=l=>l.percentage>5?`${l.percentage.toFixed(1)}%`:"";return e.jsx("div",{className:u("w-full h-full min-h-[100px]",a),children:e.jsx(je,{width:"100%",height:"100%",children:e.jsxs(rs,{children:[e.jsx(ls,{data:r,cx:"50%",cy:"50%",labelLine:!1,label:x,innerRadius:50,outerRadius:70,paddingAngle:2,dataKey:"value",children:r.map((l,i)=>e.jsx(os,{fill:l.fill,strokeWidth:1},`cell-${i}`))}),e.jsx(ye,{content:o})]})})})}function Ps(s){return s>=1e6?`${(s/1e6).toFixed(1)}M`:s>=1e3?`${(s/1e3).toFixed(1)}K`:s.toLocaleString()}function Rs(s){if(!s)return"";const a=s.replace(/^\/|\/$/g,"").split("/").filter(n=>n.length>0);return a[a.length-1]||""}function Fs({data:s,isLoading:t,className:a}){const{privacyMode:n}=U(),{t:c}=R(),r=f.useMemo(()=>{if(!s?.sessions||s.sessions.length===0)return null;const o=s.sessions,x=s.total,l=o.length,i=s.hasMore||s.offset>0,d=o.reduce((g,S)=>g+S.cost,0)/o.length;return{displayedSessions:i?l:x,totalSessions:x,avgCost:d,hasPartialSample:i,recentSessions:o.slice(0,3)}},[s]);return t?e.jsxs(N,{className:u("flex flex-col h-full min-h-0 overflow-hidden gap-0 py-0",a),children:[e.jsx(v,{className:"px-3 py-2",children:e.jsx(p,{className:"h-5 w-32"})}),e.jsx(b,{className:"px-3 pb-3 pt-0 flex-1",children:e.jsx(p,{className:"h-full w-full"})})]}):r?e.jsxs(N,{className:u("flex flex-col h-full min-h-0 overflow-hidden gap-0 py-0 shadow-sm",a),children:[e.jsx(v,{className:"px-3 py-2",children:e.jsxs(P,{className:"text-base font-semibold flex items-center gap-2",children:[e.jsx(ne,{className:"w-4 h-4"}),"Session Stats"]})}),e.jsxs(b,{className:"px-3 pb-3 pt-0 flex-1 min-h-0 flex flex-col gap-3",children:[e.jsxs("div",{className:"grid grid-cols-2 gap-2",children:[e.jsxs("div",{className:"p-2 rounded-md bg-muted/50 border text-center",children:[e.jsxs("div",{className:"flex items-center justify-center gap-1.5 text-blue-600 dark:text-blue-400",children:[e.jsx(He,{className:"w-4 h-4"}),e.jsx("span",{className:"text-xl font-bold",children:r.displayedSessions})]}),e.jsx("p",{className:"text-[10px] text-muted-foreground uppercase tracking-wider mt-0.5",children:r.hasPartialSample?"Sampled Sessions":"Total Sessions"}),r.hasPartialSample&&e.jsxs("p",{className:"text-[10px] text-muted-foreground mt-0.5",children:[r.totalSessions," total"]})]}),e.jsxs("div",{className:"p-2 rounded-md bg-muted/50 border text-center",children:[e.jsxs("div",{className:"flex items-center justify-center gap-1.5 text-green-600 dark:text-green-400",children:[e.jsx(pe,{className:"w-4 h-4"}),e.jsxs("span",{className:u("text-xl font-bold",n&&k),children:["$",r.avgCost.toFixed(2)]})]}),e.jsx("p",{className:"text-[10px] text-muted-foreground uppercase tracking-wider mt-0.5",children:r.hasPartialSample?"Recent Avg Cost":"Avg Cost/Session"})]})]}),e.jsxs("div",{className:"flex-1 min-h-0 space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-1 text-xs text-muted-foreground font-medium mb-1",children:[e.jsx(Ve,{className:"w-3 h-3"}),"Recent Activity"]}),e.jsx("div",{className:"space-y-1.5 max-h-full overflow-y-auto pr-1",children:r.recentSessions.map(o=>e.jsxs("div",{className:"flex items-center justify-between text-xs p-1.5 rounded bg-muted/30 hover:bg-muted/50 transition-colors",children:[e.jsxs("div",{className:"flex flex-col min-w-0 flex-1",children:[e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsx("span",{className:"font-medium truncate",title:o.projectPath,children:Rs(o.projectPath)}),(o.target??"claude")!=="claude"&&e.jsx("span",{className:"shrink-0 px-1 py-0 text-[9px] font-medium rounded bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300 uppercase",children:o.target})]}),e.jsx("span",{className:"text-[10px] text-muted-foreground",children:ge(new Date(o.lastActivity),{addSuffix:!0})})]}),e.jsxs("div",{className:u("text-right shrink-0 ml-2",n&&k),children:[e.jsxs("div",{className:"font-mono",children:["$",o.cost.toFixed(2)]}),e.jsxs("div",{className:"text-[10px] text-muted-foreground",children:[Ms(o.tokens??o.inputTokens+o.outputTokens)," ","toks"]})]})]},o.sessionId))})]})]})]}):e.jsxs(N,{className:u("flex flex-col h-full min-h-0 overflow-hidden gap-0 py-0",a),children:[e.jsx(v,{className:"px-3 py-2",children:e.jsxs(P,{className:"text-base font-semibold flex items-center gap-2",children:[e.jsx(ne,{className:"w-4 h-4"}),"Session Stats"]})}),e.jsx(b,{className:"px-3 pb-3 pt-0 flex-1 flex items-center justify-center",children:e.jsx("p",{className:"text-sm text-muted-foreground text-center",children:c("analyticsCards.noSessionData")})})]})}function Ms(s){return s>=1e9?`${(s/1e9).toFixed(1)}B`:s>=1e6?`${(s/1e6).toFixed(1)}M`:s>=1e3?`${(s/1e3).toFixed(1)}K`:s.toString()}function Ds({className:s,isLoading:t}){const{data:a,isLoading:n}=Ie(),{data:c,isLoading:r,error:o}=Oe(a?.running),{t:x}=R();if(t||n||a?.running&&r)return e.jsxs(N,{className:u("flex flex-col h-full min-h-0 overflow-hidden gap-0 py-0",s),children:[e.jsx(v,{className:"px-3 py-2",children:e.jsxs(P,{className:"text-base font-semibold flex items-center gap-2",children:[e.jsx(Q,{className:"h-4 w-4"}),"CLIProxy Stats"]})}),e.jsx(b,{className:"px-3 pb-3 pt-0 flex-1",children:e.jsxs("div",{className:"space-y-3",children:[e.jsx(p,{className:"h-4 w-[100px]"}),e.jsx(p,{className:"h-16 w-full"})]})})]});if(!a?.running)return e.jsxs(N,{className:u("flex flex-col h-full min-h-0 overflow-hidden gap-0 py-0 border-dashed",s),children:[e.jsx(v,{className:"px-3 py-2",children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs(P,{className:"text-base font-semibold flex items-center gap-2",children:[e.jsx(Q,{className:"h-4 w-4 text-muted-foreground"}),"CLIProxy Stats"]}),e.jsx(_,{variant:"secondary",className:"text-[10px] h-5",children:x("cliproxyStatsOverview.offline")})]})}),e.jsx(b,{className:"px-3 pb-3 pt-0 flex-1 flex items-center justify-center",children:e.jsx("p",{className:"text-xs text-muted-foreground text-center",children:x("cliproxyStatsOverview.noActiveSessionHint")})})]});if(o)return e.jsxs(N,{className:u("flex flex-col h-full min-h-0 overflow-hidden gap-0 py-0 border-destructive/50",s),children:[e.jsx(v,{className:"px-3 py-2",children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs(P,{className:"text-base font-semibold flex items-center gap-2",children:[e.jsx(Q,{className:"h-4 w-4"}),"CLIProxy Stats"]}),e.jsx(_,{variant:"destructive",className:"text-[10px] h-5",children:"Error"})]})}),e.jsx(b,{className:"px-3 pb-3 pt-0 flex-1",children:e.jsx("p",{className:"text-xs text-destructive",children:o.message})})]});const i=c?.totalRequests??0,m=c?.quotaExceededCount??0,d=i-m,g=i>0?Math.round(d/i*100):100,S=c?.tokens?.total??0,C=Object.entries(c?.requestsByModel??{}).sort((y,T)=>T[1]-y[1]).slice(0,4),h=C.length>0?C[0][1]:1;return e.jsxs(N,{className:u("flex flex-col h-full min-h-0 overflow-hidden gap-0 py-0",s),children:[e.jsx(v,{className:"px-3 py-2 border-b bg-muted/5",children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs(P,{className:"text-base font-semibold flex items-center gap-2",children:[e.jsx(Q,{className:"h-4 w-4"}),"CLIProxy Stats"]}),e.jsxs(_,{variant:"outline",className:"text-[10px] h-5 text-green-600 border-green-200 bg-green-50 dark:bg-green-900/10 dark:border-green-800",children:[e.jsx(pe,{className:"h-3 w-3 mr-0.5"}),x("cliproxyStatsOverview.running")]})]})}),e.jsx(b,{className:"p-0 flex-1 min-h-0",children:e.jsx(Ue,{className:"h-full",children:e.jsxs("div",{className:"p-3 space-y-3",children:[e.jsxs("div",{className:"grid grid-cols-2 gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2 p-2 rounded-lg bg-muted/30",children:[e.jsxs("div",{className:"relative",children:[e.jsxs("svg",{className:"w-10 h-10 -rotate-90",viewBox:"0 0 36 36",children:[e.jsx("circle",{cx:"18",cy:"18",r:"14",fill:"none",stroke:"currentColor",strokeWidth:"3",className:"text-muted/30"}),e.jsx("circle",{cx:"18",cy:"18",r:"14",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeDasharray:`${g*.88} 88`,strokeLinecap:"round",className:g>=90?"text-green-500":"text-amber-500"})]}),e.jsxs("span",{className:"absolute inset-0 flex items-center justify-center text-[8px] font-bold",children:[g,"%"]})]}),e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"text-lg font-bold leading-none",children:ce(i)}),e.jsx("div",{className:"text-[9px] text-muted-foreground mt-0.5",children:m>0?`${m} failed`:"All success"})]})]}),e.jsxs("div",{className:"flex items-center gap-2 p-2 rounded-lg bg-muted/30",children:[e.jsx("div",{className:"p-1.5 rounded-md bg-purple-100 dark:bg-purple-900/20",children:e.jsx(Ye,{className:"h-4 w-4 text-purple-600"})}),e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"text-lg font-bold leading-none",children:ce(S)}),e.jsx("div",{className:"text-[9px] text-muted-foreground mt-0.5",children:x("cliproxyStatsOverview.totalTokens")})]})]})]}),C.length>0&&e.jsxs("div",{className:"space-y-1.5",children:[e.jsxs("div",{className:"flex items-center gap-1.5 text-[10px] font-medium text-muted-foreground",children:[e.jsx(ze,{className:"h-3 w-3"}),x("cliproxyStatsOverview.modelsUsed")]}),e.jsx("div",{className:"space-y-1",children:C.map(([y,T])=>{const E=Math.round(T/h*100),O=As(y);return e.jsxs("div",{className:"group",children:[e.jsxs("div",{className:"flex items-center justify-between text-[10px] mb-0.5",children:[e.jsx("span",{className:"truncate font-medium",title:y,children:O}),e.jsx("span",{className:"text-muted-foreground shrink-0 ml-2",children:T})]}),e.jsx("div",{className:"h-1 bg-muted/50 rounded-full overflow-hidden",children:e.jsx("div",{className:"h-full bg-accent/70 rounded-full transition-all",style:{width:`${E}%`}})})]},y)})})]})]})})})]})}function ce(s){return s>=1e6?`${(s/1e6).toFixed(1)}M`:s>=1e3?`${(s/1e3).toFixed(1)}K`:s.toLocaleString()}function As(s){let t=s.replace(/^gemini-claude-/,"").replace(/^gemini-/,"").replace(/^claude-/,"").replace(/^anthropic\./,"").replace(/-thinking$/," Thinking");return t=t.split(/[-_]/).map(a=>a.charAt(0).toUpperCase()+a.slice(1)).join(" "),t.length>20&&(t=t.slice(0,18)+"..."),t}function Bs(s){return s>=1e9?`${(s/1e9).toFixed(1)}B`:s>=1e6?`${(s/1e6).toFixed(1)}M`:s>=1e3?`${(s/1e3).toFixed(0)}K`:s.toString()}function Is({models:s,isLoading:t,onModelClick:a,privacyMode:n}){const{t:c}=R();return e.jsxs(N,{className:"flex flex-col h-full min-h-0 overflow-hidden gap-0 py-0 shadow-sm lg:col-span-4",children:[e.jsx(v,{className:"px-3 py-2",children:e.jsxs(P,{className:"text-base font-semibold flex items-center gap-2",children:[e.jsx(me,{className:"w-4 h-4"}),c("analyticsPages.costByModel")]})}),e.jsx(b,{className:"px-2 pb-2 pt-0 flex-1 min-h-0 overflow-y-auto",children:t?e.jsx(p,{className:"h-full w-full"}):e.jsxs("div",{className:"space-y-0.5",children:[[...s||[]].sort((r,o)=>o.cost-r.cost).map(r=>e.jsxs("button",{className:"group flex items-center text-xs w-full hover:bg-muted/50 rounded px-2 py-1.5 transition-colors cursor-pointer gap-3",onClick:o=>a(r,o),title:"Click for details",children:[e.jsxs("div",{className:"flex items-center gap-2 min-w-0 w-[180px] shrink-0",children:[e.jsx("div",{className:"w-2 h-2 rounded-full shrink-0",style:{backgroundColor:xe(r.model)}}),e.jsx("span",{className:"font-medium truncate group-hover:underline underline-offset-2",children:r.model})]}),e.jsx(Os,{model:r}),e.jsx("span",{className:u("text-[10px] text-muted-foreground w-14 text-right shrink-0",n&&k),children:Bs(r.tokens)}),e.jsxs("span",{className:u("font-mono font-medium w-16 text-right shrink-0",n&&k),children:["$",r.cost.toFixed(2)]}),e.jsx(Qe,{className:"w-3 h-3 opacity-0 group-hover:opacity-50 transition-opacity shrink-0"})]},r.model)),e.jsx(Us,{})]})})]})}function Os({model:s}){const t={input:"#335c67",output:"#fff3b0",cacheWrite:"#e09f3e",cacheRead:"#9e2a2b"},a=n=>s.cost>0?n/s.cost*100:0;return e.jsx("div",{className:"flex-1 flex items-center gap-1 min-w-0",children:e.jsxs("div",{className:"flex-1 h-2 bg-muted rounded-full overflow-hidden flex",children:[e.jsx("div",{className:"h-full",style:{backgroundColor:t.input,width:`${a(s.costBreakdown.input.cost)}%`},title:`Input: $${s.costBreakdown.input.cost.toFixed(2)}`}),e.jsx("div",{className:"h-full",style:{backgroundColor:t.output,width:`${a(s.costBreakdown.output.cost)}%`},title:`Output: $${s.costBreakdown.output.cost.toFixed(2)}`}),e.jsx("div",{className:"h-full",style:{backgroundColor:t.cacheWrite,width:`${a(s.costBreakdown.cacheCreation.cost)}%`},title:`Cache Write: $${s.costBreakdown.cacheCreation.cost.toFixed(2)}`}),e.jsx("div",{className:"h-full",style:{backgroundColor:t.cacheRead,width:`${a(s.costBreakdown.cacheRead.cost)}%`},title:`Cache Read: $${s.costBreakdown.cacheRead.cost.toFixed(2)}`})]})})}function Us(){const s=[{color:"#335c67",label:"Input"},{color:"#fff3b0",label:"Output",hasBorder:!0},{color:"#e09f3e",label:"Cache Write"},{color:"#9e2a2b",label:"Cache Read"}];return e.jsx("div",{className:"flex items-center gap-3 pt-2 px-2 text-[10px] text-muted-foreground border-t mt-2",children:s.map(({color:t,label:a,hasBorder:n})=>e.jsxs("span",{className:"flex items-center gap-1",children:[e.jsx("div",{className:u("w-2 h-2 rounded-full",n&&"border border-muted-foreground/30"),style:{backgroundColor:t}}),a]},a))})}function qs({viewMode:s,trends:t,hourlyData:a,models:n,sessions:c,isTrendsLoading:r,isHourlyLoading:o,isModelsLoading:x,isSessionsLoading:l,isSummaryLoading:i,onModelClick:m}){const{privacyMode:d}=U();return e.jsxs("div",{className:"min-h-0 grid gap-4 lg:grid-rows-[minmax(260px,1.2fr)_minmax(220px,0.9fr)]",children:[e.jsxs(N,{className:"flex flex-col h-full min-h-[220px] lg:min-h-[240px] overflow-hidden gap-0 py-0 shadow-sm",children:[e.jsx(v,{className:"px-3 py-2 shrink-0",children:e.jsxs(P,{className:"text-base font-semibold flex items-center gap-2",children:[e.jsx(Ze,{className:"w-4 h-4"}),s==="hourly"?"Last 24 Hours":"Usage Trends"]})}),e.jsx(b,{className:"px-3 pb-3 pt-0 flex-1 min-h-0",children:e.jsx(Ts,{data:s==="hourly"?a||[]:t||[],isLoading:s==="hourly"?o:r,granularity:s==="hourly"?"hourly":"daily"})})]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-10 gap-4 h-auto min-h-[220px] lg:h-full lg:min-h-[220px] lg:grid-rows-[minmax(0,1fr)] lg:[&>*]:min-h-0",children:[e.jsx(Is,{models:n,isLoading:x,onModelClick:m,privacyMode:d}),e.jsxs(N,{className:"flex flex-col h-full min-h-0 overflow-hidden gap-0 py-0 shadow-sm lg:col-span-2",children:[e.jsx(v,{className:"px-3 py-2",children:e.jsxs(P,{className:"text-base font-semibold flex items-center gap-2",children:[e.jsx(Xe,{className:"w-4 h-4"}),"Model Usage"]})}),e.jsx(b,{className:"px-2 pb-2 pt-0 flex-1 min-h-0 flex items-center justify-center",children:e.jsx($s,{data:n||[],isLoading:x,className:"h-full w-full"})})]}),e.jsx(Fs,{data:c,isLoading:l,className:"lg:col-span-2"}),e.jsx(Ds,{isLoading:i,className:"lg:col-span-2"})]})]})}function Zs(){return e.jsxs("div",{className:"space-y-4 h-full overflow-hidden",children:[e.jsxs(N,{className:"flex flex-col min-h-[300px]",children:[e.jsx(v,{className:"p-4 pb-2",children:e.jsx(p,{className:"h-4 w-32"})}),e.jsx(b,{className:"p-4 pt-0 flex-1",children:e.jsx(p,{className:"h-full w-full"})})]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-4",children:[e.jsxs(N,{className:"flex flex-col min-h-[250px]",children:[e.jsx(v,{className:"p-4 pb-2",children:e.jsx(p,{className:"h-4 w-28"})}),e.jsx(b,{className:"p-4 pt-2",children:e.jsx("div",{className:"space-y-3",children:[1,2,3,4,5].map(s=>e.jsxs("div",{className:"flex justify-between items-center",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(p,{className:"w-2.5 h-2.5 rounded-full"}),e.jsx(p,{className:"h-3 w-24"})]}),e.jsx(p,{className:"h-3 w-16"})]},s))})})]}),e.jsxs(N,{className:"flex flex-col min-h-[250px]",children:[e.jsx(v,{className:"p-4 pb-2",children:e.jsx(p,{className:"h-4 w-28"})}),e.jsx(b,{className:"p-4 pt-0 flex-1",children:e.jsxs("div",{className:"flex w-full h-full items-center",children:[e.jsx("div",{className:"flex-1 flex justify-center",children:e.jsx(p,{className:"h-[180px] w-[180px] rounded-full"})}),e.jsx("div",{className:"w-[140px] shrink-0 pl-2 space-y-2",children:[1,2,3,4].map(s=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(p,{className:"w-2 h-2 rounded-full"}),e.jsx(p,{className:"h-3 w-20"})]},s))})]})})]})]})]})}function Xs(){const s=f.useRef(null),{dateRange:t,handleDateRangeChange:a,handleTodayClick:n,handleRefresh:c,isRefreshing:r,lastUpdatedText:o,viewMode:x,selectedProfile:l,profileOptions:i,summary:m,isSummaryLoading:d,trends:g,hourlyData:S,models:C,sessions:h,isTrendsLoading:y,isHourlyLoading:T,isModelsLoading:E,isSessionsLoading:O,handleModelClick:J,handleProfileChange:G,selectedModel:K,popoverPosition:H,handlePopoverClose:ee}=ks();return e.jsxs("div",{className:"grid h-full min-h-0 grid-rows-[auto_auto_minmax(0,1fr)] gap-4 overflow-y-auto px-4 py-4",children:[e.jsx(Ss,{dateRange:t,onDateRangeChange:a,onTodayClick:n,onRefresh:c,isRefreshing:r,lastUpdatedText:o,viewMode:x,selectedProfile:l,profileOptions:i,onProfileChange:G}),e.jsx(is,{data:m,isLoading:d}),e.jsx(qs,{viewMode:x,trends:g,hourlyData:S,models:C,sessions:h,isTrendsLoading:y,isHourlyLoading:T,isModelsLoading:E,isSessionsLoading:O,isSummaryLoading:d,onModelClick:J}),e.jsxs(de,{open:!!K,onOpenChange:V=>!V&&ee(),children:[e.jsx(qe,{asChild:!0,children:e.jsx("div",{ref:s,className:"fixed pointer-events-none",style:{left:H?.x??0,top:H?.y??0,width:1,height:1}})}),e.jsx(ue,{className:"w-80 p-3",side:"top",align:"center",children:K&&e.jsx(cs,{model:K})})]})]})}export{Xs as AnalyticsPage,Zs as AnalyticsSkeleton};