comisai 1.0.37 → 1.0.41

package/node_modules/@comis/web/dist/assets/context-dag-browser-DrU6rs_2.js

@@ -0,0 +1,393 @@
+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,r as d,s as f}from"./system-time-B0nBw4nV.js";import"./index-D_ZV_sV5.js";import"./ic-tag-CKh2gHHX.js";import"./ic-relative-time-D6XlY7ay.js";import"./ic-search-input-BpNiR0Fq.js";import"./ic-empty-state-BRy4ZXds.js";import"./ic-detail-panel-DGevqzFo.js";var p=class extends r{constructor(...e){super(...e),this.rpcClient=null,this._loadState=`loading`,this._conversations=[],this._selectedConvId=null,this._treeNodes=[],this._treeMessageCount=0,this._expanded=new Set,this._searchQuery=``,this._searchResults=[],this._inspectedNode=null,this._detailOpen=!1,this._treeLoading=!1,this._searchLoading=!1,this._errorMsg=``,this._searchTimeout=null,this._rpcClientInitialized=!1}static{this.styles=[o,i,n`
+      :host {
+        display: block;
+      }
+
+      .header-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: var(--ic-space-md);
+      }
+
+      .header-title {
+        font-size: var(--ic-text-lg);
+        font-weight: 600;
+        color: var(--ic-text);
+      }
+
+      .header-stats {
+        font-size: var(--ic-text-sm);
+        color: var(--ic-text-dim);
+      }
+
+      .layout {
+        display: grid;
+        grid-template-columns: 320px 1fr;
+        gap: var(--ic-space-md);
+        min-height: 400px;
+      }
+
+      .layout.no-tree {
+        grid-template-columns: 1fr;
+      }
+
+      /* Conversation list panel */
+      .conv-panel {
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-md);
+        padding: var(--ic-space-sm);
+        overflow-y: auto;
+        max-height: 80vh;
+      }
+
+      .conv-panel-title {
+        font-size: var(--ic-text-sm);
+        font-weight: 600;
+        color: var(--ic-text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        padding: var(--ic-space-xs) var(--ic-space-sm);
+        margin-bottom: var(--ic-space-xs);
+      }
+
+      .conv-card {
+        display: block;
+        width: 100%;
+        padding: var(--ic-space-sm);
+        background: none;
+        border: 1px solid transparent;
+        border-radius: var(--ic-radius-sm);
+        cursor: pointer;
+        text-align: left;
+        color: var(--ic-text-muted);
+        font-family: inherit;
+        font-size: var(--ic-text-sm);
+        transition: background var(--ic-transition), border-color var(--ic-transition);
+      }
+
+      .conv-card:hover {
+        background: var(--ic-surface-2);
+      }
+
+      .conv-card.selected {
+        background: rgba(59, 130, 246, 0.1);
+        border-color: var(--ic-accent);
+        color: var(--ic-text);
+      }
+
+      .conv-agent {
+        font-weight: 500;
+        color: var(--ic-text);
+        margin-bottom: 2px;
+      }
+
+      .conv-session {
+        font-size: 11px;
+        color: var(--ic-text-dim);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .conv-meta {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-xs);
+        margin-top: 4px;
+        font-size: 11px;
+        color: var(--ic-text-dim);
+      }
+
+      /* Tree panel */
+      .tree-panel {
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-md);
+        padding: var(--ic-space-md);
+        overflow-y: auto;
+        max-height: 80vh;
+      }
+
+      .tree-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: var(--ic-space-sm);
+      }
+
+      .tree-title {
+        font-size: var(--ic-text-sm);
+        font-weight: 600;
+        color: var(--ic-text);
+      }
+
+      .tree-msg-count {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+      }
+
+      .search-section {
+        margin-bottom: var(--ic-space-sm);
+      }
+
+      /* Tree nodes */
+      .tree-node {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--ic-space-xs);
+        padding: 4px var(--ic-space-xs);
+        border-radius: var(--ic-radius-sm);
+        cursor: pointer;
+        transition: background var(--ic-transition);
+      }
+
+      .tree-node:hover {
+        background: var(--ic-surface-2);
+      }
+
+      .tree-node.inspected {
+        background: rgba(59, 130, 246, 0.08);
+      }
+
+      .tree-chevron {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px;
+        height: 16px;
+        font-size: 10px;
+        color: var(--ic-text-dim);
+        flex-shrink: 0;
+        margin-top: 2px;
+        cursor: pointer;
+        transition: transform var(--ic-transition);
+      }
+
+      .tree-chevron.expanded {
+        transform: rotate(90deg);
+      }
+
+      .tree-chevron.leaf {
+        visibility: hidden;
+      }
+
+      .tree-content {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .tree-node-header {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-xs);
+        font-size: var(--ic-text-sm);
+      }
+
+      .tree-preview {
+        font-size: 12px;
+        color: var(--ic-text-dim);
+        margin-top: 2px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .tree-node-meta {
+        font-size: 11px;
+        color: var(--ic-text-dim);
+      }
+
+      /* Search results */
+      .search-results {
+        margin-top: var(--ic-space-sm);
+      }
+
+      .search-result {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--ic-space-xs);
+        padding: var(--ic-space-xs) var(--ic-space-sm);
+        border-radius: var(--ic-radius-sm);
+        cursor: pointer;
+        transition: background var(--ic-transition);
+      }
+
+      .search-result:hover {
+        background: var(--ic-surface-2);
+      }
+
+      .search-result-content {
+        flex: 1;
+        font-size: var(--ic-text-sm);
+        color: var(--ic-text-muted);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      .search-rank {
+        font-size: 11px;
+        color: var(--ic-text-dim);
+        flex-shrink: 0;
+      }
+
+      /* Detail panel content */
+      .detail-section {
+        margin-bottom: var(--ic-space-md);
+      }
+
+      .detail-label {
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--ic-text-dim);
+        margin-bottom: var(--ic-space-xs);
+      }
+
+      .detail-value {
+        font-size: var(--ic-text-sm);
+        color: var(--ic-text);
+      }
+
+      .detail-content {
+        font-size: var(--ic-text-sm);
+        color: var(--ic-text);
+        white-space: pre-wrap;
+        word-break: break-word;
+        max-height: 400px;
+        overflow-y: auto;
+        background: var(--ic-surface-2);
+        border-radius: var(--ic-radius-sm);
+        padding: var(--ic-space-sm);
+      }
+
+      .detail-meta-grid {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 4px var(--ic-space-sm);
+        font-size: var(--ic-text-sm);
+      }
+
+      .detail-meta-key {
+        color: var(--ic-text-dim);
+        font-weight: 500;
+      }
+
+      .detail-meta-val {
+        color: var(--ic-text);
+      }
+
+      .error-msg {
+        color: var(--ic-error);
+        font-size: var(--ic-text-sm);
+        padding: var(--ic-space-md);
+      }
+    `]}updated(e){e.has(`rpcClient`)&&this.rpcClient&&!this._rpcClientInitialized&&(this._rpcClientInitialized=!0,this._loadConversations())}async _loadConversations(){if(this.rpcClient){this._loadState=`loading`;try{let e=await this.rpcClient.call(`context.conversations`,{limit:100,offset:0});this._conversations=e.conversations,this._loadState=`loaded`}catch(e){this._errorMsg=e.message,this._loadState=`error`}}}async _selectConversation(e){this._selectedConvId!==e&&(this._selectedConvId=e,this._treeNodes=[],this._searchQuery=``,this._searchResults=[],this._expanded=new Set,this._inspectedNode=null,this._detailOpen=!1,await this._loadTree(e))}async _loadTree(e){if(this.rpcClient){this._treeLoading=!0;try{let t=await this.rpcClient.call(`context.tree`,{conversation_id:e});this._treeNodes=t.nodes,this._treeMessageCount=t.messageCount}catch(e){this._errorMsg=e.message}finally{this._treeLoading=!1}}}_toggleNode(e){let t=new Set(this._expanded);t.has(e)?t.delete(e):t.add(e),this._expanded=t}async _inspectNode(e){if(this.rpcClient)try{let t=await this.rpcClient.call(`context.inspect`,{id:e});this._inspectedNode=t,this._detailOpen=!0}catch(e){this._errorMsg=e.message}}_handleSearch(e){let t=e.detail;if(this._searchQuery=t,this._searchTimeout&&u(this._searchTimeout),!t){this._searchResults=[];return}this._searchTimeout=f(()=>this._executeSearch(t),300)}async _executeSearch(e){if(!(!this.rpcClient||!this._selectedConvId)){this._searchLoading=!0;try{let t=await this.rpcClient.call(`context.searchByConversation`,{conversation_id:this._selectedConvId,query:e,limit:50});this._searchResults=t.results}catch(e){this._errorMsg=e.message}finally{this._searchLoading=!1}}}_handleSearchResultClick(e){e.type===`summary`?this._inspectNode(e.id):(this._inspectedNode={type:`message`,content:e.content},this._detailOpen=!0)}_renderConversationList(){return this._conversations.length===0?t`<ic-empty-state message="No conversations found"></ic-empty-state>`:t`
+      <div class="conv-panel-title">Conversations</div>
+      ${this._conversations.map(e=>t`
+        <button
+          class="conv-card ${this._selectedConvId===e.conversation_id?`selected`:``}"
+          @click=${()=>this._selectConversation(e.conversation_id)}
+        >
+          <div class="conv-agent">${e.agent_id}</div>
+          <div class="conv-session">${e.session_key.length>40?e.session_key.slice(0,40)+`...`:e.session_key}</div>
+          ${e.title?t`<div class="conv-session">${e.title}</div>`:l}
+          <div class="conv-meta">
+            <ic-relative-time .timestamp=${d(e.updated_at).getTime()}></ic-relative-time>
+          </div>
+        </button>
+      `)}
+    `}_getRootNodes(){return this._treeNodes.filter(e=>e.parentIds.length===0||e.depth===0)}_renderNode(e){let n=e.childIds.length>0,r=this._expanded.has(e.summaryId),i=this._inspectedNode?.summaryId===e.summaryId,a=n&&r?this._treeNodes.filter(t=>e.childIds.includes(t.summaryId)):[];return t`
+      <div style="padding-left: ${e.depth*16}px">
+        <div
+          class="tree-node ${i?`inspected`:``}"
+          @click=${()=>this._inspectNode(e.summaryId)}
+        >
+          <span
+            class="tree-chevron ${n?r?`expanded`:``:`leaf`}"
+            @click=${t=>{t.stopPropagation(),n&&this._toggleNode(e.summaryId)}}
+          >${n?`▶`:``}</span>
+          <div class="tree-content">
+            <div class="tree-node-header">
+              <ic-tag .label=${e.kind}></ic-tag>
+              <span class="tree-node-meta">d${e.depth} | ${e.tokenCount}t</span>
+            </div>
+            <div class="tree-preview">${e.contentPreview.slice(0,100)}</div>
+          </div>
+        </div>
+        ${a.map(e=>this._renderNode(e))}
+      </div>
+    `}_renderTree(){return this._treeLoading?t`<ic-loading></ic-loading>`:this._treeNodes.length===0?t`<ic-empty-state message="No summaries in this conversation"></ic-empty-state>`:t`${this._getRootNodes().map(e=>this._renderNode(e))}`}_renderSearchResults(){return this._searchLoading?t`<ic-loading></ic-loading>`:this._searchResults.length===0?t`<ic-empty-state message="No results found"></ic-empty-state>`:t`
+      <div class="search-results">
+        ${this._searchResults.map(e=>t`
+          <div class="search-result" @click=${()=>this._handleSearchResultClick(e)}>
+            <ic-tag .label=${e.type}></ic-tag>
+            <div class="search-result-content">${e.content.slice(0,150)}</div>
+            ${e.rank==null?l:t`<span class="search-rank">${e.rank.toFixed(2)}</span>`}
+          </div>
+        `)}
+      </div>
+    `}_renderDetailPanel(){if(!this._inspectedNode)return l;let e=this._inspectedNode;return t`
+      <ic-detail-panel
+        ?open=${this._detailOpen}
+        panelTitle="${e.type===`summary`?`Summary Detail`:`Message Detail`}"
+        @close=${()=>{this._detailOpen=!1}}
+      >
+        <div class="detail-section">
+          <div class="detail-label">Content</div>
+          <div class="detail-content">${e.content}</div>
+        </div>
+
+        ${e.type===`summary`?t`
+          <div class="detail-section">
+            <div class="detail-label">Metadata</div>
+            <div class="detail-meta-grid">
+              ${e.summaryId?t`<span class="detail-meta-key">ID</span><span class="detail-meta-val">${e.summaryId}</span>`:l}
+              ${e.kind?t`<span class="detail-meta-key">Kind</span><span class="detail-meta-val">${e.kind}</span>`:l}
+              ${e.depth==null?l:t`<span class="detail-meta-key">Depth</span><span class="detail-meta-val">${e.depth}</span>`}
+              ${e.tokenCount==null?l:t`<span class="detail-meta-key">Tokens</span><span class="detail-meta-val">${e.tokenCount}</span>`}
+              ${e.sourceMessageCount==null?l:t`<span class="detail-meta-key">Source Messages</span><span class="detail-meta-val">${e.sourceMessageCount}</span>`}
+              ${e.parentIds?t`<span class="detail-meta-key">Parents</span><span class="detail-meta-val">${e.parentIds.length>0?e.parentIds.join(`, `):`none`}</span>`:l}
+              ${e.childIds?t`<span class="detail-meta-key">Children</span><span class="detail-meta-val">${e.childIds.length>0?e.childIds.join(`, `):`none`}</span>`:l}
+            </div>
+          </div>
+        `:l}
+      </ic-detail-panel>
+    `}render(){if(this._loadState===`loading`)return t`<ic-loading></ic-loading>`;if(this._loadState===`error`)return t`<div class="error-msg">Failed to load conversations: ${this._errorMsg}</div>`;let e=this._selectedConvId!==null;return t`
+      <div class="header-row">
+        <span class="header-title">Context DAG Browser</span>
+        <span class="header-stats">${this._conversations.length} conversations</span>
+      </div>
+
+      <div class="layout ${e?``:`no-tree`}">
+        <div class="conv-panel">
+          ${this._renderConversationList()}
+        </div>
+
+        ${e?t`
+          <div class="tree-panel">
+            <div class="tree-header">
+              <span class="tree-title">Summary Tree</span>
+              <span class="tree-msg-count">${this._treeMessageCount} messages</span>
+            </div>
+
+            <div class="search-section">
+              <ic-search-input
+                placeholder="Search messages & summaries..."
+                debounce="300"
+                @search=${this._handleSearch}
+              ></ic-search-input>
+            </div>
+
+            ${this._searchQuery?this._renderSearchResults():this._renderTree()}
+          </div>
+        `:l}
+      </div>
+
+      ${this._renderDetailPanel()}
+    `}};c([s({attribute:!1})],p.prototype,`rpcClient`,void 0),c([a()],p.prototype,`_loadState`,void 0),c([a()],p.prototype,`_conversations`,void 0),c([a()],p.prototype,`_selectedConvId`,void 0),c([a()],p.prototype,`_treeNodes`,void 0),c([a()],p.prototype,`_treeMessageCount`,void 0),c([a()],p.prototype,`_expanded`,void 0),c([a()],p.prototype,`_searchQuery`,void 0),c([a()],p.prototype,`_searchResults`,void 0),c([a()],p.prototype,`_inspectedNode`,void 0),c([a()],p.prototype,`_detailOpen`,void 0),c([a()],p.prototype,`_treeLoading`,void 0),c([a()],p.prototype,`_searchLoading`,void 0),c([a()],p.prototype,`_errorMsg`,void 0),p=c([e(`ic-context-dag-browser`)],p);export{p as IcContextDagBrowser};