comisai 1.0.16 → 1.0.18

package/node_modules/@comis/web/dist/assets/observe-view-C0VBhX4C.js

@@ -0,0 +1,814 @@
+import{a as x,S as $,b as i,g as C,A as v,s as S,f as k,i as R,n as T,r as o,t as A}from"./index-CEcM1R_C.js";import{d as D,a as y}from"./observability-types-D7jUtSde.js";import"./ic-tabs-B7QtM_v8.js";import"./ic-tag-CPPUnDLF.js";import"./ic-relative-time-3FqpjeAI.js";import"./ic-empty-state-60l2ePhd.js";import"./ic-delivery-row-GP5Fkygs.js";import"./ic-icon-xeGTVhVG.js";var I=Object.defineProperty,F=Object.getOwnPropertyDescriptor,l=(e,t,r,n)=>{for(var d=n>1?void 0:n?F(t,r):t,u=e.length-1,p;u>=0;u--)(p=e[u])&&(d=(n?p(t,r,d):p(d))||d);return n&&d&&I(t,r,d),d};const N=3e4,E=[{id:"overview",label:"Overview"},{id:"billing",label:"Billing"},{id:"delivery",label:"Delivery"},{id:"channels",label:"Channels"},{id:"diagnostics",label:"Diagnostics"}];let s=class extends x{constructor(){super(...arguments),this.rpcClient=null,this.eventDispatcher=null,this.initialTab="overview",this._sse=null,this._reloadDebounce=null,this._loadState="loading",this._activeTab="overview",this._error="",this._requestsToday=0,this._tokensToday=0,this._costToday=0,this._errorsToday=0,this._tokenUsage24h=[],this._billingByProvider=[],this._billingByAgent=[],this._billingTotal=null,this._diagnosticsEvents=[],this._deliveryTraces=[],this._deliveryStats=null,this._channelActivity=[],this._agentHealth=[],this._channelHealth=[],this._resetConfirming=!1,this._resetInput="",this._deliveryChannelFilter="all",this._deliveryStatusFilter="all",this._deliveryTimeRange="1h",this._expandedTraceId=null,this._refreshInterval=null,this._rpcStatusUnsub=null}connectedCallback(){super.connectedCallback(),this._activeTab=this.initialTab,this._initSse()}_initSse(){!this.eventDispatcher||this._sse||(this._sse=new $(this,this.eventDispatcher,{"observability:metrics":()=>{this._scheduleReload(500)},"observability:token_usage":()=>{this._scheduleReload()},"observability:reset":()=>{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("initialTab")&&(this._activeTab=this.initialTab),e.has("rpcClient")&&(this.rpcClient?this._tryLoad():this._loadState="loaded"),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()},N))}async _loadData(){if(!this.rpcClient||this.rpcClient.status!=="connected"){this._loadState="loaded";return}const e=this.rpcClient,[t,r,n,d,u,p,w,b,_]=await Promise.allSettled([e.call("obs.delivery.stats"),e.call("obs.billing.total"),e.call("obs.billing.usage24h"),e.call("obs.billing.byProvider"),e.call("obs.diagnostics"),e.call("obs.delivery.recent"),e.call("obs.channels.all"),e.call("agents.list"),e.call("channels.list")]);let h=!1,m="";if(t.status==="fulfilled"){const a=t.value,c=Number(a.total??a.totalDelivered??0),g=Number(a.failures??a.failed??0);let f=0;a.successRate!==void 0?f=Number(a.successRate):c>0&&(f=Number(a.successes??0)/c*100),this._deliveryStats={successRate:f,avgLatencyMs:Number(a.avgLatencyMs??0),totalDelivered:c,failed:g},this._requestsToday=c,this._errorsToday=g,h=!0}else m=t.reason instanceof Error?t.reason.message:"Failed to load delivery stats";if(r.status==="fulfilled"){const a=r.value,c={totalTokens:Number(a.totalTokens??0),totalCost:Number(a.totalCost??0)};this._billingTotal=c,this._tokensToday=c.totalTokens,this._costToday=c.totalCost,h=!0}else m||(m=r.reason instanceof Error?r.reason.message:"Failed to load billing total");if(n.status==="fulfilled"&&(this._tokenUsage24h=Array.isArray(n.value)?n.value:[],h=!0),d.status==="fulfilled"){const a=d.value;if(Array.isArray(a))this._billingByProvider=a;else{const c=a;this._billingByProvider=Array.isArray(c.providers)?c.providers:[]}h=!0}if(u.status==="fulfilled"){const a=u.value;if(Array.isArray(a))this._diagnosticsEvents=a;else{const c=a;this._diagnosticsEvents=Array.isArray(c.events)?c.events:[]}h=!0}if(p.status==="fulfilled"){const a=p.value;if(Array.isArray(a))this._deliveryTraces=a;else{const c=a;this._deliveryTraces=Array.isArray(c.deliveries)?c.deliveries:[]}h=!0}if(w.status==="fulfilled"){const a=w.value;if(Array.isArray(a))this._channelActivity=a;else{const c=a;this._channelActivity=Array.isArray(c.channels)?c.channels:[]}h=!0}if(b.status==="fulfilled"){const a=Array.isArray(b.value.agents)?b.value.agents:[];if(a.length>0){const c=await Promise.allSettled(a.map(g=>e.call("agents.get",{agentId:g})));this._agentHealth=c.filter(g=>g.status==="fulfilled").map(g=>g.value)}else this._agentHealth=[];h=!0}_.status==="fulfilled"&&(this._channelHealth=Array.isArray(_.value.channels)?_.value.channels:[],h=!0),h?(this._loadState="loaded",this._error=""):(this._loadState="error",this._error=m||"Failed to load observability data")}_onTabChange(e){this._activeTab=e.detail}_formatNumber(e){return new Intl.NumberFormat("en-US").format(e)}_formatTokens(e){if(e>=1e6){const t=e/1e6;return t%1===0?`${t}M`:`${t.toFixed(1)}M`}if(e>=1e3){const t=e/1e3;return t%1===0?`${t}K`:`${t.toFixed(1)}K`}return String(e)}_formatCost(e){return`$${(e??0).toFixed(2)}`}_getErrorRate(){return!this._deliveryStats||this._deliveryStats.totalDelivered===0?0:this._deliveryStats.failed/this._deliveryStats.totalDelivered*100}_getErrorRateColor(){const e=this._getErrorRate();return e>5?"var(--ic-error)":e>1?"var(--ic-warning)":"var(--ic-success)"}_getLatencyColor(){const e=this._deliveryStats?.avgLatencyMs??0;return e>5e3?"var(--ic-error)":e>2e3?"var(--ic-warning)":""}_getAgentModel(e){return typeof e.model=="string"?e.model:"unknown"}_onResetClick(){this._resetConfirming=!0,this._resetInput=""}_onResetCancel(){this._resetConfirming=!1,this._resetInput=""}_onResetInput(e){this._resetInput=e.target.value}async _onResetConfirm(){if(!(this._resetInput!=="RESET"||!this.rpcClient)){try{await this.rpcClient.call("obs.reset")}catch{}this._resetConfirming=!1,this._resetInput="",await this._loadData()}}_renderOverview(){const e=this.rpcClient&&this.rpcClient.status==="connected",t=this._getErrorRate(),r=e?this._deliveryStats&&this._deliveryStats.totalDelivered>0?`${t.toFixed(1)}%`:"0%":"---",n=e?this._deliveryStats?`${this._deliveryStats.avgLatencyMs}ms`:"0ms":"---",d=e?String(this._agentHealth.filter(u=>!u.suspended).length):"---";return i`
+      <!-- 6 Stat Cards -->
+      <div class="stats-grid">
+        <ic-stat-card
+          label="Requests/min"
+          .value=${e?this._formatNumber(this._requestsToday):"---"}
+        ></ic-stat-card>
+        <ic-stat-card
+          label="Error Rate"
+          .value=${r}
+        ></ic-stat-card>
+        <ic-stat-card
+          label="Avg Latency"
+          .value=${n}
+        ></ic-stat-card>
+        <ic-stat-card
+          label="Active Agents"
+          .value=${d}
+        ></ic-stat-card>
+        <ic-stat-card
+          label="Tokens (24h)"
+          .value=${e?this._formatTokens(this._tokensToday):"---"}
+        ></ic-stat-card>
+        <ic-stat-card
+          label="Cost Today"
+          .value=${e?this._formatCost(this._costToday):"---"}
+        ></ic-stat-card>
+      </div>
+
+      <!-- Time-series Charts -->
+      <div class="section">
+        <div class="charts-section">
+          <div>
+            <div class="chart-title">Token Usage (24h)</div>
+            <div class="chart-container">
+              ${this._tokenUsage24h.length>0?i`
+                    <div class="bar-chart" aria-label="Token usage bar chart">
+                      ${this._renderTokenBars()}
+                    </div>
+                    <div class="chart-labels">
+                      <span>00</span>
+                      <span>06</span>
+                      <span>12</span>
+                      <span>18</span>
+                      <span>24</span>
+                    </div>
+                  `:i`<div style="color: var(--ic-text-dim); text-align: center; padding: var(--ic-space-lg);">No usage data</div>`}
+            </div>
+          </div>
+          <div class="sparkline-side">
+            <div>
+              <div class="chart-title">Cost Trend (7d)</div>
+              <div class="chart-container">
+                <ic-sparkline
+                  .data=${this._costToday>0?[this._costToday]:[]}
+                  .width=${200}
+                  .height=${60}
+                  color="var(--ic-accent)"
+                ></ic-sparkline>
+              </div>
+            </div>
+            <div>
+              <div class="chart-title">Error Rate (24h)</div>
+              <div class="chart-container">
+                <ic-sparkline
+                  .data=${this._errorsToday>0?[this._errorsToday]:[]}
+                  .width=${200}
+                  .height=${60}
+                  color="var(--ic-error)"
+                ></ic-sparkline>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Health Grids -->
+      <div class="section">
+        <div class="health-grids">
+          <div>
+            <div class="section-title">Agent Health</div>
+            ${this._renderAgentHealthGrid()}
+          </div>
+          <div>
+            <div class="section-title">Channel Health</div>
+            ${this._renderChannelHealthGrid()}
+          </div>
+        </div>
+      </div>
+
+      <!-- Reset Section -->
+      ${this._renderResetSection()}
+    `}_renderTokenBars(){const e=Math.max(...this._tokenUsage24h.map(t=>t.tokens),1);return this._tokenUsage24h.map(t=>i`<div class="bar" style="height: ${t.tokens/e*100}%" title="${t.hour}:00 - ${this._formatTokens(t.tokens)} tokens"></div>`)}_renderAgentHealthGrid(){return this._agentHealth.length===0?i`<div class="health-empty">No agents configured</div>`:i`
+      <div class="grid-table health-grid-table" role="table" aria-label="Agent health">
+        <div class="grid-header" role="row">
+          <div class="cell" role="columnheader">Agent</div>
+          <div class="cell" role="columnheader">Model</div>
+          <div class="cell" role="columnheader">Status</div>
+        </div>
+        ${this._agentHealth.map(e=>i`
+            <div class="grid-row" role="row">
+              <div class="cell cell-mono" role="cell">${e.agentId}</div>
+              <div class="cell" role="cell">${this._getAgentModel(e.config)}</div>
+              <div class="cell" role="cell">
+                ${e.suspended?i`<ic-tag variant="default">suspended</ic-tag>`:i`<ic-tag variant="success">active</ic-tag>`}
+              </div>
+            </div>
+          `)}
+      </div>
+    `}_renderChannelHealthGrid(){return this._channelHealth.length===0?i`<div class="health-empty">No channels configured</div>`:i`
+      <div class="grid-table health-grid-table" role="table" aria-label="Channel health">
+        <div class="grid-header" role="row">
+          <div class="cell" role="columnheader">Channel</div>
+          <div class="cell" role="columnheader">Type</div>
+          <div class="cell" role="columnheader">Status</div>
+        </div>
+        ${this._channelHealth.map(e=>{const t=C(e.status),r={green:"success",yellow:"warning",red:"error",gray:"default"};return i`
+              <div class="grid-row" role="row">
+                <div class="cell" role="cell">${e.channelId??e.channelType}</div>
+                <div class="cell" role="cell">${e.channelType}</div>
+                <div class="cell" role="cell">
+                  <ic-tag variant=${r[t.severity]}>
+                    ${t.label}
+                  </ic-tag>
+                </div>
+              </div>
+            `})}
+      </div>
+    `}_renderResetSection(){return i`
+      <div class="reset-section">
+        <div class="section-title">Reset Observability Data</div>
+        ${this._resetConfirming?i`
+              <div class="reset-warning">
+                This will permanently clear all observability data. Type RESET to confirm.
+              </div>
+              <input
+                class="reset-input"
+                type="text"
+                .value=${this._resetInput}
+                @input=${this._onResetInput}
+                placeholder="Type RESET"
+              />
+              <div class="reset-actions">
+                <button class="reset-cancel-btn" @click=${this._onResetCancel}>Cancel</button>
+                <button
+                  class="reset-confirm-btn"
+                  ?disabled=${this._resetInput!=="RESET"}
+                  @click=${this._onResetConfirm}
+                >Confirm Reset</button>
+              </div>
+            `:i`
+              <button class="reset-btn" @click=${this._onResetClick}>
+                Reset Observability Data
+              </button>
+            `}
+      </div>
+    `}_renderBilling(){return this._billingByProvider.length===0&&this._billingByAgent.length===0?i`<ic-empty-state icon="dollar-sign" message="No billing data available"></ic-empty-state>`:i`
+      ${this._billingByProvider.length>0?i`
+            <div class="section">
+              <div class="section-title">By Provider</div>
+              <div class="grid-table-scroll">
+                <div class="grid-table provider-table" role="table">
+                  <div class="grid-header" role="row">
+                    <div class="cell" role="columnheader">Provider</div>
+                    <div class="cell cell-right" role="columnheader">Total Tokens</div>
+                    <div class="cell cell-right" role="columnheader">Calls</div>
+                    <div class="cell cell-right" role="columnheader">Cost</div>
+                  </div>
+                  ${this._billingByProvider.map(e=>i`
+                      <div class="grid-row" role="row">
+                        <div class="cell" role="cell">${e.provider}</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._formatNumber(e.callCount)}</div>
+                        <div class="cell cell-mono cell-right" role="cell">${this._formatCost(e.totalCost)}</div>
+                      </div>
+                    `)}
+                  ${this._renderProviderTotal()}
+                </div>
+              </div>
+            </div>
+          `:v}
+
+      ${this._billingByAgent.length>0?i`
+            <div class="section">
+              <div class="section-title">By Agent</div>
+              <div class="grid-table-scroll">
+                <div class="grid-table agent-table" role="table">
+                  <div class="grid-header" role="row">
+                    <div class="cell" role="columnheader">Agent</div>
+                    <div class="cell cell-right" role="columnheader">Tokens</div>
+                    <div class="cell cell-right" role="columnheader">% Total</div>
+                    <div class="cell cell-right" role="columnheader">Cost</div>
+                  </div>
+                  ${this._billingByAgent.map(e=>i`
+                      <div class="grid-row" role="row">
+                        <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>
+          `:v}
+    `}_renderProviderTotal(){const e=this._billingByProvider.reduce((t,r)=>({totalTokens:t.totalTokens+r.totalTokens,callCount:t.callCount+r.callCount,totalCost:t.totalCost+r.totalCost}),{totalTokens:0,callCount:0,totalCost:0});return i`
+      <div class="grid-row total-row" role="row">
+        <div class="cell" role="cell">Total</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._formatNumber(e.callCount)}</div>
+        <div class="cell cell-mono cell-right" role="cell">${this._formatCost(e.totalCost)}</div>
+      </div>
+    `}_renderDiagnostics(){if(this._diagnosticsEvents.length===0)return i`<ic-empty-state icon="activity" message="No diagnostic events"></ic-empty-state>`;const e=[...this._diagnosticsEvents].sort((t,r)=>r.timestamp-t.timestamp);return i`
+      <div class="grid-table-scroll">
+        <div class="grid-table diagnostics-table" role="table">
+          <div class="grid-header" role="row">
+            <div class="cell" role="columnheader">Time</div>
+            <div class="cell" role="columnheader">Category</div>
+            <div class="cell" role="columnheader">Message</div>
+            <div class="cell" role="columnheader">Level</div>
+          </div>
+          ${e.map(t=>i`
+              <div class="grid-row" role="row">
+                <div class="cell" role="cell">
+                  <ic-relative-time .timestamp=${t.timestamp}></ic-relative-time>
+                </div>
+                <div class="cell" role="cell">
+                  <ic-tag>${t.category}</ic-tag>
+                </div>
+                <div class="cell" role="cell">${D(t)}</div>
+                <div class="cell" role="cell">
+                  <ic-tag variant=${y(t)==="error"?"error":y(t)==="warn"?"warning":"default"}>
+                    ${y(t)}
+                  </ic-tag>
+                </div>
+              </div>
+            `)}
+        </div>
+      </div>
+    `}_getTimeRangeMs(){return{"1h":36e5,"6h":216e5,"24h":864e5,"7d":6048e5}[this._deliveryTimeRange]??36e5}_getFilteredTraces(){const e=Date.now(),t=this._getTimeRangeMs();return this._deliveryTraces.filter(r=>!(this._deliveryChannelFilter!=="all"&&r.channelType!==this._deliveryChannelFilter||this._deliveryStatusFilter!=="all"&&r.status!==this._deliveryStatusFilter||r.timestamp<e-t)).sort((r,n)=>n.timestamp-r.timestamp)}_onDeliveryChannelFilter(e){this._deliveryChannelFilter=e.target.value}_onDeliveryStatusFilter(e){this._deliveryStatusFilter=e.target.value}_onDeliveryTimeRange(e){this._deliveryTimeRange=e.target.value}_onTraceClick(e){const t=e.detail;this._expandedTraceId=this._expandedTraceId===t?null:t}_renderDeliveryStats(){if(!this._deliveryStats)return v;const e=this._deliveryStats,t=e.totalDelivered>0,r=t?e.successRate>=99?"rate-green":e.successRate>=95?"rate-yellow":"rate-red":"";return i`
+      <div class="stats-summary">
+        <span>Success <span class="stat-value ${r}">${t?`${e.successRate.toFixed(1)}%`:"N/A"}</span></span>
+        <span>Avg <span class="stat-value">${t?`${e.avgLatencyMs}ms`:"N/A"}</span></span>
+        <span>Total <span class="stat-value">${this._formatNumber(e.totalDelivered)}</span></span>
+      </div>
+    `}_renderTraceDetail(e){return!e.steps||e.steps.length===0?i`
+        <div class="trace-detail">
+          <div class="trace-detail-title">Delivery Steps</div>
+          <div style="color: var(--ic-text-dim); font-size: var(--ic-text-sm); margin-top: var(--ic-space-sm);">
+            No step details available
+          </div>
+        </div>
+      `:i`
+      <div class="trace-detail">
+        <div class="trace-detail-title">Delivery Steps</div>
+        <div class="step-list">
+          ${e.steps.map(t=>i`
+              <div class="step-item">
+                <span class="step-dot ${t.status}"></span>
+                <span>${t.name} &mdash; ${t.durationMs}ms</span>
+              </div>
+              ${t.error?i`<div class="step-error">${t.error}</div>`:v}
+            `)}
+        </div>
+      </div>
+    `}_renderChannelFilterSelect(){const e=[...new Set(this._deliveryTraces.map(t=>t.channelType))];return i`
+      <select class="filter-select" @change=${this._onDeliveryChannelFilter}>
+        <option value="all">All Channels</option>
+        ${e.map(t=>i`<option value=${t}>${t}</option>`)}
+      </select>
+    `}_renderStatusFilterSelect(){return i`
+      <select class="filter-select" @change=${this._onDeliveryStatusFilter}>
+        <option value="all">All Statuses</option>
+        <option value="success">Success</option>
+        <option value="failed">Failed</option>
+        <option value="timeout">Timeout</option>
+      </select>
+    `}_renderTimeRangeSelect(){return i`
+      <select class="filter-select" @change=${this._onDeliveryTimeRange}>
+        <option value="1h">1 hour</option>
+        <option value="6h">6 hours</option>
+        <option value="24h">24 hours</option>
+        <option value="7d">7 days</option>
+      </select>
+    `}_renderDeliveryRow(e){return i`
+      <ic-delivery-row
+        .trace=${e}
+        @trace-click=${this._onTraceClick}
+      ></ic-delivery-row>
+      ${this._expandedTraceId===e.traceId?this._renderTraceDetail(e):v}
+    `}_renderDeliveryTab(){const e=this._getFilteredTraces();return i`
+      ${this._renderDeliveryStats()}
+
+      <div class="filter-row">
+        ${this._renderChannelFilterSelect()}
+        ${this._renderStatusFilterSelect()}
+        ${this._renderTimeRangeSelect()}
+      </div>
+
+      ${e.length===0?i`<ic-empty-state icon="truck" message="No delivery traces match the current filters"></ic-empty-state>`:i`
+            <div class="grid-table-scroll">
+              <div class="grid-table delivery-table" role="table" aria-label="Delivery traces">
+                <div class="grid-header" role="row">
+                  <div class="cell" role="columnheader">Time</div>
+                  <div class="cell" role="columnheader">Channel</div>
+                  <div class="cell" role="columnheader">Message</div>
+                  <div class="cell" role="columnheader">Status</div>
+                  <div class="cell" role="columnheader">Latency</div>
+                  <div class="cell" role="columnheader">Steps</div>
+                </div>
+                ${e.map(t=>this._renderDeliveryRow(t))}
+              </div>
+            </div>
+          `}
+    `}_renderChannelsTab(){if(this._channelActivity.length===0)return i`<ic-empty-state icon="radio" title="No Channel Data" description="Channel activity will appear once channels are connected and processing messages."></ic-empty-state>`;const e=[...this._channelActivity].sort((r,n)=>r.isStale&&!n.isStale?-1:!r.isStale&&n.isStale?1:n.lastActiveAt-r.lastActiveAt),t=e.filter(r=>r.isStale).length;return i`
+      ${t>0?i`<div class="stale-alert">${t} stale channel(s) detected</div>`:v}
+
+      <div class="grid-table-scroll">
+        <div class="grid-table channel-table" role="table" aria-label="Channel activity">
+          <div class="grid-header" role="row">
+            <div class="cell" role="columnheader">Channel</div>
+            <div class="cell" role="columnheader">ID</div>
+            <div class="cell cell-right" role="columnheader">Sent</div>
+            <div class="cell cell-right" role="columnheader">Received</div>
+            <div class="cell" role="columnheader">Last Active</div>
+            <div class="cell" role="columnheader">Status</div>
+          </div>
+          ${e.map(r=>i`
+              <div class="grid-row ${r.isStale?"stale":""}" role="row">
+                <div class="cell" role="cell"><ic-tag variant=${r.channelType}>${r.channelType}</ic-tag></div>
+                <div class="cell cell-mono" role="cell">${r.channelId}</div>
+                <div class="cell cell-mono cell-right" role="cell">${this._formatNumber(r.messagesSent)}</div>
+                <div class="cell cell-mono cell-right" role="cell">${this._formatNumber(r.messagesReceived)}</div>
+                <div class="cell" role="cell"><ic-relative-time .timestamp=${r.lastActiveAt}></ic-relative-time></div>
+                <div class="cell" role="cell">
+                  ${r.isStale?i`<ic-tag variant="warning">Stale</ic-tag>`:i`<ic-tag variant="success">Active</ic-tag>`}
+                </div>
+              </div>
+            `)}
+        </div>
+      </div>
+    `}_renderTabContent(){switch(this._activeTab){case"overview":return this._renderOverview();case"billing":return this._renderBilling();case"delivery":return this._renderDeliveryTab();case"channels":return this._renderChannelsTab();case"diagnostics":return this._renderDiagnostics();default:return this._renderOverview()}}render(){return this._loadState==="loading"&&this.rpcClient?i`<ic-skeleton-view variant="table"></ic-skeleton-view>`:this._loadState==="error"?i`
+        <div class="error-container">
+          <span class="error-message">${this._error}</span>
+          <button class="retry-btn" @click=${()=>this._tryLoad()}>Retry</button>
+        </div>
+      `:i`
+      <div class="observe-view">
+        <ic-tabs
+          .tabs=${E}
+          .activeTab=${this._activeTab}
+          @tab-change=${this._onTabChange}
+        >
+          <div slot="overview">${this._activeTab==="overview"?this._renderOverview():v}</div>
+          <div slot="billing">${this._activeTab==="billing"?this._renderBilling():v}</div>
+          <div slot="delivery">${this._activeTab==="delivery"?this._renderDeliveryTab():v}</div>
+          <div slot="channels">${this._activeTab==="channels"?this._renderChannelsTab():v}</div>
+          <div slot="diagnostics">${this._activeTab==="diagnostics"?this._renderDiagnostics():v}</div>
+        </ic-tabs>
+      </div>
+    `}};s.styles=[S,k,R`
+      :host {
+        display: block;
+      }
+
+      .observe-view {
+        padding: 0;
+      }
+
+      /* Stats row */
+      .stats-row {
+        display: flex;
+        gap: var(--ic-space-md);
+        flex-wrap: wrap;
+        margin-bottom: var(--ic-space-lg);
+      }
+
+      .stats-row ic-stat-card {
+        min-width: 10rem;
+      }
+
+      /* Section styles */
+      .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);
+      }
+
+      /* Chart container */
+      .chart-container {
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-lg);
+        padding: var(--ic-space-lg);
+      }
+
+      .chart-labels {
+        display: flex;
+        justify-content: space-between;
+        color: var(--ic-text-dim);
+        font-size: var(--ic-text-xs);
+        margin-top: var(--ic-space-xs);
+      }
+
+      /* Grid table styles */
+      .grid-table {
+        display: grid;
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-md);
+        overflow: hidden;
+      }
+
+      .grid-table-scroll {
+        overflow-x: auto;
+      }
+
+      .provider-table {
+        grid-template-columns: 1fr repeat(3, auto);
+      }
+
+      .agent-table {
+        grid-template-columns: 1fr repeat(3, auto);
+      }
+
+      .diagnostics-table {
+        grid-template-columns: auto auto 1fr auto;
+      }
+
+      .grid-header {
+        display: contents;
+      }
+
+      .grid-header .cell {
+        background: var(--ic-surface-2, #1f2937);
+        font-weight: 600;
+        color: var(--ic-text-dim);
+        font-size: var(--ic-text-xs);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+
+      .grid-row {
+        display: contents;
+      }
+
+      .grid-row:hover .cell {
+        background: var(--ic-surface-2, #1f2937);
+      }
+
+      .cell {
+        padding: var(--ic-space-sm);
+        font-size: var(--ic-text-sm);
+        border-bottom: 1px solid var(--ic-border);
+        display: flex;
+        align-items: center;
+      }
+
+      .cell-mono {
+        font-family: var(--ic-font-mono, ui-monospace, monospace);
+      }
+
+      .cell-right {
+        justify-content: flex-end;
+      }
+
+      .total-row .cell {
+        font-weight: 600;
+        background: var(--ic-surface);
+      }
+
+      /* Loading & error states */
+      .state-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 3rem;
+        color: var(--ic-text-dim);
+        font-size: 0.875rem;
+      }
+
+      .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);
+      }
+
+      .tab-content {
+        padding-top: var(--ic-space-md);
+      }
+
+      /* Delivery tab styles */
+      .delivery-table {
+        grid-template-columns: auto auto 1fr auto auto auto;
+      }
+
+      .filter-row {
+        display: flex;
+        gap: var(--ic-space-sm);
+        flex-wrap: wrap;
+        margin-bottom: var(--ic-space-md);
+        align-items: center;
+      }
+
+      .filter-select {
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-md);
+        color: var(--ic-text);
+        padding: 0.375rem 0.625rem;
+        font-size: var(--ic-text-sm);
+        cursor: pointer;
+        font-family: inherit;
+      }
+
+      .filter-select:focus-visible {
+        outline: 2px solid var(--ic-accent);
+        outline-offset: 2px;
+      }
+
+      .stats-summary {
+        display: flex;
+        gap: var(--ic-space-lg);
+        font-size: var(--ic-text-sm);
+        color: var(--ic-text-dim);
+        margin-bottom: var(--ic-space-md);
+        padding: var(--ic-space-sm) 0;
+      }
+
+      .stats-summary .stat-value {
+        font-weight: 600;
+        color: var(--ic-text);
+      }
+
+      .stats-summary .rate-green {
+        color: var(--ic-success);
+      }
+
+      .stats-summary .rate-yellow {
+        color: var(--ic-warning);
+      }
+
+      .stats-summary .rate-red {
+        color: var(--ic-error);
+      }
+
+      .trace-detail {
+        grid-column: 1 / -1;
+        background: var(--ic-surface-2, #1f2937);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-md);
+        padding: var(--ic-space-md);
+        margin: var(--ic-space-xs) 0;
+      }
+
+      .trace-detail-title {
+        font-size: var(--ic-text-sm);
+        font-weight: 600;
+        color: var(--ic-text);
+      }
+
+      .step-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ic-space-xs);
+        margin-top: var(--ic-space-sm);
+      }
+
+      .step-item {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-sm);
+        font-size: var(--ic-text-sm);
+      }
+
+      .step-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+
+      .step-dot.ok {
+        background: var(--ic-success);
+      }
+
+      .step-dot.error {
+        background: var(--ic-error);
+      }
+
+      .step-error {
+        color: var(--ic-error);
+        font-size: var(--ic-text-xs);
+        margin-left: calc(8px + var(--ic-space-sm));
+      }
+
+      /* Channel tab styles */
+      .channel-table {
+        grid-template-columns: auto 1fr auto auto auto auto;
+      }
+
+      .stale-alert {
+        background: rgba(251, 191, 36, 0.1);
+        border: 1px solid var(--ic-warning);
+        border-radius: var(--ic-radius-md);
+        padding: var(--ic-space-sm) var(--ic-space-md);
+        color: var(--ic-warning);
+        font-size: var(--ic-text-sm);
+        margin-bottom: var(--ic-space-md);
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-sm);
+      }
+
+      .stale .cell {
+        background: rgba(251, 191, 36, 0.05);
+      }
+
+      /* Overview: 6-card grid */
+      .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        gap: var(--ic-space-md);
+        margin-bottom: var(--ic-space-lg);
+      }
+
+      /* Overview: charts section */
+      .charts-section {
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+        gap: var(--ic-space-lg);
+        margin-bottom: var(--ic-space-xl);
+      }
+
+      @media (max-width: 768px) {
+        .charts-section {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      .chart-title {
+        font-size: var(--ic-text-sm);
+        font-weight: 600;
+        color: var(--ic-text);
+        margin-bottom: var(--ic-space-sm);
+      }
+
+      /* Bar chart for token usage */
+      .bar-chart {
+        display: flex;
+        align-items: flex-end;
+        gap: 2px;
+        height: 120px;
+        padding: var(--ic-space-sm) 0;
+      }
+
+      .bar-chart .bar {
+        flex: 1;
+        background: var(--ic-accent);
+        border-radius: 2px 2px 0 0;
+        min-width: 4px;
+        transition: opacity 0.15s;
+      }
+
+      .bar-chart .bar:hover {
+        opacity: 0.8;
+      }
+
+      /* Overview: health grids section */
+      .health-grids {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--ic-space-lg);
+        margin-bottom: var(--ic-space-xl);
+      }
+
+      @media (max-width: 768px) {
+        .health-grids {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      .health-grid-table {
+        grid-template-columns: 1fr 1fr auto;
+      }
+
+      .health-empty {
+        color: var(--ic-text-dim);
+        font-size: var(--ic-text-sm);
+        font-style: italic;
+        padding: var(--ic-space-lg);
+        text-align: center;
+      }
+
+      /* Overview: reset section */
+      .reset-section {
+        border: 1px solid var(--ic-error);
+        border-radius: var(--ic-radius-lg);
+        padding: var(--ic-space-lg);
+        margin-top: var(--ic-space-xl);
+      }
+
+      .reset-section .section-title {
+        color: var(--ic-error);
+      }
+
+      .reset-btn {
+        padding: 0.5rem 1rem;
+        background: color-mix(in srgb, var(--ic-error) 15%, transparent);
+        border: 1px solid var(--ic-error);
+        border-radius: var(--ic-radius-md);
+        color: var(--ic-error);
+        font-size: var(--ic-text-sm);
+        cursor: pointer;
+        font-family: inherit;
+        font-weight: 500;
+      }
+
+      .reset-btn:hover {
+        background: color-mix(in srgb, var(--ic-error) 25%, transparent);
+      }
+
+      .reset-warning {
+        color: var(--ic-text-dim);
+        font-size: var(--ic-text-sm);
+        margin-bottom: var(--ic-space-md);
+      }
+
+      .reset-input {
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-md);
+        color: var(--ic-text);
+        padding: 0.375rem 0.625rem;
+        font-size: var(--ic-text-sm);
+        font-family: inherit;
+        margin-bottom: var(--ic-space-md);
+        width: 12rem;
+      }
+
+      .reset-input:focus-visible {
+        outline: 2px solid var(--ic-error);
+        outline-offset: 2px;
+      }
+
+      .reset-actions {
+        display: flex;
+        gap: var(--ic-space-sm);
+      }
+
+      .reset-cancel-btn {
+        padding: 0.5rem 1rem;
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-md);
+        color: var(--ic-text);
+        font-size: var(--ic-text-sm);
+        cursor: pointer;
+        font-family: inherit;
+      }
+
+      .reset-confirm-btn {
+        padding: 0.5rem 1rem;
+        border: none;
+        border-radius: var(--ic-radius-md);
+        font-size: var(--ic-text-sm);
+        cursor: pointer;
+        font-family: inherit;
+        font-weight: 500;
+      }
+
+      .reset-confirm-btn[disabled] {
+        background: var(--ic-surface);
+        color: var(--ic-text-dim);
+        cursor: not-allowed;
+      }
+
+      .reset-confirm-btn:not([disabled]) {
+        background: var(--ic-error);
+        color: #fff;
+      }
+
+      .sparkline-side {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ic-space-lg);
+      }
+    `];l([T({attribute:!1})],s.prototype,"rpcClient",2);l([T({attribute:!1})],s.prototype,"eventDispatcher",2);l([T()],s.prototype,"initialTab",2);l([o()],s.prototype,"_loadState",2);l([o()],s.prototype,"_activeTab",2);l([o()],s.prototype,"_error",2);l([o()],s.prototype,"_requestsToday",2);l([o()],s.prototype,"_tokensToday",2);l([o()],s.prototype,"_costToday",2);l([o()],s.prototype,"_errorsToday",2);l([o()],s.prototype,"_tokenUsage24h",2);l([o()],s.prototype,"_billingByProvider",2);l([o()],s.prototype,"_billingByAgent",2);l([o()],s.prototype,"_billingTotal",2);l([o()],s.prototype,"_diagnosticsEvents",2);l([o()],s.prototype,"_deliveryTraces",2);l([o()],s.prototype,"_deliveryStats",2);l([o()],s.prototype,"_channelActivity",2);l([o()],s.prototype,"_agentHealth",2);l([o()],s.prototype,"_channelHealth",2);l([o()],s.prototype,"_resetConfirming",2);l([o()],s.prototype,"_resetInput",2);l([o()],s.prototype,"_deliveryChannelFilter",2);l([o()],s.prototype,"_deliveryStatusFilter",2);l([o()],s.prototype,"_deliveryTimeRange",2);l([o()],s.prototype,"_expandedTraceId",2);s=l([A("ic-observe-view")],s);export{s as IcObserveView};