comisai 1.0.24 → 1.0.26

package/node_modules/@comis/web/dist/assets/{observe-view-C0VBhX4C.js → observe-view-BTSt_PO5.js}

@@ -1,364 +1,4 @@
-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`
+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-BBkuC-EU.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;
       }
@@ -769,46 +409,406 @@ 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 a
         outline-offset: 2px;
       }
 
-      .reset-actions {
-        display: flex;
-        gap: var(--ic-space-sm);
-      }
+      .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-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 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}
 
-      .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;
-      }
+      ${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()}
 
-      .reset-confirm-btn[disabled] {
-        background: var(--ic-surface);
-        color: var(--ic-text-dim);
-        cursor: not-allowed;
-      }
+      <div class="filter-row">
+        ${this._renderChannelFilterSelect()}
+        ${this._renderStatusFilterSelect()}
+        ${this._renderTimeRangeSelect()}
+      </div>
 
-      .reset-confirm-btn:not([disabled]) {
-        background: var(--ic-error);
-        color: #fff;
-      }
+      ${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}
 
-      .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};
+      <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};