@kaitranntt/ccs 7.71.0-dev.1 → 7.71.0-dev.10

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

@@ -1 +0,0 @@
-import{j as e}from"./radix-ui-Zb8sVEtn.js";import{r as f,c as pe}from"./react-vendor-CNOkPC89.js";import{u as A,a as L,C as g,b as j,S as h,c as d,P as w,B as I,d as _,e as se,f as ge,g as te,h as je,i as ae,j as N,k as S,l as ye,m as Ne,n as we,o as ve}from"./index-B1mN7ZR-.js";import{a3 as be,al as re,am as Y,an as ne,a1 as le,aa as ke,G as Ce,ao as Se,R as De,$ as V,U as $e,Z as ie,v as Le,ad as H,ap as Fe,Y as Re,C as Te,aq as Me,ar as Pe}from"./icons-KVCk4_U8.js";import{a as Be,u as U}from"./tanstack-CrmUhA7Z.js";import{K as T,L as Q,f as C,H as Ae}from"./utils-CzKF5WmX.js";import{R as oe,A as Ue,C as qe,X as Oe,Y as Z,T as ce,a as X,P as Ie,b as Ke,c as Ee}from"./charts-BBPXh0Ar.js";import"./notifications-B2HqRBj7.js";import"./form-utils-Bcoyqxpq.js";import"./code-highlight-BRUf_pqB.js";function Ge({data:s,isLoading:t}){const{privacyMode:a}=A(),{t:r}=L();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(n=>e.jsx(g,{children:e.jsx(j,{className:"p-6",children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(h,{className:"h-4 w-[100px]"}),e.jsx(h,{className:"h-8 w-[80px]"})]}),e.jsx(h,{className:"h-8 w-8 rounded-lg"})]})})},n))});const c=(s?.tokenBreakdown?.cacheCreation?.cost??0)+(s?.tokenBreakdown?.cacheRead?.cost??0),o=s?.totalCost?Math.round(c/s.totalCost*100):0,i=[{title:r("analyticsSummary.totalTokens"),value:s?.totalTokens??0,icon:be,format:n=>B(n),color:"text-blue-600",bgColor:"bg-blue-100 dark:bg-blue-900/20",subtitle:r("analyticsSummary.totalTokensSubtitle",{input:B(s?.totalInputTokens??0),output:B(s?.totalOutputTokens??0)})},{title:r("analyticsSummary.totalCost"),value:s?.totalCost??0,icon:re,format:n=>`$${n.toFixed(2)}`,color:"text-green-600",bgColor:"bg-green-100 dark:bg-green-900/20",subtitle:r("analyticsSummary.totalCostSubtitle",{value:s?.averageCostPerDay?.toFixed(2)??"0.00"})},{title:r("analyticsSummary.cacheTokens"),value:s?.totalCacheTokens??0,icon:Y,format:n=>B(n),color:"text-cyan-600",bgColor:"bg-cyan-100 dark:bg-cyan-900/20",subtitle:r("analyticsSummary.cacheTokensSubtitle",{cost:c.toFixed(2),percent:o})},{title:r("analyticsSummary.inputCost"),value:s?.tokenBreakdown?.input?.cost??0,icon:ne,format:n=>`$${n.toFixed(2)}`,color:"text-purple-600",bgColor:"bg-purple-100 dark:bg-purple-900/20",subtitle:r("analyticsSummary.tokensSubtitle",{value:B(s?.tokenBreakdown?.input?.tokens??0)})},{title:r("analyticsSummary.outputCost"),value:s?.tokenBreakdown?.output?.cost??0,icon:le,format:n=>`$${n.toFixed(2)}`,color:"text-orange-600",bgColor:"bg-orange-100 dark:bg-orange-900/20",subtitle:r("analyticsSummary.tokensSubtitle",{value:B(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:i.map((n,l)=>{const x=n.icon;return e.jsx(g,{className:"hover:shadow-md transition-shadow",children:e.jsx(j,{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:n.title}),e.jsx("p",{className:d("text-xl font-bold truncate",a&&w),children:n.format(n.value)}),n.subtitle&&e.jsx("p",{className:d("text-[10px] text-muted-foreground truncate",a&&w),children:n.subtitle})]}),e.jsx("div",{className:d("p-2 rounded-lg shrink-0",n.bgColor),children:e.jsx(x,{className:d("h-4 w-4",n.color)})})]})})},l)})})}function B(s){return s>=1e6?`${(s/1e6).toFixed(1)}M`:s>=1e3?`${(s/1e3).toFixed(1)}K`:s.toLocaleString()}function He({model:s}){const{privacyMode:t}=A(),{t:a}=L(),r=We(s.ioRatio);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(I,{variant:"secondary",className:"text-[10px] h-5 px-1.5",children:[s.percentage.toFixed(1),"% usage"]}),e.jsxs(I,{variant:r.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:d("text-lg font-bold",t&&w),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:d("text-lg font-bold",t&&w),children:ze(s.tokens)}),e.jsx("p",{className:"text-[10px] text-muted-foreground uppercase tracking-wider",children:a("analyticsCards.totalTokens")})]})]}),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:d("space-y-1",t&&w),children:[e.jsx(W,{label:"Input",tokens:s.inputTokens,cost:s.costBreakdown.input.cost,color:"#335c67",icon:ne}),e.jsx(W,{label:"Output",tokens:s.outputTokens,cost:s.costBreakdown.output.cost,color:"#fff3b0",icon:le}),e.jsx(W,{label:"Cache Write",tokens:s.cacheCreationTokens,cost:s.costBreakdown.cacheCreation.cost,color:"#e09f3e",icon:Y}),e.jsx(W,{label:"Cache Read",tokens:s.cacheReadTokens,cost:s.costBreakdown.cacheRead.cost,color:"#9e2a2b",icon:Y})]})]}),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(Ce,{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:r.description})]})]})}function W({label:s,tokens:t,cost:a,color:r,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:r}}),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:_e(t)})]})]})]})}function We(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 _e(s){return s.toLocaleString()}function ze(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 Ye="/api";function v(s){const t=s.getFullYear(),a=String(s.getMonth()+1).padStart(2,"0"),r=String(s.getDate()).padStart(2,"0");return`${t}${a}${r}`}const M={summary:s=>{const t=new URLSearchParams;return s?.startDate&&t.append("since",v(s.startDate)),s?.endDate&&t.append("until",v(s.endDate)),s?.profile&&t.append("profile",s.profile),$(`/usage/summary?${t}`)},trends:s=>{const t=new URLSearchParams;return s?.startDate&&t.append("since",v(s.startDate)),s?.endDate&&t.append("until",v(s.endDate)),s?.profile&&t.append("profile",s.profile),$(`/usage/daily?${t}`)},hourly:s=>{const t=new URLSearchParams;return s?.startDate&&t.append("since",v(s.startDate)),s?.endDate&&t.append("until",v(s.endDate)),$(`/usage/hourly?${t}`)},models:s=>{const t=new URLSearchParams;return s?.startDate&&t.append("since",v(s.startDate)),s?.endDate&&t.append("until",v(s.endDate)),s?.profile&&t.append("profile",s.profile),$(`/usage/models?${t}`)},sessions:s=>{const t=new URLSearchParams;return s?.startDate&&t.append("since",v(s.startDate)),s?.endDate&&t.append("until",v(s.endDate)),s?.profile&&t.append("profile",s.profile),s?.limit&&t.append("limit",s.limit.toString()),s?.offset&&t.append("offset",s.offset.toString()),$(`/usage/sessions?${t}`)},monthly:(s,t)=>{const a=new URLSearchParams;return s&&a.append("months",s.toString()),t&&a.append("profile",t),$(`/usage/monthly?${a}`)},refresh:async()=>{if(!(await fetch(`${Ye}/usage/refresh`,{method:"POST",headers:{"Content-Type":"application/json"}})).ok)throw new Error("Failed to refresh usage cache")},status:()=>$("/usage/status"),insights:s=>{const t=new URLSearchParams;return s?.startDate&&t.append("since",v(s.startDate)),s?.endDate&&t.append("until",v(s.endDate)),s?.profile&&t.append("profile",s.profile),$(`/usage/insights?${t}`)}};async function $(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 r=await a.json();return r.data||r}function Qe(s){return U({queryKey:["usage","summary",s],queryFn:()=>M.summary(s),staleTime:60*1e3})}function Ve(s){return U({queryKey:["usage","trends",s],queryFn:()=>M.trends(s),staleTime:60*1e3})}function Ze(s){return U({queryKey:["usage","hourly",s],queryFn:()=>M.hourly(s),staleTime:60*1e3})}function Xe(s){return U({queryKey:["usage","models",s],queryFn:()=>M.models(s),staleTime:60*1e3})}function Je(){const s=Be();return f.useCallback(async()=>{await M.refresh(),await s.invalidateQueries({queryKey:["usage"]})},[s])}function es(){return U({queryKey:["usage","status"],queryFn:()=>M.status(),staleTime:10*1e3,refetchInterval:30*1e3})}function ss(s){return U({queryKey:["usage","sessions",s],queryFn:()=>M.sessions(s),staleTime:60*1e3})}function ts(){const[s,t]=f.useState({from:T(new Date,30),to:new Date}),[a,r]=f.useState(!1),[c,o]=f.useState(null),[i,n]=f.useState(null),[l,x]=f.useState("daily"),m=Je(),u=f.useCallback(async()=>{r(!0);try{await m()}finally{r(!1)}},[m]),p=f.useMemo(()=>({startDate:s?.from,endDate:s?.to}),[s?.from,s?.to]),{data:F,isLoading:y}=Qe(p),{data:b,isLoading:k}=Ve(p),{data:D,isLoading:q}=Ze(p),{data:R,isLoading:O}=Xe(p),{data:z,isLoading:K}=ss({...p,limit:3}),{data:E}=es(),de=f.useCallback(()=>{const P=new Date;t({from:T(P,1),to:P}),x("hourly")},[]),xe=f.useCallback(P=>{t(P),x("daily")},[]),ue=f.useMemo(()=>E?.lastFetch?Q(new Date(E.lastFetch),{addSuffix:!0}):null,[E?.lastFetch]),me=f.useCallback((P,fe)=>{const G=fe.currentTarget.getBoundingClientRect();n({x:G.left+G.width/2,y:G.top+G.height/2}),o(P)},[]),he=f.useCallback(()=>{o(null),n(null)},[]);return{dateRange:s,isRefreshing:a,viewMode:l,selectedModel:c,popoverPosition:i,summary:F,trends:b,hourlyData:D,models:R,sessions:z,status:E,isSummaryLoading:y,isTrendsLoading:k,isHourlyLoading:q,isModelsLoading:O,isSessionsLoading:K,isLoading:y||k||O||K,handleRefresh:u,handleTodayClick:de,handleDateRangeChange:xe,handleModelClick:me,handlePopoverClose:he,lastUpdatedText:ue}}function as({value:s,onChange:t,presets:a=[{label:"Last 7 days",range:{from:T(new Date,7),to:new Date}},{label:"Last 30 days",range:{from:T(new Date,30),to:new Date}},{label:"Last 90 days",range:{from:T(new Date,90),to:new Date}}],className:r}){const[c,o]=pe.useState(!1),{t:i}=L(),n=l=>!s||!s.from||!s.to||!l.from||!l.to?!1:C(s.from,"yyyy-MM-dd")===C(l.from,"yyyy-MM-dd")&&C(s.to,"yyyy-MM-dd")===C(l.to,"yyyy-MM-dd");return e.jsxs("div",{className:d("flex flex-wrap items-center gap-2",r),children:[a.map(l=>e.jsx(_,{variant:n(l.range)?"default":"outline",size:"sm",onClick:()=>t(l.range),children:l.label},l.label)),e.jsxs(se,{open:c,onOpenChange:o,children:[e.jsx(ge,{asChild:!0,children:e.jsxs(_,{id:"date",variant:"outline",className:d("w-auto min-w-[200px] sm:min-w-[240px] justify-start text-left font-normal",!s&&"text-muted-foreground"),children:[e.jsx(Se,{className:"mr-2 h-4 w-4"}),s?.from?s.to?e.jsxs(e.Fragment,{children:[C(s.from,"LLL dd, y")," - ",C(s.to,"LLL dd, y")]}):C(s.from,"LLL dd, y"):e.jsx("span",{children:i("dateRangeFilter.pickADate")})]})}),e.jsx(te,{className:"w-auto p-0",align:"end",children:e.jsx(je,{initialFocus:!0,mode:"range",defaultMonth:s?.from,selected:s,onSelect:t,numberOfMonths:2})})]})]})}function rs({dateRange:s,onDateRangeChange:t,onTodayClick:a,onRefresh:r,isRefreshing:c,lastUpdatedText:o,viewMode:i}){const{t:n}=L();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:n("analytics.title")}),e.jsx("p",{className:"text-sm text-muted-foreground",children:n("analytics.subtitle")})]}),e.jsxs("div",{className:"flex flex-wrap items-center gap-2 xl:justify-end",children:[e.jsx(_,{variant:i==="hourly"?"default":"outline",size:"sm",className:"h-8",onClick:a,children:"24H"}),e.jsx(as,{className:"flex-wrap",value:s,onChange:t,presets:[{label:"7D",range:{from:T(new Date,7),to:new Date}},{label:"30D",range:{from:T(new Date,30),to:new Date}},{label:n("analytics.month"),range:{from:Ae(new Date),to:new Date}},{label:n("analytics.allTime"),range:{from:void 0,to:new Date}}]}),o&&e.jsx("span",{className:"text-xs text-muted-foreground whitespace-nowrap",children:n("analytics.updated",{value:o})}),e.jsx(_,{variant:"outline",size:"sm",className:"gap-2 h-8",onClick:r,disabled:c,children:e.jsx(De,{className:`w-3.5 h-3.5 ${c?"animate-spin":""}`})})]})]})}function ns({data:s,isLoading:t,granularity:a="daily",className:r}){const{privacyMode:c}=A(),o=f.useMemo(()=>!s||s.length===0?[]:(a==="hourly"?s:[...s].reverse()).map(l=>{const x="hour"in l?l.hour:l.date;return{...l,dateFormatted:ls(x,a),costRounded:Number(l.cost.toFixed(4))}}),[s,a]);if(t)return e.jsx(h,{className:d("h-full w-full",r)});if(!s||s.length===0)return e.jsx("div",{className:d("h-full flex items-center justify-center",r),children:e.jsx("p",{className:"text-muted-foreground",children:a==="hourly"?"No usage data for today":"No usage data available"})});const i=({x:n,y:l,payload:x,isRight:m})=>{const u=m?`$${x.value}`:J(Number(x.value));return e.jsx("text",{x:n,y:l,dy:4,textAnchor:m?"start":"end",fontSize:12,fill:"currentColor",className:d("fill-muted-foreground",c&&"blur-[4px]"),children:u})};return e.jsx("div",{className:d("w-full h-full",r),children:e.jsx(oe,{width:"100%",height:"100%",children:e.jsxs(Ue,{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(qe,{strokeDasharray:"3 3",className:"stroke-muted"}),e.jsx(Oe,{dataKey:"dateFormatted",tick:{fontSize:12},tickLine:!1,axisLine:{className:"stroke-muted"}}),e.jsx(Z,{yAxisId:"left",orientation:"left",tick:n=>e.jsx(i,{...n,isRight:!1}),tickLine:!1,axisLine:{className:"stroke-muted"}}),e.jsx(Z,{yAxisId:"right",orientation:"right",tick:n=>e.jsx(i,{...n,isRight:!0}),tickLine:!1,axisLine:{className:"stroke-muted"}}),e.jsx(ce,{content:({active:n,payload:l,label:x})=>{if(!n||!l||!l.length)return null;const m=l[0].payload;return e.jsxs("div",{className:"rounded-lg border bg-background p-3 shadow-lg",children:[e.jsx("p",{className:"font-medium mb-2",children:x}),l.map((u,p)=>e.jsxs("p",{className:d("text-sm",c&&w),style:{color:u.color},children:[u.name,":"," ",u.name==="Tokens"?J(Number(u.value)||0):`$${u.value}`]},p)),"requests"in m&&e.jsxs("p",{className:d("text-sm text-muted-foreground mt-1",c&&w),children:["Requests: ",m.requests]})]})}}),e.jsx(X,{yAxisId:"left",type:"monotone",dataKey:"tokens",stroke:"#0080FF",strokeWidth:2,fillOpacity:1,fill:"url(#tokenGradient)",name:"Tokens"}),e.jsx(X,{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[r,c]=s.split(" ");if(r&&c){const o=new Date(`${r}T${c}:00Z`);return C(o,"HH:mm")}return s}const a=new Date(s);return t==="monthly"?C(a,"MMM yyyy"):C(a,"MMM dd")}function J(s){return s>=1e6?`${(s/1e6).toFixed(1)}M`:s>=1e3?`${(s/1e3).toFixed(1)}K`:s.toLocaleString()}function is({data:s,isLoading:t,className:a}){const{privacyMode:r}=A(),{t:c}=L(),o=f.useMemo(()=>!s||s.length===0?[]:s.map(l=>({name:l.model,value:l.tokens,cost:l.cost,percentage:l.percentage,fill:ae(l.model)})),[s]);if(t)return e.jsx(h,{className:d("h-full min-h-[100px] w-full",a)});if(!s||s.length===0)return e.jsx("div",{className:d("h-full min-h-[100px] flex items-center justify-center",a),children:e.jsx("p",{className:"text-muted-foreground",children:c("analyticsCards.noModelData")})});const i=({active:l,payload:x})=>{if(!l||!x)return null;const m=x;if(!m.length)return null;const u=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:u.name}),e.jsxs("p",{className:d("text-muted-foreground",r&&w),children:[os(u.value)," (",u.percentage.toFixed(1),"%)"]}),e.jsxs("p",{className:d("text-muted-foreground",r&&w),children:["$",u.cost.toFixed(4)]})]})},n=l=>l.percentage>5?`${l.percentage.toFixed(1)}%`:"";return e.jsx("div",{className:d("w-full h-full min-h-[100px]",a),children:e.jsx(oe,{width:"100%",height:"100%",children:e.jsxs(Ie,{children:[e.jsx(Ke,{data:o,cx:"50%",cy:"50%",labelLine:!1,label:n,innerRadius:50,outerRadius:70,paddingAngle:2,dataKey:"value",children:o.map((l,x)=>e.jsx(Ee,{fill:l.fill,strokeWidth:1},`cell-${x}`))}),e.jsx(ce,{content:i})]})})})}function os(s){return s>=1e6?`${(s/1e6).toFixed(1)}M`:s>=1e3?`${(s/1e3).toFixed(1)}K`:s.toLocaleString()}function cs(s){if(!s)return"";const a=s.replace(/^\/|\/$/g,"").split("/").filter(r=>r.length>0);return a[a.length-1]||""}function ds({data:s,isLoading:t,className:a}){const{privacyMode:r}=A(),{t:c}=L(),o=f.useMemo(()=>{if(!s?.sessions||s.sessions.length===0)return null;const i=s.sessions,n=s.total,l=i.reduce((y,b)=>y+(b.inputTokens+b.outputTokens),0),x=Math.round(l/i.length),u=i.reduce((y,b)=>y+b.cost,0)/i.length,p=i[0],F=p?Q(new Date(p.lastActivity),{addSuffix:!0}):"N/A";return{totalSessions:n,avgTokens:x,avgCost:u,lastActive:F,recentSessions:i.slice(0,3)}},[s]);return t?e.jsxs(g,{className:d("flex flex-col h-full min-h-0 overflow-hidden gap-0 py-0",a),children:[e.jsx(N,{className:"px-3 py-2",children:e.jsx(h,{className:"h-5 w-32"})}),e.jsx(j,{className:"px-3 pb-3 pt-0 flex-1",children:e.jsx(h,{className:"h-full w-full"})})]}):o?e.jsxs(g,{className:d("flex flex-col h-full min-h-0 overflow-hidden gap-0 py-0 shadow-sm",a),children:[e.jsx(N,{className:"px-3 py-2",children:e.jsxs(S,{className:"text-base font-semibold flex items-center gap-2",children:[e.jsx(V,{className:"w-4 h-4"}),"Session Stats"]})}),e.jsxs(j,{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($e,{className:"w-4 h-4"}),e.jsx("span",{className:"text-xl font-bold",children:o.totalSessions})]}),e.jsx("p",{className:"text-[10px] text-muted-foreground uppercase tracking-wider mt-0.5",children:"Total Sessions"})]}),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(ie,{className:"w-4 h-4"}),e.jsxs("span",{className:d("text-xl font-bold",r&&w),children:["$",o.avgCost.toFixed(2)]})]}),e.jsx("p",{className:"text-[10px] text-muted-foreground uppercase tracking-wider mt-0.5",children:"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(Le,{className:"w-3 h-3"}),"Recent Activity"]}),e.jsx("div",{className:"space-y-1.5 max-h-full overflow-y-auto pr-1",children:o.recentSessions.map(i=>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:i.projectPath,children:cs(i.projectPath)}),(i.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:i.target})]}),e.jsx("span",{className:"text-[10px] text-muted-foreground",children:Q(new Date(i.lastActivity),{addSuffix:!0})})]}),e.jsxs("div",{className:d("text-right shrink-0 ml-2",r&&w),children:[e.jsxs("div",{className:"font-mono",children:["$",i.cost.toFixed(2)]}),e.jsxs("div",{className:"text-[10px] text-muted-foreground",children:[xs(i.inputTokens+i.outputTokens)," toks"]})]})]},i.sessionId))})]})]})]}):e.jsxs(g,{className:d("flex flex-col h-full min-h-0 overflow-hidden gap-0 py-0",a),children:[e.jsx(N,{className:"px-3 py-2",children:e.jsxs(S,{className:"text-base font-semibold flex items-center gap-2",children:[e.jsx(V,{className:"w-4 h-4"}),"Session Stats"]})}),e.jsx(j,{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 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()}function us({className:s,isLoading:t}){const{data:a,isLoading:r}=ye(),{data:c,isLoading:o,error:i}=Ne(a?.running),{t:n}=L();if(t||r||a?.running&&o)return e.jsxs(g,{className:d("flex flex-col h-full min-h-0 overflow-hidden gap-0 py-0",s),children:[e.jsx(N,{className:"px-3 py-2",children:e.jsxs(S,{className:"text-base font-semibold flex items-center gap-2",children:[e.jsx(H,{className:"h-4 w-4"}),"CLIProxy Stats"]})}),e.jsx(j,{className:"px-3 pb-3 pt-0 flex-1",children:e.jsxs("div",{className:"space-y-3",children:[e.jsx(h,{className:"h-4 w-[100px]"}),e.jsx(h,{className:"h-16 w-full"})]})})]});if(!a?.running)return e.jsxs(g,{className:d("flex flex-col h-full min-h-0 overflow-hidden gap-0 py-0 border-dashed",s),children:[e.jsx(N,{className:"px-3 py-2",children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs(S,{className:"text-base font-semibold flex items-center gap-2",children:[e.jsx(H,{className:"h-4 w-4 text-muted-foreground"}),"CLIProxy Stats"]}),e.jsx(I,{variant:"secondary",className:"text-[10px] h-5",children:n("cliproxyStatsOverview.offline")})]})}),e.jsx(j,{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:n("cliproxyStatsOverview.noActiveSessionHint")})})]});if(i)return e.jsxs(g,{className:d("flex flex-col h-full min-h-0 overflow-hidden gap-0 py-0 border-destructive/50",s),children:[e.jsx(N,{className:"px-3 py-2",children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs(S,{className:"text-base font-semibold flex items-center gap-2",children:[e.jsx(H,{className:"h-4 w-4"}),"CLIProxy Stats"]}),e.jsx(I,{variant:"destructive",className:"text-[10px] h-5",children:"Error"})]})}),e.jsx(j,{className:"px-3 pb-3 pt-0 flex-1",children:e.jsx("p",{className:"text-xs text-destructive",children:i.message})})]});const x=c?.totalRequests??0,m=c?.quotaExceededCount??0,u=x-m,p=x>0?Math.round(u/x*100):100,F=c?.tokens?.total??0,y=Object.entries(c?.requestsByModel??{}).sort((k,D)=>D[1]-k[1]).slice(0,4),b=y.length>0?y[0][1]:1;return e.jsxs(g,{className:d("flex flex-col h-full min-h-0 overflow-hidden gap-0 py-0",s),children:[e.jsx(N,{className:"px-3 py-2 border-b bg-muted/5",children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs(S,{className:"text-base font-semibold flex items-center gap-2",children:[e.jsx(H,{className:"h-4 w-4"}),"CLIProxy Stats"]}),e.jsxs(I,{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(ie,{className:"h-3 w-3 mr-0.5"}),n("cliproxyStatsOverview.running")]})]})}),e.jsx(j,{className:"p-0 flex-1 min-h-0",children:e.jsx(we,{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:`${p*.88} 88`,strokeLinecap:"round",className:p>=90?"text-green-500":"text-amber-500"})]}),e.jsxs("span",{className:"absolute inset-0 flex items-center justify-center text-[8px] font-bold",children:[p,"%"]})]}),e.jsxs("div",{className:"min-w-0",children:[e.jsx("div",{className:"text-lg font-bold leading-none",children:ee(x)}),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(Fe,{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:ee(F)}),e.jsx("div",{className:"text-[9px] text-muted-foreground mt-0.5",children:n("cliproxyStatsOverview.totalTokens")})]})]})]}),y.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(Re,{className:"h-3 w-3"}),n("cliproxyStatsOverview.modelsUsed")]}),e.jsx("div",{className:"space-y-1",children:y.map(([k,D])=>{const q=Math.round(D/b*100),R=ms(k);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:k,children:R}),e.jsx("span",{className:"text-muted-foreground shrink-0 ml-2",children:D})]}),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:`${q}%`}})})]},k)})})]})]})})})]})}function ee(s){return s>=1e6?`${(s/1e6).toFixed(1)}M`:s>=1e3?`${(s/1e3).toFixed(1)}K`:s.toLocaleString()}function ms(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 hs(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 fs({models:s,isLoading:t,onModelClick:a,privacyMode:r}){const{t:c}=L();return e.jsxs(g,{className:"flex flex-col h-full min-h-0 overflow-hidden gap-0 py-0 shadow-sm lg:col-span-4",children:[e.jsx(N,{className:"px-3 py-2",children:e.jsxs(S,{className:"text-base font-semibold flex items-center gap-2",children:[e.jsx(re,{className:"w-4 h-4"}),c("analyticsPages.costByModel")]})}),e.jsx(j,{className:"px-2 pb-2 pt-0 flex-1 min-h-0 overflow-y-auto",children:t?e.jsx(h,{className:"h-full w-full"}):e.jsxs("div",{className:"space-y-0.5",children:[[...s||[]].sort((o,i)=>i.cost-o.cost).map(o=>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:i=>a(o,i),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:ae(o.model)}}),e.jsx("span",{className:"font-medium truncate group-hover:underline underline-offset-2",children:o.model})]}),e.jsx(ps,{model:o}),e.jsx("span",{className:d("text-[10px] text-muted-foreground w-14 text-right shrink-0",r&&w),children:hs(o.tokens)}),e.jsxs("span",{className:d("font-mono font-medium w-16 text-right shrink-0",r&&w),children:["$",o.cost.toFixed(2)]}),e.jsx(Te,{className:"w-3 h-3 opacity-0 group-hover:opacity-50 transition-opacity shrink-0"})]},o.model)),e.jsx(gs,{})]})})]})}function ps({model:s}){const t={input:"#335c67",output:"#fff3b0",cacheWrite:"#e09f3e",cacheRead:"#9e2a2b"},a=r=>s.cost>0?r/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 gs(){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:r})=>e.jsxs("span",{className:"flex items-center gap-1",children:[e.jsx("div",{className:d("w-2 h-2 rounded-full",r&&"border border-muted-foreground/30"),style:{backgroundColor:t}}),a]},a))})}function js({viewMode:s,trends:t,hourlyData:a,models:r,sessions:c,isTrendsLoading:o,isHourlyLoading:i,isModelsLoading:n,isSessionsLoading:l,isSummaryLoading:x,onModelClick:m}){const{privacyMode:u}=A();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(g,{className:"flex flex-col h-full min-h-[220px] lg:min-h-[240px] overflow-hidden gap-0 py-0 shadow-sm",children:[e.jsx(N,{className:"px-3 py-2 shrink-0",children:e.jsxs(S,{className:"text-base font-semibold flex items-center gap-2",children:[e.jsx(Me,{className:"w-4 h-4"}),s==="hourly"?"Last 24 Hours":"Usage Trends"]})}),e.jsx(j,{className:"px-3 pb-3 pt-0 flex-1 min-h-0",children:e.jsx(ns,{data:s==="hourly"?a||[]:t||[],isLoading:s==="hourly"?i:o,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(fs,{models:r,isLoading:n,onModelClick:m,privacyMode:u}),e.jsxs(g,{className:"flex flex-col h-full min-h-0 overflow-hidden gap-0 py-0 shadow-sm lg:col-span-2",children:[e.jsx(N,{className:"px-3 py-2",children:e.jsxs(S,{className:"text-base font-semibold flex items-center gap-2",children:[e.jsx(Pe,{className:"w-4 h-4"}),"Model Usage"]})}),e.jsx(j,{className:"px-2 pb-2 pt-0 flex-1 min-h-0 flex items-center justify-center",children:e.jsx(is,{data:r||[],isLoading:n,className:"h-full w-full"})})]}),e.jsx(ds,{data:c,isLoading:l,className:"lg:col-span-2"}),e.jsx(us,{isLoading:x,className:"lg:col-span-2"})]})]})}function Ls(){return e.jsxs("div",{className:"space-y-4 h-full overflow-hidden",children:[e.jsxs(g,{className:"flex flex-col min-h-[300px]",children:[e.jsx(N,{className:"p-4 pb-2",children:e.jsx(h,{className:"h-4 w-32"})}),e.jsx(j,{className:"p-4 pt-0 flex-1",children:e.jsx(h,{className:"h-full w-full"})})]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-4",children:[e.jsxs(g,{className:"flex flex-col min-h-[250px]",children:[e.jsx(N,{className:"p-4 pb-2",children:e.jsx(h,{className:"h-4 w-28"})}),e.jsx(j,{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(h,{className:"w-2.5 h-2.5 rounded-full"}),e.jsx(h,{className:"h-3 w-24"})]}),e.jsx(h,{className:"h-3 w-16"})]},s))})})]}),e.jsxs(g,{className:"flex flex-col min-h-[250px]",children:[e.jsx(N,{className:"p-4 pb-2",children:e.jsx(h,{className:"h-4 w-28"})}),e.jsx(j,{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(h,{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(h,{className:"w-2 h-2 rounded-full"}),e.jsx(h,{className:"h-3 w-20"})]},s))})]})})]})]})]})}function Fs(){const s=f.useRef(null),{dateRange:t,handleDateRangeChange:a,handleTodayClick:r,handleRefresh:c,isRefreshing:o,lastUpdatedText:i,viewMode:n,summary:l,isSummaryLoading:x,trends:m,hourlyData:u,models:p,sessions:F,isTrendsLoading:y,isHourlyLoading:b,isModelsLoading:k,isSessionsLoading:D,handleModelClick:q,selectedModel:R,popoverPosition:O,handlePopoverClose:z}=ts();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(rs,{dateRange:t,onDateRangeChange:a,onTodayClick:r,onRefresh:c,isRefreshing:o,lastUpdatedText:i,viewMode:n}),e.jsx(Ge,{data:l,isLoading:x}),e.jsx(js,{viewMode:n,trends:m,hourlyData:u,models:p,sessions:F,isTrendsLoading:y,isHourlyLoading:b,isModelsLoading:k,isSessionsLoading:D,isSummaryLoading:x,onModelClick:q}),e.jsxs(se,{open:!!R,onOpenChange:K=>!K&&z(),children:[e.jsx(ve,{asChild:!0,children:e.jsx("div",{ref:s,className:"fixed pointer-events-none",style:{left:O?.x??0,top:O?.y??0,width:1,height:1}})}),e.jsx(te,{className:"w-80 p-3",side:"top",align:"center",children:R&&e.jsx(He,{model:R})})]})]})}export{Fs as AnalyticsPage,Ls as AnalyticsSkeleton};