comisai 1.0.24 → 1.0.26

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

@@ -0,0 +1,375 @@
+import{c as e,f as t,h as n,l as r,n as i,o as a,r as o,s,t as c,u as l}from"./decorate-BvWYovGE.js";import{i as u}from"./index-BBkuC-EU.js";import"./ic-empty-state-CM3Wbj2f.js";import"./ic-time-range-picker-DXbYeBmY.js";var d=class extends r{constructor(...e){super(...e),this.segments=[],this.total=0,this.currency=`$`}static{this.styles=[o,n`
+      :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;
+      }
+    `]}_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(){let e=this._getTotal();return e===0||this.segments.length===0?t`<div class="empty">No cost data available</div>`:t`
+      <div class="bar" role="img" aria-label="Cost breakdown">
+        ${this.segments.map(n=>{let r=n.value/e*100;return t`
+            <div
+              class="segment"
+              style="width: ${r}%; background: ${n.color};"
+              title="${n.label}: ${this._formatValue(n.value)} (${r.toFixed(1)}%)"
+              @click=${()=>this._onSegmentClick(n)}
+            ></div>
+          `})}
+      </div>
+      <div class="legend">
+        ${this.segments.map(e=>t`
+            <span class="legend-item">
+              <span class="legend-dot" style="background: ${e.color};"></span>
+              ${e.label}: ${this._formatValue(e.value)}
+            </span>
+          `)}
+      </div>
+    `}};c([s({attribute:!1})],d.prototype,`segments`,void 0),c([s({type:Number})],d.prototype,`total`,void 0),c([s({type:String})],d.prototype,`currency`,void 0),d=c([e(`ic-cost-breakdown`)],d);var f=3e4,p=6048e5,m=[`var(--ic-accent)`,`var(--ic-success)`,`var(--ic-warning)`,`var(--ic-info, #3b82f6)`,`var(--ic-error)`,`#a78bfa`,`#f472b6`,`#34d399`],h=class extends r{constructor(...e){super(...e),this.rpcClient=null,this.eventDispatcher=null,this._sse=null,this._reloadDebounce=null,this._loadState=`loading`,this._drillLevel=`total`,this._drillContext={},this._sinceMs=p,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`)}static{this.styles=[o,i,n`
+      :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); }
+    `]}_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 u(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()},f))}async _loadData(){if(!this.rpcClient||this.rpcClient.status!==`connected`){this._loadState=`loaded`;return}let 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){let 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(([e,t])=>{if(e.status===`fulfilled`&&this._billingTotal){let t=e.value,n={totalCost:Number(t.totalCost??0),totalTokens:Number(t.totalTokens??0),callCount:Number(t.callCount??0)};this._previousTotal={totalCost:n.totalCost-this._billingTotal.totalCost,totalTokens:n.totalTokens-this._billingTotal.totalTokens,callCount:n.callCount-this._billingTotal.callCount}}if(t.status===`fulfilled`){let e=t.value;if(Array.isArray(e))this._providers=e;else{let t=e;this._providers=Array.isArray(t.providers)?t.providers:[]}}})}async _loadProviderLevel(e){let t=await e.call(`obs.billing.byProvider`,{sinceMs:this._sinceMs});if(Array.isArray(t))this._providers=t;else{let e=t;this._providers=Array.isArray(e.providers)?e.providers:[]}}async _loadAgentLevel(e){let t=await e.call(`agents.list`),n=(Array.isArray(t)?t:Array.isArray(t.agents)?t.agents:[]).map(e=>typeof e==`string`?e:e.id);if(n.length===0){this._agentBillings=[];return}let r=await Promise.allSettled(n.map(t=>e.call(`obs.billing.byAgent`,{agentId:t,sinceMs:this._sinceMs})));this._agentBillings=r.map((e,t)=>{if(e.status!==`fulfilled`)return null;let r=e.value;return{agentId:n[t],totalTokens:Number(r.tokensToday??r.totalTokens??0),percentOfTotal:Number(r.percentOfTotal??0),cost:Number(r.costToday??r.cost??0)}}).filter(e=>e!==null).sort((e,t)=>t.cost-e.cost)}async _loadSessionLevel(e){let t=this._drillContext.agentId;if(!t){this._sessionBillings=[];return}try{let n=await e.call(`obs.billing.bySession`,{sessionKey:`all`,agentId:t,sinceMs:this._sinceMs});if(Array.isArray(n))this._sessionBillings=n;else{let e=n;this._sessionBillings=Array.isArray(e.sessions)?e.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:``};let n=(e-t)/t*100;return Math.abs(n)<.1?{trend:`flat`,value:`0%`}:{trend:n>0?`up`:`down`,value:`${Math.abs(n).toFixed(1)}%`}}_renderBreadcrumb(){let 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`}),t`
+      <nav class="breadcrumb" aria-label="Billing navigation">
+        ${e.map((n,r)=>{let i=r===e.length-1;return t`
+            ${r>0?t`<span class="breadcrumb-sep">/</span>`:l}
+            ${i?t`<span>${n.label}</span>`:t`<button class="breadcrumb-link" @click=${()=>this._drillUp(n.level)}>${n.label}</button>`}
+          `})}
+      </nav>
+    `}_renderTotalLevel(){let e=this._billingTotal,n=this._previousTotal,r=e&&n?this._computeDelta(e.totalCost,n.totalCost):null,i=e&&n?this._computeDelta(e.totalTokens,n.totalTokens):null,a=e&&n?this._computeDelta(e.callCount,n.callCount):null,o=this._providers.map((e,t)=>({label:e.provider,value:e.totalCost,color:m[t%m.length]})),s=this._providers.reduce((e,t)=>e+(t.totalCacheSaved??0),0);return t`
+      <div class="stats-row">
+        <ic-stat-card
+          label="Total Cost"
+          .value=${e?this._formatCost(e.totalCost):`---`}
+          .trend=${r?.trend??``}
+          .trendValue=${r?.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=${a?.trend??``}
+          .trendValue=${a?.value??``}
+        ></ic-stat-card>
+        ${s>0?t`
+          <ic-stat-card
+            label="Cache Savings"
+            .value=${this._formatCost(s)}
+            trend="down"
+            trendValue="saved"
+          ></ic-stat-card>
+        `:l}
+      </div>
+
+      ${o.length>0?t`
+            <div class="section">
+              <div class="section-title">Cost by Provider</div>
+              <div class="card">
+                <ic-cost-breakdown
+                  .segments=${o}
+                  @segment-click=${e=>{this._drillDown(`provider`,{provider:e.detail.label})}}
+                ></ic-cost-breakdown>
+              </div>
+            </div>
+          `:l}
+    `}_renderProviderLevel(){let e=this._providers.find(e=>e.provider===this._drillContext.provider);if(!e)return t`<ic-empty-state icon="dollar-sign" message="No data for this provider"></ic-empty-state>`;let n=e.models??[],r=n.map((e,t)=>({label:e.model,value:e.cost,color:m[t%m.length]}));return t`
+      ${(e.totalCacheSaved??0)>0?t`
+        <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>
+      `:l}
+
+      ${r.length>0?t`
+            <div class="section">
+              <div class="section-title">Cost by Model</div>
+              <div class="card">
+                <ic-cost-breakdown .segments=${r}></ic-cost-breakdown>
+              </div>
+            </div>
+          `:l}
+
+      <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>
+            ${n.map(n=>{let r=e.totalCost>0?n.cost/e.totalCost*100:0;return t`
+                <div class="grid-row" role="row">
+                  <div class="cell" role="cell">${n.model}</div>
+                  <div class="cell cell-mono cell-right" role="cell">${this._formatNumber(n.tokens)}</div>
+                  <div class="cell cell-mono cell-right" role="cell">
+                    <span class="pct-bar" style="width: ${Math.max(r,2)}px"></span>
+                    ${this._formatCost(n.cost)} (${r.toFixed(1)}%)
+                  </div>
+                  <div class="cell cell-mono cell-right" role="cell">${this._formatNumber(n.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?t`<ic-empty-state icon="users" message="No agent billing data available"></ic-empty-state>`:t`
+      <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=>t`
+                <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(){return this._sessionBillings.length===0?t`<ic-empty-state icon="list" message="No session billing data available for this agent"></ic-empty-state>`:t`
+      <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>
+            ${[...this._sessionBillings].sort((e,t)=>t.totalCost-e.totalCost).map(e=>t`
+                <div class="grid-row" role="row">
+                  <div class="cell cell-mono" role="cell">${e.sessionKey}</div>
+                  <div class="cell cell-mono cell-right" role="cell">${this._formatNumber(e.totalTokens)}</div>
+                  <div class="cell cell-mono cell-right" role="cell">${this._formatCost(e.totalCost)}</div>
+                  <div class="cell cell-mono cell-right" role="cell">${this._formatNumber(e.callCount)}</div>
+                </div>
+              `)}
+          </div>
+        </div>
+      </div>
+    `}render(){return this._loadState===`loading`&&!this.rpcClient?t`<ic-skeleton-view variant="table"></ic-skeleton-view>`:this._loadState===`error`?t`
+        <div class="error-container">
+          <span class="error-message">Failed to load billing data</span>
+          <button class="retry-btn" @click=${()=>this._tryLoad()}>Retry</button>
+        </div>
+      `:t`
+      <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():l}
+        ${this._drillLevel===`provider`?this._renderProviderLevel():l}
+        ${this._drillLevel===`agent`?this._renderAgentLevel():l}
+        ${this._drillLevel===`session`?this._renderSessionLevel():l}
+      </div>
+    `}};c([s({attribute:!1})],h.prototype,`rpcClient`,void 0),c([s({attribute:!1})],h.prototype,`eventDispatcher`,void 0),c([a()],h.prototype,`_loadState`,void 0),c([a()],h.prototype,`_drillLevel`,void 0),c([a()],h.prototype,`_drillContext`,void 0),c([a()],h.prototype,`_sinceMs`,void 0),c([a()],h.prototype,`_selectedRange`,void 0),c([a()],h.prototype,`_billingTotal`,void 0),c([a()],h.prototype,`_previousTotal`,void 0),c([a()],h.prototype,`_providers`,void 0),c([a()],h.prototype,`_agentBillings`,void 0),c([a()],h.prototype,`_sessionBillings`,void 0),h=c([e(`ic-billing-view`)],h);export{h as IcBillingView};