comisai 1.0.24 → 1.0.26

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

@@ -1,375 +0,0 @@
-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};