comisai 1.0.15 → 1.0.17

package/node_modules/@comis/web/dist/assets/context-engine-BZ5Am6hA.js

@@ -0,0 +1,393 @@
+import{s as m,i as h,n as v,a as f,b as r,A as g,t as _,S as b,f as x,r as d}from"./index-CEcM1R_C.js";import"./ic-budget-segment-bar-BtJ6x5mN.js";import"./ic-layer-waterfall-COvEYMg5.js";import"./ic-relative-time-3FqpjeAI.js";import"./ic-empty-state-60l2ePhd.js";import"./ic-icon-xeGTVhVG.js";var y=Object.defineProperty,w=Object.getOwnPropertyDescriptor,u=(e,t,i,s)=>{for(var a=s>1?void 0:s?w(t,i):t,n=e.length-1,c;n>=0;n--)(c=e[n])&&(a=(s?c(t,i,a):c(a))||a);return s&&a&&y(t,i,a),a};const $={file_read:"var(--ic-accent)",exec:"var(--ic-success)",web:"var(--ic-info, #3b82f6)",image:"var(--ic-warning)",error:"var(--ic-error)"},C="var(--ic-text-dim)";let p=class extends f{constructor(){super(...arguments),this.categories={},this.showLegend=!0}_getColor(e){return $[e]??C}_getEntries(){return Object.entries(this.categories).filter(([,e])=>e>0).map(([e,t])=>({name:e,count:t,color:this._getColor(e)}))}render(){const e=this._getEntries(),t=e.reduce((i,s)=>i+s.count,0);return t===0||e.length===0?r`<div class="empty">No evictions</div>`:r`
+      <div class="total-label">${t} eviction${t===1?"":"s"}</div>
+      <div class="bar" role="img" aria-label="Eviction breakdown">
+        ${e.map(i=>{const s=i.count/t*100;return r`
+            <div
+              class="segment"
+              style="width: ${s}%; background: ${i.color};"
+              title="${i.name}: ${i.count} evictions (${s.toFixed(1)}%)"
+            ></div>
+          `})}
+      </div>
+      ${this.showLegend?r`
+            <div class="legend">
+              ${e.map(i=>r`
+                  <span class="legend-item">
+                    <span
+                      class="legend-dot"
+                      style="background: ${i.color};"
+                    ></span>
+                    ${i.name}
+                  </span>
+                `)}
+            </div>
+          `:g}
+    `}};p.styles=[m,h`
+      :host {
+        display: block;
+      }
+
+      .total-label {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+        margin-bottom: var(--ic-space-xs);
+      }
+
+      .bar {
+        display: flex;
+        height: 20px;
+        border-radius: var(--ic-radius-sm, 4px);
+        overflow: hidden;
+      }
+
+      .segment {
+        min-width: 2px;
+        height: 100%;
+        transition: width var(--ic-transition, 150ms ease);
+      }
+
+      .legend {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--ic-space-sm);
+        margin-top: var(--ic-space-sm);
+      }
+
+      .legend-item {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+      }
+
+      .legend-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+
+      .empty {
+        font-size: var(--ic-text-sm);
+        color: var(--ic-text-dim);
+        font-style: italic;
+      }
+    `];u([v({attribute:!1})],p.prototype,"categories",2);u([v({type:Boolean,attribute:"show-legend"})],p.prototype,"showLegend",2);p=u([_("ic-eviction-chart")],p);var k=Object.defineProperty,D=Object.getOwnPropertyDescriptor,l=(e,t,i,s)=>{for(var a=s>1?void 0:s?D(t,i):t,n=e.length-1,c;n>=0;n--)(c=e[n])&&(a=(s?c(t,i,a):c(a))||a);return s&&a&&k(t,i,a),a};const P=3e4;let o=class extends f{constructor(){super(...arguments),this.rpcClient=null,this.eventDispatcher=null,this._sse=null,this._reloadDebounce=null,this._loadState="loading",this._pipelines=[],this._dagCompactions=[],this._selectedPipeline=null,this._agentFilter="",this._agents=[],this._refreshInterval=null,this._rpcStatusUnsub=null}connectedCallback(){super.connectedCallback(),this._initSse()}_initSse(){!this.eventDispatcher||this._sse||(this._sse=new b(this,this.eventDispatcher,{"observability:token_usage":()=>{this._scheduleReload()}}))}_scheduleReload(e=300){this._reloadDebounce!==null&&clearTimeout(this._reloadDebounce),this._reloadDebounce=setTimeout(()=>{this._reloadDebounce=null,this._loadData()},e)}disconnectedCallback(){super.disconnectedCallback(),this._reloadDebounce!==null&&(clearTimeout(this._reloadDebounce),this._reloadDebounce=null),this._refreshInterval!==null&&(clearInterval(this._refreshInterval),this._refreshInterval=null),this._rpcStatusUnsub?.(),this._rpcStatusUnsub=null}willUpdate(e){e.has("rpcClient")&&this.rpcClient&&this._tryLoad(),e.has("eventDispatcher")&&this.eventDispatcher&&!this._sse&&this._initSse()}_tryLoad(){if(!this.rpcClient){this._loadState="loaded";return}this._rpcStatusUnsub?.(),this.rpcClient.status==="connected"?this._startLoading():this._rpcStatusUnsub=this.rpcClient.onStatusChange(e=>{e==="connected"&&this._startLoading()})}_startLoading(){this._loadData(),this._refreshInterval===null&&(this._refreshInterval=setInterval(()=>{this._loadData()},P))}async _loadData(){if(!this.rpcClient||this.rpcClient.status!=="connected"){this._loadState="loaded";return}const e=this.rpcClient,t={};this._agentFilter&&(t.agentId=this._agentFilter);try{const i=await e.call("obs.context.pipeline",t);this._pipelines=Array.isArray(i)?i:[]}catch{this._pipelines=[]}!this._selectedPipeline&&this._pipelines.length>0&&(this._selectedPipeline=this._pipelines[0]),this._loadState="loaded",Promise.allSettled([e.call("obs.context.dag",t),e.call("agents.list")]).then(([i,s])=>{if(this._dagCompactions=i.status==="fulfilled"&&Array.isArray(i.value)?i.value:[],s.status==="fulfilled"){const a=s.value,n=Array.isArray(a)?a:Array.isArray(a.agents)?a.agents:[];this._agents=n.map(c=>typeof c=="string"?{id:c,name:c,provider:"",model:"",status:"active"}:c)}})}_onAgentFilter(e){this._agentFilter=e.target.value,this._selectedPipeline=null,this._loadData()}_onPipelineSelect(e){this._selectedPipeline=e}_formatTime(e){return new Date(e).toLocaleTimeString(void 0,{hour:"2-digit",minute:"2-digit",second:"2-digit"})}_formatNumber(e){return new Intl.NumberFormat("en-US").format(e)}_renderPipelineMetrics(){const e=this._pipelines.length>0?this._pipelines[0]:null;if(!e)return r`
+        <div class="section">
+          <div class="section-title">Pipeline Metrics</div>
+          <ic-empty-state
+            icon="activity"
+            message="No pipeline data available. Pipeline metrics appear after the context engine processes messages."
+          ></ic-empty-state>
+        </div>
+      `;const i=[{label:"System",tokens:Math.max(0,e.tokensLoaded-e.tokensEvicted-e.tokensMasked-e.tokensCompacted),color:"var(--ic-accent)"},{label:"Evicted",tokens:e.tokensEvicted,color:"var(--ic-error)"},{label:"Masked",tokens:e.tokensMasked,color:"var(--ic-warning)"},{label:"Compacted",tokens:e.tokensCompacted,color:"var(--ic-info, #3b82f6)"}].filter(n=>n.tokens>0),s=this._pipelines.filter(n=>n.cacheHitTokens>0).length,a=this._pipelines.length>0?Math.round(s/this._pipelines.length*100):0;return r`
+      <div class="section">
+        <div class="section-title">Pipeline Metrics</div>
+        <div class="card">
+          <div class="metrics-grid">
+            <div class="budget-bar-container">
+              <ic-budget-segment-bar .segments=${i}></ic-budget-segment-bar>
+            </div>
+            <ic-metric-gauge
+              .value=${a}
+              label="Cache Hit Rate"
+              size="sm"
+            ></ic-metric-gauge>
+            <ic-eviction-chart
+              .categories=${e.evictionCategories}
+            ></ic-eviction-chart>
+          </div>
+          <div class="stat-badges">
+            <div class="stat-badge">
+              Masked <span class="stat-value">${this._formatNumber(e.tokensMasked)}</span> tokens
+            </div>
+            <div class="stat-badge">
+              Duration <span class="stat-value">${e.durationMs}</span>ms
+            </div>
+            <div class="stat-badge">
+              Thinking removed <span class="stat-value">${e.thinkingBlocksRemoved}</span>
+            </div>
+            <div class="stat-badge">
+              Budget <span class="stat-value">${Math.round(e.budgetUtilization*100)}%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `}_renderLayerWaterfall(){const e=this._pipelines.slice(0,10);return r`
+      <div class="section">
+        <div class="section-title">Layer Waterfall</div>
+        ${e.length===0?r`<ic-empty-state icon="layers" message="No pipeline executions to display"></ic-empty-state>`:r`
+              <div class="execution-list">
+                ${e.map(t=>r`
+                    <button
+                      class="execution-row ${this._selectedPipeline===t?"selected":""}"
+                      @click=${()=>this._onPipelineSelect(t)}
+                    >
+                      <span class="exec-time">${this._formatTime(t.timestamp)}</span>
+                      <span class="exec-agent">${t.agentId}</span>
+                      <span class="exec-duration">${t.durationMs}ms</span>
+                      <span class="exec-layers">${t.layerCount} layers</span>
+                    </button>
+                  `)}
+              </div>
+              ${this._selectedPipeline&&this._selectedPipeline.layers.length>0?r`
+                    <div class="card">
+                      <ic-layer-waterfall
+                        .layers=${this._selectedPipeline.layers}
+                        .totalDurationMs=${this._selectedPipeline.durationMs}
+                      ></ic-layer-waterfall>
+                    </div>
+                  `:g}
+            `}
+      </div>
+    `}_renderDagPanel(){if(this._dagCompactions.length===0)return g;const e=this._dagCompactions.length,t=Math.round(this._dagCompactions.reduce((a,n)=>a+n.totalSummariesCreated,0)/e),i=Math.max(...this._dagCompactions.map(a=>a.maxDepthReached)),s=this._dagCompactions[0].durationMs;return r`
+      <div class="section">
+        <div class="section-title">DAG Compaction</div>
+        <div class="card">
+          <div class="dag-grid">
+            <div class="dag-stat">
+              <div class="dag-value">${e}</div>
+              <div class="dag-label">Total Compactions</div>
+            </div>
+            <div class="dag-stat">
+              <div class="dag-value">${t}</div>
+              <div class="dag-label">Avg Summaries</div>
+            </div>
+            <div class="dag-stat">
+              <div class="dag-value">${i}</div>
+              <div class="dag-label">Max Depth</div>
+            </div>
+            <div class="dag-stat">
+              <div class="dag-value">${s}ms</div>
+              <div class="dag-label">Latest Duration</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `}render(){return this._loadState==="loading"&&!this.rpcClient?r`<ic-skeleton-view variant="table"></ic-skeleton-view>`:this._loadState==="error"?r`
+        <div class="error-container">
+          <span class="error-message">Failed to load context engine data</span>
+          <button class="retry-btn" @click=${()=>this._tryLoad()}>Retry</button>
+        </div>
+      `:r`
+      <div class="context-engine-view">
+        <div class="filter-row">
+          ${this._renderAgentFilter()}
+        </div>
+        ${this._renderPipelineMetrics()}
+        ${this._renderLayerWaterfall()}
+        ${this._renderDagPanel()}
+      </div>
+    `}_renderAgentFilter(){return r`
+      <select class="filter-select" @change=${this._onAgentFilter}>
+        <option value="">All Agents</option>
+        ${this._agents.map(e=>r`<option value=${e.id}>${e.id}</option>`)}
+      </select>
+    `}};o.styles=[m,x,h`
+      :host {
+        display: block;
+      }
+
+      .context-engine-view {
+        padding: 0;
+      }
+
+      .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);
+      }
+
+      .card {
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-lg);
+        padding: var(--ic-space-lg);
+      }
+
+      .metrics-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--ic-space-md);
+      }
+
+      @media (max-width: 767px) {
+        .metrics-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      .budget-bar-container {
+        grid-column: 1 / -1;
+      }
+
+      .stat-badges {
+        display: flex;
+        gap: var(--ic-space-md);
+        flex-wrap: wrap;
+        margin-top: var(--ic-space-md);
+      }
+
+      .stat-badge {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-xs);
+        background: var(--ic-surface-2, #1f2937);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-md);
+        padding: var(--ic-space-xs) var(--ic-space-sm);
+        font-size: var(--ic-text-sm);
+        color: var(--ic-text-dim);
+      }
+
+      .stat-badge .stat-value {
+        font-weight: 600;
+        color: var(--ic-text);
+        font-family: var(--ic-font-mono, ui-monospace, monospace);
+      }
+
+      .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;
+      }
+
+      /* Pipeline execution list */
+      .execution-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ic-space-xs);
+        margin-bottom: var(--ic-space-md);
+      }
+
+      .execution-row {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-md);
+        padding: var(--ic-space-sm) var(--ic-space-md);
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-md);
+        cursor: pointer;
+        font-size: var(--ic-text-sm);
+        transition: background var(--ic-transition);
+      }
+
+      .execution-row:hover {
+        background: var(--ic-surface-2, #1f2937);
+      }
+
+      .execution-row.selected {
+        border-color: var(--ic-accent);
+        background: rgba(59, 130, 246, 0.1);
+      }
+
+      .execution-row .exec-time {
+        color: var(--ic-text-dim);
+        min-width: 6rem;
+      }
+
+      .execution-row .exec-agent {
+        color: var(--ic-text);
+        font-weight: 500;
+        flex: 1;
+      }
+
+      .execution-row .exec-duration {
+        font-family: var(--ic-font-mono, ui-monospace, monospace);
+        color: var(--ic-text-dim);
+      }
+
+      .execution-row .exec-layers {
+        color: var(--ic-text-dim);
+      }
+
+      /* DAG panel */
+      .dag-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+        gap: var(--ic-space-md);
+      }
+
+      .dag-stat {
+        text-align: center;
+        padding: var(--ic-space-md);
+      }
+
+      .dag-stat .dag-value {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: var(--ic-text);
+        font-family: var(--ic-font-mono, ui-monospace, monospace);
+      }
+
+      .dag-stat .dag-label {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        margin-top: var(--ic-space-xs);
+      }
+
+      /* 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);
+      }
+    `];l([v({attribute:!1})],o.prototype,"rpcClient",2);l([v({attribute:!1})],o.prototype,"eventDispatcher",2);l([d()],o.prototype,"_loadState",2);l([d()],o.prototype,"_pipelines",2);l([d()],o.prototype,"_dagCompactions",2);l([d()],o.prototype,"_selectedPipeline",2);l([d()],o.prototype,"_agentFilter",2);l([d()],o.prototype,"_agents",2);o=l([_("ic-context-engine-view")],o);export{o as IcContextEngineView};