https://manyfold.ai/assets/Usage-pzilG0vz.js

1import{a as J,f as ae,r as i,j as e,F as ne,y as le,L as P}from"./index-DV0RBs0h.js";import{E as D}from"./EmptyState-Cs_HcCEk.js";import{a as K}from"./Loading-DuSVse3R.js";import{S as oe}from"./SettingsPageHeader-BCDR1k0Q.js";import{S as $}from"./ShortcutTooltip-6rmRM5ji.js";import{f as y,a as x,b as L,h as X,d as R,c as H,e as Y}from"./usageFormat-CG4su8mN.js";import{U as re}from"./UsageEventsTable-CAugPGhV.js";import{B as ce}from"./edition-capabilities-DopFDWuZ.js";import"./Breadcrumb-DDLmfEHl.js";!(function(){try{var s="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{};var a=new s.Error().stack;a&&(s._sentryDebugIds=s._sentryDebugIds||{},s._sentryDebugIds[a]="8560c9ab-d1ac-4dc3-b53b-0b7f6de385e5",s._sentryDebugIdIdentifier="sentry-dbid-8560c9ab-d1ac-4dc3-b53b-0b7f6de385e5")}catch(n){}})();const _=[{key:"5h",bucket:"hour",from:()=>X(5)},{key:"1d",bucket:"hour",from:()=>X(24)},{key:"7d",bucket:"day",from:()=>R(6)},{key:"30d",bucket:"day",from:()=>R(29)},{key:"90d",bucket:"day",from:()=>R(89)}];const z=(s,a)=>{switch(s){case"5h":return a("web.usage.range5Hours");case"1d":return a("web.usage.range24Hours");case"7d":return a("web.usage.range7Days");case"30d":return a("web.usage.range30Days");case"90d":return a("web.usage.range90Days")}};const ie=6;const S=132;const O=48;const W=12;const B=s=>["rounded-pill text-ui px-3 py-1.5 transition-colors",s?"bg-strong text-strong-fg":"bg-surface-subtle text-muted shadow-ring-light hover:text-fg"].join(" ");const de=(s,a)=>s===null&&a===null?null:(s??0)+(a??0);const ue=s=>{const a=new Map;for(const n of s){const d=n.model??"unknown";const r=a.get(d);if(r){r.inputTokens+=n.inputTokens;r.outputTokens+=n.outputTokens;r.eventCount+=n.eventCount;r.costUsd=de(r.costUsd,n.costUsd)}else{a.set(d,{model:n.model,inputTokens:n.inputTokens,outputTokens:n.outputTokens,costUsd:n.costUsd,eventCount:n.eventCount})}}return[...a.values()].sort((n,d)=>{const r=(d.costUsd??0)-(n.costUsd??0);if(r!==0)return r;return d.inputTokens+d.outputTokens-(n.inputTokens+n.outputTokens)})};const C=(s,a)=>a>0?s/a*100:0;const xe=s=>{if(s<=1)return[0];const a=[0,Math.round((s-1)/3),Math.round(2*(s-1)/3),s-1];

1return[...new Set(a)]};const q=({pct:s})=>e.jsx("div",{className:"bg-info/55 mt-1.5 h-[3px] rounded-full",style:{width:`${s===0?0:Math.max(s,1.5).toFixed(1)}%`}});const U=({label:s,value:a,loading:n})=>e.jsxs("div",{className:"settings-stat-card",children:[e.jsx("div",{className:"settings-stat-label",children:s}),n&&a===null?e.jsx(K,{variant:"title",className:"mt-3 w-24"}):e.jsx("div",{className:"settings-stat-value",children:a??"—"})]});const me=({points:s,bucket:a})=>{const{t:n}=J();const[d,r]=i.useState("tokens");if(s.length===0)return e.jsx(D,{kind:"no-results",tier:"line",body:n("web.emptyState.usageNoActivity"),className:"py-10 text-center"});const m=Math.max(1,...s.map(l=>l.inputTokens+l.outputTokens));const h=Math.max(0,...s.map(l=>l.costUsd??0));const o=d==="cost";const I=o&&h<=0;const g=o?h>0?h:1:m;const N=l=>o?y(l):x(l);const b=l=>a==="hour"?Y(l):H(l);const A=l=>a==="hour"?`${H(l)} ${Y(l)}`:H(l);return e.jsxs("div",{children:[e.jsxs("div",{className:"mb-4 flex items-center justify-between gap-3",children:[e.jsxs("div",{className:"flex gap-2",children:[e.jsx("button",{type:"button",onClick:()=>r("tokens"),className:B(!o),children:n("web.usage.tokens")}),e.jsx("button",{type:"button",onClick:()=>r("cost"),className:B(o),children:n("web.usage.cost")})]}),!o&&e.jsxs("div",{className:"text-caption text-muted flex items-center gap-4",children:[e.jsxs("span",{className:"flex items-center gap-1.5",children:[e.jsx("span",{className:"bg-info inline-block h-2.5 w-2.5 rounded-[2px]"}),n("web.usage.input")]}),e.jsxs("span",{className:"flex items-center gap-1.5",children:[e.jsx("span",{className:"bg-info/40 inline-block h-2.5 w-2.5 rounded-[2px]"}),n("web.usage.output")]})]})]}),I?e.jsx(D,{kind:"no-results",tier:"stack",title:n("web.emptyState.usageNoCostTitle"),body:n("web.emptyState.usageNoCostBody")}):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"flex",style:{gap:W},children:[e.jsxs("div",{className:"text-caption text-subtle flex shrink-0 flex-col justify-between text-right tabular-nums",style:{height:S,width:O},children:[e.jsx("span",{children:N(g)}),e.jsx("span",{children:N(g/2)}),e.jsx("span",{children:"0"})]}),e.jsxs("div",{className:"relative flex-1",style:{height:S},children:[e.jsx("div",{className:"border-divider/40 absolute inset-x-0 top-0 border-t border-dashed"}),e.jsx("div",{className:"border-divider/40 absolute inset-x-0 top-1/2 border-t border-dashed"}),e.jsx("div",{className:"border-divider absolute inset-x-0 bottom-0 border-t"}),e.jsx("div",{className:"absolute inset-0 flex items-end gap-0.5",children:s.map(l=>{const w=n("web.usage.chartTooltip",{date:A(l.bucket),input:x(l.inputTokens),output:x(l.outputTokens),cost:y(l.costUsd)});if(o){const f=l.costUsd??0;const M=f>0?Math.max(2,Math.round(f/g*S)):0;return e.jsx($,{label:w,placement:"top",className:"min-w-0 flex-1",children:e.jsx("div",{className:"bg-info w-full rounded-t-[3px]",style:{height:`${M}px`}})},l.bucket)}const p=l.inputTokens+l.outputTokens;const v=p>0?Math.max(2,Math.round(p/m*S)):0;const u=p>0?Math.round(l.inputTokens/p*v):0;const T=Math.max(0,v-u);return e.jsx($,{label:w,placement:"top",className:"min-w-0 flex-1",children:e.jsxs("div",{className:"flex w-full flex-col overflow-hidden rounded-t-[3px]",children:[e.jsx("div",{className:"bg-info/40 w-full",style:{height:`${T}px`}}),e.jsx("div",{className:"bg-info w-full",style:{height:`${u}px`}})]})},l.bucket)})})]})]}),e.jsx("div",{className:"text-caption text-subtle mt-2 flex justify-between",style:{paddingLeft:O+W}

1,children:xe(s.length).map(l=>e.jsx("span",{children:b(s[l].bucket)},s[l].bucket))})]})]})};const we=()=>{const{t:s}=J();const a=ae();const[n,d]=i.useState("30d");const r=i.useMemo(()=>_.find(t=>t.key===n)??_[0],[n]);const m=i.useMemo(()=>r.from(),[r]);const h=r.bucket;const[o,I]=i.useState(null);const[g,N]=i.useState([]);const[b,A]=i.useState([]);const[l,w]=i.useState([]);const[p,v]=i.useState(new Map);const[u,T]=i.useState(true);const[f,M]=i.useState(null);i.useEffect(()=>{a.agents.list().then(t=>{const c=new Map;for(const k of t)c.set(k.id,k.name??k.id);v(c)}).catch(()=>{})},[a]);i.useEffect(()=>{let t=false;T(true);M(null);Promise.all([a.usage.summary({from:m}),a.usage.timeseries({from:m,bucket:h}),a.usage.topAgents({from:m,limit:20}),a.usage.events({from:m,limit:ie})]).then(([c,k,se,te])=>{if(t)return;I(c);N(k);A(se);w(te.items)}).catch(c=>{if(!t)M(c.message)}).finally(()=>{if(!t)T(false)});return()=>{t=true}},[a,m,h]);const Q=z(r.key,s);const E=i.useMemo(()=>ue((o==null?void 0:o.byModel)??[]),[o]);const F=E.reduce((t,c)=>Math.max(t,c.costUsd??0),0);const V=E.reduce((t,c)=>Math.max(t,c.inputTokens+c.outputTokens),0);const G=b.reduce((t,c)=>Math.max(t,c.costUsd??0),0);const Z=b.reduce((t,c)=>Math.max(t,c.inputTokens+c.outputTokens),0);const j=((o==null?void 0:o.eventCount)??0)>0;const ee=t=>t?p.get(t)??t.slice(0,8):"—";return e.jsxs("div",{className:"settings-page",children:[e.jsx(oe,{title:s("web.usage.title")}),!ce,f&&e.jsx("div",{className:"workbench-alert-error mb-6",children:f}),e.jsxs("section",{className:"settings-section",children:[e.jsxs("div",{className:"mb-4 flex items-center justify-between gap-4",children:[e.jsx("h2",{className:"settings-section-label mb-0",children:s("web.usage.overview")}),e.jsx("div",{className:"flex flex-wrap justify-end gap-2",children:_.map(t=>e.jsx("button",{type:"button",onClick:()=>d(t.key),className:B(t.key===n),children:z(t.key,s)},t.key))})]}),e.jsxs("div",{className:"settings-stat-grid xl:grid-cols-4",children:[e.jsx(U,{label:s("web.usage.cost"),value:o?y(o.totalCostUsd):null,loading:u}),e.jsx(U,{label:s("web.usage.inputTokens"),value:o?x(o.totalInputTokens):null,loading:u}),e.jsx(U,{label:s("web.usage.outputTokens"),value:o?x(o.totalOutputTokens):null,loading:u}),e.jsx(U,{label:s("web.usage.events"),value:o?L(o.eventCount):null,loading:u})]}),(u||j)&&e.jsx("div",{className:"settings-card mt-4 px-5 py-5",children:u&&g.length===0?e.jsx(K,{variant:"block",className:"h-28 w-full"}):e.jsx(me,{points:g,bucket:h})})]}),!u&&!j&&!f&&e.jsx(D,{kind:"no-results",tier:"stack",title:s("web.emptyState.usageRangeTitle",{range:Q}),body:s("web.emptyState.usageRangeBody")}),j&&e.jsxs("section",{className:"settings-section",children:[e.jsx("h2",{className:"settings-section-label",children:s("web.usage.byModel")}),e.jsx("div",{className:"settings-card overflow-x-auto px-5 py-4",children:e.jsxs("table",{className:"w-full text-left",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"text-ui text-muted border-b",children:[e.jsx("th",{className:"py-2 font-normal",children:s("web.usage.model")}),e.jsx("th",{className:"py-2 text-right font-normal",children:s("web.usage.input")}),e.jsx("th",{className:"py-2 text-right font-normal",children:s("web.usage.output")}),e.jsx("th",{className:"py-2 text-right font-normal",children:s("web.usage.cost")}),e.jsx("th",{className:"py-2 text-right font-normal",children:s("web.usage.events")})]})}),e.jsx("tbody",{children:E.map(t=>e.jsxs("tr",{className:"text-ui text-fg border-b last:border-0",children:[e.jsxs("td",{className:"py-2",children:[e.jsx("div",{className:"font-mono text-sm",children:t.model??"—"}),e.jsx(q,{pct:F>0?C(t.costUsd??0,F):C(t.inputTokens+t.outputTokens,V)})]}),e.jsx("td",{className:"py-2 text-right tabular-nums",children:x(t.inputTokens)}),e.jsx("td",{className:"py-2 text-right tabular-nums",children:x(t.outputTokens)}),e.jsx("td",{className:"py-2 text-right tabular-nums",children:y(t.costUsd)}),e.jsx("td",{className:"py-2 text-right tabular-nums",children:L(t.eventCount)}

1)]},t.model??"unknown"))})]})})]}),j&&b.length>0&&e.jsxs("section",{className:"settings-section",children:[e.jsx("h2",{className:"settings-section-label",children:s("web.usage.byAgent")}),e.jsx("div",{className:"settings-card overflow-x-auto px-5 py-4",children:e.jsxs("table",{className:"w-full text-left",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"text-ui text-muted border-b",children:[e.jsx("th",{className:"py-2 font-normal",children:s("web.usage.agent")}),e.jsx("th",{className:"py-2 text-right font-normal",children:s("web.usage.input")}),e.jsx("th",{className:"py-2 text-right font-normal",children:s("web.usage.output")}),e.jsx("th",{className:"py-2 text-right font-normal",children:s("web.usage.cost")}),e.jsx("th",{className:"py-2 text-right font-normal",children:s("web.usage.events")})]})}),e.jsx("tbody",{children:b.map(t=>e.jsxs("tr",{className:"text-ui text-fg border-b last:border-0",children:[e.jsxs("td",{className:"py-2",children:[e.jsxs("span",{className:"flex items-center gap-2",children:[t.framework&&e.jsx($,{label:le(t.framework),className:"shrink-0",children:e.jsx("span",{className:"flex",children:e.jsx(ne,{framework:t.framework,size:18})})}),e.jsx(P,{to:`/agents/${t.agentId}/chat`,className:"text-link hover:underline",children:t.name??t.agentId})]}),e.jsx(q,{pct:G>0?C(t.costUsd??0,G):C(t.inputTokens+t.outputTokens,Z)})]}),e.jsx("td",{className:"py-2 text-right tabular-nums",children:x(t.inputTokens)}),e.jsx("td",{className:"py-2 text-right tabular-nums",children:x(t.outputTokens)}),e.jsx("td",{className:"py-2 text-right tabular-nums",children:y(t.costUsd)}),e.jsx("td",{className:"py-2 text-right tabular-nums",children:L(t.eventCount)}

1)]},t.agentId))})]})})]}),j&&e.jsxs("section",{className:"settings-section",children:[e.jsxs("div",{className:"mb-3 flex items-center justify-between gap-4",children:[e.jsx("h2",{className:"settings-section-label mb-0",children:s("web.usage.recentEvents")}),e.jsx(P,{to:"/settings/usage/events",className:"text-ui text-link hover:underline",children:s("web.usage.viewAllEvents")})]}),e.jsx(re,{items:l,resolveAgentName:ee})]})]})};export{we as default};