comisai 1.0.15 → 1.0.17

package/node_modules/@comis/web/dist/assets/billing-view-CtYvBqTE.js

@@ -0,0 +1,375 @@
+import{s as _,i as f,n as p,a as y,b as r,t as C,S as w,A as h,f as x,r as v}from"./index-CEcM1R_C.js";import"./ic-time-range-picker-CypCT68y.js";import"./ic-empty-state-60l2ePhd.js";import"./ic-icon-xeGTVhVG.js";var $=Object.defineProperty,k=Object.getOwnPropertyDescriptor,m=(e,t,l,i)=>{for(var s=i>1?void 0:i?k(t,l):t,a=e.length-1,n;a>=0;a--)(n=e[a])&&(s=(i?n(t,l,s):n(s))||s);return i&&s&&$(t,l,s),s};let u=class extends y{constructor(){super(...arguments),this.segments=[],this.total=0,this.currency="$"}_getTotal(){return this.total>0?this.total:this.segments.reduce((e,t)=>e+t.value,0)}_formatValue(e){return new Intl.NumberFormat("en-US",{style:"currency",currency:this.currency==="$"?"USD":this.currency,minimumFractionDigits:2,maximumFractionDigits:2}).format(e)}_onSegmentClick(e){this.dispatchEvent(new CustomEvent("segment-click",{detail:{label:e.label,value:e.value},bubbles:!0,composed:!0}))}render(){const e=this._getTotal();return e===0||this.segments.length===0?r`<div class="empty">No cost data available</div>`:r`
+      <div class="bar" role="img" aria-label="Cost breakdown">
+        ${this.segments.map(t=>{const l=t.value/e*100;return r`
+            <div
+              class="segment"
+              style="width: ${l}%; background: ${t.color};"
+              title="${t.label}: ${this._formatValue(t.value)} (${l.toFixed(1)}%)"
+              @click=${()=>this._onSegmentClick(t)}
+            ></div>
+          `})}
+      </div>
+      <div class="legend">
+        ${this.segments.map(t=>r`
+            <span class="legend-item">
+              <span class="legend-dot" style="background: ${t.color};"></span>
+              ${t.label}: ${this._formatValue(t.value)}
+            </span>
+          `)}
+      </div>
+    `}};u.styles=[_,f`
+      :host {
+        display: block;
+      }
+
+      .bar {
+        display: flex;
+        height: 20px;
+        border-radius: var(--ic-radius-sm, 4px);
+        overflow: hidden;
+      }
+
+      .segment {
+        min-width: 2px;
+        height: 100%;
+        cursor: pointer;
+        transition: filter 0.15s;
+      }
+
+      .segment:hover {
+        filter: brightness(1.2);
+      }
+
+      .legend {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--ic-space-sm);
+        margin-top: var(--ic-space-sm);
+      }
+
+      .legend-item {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+      }
+
+      .legend-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+
+      .empty {
+        font-size: var(--ic-text-sm);
+        color: var(--ic-text-dim);
+        font-style: italic;
+      }
+    `];m([p({attribute:!1})],u.prototype,"segments",2);m([p({type:Number})],u.prototype,"total",2);m([p({type:String})],u.prototype,"currency",2);u=m([C("ic-cost-breakdown")],u);var S=Object.defineProperty,T=Object.getOwnPropertyDescriptor,c=(e,t,l,i)=>{for(var s=i>1?void 0:i?T(t,l):t,a=e.length-1,n;a>=0;a--)(n=e[a])&&(s=(i?n(t,l,s):n(s))||s);return i&&s&&S(t,l,s),s};const D=3e4,L=6048e5,g=["var(--ic-accent)","var(--ic-success)","var(--ic-warning)","var(--ic-info, #3b82f6)","var(--ic-error)","#a78bfa","#f472b6","#34d399"];let o=class extends y{constructor(){super(...arguments),this.rpcClient=null,this.eventDispatcher=null,this._sse=null,this._reloadDebounce=null,this._loadState="loading",this._drillLevel="total",this._drillContext={},this._sinceMs=L,this._selectedRange="7d",this._billingTotal=null,this._previousTotal=null,this._providers=[],this._agentBillings=[],this._sessionBillings=[],this._refreshInterval=null,this._rpcStatusUnsub=null,this._fmtCost=new Intl.NumberFormat("en-US",{style:"currency",currency:"USD",minimumFractionDigits:2,maximumFractionDigits:2}),this._fmtNum=new Intl.NumberFormat("en-US")}_formatCost(e){return this._fmtCost.format(e)}_formatNumber(e){return this._fmtNum.format(e)}connectedCallback(){super.connectedCallback(),this._initSse()}_initSse(){!this.eventDispatcher||this._sse||(this._sse=new w(this,this.eventDispatcher,{"observability:token_usage":()=>{this._scheduleReload()},"diagnostic:billing_snapshot":()=>{this._scheduleReload()}}))}_scheduleReload(e=300){this._reloadDebounce!==null&&clearTimeout(this._reloadDebounce),this._reloadDebounce=setTimeout(()=>{this._reloadDebounce=null,this._loadData()},e)}disconnectedCallback(){super.disconnectedCallback(),this._reloadDebounce!==null&&(clearTimeout(this._reloadDebounce),this._reloadDebounce=null),this._refreshInterval!==null&&(clearInterval(this._refreshInterval),this._refreshInterval=null),this._rpcStatusUnsub?.(),this._rpcStatusUnsub=null}willUpdate(e){e.has("rpcClient")&&this.rpcClient&&this._tryLoad(),e.has("eventDispatcher")&&this.eventDispatcher&&!this._sse&&this._initSse()}_tryLoad(){if(!this.rpcClient){this._loadState="loaded";return}this._rpcStatusUnsub?.(),this.rpcClient.status==="connected"?this._startLoading():this._rpcStatusUnsub=this.rpcClient.onStatusChange(e=>{e==="connected"&&this._startLoading()})}_startLoading(){this._loadData(),this._refreshInterval===null&&(this._refreshInterval=setInterval(()=>{this._loadData()},D))}async _loadData(){if(!this.rpcClient||this.rpcClient.status!=="connected"){this._loadState="loaded";return}const e=this.rpcClient;try{switch(this._drillLevel){case"total":await this._loadTotalLevel(e);break;case"provider":await this._loadProviderLevel(e);break;case"agent":await this._loadAgentLevel(e);break;case"session":await this._loadSessionLevel(e);break}this._loadState="loaded"}catch{this._loadState="error"}}async _loadTotalLevel(e){const t=await e.call("obs.billing.total",{sinceMs:this._sinceMs});this._billingTotal={totalCost:Number(t.totalCost??0),totalTokens:Number(t.totalTokens??0),callCount:Number(t.callCount??0)},Promise.allSettled([e.call("obs.billing.total",{sinceMs:this._sinceMs*2}),e.call("obs.billing.byProvider",{sinceMs:this._sinceMs})]).then(([l,i])=>{if(l.status==="fulfilled"&&this._billingTotal){const s=l.value,a={totalCost:Number(s.totalCost??0),totalTokens:Number(s.totalTokens??0),callCount:Number(s.callCount??0)};this._previousTotal={totalCost:a.totalCost-this._billingTotal.totalCost,totalTokens:a.totalTokens-this._billingTotal.totalTokens,callCount:a.callCount-this._billingTotal.callCount}}if(i.status==="fulfilled"){const s=i.value;if(Array.isArray(s))this._providers=s;else{const a=s;this._providers=Array.isArray(a.providers)?a.providers:[]}}})}async _loadProviderLevel(e){const t=await e.call("obs.billing.byProvider",{sinceMs:this._sinceMs});if(Array.isArray(t))this._providers=t;else{const l=t;this._providers=Array.isArray(l.providers)?l.providers:[]}}async _loadAgentLevel(e){const t=await e.call("agents.list"),i=(Array.isArray(t)?t:Array.isArray(t.agents)?t.agents:[]).map(a=>typeof a=="string"?a:a.id);if(i.length===0){this._agentBillings=[];return}const s=await Promise.allSettled(i.map(a=>e.call("obs.billing.byAgent",{agentId:a,sinceMs:this._sinceMs})));this._agentBillings=s.map((a,n)=>{if(a.status!=="fulfilled")return null;const d=a.value;return{agentId:i[n],totalTokens:Number(d.tokensToday??d.totalTokens??0),percentOfTotal:Number(d.percentOfTotal??0),cost:Number(d.costToday??d.cost??0)}}).filter(a=>a!==null).sort((a,n)=>n.cost-a.cost)}async _loadSessionLevel(e){const t=this._drillContext.agentId;if(!t){this._sessionBillings=[];return}try{const l=await e.call("obs.billing.bySession",{sessionKey:"all",agentId:t,sinceMs:this._sinceMs});if(Array.isArray(l))this._sessionBillings=l;else{const i=l;this._sessionBillings=Array.isArray(i.sessions)?i.sessions:[]}}catch{this._sessionBillings=[]}}_drillDown(e,t){this._drillLevel=e,this._drillContext={...this._drillContext,...t},this._loadData()}_drillUp(e){this._drillLevel=e,e==="total"?this._drillContext={}:e==="provider"?this._drillContext={provider:this._drillContext.provider}:e==="agent"&&(this._drillContext={provider:this._drillContext.provider,agentId:this._drillContext.agentId}),this._loadData()}_onTimeRangeChange(e){this._sinceMs=e.detail.sinceMs,this._selectedRange=e.detail.label,this._loadData()}_computeDelta(e,t){if(t===0)return e>0?{trend:"up",value:"new"}:{trend:"flat",value:""};const l=(e-t)/t*100;return Math.abs(l)<.1?{trend:"flat",value:"0%"}:{trend:l>0?"up":"down",value:`${Math.abs(l).toFixed(1)}%`}}_renderBreadcrumb(){const e=[{label:"Billing",level:"total"}];return this._drillLevel!=="total"&&this._drillContext.provider&&e.push({label:this._drillContext.provider,level:"provider"}),(this._drillLevel==="agent"||this._drillLevel==="session")&&this._drillContext.agentId&&e.push({label:this._drillContext.agentId,level:"agent"}),this._drillLevel==="session"&&this._drillContext.sessionKey&&e.push({label:this._drillContext.sessionKey,level:"session"}),r`
+      <nav class="breadcrumb" aria-label="Billing navigation">
+        ${e.map((t,l)=>{const i=l===e.length-1;return r`
+            ${l>0?r`<span class="breadcrumb-sep">/</span>`:h}
+            ${i?r`<span>${t.label}</span>`:r`<button class="breadcrumb-link" @click=${()=>this._drillUp(t.level)}>${t.label}</button>`}
+          `})}
+      </nav>
+    `}_renderTotalLevel(){const e=this._billingTotal,t=this._previousTotal,l=e&&t?this._computeDelta(e.totalCost,t.totalCost):null,i=e&&t?this._computeDelta(e.totalTokens,t.totalTokens):null,s=e&&t?this._computeDelta(e.callCount,t.callCount):null,a=this._providers.map((d,b)=>({label:d.provider,value:d.totalCost,color:g[b%g.length]})),n=this._providers.reduce((d,b)=>d+(b.totalCacheSaved??0),0);return r`
+      <div class="stats-row">
+        <ic-stat-card
+          label="Total Cost"
+          .value=${e?this._formatCost(e.totalCost):"---"}
+          .trend=${l?.trend??""}
+          .trendValue=${l?.value??""}
+        ></ic-stat-card>
+        <ic-stat-card
+          label="Total Tokens"
+          .value=${e?this._formatNumber(e.totalTokens):"---"}
+          .trend=${i?.trend??""}
+          .trendValue=${i?.value??""}
+        ></ic-stat-card>
+        <ic-stat-card
+          label="API Calls"
+          .value=${e?this._formatNumber(e.callCount):"---"}
+          .trend=${s?.trend??""}
+          .trendValue=${s?.value??""}
+        ></ic-stat-card>
+        ${n>0?r`
+          <ic-stat-card
+            label="Cache Savings"
+            .value=${this._formatCost(n)}
+            trend="down"
+            trendValue="saved"
+          ></ic-stat-card>
+        `:h}
+      </div>
+
+      ${a.length>0?r`
+            <div class="section">
+              <div class="section-title">Cost by Provider</div>
+              <div class="card">
+                <ic-cost-breakdown
+                  .segments=${a}
+                  @segment-click=${d=>{this._drillDown("provider",{provider:d.detail.label})}}
+                ></ic-cost-breakdown>
+              </div>
+            </div>
+          `:h}
+    `}_renderProviderLevel(){const e=this._providers.find(i=>i.provider===this._drillContext.provider);if(!e)return r`<ic-empty-state icon="dollar-sign" message="No data for this provider"></ic-empty-state>`;const t=e.models??[],l=t.map((i,s)=>({label:i.model,value:i.cost,color:g[s%g.length]}));return r`
+      ${(e.totalCacheSaved??0)>0?r`
+        <div class="stats-row">
+          <ic-stat-card
+            label="Provider Cost"
+            .value=${this._formatCost(e.totalCost)}
+          ></ic-stat-card>
+          <ic-stat-card
+            label="Cache Savings"
+            .value=${this._formatCost(e.totalCacheSaved)}
+            trend="down"
+            trendValue="saved"
+          ></ic-stat-card>
+        </div>
+      `:h}
+
+      ${l.length>0?r`
+            <div class="section">
+              <div class="section-title">Cost by Model</div>
+              <div class="card">
+                <ic-cost-breakdown .segments=${l}></ic-cost-breakdown>
+              </div>
+            </div>
+          `:h}
+
+      <div class="section">
+        <div class="section-title">Model Breakdown</div>
+        <div class="card">
+          <div class="grid-table model-table" role="table" aria-label="Model breakdown">
+            <div class="grid-header" role="row">
+              <div class="cell" role="columnheader">Model</div>
+              <div class="cell cell-right" role="columnheader">Tokens</div>
+              <div class="cell cell-right" role="columnheader">Cost</div>
+              <div class="cell cell-right" role="columnheader">Calls</div>
+            </div>
+            ${t.map(i=>{const s=e.totalCost>0?i.cost/e.totalCost*100:0;return r`
+                <div class="grid-row" role="row">
+                  <div class="cell" role="cell">${i.model}</div>
+                  <div class="cell cell-mono cell-right" role="cell">${this._formatNumber(i.tokens)}</div>
+                  <div class="cell cell-mono cell-right" role="cell">
+                    <span class="pct-bar" style="width: ${Math.max(s,2)}px"></span>
+                    ${this._formatCost(i.cost)} (${s.toFixed(1)}%)
+                  </div>
+                  <div class="cell cell-mono cell-right" role="cell">${this._formatNumber(i.calls)}</div>
+                </div>
+              `})}
+          </div>
+        </div>
+      </div>
+
+      <div class="section">
+        <button
+          class="breadcrumb-link"
+          @click=${()=>this._drillDown("agent",{})}
+        >View agent breakdown</button>
+      </div>
+    `}_renderAgentLevel(){return this._agentBillings.length===0?r`<ic-empty-state icon="users" message="No agent billing data available"></ic-empty-state>`:r`
+      <div class="section">
+        <div class="section-title">Agent Billing</div>
+        <div class="card">
+          <div class="grid-table agent-table" role="table" aria-label="Agent billing">
+            <div class="grid-header" role="row">
+              <div class="cell" role="columnheader">Agent ID</div>
+              <div class="cell cell-right" role="columnheader">Tokens</div>
+              <div class="cell cell-right" role="columnheader">% of Total</div>
+              <div class="cell cell-right" role="columnheader">Cost</div>
+            </div>
+            ${this._agentBillings.map(e=>r`
+                <div
+                  class="grid-row clickable"
+                  role="row"
+                  @click=${()=>this._drillDown("session",{agentId:e.agentId})}
+                >
+                  <div class="cell" role="cell">${e.agentId}</div>
+                  <div class="cell cell-mono cell-right" role="cell">${this._formatNumber(e.totalTokens)}</div>
+                  <div class="cell cell-mono cell-right" role="cell">${e.percentOfTotal.toFixed(1)}%</div>
+                  <div class="cell cell-mono cell-right" role="cell">${this._formatCost(e.cost)}</div>
+                </div>
+              `)}
+          </div>
+        </div>
+      </div>
+    `}_renderSessionLevel(){if(this._sessionBillings.length===0)return r`<ic-empty-state icon="list" message="No session billing data available for this agent"></ic-empty-state>`;const e=[...this._sessionBillings].sort((t,l)=>l.totalCost-t.totalCost);return r`
+      <div class="section">
+        <div class="section-title">Session Billing</div>
+        <div class="card">
+          <div class="grid-table session-table" role="table" aria-label="Session billing">
+            <div class="grid-header" role="row">
+              <div class="cell" role="columnheader">Session Key</div>
+              <div class="cell cell-right" role="columnheader">Tokens</div>
+              <div class="cell cell-right" role="columnheader">Cost</div>
+              <div class="cell cell-right" role="columnheader">API Calls</div>
+            </div>
+            ${e.map(t=>r`
+                <div class="grid-row" role="row">
+                  <div class="cell cell-mono" role="cell">${t.sessionKey}</div>
+                  <div class="cell cell-mono cell-right" role="cell">${this._formatNumber(t.totalTokens)}</div>
+                  <div class="cell cell-mono cell-right" role="cell">${this._formatCost(t.totalCost)}</div>
+                  <div class="cell cell-mono cell-right" role="cell">${this._formatNumber(t.callCount)}</div>
+                </div>
+              `)}
+          </div>
+        </div>
+      </div>
+    `}render(){return this._loadState==="loading"&&!this.rpcClient?r`<ic-skeleton-view variant="table"></ic-skeleton-view>`:this._loadState==="error"?r`
+        <div class="error-container">
+          <span class="error-message">Failed to load billing data</span>
+          <button class="retry-btn" @click=${()=>this._tryLoad()}>Retry</button>
+        </div>
+      `:r`
+      <div class="billing-view">
+        <div class="header">
+          ${this._renderBreadcrumb()}
+          <ic-time-range-picker
+            .selected=${this._selectedRange}
+            @time-range-change=${this._onTimeRangeChange}
+          ></ic-time-range-picker>
+        </div>
+
+        ${this._drillLevel==="total"?this._renderTotalLevel():h}
+        ${this._drillLevel==="provider"?this._renderProviderLevel():h}
+        ${this._drillLevel==="agent"?this._renderAgentLevel():h}
+        ${this._drillLevel==="session"?this._renderSessionLevel():h}
+      </div>
+    `}};o.styles=[_,x,f`
+      :host { display: block; }
+
+      .billing-view { padding: 0; }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: var(--ic-space-lg);
+        flex-wrap: wrap;
+        gap: var(--ic-space-sm);
+      }
+
+      .breadcrumb {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-xs);
+        font-size: var(--ic-text-base);
+        font-weight: 600;
+        color: var(--ic-text);
+      }
+
+      .breadcrumb-link {
+        color: var(--ic-accent);
+        cursor: pointer;
+        background: none;
+        border: none;
+        font-size: inherit;
+        font-weight: inherit;
+        font-family: inherit;
+        padding: 0;
+      }
+
+      .breadcrumb-link:hover { text-decoration: underline; }
+      .breadcrumb-link:focus-visible { outline: 2px solid var(--ic-accent); outline-offset: 2px; }
+
+      .breadcrumb-sep { color: var(--ic-text-dim); }
+
+      .section { margin-bottom: var(--ic-space-xl); }
+
+      .section-title {
+        font-size: var(--ic-text-base);
+        font-weight: 600;
+        color: var(--ic-text);
+        margin-bottom: var(--ic-space-md);
+      }
+
+      .stats-row {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        gap: var(--ic-space-md);
+        margin-bottom: var(--ic-space-lg);
+      }
+
+      .card {
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-lg);
+        padding: var(--ic-space-lg);
+      }
+
+      /* CSS grid tables */
+      .grid-table {
+        display: grid;
+        gap: 0;
+        font-size: var(--ic-text-sm);
+      }
+
+      .grid-header, .grid-row {
+        display: contents;
+      }
+
+      .grid-header > .cell {
+        font-weight: 600;
+        color: var(--ic-text-dim);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        font-size: var(--ic-text-xs);
+        padding: var(--ic-space-sm) var(--ic-space-md);
+        border-bottom: 1px solid var(--ic-border);
+      }
+
+      .grid-row > .cell {
+        padding: var(--ic-space-sm) var(--ic-space-md);
+        border-bottom: 1px solid var(--ic-border);
+        color: var(--ic-text);
+      }
+
+      .cell-right { text-align: right; }
+
+      .cell-mono {
+        font-family: var(--ic-font-mono, ui-monospace, monospace);
+      }
+
+      .grid-row.clickable > .cell { cursor: pointer; }
+      .grid-row.clickable:hover > .cell { background: var(--ic-surface-2, #1f2937); }
+
+      .provider-table, .model-table, .agent-table, .session-table {
+        grid-template-columns: 1fr repeat(3, auto);
+      }
+
+      .pct-bar {
+        display: inline-block;
+        height: 4px;
+        background: var(--ic-accent);
+        border-radius: 2px;
+        margin-right: var(--ic-space-xs);
+        vertical-align: middle;
+      }
+
+      .error-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 3rem;
+      }
+
+      .error-message { color: var(--ic-error); font-size: 0.875rem; }
+
+      .retry-btn {
+        padding: 0.5rem 1rem;
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: 0.375rem;
+        color: var(--ic-text);
+        font-size: 0.8125rem;
+        cursor: pointer;
+        font-family: inherit;
+      }
+
+      .retry-btn:hover { background: var(--ic-surface-alt, #374151); }
+    `];c([p({attribute:!1})],o.prototype,"rpcClient",2);c([p({attribute:!1})],o.prototype,"eventDispatcher",2);c([v()],o.prototype,"_loadState",2);c([v()],o.prototype,"_drillLevel",2);c([v()],o.prototype,"_drillContext",2);c([v()],o.prototype,"_sinceMs",2);c([v()],o.prototype,"_selectedRange",2);c([v()],o.prototype,"_billingTotal",2);c([v()],o.prototype,"_previousTotal",2);c([v()],o.prototype,"_providers",2);c([v()],o.prototype,"_agentBillings",2);c([v()],o.prototype,"_sessionBillings",2);o=c([C("ic-billing-view")],o);export{o as IcBillingView};