comisai 1.0.16 → 1.0.17

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

@@ -0,0 +1,393 @@
+import{a as h,b as s,A as n,s as v,f as m,i as u,n as g,r,t as _}from"./index-CEcM1R_C.js";import"./ic-empty-state-60l2ePhd.js";import"./ic-search-input-CSOxY9g7.js";import"./ic-tag-CPPUnDLF.js";import"./ic-relative-time-3FqpjeAI.js";import"./ic-detail-panel-BF83r-if.js";import"./ic-icon-xeGTVhVG.js";var f=Object.defineProperty,x=Object.getOwnPropertyDescriptor,i=(e,t,l,d)=>{for(var o=d>1?void 0:d?x(t,l):t,c=e.length-1,p;c>=0;c--)(p=e[c])&&(o=(d?p(t,l,o):p(o))||o);return d&&o&&f(t,l,o),o};let a=class extends h{constructor(){super(...arguments),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}updated(e){e.has("rpcClient")&&this.rpcClient&&!this._rpcClientInitialized&&(this._rpcClientInitialized=!0,this._loadConversations())}async _loadConversations(){if(this.rpcClient){this._loadState="loading";try{const 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{const t=await this.rpcClient.call("context.tree",{conversation_id:e});this._treeNodes=t.nodes,this._treeMessageCount=t.messageCount}catch(t){this._errorMsg=t.message}finally{this._treeLoading=!1}}}_toggleNode(e){const t=new Set(this._expanded);t.has(e)?t.delete(e):t.add(e),this._expanded=t}async _inspectNode(e){if(this.rpcClient)try{const t=await this.rpcClient.call("context.inspect",{id:e});this._inspectedNode=t,this._detailOpen=!0}catch(t){this._errorMsg=t.message}}_handleSearch(e){const t=e.detail;if(this._searchQuery=t,this._searchTimeout&&clearTimeout(this._searchTimeout),!t){this._searchResults=[];return}this._searchTimeout=setTimeout(()=>this._executeSearch(t),300)}async _executeSearch(e){if(!(!this.rpcClient||!this._selectedConvId)){this._searchLoading=!0;try{const t=await this.rpcClient.call("context.searchByConversation",{conversation_id:this._selectedConvId,query:e,limit:50});this._searchResults=t.results}catch(t){this._errorMsg=t.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?s`<ic-empty-state message="No conversations found"></ic-empty-state>`:s`
+      <div class="conv-panel-title">Conversations</div>
+      ${this._conversations.map(e=>s`
+        <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?s`<div class="conv-session">${e.title}</div>`:n}
+          <div class="conv-meta">
+            <ic-relative-time .timestamp=${new Date(e.updated_at).getTime()}></ic-relative-time>
+          </div>
+        </button>
+      `)}
+    `}_getRootNodes(){return this._treeNodes.filter(e=>e.parentIds.length===0||e.depth===0)}_renderNode(e){const t=e.childIds.length>0,l=this._expanded.has(e.summaryId),d=this._inspectedNode?.summaryId===e.summaryId,o=t&&l?this._treeNodes.filter(c=>e.childIds.includes(c.summaryId)):[];return s`
+      <div style="padding-left: ${e.depth*16}px">
+        <div
+          class="tree-node ${d?"inspected":""}"
+          @click=${()=>this._inspectNode(e.summaryId)}
+        >
+          <span
+            class="tree-chevron ${t?l?"expanded":"":"leaf"}"
+            @click=${c=>{c.stopPropagation(),t&&this._toggleNode(e.summaryId)}}
+          >${t?"▶":""}</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>
+        ${o.map(c=>this._renderNode(c))}
+      </div>
+    `}_renderTree(){if(this._treeLoading)return s`<ic-loading></ic-loading>`;if(this._treeNodes.length===0)return s`<ic-empty-state message="No summaries in this conversation"></ic-empty-state>`;const e=this._getRootNodes();return s`${e.map(t=>this._renderNode(t))}`}_renderSearchResults(){return this._searchLoading?s`<ic-loading></ic-loading>`:this._searchResults.length===0?s`<ic-empty-state message="No results found"></ic-empty-state>`:s`
+      <div class="search-results">
+        ${this._searchResults.map(e=>s`
+          <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?s`<span class="search-rank">${e.rank.toFixed(2)}</span>`:n}
+          </div>
+        `)}
+      </div>
+    `}_renderDetailPanel(){if(!this._inspectedNode)return n;const e=this._inspectedNode;return s`
+      <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"?s`
+          <div class="detail-section">
+            <div class="detail-label">Metadata</div>
+            <div class="detail-meta-grid">
+              ${e.summaryId?s`<span class="detail-meta-key">ID</span><span class="detail-meta-val">${e.summaryId}</span>`:n}
+              ${e.kind?s`<span class="detail-meta-key">Kind</span><span class="detail-meta-val">${e.kind}</span>`:n}
+              ${e.depth!=null?s`<span class="detail-meta-key">Depth</span><span class="detail-meta-val">${e.depth}</span>`:n}
+              ${e.tokenCount!=null?s`<span class="detail-meta-key">Tokens</span><span class="detail-meta-val">${e.tokenCount}</span>`:n}
+              ${e.sourceMessageCount!=null?s`<span class="detail-meta-key">Source Messages</span><span class="detail-meta-val">${e.sourceMessageCount}</span>`:n}
+              ${e.parentIds?s`<span class="detail-meta-key">Parents</span><span class="detail-meta-val">${e.parentIds.length>0?e.parentIds.join(", "):"none"}</span>`:n}
+              ${e.childIds?s`<span class="detail-meta-key">Children</span><span class="detail-meta-val">${e.childIds.length>0?e.childIds.join(", "):"none"}</span>`:n}
+            </div>
+          </div>
+        `:n}
+      </ic-detail-panel>
+    `}render(){if(this._loadState==="loading")return s`<ic-loading></ic-loading>`;if(this._loadState==="error")return s`<div class="error-msg">Failed to load conversations: ${this._errorMsg}</div>`;const e=this._selectedConvId!==null;return s`
+      <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?s`
+          <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>
+        `:n}
+      </div>
+
+      ${this._renderDetailPanel()}
+    `}};a.styles=[v,m,u`
+      :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);
+      }
+    `];i([g({attribute:!1})],a.prototype,"rpcClient",2);i([r()],a.prototype,"_loadState",2);i([r()],a.prototype,"_conversations",2);i([r()],a.prototype,"_selectedConvId",2);i([r()],a.prototype,"_treeNodes",2);i([r()],a.prototype,"_treeMessageCount",2);i([r()],a.prototype,"_expanded",2);i([r()],a.prototype,"_searchQuery",2);i([r()],a.prototype,"_searchResults",2);i([r()],a.prototype,"_inspectedNode",2);i([r()],a.prototype,"_detailOpen",2);i([r()],a.prototype,"_treeLoading",2);i([r()],a.prototype,"_searchLoading",2);i([r()],a.prototype,"_errorMsg",2);a=i([_("ic-context-dag-browser")],a);export{a as IcContextDagBrowser};