@wrongstack/webui-hq 0.309.0 → 0.310.0

package/dist/assets/trends-B1FxOq-M.js

@@ -1 +0,0 @@
-import{r as e}from"./rolldown-runtime-hePW80VL.js";import{Zt as t}from"./icons-I81S_8cW.js";import{i as n}from"./markdown-C4I0Caum.js";import{s as r}from"./index-C5Ihi44B.js";var i=e(t(),1),a=n();function o({points:e,color:t,height:n=140,format:r,emptyLabel:o=`no data`}){let[s,c]=(0,i.useState)(null),l=(0,i.useId)(),u=n,d=u-10-22,f=(0,i.useMemo)(()=>Math.max(...e.map(e=>e.value),0),[e]);if(e.length===0||f<=0)return(0,a.jsx)(`div`,{className:`hq-chart-empty`,children:o});let p=e.length,m=666/p,h=Math.max(2,Math.min(18,m-2)),g=e=>10+d*(1-e/f),_=[f*.25,f*.5,f*.75,f],v=Math.max(1,Math.round(p/5)),y=e=>new Date(e).toLocaleTimeString([],{hour:`2-digit`,minute:`2-digit`}),b=s===null?void 0:e[s];return(0,a.jsxs)(`div`,{className:`hq-chart`,children:[(0,a.jsxs)(`svg`,{viewBox:`0 0 720 ${u}`,className:`hq-chart-svg`,role:`img`,"aria-label":`Time series chart with ${e.length} data points`,onMouseLeave:()=>c(null),onMouseMove:t=>{let n=t.currentTarget.getBoundingClientRect(),r=(t.clientX-n.left)/n.width*720,i=Math.floor((r-46)/m);c(i>=0&&i<e.length?i:null)},children:[(0,a.jsx)(`clipPath`,{id:l,children:(0,a.jsx)(`rect`,{x:46,y:10,width:666,height:d})}),_.map((e,t)=>(0,a.jsxs)(`g`,{children:[(0,a.jsx)(`line`,{x1:46,x2:712,y1:g(e),y2:g(e),className:`hq-chart-grid`}),(0,a.jsx)(`text`,{x:40,y:g(e)+3,className:`hq-chart-ytick`,textAnchor:`end`,children:r(e)})]},t)),(0,a.jsx)(`line`,{x1:46,x2:712,y1:10+d,y2:10+d,className:`hq-chart-axis`}),(0,a.jsx)(`g`,{clipPath:`url(#${l})`,children:e.map((e,n)=>{let r=46+n*m+(m-h)/2,i=g(e.value),o=10+d-i;return o<=0?null:(0,a.jsx)(`rect`,{x:r,y:i,width:h,height:o,rx:Math.min(3,h/2),fill:t,opacity:s===null||s===n?1:.45},n)})}),e.map((e,t)=>t%v===0?(0,a.jsx)(`text`,{x:46+t*m+m/2,y:u-6,className:`hq-chart-xtick`,textAnchor:`middle`,children:y(e.ts)},t):null),(0,a.jsx)(`rect`,{x:46,y:10,width:666,height:d,fill:`transparent`})]}),b!==void 0&&(0,a.jsxs)(`div`,{className:`hq-chart-tooltip`,children:[(0,a.jsx)(`span`,{className:`hq-chart-tooltip-swatch`,style:{background:t}}),(0,a.jsx)(`span`,{className:`hq-chart-tooltip-value`,children:r(b.value)}),(0,a.jsx)(`span`,{className:`hq-chart-tooltip-time`,children:y(b.ts)})]})]})}var s=[{label:`1h`,ms:36e5},{label:`6h`,ms:216e5},{label:`24h`,ms:864e5},{label:`7d`,ms:6048e5}];function c(e){return e>=1e6?`${(e/1e6).toFixed(1)}M`:e>=1e3?`${(e/1e3).toFixed(1)}k`:String(Math.round(e))}function l(e,t){let n=new Map;for(let r of e){let e=r[t];if(e!==void 0)for(let[t,r]of Object.entries(e)){let e=n.get(t);e===void 0?n.set(t,{...r}):(e.costUsd+=r.costUsd,e.inputTokens+=r.inputTokens,e.outputTokens+=r.outputTokens,e.cacheRead=(e.cacheRead??0)+(r.cacheRead??0),e.cacheWrite=(e.cacheWrite??0)+(r.cacheWrite??0))}}return[...n.entries()].map(([e,t])=>({key:e,entry:t})).sort((e,t)=>t.entry.costUsd-e.entry.costUsd)}function u(){let[e,t]=(0,i.useState)([]),[n,u]=(0,i.useState)(null),[f,p]=(0,i.useState)(s[2].ms);(0,i.useEffect)(()=>{let e=!1,n=()=>{r(`/api/trends/cost`).then(n=>{e||(t(n.samples),u(null))}).catch(t=>{e||u(t.message)})};n();let i=setInterval(n,3e4);return()=>{e=!0,clearInterval(i)}},[]);let{shown:m,totalCost:h,totalTokens:g,totalTools:_,byModel:v,byProvider:y,totalCacheRead:b,totalCacheWrite:x}=(0,i.useMemo)(()=>{let t=Date.now()-f,n=e.filter(e=>e.ts>=t),r=n.length>0?n:e.slice(-24),i=r.reduce((e,t)=>e+t.costUsd,0),a=r.reduce((e,t)=>e+t.inputTokens+t.outputTokens,0),o=r.reduce((e,t)=>e+t.toolCalls,0),s=l(r,`byModel`);return{shown:r,totalCost:i,totalTokens:a,totalTools:o,byModel:s,byProvider:l(r,`byProvider`),totalCacheRead:s.reduce((e,t)=>e+(t.entry.cacheRead??0),0),totalCacheWrite:s.reduce((e,t)=>e+(t.entry.cacheWrite??0),0)}},[e,f]);if(n!==null)return(0,a.jsxs)(`div`,{className:`hq-empty hq-empty-ornate`,children:[`Error loading trends: `,n]});if(e.length===0)return(0,a.jsx)(`div`,{className:`hq-empty hq-empty-ornate`,children:`No trend data yet. Trends accumulate as cost signals arrive.`});let S=v.length>0,C=b+x>0?b/(b+x)*100:null,w=s.find(e=>e.ms===f)?.label??`custom`;return(0,a.jsxs)(`div`,{className:`hq-screen hq-trends-screen`,children:[(0,a.jsxs)(`section`,{className:`hq-screen-hero hq-trends-hero`,"aria-label":`Telemetry trend summary`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`span`,{className:`hq-section-kicker`,children:`Telemetry runway`}),(0,a.jsxs)(`h2`,{children:[w,` signal window`]}),(0,a.jsx)(`p`,{children:`Cost, tokens and tool activity are split into single-purpose charts so spikes stay attributable without dual-axis ambiguity.`})]}),(0,a.jsxs)(`div`,{className:`hq-hero-metrics`,children:[(0,a.jsx)(d,{label:`cost`,value:`$${h.toFixed(4)}`}),(0,a.jsx)(d,{label:`tokens`,value:c(g),tone:`warn`}),(0,a.jsx)(d,{label:`tool calls`,value:_.toLocaleString(),tone:`ok`}),C===null?null:(0,a.jsx)(d,{label:`cache hit`,value:`${C.toFixed(0)}%`})]})]}),(0,a.jsxs)(`div`,{className:`hq-filter-row hq-trends-filter-row`,children:[s.map(e=>(0,a.jsx)(`button`,{type:`button`,className:`hq-pill hq-filter-chip${f===e.ms?` selected`:``}`,onClick:()=>p(e.ms),children:e.label},e.label)),(0,a.jsxs)(`span`,{className:`hq-mono hq-row-subtle hq-ml-auto`,children:[m.length,` × 5-min buckets`]})]}),(0,a.jsxs)(`section`,{className:`hq-chart-gallery`,"aria-label":`Trend charts`,children:[(0,a.jsxs)(`div`,{className:`hq-card hq-chart-card primary`,children:[(0,a.jsx)(`div`,{className:`hq-section-head compact`,children:(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`span`,{className:`hq-section-kicker`,children:`Spend`}),(0,a.jsx)(`h3`,{children:`Cost (USD)`})]})}),(0,a.jsx)(o,{points:m.map(e=>({ts:e.ts,value:e.costUsd})),color:`var(--chart-1)`,format:e=>`$${e>=1?e.toFixed(2):e.toFixed(4)}`})]}),(0,a.jsxs)(`div`,{className:`hq-card hq-chart-card`,children:[(0,a.jsx)(`div`,{className:`hq-section-head compact`,children:(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`span`,{className:`hq-section-kicker`,children:`Volume`}),(0,a.jsx)(`h3`,{children:`Tokens (in + out)`})]})}),(0,a.jsx)(o,{points:m.map(e=>({ts:e.ts,value:e.inputTokens+e.outputTokens})),color:`var(--chart-2)`,format:c})]}),(0,a.jsxs)(`div`,{className:`hq-card hq-chart-card`,children:[(0,a.jsx)(`div`,{className:`hq-section-head compact`,children:(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`span`,{className:`hq-section-kicker`,children:`Activity`}),(0,a.jsx)(`h3`,{children:`Tool calls`})]})}),(0,a.jsx)(o,{points:m.map(e=>({ts:e.ts,value:e.toolCalls})),color:`var(--chart-3)`,format:e=>String(Math.round(e))})]})]}),S&&(0,a.jsxs)(`section`,{className:`hq-two-column hq-trends-breakdowns`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`div`,{className:`hq-section-head compact`,children:(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`span`,{className:`hq-section-kicker`,children:`Model economics`}),(0,a.jsx)(`h3`,{children:`By Model`})]})}),(0,a.jsx)(`div`,{className:`hq-card hq-breakdown-card`,children:v.map(({key:e,entry:t})=>{let n=h>0?t.costUsd/h*100:0;return(0,a.jsxs)(`div`,{className:`hq-row hq-breakdown-row`,children:[(0,a.jsx)(`span`,{className:`hq-text-bright`,children:e}),(0,a.jsxs)(`span`,{className:`hq-mono hq-row-subtle`,children:[c(t.inputTokens),`→`,c(t.outputTokens),t.cacheRead!==void 0||t.cacheWrite!==void 0?` · cache ${c((t.cacheRead??0)+(t.cacheWrite??0))}`:``]}),(0,a.jsxs)(`span`,{className:`hq-cost-amount hq-ml-auto`,children:[`$`,t.costUsd.toFixed(4)]}),(0,a.jsxs)(`span`,{className:`hq-mono hq-row-subtle`,children:[n.toFixed(1),`%`]})]},e)})})]}),y.length>1&&(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`div`,{className:`hq-section-head compact`,children:(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`span`,{className:`hq-section-kicker`,children:`Provider split`}),(0,a.jsx)(`h3`,{children:`By Provider`})]})}),(0,a.jsx)(`div`,{className:`hq-card hq-breakdown-card`,children:y.map(({key:e,entry:t})=>{let n=h>0?t.costUsd/h*100:0;return(0,a.jsxs)(`div`,{className:`hq-row hq-breakdown-row`,children:[(0,a.jsx)(`span`,{className:`hq-text-bright`,children:e}),(0,a.jsxs)(`span`,{className:`hq-cost-amount hq-ml-auto`,children:[`$`,t.costUsd.toFixed(4)]}),(0,a.jsxs)(`span`,{className:`hq-mono hq-row-subtle`,children:[n.toFixed(1),`%`]})]},e)})})]})]})]})}function d({label:e,value:t,tone:n}){return(0,a.jsxs)(`div`,{className:`hq-hero-metric`,"data-tone":n,children:[(0,a.jsx)(`strong`,{children:t}),(0,a.jsx)(`span`,{children:e})]})}export{u as TrendsView};