comisai 1.0.37 → 1.0.40

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

@@ -1,814 +0,0 @@
-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{n as u,t as d}from"./observability-types-D0tkwElU.js";import{i as f,t as p}from"./index-8Tg9oc-C.js";import"./ic-tag-CvMVQFRR.js";import"./ic-relative-time-B3UAnTqg.js";import"./ic-empty-state-CM3Wbj2f.js";import"./ic-tabs-yBjkWKJH.js";import"./ic-delivery-row-B3YwjjuM.js";var m=3e4,h=[{id:`overview`,label:`Overview`},{id:`billing`,label:`Billing`},{id:`delivery`,label:`Delivery`},{id:`channels`,label:`Channels`},{id:`diagnostics`,label:`Diagnostics`}],g=class extends r{constructor(...e){super(...e),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}static{this.styles=[o,i,n`
-      :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);
-      }
-    `]}connectedCallback(){super.connectedCallback(),this._activeTab=this.initialTab,this._initSse()}_initSse(){!this.eventDispatcher||this._sse||(this._sse=new f(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()},m))}async _loadData(){if(!this.rpcClient||this.rpcClient.status!==`connected`){this._loadState=`loaded`;return}let e=this.rpcClient,[t,n,r,i,a,o,s,c,l]=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`)]),u=!1,d=``;if(t.status===`fulfilled`){let e=t.value,n=Number(e.total??e.totalDelivered??0),r=Number(e.failures??e.failed??0),i=0;e.successRate===void 0?n>0&&(i=Number(e.successes??0)/n*100):i=Number(e.successRate),this._deliveryStats={successRate:i,avgLatencyMs:Number(e.avgLatencyMs??0),totalDelivered:n,failed:r},this._requestsToday=n,this._errorsToday=r,u=!0}else d=t.reason instanceof Error?t.reason.message:`Failed to load delivery stats`;if(n.status===`fulfilled`){let e=n.value,t={totalTokens:Number(e.totalTokens??0),totalCost:Number(e.totalCost??0)};this._billingTotal=t,this._tokensToday=t.totalTokens,this._costToday=t.totalCost,u=!0}else d||=n.reason instanceof Error?n.reason.message:`Failed to load billing total`;if(r.status===`fulfilled`&&(this._tokenUsage24h=Array.isArray(r.value)?r.value:[],u=!0),i.status===`fulfilled`){let e=i.value;if(Array.isArray(e))this._billingByProvider=e;else{let t=e;this._billingByProvider=Array.isArray(t.providers)?t.providers:[]}u=!0}if(a.status===`fulfilled`){let e=a.value;if(Array.isArray(e))this._diagnosticsEvents=e;else{let t=e;this._diagnosticsEvents=Array.isArray(t.events)?t.events:[]}u=!0}if(o.status===`fulfilled`){let e=o.value;if(Array.isArray(e))this._deliveryTraces=e;else{let t=e;this._deliveryTraces=Array.isArray(t.deliveries)?t.deliveries:[]}u=!0}if(s.status===`fulfilled`){let e=s.value;if(Array.isArray(e))this._channelActivity=e;else{let t=e;this._channelActivity=Array.isArray(t.channels)?t.channels:[]}u=!0}if(c.status===`fulfilled`){let t=Array.isArray(c.value.agents)?c.value.agents:[];if(t.length>0){let n=await Promise.allSettled(t.map(t=>e.call(`agents.get`,{agentId:t})));this._agentHealth=n.filter(e=>e.status===`fulfilled`).map(e=>e.value)}else this._agentHealth=[];u=!0}l.status===`fulfilled`&&(this._channelHealth=Array.isArray(l.value.channels)?l.value.channels:[],u=!0),u?(this._loadState=`loaded`,this._error=``):(this._loadState=`error`,this._error=d||`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){let t=e/1e6;return t%1==0?`${t}M`:`${t.toFixed(1)}M`}if(e>=1e3){let 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(){let e=this._getErrorRate();return e>5?`var(--ic-error)`:e>1?`var(--ic-warning)`:`var(--ic-success)`}_getLatencyColor(){let 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(){let e=this.rpcClient&&this.rpcClient.status===`connected`,n=this._getErrorRate(),r=e?this._deliveryStats&&this._deliveryStats.totalDelivered>0?`${n.toFixed(1)}%`:`0%`:`---`,i=e?this._deliveryStats?`${this._deliveryStats.avgLatencyMs}ms`:`0ms`:`---`,a=e?String(this._agentHealth.filter(e=>!e.suspended).length):`---`;return t`
-      <!-- 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=${i}
-        ></ic-stat-card>
-        <ic-stat-card
-          label="Active Agents"
-          .value=${a}
-        ></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?t`
-                    <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>
-                  `:t`<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(){let e=Math.max(...this._tokenUsage24h.map(e=>e.tokens),1);return this._tokenUsage24h.map(n=>t`<div class="bar" style="height: ${n.tokens/e*100}%" title="${n.hour}:00 - ${this._formatTokens(n.tokens)} tokens"></div>`)}_renderAgentHealthGrid(){return this._agentHealth.length===0?t`<div class="health-empty">No agents configured</div>`:t`
-      <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=>t`
-            <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?t`<ic-tag variant="default">suspended</ic-tag>`:t`<ic-tag variant="success">active</ic-tag>`}
-              </div>
-            </div>
-          `)}
-      </div>
-    `}_renderChannelHealthGrid(){return this._channelHealth.length===0?t`<div class="health-empty">No channels configured</div>`:t`
-      <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=>{let n=p(e.status);return t`
-              <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=${{green:`success`,yellow:`warning`,red:`error`,gray:`default`}[n.severity]}>
-                    ${n.label}
-                  </ic-tag>
-                </div>
-              </div>
-            `})}
-      </div>
-    `}_renderResetSection(){return t`
-      <div class="reset-section">
-        <div class="section-title">Reset Observability Data</div>
-        ${this._resetConfirming?t`
-              <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>
-            `:t`
-              <button class="reset-btn" @click=${this._onResetClick}>
-                Reset Observability Data
-              </button>
-            `}
-      </div>
-    `}_renderBilling(){return this._billingByProvider.length===0&&this._billingByAgent.length===0?t`<ic-empty-state icon="dollar-sign" message="No billing data available"></ic-empty-state>`:t`
-      ${this._billingByProvider.length>0?t`
-            <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=>t`
-                      <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>
-          `:l}
-
-      ${this._billingByAgent.length>0?t`
-            <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=>t`
-                      <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>
-          `:l}
-    `}_renderProviderTotal(){let e=this._billingByProvider.reduce((e,t)=>({totalTokens:e.totalTokens+t.totalTokens,callCount:e.callCount+t.callCount,totalCost:e.totalCost+t.totalCost}),{totalTokens:0,callCount:0,totalCost:0});return t`
-      <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(){return this._diagnosticsEvents.length===0?t`<ic-empty-state icon="activity" message="No diagnostic events"></ic-empty-state>`:t`
-      <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>
-          ${[...this._diagnosticsEvents].sort((e,t)=>t.timestamp-e.timestamp).map(e=>t`
-              <div class="grid-row" role="row">
-                <div class="cell" role="cell">
-                  <ic-relative-time .timestamp=${e.timestamp}></ic-relative-time>
-                </div>
-                <div class="cell" role="cell">
-                  <ic-tag>${e.category}</ic-tag>
-                </div>
-                <div class="cell" role="cell">${u(e)}</div>
-                <div class="cell" role="cell">
-                  <ic-tag variant=${d(e)===`error`?`error`:d(e)===`warn`?`warning`:`default`}>
-                    ${d(e)}
-                  </ic-tag>
-                </div>
-              </div>
-            `)}
-        </div>
-      </div>
-    `}_getTimeRangeMs(){return{"1h":36e5,"6h":216e5,"24h":864e5,"7d":6048e5}[this._deliveryTimeRange]??36e5}_getFilteredTraces(){let e=Date.now(),t=this._getTimeRangeMs();return this._deliveryTraces.filter(n=>!(this._deliveryChannelFilter!==`all`&&n.channelType!==this._deliveryChannelFilter||this._deliveryStatusFilter!==`all`&&n.status!==this._deliveryStatusFilter||n.timestamp<e-t)).sort((e,t)=>t.timestamp-e.timestamp)}_onDeliveryChannelFilter(e){this._deliveryChannelFilter=e.target.value}_onDeliveryStatusFilter(e){this._deliveryStatusFilter=e.target.value}_onDeliveryTimeRange(e){this._deliveryTimeRange=e.target.value}_onTraceClick(e){let t=e.detail;this._expandedTraceId=this._expandedTraceId===t?null:t}_renderDeliveryStats(){if(!this._deliveryStats)return l;let e=this._deliveryStats,n=e.totalDelivered>0;return t`
-      <div class="stats-summary">
-        <span>Success <span class="stat-value ${n?e.successRate>=99?`rate-green`:e.successRate>=95?`rate-yellow`:`rate-red`:``}">${n?`${e.successRate.toFixed(1)}%`:`N/A`}</span></span>
-        <span>Avg <span class="stat-value">${n?`${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?t`
-        <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>
-      `:t`
-      <div class="trace-detail">
-        <div class="trace-detail-title">Delivery Steps</div>
-        <div class="step-list">
-          ${e.steps.map(e=>t`
-              <div class="step-item">
-                <span class="step-dot ${e.status}"></span>
-                <span>${e.name} &mdash; ${e.durationMs}ms</span>
-              </div>
-              ${e.error?t`<div class="step-error">${e.error}</div>`:l}
-            `)}
-        </div>
-      </div>
-    `}_renderChannelFilterSelect(){let e=[...new Set(this._deliveryTraces.map(e=>e.channelType))];return t`
-      <select class="filter-select" @change=${this._onDeliveryChannelFilter}>
-        <option value="all">All Channels</option>
-        ${e.map(e=>t`<option value=${e}>${e}</option>`)}
-      </select>
-    `}_renderStatusFilterSelect(){return t`
-      <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 t`
-      <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 t`
-      <ic-delivery-row
-        .trace=${e}
-        @trace-click=${this._onTraceClick}
-      ></ic-delivery-row>
-      ${this._expandedTraceId===e.traceId?this._renderTraceDetail(e):l}
-    `}_renderDeliveryTab(){let e=this._getFilteredTraces();return t`
-      ${this._renderDeliveryStats()}
-
-      <div class="filter-row">
-        ${this._renderChannelFilterSelect()}
-        ${this._renderStatusFilterSelect()}
-        ${this._renderTimeRangeSelect()}
-      </div>
-
-      ${e.length===0?t`<ic-empty-state icon="truck" message="No delivery traces match the current filters"></ic-empty-state>`:t`
-            <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(e=>this._renderDeliveryRow(e))}
-              </div>
-            </div>
-          `}
-    `}_renderChannelsTab(){if(this._channelActivity.length===0)return t`<ic-empty-state icon="radio" title="No Channel Data" description="Channel activity will appear once channels are connected and processing messages."></ic-empty-state>`;let e=[...this._channelActivity].sort((e,t)=>e.isStale&&!t.isStale?-1:!e.isStale&&t.isStale?1:t.lastActiveAt-e.lastActiveAt),n=e.filter(e=>e.isStale).length;return t`
-      ${n>0?t`<div class="stale-alert">${n} stale channel(s) detected</div>`:l}
-
-      <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(e=>t`
-              <div class="grid-row ${e.isStale?`stale`:``}" role="row">
-                <div class="cell" role="cell"><ic-tag variant=${e.channelType}>${e.channelType}</ic-tag></div>
-                <div class="cell cell-mono" role="cell">${e.channelId}</div>
-                <div class="cell cell-mono cell-right" role="cell">${this._formatNumber(e.messagesSent)}</div>
-                <div class="cell cell-mono cell-right" role="cell">${this._formatNumber(e.messagesReceived)}</div>
-                <div class="cell" role="cell"><ic-relative-time .timestamp=${e.lastActiveAt}></ic-relative-time></div>
-                <div class="cell" role="cell">
-                  ${e.isStale?t`<ic-tag variant="warning">Stale</ic-tag>`:t`<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?t`<ic-skeleton-view variant="table"></ic-skeleton-view>`:this._loadState===`error`?t`
-        <div class="error-container">
-          <span class="error-message">${this._error}</span>
-          <button class="retry-btn" @click=${()=>this._tryLoad()}>Retry</button>
-        </div>
-      `:t`
-      <div class="observe-view">
-        <ic-tabs
-          .tabs=${h}
-          .activeTab=${this._activeTab}
-          @tab-change=${this._onTabChange}
-        >
-          <div slot="overview">${this._activeTab===`overview`?this._renderOverview():l}</div>
-          <div slot="billing">${this._activeTab===`billing`?this._renderBilling():l}</div>
-          <div slot="delivery">${this._activeTab===`delivery`?this._renderDeliveryTab():l}</div>
-          <div slot="channels">${this._activeTab===`channels`?this._renderChannelsTab():l}</div>
-          <div slot="diagnostics">${this._activeTab===`diagnostics`?this._renderDiagnostics():l}</div>
-        </ic-tabs>
-      </div>
-    `}};c([s({attribute:!1})],g.prototype,`rpcClient`,void 0),c([s({attribute:!1})],g.prototype,`eventDispatcher`,void 0),c([s()],g.prototype,`initialTab`,void 0),c([a()],g.prototype,`_loadState`,void 0),c([a()],g.prototype,`_activeTab`,void 0),c([a()],g.prototype,`_error`,void 0),c([a()],g.prototype,`_requestsToday`,void 0),c([a()],g.prototype,`_tokensToday`,void 0),c([a()],g.prototype,`_costToday`,void 0),c([a()],g.prototype,`_errorsToday`,void 0),c([a()],g.prototype,`_tokenUsage24h`,void 0),c([a()],g.prototype,`_billingByProvider`,void 0),c([a()],g.prototype,`_billingByAgent`,void 0),c([a()],g.prototype,`_billingTotal`,void 0),c([a()],g.prototype,`_diagnosticsEvents`,void 0),c([a()],g.prototype,`_deliveryTraces`,void 0),c([a()],g.prototype,`_deliveryStats`,void 0),c([a()],g.prototype,`_channelActivity`,void 0),c([a()],g.prototype,`_agentHealth`,void 0),c([a()],g.prototype,`_channelHealth`,void 0),c([a()],g.prototype,`_resetConfirming`,void 0),c([a()],g.prototype,`_resetInput`,void 0),c([a()],g.prototype,`_deliveryChannelFilter`,void 0),c([a()],g.prototype,`_deliveryStatusFilter`,void 0),c([a()],g.prototype,`_deliveryTimeRange`,void 0),c([a()],g.prototype,`_expandedTraceId`,void 0),g=c([e(`ic-observe-view`)],g);export{g as IcObserveView};