@kaitranntt/ccs 7.53.0-dev.2 → 7.53.0-dev.4

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

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