1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3161],{65672:(e,t,i)=>{i.r(t),i.d(t,{CpkThreadInspector:()=>Z,THREAD_INSPECTOR_TAG:()=>x,WEB_INSPECTOR_TAG:()=>b,WebInspectorElement:()=>es,defineWebInspector:()=>en,ɵCpkThreadDetails:()=>et,ɵbuildCapabilityRows:()=>D,ɵmaxRecallScore:()=>Y,ɵnormalizeRelevance:()=>X,ɵrelevanceBarWidth:()=>Q});var s=i(14838),n=i(91211),a=i(76409),r=i(81113),o=i(30381),l=i(59262),d=i(53365),c=i(4587),p=i(87013),h=i(51532),u=i(64558),g=i(67746),m=i(40665),f=i(96381),v=i(65695);let b="cpk-web-inspector",x="cpk-thread-inspector",y="Memory",w={threads:["threads"],agents:["ag-ui-events","agents","frontend-tools","capabilities","agent-context"],learning:["memories"]},_=[...w.threads,...w.agents,...w.learning];function k(e){return"string"==typeof e&&_.some(t=>t===e)}let T=[{key:"threads",label:"Threads",icon:"MessageSquare"},{key:"agents",label:"Agents",icon:"Bot"},{key:"learning",label:"Learning",icon:"Brain"}],S="cpk:inspector:state",E="cpk:inspector:announcements",C={width:48,height:48},I={width:840,height:700},$="outline-style:solid;outline-width:2px;outline-color:transparent;outline-offset:2px;cursor:pointer;",A="https://go.copilotkit.ai/intelligence-signup",M="https://www.copilotkit.ai/talk-to-an-engineer",O="https://docs.copilotkit.ai/backend/runtime-endpoints#enable-rich-threads-routes",P=`Read ${O} and finish setting up Rich Threads in this repository. 2 3First inspect the repository's agent instructions, installed CopilotKit versions, Runtime adapter, frontend provider, route or proxy setup, and existing authentication. Preserve the current framework and deployment model. Preserve existing authentication middleware and access checks on every Runtime route. 4 5Follow the guide to enable the multi-route Runtime, align the frontend transport, scope identifyUser to the existing server-verified signed-in application user, and expose the full Runtime subtree for GET, POST, PATCH, and DELETE. Never use a fixed demo identity in production. If no trusted user identity exists, stop and ask me which auth source to use. 6 7Start the app and verify GET {basePath}/info reports threadEndpoints.list, inspect, mutations, and realtimeMetadata as true. Run focused tests, lint, and typecheck. Report the files changed, commands run, and verification result. If blocked, explain the missing input; do not invent setup.`,R="cpk:inspector:threads-example-tour:v1",q="threads-feature",z=["RUN_STARTED","RUN_FINISHED","RUN_ERROR","STEP_STARTED","STEP_FINISHED","TEXT_MESSAGE_START","TEXT_MESSAGE_CONTENT","TEXT_MESSAGE_END","TOOL_CALL_START","TOOL_CALL_ARGS","TOOL_CALL_END","TOOL_CALL_RESULT","STATE_SNAPSHOT","STATE_DELTA","MESSAGES_SNAPSHOT","RAW_EVENT","CUSTOM_EVENT","REASONING_START","REASONING_MESSAGE_START","REASONING_MESSAGE_CONTENT","REASONING_MESSAGE_END","REASONING_END","REASONING_ENCRYPTED_VALUE","ACTIVITY_SNAPSHOT","ACTIVITY_DELTA"];function D(e){let t=[];for(let i of e.tools??[]){let s=`${i.agentId??""}:${i.name}`;t.push({key:s,name:i.name,description:i.description,agentId:i.agentId,enabled:e.isToolEnabled(i.name,i.agentId)})}return t.sort((e,t)=>{let i=(e.agentId??"").localeCompare(t.agentId??"");return 0!==i?i:e.name.localeCompare(t.name)})}let L=[{id:"example-realtime-sync",name:"Realtime thread sync",agentId:q,organizationId:"example-organization",createdById:"example-user",archived:!1,createdAt:"2026-07-08T16:00:00.000Z",updatedAt:"2026-07-08T16:30:00.000Z",isExample:!0},{id:"example-manage-history",name:"Manage saved conversations",agentId:q,organizationId:"example-organization",createdById:"example-user",archived:!1,createdAt:"2026-07-07T17:45:00.000Z",updatedAt:"2026-07-07T18:15:00.000Z",isExample:!0},{id:"example-inspect-runs",name:"Inspect durable run history",agentId:q,organizationId:"example-organization",createdById:"example-user",archived:!1,createdAt:"2026-07-06T20:15:00.000Z",updatedAt:"2026-07-06T20:45:00.000Z",isExample:!0}];function V(e){switch(e){case"example-realtime-sync":return"realtime_sync";case"example-manage-history":return"manage_history";case"example-inspect-runs":return"inspect_runs";default:return}}let U={"example-realtime-sync":{messages:[{id:"example-sync-user",role:"user",content:"Resume the checkout support thread from yesterday."},{id:"example-sync-assistant",role:"assistant",content:"I found the saved thread, restored the cart state, and continued from the latest user message."}],events:[{type:"RUN_STARTED",timestamp:"2026-07-08T16:30:00.000Z",payload:{threadId:"example-realtime-sync",agentId:q}},{type:"MESSAGES_SNAPSHOT",timestamp:"2026-07-08T16:30:01.000Z",payload:{messageCount:6,source:"thread-history"}}
7,{type:"STATE_SNAPSHOT",timestamp:"2026-07-08T16:30:02.000Z",payload:{cartId:"cart_demo_42",checkoutStep:"shipping",resumed:!0}},{type:"RUN_FINISHED",timestamp:"2026-07-08T16:30:04.000Z",payload:{status:"completed"}}],state:{cartId:"cart_demo_42",checkoutStep:"shipping",userIntent:"resume_previous_checkout",persistedThread:!0}},"example-manage-history":{messages:[{id:"example-history-user",role:"user",content:"Rename this saved support conversation for the handoff."},{id:"example-history-assistant",role:"assistant",content:"Renamed the thread and kept the prior messages available for the next session."}],events:[{type:"RUN_STARTED",timestamp:"2026-07-07T18:15:00.000Z",payload:{threadId:"example-manage-history",agentId:q}},{type:"CUSTOM_EVENT",timestamp:"2026-07-07T18:15:01.000Z",payload:{action:"thread_renamed",previousName:"Untitled",name:"Billing escalation handoff"}},{type:"RUN_FINISHED",timestamp:"2026-07-07T18:15:03.000Z",payload:{status:"completed"}}],state:{name:"Billing escalation handoff",savedMessages:14,lastHandoff:"support-team"}},"example-inspect-runs":{messages:[{id:"example-inspect-user",role:"user",content:"Why did the assistant recommend the enterprise plan?"},{id:"example-inspect-assistant",role:"assistant",content:"The recommendation came from the account size, SSO requirement, and audit-log constraint in state."}],events:[{type:"RUN_STARTED",timestamp:"2026-07-06T20:45:00.000Z",payload:{threadId:"example-inspect-runs",agentId:q}},{type:"TOOL_CALL_START",timestamp:"2026-07-06T20:45:01.000Z",payload:{toolCallId:"call_account_lookup",toolName:"lookupAccount"}},{type:"TOOL_CALL_RESULT",timestamp:"2026-07-06T20:45:02.000Z",payload:{toolCallId:"call_account_lookup",seats:220,requiresSso:!0}},{type:"RUN_FINISHED",timestamp:"2026-07-06T20:45:04.000Z",payload:{status:"completed"}}],state:{accountTier:"growth",seats:220,requiresSso:!0,auditLogsRequired:!0}}},N=[{tab:"timeline",label:"Messages",title:"Read the run as a story",body:"The timeline turns messages, tool calls, state changes, and run markers into a scannable debugging trail."},{tab:"raw-events",label:"AG-UI Events",title:"Drop into the protocol payloads",body:"Raw events show the exact AG-UI stream behind the timeline when you need to verify ordering or payload shape."},{tab:"state",label:"State",title:"Check the durable state",body:"The state tab shows the saved values that make a thread resumable across sessions."}];function F(e){switch(e){case 0:return{tour_step:1,tour_tab:"timeline"};case 1:return{tour_step:2,tour_tab:"raw-events"};case 2:return{tour_step:3,tour_tab:"state"};default:return}}function B(e){return"threads-footer"===e?"threads_footer":"threads_locked"}function j(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">")}let G=new WeakMap;function W(e){let t;if("object"==typeof e&&null!==e){let t=G.get(e);if(void 0!==t)return t}let i=JSON.stringify(e,null,2);if(!i)return"";let s=[],n=0,a=/("(?:\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*"(?:\s*:)?|\b(?:true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g;for(;null!==(t=a.exec(i));){s.push(j(i.slice(n,t.index)));let e=t[0],a="#8a5900";e.startsWith('"')?a=e.trimEnd().endsWith(":")?"#5558B2":"#087653":"true"===e||"false"===e?a="#c0333a":"null"===e&&(a="#68686e"),s.push(`<span style="color:${a}">${j(e)}</span>`),n=t.index+e.length}s.push(j(i.slice(n)));let r=s.join("");return"object"==typeof e&&null!==e&&G.set(e,r),r}function H(e){let t=new Date(e);if(Number.isNaN(t.getTime()))return"";let i=t.getMilliseconds().toString().padStart(3,"0");return t.toLocaleTimeString("en-US",{hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:!1})+"."+i}var K=class extends h.WF{createRenderRoot(){let e=this.constructor,t=this.shadowRoot??this.attachShadow(e.shadowRootOptions);for(let i of e.elementStyles){let e=this.ownerDocument.createElement("style");e.textContent="cssText"in i?i.cssText:Array.from(i.cssRules,e=>e.cssText).join(""),t.append(e)}return t}},J=class extends K{constructor(...e){super(...e),this.threads=[],this.selectedThreadId=null,this.errorMessage=null,this.suppressEmptyState=!1,this._query="",this.onSearchInput=e=>{this._query=e.target.value}}static{this.properties={threads:{attribute:!1},selectedThreadId:{attribute:!1},errorMessage:{attribute:!1},suppressEmptyState:{attribute:!1},_query:{state:!0}}}static{this.styles=(0,h.AH)` 8 @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&family=Spline+Sans+Mono:wght@400;500&display=swap"); 9 10 :host { 11 display: flex; 12 flex-direction: column; 13 height: 100%; 14 overflow: hidden; 15 } 16 17 .cpk-tl { 18 font-family: "Plus Jakarta Sans", sans-serif; 19 display: flex; 20 flex-direction: column; 21 height: 100%; 22 overflow: hidden; 23 background: #f7f7f9; 24 } 25 26 /* ââ Search ââ */ 27 .cpk-tl__search { 28 padding: 10px 12px; 29 border-bottom: 1px solid #dbdbe5; 30 flex-shrink: 0; 31 } 32 33 .cpk-tl__search-input { 34 width: 100%; 35 box-sizing: border-box; 36 font-family: "Plus Jakarta Sans", sans-serif; 37 font-size: 12px; 38 padding: 7px 10px; 39 border-radius: 6px; 40 border: 1px solid #dbdbe5; 41 background: #ffffff; 42 color: #010507; 43 outline: none; 44 transition: border-color 0.15s; 45 } 46 47 .cpk-tl__search-input:focus { 48 border-color: #bec2ff; 49 } 50 51 /* ââ List ââ */ 52 .cpk-tl__list { 53 flex: 1; 54 overflow-y: auto; 55 } 56 57 /* ââ Thread item ââ */ 58 .cpk-tl__item { 59 appearance: none; 60 display: block; 61 box-sizing: border-box; 62 width: 100%; 63 margin: 0; 64 border: 0; 65 border-radius: 0; 66 padding: 11px 13px; 67 background: transparent; 68 color: inherit; 69 font: inherit; 70 text-align: left; 71 cursor: pointer; 72 border-bottom: 1px solid #e9e9ef; 73 border-left: 3px solid transparent; 74 transition: background 0.1s; 75 } 76 77 .cpk-tl__item:hover { 78 background: #ffffff; 79 } 80 81 .cpk-tl__item--active { 82 background: #bec2ff1a; 83 border-left-color: #bec2ff; 84 } 85 86 .cpk-tl__item--active:hover { 87 background: #bec2ff33; 88 } 89 90 .cpk-tl__item:focus-visible { 91 outline-color: #5558b2; 92 outline-offset: -2px; 93 outline-style: solid; 94 outline-width: 2px; 95 } 96 97 .cpk-tl__row1 { 98 display: flex; 99 align-items: center; 100 gap: 8px; 101 margin-bottom: 3px; 102 } 103 104 .cpk-tl__name { 105 font-size: 12px; 106 font-weight: 500; 107 color: #010507; 108 flex: 1; 109 overflow: hidden; 110 text-overflow: ellipsis; 111 white-space: nowrap; 112 } 113 114 .cpk-tl__name--unnamed { 115 color: #68686e; 116 font-style: italic; 117 font-weight: 400; 118 } 119 120 .cpk-tl__time { 121 font-family: "Spline Sans Mono", monospace; 122 font-size: 10px; 123 color: #68686e; 124 flex-shrink: 0; 125 } 126 127 .cpk-tl__meta { 128 display: flex; 129 gap: 6px; 130 align-items: center; 131 flex-wrap: wrap; 132 } 133 134 .cpk-tl__pill {
135 font-family: "Spline Sans Mono", monospace; 136 font-size: 9px; 137 padding: 1px 7px; 138 border-radius: 4px; 139 text-transform: uppercase; 140 font-weight: 500; 141 white-space: nowrap; 142 background: #eee6fe; 143 color: #57575b; 144 } 145 146 .cpk-tl__pill--example { 147 background: rgba(133, 236, 206, 0.22); 148 color: #087653; 149 } 150 151 /* ââ Empty state ââ */ 152 .cpk-tl__empty { 153 padding: 32px 16px; 154 text-align: center; 155 color: #68686e; 156 font-size: 12px; 157 display: flex; 158 flex-direction: column; 159 align-items: center; 160 gap: 8px; 161 } 162 163 .cpk-tl__empty-icon { 164 color: #c0c0c8; 165 } 166 `}relativeTime(e){let t=new Date(e),i=Math.floor((Date.now()-t.getTime())/1e3);if(i<60)return`${i}s ago`;let s=Math.floor(i/60);if(s<60)return`${s}m ago`;let n=Math.floor(s/60);return n<24?`${n}h ago`:`${Math.floor(n/24)}d ago`}get filtered(){let e=this._query.toLowerCase();return e?this.threads.filter(t=>(t.name?.toLowerCase().includes(e)??!1)||t.agentId.toLowerCase().includes(e)||t.id.toLowerCase().includes(e)):this.threads}onThreadClick(e){this.dispatchEvent(new CustomEvent("threadSelected",{detail:e,bubbles:!0,composed:!0}))}render(){let e=this.filtered;return(0,h.qy)` 167 <div class="cpk-tl"> 168 <!-- Search --> 169 <div class="cpk-tl__search"> 170 <input 171 type="text" 172 placeholder="Search threadsâ¦" 173 .value=${this._query} 174 @input=${this.onSearchInput} 175 class="cpk-tl__search-input" 176 /> 177 </div> 178 179 <!-- Thread list --> 180 <div class="cpk-tl__list"> 181 ${e.map(e=>(0,h.qy)` 182 <button 183 type="button" 184 aria-current=${this.selectedThreadId===e.id?"true":h.s6} 185 class="cpk-tl__item ${this.selectedThreadId===e.id?"cpk-tl__item--active":""}" 186 @click=${()=>this.onThreadClick(e.id)} 187 > 188 <span class="cpk-tl__row1"> 189 <span 190 class="cpk-tl__name ${!e.name?"cpk-tl__name--unnamed":""}" 191 >${e.name??"Untitled"}</span 192 > 193 <span class="cpk-tl__time" 194 >${this.relativeTime(e.updatedAt)}</span 195 > 196 </span> 197 <span class="cpk-tl__meta"> 198 <span class="cpk-tl__pill">${e.agentId}</span> 199 ${e.isExample?(0,h.qy)` 200 <span class="cpk-tl__pill cpk-tl__pill--example">Example</span> 201 `:h.s6} 202 </span> 203 </button> 204 `)} 205 ${0===e.length&&!this.suppressEmptyState?(0,h.qy)` 206 <div class="cpk-tl__empty"> 207 ${this.errorMessage?(0,h.qy)` 208 <svg 209 width="24" 210 height="24"
211 viewBox="0 0 24 24" 212 fill="none" 213 stroke="currentColor" 214 stroke-width="1.5" 215 stroke-linecap="round" 216 stroke-linejoin="round" 217 class="cpk-tl__empty-icon" 218 > 219 <circle cx="12" cy="12" r="10" /> 220 <line x1="12" y1="8" x2="12" y2="12" /> 221 <line x1="12" y1="16" x2="12.01" y2="16" /> 222 </svg> 223 <div> 224 Failed to load threads 225 <div 226 style="font-size:11px;margin-top:4px;color:#c0333a;" 227 > 228 ${this.errorMessage} 229 </div> 230 </div> 231 `:0===this.threads.length?(0,h.qy)` 232 <svg 233 width="24" 234 height="24"
235 viewBox="0 0 24 24" 236 fill="none" 237 stroke="currentColor" 238 stroke-width="1.5" 239 stroke-linecap="round" 240 stroke-linejoin="round" 241 class="cpk-tl__empty-icon" 242 > 243 <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /> 244 </svg> 245 No threads yet 246 `:(0,h.qy)` 247 No threads match your search. 248 `} 249 </div> 250 `:h.s6} 251 </div> 252 </div> 253 `}},Z=class e extends K{constructor(...t){super(...t),this.threadId=null,this.provider=null,this.thread=null,this.runtimeUrl="",this.headers={},this.threadInspectionAvailable=!1,this.agentStateInput=null,this.agentEventsInput=[],this.liveMessageVersion=0,this.focusMessageId=null,this.focusRequestId=0,this._tab="timeline",this._fetchedMetadata=null,this._conversation=[],this._fetchedEvents=null,this._fetchedState=null,this._loadingMessages=!1,this._loadingEvents=!1,this._loadingState=!1,this._messagesError=null,this._eventsError=null,this._stateError=null,this._expandedTools=new Set,this._expandedMessages=new Set,this._expandedTimelineDetails=new Set,this._expandedRawEvents=new Set,this._showDetailPanel=!1,this._detailPanelWidth=250,this._eventsNotAvailable=!1,this._stateNotAvailable=!1,this._scrolledFocusRequestId=0,this._highlightedFocusRequestId=-1,this._panelInitializing=!1,this._activatedTabs=new Set(["timeline"]),this._panelTplCache=new Map,this._timelineItemsCache=null,this._liveEventsWithSourceIndexCache=null,this._eventsFetched=!1,this._stateFetched=!1,this._lastLoadKey=null,this._lastSeenLiveMessageVersion=0,this._metadataAbort=null,this._messagesAbort=null,this._eventsAbort=null,this._stateAbort=null,this._hasConnectedOnce=!1,this._dividerResizing=!1,this._dividerPointerId=-1,this._dividerStartX=0,this._dividerStartWidth=0,this.domIdPrefix=`cpk-thread-detail-${e.nextDomId++}`,this.onDetailDividerDown=e=>{this._dividerResizing=!0,this._dividerPointerId=e.pointerId,this._dividerStartX=e.clientX,this._dividerStartWidth=this._detailPanelWidth,e.currentTarget.setPointerCapture(e.pointerId),e.preventDefault()},this.onDetailDividerMove=e=>{if(!this._dividerResizing||this._dividerPointerId!==e.pointerId)return;let t=this._dividerStartX-e.clientX;this._detailPanelWidth=Math.max(160,Math.min(400,this._dividerStartWidth+t))},this.onDetailDividerUp=e=>{if(this._dividerPointerId!==e.pointerId)return;let t=e.currentTarget;t.hasPointerCapture(this._dividerPointerId)&&t.releasePointerCapture(this._dividerPointerId),this._dividerResizing=!1}}static{this.properties={threadId:{attribute:!1},provider:{attribute:!1},thread:{attribute:!1},runtimeUrl:{attribute:!1},headers:{attribute:!1},threadInspectionAvailable:{attribute:!1},agentStateInput:{attribute:!1},agentEventsInput:{attribute:!1},liveMessageVersion:{attribute:!1},focusMessageId:{attribute:!1},focusRequestId:{attribute:!1},_tab:{state:!0},_fetchedMetadata:{state:!0},_conversation:{state:!0},_fetchedEvents:{state:!0},_fetchedState:{state:!0},_loadingMessages:{state:!0},_loadingEvents:{state:!0},_loadingState:{state:!0},_messagesError:{state:!0},_eventsError:{state:!0},_stateError:{state:!0},_expandedTools:{state:!0},_expandedMessages:{state:!0},_expandedTimelineDetails:{state:!0},_expandedRawEvents:{state:!0},_showDetailPanel:{state:!0},_detailPanelWidth:{state:!0},_eventsNotAvailable:{state:!0},_stateNotAvailable:{state:!0},_panelInitializing:{state:!0},_activatedTabs:{state:!0}}}static{this.nextDomId=1}static{this.COLLAPSE_THRESHOLD=800}static{this.TAB_LIST=[{id:"timeline",label:"Messages"},{id:"raw-events",label:"AG-UI Events"},{id:"state",label:"State"}]}static{this.providerIds=new WeakMap}static{this.nextProviderId=1}static providerLoadKey(t){if(!t)return"provider:none";let i=e.providerIds.get(t);return i||(i=e.nextProviderId,e.nextProviderId+=1,e.providerIds.set(t,i)),[`provider:${i}`,t.getThreadMetadata?"metadata:1":"metadata:0",t.getMessages?"messages:1":"messages:0",t.getEvents?"events:1":"events:0",t.getState?"state:1":"state:0"].join("|")}static headersLoadKey(e){return JSON.stringify(Object.entries(e).sort(([e],[t])=>e.localeCompare(t)))}renderTabContent(e){return"timeline"===e?this.renderTimeline():"state"===e?this.renderState():this.renderEvents()}tabDomId(e){return`${this.domIdPrefix}-tab-${e}`}panelDomId(e){return`${this.domIdPrefix}-panel-${e}`}handleTabKeyDown(t,i){let s=e.TAB_LIST.findIndex(e=>e.id===i);if(s<0)return;let n=null;if("ArrowRight"===t.key?n=(s+1)%e.TAB_LIST.length:"ArrowLeft"===t.key?n=(s-1+e.TAB_LIST.length)%e.TAB_LIST.length:"Home"===t.key?n=0:"End"===t.key&&(n=e.TAB_LIST.length-1),null===n)return;let a=e.TAB_LIST[n];a&&(t.preventDefault(),this.activateTab(a.id),this.shadowRoot?.querySelector(`#${this.tabDomId(a.id)}`)?.focus())}activateTab(e){if(this._tab===e)return;let t=!this._activatedTabs.has(e);this._tab=e,t&&(this._panelInitializing=!0,requestAnimationFrame(()=>{this._activatedTabs=new Set([...this._activatedTabs,e]),this._panelInitializing=!1})),this.maybeFetchTabData(e)}selectTab(e){this.activateTab(e)}maybeFetchTabData(e){this.threadId&&("timeline"!==e&&"raw-events"!==e||this._eventsFetched?"state"!==e||this._stateFetched||(this._stateFetched=!0,this.fetchState(this.threadId)):(this._eventsFetched=!0,this.fetchEvents(this.threadId)))}static{this.styles=(0,h.AH)` 254 @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&family=Spline+Sans+Mono:wght@400;500&display=swap"); 255 256 /* ââ Root ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 257 :host { 258 display: flex; 259 flex-direction: row; 260 overflow: hidden; 261 } 262 263 .cpk-td { 264 font-family: "Plus Jakarta Sans", sans-serif; 265 font-size: 13px; 266 display: flex; 267 flex-direction: row; 268 width: 100%; 269 height: 100%; 270 overflow: hidden; 271 background: #ffffff; 272 } 273 274 /* ââ Left area âââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 275 .cpk-td__left { 276 flex: 1; 277 min-width: 0; 278 display: flex; 279 flex-direction: column; 280 overflow: hidden; 281 } 282 283 /* ââ Tab bar header ââââââââââââââââââââââââââââââââââââââââââââââââ */ 284 .cpk-td__tabs-header { 285 /* No top/right padding so tabs and toggle sit flush against the 286 top and right edges of the inspector. */ 287 padding: 0 0 0 12px; 288 border-bottom: 1px solid #dbdbe5; 289 flex-shrink: 0; 290 display: flex; 291 align-items: stretch; 292 } 293 294 .cpk-td__tab-group { 295 display: flex; 296 gap: 0; 297 margin-bottom: -1px; 298 /* Allow the tab list to shrink rather than pushing the panel-toggle 299 button past the right edge of the inspector when horizontal space 300 gets tight (the drawer being open eats noticeably into width). */ 301 min-width: 0; 302 flex-shrink: 1; 303 overflow: hidden; 304 } 305 306 .cpk-td__tab { 307 font-family: "Plus Jakarta Sans", sans-serif; 308 font-size: 11px; 309 font-weight: 500; 310 padding: 10px 12px; 311 border: none; 312 border-bottom: 2px solid transparent; 313 cursor: pointer; 314 background: transparent; 315 color: #68686e; 316 transition: 317 color 0.12s, 318 border-color 0.12s; 319 white-space: nowrap; 320 } 321 322 .cpk-td__tab:hover { 323 color: #010507; 324 } 325 326 .cpk-td__tab:focus-visible { 327 outline: 2px solid #5558b2; 328 outline-offset: -3px; 329 border-radius: 4px; 330 } 331 332 .cpk-td__tab--active { 333 color: #010507; 334 border-bottom-color: #bec2ff; 335 } 336 337 /* Toggle is a separate control, not a tab â so it does NOT use the 338 tabs' bottom-border active indicator. Instead, a subtle filled 339 state communicates "the drawer is open," and a vertical separator 340 on the left visually divorces it from the tab group. */ 341 .cpk-td__panel-toggle { 342 margin-left: auto; 343 align-self: stretch; 344 display: flex; 345 align-items: center; 346 justify-content: center; 347 padding: 0 12px; 348 border: none; 349 border-left: 1px solid #dbdbe5; 350 background: transparent; 351 color: #68686e; 352 cursor: pointer; 353 flex-shrink: 0; 354 transition: 355 color 0.12s, 356 background 0.12s; 357 } 358 .cpk-td__panel-toggle:hover { 359 color: #010507; 360 background: #f4f4f9; 361 } 362 .cpk-td__panel-toggle--active { 363 color: #5558b2; 364 background: #eee6fe; 365 } 366 .cpk-td__panel-toggle--active:hover { 367 background: #e4d8fc; 368 } 369 370 /* ââ Scrollable content ââââââââââââââââââââââââââââââââââââââââââââ */ 371 .cpk-td__content { 372 flex: 1; 373 overflow-y: auto; 374 padding: 16px; 375 display: flex; 376 flex-direction: column; 377 gap: 8px; 378 } 379 380 /* Pin direct children so expanded tool bodies don't get flex-shrunk. */ 381 .cpk-td__content > * { 382 flex-shrink: 0; 383 } 384 385 .cpk-td__metadata-strip { 386 display: flex; 387 align-items: center; 388 gap: 6px; 389 flex-wrap: wrap; 390 padding: 10px 16px; 391 border-bottom: 1px solid #e9e9ef; 392 background: #fbfbfd; 393 flex-shrink: 0; 394 } 395 396 .cpk-td__metadata-pills { 397 display: flex; 398 gap: 6px; 399 flex: 1; 400 flex-wrap: wrap; 401 min-width: 0; 402 } 403 404 .cpk-td__metadata-pill { 405 display: inline-flex; 406 align-items: center; 407 gap: 5px; 408 max-width: 220px; 409 padding: 3px 7px; 410 border: 1px solid #e9e9ef; 411 border-radius: 5px; 412 background: #ffffff; 413 color: #57575b; 414 font-family: "Spline Sans Mono", monospace; 415 font-size: 10px; 416 white-space: nowrap; 417 } 418 419 .cpk-td__metadata-label { 420 color: #68686e; 421 text-transform: uppercase; 422 font-size: 9px; 423 } 424 425 .cpk-td__metadata-value { 426 overflow: hidden; 427 text-overflow: ellipsis; 428 } 429 430 .cpk-td__metadata-pill--wrap { 431 max-width: 100%; 432 white-space: normal; 433 } 434 435 .cpk-td__metadata-value--wrap { 436 overflow: visible; 437 text-overflow: clip; 438 white-space: normal;
439 overflow-wrap: anywhere; 440 } 441 442 /* 443 * Each tab's content is wrapped in this panel so the keep-mounted 444 * inactive panels can be hidden via display:none without disturbing 445 * the gap between visible siblings. The flex column + gap gives each 446 * conversation item / event row breathing room (the cpk-td__content 447 * rule above no longer reaches them now that they are nested inside 448 * the per-panel wrapper). 449 */ 450 .cpk-td__panel { 451 display: flex; 452 flex-direction: column; 453 gap: 12px; 454 } 455 .cpk-td__panel > * { 456 flex-shrink: 0; 457 } 458 459 .cpk-td__panel[hidden] { 460 display: none; 461 } 462 463 /* ââ Empty state âââââââââââââââââââââââââââââââââââââââââââââââââââ */ 464 .cpk-td__empty-state { 465 flex: 1; 466 display: flex; 467 flex-direction: column; 468 align-items: center; 469 justify-content: center; 470 gap: 8px; 471 color: #68686e; 472 font-size: 13px; 473 padding: 40px 0; 474 } 475 476 .cpk-td__empty-hint { 477 font-size: 11px; 478 color: #68686e; 479 text-align: center; 480 max-width: 220px; 481 line-height: 1.5; 482 } 483 484 /* ââ Status messages âââââââââââââââââââââââââââââââââââââââââââââââ */ 485 .cpk-td__status { 486 padding: 16px; 487 font-size: 12px; 488 color: #68686e; 489 text-align: center; 490 } 491 492 .cpk-td__status--error { 493 color: #c0333a; 494 } 495 496 @keyframes cpk-td-focus-pulse { 497 0% { 498 outline-color: rgba(100, 48, 171, 0); 499 box-shadow: 0 0 0 rgba(100, 48, 171, 0); 500 animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); 501 } 502 24%, 503 50% { 504 outline-color: rgba(100, 48, 171, 0.78); 505 box-shadow: 0 7px 20px rgba(100, 48, 171, 0.2); 506 } 507 100% { 508 outline-color: rgba(100, 48, 171, 0); 509 box-shadow: 0 0 0 rgba(100, 48, 171, 0); 510 } 511 } 512 513 .cpk-td__focus-pulse { 514 position: relative; 515 z-index: 1; 516 outline: 2px solid transparent; 517 outline-offset: 3px; 518 animation: cpk-td-focus-pulse 760ms linear; 519 } 520 521 @media (prefers-reduced-motion: reduce) { 522 .cpk-td__focus-pulse { 523 animation-duration: 320ms; 524 } 525 } 526 527 /* ââ Conversation bubbles ââââââââââââââââââââââââââââââââââââââââââ */ 528 .cpk-td__bubble { 529 display: flex; 530 margin-bottom: 2px; 531 } 532 533 .cpk-td__bubble--user { 534 justify-content: flex-end; 535 } 536 537 .cpk-td__bubble--assistant { 538 justify-content: flex-start; 539 } 540 541 .cpk-td__bubble-inner { 542 padding: 9px 14px; 543 max-width: 75%; 544 font-size: 13px; 545 line-height: 1.55; 546 } 547 548 .cpk-td__bubble-inner--user { 549 background: #eee6fe; 550 color: #57575b; 551 border-radius: 10px 10px 3px 10px; 552 } 553 554 .cpk-td__show-more { 555 display: inline-block; 556 margin-top: 4px; 557 font-size: 11px; 558 font-weight: 500; 559 color: #57575b; 560 cursor: pointer; 561 text-decoration: underline; 562 text-underline-offset: 2px; 563 } 564 565 .cpk-td__bubble-inner--assistant { 566 background: #f7f7f9; 567 color: #010507; 568 border-radius: 10px 10px 10px 3px; 569 border: 1px solid #e9e9ef; 570 } 571 572 /* ââ Tool call blocks ââââââââââââââââââââââââââââââââââââââââââââââ */ 573 .cpk-td__tool-block { 574 border: 1px solid #e9e9ef; 575 border-radius: 6px; 576 overflow: hidden; 577 } 578 579 .cpk-td__tool-header { 580 display: flex; 581 align-items: center; 582 gap: 6px; 583 padding: 6px 10px; 584 background: rgba(133, 236, 206, 0.15); 585 cursor: pointer; 586 font-size: 11px; 587 user-select: none; 588 } 589 590 .cpk-td__tool-header:hover { 591 background: rgba(133, 236, 206, 0.22); 592 } 593 594 .cpk-td__tool-name { 595 font-family: "Spline Sans Mono", monospace; 596 font-size: 10px; 597 font-weight: 500; 598 color: #087653; 599 text-transform: uppercase; 600 flex: 1; 601 } 602 603 .cpk-td__tool-status { 604 font-family: "Spline Sans Mono", monospace; 605 font-size: 9px; 606 text-transform: uppercase; 607 color: #087653; 608 } 609
610 .cpk-td__tool-status--pending { 611 color: #8a5900; 612 } 613 614 .cpk-td__tool-chevron { 615 color: #68686e; 616 font-size: 10px; 617 } 618 619 .cpk-td__tool-body { 620 padding: 8px 10px; 621 border-top: 1px solid #e9e9ef; 622 background: #ffffff; 623 } 624 625 .cpk-td__tool-section-label { 626 font-family: "Spline Sans Mono", monospace; 627 font-size: 9px; 628 font-weight: 500; 629 color: #68686e; 630 text-transform: uppercase; 631 margin-bottom: 4px; 632 letter-spacing: 0.3px; 633 } 634 635 .cpk-td__tool-pre { 636 margin: 0; 637 font-family: "Spline Sans Mono", monospace; 638 font-size: 10px; 639 background: #f7f7f9; 640 padding: 6px 8px; 641 border-radius: 4px; 642 overflow-x: auto; 643 white-space: pre-wrap; 644 word-break: break-all; 645 color: #010507; 646 line-height: 1.6; 647 } 648 649 /* ââ Tool call group âââââââââââââââââââââââââââââââââââââââââââââââ */ 650 .cpk-td__tool-group { 651 border: 1px solid #e9e9ef; 652 border-radius: 6px; 653 overflow: hidden; 654 } 655 656 .cpk-td__tool-group-header { 657 padding: 5px 10px; 658 background: rgba(133, 236, 206, 0.15); 659 font-family: "Spline Sans Mono", monospace; 660 font-size: 10px; 661 color: #087653; 662 text-transform: uppercase; 663 font-weight: 500; 664 border-bottom: 1px solid #e9e9ef; 665 } 666 667 .cpk-td__tool-group .cpk-td__tool-block { 668 border: none; 669 border-bottom: 1px solid #e9e9ef; 670 border-radius: 0; 671 } 672 673 .cpk-td__tool-group .cpk-td__tool-block:last-child { 674 border-bottom: none; 675 } 676 677 /* ââ Inline chips (reasoning / state update) âââââââââââââââââââââââ */ 678 .cpk-td__inline-chip { 679 display: flex; 680 align-items: center; 681 gap: 8px; 682 padding: 5px 0; 683 color: #68686e; 684 font-family: "Spline Sans Mono", monospace; 685 font-size: 9px; 686 text-transform: uppercase; 687 } 688 689 .cpk-td__inline-chip::before, 690 .cpk-td__inline-chip::after { 691 content: ""; 692 flex: 1; 693 height: 1px; 694 background: #e9e9ef; 695 } 696 697 /* ââ Interaction timeline âââââââââââââââââââââââââââââââââââââââââ */ 698 .cpk-td__timeline-item { 699 border: 1px solid #e9e9ef; 700 border-radius: 6px; 701 background: #ffffff; 702 overflow: hidden; 703 } 704 705 .cpk-td__timeline-item--warning { 706 border-color: rgba(250, 95, 103, 0.35); 707 background: rgba(250, 95, 103, 0.04); 708 } 709 710 .cpk-td__timeline-header { 711 display: flex; 712 align-items: center; 713 gap: 8px; 714 padding: 7px 10px; 715 background: #f7f7f9; 716 } 717 718 .cpk-td__timeline-kind { 719 font-family: "Spline Sans Mono", monospace; 720 font-size: 9px; 721 font-weight: 600; 722 text-transform: uppercase; 723 color: #5558b2; 724 } 725 726 .cpk-td__timeline-title { 727 flex: 1; 728 min-width: 0; 729 font-size: 12px; 730 font-weight: 500; 731 color: #010507; 732 overflow: hidden; 733 text-overflow: ellipsis; 734 white-space: nowrap; 735 } 736 737 .cpk-td__timeline-time { 738 font-family: "Spline Sans Mono", monospace; 739 font-size: 9px; 740 color: #68686e; 741 flex-shrink: 0; 742 } 743 744 .cpk-td__timeline-body { 745 margin: 0; 746 padding: 0 10px 9px; 747 font-size: 12px; 748 line-height: 1.55; 749 color: #57575b; 750 white-space: pre-wrap; 751 word-break: break-word; 752 } 753 754 .cpk-td__timeline-toolbar { 755 display: flex; 756 gap: 6px; 757 margin-left: auto; 758 } 759 760 .cpk-td__timeline-bulk-toggle { 761 margin: 0; 762 padding: 4px 8px; 763 border: 1px solid #dcdce8; 764 border-radius: 6px; 765 background: #ffffff; 766 color: #36363a; 767 cursor: pointer; 768 font-family: "Inter", sans-serif; 769 font-size: 11px; 770 font-weight: 600; 771 line-height: 1.2; 772 } 773 774 .cpk-td__timeline-bulk-toggle:hover { 775 border-color: rgba(85, 88, 178, 0.38); 776 background: #f7f7ff; 777 color: #010507; 778 } 779 780 .cpk-td__timeline-bulk-toggle:disabled {
781 cursor: not-allowed; 782 opacity: 0.45; 783 } 784 785 .cpk-td__source-link { 786 margin: 0; 787 padding: 0; 788 border: none; 789 background: transparent; 790 color: #5558b2; 791 cursor: pointer; 792 font-family: "Spline Sans Mono", monospace; 793 font-size: 9px; 794 text-decoration: underline; 795 text-underline-offset: 2px; 796 flex-shrink: 0; 797 } 798 799 .cpk-td__source-link:hover { 800 color: #010507; 801 } 802 803 .cpk-td__timeline-details-toggle { 804 margin: 0; 805 padding: 5px 10px; 806 border: none; 807 background: #ffffff; 808 color: #5558b2; 809 cursor: pointer; 810 display: inline-flex; 811 align-items: center; 812 gap: 5px; 813 font-family: "Inter", sans-serif; 814 font-size: 12px; 815 font-weight: 600; 816 line-height: 1.2; 817 width: 100%; 818 } 819 820 .cpk-td__timeline-details-toggle:hover { 821 background: #f7f7ff; 822 color: #010507; 823 } 824 825 .cpk-td__timeline-details-toggle svg { 826 width: 12px; 827 height: 12px; 828 stroke-width: 2; 829 } 830 831 /* ââ Generative UI ââââââââââââââââââââââââââââââââââââââââââââââââ */ 832 @keyframes cpk-genui-enter { 833 from { 834 opacity: 0; 835 transform: translateY(8px); 836 } 837 to { 838 opacity: 1; 839 transform: translateY(0); 840 } 841 } 842 843 .cpk-td__genui { 844 display: flex; 845 flex-direction: column; 846 gap: 6px; 847 padding: 4px 16px 8px; 848 animation: cpk-genui-enter 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; 849 } 850 851 .cpk-td__genui-badge { 852 display: inline-flex; 853 align-items: center; 854 gap: 4px; 855 padding: 2px 8px; 856 border-radius: 4px; 857 background: #eee6fe; 858 color: #57575b; 859 font-size: 10px; 860 font-weight: 600; 861 align-self: flex-start; 862 } 863 864 .cpk-td__genui-card { 865 overflow: hidden; 866 border-radius: 12px; 867 border: 1px solid #e2e8f0; 868 background: #fff; 869 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08); 870 } 871 872 .cpk-td__genui-placeholder { 873 padding: 8px 12px; 874 border-radius: 8px; 875 border: 1px solid #ede9fe; 876 background: #f5f3ff; 877 color: #7c3aed; 878 font-size: 11px; 879 } 880 881 /* ââ AG-UI Events ââââââââââââââââââââââââââââââââââââââââââââââââââ */ 882 .cpk-td__event { 883 flex-shrink: 0; 884 border: 1px solid #e9e9ef; 885 border-radius: 6px; 886 overflow: hidden; 887 /* 888 * content-visibility: auto lets the browser skip layout + paint for 889 * off-screen events while keeping them in the DOM (so scroll size 890 * stays correct). Without this, switching back to AG-UI Events on a 891 * thread with hundreds of events triggers a full layout pass over 892 * every event row, which on Martha's intelligence-backed example 893 * shows up as a multi-second freeze each time the panel becomes 894 * visible. The intrinsic-size hint avoids the visible jump as the 895 * browser swaps in real heights when items scroll into view. 896 */ 897 content-visibility: auto; 898 contain-intrinsic-size: 0 80px; 899 } 900 901 .cpk-td__event-header { 902 display: flex; 903 justify-content: space-between; 904 align-items: center; 905 padding: 5px 10px; 906 } 907 908 .cpk-td__event-type { 909 font-family: "Spline Sans Mono", monospace; 910 font-size: 9px; 911 font-weight: 500; 912 text-transform: uppercase; 913 } 914 915 .cpk-td__event-time { 916 font-family: "Spline Sans Mono", monospace; 917 font-size: 9px; 918 color: #68686e; 919 } 920 921 .cpk-td__event-payload { 922 margin: 0; 923 font-family: "Spline Sans Mono", monospace; 924 font-size: 10px; 925 line-height: 1.6; 926 white-space: pre-wrap; 927 word-break: break-all; 928 color: #57575b; 929 padding: 8px 10px; 930 border-top: 1px solid #e9e9ef; 931 } 932 933 /* ââ JSON block (agent state) ââââââââââââââââââââââââââââââââââââââ */ 934 .cpk-td__json-block { 935 margin: 0; 936 font-family: "Spline Sans Mono", monospace; 937 font-size: 11px; 938 line-height: 1.8; 939 white-space: pre-wrap; 940 word-break: break-all; 941 color: #57575b; 942 } 943 944 /* ââ Resize divider ââââââââââââââââââââââââââââââââââââââââââââââââ */ 945 /* Floats over the drawer's left edge so the toggle and the drawer 946 touch directly without a 4px flex-gap between them. The hit zone
947 is wider than its visual hint to make it easy to grab. */ 948 .cpk-td__detail-divider { 949 position: absolute; 950 top: 0; 951 bottom: 0; 952 left: -3px; 953 width: 7px; 954 cursor: col-resize; 955 background: transparent; 956 z-index: 5; 957 } 958 959 .cpk-td__detail-divider:hover { 960 background: rgba(190, 194, 255, 0.3); 961 } 962 963 /* ââ Right detail panel ââââââââââââââââââââââââââââââââââââââââââââ */ 964 .cpk-td__detail { 965 flex-shrink: 0; 966 overflow: hidden; 967 background: #f7f7f9; 968 display: flex; 969 flex-direction: column; 970 gap: 0; 971 padding: 0; 972 box-sizing: border-box; 973 position: relative; 974 /* Slide open/closed via width + padding transition. When closed, 975 width and padding are 0 so the drawer fully collapses. */ 976 transition: 977 width 220ms cubic-bezier(0.4, 0, 0.2, 1), 978 padding 220ms cubic-bezier(0.4, 0, 0.2, 1); 979 } 980 981 .cpk-td__detail[data-open="true"] { 982 overflow-y: auto; 983 padding: 16px; 984 } 985 986 .cpk-tdp__section-title { 987 font-family: "Spline Sans Mono", monospace; 988 font-size: 10px; 989 font-weight: 500; 990 color: #68686e; 991 text-transform: uppercase; 992 letter-spacing: 0.6px; 993 margin-bottom: 8px; 994 } 995 996 .cpk-tdp__divider { 997 height: 1px; 998 background: #dbdbe5; 999 margin: 14px 0; 1000 } 1001 1002 .cpk-tdp__row { 1003 display: flex; 1004 justify-content: space-between; 1005 align-items: flex-start; 1006 padding: 3px 0; 1007 gap: 8px; 1008 } 1009 1010 .cpk-tdp__label { 1011 color: #68686e; 1012 font-size: 11px; 1013 white-space: nowrap; 1014 flex-shrink: 0; 1015 } 1016 1017 .cpk-tdp__value { 1018 color: #010507; 1019 font-family: "Spline Sans Mono", monospace; 1020 font-size: 11px; 1021 text-align: right; 1022 min-width: 0; 1023 } 1024 1025 .cpk-tdp__value--truncate { 1026 overflow: hidden; 1027 text-overflow: ellipsis; 1028 white-space: nowrap; 1029 max-width: 130px; 1030 } 1031 1032 .cpk-tdp__value--wrap { 1033 white-space: normal; 1034 word-break: break-all; 1035 text-align: right; 1036 } 1037 `}updated(e){if(!this.isConnected)return;let t=this.currentLoadKey();t!==this._lastLoadKey?(this._lastLoadKey=t,this._lastSeenLiveMessageVersion=this.liveMessageVersion,this.resetLoadedThreadData(),this.threadId?(this.fetchMetadata(this.threadId),this.canFetchEvents()?(this._eventsFetched=!0,this.fetchEvents(this.threadId)):this.fetchMessages(this.threadId)):(this._fetchedMetadata=null,this._conversation=[])):this.threadId&&this.liveMessageVersion!==this._lastSeenLiveMessageVersion&&(this._lastSeenLiveMessageVersion=this.liveMessageVersion,this._messagesAbort?.abort(),this._messagesAbort=null,this.fetchMessages(this.threadId,!0));let i=e.has("_fetchedEvents")||e.has("agentEventsInput")||e.has("_conversation");this.focusMessageId&&(this.focusRequestId>this._scrolledFocusRequestId||i)&&("timeline"!==this._tab&&(this._activatedTabs=new Set([...this._activatedTabs,"timeline"]),this._tab="timeline",this.requestUpdate()),requestAnimationFrame(()=>this.scrollToFocusedMessage()))}scrollToFocusedMessage(){if(!this.focusMessageId)return;let e=Array.from(this.shadowRoot?.querySelectorAll("[data-message-id]")??[]).find(e=>e.dataset.messageId===this.focusMessageId);e&&(e.scrollIntoView?.({block:"center"}),this._scrolledFocusRequestId=this.focusRequestId,this.pulseFocusedMessage(e))}pulseFocusedMessage(e){this.focusRequestId!==this._highlightedFocusRequestId&&(this._highlightedFocusRequestId=this.focusRequestId,e.classList.remove("cpk-td__focus-pulse"),e.offsetWidth,e.classList.add("cpk-td__focus-pulse"),e.addEventListener("animationend",()=>e.classList.remove("cpk-td__focus-pulse"),{once:!0}))}connectedCallback(){super.connectedCallback(),this._hasConnectedOnce&&this.requestUpdate(),this._hasConnectedOnce=!0}disconnectedCallback(){super.disconnectedCallback(),this.resetLoadedThreadData(),this._lastLoadKey=null}canFetchMessages(){return!!this.provider?.getMessages||!!this.runtimeUrl&&this.threadInspectionAvailable}canFetchEvents(){return!!this.provider?.getEvents||!!this.runtimeUrl&&this.threadInspectionAvailable}canFetchState(){return!!this.provider?.getState||!!this.runtimeUrl&&this.threadInspectionAvailable}currentLoadKey(){return[this.threadId??"thread:none",e.providerLoadKey(this.provider),`runtime:${this.runtimeUrl}`,`headers:${e.headersLoadKey(this.headers)}`,`inspect:${this.threadInspectionAvailable?"1":"0"}`].join("||")}
1037resetLoadedThreadData(){this._tab="timeline",this._activatedTabs=new Set(["timeline"]),this._panelTplCache=new Map,this._timelineItemsCache=null,this._liveEventsWithSourceIndexCache=null,this._expandedTools=new Set,this._expandedMessages=new Set,this._expandedTimelineDetails=new Set,this._expandedRawEvents=new Set,this._metadataAbort?.abort(),this._metadataAbort=null,this._messagesAbort?.abort(),this._messagesAbort=null,this._eventsAbort?.abort(),this._eventsAbort=null,this._stateAbort?.abort(),this._stateAbort=null,this._eventsFetched=!1,this._stateFetched=!1,this._eventsNotAvailable=!1,this._stateNotAvailable=!1,this._loadingMessages=!1,this._loadingEvents=!1,this._loadingState=!1,this._messagesError=null,this._eventsError=null,this._stateError=null,this._fetchedMetadata=null,this._conversation=[],this._fetchedEvents=null,this._fetchedState=null}async fetchMetadata(e){if(!this.provider?.getThreadMetadata)return;this._metadataAbort?.abort();let t=new AbortController;this._metadataAbort=t;try{let i=await this.provider.getThreadMetadata(e,{signal:t.signal});if(t.signal.aborted||this.threadId!==e)return;this._fetchedMetadata=i}catch(t){if(t instanceof Error&&"AbortError"===t.name||this.threadId!==e)return;this._fetchedMetadata=null}}async fetchMessages(e,t=!1){if(!this.canFetchMessages()){t||(this._conversation=[]);return}this._messagesAbort?.abort();let i=new AbortController;this._messagesAbort=i,t||(this._loadingMessages=!0,this._messagesError=null);try{let t=this.provider?.getMessages?await this.provider.getMessages(e,{signal:i.signal}):await this.fetchRuntimeMessages(e,i.signal);if(i.signal.aborted||this.threadId!==e)return;this._conversation=this.mapMessages(t)}catch(e){if(e instanceof Error&&"AbortError"===e.name)return;t||(this._messagesError=e instanceof Error?e.message:"Failed to load messages",this._conversation=[])}finally{t||i.signal.aborted||(this._loadingMessages=!1)}}async fetchEvents(e){if(!this.canFetchEvents()){this._fetchedEvents=null;return}this._eventsAbort?.abort();let t=new AbortController;this._eventsAbort=t,this._loadingEvents=!0,this._eventsError=null;try{let i=this.provider?.getEvents?{status:"available",events:await this.provider.getEvents(e,{signal:t.signal})}:await this.fetchRuntimeEvents(e,t.signal);if(t.signal.aborted||this.threadId!==e)return;if("not-available"===i.status){this._eventsNotAvailable=!0,this._fetchedEvents=[],this.canFetchMessages()&&this.fetchMessages(e);return}let s=this.mapApiEvents(i.events);this._fetchedEvents=s,0===s.length&&this.canFetchMessages()&&this.fetchMessages(e)}catch(t){if(t instanceof Error&&"AbortError"===t.name||this.threadId!==e)return;this._eventsError=t instanceof Error?t.message:"Failed to load events",this._fetchedEvents=[],this.canFetchMessages()&&this.fetchMessages(e)}finally{t.signal.aborted||this.threadId!==e||(this._loadingEvents=!1)}}async fetchState(e){if(!this.canFetchState()){this._fetchedState=null;return}this._stateAbort?.abort();let t=new AbortController;this._stateAbort=t,this._loadingState=!0,this._stateError=null;try{let i=this.provider?.getState?{status:"available",state:await this.provider.getState(e,{signal:t.signal})}:await this.fetchRuntimeState(e,t.signal);if(t.signal.aborted||this.threadId!==e)return;if("not-available"===i.status){this._stateNotAvailable=!0,this._fetchedState=null;return}this._fetchedState=i.state??null}catch(t){if(t instanceof Error&&"AbortError"===t.name||this.threadId!==e)return;this._stateError=t instanceof Error?t.message:"Failed to load state",this._fetchedState=null}finally{t.signal.aborted||this.threadId!==e||(this._loadingState=!1)}}async fetchRuntimeMessages(e,t){let i=await fetch(this.getThreadInspectionUrl(e,"messages"),{headers:{...this.headers},signal:t});if(!i.ok)throw Error(`HTTP ${i.status}`);return(await i.json()).messages}async fetchRuntimeEvents(e,t){let i=await fetch(this.getThreadInspectionUrl(e,"events"),{headers:{...this.headers},signal:t});if(501===i.status)return{status:"not-available"};if(!i.ok)throw Error(`HTTP ${i.status}`);return{status:"available",events:(await i.json()).events}}async fetchRuntimeState(e,t){let i=await fetch(this.getThreadInspectionUrl(e,"state"),{headers:{...this.headers},signal:t});if(501===i.status)return{status:"not-available"};if(!i.ok)throw Error(`HTTP ${i.status}`);return{status:"available",state:(await i.json()).state??null}}getThreadInspectionUrl(e,t){return`${this.runtimeUrl.replace(/\/+$/,"")}/threads/${encodeURIComponent(e)}/${t}`}mapMessages(e){let t=[],i=new Map;for(let s of e)if("user"===s.role&&s.content)t.push({id:s.id,type:"user",content:s.content,createdAt:""});else if("assistant"===s.role){if(s.toolCalls?.length)for(let e of s.toolCalls){let s={};if("string"==typeof e.args)try{s=this.parseToolCallContent(e.args)}catch(t){console.error("[CopilotKit Inspector] Failed to parse tool-call arguments",{toolCallId:e.id,raw:e.args,error:t}),s={__parseError:!0,__raw:e.args}}else s=e.args;let n={id:e.id,type:"tool_call",toolName:e.name,toolCallId:e.id,arguments:s,result:null,createdAt:""};i.set(e.id,n),t.push(n)}s.content&&t.push({id:s.id,type:"assistant",content:s.content,createdAt:""})}else if("activity"===s.role)t.push({id:s.id,type:"generative-ui",activityType:s.activityType??"unknown",createdAt:""});else if("tool"===s.role&&s.toolCallId){let e=i.get(s.toolCallId);if(e)try{e.result=this.parseToolCallContent(s.content)}catch(t){console.error("[CopilotKit Inspector] Failed to parse tool-call result content",{toolCallId:s.toolCallId,raw:s.content,error:t}),e.result={__parseError:!0,__raw:s.content??null}}}return t}parseToolCallContent(e){let t=e?.trim();return t?JSON.parse(t):{}}mapApiEvents(e){return e.map((e,t)=>{let{type:i,timestamp:s,payload:n,...a}=e;return{type:"string"==typeof i?i:"UNKNOWN",timestamp:"string"==typeof s||"number"==typeof s?s:Date.now(),payload:n??a,sourceIndex:t+1,rawEvent:e}})}get activeTimelineItems(){return this.timelineItemsForEvents(this.activeEvents)}timelineItemsForEvents(e){if(this._timelineItemsCache?.events===e)return this._timelineItemsCache.items;let t=this.timelineItemsFromEvents(e);return this._timelineItemsCache={events:e,items:t},t}timelineItemsFromEvents(e){if(0===e.length)return[];let t=[],i=new Map,s=new Map,n=(e,t)=>{for(let i of t){let t=e[i];if("string"==typeof t)return t}return null},a=e=>e.sourceIndex??0,r=(e,i,s,n="warning")=>{let r=a(e);t.push({id:`warning-${r}-${t.length}`,kind:"warning",title:i,body:s,timestamp:e.timestamp,sourceIndex:r,severity:n})},o=(e,s)=>{let r=a(e),o=n(e.payload,["messageId","message_id","id"])??`message-${r}`,l=i.get(o);return l||(l={id:`message-${o}`,messageId:o,kind:"message",title:`${s||"message"} message`,body:"",timestamp:e.timestamp,sourceIndex:r},i.set(o,l),t.push(l)),l},l=e=>{let i=a(e),r=n(e.payload,["toolCallId","tool_call_id","id","callId"])??`tool-${i}`,o=s.get(r);return o||(o={id:`tool-${r}`,kind:"tool",title:n(e.payload,["toolCallName","toolName","name","functionName"])??"Tool call",body:"",timestamp:e.timestamp,sourceIndex:i},s.set(r,o),t.push(o)),o};for(let i of e){let{type:e,payload:s}=i,d=a(i);if("UNKNOWN"===e){r(i,"Unknown AG-UI event","The event is missing a string type and could not be normalized.");continue}if("RUN_STARTED"===e||"STEP_STARTED"===e){t.push({id:`${e}-${d}`,kind:"run",title:"RUN_STARTED"===e?"Run started":"Step started",timestamp:i.timestamp,sourceIndex:d,details:s});continue}if("RUN_FINISHED"===e||"STEP_FINISHED"===e){t.push({id:`${e}-${d}`,kind:"run",title:"RUN_FINISHED"===e?"Run finished":"Step finished",timestamp:i.timestamp,sourceIndex:d,details:s});continue}if("RUN_ERROR"===e||"ERROR"===e){t.push({id:`${e}-${d}`,kind:"warning",title:"Run error",body:n(s,["message","error","description"])??"",timestamp:i.timestamp,sourceIndex:d,severity:"error",details:s});continue}if("TEXT_MESSAGE_START"===e){o(i,n(s,["role"])??"assistant");continue}if("TEXT_MESSAGE_CONTENT"===e){let e=o(i,n(s,["role"])??"assistant");e.body=`${e.body??""}${n(s,["delta","content","text"])??""}`;continue}if("TEXT_MESSAGE_END"===e){o(i,n(s,["role"])??"assistant");continue}if("TOOL_CALL_START"===e){l(i);continue}if("TOOL_CALL_ARGS"===e){let e=l(i),t=n(s,["args","arguments","delta"])??("object"==typeof s.args?JSON.stringify(s.args):null);t&&(e.rawArgs=`${e.rawArgs??""}${t}`,e.body=e.rawArgs);continue}if("TOOL_CALL_END"===e){let e=l(i);if(e.rawArgs)try{JSON.parse(e.rawArgs)}catch{r(i,"Could not decode tool call arguments",e.rawArgs)}continue}if("TOOL_CALL_RESULT"===e){let e=l(i),t=n(s,["result","content","delta"]);if(t){e.body=e.body?`${e.body} 1038Result: ${t}`:`Result: ${t}`;try{JSON.parse(t)}catch{r(i,"Could not decode tool result",t)}}continue}if(e.startsWith("STATE_")){t.push({id:`${e}-${d}
1038`,kind:"state",title:"STATE_SNAPSHOT"===e?"State snapshot captured":"State delta captured",timestamp:i.timestamp,sourceIndex:d,details:s});continue}t.push({id:`event-${d}`,kind:"event",title:e,timestamp:i.timestamp,sourceIndex:d,details:s})}return t}get renderItems(){let e=this._conversation,t=[],i=new Set;for(let s of e){if("agent_responded"===s.type)continue;if("tool_call"!==s.type||!s.groupId){t.push(s);continue}if(i.has(s.groupId))continue;i.add(s.groupId);let n={type:"tool_call_group",id:s.groupId,items:e.filter(e=>"tool_call"===e.type&&e.groupId===s.groupId)};t.push(n)}return t}get activityCounts(){let e=0,t=0,i=0;for(let s of this._conversation)("user"===s.type||"assistant"===s.type)&&e++,"tool_call"===s.type&&t++,"generative-ui"===s.type&&i++;return{messages:e,toolCalls:t,generativeUi:i}}get duration(){let e=this.metadata;if(!e?.createdAt||!e?.updatedAt)return"â";let t=new Date(e.updatedAt).getTime()-new Date(e.createdAt).getTime();if(t<0)return"â";if(t<1e3)return`${t}ms`;let i=Math.floor(t/1e3);return i<60?`${i}s`:`${Math.floor(i/60)}m ${i%60}s`}toggleToolExpand(e){let t=new Set(this._expandedTools);t.has(e)?t.delete(e):t.add(e),this._expandedTools=t}toggleMessageExpand(e){let t=new Set(this._expandedMessages);t.has(e)?t.delete(e):t.add(e),this._expandedMessages=t}toggleTimelineDetails(e){let t=new Set(this._expandedTimelineDetails);t.has(e)?t.delete(e):t.add(e),this._expandedTimelineDetails=t}expandTimelineDetails(e){this._expandedTimelineDetails=new Set([...this._expandedTimelineDetails,...e])}collapseTimelineDetails(e){let t=new Set(this._expandedTimelineDetails);for(let i of e)t.delete(i);this._expandedTimelineDetails=t}toggleRawEventDetails(e){let t=new Set(this._expandedRawEvents);t.has(e)?t.delete(e):t.add(e),this._expandedRawEvents=t}expandRawEventDetails(e){this._expandedRawEvents=new Set([...this._expandedRawEvents,...e])}collapseRawEventDetails(e){let t=new Set(this._expandedRawEvents);for(let i of e)t.delete(i);this._expandedRawEvents=t}rawEventId(e){return`raw-event-${e.sourceIndex??e.timestamp??e.type}`}get activeEvents(){if(this._eventsNotAvailable)return[];let e=this._fetchedEvents??this.agentEventsInput??[];if(e.every(e=>null!=e.sourceIndex))return e;if(this._liveEventsWithSourceIndexCache?.events===e)return this._liveEventsWithSourceIndexCache.indexedEvents;let t=e.map((e,t)=>null==e.sourceIndex?{...e,sourceIndex:t+1}:e);return this._liveEventsWithSourceIndexCache={events:e,indexedEvents:t},t}get activeState(){return this._stateNotAvailable?null:this._fetchedState??this.agentStateInput??null}hasRenderableState(){let e=this.activeState;return!!e&&"object"==typeof e&&Object.keys(e).length>0}shortId(e){return e?e.length>20?e.slice(0,8)+"â¦":e:"â"}get metadata(){return this._fetchedMetadata??this.thread??null}fmtTime(e){if(!e)return"â";let t=new Date(e);return Number.isNaN(t.getTime())?"â":t.toLocaleTimeString("en-US",{hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:!1})}render(){return(0,h.qy)` 1039 <div class="cpk-td"> 1040 <!-- ââ Left area: tabs + content âââââââââââââââââââââââââââââââââââ --> 1041 <div class="cpk-td__left"> 1042 <!-- Tab bar --> 1043 <div class="cpk-td__tabs-header"> 1044 <div 1045 class="cpk-td__tab-group" 1046 role="tablist" 1047 aria-label="Thread detail views" 1048 > 1049 ${e.TAB_LIST.map(e=>(0,h.qy)` 1050 <button 1051 id=${this.tabDomId(e.id)} 1052 type="button" 1053 role="tab" 1054 aria-controls=${this.panelDomId(e.id)} 1055 aria-selected=${this._tab===e.id?"true":"false"} 1056 tabindex=${this._tab===e.id?"0":"-1"} 1057 class="cpk-td__tab ${this._tab===e.id?"cpk-td__tab--active":""}" 1058 @click=${()=>this.activateTab(e.id)} 1059 @keydown=${t=>this.handleTabKeyDown(t,e.id)} 1060 > 1061 ${e.label} 1062 </button> 1063 `)} 1064 </div> 1065 ${this.renderPanelToggle()} 1066 </div> 1067 ${this.renderMetadataStrip()} 1068 1069 <!-- Scrollable content --> 1070 <div class="cpk-td__content"> 1071 ${this._panelInitializing?(0,h.qy)` 1072 <div class="cpk-td__status">Loadingâ¦</div> 1073 `:h.s6} 1074 ${e.TAB_LIST.map(e=>this._activatedTabs.has(e.id)?(0,h.qy)`<div 1075 id=${this.panelDomId(e.id)} 1076 class="cpk-td__panel" 1077 role="tabpanel" 1078 aria-labelledby=${this.tabDomId(e.id)} 1079 ?hidden=${this._tab!==e.id||this._panelInitializing} 1080 > 1081 ${this.renderTabContent(e.id)} 1082 </div>`:h.s6)} 1083 </div> 1084 </div> 1085 1086 <!-- 1087 Drawer always rendered so width animates between 0 and its 1088 target. Divider lives INSIDE the drawer and is absolutely 1089 positioned over its left edge so the toggle (rightmost of the 1090 tab row) and the drawer touch with no flex-gap between them. 1091 --> 1092 <div 1093 class="cpk-td__detail" 1094 data-open=${this._showDetailPanel?"true":"false"} 1095 style="width:${this._showDetailPanel?this._detailPanelWidth:0}px" 1096 aria-hidden=${this._showDetailPanel?"false":"true"} 1097 > 1098 ${this._showDetailPanel?(0,h.qy)` 1099 <div 1100 class="cpk-td__detail-divider"
1101 @pointerdown=${this.onDetailDividerDown} 1102 @pointermove=${this.onDetailDividerMove} 1103 @pointerup=${this.onDetailDividerUp} 1104 @pointercancel=${this.onDetailDividerUp} 1105 ></div> 1106 `:h.s6} 1107 ${this.renderDetailPanel()} 1108 </div> 1109 </div> 1110 `}renderMetadataStrip(){let e=this.metadata,t=[{label:"Name",value:e?.name??this.thread?.name??"Untitled"},{label:"ID",value:e?.id??this.threadId??"â",wrap:!0}];for(let i of[{label:"Agent",value:e?.agentId},{label:"Created",value:e?.createdAt},{label:"Updated",value:e?.updatedAt}])null!=i.value&&""!==i.value&&t.push({label:i.label,value:"Created"===i.label||"Updated"===i.label?this.fmtTime(i.value):i.value});let i=this.renderActiveBulkControls();return(0,h.qy)` 1111 <div 1112 class="cpk-td__metadata-strip" 1113 role="group" 1114 aria-label="Thread metadata" 1115 > 1116 <div class="cpk-td__metadata-pills"> 1117 ${t.map(e=>(0,h.qy)` 1118 <span 1119 class="cpk-td__metadata-pill ${e.wrap?"cpk-td__metadata-pill--wrap":""}" 1120 role="group" 1121 title=${e.value} 1122 aria-label=${`${e.label}: ${e.value}`} 1123 > 1124 <span class="cpk-td__metadata-label">${e.label}</span> 1125 <span 1126 class="cpk-td__metadata-value ${e.wrap?"cpk-td__metadata-value--wrap":""}" 1127 >${e.value}</span 1128 > 1129 </span> 1130 `)} 1131 </div> 1132 ${i} 1133 </div> 1134 `}renderActiveBulkControls(){if(this._eventsNotAvailable)return h.s6;if("raw-events"===this._tab)return this.renderRawEventBulkControls();if("timeline"!==this._tab)return h.s6;let e=this.timelineItemsForEvents(this.activeEvents).filter(e=>e.details).map(e=>e.id);return e.length<=1?h.s6:(0,h.qy)`<div class="cpk-td__timeline-toolbar"> 1135 <button 1136 type="button" 1137 class="cpk-td__timeline-bulk-toggle" 1138 ?disabled=${e.every(e=>this._expandedTimelineDetails.has(e))} 1139 @click=${()=>this.expandTimelineDetails(e)} 1140 > 1141 Expand all 1142 </button> 1143 <button 1144 type="button" 1145 class="cpk-td__timeline-bulk-toggle" 1146 ?disabled=${e.every(e=>!this._expandedTimelineDetails.has(e))} 1147 @click=${()=>this.collapseTimelineDetails(e)} 1148 > 1149 Collapse all 1150 </button> 1151 </div>`}renderRawEventBulkControls(){let e=this.activeEvents.map(e=>this.rawEventId(e));return e.length<=1?h.s6:(0,h.qy)`<div class="cpk-td__timeline-toolbar"> 1152 <button 1153 type="button" 1154 class="cpk-td__timeline-bulk-toggle" 1155 ?disabled=${e.every(e=>this._expandedRawEvents.has(e))} 1156 @click=${()=>this.expandRawEventDetails(e)} 1157 > 1158 Expand all 1159 </button> 1160 <button 1161 type="button" 1162 class="cpk-td__timeline-bulk-toggle" 1163 ?disabled=${e.every(e=>!this._expandedRawEvents.has(e))} 1164 @click=${()=>this.collapseRawEventDetails(e)} 1165 > 1166 Collapse all 1167 </button> 1168 </div>`}revealSourceEvent(e){this._activatedTabs=new Set([...this._activatedTabs,"raw-events"]),this._tab="raw-events",this.requestUpdate(),requestAnimationFrame(()=>{this.shadowRoot?.querySelector(`[data-source-index="${e}"]`)?.scrollIntoView?.({block:"center"})})}renderTimeline(){if(this._loadingEvents)return(0,h.qy)` 1169 <div class="cpk-td__status">Loading timelineâ¦</div> 1170 `;if(this._eventsError)return(0,h.qy)`<div class="cpk-td__status cpk-td__status--error"> 1171 ${this._eventsError} 1172 </div>`;if(this._eventsNotAvailable)return this._conversation.length>0||this._loadingMessages?this.renderConversation():(0,h.qy)` 1173 <div class="cpk-td__empty-state"> 1174 <span>Timeline event history not available</span> 1175 <span class="cpk-td__empty-hint" 1176 >This runtime doesn't yet expose per-thread AG-UI events. Check State for 1177 the latest snapshot when available.</span 1178 > 1179 </div> 1180 `;let e=this.activeEvents,t=this.getCachedPanelTpl("timeline",[e,this._expandedTimelineDetails]);if(t)return t;let i=this.timelineItemsForEvents(e);return 0===i.length?this._conversation.length>0||this._loadingMessages?this.renderConversation():(0,h.qy)` 1181 <div class="cpk-td__empty-state">
1182 <span>No timeline events captured</span> 1183 <span class="cpk-td__empty-hint" 1184 >Timeline rows are normalized from AG-UI events. Open AG-UI Events or State 1185 to inspect the available thread data.</span 1186 > 1187 </div> 1188 `:this.cachedPanelTpl("timeline",[e,this._expandedTimelineDetails],()=>(0,h.qy)`${i.map(e=>this.renderTimelineItem(e))}`)}renderTimelineItem(e){let t="warning"===e.kind,i=this._expandedTimelineDetails.has(e.id);return(0,h.qy)` 1189 <div 1190 class="cpk-td__timeline-item ${t?"cpk-td__timeline-item--warning":""}" 1191 data-message-id=${e.messageId??h.s6} 1192 > 1193 <div class="cpk-td__timeline-header"> 1194 <span class="cpk-td__timeline-kind" 1195 >${"error"===e.severity?"error":e.kind}</span 1196 > 1197 <span class="cpk-td__timeline-title">${e.title}</span> 1198 <button 1199 type="button" 1200 class="cpk-td__source-link" 1201 @click=${()=>this.revealSourceEvent(e.sourceIndex)} 1202 > 1203 Source event #${e.sourceIndex} 1204 </button> 1205 <span class="cpk-td__timeline-time" 1206 >${H(e.timestamp)}</span 1207 > 1208 </div> 1209 ${e.details?(0,h.qy)`<button 1210 type="button" 1211 class="cpk-td__timeline-details-toggle" 1212 aria-expanded=${i?"true":"false"} 1213 @click=${()=>this.toggleTimelineDetails(e.id)} 1214 > 1215 ${i?(0,h.qy)` 1216 <svg 1217 aria-hidden="true"
1218 viewBox="0 0 24 24" 1219 fill="none" 1220 stroke="currentColor" 1221 stroke-linecap="round" 1222 stroke-linejoin="round" 1223 > 1224 <path d="m6 9 6 6 6-6" /> 1225 </svg> 1226 `:(0,h.qy)` 1227 <svg 1228 aria-hidden="true" 1229 viewBox="0 0 24 24" 1230 fill="none" 1231 stroke="currentColor" 1232 stroke-linecap="round" 1233 stroke-linejoin="round" 1234 > 1235 <path d="m9 18 6-6-6-6" /> 1236 </svg> 1237 `} 1238 <span>${i?"Hide details":"Show details"}</span> 1239 </button>`:h.s6} 1240 ${e.body?(0,h.qy)`<div class="cpk-td__timeline-body">${e.body}</div>`:h.s6} 1241 ${e.details&&i?(0,h.qy)`<pre class="cpk-td__timeline-body">${(0,m._)(W(e.details))}</pre>`:h.s6} 1242 </div> 1243 `}renderConversation(){return this._loadingMessages?(0,h.qy)` 1244 <div class="cpk-td__status">Loading messagesâ¦</div> 1245 `:this._messagesError?(0,h.qy)`<div class="cpk-td__status cpk-td__status--error"> 1246 ${this._messagesError} 1247 </div>`:0===this._conversation.length?(0,h.qy)` 1248 <div class="cpk-td__empty-state"> 1249 <svg 1250 width="28" 1251 height="28"
1252 viewBox="0 0 24 24" 1253 fill="none" 1254 stroke="currentColor" 1255 stroke-width="1.5" 1256 stroke-linecap="round" 1257 stroke-linejoin="round" 1258 > 1259 <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /> 1260 </svg> 1261 <span>No messages yet</span> 1262 </div> 1263 `:this.cachedPanelTpl("timeline-fallback",[this._conversation,this._expandedTools,this._expandedMessages],()=>(0,h.qy)`${this.renderItems.map(e=>this.renderRenderItem(e))}`)}cachedPanelTpl(e,t,i){let s=this.getCachedPanelTpl(e,t);if(s)return s;let n=i();return this._panelTplCache.set(e,{key:t,tpl:n}),n}getCachedPanelTpl(e,t){let i=this._panelTplCache.get(e);return i&&i.key.length===t.length&&i.key.every((e,i)=>e===t[i])?i.tpl:null}renderRenderItem(e){switch(e.type){case"user":case"assistant":return this.renderBubble(e);case"tool_call":return this.renderToolBlock(e);case"tool_call_group":return this.renderToolGroup(e);case"reasoning":return(0,h.qy)`<div class="cpk-td__inline-chip"> 1264 <span>Reasoned for ${e.duration}</span> 1265 </div>`;case"state_update":return(0,h.qy)` 1266 <div class="cpk-td__inline-chip"> 1267 <span>Updated agent state</span> 1268 </div> 1269 `;case"generative-ui":return this.renderGenerativeUI(e);case"agent_responded":return h.s6}}renderBubble(t){let i="user"===t.type,s=e.COLLAPSE_THRESHOLD,n=this._expandedMessages.has(t.id),a=t.content.length>s,r=a&&!n?t.content.slice(0,s)+"â¦":t.content;return(0,h.qy)` 1270 <div 1271 class="cpk-td__bubble ${i?"cpk-td__bubble--user":"cpk-td__bubble--assistant"}" 1272 data-message-id=${t.id} 1273 > 1274 <div 1275 class="cpk-td__bubble-inner ${i?"cpk-td__bubble-inner--user":"cpk-td__bubble-inner--assistant"}" 1276 > 1277 ${r} 1278 ${a?(0,h.qy)`<span 1279 class="cpk-td__show-more" 1280 @click=${()=>this.toggleMessageExpand(t.id)} 1281 >${n?"Show less":"Show more"}</span 1282 >`:h.s6} 1283 </div> 1284 </div> 1285 `}renderToolBlock(e){let t=this._expandedTools.has(e.id);return(0,h.qy)` 1286 <div class="cpk-td__tool-block"> 1287 <div 1288 class="cpk-td__tool-header" 1289 @click=${()=>this.toggleToolExpand(e.id)} 1290 > 1291 <svg width="10" height="10" viewBox="0 0 10 10" fill="none"> 1292 <path 1293 d="M1 9C1 9 2 7 5 7C8 7 9 9 9 9M5 1C5 1 7 2.5 7 4.5C7 6.5 5 7 5 7C5 7 3 6.5 3 4.5C3 2.5 5 1 5 1Z" 1294 stroke="#087653" 1295 stroke-width="1.2" 1296 stroke-linecap="round" 1297 stroke-linejoin="round" 1298 /> 1299 </svg> 1300 <span class="cpk-td__tool-name">${e.toolName}</span> 1301 ${e.result||Object.keys(e.arguments).length>0?(0,h.qy)` 1302 <span class="cpk-td__tool-status">DONE</span> 1303 `:(0,h.qy)` 1304 <span class="cpk-td__tool-status cpk-td__tool-status--pending">PENDING</span> 1305 `} 1306 <span class="cpk-td__tool-chevron">${t?"â¾":"â¸"}</span> 1307 </div> 1308 ${t?(0,h.qy)` 1309 <div class="cpk-td__tool-body"> 1310 <div class="cpk-td__tool-section-label">Arguments</div> 1311 <pre class="cpk-td__tool-pre"> 1312${(0,m._)(W(e.arguments))}</pre 1313 > 1314 ${e.result?(0,h.qy)` 1315 <div 1316 class="cpk-td__tool-section-label" 1317 style="margin-top:8px" 1318 > 1319 Result 1320 </div> 1321 <pre class="cpk-td__tool-pre"> 1322${(0,m._)(W(e.result))}</pre 1323 > 1324 `:h.s6} 1325 </div> 1326 `:h.s6} 1327 </div> 1328 `}renderToolGroup(e){return(0,h.qy)` 1329 <div class="cpk-td__tool-group"> 1330 <div class="cpk-td__tool-group-header"> 1331 ${e.items.length} tool call${1!==e.items.length?"s":""} 1332 </div> 1333 ${e.items.map(e=>this.renderToolBlock(e))} 1334 </div> 1335 `}renderGenerativeUI(e){return(0,h.qy)` 1336 <div class="cpk-td__genui"> 1337 <div class="cpk-td__genui-badge"> 1338 <svg width="9" height="9" viewBox="0 0 24 24" fill="currentColor">
1339 <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" /> 1340 </svg> 1341 Generative UI 1342 </div> 1343 <div class="cpk-td__genui-placeholder"> 1344 ${e.activityType} â rendered in chat 1345 </div> 1346 </div> 1347 `}renderState(){if(this._loadingState)return(0,h.qy)` 1348 <div class="cpk-td__status">Loading stateâ¦</div> 1349 `;if(this._stateError)return(0,h.qy)`<div class="cpk-td__status cpk-td__status--error"> 1350 ${this._stateError} 1351 </div>`;if(this._stateNotAvailable)return(0,h.qy)` 1352 <div class="cpk-td__empty-state"> 1353 <svg 1354 width="28" 1355 height="28" 1356 viewBox="0 0 24 24" 1357 fill="none" 1358 stroke="currentColor" 1359 stroke-width="1.5" 1360 stroke-linecap="round" 1361 stroke-linejoin="round" 1362 > 1363 <ellipse cx="12" cy="5" rx="9" ry="3" /> 1364 <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" /> 1365 <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" /> 1366 </svg> 1367 <span>State history not available</span> 1368 <span class="cpk-td__empty-hint" 1369 >This runtime doesn't yet expose per-thread agent state. Available when 1370 running against the in-memory runner.</span 1371 > 1372 </div> 1373 `;if(!this.hasRenderableState())return(0,h.qy)` 1374 <div class="cpk-td__empty-state"> 1375 <svg 1376 width="28" 1377 height="28"
1378 viewBox="0 0 24 24" 1379 fill="none" 1380 stroke="currentColor" 1381 stroke-width="1.5" 1382 stroke-linecap="round" 1383 stroke-linejoin="round" 1384 > 1385 <ellipse cx="12" cy="5" rx="9" ry="3" /> 1386 <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" /> 1387 <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" /> 1388 </svg> 1389 <span>No state captured</span> 1390 <span class="cpk-td__empty-hint" 1391 >Emitted live from STATE_SNAPSHOT events.</span 1392 > 1393 </div> 1394 `;let e=this.activeState;return this.cachedPanelTpl("state",[e],()=>(0,h.qy)`<pre class="cpk-td__json-block"> 1395${(0,m._)(W(e))}</pre 1396 >`)}renderEvents(){if(this._loadingEvents)return(0,h.qy)` 1397 <div class="cpk-td__status">Loading eventsâ¦</div> 1398 `;if(this._eventsError)return(0,h.qy)`<div class="cpk-td__status cpk-td__status--error"> 1399 ${this._eventsError} 1400 </div>`;if(this._eventsNotAvailable)return(0,h.qy)` 1401 <div class="cpk-td__empty-state"> 1402 <span>Event history not available</span> 1403 <span class="cpk-td__empty-hint" 1404 >This runtime doesn't yet expose per-thread AG-UI events. Available when 1405 running against the in-memory runner.</span 1406 > 1407 </div> 1408 `;let e=this.activeEvents;return 0===e.length?(0,h.qy)` 1409 <div class="cpk-td__empty-state"> 1410 <span>No events captured</span> 1411 <span class="cpk-td__empty-hint" 1412 >Events are recorded live. Run the agent to see them here.</span 1413 > 1414 </div> 1415 `:this.cachedPanelTpl("raw-events",[e,this._expandedRawEvents],()=>(0,h.qy)`${e.map(e=>{var t;let{bg:i,fg:s}=(t=e.type).startsWith("TEXT_MESSAGE")?{bg:"#EEE6FE",fg:"#57575B"}:t.startsWith("TOOL_CALL")?{bg:"rgba(133,236,206,0.15)",fg:"#087653"}:t.startsWith("STATE")?{bg:"rgba(190,194,255,0.102)",fg:"#5558B2"}:"RUN_ERROR"===t||"ERROR"===t?{bg:"rgba(250,95,103,0.13)",fg:"#c0333a"}:t.startsWith("RUN_")||t.startsWith("STEP_")?{bg:"rgba(255,172,77,0.2)",fg:"#8a5900"}:{bg:"#F7F7F9",fg:"#68686e"},n=this.rawEventId(e),a=this._expandedRawEvents.has(n);return(0,h.qy)` 1416 <div class="cpk-td__event" data-source-index=${e.sourceIndex}> 1417 <div class="cpk-td__event-header" style="background:${i}"> 1418 <span class="cpk-td__event-type" style="color:${s}" 1419 >${e.type}</span 1420 > 1421 <span class="cpk-td__event-time" 1422 >${H(e.timestamp)}</span 1423 > 1424 </div> 1425 <button 1426 type="button" 1427 class="cpk-td__timeline-details-toggle" 1428 aria-expanded=${a?"true":"false"} 1429 @click=${()=>this.toggleRawEventDetails(n)} 1430 > 1431 ${a?(0,h.qy)` 1432 <svg 1433 aria-hidden="true"
1434 viewBox="0 0 24 24" 1435 fill="none" 1436 stroke="currentColor" 1437 stroke-linecap="round" 1438 stroke-linejoin="round" 1439 > 1440 <path d="m6 9 6 6 6-6" /> 1441 </svg> 1442 `:(0,h.qy)` 1443 <svg 1444 aria-hidden="true" 1445 viewBox="0 0 24 24" 1446 fill="none" 1447 stroke="currentColor" 1448 stroke-linecap="round" 1449 stroke-linejoin="round" 1450 > 1451 <path d="m9 18 6-6-6-6" /> 1452 </svg> 1453 `} 1454 <span>${a?"Hide details":"Show details"}</span> 1455 </button> 1456 ${a?(0,h.qy)`<pre class="cpk-td__event-payload">${(0,m._)(W(e.rawEvent??e))}</pre>`:h.s6} 1457 </div> 1458 `})}`)}renderPanelToggle(){return(0,h.qy)` 1459 <button 1460 class="cpk-td__panel-toggle ${this._showDetailPanel?"cpk-td__panel-toggle--active":""}" 1461 @click=${()=>{this._showDetailPanel=!this._showDetailPanel}} 1462 title="Toggle thread details" 1463 type="button" 1464 > 1465 <svg 1466 width="14" 1467 height="14"
1468 viewBox="0 0 24 24" 1469 fill="none" 1470 stroke="currentColor" 1471 stroke-width="2" 1472 stroke-linecap="round" 1473 stroke-linejoin="round" 1474 > 1475 <rect x="3" y="3" width="18" height="18" rx="2" /> 1476 <line x1="15" y1="3" x2="15" y2="21" /> 1477 </svg> 1478 </button> 1479 `}renderDetailPanel(){let e=this.activityCounts,t=this.metadata;return(0,h.qy)` 1480 <!-- Thread --> 1481 <div class="cpk-tdp__section-title">Thread</div> 1482 <div class="cpk-tdp__row"> 1483 <span class="cpk-tdp__label">ID</span> 1484 <span class="cpk-tdp__value cpk-tdp__value--wrap" 1485 >${t?.id??this.threadId??"â"}</span 1486 > 1487 </div> 1488 <div class="cpk-tdp__row"> 1489 <span class="cpk-tdp__label">Name</span> 1490 <span class="cpk-tdp__value">${t?.name??"â"}</span> 1491 </div> 1492 <div class="cpk-tdp__row"> 1493 <span class="cpk-tdp__label">Agent</span> 1494 <span class="cpk-tdp__value cpk-tdp__value--truncate" 1495 >${t?.agentId??"â"}</span 1496 > 1497 </div> 1498 <div class="cpk-tdp__row"> 1499 <span class="cpk-tdp__label">End user</span> 1500 <span class="cpk-tdp__value cpk-tdp__value--truncate" 1501 >${t?.endUserId??"â"}</span 1502 > 1503 </div> 1504 <div class="cpk-tdp__row"> 1505 <span class="cpk-tdp__label">Created by</span> 1506 <span class="cpk-tdp__value cpk-tdp__value--truncate" 1507 >${t?.createdById??"â"}</span 1508 > 1509 </div> 1510 <div class="cpk-tdp__row"> 1511 <span class="cpk-tdp__label">Status</span> 1512 <span class="cpk-tdp__value cpk-tdp__value--truncate" 1513 >${t?.status??"â"}</span 1514 > 1515 </div> 1516 1517 <div class="cpk-tdp__divider"></div> 1518 1519 <!-- Timestamps --> 1520 <div class="cpk-tdp__section-title">Timestamps</div> 1521 <div class="cpk-tdp__row"> 1522 <span class="cpk-tdp__label">Created</span> 1523 <span class="cpk-tdp__value">${this.fmtTime(t?.createdAt)}</span> 1524 </div> 1525 <div class="cpk-tdp__row"> 1526 <span class="cpk-tdp__label">Updated</span> 1527 <span class="cpk-tdp__value">${this.fmtTime(t?.updatedAt)}</span> 1528 </div> 1529 <div class="cpk-tdp__row"> 1530 <span class="cpk-tdp__label">Duration</span> 1531 <span class="cpk-tdp__value">${this.duration}</span> 1532 </div> 1533 1534 <div class="cpk-tdp__divider"></div> 1535 1536 <!-- Activity --> 1537 <div class="cpk-tdp__section-title">Activity</div> 1538 <div class="cpk-tdp__row"> 1539 <span class="cpk-tdp__label">Messages</span> 1540 <span class="cpk-tdp__value">${e.messages}</span> 1541 </div> 1542 <div class="cpk-tdp__row"> 1543 <span class="cpk-tdp__label">Tool calls</span> 1544 <span class="cpk-tdp__value">${e.toolCalls}</span> 1545 </div> 1546 <div class="cpk-tdp__row"> 1547 <span class="cpk-tdp__label">AG-UI events</span> 1548 <span class="cpk-tdp__value">${this.activeEvents.length}</span> 1549 </div> 1550 `}};function X(e,t){if(t<=0||void 0===e||!Number.isFinite(e))return;let i=e/t;return i<=0?0:i>1?1:i}function Y(e){let t=0;for(let i of e){let e=i.score;"number"==typeof e&&Number.isFinite(e)&&e>t&&(t=e)}return t}function Q(e){return Math.max(6,Math.min(100,Math.round(100*e)))}var ee=class extends K{constructor(...e){super(...e),this.memories=[],this.recallResults=null,this.recallLoading=!1,this.recallError=null,this.recallQueryText="",this.search="",this.kind="all",this.onSearchInput=e=>{this.search=e.target.value},this.onKindClick=e=>{let t=e.target.closest("[data-kind]");t&&(this.kind=t.dataset.kind)},this.onRecallInput=e=>{let t=e.target.value;this.recallQueryText=t,this.dispatchEvent(new CustomEvent("recallQueryChanged",{detail:t,bubbles:!0,composed:!0}))},this.onRecallSubmit=e=>{e.preventDefault();let t=this.recallQueryText.trim();0===t.length||this.recallLoading||this.dispatchEvent(new CustomEvent("recallSubmitted",{detail:t,bubbles:!0,composed:!0}))},this.onRecallClear=()=>{this.dispatchEvent(new CustomEvent("recallCleared",{bubbles:!0,composed:!0}))}}static{this.properties={memories:{attribute:!1},recallResults:{attribute:!1},recallLoading:{attribute:!1},recallError:{attribute:!1},recallQueryText:{attribute:!1},search:{state:!0},kind:{state:!0}}}static{this.styles=(0,h.AH)` 1551 @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&family=Spline+Sans+Mono:wght@400;500&display=swap"); 1552 1553 :host { 1554 display: flex; 1555 flex-direction: column; 1556 height: 100%; 1557 overflow: hidden; 1558 } 1559 1560 .cpk-ml { 1561 font-family: "Plus Jakarta Sans", sans-serif; 1562 display: flex; 1563 flex-direction: column; 1564 height: 100%; 1565 overflow: hidden; 1566 background: #f7f7f9; 1567 } 1568 1569 /* ââ Search ââ */ 1570 .cpk-ml__search { 1571 padding: 10px 12px; 1572 border-bottom: 1px solid #dbdbe5; 1573 flex-shrink: 0; 1574 } 1575 1576 .cpk-ml__search-input { 1577 width: 100%; 1578 box-sizing: border-box; 1579 font-family: "Plus Jakarta Sans", sans-serif; 1580 font-size: 12px; 1581 padding: 7px 10px; 1582 border-radius: 6px; 1583 border: 1px solid #dbdbe5; 1584 background: #ffffff; 1585 color: #010507; 1586 outline: none; 1587 transition: border-color 0.15s; 1588 } 1589 1590 .cpk-ml__search-input:focus { 1591 border-color: #bec2ff; 1592 } 1593 1594 /* ââ Kind filter ââ */ 1595 .cpk-ml__filter { 1596 display: flex; 1597 gap: 4px; 1598 padding: 8px 12px; 1599 border-bottom: 1px solid #dbdbe5; 1600 flex-shrink: 0; 1601 flex-wrap: wrap; 1602 } 1603 1604 .cpk-ml__filter-seg { 1605 font-family: "Plus Jakarta Sans", sans-serif; 1606 font-size: 11px; 1607 font-weight: 500; 1608 padding: 3px 9px; 1609 border-radius: 5px; 1610 border: 1px solid #dbdbe5; 1611 background: #ffffff; 1612 color: #57575b; 1613 cursor: pointer; 1614 transition: 1615 background 0.1s, 1616 border-color 0.1s, 1617 color 0.1s; 1618 user-select: none; 1619 } 1620 1621 .cpk-ml__filter-seg:hover { 1622 background: #f0f0f5; 1623 } 1624 1625 .cpk-ml__filter-seg--active { 1626 background: #bec2ff1a; 1627 border-color: #bec2ff; 1628 color: #010507; 1629 } 1630 1631 .cpk-ml__filter-count { 1632 font-family: "Spline Sans Mono", monospace; 1633 font-size: 9px; 1634 margin-left: 4px; 1635 color: #68686e; 1636 } 1637 1638 /* ââ List ââ */ 1639 .cpk-ml__list { 1640 flex: 1; 1641 overflow-y: auto; 1642 padding: 8px 12px; 1643 display: flex; 1644 flex-direction: column; 1645 gap: 8px; 1646 } 1647 1648 /* ââ Card ââ */ 1649 .cpk-ml__card { 1650 background: #ffffff; 1651 border: 1px solid #e9e9ef; 1652 border-radius: 8px; 1653 padding: 10px 12px; 1654 display: flex; 1655 flex-direction: column; 1656 gap: 6px; 1657 } 1658 1659 .cpk-ml__card-badges { 1660 display: flex; 1661 gap: 6px; 1662 align-items: center; 1663 flex-wrap: wrap; 1664 } 1665 1666 /* Kind badge â color per kind */ 1667 .cpk-ml__kind-badge { 1668 font-family: "Spline Sans Mono", monospace; 1669 font-size: 9px; 1670 padding: 1px 7px; 1671 border-radius: 4px; 1672 text-transform: uppercase; 1673 font-weight: 500; 1674 white-space: nowrap; 1675 } 1676 1677 .cpk-ml__kind-badge--topical { 1678 background: #eee6fe; 1679 color: #57575b; 1680 } 1681 1682 .cpk-ml__kind-badge--episodic { 1683 background: #e6f4fe; 1684 color: #2d5f80; 1685 } 1686 1687 .cpk-ml__kind-badge--operational { 1688 background: #e6feee; 1689 color: #2d6645; 1690 } 1691 1692 /* Scope badge */ 1693 .cpk-ml__scope-badge { 1694 font-family: "Spline Sans Mono", monospace; 1695 font-size: 9px; 1696 padding: 1px 7px; 1697 border-radius: 4px; 1698 text-transform: uppercase; 1699 font-weight: 500; 1700 white-space: nowrap; 1701 background: #f0f0f5; 1702 color: #68686e; 1703 } 1704 1705 /* Content */ 1706 .cpk-ml__content { 1707 font-size: 12px; 1708 color: #010507; 1709 line-height: 1.5; 1710 word-break: break-word; 1711 } 1712 1713 /* Footer */ 1714 .cpk-ml__footer { 1715 display: flex; 1716 align-items: center; 1717 justify-content: space-between; 1718 gap: 8px; 1719 margin-top: 2px; 1720 } 1721 1722 .cpk-ml__footer-threads { 1723 font-size: 10px; 1724 color: #68686e; 1725 } 1726 1727 .cpk-ml__footer-id { 1728 font-family: "Spline Sans Mono", monospace; 1729 font-size: 9px; 1730 color: #c0c0c8; 1731 } 1732 1733 /* ââ Empty state ââ */ 1734 .cpk-ml__empty { 1735 padding: 32px 16px; 1736 text-align: center; 1737 color: #68686e; 1738 font-size: 12px; 1739 display: flex; 1740 flex-direction: column; 1741 align-items: center; 1742 gap: 8px; 1743 } 1744 1745 .cpk-ml__empty-icon { 1746 color: #c0c0c8; 1747 } 1748 1749 /* ââ Recall ââ */ 1750 .cpk-ml__recall { 1751 display: flex; 1752 gap: 6px; 1753 padding: 10px 12px; 1754 border-bottom: 1px solid #dbdbe5; 1755 flex-shrink: 0; 1756 } 1757 .cpk-ml__recall-input { 1758 flex: 1; 1759 box-sizing: border-box; 1760 font-family: "Plus Jakarta Sans", sans-serif; 1761 font-size: 12px; 1762 padding: 7px 10px; 1763 border-radius: 6px; 1764 border: 1px solid #dbdbe5; 1765 background: #fff; 1766 color: #010507; 1767 outline: none; 1768 transition: border-color 0.15s; 1769 } 1770 .cpk-ml__recall-input:focus { 1771 border-color: #bec2ff; 1772 } 1773 .cpk-ml__recall-btn { 1774 font-family: "Plus Jakarta Sans", sans-serif; 1775 font-size: 12px; 1776 font-weight: 500; 1777 padding: 7px 12px; 1778 border-radius: 6px; 1779 border: 1px solid #dbdbe5; 1780 background: #fff; 1781 color: #010507; 1782 cursor: pointer; 1783 transition: background 0.1s; 1784 } 1785 .cpk-ml__recall-btn:hover:not(:disabled) { 1786 background: #f0f0f5; 1787 } 1788 .cpk-ml__recall-btn:disabled { 1789 opacity: 0.4; 1790 cursor: default; 1791 } 1792 .cpk-ml__recall-section { 1793 flex-shrink: 0; 1794 max-height: 45%; 1795 overflow-y: auto; 1796 padding: 8px 12px; 1797 border-bottom: 1px solid #dbdbe5; 1798 background: #fbfbfd; 1799 display: flex; 1800 flex-direction: column; 1801 gap: 8px; 1802 } 1803 .cpk-ml__recall-header { 1804 display: flex; 1805 align-items: center; 1806 justify-content: space-between; 1807 gap: 8px; 1808 } 1809 .cpk-ml__recall-title { 1810 font-family: "Plus Jakarta Sans", sans-serif; 1811 font-size: 12px; 1812 font-weight: 600; 1813 color: #010507; 1814 } 1815 .cpk-ml__recall-clear { 1816 font-family: "Plus Jakarta Sans", sans-serif; 1817 font-size: 10px; 1818 color: #68686e; 1819 background: none; 1820 border: none; 1821 cursor: pointer; 1822 padding: 0; 1823 } 1824 .cpk-ml__recall-clear:hover { 1825 color: #010507; 1826 } 1827 .cpk-ml__recall-msg { 1828 font-size: 11px; 1829 color: #68686e; 1830 line-height: 1.45; 1831 } 1832 .cpk-ml__recall-msg--error { 1833 color: #c0333a; 1834 } 1835 1836 /* ââ Relevance bar ââ */ 1837 .cpk-ml__relevance { 1838 height: 4px; 1839 width: 100%; 1840 overflow: hidden; 1841 border-radius: 9999px; 1842 background: #f0f0f5; 1843 } 1844 .cpk-ml__relevance-fill { 1845 height: 100%; 1846 border-radius: 9999px; 1847 background: #6366f1; 1848 } 1849 1850 /* ââ Scope badge variants ââ */ 1851 .cpk-ml__scope-badge--user { 1852 background: #f0f0f5; 1853 color: #68686e; 1854 } 1855 .cpk-ml__scope-badge--project {
1856 background: #fef3c7; 1857 color: #92660c; 1858 } 1859 `}get searchFiltered(){let e=this.search.trim().toLowerCase();return e?this.memories.filter(t=>t.content.toLowerCase().includes(e)):this.memories}get filtered(){let e=this.searchFiltered;return"all"===this.kind?e:e.filter(e=>e.kind===this.kind)}countForKind(e){return this.searchFiltered.filter(t=>t.kind===e).length}shortId(e){return e.length<=12?e:`${e.slice(0,4)}â¦${e.slice(-4)}`}renderKindBadge(e){return(0,h.qy)`<span class="cpk-ml__kind-badge cpk-ml__kind-badge--${e}" 1860 >${e}</span 1861 >`}renderScopeBadge(e){return(0,h.qy)`<span 1862 class="cpk-ml__scope-badge cpk-ml__scope-badge--${"project"===e?"project":"user"}" 1863 >${e}</span 1864 >`}renderCard(e,t){let i=e.sourceThreadIds.length;return(0,h.qy)` 1865 <div class="cpk-ml__card"> 1866 <div class="cpk-ml__card-badges"> 1867 ${this.renderKindBadge(e.kind)}${this.renderScopeBadge(e.scope)} 1868 </div> 1869 <div class="cpk-ml__content">${e.content}</div> 1870 ${void 0!==t?(0,h.qy)`<div class="cpk-ml__relevance"> 1871 <div 1872 class="cpk-ml__relevance-fill" 1873 style="width:${Q(t)}%;" 1874 ></div> 1875 </div>`:h.s6} 1876 <div class="cpk-ml__footer"> 1877 <span class="cpk-ml__footer-threads" 1878 >${i} source thread${1===i?"":"s"}</span 1879 > 1880 <span class="cpk-ml__footer-id">${this.shortId(e.id)}</span> 1881 </div> 1882 </div> 1883 `}renderRecallForm(){let e=this.recallLoading||0===this.recallQueryText.trim().length;return(0,h.qy)` 1884 <form class="cpk-ml__recall" @submit=${this.onRecallSubmit}> 1885 <input 1886 type="text" 1887 placeholder="Recall by meaningâ¦" 1888 aria-label="Recall memories by meaning" 1889 class="cpk-ml__recall-input" 1890 .value=${this.recallQueryText} 1891 @input=${this.onRecallInput} 1892 /> 1893 <button type="submit" class="cpk-ml__recall-btn" ?disabled=${e}> 1894 ${this.recallLoading?"â¦":"Recall"} 1895 </button> 1896 </form> 1897 `}renderRecallSection(){let e=this.recallResults;if(null===e)return(0,h.qy)``;let t=Y(e);return(0,h.qy)` 1898 <section 1899 class="cpk-ml__recall-section" 1900 aria-label="Semantic recall results" 1901 > 1902 <div class="cpk-ml__recall-header"> 1903 <span class="cpk-ml__recall-title" 1904 >Semantic recall (${e.length})</span 1905 > 1906 <button 1907 type="button" 1908 class="cpk-ml__recall-clear" 1909 @click=${this.onRecallClear} 1910 > 1911 Clear 1912 </button> 1913 </div> 1914 ${this.recallError?(0,h.qy)`<p class="cpk-ml__recall-msg cpk-ml__recall-msg--error"> 1915 Recall failed: ${this.recallError} 1916 </p>`:0===e.length?(0,h.qy)` 1917 <p class="cpk-ml__recall-msg">No memories matched that query.</p> 1918 `:e.map(e=>this.renderCard(e,X(e.score,t)))} 1919 </section> 1920 `}renderEmpty(){let e=this.search.trim();return 0===this.memories.length?(0,h.qy)` 1921 <div class="cpk-ml__empty"> 1922 <svg 1923 width="24" 1924 height="24"
1925 viewBox="0 0 24 24" 1926 fill="none" 1927 stroke="currentColor" 1928 stroke-width="1.5" 1929 stroke-linecap="round" 1930 stroke-linejoin="round" 1931 class="cpk-ml__empty-icon" 1932 > 1933 <ellipse cx="12" cy="5" rx="9" ry="3" /> 1934 <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" /> 1935 <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" /> 1936 </svg> 1937 No memories yet â tell the agent a durable fact and watch it appear. 1938 </div> 1939 `:e?(0,h.qy)` 1940 <div class="cpk-ml__empty"> 1941 No memories match “${e}”. 1942 </div> 1943 `:(0,h.qy)` 1944 <div class="cpk-ml__empty">No ${this.kind} memories yet.</div> 1945 `}render(){let e=this.filtered;return(0,h.qy)` 1946 <div class="cpk-ml"> 1947 <!-- Semantic recall --> 1948 ${this.renderRecallForm()} ${this.renderRecallSection()} 1949 1950 <!-- Search --> 1951 <div class="cpk-ml__search"> 1952 <input 1953 type="text" 1954 placeholder="Search memoriesâ¦" 1955 .value=${this.search} 1956 @input=${this.onSearchInput} 1957 class="cpk-ml__search-input" 1958 /> 1959 </div> 1960 1961 <!-- Kind filter --> 1962 <div class="cpk-ml__filter" @click=${this.onKindClick}> 1963 <button 1964 class="cpk-ml__filter-seg ${"all"===this.kind?"cpk-ml__filter-seg--active":""}" 1965 data-kind="all" 1966 > 1967 All<span class="cpk-ml__filter-count">${this.searchFiltered.length}</span> 1968 </button> 1969 ${["topical","episodic","operational"].map(e=>(0,h.qy)` 1970 <button 1971 class="cpk-ml__filter-seg ${this.kind===e?"cpk-ml__filter-seg--active":""}" 1972 data-kind="${e}" 1973 > 1974 ${e}<span class="cpk-ml__filter-count">${this.countForKind(e)}</span> 1975 </button> 1976 `)} 1977 </div> 1978 1979 <!-- Memory list --> 1980 <div class="cpk-ml__list"> 1981 ${e.map(e=>this.renderCard(e))} 1982 ${0===e.length?this.renderEmpty():h.s6} 1983 </div> 1984 </div> 1985 `}},et=class extends Z{};function ei(e,t,i){e.get(t)||e.define(t,i)}var es=class e extends h.WF{constructor(...e){super(...e),this._core=null,this.coreSubscriber=null,this.coreUnsubscribe=null,this._memories=[],this._memoriesLoading=!1,this._memoriesError=null,this._memoriesAvailable=!0,this._memoriesRealtimeStatus="connecting",this._memoryUnsub=null,this._memorySubscribed=!1,this._memoryStoreUnsupported=!1,this._recallResults=null,this._recallLoading=!1,this._recallError=null,this._recallQuery="",this._recallSeq=0,this.runtimeStatus=null,this.inspectorMetadataProjection=(0,d.s)(void 0,void 0),this.metadataTelemetryFingerprints=new Map,this.coreProperties={},this.lastCoreError=null,this.agentSubscriptions=new Map,this.agentEvents=new Map,this.agentMessages=new Map,this.liveMessageVersion=new Map,this.agentStates=new Map,this.flattenedEvents=[],this.eventCounter=0,this.contextStore={},this.pointerId=null,this.dragStart=null,this.dragOffset={x:0,y:0},this.isDragging=!1,this.pointerContext=null,this.isOpen=!1,this.draggedDuringInteraction=!1,this.ignoreNextButtonClick=!1,this.selectedMenu="threads",this.pendingPersistedMenu=null,this.hasResolvedCore=!1,this.settingsOpen=!1,this.lastSelectedMenuByGroup={threads:"threads",agents:"ag-ui-events",learning:"memories"},this.lastScrolledAgentNavigationLayout=null,this.selectedThreadId=null,this.selectedRealThreadIsExplicit=!1,this.selectedLocalExampleThreadId=null,this.requestedThreadId=null,this.focusedThreadMessageId=null,this.threadFocusRequestId=0,this.threadListWidth=290,this.threadDividerResizing=!1,this.threadDividerPointerId=-1,this.threadDividerStartX=0,this.threadDividerStartWidth=0,this._threads=[],this._threadStoreSubscriptions=new Map,this._threadsByAgent=new Map,this._threadsErrorByAgent=new Map,this._threadsLoadingByAgent=new Map,this._ownedThreadStores=new Map,this.threadCapabilityEnabled=null,this.threadCapabilityGeneration=0,this.contextMenuOpen=!1,this.dockMode="floating",this.popOut=null,this.inspectorPortal=null,this.previousBodyMargins=null,this.transitionTimeoutId=null,this.bodyTransitionTimeoutIds=new Set,this.pendingSelectedContext=null,this.autoAttachCore=!0,this.attemptedAutoAttach=!1,this.cachedTools=[],this.toolSignature="",this._capabilitiesVersion=0,this.eventFilterText="",this.eventTypeFilter="all",this.evtColWidths=[100,80,150],this._evtColResize=null,this.announcementHtml=null,this.announcementTimestamp=null,this.announcementPreviewText=null,this.announcementCtaLabel=null,this.hasUnseenAnnouncement=!1,this.announcementLoaded=!1,this.announcementPromise=null,this.showAnnouncementPreview=!0,this.announcementExpanded=!1,this.viewedBannerSurfaces=new Set,this.pendingBannerViewed=[],this.clickedBannerIds=new Set,this.viewedThreadsTelemetryStates=new Set,this.viewedExampleKinds=new Set,this.selectedExampleKinds=new Set,this.viewedExampleTourSteps=new Set,this.exampleThreadProviders=new Map,this.exampleTourDismissed=!1,this.exampleTourActive=!1,this.exampleTourStep=0,this.exampleTourAutoShown=!1,this.threadsExampleOverviewVideoState="deferred",this.threadsExampleOverviewVideoLoaded=!1,this.threadsExampleOverviewVideoReducedMotion=!1,this.threadsExampleOverviewVideoLoadTimer=null,this.threadsExampleOverviewVideoIdleCallbackId=null,this.threadsExampleOverviewVideoElement=null,this.threadsExampleOverviewVideoListeners=null,this.threadsExampleOverviewVideoLifecycleGeneration=0,this.threadsExampleOverviewVideoPlayAttemptGeneration=0,this.threadsExampleOverviewVideoPlayPromise=null,this.threadsExampleOverviewVideoPlayOnNextBind=!1,this.threadsSetupPromptCopyState="idle",this.threadsSetupPromptCopyResetTimeoutId=null,this.threadsSetupPromptCopyGeneration=0,this.contextState={button:{position:{x:16,y:16},size:{...C},anchor:{horizontal:"right",vertical:"top"}
1985,anchorOffset:{x:16,y:16}},window:{position:{x:16,y:16},size:{...I},anchor:{horizontal:"right",vertical:"top"},anchorOffset:{x:16,y:16}}},this.hasCustomPosition={button:!1,window:!1},this.resizePointerId=null,this.resizeStart=null,this.resizeInitialSize=null,this.isResizing=!1,this.customTabIcons={threads:'<svg class="h-3.5 w-3.5" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.04167 15C8.29167 15 7.65972 14.7431 7.14583 14.2292C6.63194 13.7153 6.375 13.0972 6.375 12.375C6.375 11.3194 6.80208 10.3646 7.65625 9.51042C8.51042 8.65625 9.57639 8.125 10.8542 7.91667C10.8125 7.41667 10.6875 7.03819 10.4792 6.78125C10.2708 6.52431 9.98611 6.39583 9.625 6.39583C9.20833 6.39583 8.75694 6.56944 8.27083 6.91667C7.78472 7.26389 7.20833 7.83333 6.54167 8.625C5.45833 9.91667 4.66319 10.7569 4.15625 11.1458C3.64931 11.5347 3.10417 11.7292 2.52083 11.7292C1.8125 11.7292 1.21528 11.4653 0.729167 10.9375C0.243056 10.4097 0 9.77083 0 9.02083C0 8.27083 0.163194 7.50347 0.489583 6.71875C0.815972 5.93403 1.36806 4.99306 2.14583 3.89583C2.40972 3.53472 2.60417 3.22917 2.72917 2.97917C2.85417 2.72917 2.91667 2.52778 2.91667 2.375C2.91667 2.27778 2.89931 2.20486 2.86458 2.15625C2.82986 2.10764 2.77778 2.08333 2.70833 2.08333C2.56944 2.08333 2.39583 2.17014 2.1875 2.34375C1.97917 2.51736 1.73611 2.78472 1.45833 3.14583L0 1.66667C0.444444 1.125 0.895833 0.711806 1.35417 0.427083C1.8125 0.142361 2.26389 0 2.70833 0C3.34722 0 3.88889 0.222222 4.33333 0.666667C4.77778 1.11111 5 1.66667 5 2.33333C5 2.73611 4.89583 3.18056 4.6875 3.66667C4.47917 4.15278 4.13194 4.73611 3.64583 5.41667C3.11806 6.16667 2.72569 6.82639 2.46875 7.39583C2.21181 7.96528 2.08333 8.46528 2.08333 8.89583C2.08333 9.13194 2.12153 9.31597 2.19792 9.44792C2.27431 9.57986 2.38194 9.64583 2.52083 9.64583C2.65972 9.64583 2.78125 9.60764 2.88542 9.53125C2.98958 9.45486 3.18056 9.27083 3.45833 8.97917C3.63889 8.78472 3.85417 8.54514 4.10417 8.26042C4.35417 7.97569 4.65972 7.625 5.02083 7.20833C5.89583 6.16667 6.6875 5.42361 7.39583 4.97917C8.10417 4.53472 8.84722 4.3125 9.625 4.3125C10.5556 4.3125 11.3194 4.625 11.9167 5.25C12.5139 5.875 12.8542 6.72917 12.9375 7.8125H15V9.89583H12.9375C12.8264 11.4514 12.4201 12.691 11.7188 13.6146C11.0174 14.5382 10.125 15 9.04167 15ZM9.08333 12.9167C9.52778 12.9167 9.90278 12.6632 10.2083 12.1562C10.5139 11.6493 10.7222 10.9444 10.8333 10.0417C10.1944 10.1944 9.63889 10.4965 9.16667 10.9479C8.69444 11.3993 8.45833 11.8472 8.45833 12.2917C8.45833 12.4861 8.51389 12.6389 8.625 12.75C8.73611 12.8611 8.88889 12.9167 9.08333 12.9167Z" fill="currentColor"/></svg>'},this.handlePointerDown=e=>{if("floating"!==this.dockMode&&this.isOpen)return;let t=e.currentTarget,i=t?.dataset.dragContext==="window"?"window":"button",s=e.target;if("window"===i&&s?.closest("button, a, nav"))return;this.pointerContext=i,this.measureContext(i),e.preventDefault(),this.pointerId=e.pointerId,this.dragStart={x:e.clientX,y:e.clientY};let n=this.contextState[i];this.dragOffset={x:e.clientX-n.position.x,y:e.clientY-n.position.y},this.isDragging=!1,this.draggedDuringInteraction=!1,this.ignoreNextButtonClick=!1,t?.setPointerCapture?.(this.pointerId)},this.handlePointerMove=e=>{if(this.pointerId!==e.pointerId||!this.dragStart||!this.pointerContext)return;let t=Math.hypot(e.clientX-this.dragStart.x,e.clientY-this.dragStart.y);if(!this.isDragging&&t<6)return;e.preventDefault(),this.setDragging(!0),this.draggedDuringInteraction=!0;let i={x:e.clientX-this.dragOffset.x,y:e.clientY-this.dragOffset.y},s=this.constrainToViewport(i,this.pointerContext);this.contextState[this.pointerContext].position=s,this.updateHostTransform(this.pointerContext)},this.handlePointerUp=e=>{if(this.pointerId!==e.pointerId)return;let t=e.currentTarget;t?.hasPointerCapture(this.pointerId)&&t.releasePointerCapture(this.pointerId);let i=this.pointerContext??this.activeContext;this.isDragging&&this.pointerContext?(e.preventDefault(),this.setDragging(!1),"window"===this.pointerContext?(this.updateAnchorFromPosition(this.pointerContext),this.hasCustomPosition.window=!0,this.applyAnchorPosition(this.pointerContext)):"button"===this.pointerContext&&(this.snapButtonToCorner(),this.hasCustomPosition.button=!0,this.draggedDuringInteraction&&(this.ignoreNextButtonClick=!0))):"button"!==i||this.isOpen||this.draggedDuringInteraction||this.openInspector("floating_button"),this.resetPointerTracking()},this.handlePointerCancel=e=>{if(this.pointerId!==e.pointerId)return;let t=e.currentTarget;t?.hasPointerCapture(this.pointerId)&&t.releasePointerCapture(this.pointerId),this.resetPointerTracking()},this.handleButtonClick=e=>{if(this.isDragging)return void e.preventDefault();if(this.ignoreNextButtonClick){e.preventDefault(),this.ignoreNextButtonClick=!1;return}this.isOpen||(e.preventDefault(),this.openInspector("floating_button"))},this.handleClosePointerDown=e=>{e.stopPropagation(),e.preventDefault()},this.handleCloseClick=()=>{this.closeInspector()},this.requestPopOut=()=>{if(this.isPoppedOut)return;let e=this.contextState.window.size,t=(0,l.SG)({open:window.open.bind(window),features:(0,l.$R)(e),title:"CopilotKit Inspector",cssTexts:this.getPopOutCssTexts(),sourceDocument:document,onClose:()=>this.handlePopOutClosed()});this.popOut=t;try{en(t.win.customElements),"floating"!==this.dockMode&&this.removeDockStyles(),t.win.addEventListener("pointerdown",this.handleGlobalPointerDown),this.syncInspectorPortal(),this.requestUpdate()}catch(e){throw this.popOut=null,this.unbindPopOutPointerDown(t.win),t.close(),this.isConnected&&this.isOpen&&"floating"!==this.dockMode&&this.applyDockStyles(),this.requestUpdate(),e}},this.handlePopOutClosed=()=>{let e=this.popOut;e&&(this.popOut=null,this.unbindPopOutPointerDown(e.win),this.syncInspectorPortal(),this.isConnected&&this.isOpen&&"floating"!==this.dockMode&&this.applyDockStyles(),this.requestUpdate())},this.handleAppBeforeUnload=()=>{this.closePopOut()},this.handleResizePointerDown=e=>{e.stopPropagation(),e.preventDefault(),this.hasCustomPosition.window=!0,this.isResizing=!0,this.resizePointerId=e.pointerId,this.resizeStart={x:e.clientX,y:e.clientY},this.resizeInitialSize={...this.contextState.window.size},document.body&&"floating"!==this.dockMode&&(document.body.style.transition=""),e.currentTarget?.setPointerCapture?.(e.pointerId)},this.handleResizePointerMove=e=>{if(!this.isResizing||this.resizePointerId!==e.pointerId||!this.resizeStart||!this.resizeInitialSize)return;e.preventDefault();let t=e.clientX-this.resizeStart.x,i=e.clientY-this.resizeStart.y,s=this.contextState.window;"docked-left"===this.dockMode?(s.size=this.clampWindowSize({width:this.resizeInitialSize.width+t,height:s.size.height}),document.body&&(document.body.style.marginLeft=`${s.size.width}px`)):(s.size=this.clampWindowSize({width:this.resizeInitialSize.width+t,height:this.resizeInitialSize.height+i}),this.keepPositionWithinViewport("window"),this.updateAnchorFromPosition("window")),this.requestUpdate(),this.updateHostTransform("window")},this.handleResizePointerUp=e=>{if(this.resizePointerId!==e.pointerId)return;let t=e.currentTarget;t?.hasPointerCapture(this.resizePointerId)&&t.releasePointerCapture(this.resizePointerId),"floating"===this.dockMode&&(this.updateAnchorFromPosition("window"),this.applyAnchorPosition("window")),this.persistState(),this.resetResizeTracking()},this.handleResizePointerCancel=e=>{if(this.resizePointerId!==e.pointerId)return;let t=e.currentTarget;t?.hasPointerCapture(this.resizePointerId)&&t.releasePointerCapture(this.resizePointerId),"floating"===this.dockMode&&(this.updateAnchorFromPosition("window"),this.applyAnchorPosition("window")),this.persistState(),this.resetResizeTracking()},this.handleResize=()=>{this.isPoppedOut||(this.measureContext("button"),this.applyAnchorPosition("button"),this.measureContext("window"),this.contextState.window.size=this.clampWindowSize(this.contextState.window.size),this.hasCustomPosition.window?this.applyAnchorPosition("window"):this.centerContext("window"),this.requestUpdate(),this.updateHostTransform())},this.contextOptions=[{key:"all-agents",label:"All Agents"}],this.selectedContext="all-agents",this.expandedRows=new Set,this.copiedEvents=new Set,this.expandedTools=new Set,this.expandedContextItems=new Set,this.copiedContextItems=new Set,this.handleInspectorMetadataActionClick=(e,t)=>{if(!(!this.isOpen||this.runtimeStatus!==v.Ub.Connected||this.core?.telemetryDisabled)){if("enable_intelligence"===e.kind)return void this.handleThreadsIntelligenceSignupClick();try{(0,p.o9)({action_kind:e.kind,license_bucket:this.inspectorMetadataProjection.licenseState,...this.getMetadataTelemetryContext(),action_placement:B(t)})}catch{}}},this.handleTalkToEngineerClick=()=>{this.core?.telemetryDisabled||(0,p.Ft)(this.getThreadsCtaTelemetryProps("talk_to_engineer","threads_header"))},this.handleThreadsIntelligenceSignupClick=()=>{this.core?.telemetryDisabled||(0,p.TM)(this.getThreadsCtaTelemetryProps("signup","threads_locked"))},this.handleThreadsTalkToEngineerClick=()=>{this.core?.telemetryDisabled||(0,p.M3)(this.getThreadsCtaTelemetryProps("talk_to_engineer","threads_locked"))},this.handleThreadDividerPointerDown=e=>{this.threadDividerResizing=!0,this.threadDividerPointerId=e.pointerId,this.threadDividerStartX=e.clientX,this.threadDividerStartWidth=this.threadListWidth,e.currentTarget.setPointerCapture(e.pointerId),e.preventDefault()},this.handleThreadDividerPointerMove=e=>{if(!this.threadDividerResizing||this.threadDividerPointerId!==e.pointerId)return;let t=e.clientX-this.threadDividerStartX;this.threadListWidth=Math.max(180,Math.min(480,this.threadDividerStartWidth+t)),this.requestUpdate()},this.handleThreadDividerPointerUp=e=>{if(this.threadDividerPointerId!==e.pointerId)return;let t=e.currentTarget;t.hasPointerCapture(this.threadDividerPointerId)&&t.releasePointerCapture(this.threadDividerPointerId),this.threadDividerResizing=!1}
1985,this.handleThreadsExampleOverviewVideoControl=()=>{let e=this.threadsExampleOverviewVideoElement;if(!e)return;if("playing"===this.threadsExampleOverviewVideoState){this.invalidateThreadsExampleOverviewVideoPlay();try{e.pause()}catch{}this.threadsExampleOverviewVideoState="ready",this.requestUpdate();return}if("failed"===this.threadsExampleOverviewVideoState){if(this.cleanupThreadsExampleOverviewVideo(),!this.isConnected||!e.isConnected)return;this.threadsExampleOverviewVideoPlayOnNextBind=!0,this.requestUpdate();return}this.cancelThreadsExampleOverviewVideoGate();let t=this.threadsExampleOverviewVideoLifecycleGeneration;if("deferred"===this.threadsExampleOverviewVideoState)return void this.activateThreadsExampleOverviewVideo(e,t,!0);this.playThreadsExampleOverviewVideo(e,t)},this.handleThreadsSetupPromptCopy=async e=>{let t=this.threadsSetupPromptCopyGeneration+=1;null!==this.threadsSetupPromptCopyResetTimeoutId&&(window.clearTimeout(this.threadsSetupPromptCopyResetTimeoutId),this.threadsSetupPromptCopyResetTimeoutId=null),this.threadsSetupPromptCopyState="idle",this.requestUpdate();let i=this.getClipboard(e);if(!i?.writeText)return void this.showThreadsSetupPromptCopyState("error",t);try{await i.writeText(P),this.showThreadsSetupPromptCopyState("copied",t)}catch{this.showThreadsSetupPromptCopyState("error",t)}},this.handleClearEvents=()=>{"all-agents"===this.selectedContext?(this.agentEvents.clear(),this.flattenedEvents=[]):(this.agentEvents.delete(this.selectedContext),this.flattenedEvents=this.flattenedEvents.filter(e=>e.agentId!==this.selectedContext)),this.expandedRows.clear(),this.copiedEvents.clear(),this.requestUpdate()},this.handleGlobalPointerDown=e=>{this.contextMenuOpen&&(e.composedPath().some(e=>"function"==typeof e.getAttribute&&"true"===e.getAttribute("data-context-dropdown-root"))||(this.contextMenuOpen=!1,this.requestUpdate()))},this.handleDismissAnnouncementPreview=e=>{e.stopPropagation(),this.dismissAnnouncement("collapsed_preview")},this.copyResetTimeouts=new WeakMap,this.handleAnnouncementContentClick=e=>{let t=e.target,i="function"==typeof t?.closest?t.closest(".announcement-code__copy"):null,s=i?.tagName==="BUTTON"?i:null;if(!s)return void this.trackBannerClickedOnce({cta:"body"});e.preventDefault(),e.stopPropagation();let n=s.getAttribute("data-copy")??"",a=this.decodeBase64(n);if(!a)return;let r=()=>{let e=s.ownerDocument.defaultView??window,t=this.copyResetTimeouts.get(s);void 0!==t&&e.clearTimeout(t),s.setAttribute("data-copied","true"),s.setAttribute("aria-label","Code copied"),s.textContent="Copied";let i=e.setTimeout(()=>{s.removeAttribute("data-copied"),s.setAttribute("aria-label","Copy code"),s.textContent="Copy",this.copyResetTimeouts.delete(s)},1500);this.copyResetTimeouts.set(s,i)},o=this.getClipboard(e);o?.writeText&&o.writeText(a).then(r,()=>{})}}static{this.properties={core:{attribute:!1},autoAttachCore:{type:Boolean,attribute:"auto-attach-core"},_capabilitiesVersion:{state:!0}}}get core(){return this._core}set core(e){let t=this._core;if(t===e)return;this.detachFromCore();let i=this.hasResolvedCore;this._core=e??null,this._core&&(this.hasResolvedCore=!0),!i&&this._core?this.resolvePendingPersistedMenu():i&&this.reconcileSelectedMenuVisibility(),this.requestUpdate("core",t),this._core&&this.attachToCore(this._core)}get menuItems(){let e=(this._core?.tools?.length??0)>0,t=(this._core?.catalogComponents?.length??0)>0;return[{key:"ag-ui-events",label:"AG-UI Events",icon:"Zap"},{key:"agents",label:"Agent",icon:"Bot"},...e?[{key:"frontend-tools",label:"Frontend Tools",icon:"Hammer"}]:[],...e||t?[{key:"capabilities",label:"Capabilities",icon:"SlidersHorizontal"}]:[],{key:"agent-context",label:"Context",icon:"FileText"},{key:"threads",label:"Threads",icon:"MessageSquare"},{key:"memories",label:y,icon:"Brain"}]}getGroupForMenu(e){for(let t of T)if(w[t.key].some(t=>t===e))return t.key;return"threads"}get selectedGroup(){return this.getGroupForMenu(this.selectedMenu)}getVisibleMenuItemsForGroup(e){return this.menuItems.filter(t=>w[e].some(e=>e===t.key))}getMenuForGroup(e){let t=this.getVisibleMenuItemsForGroup(e),i=this.lastSelectedMenuByGroup[e];return t.find(e=>e.key===i)?.key??t[0]?.key??"threads"}reconcileSelectedMenuVisibility(){if(this.menuItems.some(e=>e.key===this.selectedMenu))return;let e=this.getGroupForMenu(this.selectedMenu);this.selectedMenu=this.getVisibleMenuItemsForGroup(e)[0]?.key??"threads",this.lastSelectedMenuByGroup[e]=this.selectedMenu,this.persistState()}handleGroupSelect(e){this.handleMenuSelect(this.getMenuForGroup(e))}handleSettingsToggle(){this.settingsOpen=!this.settingsOpen,this.contextMenuOpen=!1,this.requestUpdate()}getThreadServiceStatus(){return this._core&&this._core.threadEndpoints?this._core.threadEndpoints?.list===!1?"unavailable":"available":"unknown"}areThreadEndpointsAvailable(){let e=this._core?.threadEndpoints;return null!==e&&"object"==typeof e&&!1!==e.list}synchronizeThreadCapability(){let e=this.areThreadEndpointsAvailable();if(this.threadCapabilityEnabled!==e){if(this.threadCapabilityEnabled=e,this.threadCapabilityGeneration+=1,e){let e=this.core;if(!e)return;for(let[t,i]of Object.entries("function"==typeof e.getThreadStores?e.getThreadStores():{}))this.subscribeToThreadStore(t,i);for(let t of Object.values(e.agents))t?.agentId&&this.ensureOwnedThreadStore(t.agentId);return}this.teardownThreadStoreSubscriptions(),this.teardownOwnedThreadStores(),this.selectedThreadId!==this.selectedLocalExampleThreadI
1985d&&(this.selectedThreadId=null,this.selectedLocalExampleThreadId=null),this.selectedRealThreadIsExplicit=!1,this.requestUpdate()}}getActiveThreadsState(){let e="all-agents"===this.selectedContext?this._threads:this._threadsByAgent.get(this.selectedContext)??[],t=null;return{displayThreads:e,threadsErrorMessage:t="all-agents"===this.selectedContext?this._threadsErrorByAgent.values().next().value?.message??null:this._threadsErrorByAgent.get(this.selectedContext)?.message??null,threadsLoading:"all-agents"===this.selectedContext?Array.from(this._threadsLoadingByAgent.values()).some(Boolean):this._threadsLoadingByAgent.get(this.selectedContext)??!1}}getThreadsUsageBucket(){let e=this.inspectorMetadataProjection.usage;return e?0===e.used?"empty":"finite"===e.limit.kind?e.used<e.limit.value?"within_limit":"at_or_over_limit":"unlimited"===e.limit.kind?"unlimited":"unknown_limit":"absent"}getThreadsCapacityState(){let e=this.inspectorMetadataProjection.usage;if(!e||"finite"!==e.limit.kind)return;if(e.used>=e.limit.value)return"critical";let t=e.limit.value-Math.floor(e.limit.value/10);return e.used>=t?"warning":"normal"}getThreadsExpiryBucket(){let e=this.inspectorMetadataProjection.usage;return e&&Object.prototype.hasOwnProperty.call(e,"expiringSoonCount")?0===e.expiringSoonCount?"zero":"number"==typeof e.expiringSoonCount&&e.expiringSoonCount>0?"positive":"unavailable":"unavailable"}hasActiveVisibleThreads(){if("threads"!==this.selectedMenu||this.settingsOpen||!this.areThreadEndpointsAvailable())return!1;let{displayThreads:e,threadsErrorMessage:t,threadsLoading:i}=this.getActiveThreadsState();return!t&&!i&&e.length>0}getThreadsTelemetryProps(){let e=this.getThreadServiceStatus();return{intelligence_status:"available"===e?"intelligence_enabled":"unavailable"===e?"intelligence_not_enabled":"unknown",thread_service_status:e,license_status:this.core?.licenseStatus??void 0,runtime_mode:this.core?.runtimeMode??void 0,runtime_url_type:(0,p.kE)(this.core?.runtimeUrl),telemetry_disabled:!1,has_threads:this.hasActiveVisibleThreads(),usage_bucket:this.getThreadsUsageBucket(),expiry_bucket:this.getThreadsExpiryBucket(),group_key:"threads",leaf_key:"threads"}}getThreadsCtaTelemetryProps(e,t){let i=(0,p.BZ)();return{...this.getThreadsTelemetryProps(),cta:e,cta_surface:t,posthog_distinct_id:i??void 0}}getMemoriesTelemetryProps(){return{posthog_distinct_id:(this.core?.telemetryDisabled?null:(0,p.BZ)())??void 0,memory_count:this._memories.length,available:this._memoriesAvailable}}getIntelligenceSignupUrl(){return this.appendRefParam(A,"cpk-inspector")}getTalkToEngineerUrl(){return this.appendRefParam(M,"cpk-inspector-threads")}getThreadsTalkToEngineerUrl(){return this.appendRefParam(M,"cpk-inspector-threads")}getThreadsDocsUrl(){return this.appendRefParam("https://docs.copilotkit.ai/threads","cpk-inspector-threads")}getThreadsRuntimeSetupDocsUrl(){return this.appendRefParam(O,"cpk-inspector-threads")}getThreadsIntelligenceSignupUrl(){return this.appendRefParam(A,"cpk-inspector-threads")}getSelfHostedIntelligenceUrl(){return this.appendRefParam("https://docs.copilotkit.ai/premium/self-hosting","cpk-inspector-threads")}getThreadsEmptyOnboardingAction(){let e=this.inspectorMetadataProjection.plan?.code.trim().toLowerCase();return"team_self_hosted"===e||"team-self-hosted"===e?{href:this.getSelfHostedIntelligenceUrl(),label:"Explore self-hosted Intelligence"}:{href:this.getThreadsIntelligenceSignupUrl(),label:"Sign up for Intelligence"}}subscribeToThreadStore(e,t){let i,s,n;if(!this.areThreadEndpointsAvailable()||this._threadStoreSubscriptions.has(e))return;let a=this.threadCapabilityGeneration,r=t.select(v.$n).subscribe(t=>{a===this.threadCapabilityGeneration&&this.areThreadEndpointsAvailable()&&(this._threadsByAgent.set(e,t),this._threads=Array.from(this._threadsByAgent.values()).flat(),this.autoSelectLatestThread(),this.requestUpdate())}),o=t.select(e=>{let t=(0,v.x8)(e),a=(0,v._t)(e);return n&&i===t&&s===a?n:(i=t,s=a,n={error:t,isLoading:a})}).subscribe(({error:t,isLoading:i})=>{a===this.threadCapabilityGeneration&&this.areThreadEndpointsAvailable()&&(t?this._threadsErrorByAgent.set(e,t):this._threadsErrorByAgent.delete(e),this._threadsLoadingByAgent.set(e,i),this.requestUpdate())});if(this._threadStoreSubscriptions.set(e,()=>{r.unsubscribe(),o.unsubscribe()}),a!==this.threadCapabilityGeneration||!this.areThreadEndpointsAvailable())return;let l=t.getState();this._threadsByAgent.set(e,(0,v.$n)(l)),this._threadsLoadingByAgent.set(e,(0,v._t)(l));let d=(0,v.x8)(l);d?this._threadsErrorByAgent.set(e,d):this._threadsErrorByAgent.delete(e),this._threads=Array.from(this._threadsByAgent.values()).flat(),this.autoSelectLatestThread()}autoSelectLatestThread(){if(!this.areThreadEndpointsAvailable())return;let{displayThreads:e}=this.getActiveThreadsState(),t=this.selectedThreadId;if(null!==this.requestedThreadId){this.selectedThreadId=this.requestedThreadId,this.selectedRealThreadIsExplicit=!0,e.some(e=>
1985e.id===this.requestedThreadId)&&(this.requestedThreadId=null);return}if(null!==this.selectedLocalExampleThreadId&&t===this.selectedLocalExampleThreadId&&0===e.length){this.selectedRealThreadIsExplicit=!1;return}null!==this.selectedLocalExampleThreadId&&(this.exampleTourActive=!1),this.selectedLocalExampleThreadId=null;let i=this.selectedRealThreadIsExplicit?t:null,s=(0,c.W)({threads:e,selectedThreadId:i});this.selectedThreadId=s,this.selectedRealThreadIsExplicit=null!==i&&s===i}teardownThreadStoreSubscriptions(){for(let e of this._threadStoreSubscriptions.values())e();this._threadStoreSubscriptions.clear(),this._threadsByAgent.clear(),this._threadsErrorByAgent.clear(),this._threadsLoadingByAgent.clear(),this._threads=[]}ensureOwnedThreadStore(e){if(!this.areThreadEndpointsAvailable()||this._ownedThreadStores.has(e)||this.core?.getThreadStore(e))return;let t=this.core;if(!t?.runtimeUrl)return;let i=(0,v.x)({fetch:globalThis.fetch});i.start(),i.setContext({runtimeUrl:t.runtimeUrl,headers:{...t.headers},wsUrl:t.intelligence?.wsUrl,agentId:e}),this._ownedThreadStores.set(e,i),this.subscribeToThreadStore(e,i),t.registerThreadStore(e,i)}refreshOwnedThreadStore(e){if(!this.areThreadEndpointsAvailable())return;let t=this._ownedThreadStores.get(e);t&&t.refresh()}updateOwnedThreadStoreHeaders(e){if(!this.areThreadEndpointsAvailable())return;let t=this.core;if(t?.runtimeUrl)for(let[i,s]of this._ownedThreadStores)s.setContext({runtimeUrl:t.runtimeUrl,headers:{...e},wsUrl:t.intelligence?.wsUrl,agentId:i})}removeOwnedThreadStore(e){let t=this._ownedThreadStores.get(e);t&&(this._ownedThreadStores.delete(e),t.stop(),this.core?.getThreadStore(e)===t&&this.core.unregisterThreadStore(e))}teardownOwnedThreadStores(){let e=Array.from(this._ownedThreadStores);for(let[t,i]of(this._ownedThreadStores.clear(),e))i.stop(),this.core?.getThreadStore(t)===i&&this.core.unregisterThreadStore(t)}coreSupportsInspectorMetadata(e){try{return"inspectorMetadata"in e}catch{return!1}}readCoreInspectorMetadata(e){if(this.coreSupportsInspectorMetadata(e))try{return e.inspectorMetadata}catch{return}}updateInspectorMetadataProjection(e){let t;this.inspectorMetadataValue=e;try{t=this._core?.licenseStatus}catch{t=void 0}this.inspectorMetadataProjection=(0,d.s)(e,t)}attachToCore(e){this.runtimeStatus=e.runtimeConnectionStatus,this.coreProperties=e.properties,this.lastCoreError=null;let t=this.coreSupportsInspectorMetadata(e);this.updateInspectorMetadataProjection(this.readCoreInspectorMetadata(e)),this.coreSubscriber={onRuntimeConnectionStatusChanged:({status:t})=>{this.runtimeStatus=t,this.updateInspectorMetadataProjection(this.inspectorMetadataValue);let i=!0===this.threadCapabilityEnabled;if(this.synchronizeThreadCapability(),"connected"===t){if(e.telemetryDisabled||((0,p.D2)(),(0,p.fg)()),this.flushPendingBannerViewed(),i&&this.areThreadEndpointsAvailable())for(let e of this._ownedThreadStores.keys())this.refreshOwnedThreadStore(e)}else this._threadsByAgent.clear(),this._threads=[];this.requestUpdate()},onPropertiesChanged:({properties:e})=>{this.coreProperties=e,this.requestUpdate()},onHeadersChanged:({headers:e})=>{this.updateOwnedThreadStoreHeaders(e),this.requestUpdate()},...t?{onInspectorMetadataChanged:({inspectorMetadata:t})=>{this._core===e&&(this.updateInspectorMetadataProjection(t),this.requestUpdate())}}:{},onError:({code:e,error:t})=>{this.lastCoreError={code:e,message:t.message},this.requestUpdate()},onAgentsChanged:({agents:e})=>{this.processAgentsChanged(e)},onAgentRunStarted:({agent:e})=>{e?.agentId&&this.subscribeToAgent(e)},onContextChanged:({context:e})=>{this.contextStore=this.normalizeContextStore(e),this.requestUpdate()},onThreadStoreRegistered:({agentId:e,store:t})=>{this.areThreadEndpointsAvailable()&&(this.subscribeToThreadStore(e,t),this.requestUpdate())},onThreadStoreUnregistered:({agentId:e,prevStore:t})=>{let i=this._threadStoreSubscriptions.get(e);i&&(i(),this._threadStoreSubscriptions.delete(e)),this._ownedThreadStores.get(e)===t&&(this._ownedThreadStores.delete(e),t.stop()),this._threadsByAgent.delete(e),this._threadsErrorByAgent.delete(e),this._threadsLoadingByAgent.delete(e),this._threads=Array.from(this._threadsByAgent.values()).flat(),this.autoSelectLatestThread(),this.requestUpdate()}},this.coreUnsubscribe=e.subscribe(this.coreSubscriber).unsubscribe,this.processAgentsChanged(e.agents),"connected"===e.runtimeConnectionStatus&&(e.telemetryDisabled||((0,p.D2)(),(0,p.fg)()),this.flushPendingBannerViewed());let i="function"==typeof e.getThreadStores?e.getThreadStores():{};if(this.areThreadEndpointsAvailable())for(let[e,t]of Object.entries(i))this.subscribeToThreadStore(e,t);e.context&&(this.contextStore=this.normalizeContextStore(e.context)),"memories"===this.selectedMenu&&this.ensureMemorySubscription()}ensureMemorySubscription(){if(this._memorySubscribed)return;let e=this._core;if(!e)return;if("function"!=typeof e.getMemoryStore){this._memoryStoreUnsupported=!0,this._memoriesAvailable=!1,this.requestUpdate();return}this._memorySubscribed=!0,this._memoryStoreUnsupported=!1;let t=e.getMemoryStore(),i=t.getState();this._memories=(0,v.R5)(i),this._memoriesLoading=(0,v.DP)(i),this._memoriesError=(0,v.H8)(i),this._memoriesAvailable=(0,v.CF)(i),this._memoriesRealtimeStatus=(0,v.qS)(i);let s=[t.select(v.R5).subscribe(e=>{this._memories=e,this.requestUpdate()}),t.select(v.DP).subscribe(e=>{this._memoriesLoading=e,this.requestUpdate()}),t.select(v.H8).subscribe(e=>{this._memoriesError=e,this.requestUpdate()}),t.select(v.CF).subscribe(e=>{this._memoriesAvailable=e,this.requestUpdate()}),t.select(v.qS).subscribe(e=>{this._memoriesRealtimeStatus=e,this.requestUpdate()})];this._memoryUnsub=()=>
1985s.forEach(e=>e.unsubscribe()),this.requestUpdate()}runRecall(e){let t=e.trim();if(0===t.length)return;let i=this._core?.getMemoryStore?.();if(!i||"function"!=typeof i.recall){this._recallResults=[],this._recallError="Recall is not supported by this SDK version.",this._recallLoading=!1,this.requestUpdate();return}let s=++this._recallSeq;this._recallLoading=!0,this._recallError=null,this.requestUpdate(),i.recall(t).then(e=>{s===this._recallSeq&&(this._recallResults=e,this._recallError=null,this._recallLoading=!1,this.requestUpdate())}).catch(e=>{s===this._recallSeq&&(this._recallResults=[],this._recallError=e instanceof Error?e.message:"unknown error",this._recallLoading=!1,this.requestUpdate())})}clearRecall(){this._recallSeq+=1,this._recallResults=null,this._recallError=null,this._recallLoading=!1,this._recallQuery="",this.requestUpdate()}detachFromCore(){this.threadCapabilityGeneration+=1,this.threadCapabilityEnabled=null,this.selectedThreadId!==this.selectedLocalExampleThreadId&&(this.selectedThreadId=null,this.selectedLocalExampleThreadId=null),this.selectedRealThreadIsExplicit=!1,this.coreUnsubscribe&&(this.coreUnsubscribe(),this.coreUnsubscribe=null),this._memoryUnsub?.(),this._memoryUnsub=null,this._memories=[],this._memoriesLoading=!1,this._memoriesError=null,this._memoriesAvailable=!0,this._memoriesRealtimeStatus="connecting",this._memorySubscribed=!1,this._memoryStoreUnsupported=!1,this._recallSeq+=1,this._recallResults=null,this._recallLoading=!1,this._recallError=null,this._recallQuery="",this.coreSubscriber=null,this.runtimeStatus=null,this.inspectorMetadataValue=void 0,this.inspectorMetadataProjection=(0,d.s)(void 0,void 0),this.metadataTelemetryFingerprints.clear(),this.lastCoreError=null,this.coreProperties={},this.cachedTools=[],this.toolSignature="",this.teardownAgentSubscriptions(),this.teardownThreadStoreSubscriptions(),this.teardownOwnedThreadStores()}teardownAgentSubscriptions(){for(let e of this.agentSubscriptions.values())e();this.agentSubscriptions.clear(),this.agentEvents.clear(),this.agentMessages.clear(),this.agentStates.clear(),this.flattenedEvents=[],this.eventCounter=0}processAgentsChanged(e){this.synchronizeThreadCapability();let t=new Set;for(let i of Object.values(e))i?.agentId&&(t.add(i.agentId),this.subscribeToAgent(i),this.ensureOwnedThreadStore(i.agentId));for(let e of Array.from(this.agentSubscriptions.keys()))t.has(e)||(this.unsubscribeFromAgent(e),this.agentEvents.delete(e),this.agentMessages.delete(e),this.agentStates.delete(e));this.updateContextOptions(t),this.refreshToolsSnapshot(),this.requestUpdate()}refreshToolsSnapshot(){if(!this._core){this.cachedTools.length>0&&(this.cachedTools=[],this.toolSignature="",this.requestUpdate());return}let e=this.extractToolsFromAgents(),t=JSON.stringify(e.map(e=>({agentId:e.agentId,name:e.name,type:e.type,hasDescription:!!e.description,hasParameters:!!e.parameters})));t!==this.toolSignature&&(this.toolSignature=t,this.cachedTools=e,this.requestUpdate())}tryAutoAttachCore(){if(this.attemptedAutoAttach||this._core||!this.autoAttachCore||"undefined"==typeof window)return;this.attemptedAutoAttach=!0;let e=window,t=[e.__COPILOTKIT_CORE__,e.copilotkit?.core,e.copilotkitCore].find(e=>!!e&&"object"==typeof e);t&&(this.core=t)}subscribeToAgent(e){if(!e.agentId)return;let t=e.agentId;this.unsubscribeFromAgent(t);let{unsubscribe:i}=e.subscribe({onRunStartedEvent:({event:e})=>{this.recordAgentEvent(t,"RUN_STARTED",e)},onRunFinishedEvent:e=>{this.recordAgentEvent(t,"RUN_FINISHED",{event:e.event,result:"result"in e?e.result:void 0}),this.areThreadEndpointsAvailable()&&this.refreshOwnedThreadStore(t)},onRunErrorEvent:({event:e})=>{this.recordAgentEvent(t,"RUN_ERROR",e)},onStepStartedEvent:({event:e})=>{this.recordAgentEvent(t,"STEP_STARTED",e)},onStepFinishedEvent:({event:e})=>{this.recordAgentEvent(t,"STEP_FINISHED",e)},onTextMessageStartEvent:({event:e})=>{this.recordAgentEvent(t,"TEXT_MESSAGE_START",e)},onTextMessageContentEvent:({event:e,textMessageBuffer:i})=>{this.recordAgentEvent(t,"TEXT_MESSAGE_CONTENT",{event:e,textMessageBuffer:i})},onTextMessageEndEvent:({event:e,textMessageBuffer:i})=>{this.recordAgentEvent(t,"TEXT_MESSAGE_END",{event:e,textMessageBuffer:i})},onToolCallStartEvent:({event:e})=>{this.recordAgentEvent(t,"TOOL_CALL_START",e)},onToolCallArgsEvent:({event:e,toolCallBuffer:i,toolCallName:s,partialToolCallArgs:n})=>{this.recordAgentEvent(t,"TOOL_CALL_ARGS",{event:e,toolCallBuffer:i,toolCallName:s,partialToolCallArgs:n})},onToolCallEndEvent:({event:e,toolCallArgs:i,toolCallName:s})=>{this.recordAgentEvent(t,"TOOL_CALL_END",{event:e,toolCallArgs:i,toolCallName:s})},onToolCallResultEvent:({event:e})=>{this.recordAgentEvent(t,"TOOL_CALL_RESULT",e)},onStateSnapshotEvent:({event:i})=>{this.recordAgentEvent(t,"STATE_SNAPSHOT",i),this.syncAgentState(e)},onStateDeltaEvent:({event:i})=>{this.recordAgentEvent(t,"STATE_DELTA",i),this.syncAgentState(e)},onMessagesSnapshotEvent:({event:i})=>{this.recordAgentEvent(t,"MESSAGES_SNAPSHOT",i),this.syncAgentMessages(e)},onMessagesChanged:()=>{this.syncAgentMessages(e)},onStateChanged:()=>{this.syncAgentState(e)},onRawEvent:({event:e})=>{this.recordAgentEvent(t,"RAW_EVENT",e)},onCustomEvent:({event:e})=>{this.recordAgentEvent(t,"CUSTOM_EVENT",e)},onReasoningStartEvent:({event:e})=>{this.recordAgentEvent(t,"REASONING_START",e)},onReasoningMessageStartEvent:({event:e})=>{this.recordAgentEvent(t,"REASONING_MESSAGE_START",e)},onReasoningMessageContentEvent:({event:e,reasoningMessageBuffer:i})=>{this.recordAgentEvent(t,"REASONING_MESSAGE_CONTENT",{event:e,reasoningMessageBuffer:i})},onReasoningMessageEndEvent:({event:e,reasoningMessageBuffer:i})=>{this.recordAgentEvent(t,"REASONING_MESSAGE_END",{event:e,reasoningMessageBuffer:i})},onReasoningEndEvent:({event:e})=>{this.recordAgentEvent(t,"REASONING_END",e)},onReasoningEncryptedValueEvent:({event:e})=>{this.recordAgentEvent(t,"REASONING_ENCRYPTED_VALUE",e)},onActivitySnapshotEvent:({event:i})=>{this.recordAgentEvent(t,"ACTIVITY_SNAPSHOT",i),this.syncAgentMessages(e)},onActivityDeltaEvent:({event:i})=>{this.recordAgentEvent(t,"ACTIVITY_DELTA",i),this.syncAgentMessages(e)}});this.agentSubscriptions.set(t,i),this.syncAgentMessages(e),this.syncAgentState(e),this.agentEvents.has(t)||this.agentEvents.set(t,[])}unsubscribeFromAgent(e){let t=this.agentSubscriptions.get(e);t&&(t(),this.agentSubscriptions.delete(e))}mapMessagesToConversation(e){return e?e.filter(e=>"user"===e.role||"assistant"===e.role||"activity"===e.role).map((e,t)=>({id:e.id??`msg-${t}`,type:"user"===e.role?"user":"activity"===e.role?"generative-ui":"assistant",content:"activity"===e.role?e.activityType??"unknown":e.contentText,createdAt:""})):null}recordAgentEvent(e,t,i){let s=`${e}:${++this.eventCounter}`,n=this.normalizeEventPayload(t,i),a={id:s,agentId:e,type:t,timestamp:Date.now(),payload:n},r=[a,...this.agentEvents.get(e)??[]].slice(0,200);this.agentEvents.set(e,r),this.flattenedEvents=[a,...this.flattenedEvents].slice(0,500),this.refreshToolsSnapsh
1985ot(),this.requestUpdate()}syncAgentMessages(e){if(e?.agentId)try{let t=this.normalizeAgentMessages(e.messages);t?this.agentMessages.set(e.agentId,t):this.agentMessages.delete(e.agentId);let i=e.threadId;i&&this.liveMessageVersion.set(i,(this.liveMessageVersion.get(i)??0)+1),this.requestUpdate()}catch(t){console.error(`[CopilotKit Inspector] Failed to sync messages for agent "${e.agentId}":`,t)}}syncAgentState(e){if(e?.agentId)try{let t=e.state;null==t?this.agentStates.delete(e.agentId):this.agentStates.set(e.agentId,this.sanitizeForLogging(t)),this.requestUpdate()}catch(t){console.error(`[CopilotKit Inspector] Failed to sync state for agent "${e.agentId}":`,t)}}updateContextOptions(e){let t=!1,i=[{key:"all-agents",label:"All Agents"},...Array.from(e).sort((e,t)=>e.localeCompare(t)).map(e=>({key:e,label:e}))];(this.contextOptions.length!==i.length||this.contextOptions.some((e,t)=>e.key!==i[t]?.key))&&(this.contextOptions=i);let s=this.pendingSelectedContext;if(s&&(("all-agents"===s||e.has(s))&&("all-agents"===s||1===e.size)?(this.selectedContext!==s&&(this.selectedContext=s,t=!0,this.expandedRows.clear()),this.pendingSelectedContext=null):e.size>0&&("all-agents"!==this.selectedContext&&(this.selectedContext="all-agents",t=!0,this.expandedRows.clear()),this.pendingSelectedContext=null)),!i.some(e=>e.key===this.selectedContext)&&null===this.pendingSelectedContext){let i="all-agents";1===e.size&&(i=Array.from(e)[0]),this.selectedContext!==i&&(this.selectedContext=i,t=!0,this.expandedRows.clear(),this.persistState())}t&&this.autoSelectLatestThread()}getEventsForSelectedContext(){return"all-agents"===this.selectedContext?this.flattenedEvents:this.agentEvents.get(this.selectedContext)??[]}focusThread(e){if(!e.threadId)return;this.pendingPersistedMenu=null,this.selectedMenu="threads",this.settingsOpen=!1,this.lastSelectedMenuByGroup.threads="threads",this.contextMenuOpen=!1,this.selectedLocalExampleThreadId=null,this.exampleTourActive=!1,this.selectedContext=e.agentId&&this.contextOptions.some(t=>t.key===e.agentId)?e.agentId:"all-agents",this.requestedThreadId=e.threadId,this.selectedThreadId=e.threadId,this.selectedRealThreadIsExplicit=!0,this.focusedThreadMessageId=e.messageId??null,this.threadFocusRequestId+=1;let{displayThreads:t}=this.getActiveThreadsState();t.some(t=>t.id===e.threadId)&&(this.requestedThreadId=null),this.persistState(),this.requestUpdate()}filterEvents(e){let t=this.eventFilterText.trim().toLowerCase();return e.filter(e=>{if("all"!==this.eventTypeFilter&&e.type!==this.eventTypeFilter)return!1;if(!t)return!0;let i=this.stringifyPayload(e.payload,!1).toLowerCase();return e.type.toLowerCase().includes(t)||e.agentId.toLowerCase().includes(t)||i.includes(t)})}getLatestStateForAgent(e){if(this.agentStates.has(e)){let t=this.agentStates.get(e);return void 0===t?null:t}let t=(this.agentEvents.get(e)??[]).find(e=>"STATE_SNAPSHOT"===e.type);return t?t.payload:null}getLatestMessagesForAgent(e){return this.agentMessages.get(e)??null}getAgentStatus(e){let t=this.agentEvents.get(e)??[];if(0===t.length)return"idle";let i=t.find(e=>"RUN_STARTED"===e.type||"RUN_FINISHED"===e.type||"RUN_ERROR"===e.type);return i?"RUN_ERROR"===i.type?"error":"RUN_STARTED"===i.type?t.find(e=>"RUN_FINISHED"===e.type&&e.timestamp>i.timestamp)?"idle":"running":"idle":"idle"}getAgentStats(e){let t=this.agentEvents.get(e)??[],i=this.agentMessages.get(e),s=i?i.reduce((e,t)=>e+(t.toolCalls?.length??0),0):t.filter(e=>"TOOL_CALL_END"===e.type).length,n=i?.length??0;return{totalEvents:t.length,lastActivity:t[0]?.timestamp??null,messages:n,toolCalls:s,errors:t.filter(e=>"RUN_ERROR"===e.type).length}}renderToolCallDetails(e){return Array.isArray(e)&&0!==e.length?(0,h.qy)` 1986 <div class="mt-2 space-y-2"> 1987 ${e.map((e,t)=>{let i=e.function?.name??e.toolName??"Unknown function",s="string"==typeof e?.id?e.id:`tool-call-${t+1}`,n=this.formatToolCallArguments(e.function?.arguments);return(0,h.qy)` 1988 <div 1989 class="rounded-md border border-gray-200 bg-gray-50 p-3 text-xs text-gray-700" 1990 > 1991 <div 1992 class="flex flex-wrap items-center justify-between gap-1 font-medium text-gray-900" 1993 >
1994 <span>${i}</span> 1995 <span class="text-[10px] text-gray-500">ID: ${s}</span> 1996 </div> 1997 ${n?(0,h.qy)`<pre 1998 class="mt-2 overflow-auto rounded bg-white p-2 text-[11px] leading-relaxed text-gray-800" 1999 > 2000${n}</pre 2001 >`:h.s6} 2002 </div> 2003 `})} 2004 </div> 2005 `:h.s6}formatToolCallArguments(e){if(null==e||""===e)return null;if("string"==typeof e)try{let t=JSON.parse(e);return JSON.stringify(t,null,2)}catch{return e}if("object"==typeof e)try{return JSON.stringify(e,null,2)}catch{}return String(e)}hasRenderableState(e){if(null==e)return!1;if(Array.isArray(e))return e.length>0;if("object"==typeof e)return Object.keys(e).length>0;if("string"==typeof e){let t=e.trim();return t.length>0&&"{}"!==t}return!0}formatStateForDisplay(e){if(null==e)return"";if("string"==typeof e){let t=e.trim();if(0===t.length)return"";try{let e=JSON.parse(t);return JSON.stringify(e,null,2)}catch{return e}}if("object"==typeof e)try{return JSON.stringify(e,null,2)}catch{}return String(e)}getEventBadgeClasses(e){let t="font-mono text-[10px] font-medium inline-flex items-center rounded-sm px-1.5 py-0.5 border";return"RUN_ERROR"===e?`${t} bg-rose-50 text-rose-700 border-rose-200`:e.startsWith("RUN_")?`${t} bg-blue-50 text-blue-700 border-blue-200`:e.startsWith("TEXT_MESSAGE")?`${t} bg-emerald-50 text-emerald-700 border-emerald-200`:e.startsWith("TOOL_CALL")?`${t} bg-amber-50 text-amber-700 border-amber-200`:e.startsWith("REASONING")?`${t} bg-fuchsia-50 text-fuchsia-700 border-fuchsia-200`:e.startsWith("STATE")?`${t} bg-violet-50 text-violet-700 border-violet-200`:e.startsWith("MESSAGES")?`${t} bg-sky-50 text-sky-700 border-sky-200`:`${t} bg-gray-100 text-gray-600 border-gray-200`}stringifyPayload(e,t){try{if(void 0===e)return"undefined";if("string"==typeof e)return e;return JSON.stringify(e,null,2*!!t)??""}catch(t){return console.warn("Failed to stringify inspector payload",t),String(e)}}extractEventFromPayload(e){return e&&"object"==typeof e&&"event"in e?e.event:e}getClipboard(e){if(this.isPoppedOut){let e=this.popOut?.win.navigator.clipboard;if(e)return e}let t=(e&&"view"in e?e.view:null)?.navigator.clipboard;return t||("undefined"!=typeof navigator&&"clipboard"in navigator?navigator.clipboard:void 0)}async copyToClipboard(e,t,i){let s=this.getClipboard(i);if(!s)return void console.error("Failed to copy to clipboard:","Clipboard API is not available");try{await s.writeText(e),this.copiedEvents.add(t),this.requestUpdate(),setTimeout(()=>{this.copiedEvents.delete(t),this.requestUpdate()},2e3)}catch(e){console.error("Failed to copy to clipboard:",e)}}static{this.styles=[(0,h.iz)(s.A),(0,h.AH)` 2006 :host { 2007 position: fixed; 2008 top: 0; 2009 left: 0; 2010 z-index: 2147483646; 2011 display: block; 2012 will-change: transform; 2013 font-family: "Plus Jakarta Sans", system-ui, sans-serif; 2014 } 2015 2016 :host([data-transitioning="true"]) { 2017 transition: transform 300ms ease; 2018 } 2019 2020 .console-button-wrapper { 2021 position: relative; 2022 display: inline-flex; 2023 } 2024 2025 .console-button { 2026 transition: 2027 transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), 2028 opacity 160ms ease; 2029 } 2030 2031 .console-button[data-dragging="true"] { 2032 transition: opacity 160ms ease; 2033 } 2034 2035 .inspector-window[data-transitioning="true"] { 2036 transition: 2037 width 300ms ease, 2038 height 300ms ease; 2039 } 2040 2041 .inspector-window[data-docked="true"] { 2042 border-radius: 0 !important; 2043 box-shadow: none !important; 2044 } 2045 2046 .resize-handle { 2047 touch-action: none; 2048 user-select: none; 2049 } 2050 2051 .dock-resize-handle { 2052 position: absolute; 2053 top: 0; 2054 right: 0; 2055 width: 10px; 2056 height: 100%; 2057 cursor: ew-resize; 2058 touch-action: none; 2059 z-index: 50; 2060 background: transparent; 2061 } 2062 2063 .tooltip-target { 2064 position: relative; 2065 } 2066 2067 .tooltip-target::after { 2068 content: attr(data-tooltip); 2069 position: absolute; 2070 top: calc(100% + 6px); 2071 left: 50%; 2072 transform: translateX(-50%) translateY(-4px); 2073 white-space: nowrap; 2074 background: rgba(1, 5, 7, 0.95); 2075 color: white; 2076 padding: 4px 8px; 2077 border-radius: 6px; 2078 font-size: 10px; 2079 font-family: "Plus Jakarta Sans", system-ui, sans-serif; 2080 line-height: 1.2; 2081 box-shadow: 0 4px 10px rgba(1, 5, 7, 0.18); 2082 opacity: 0; 2083 pointer-events: none; 2084 transition: 2085 opacity 120ms ease, 2086 transform 120ms ease; 2087 z-index: 4000; 2088 } 2089 2090 .tooltip-target:hover::after { 2091 opacity: 1; 2092 transform: translateX(-50%) translateY(0); 2093 } 2094 2095 .announcement-preview { 2096 position: absolute; 2097 top: 50%; 2098 transform: translateY(-50%); 2099 min-width: 300px; 2100 max-width: 300px; 2101 background: white; 2102 color: #010507; 2103 font-size: 13px; 2104 font-family: "Plus Jakarta Sans", system-ui, sans-serif; 2105 line-height: 1.4; 2106 border-radius: 12px; 2107 box-shadow: 0 12px 28px rgba(1, 5, 7, 0.12); 2108 padding: 10px 12px; 2109 display: inline-flex; 2110 align-items: flex-start; 2111 gap: 8px; 2112 z-index: 4500; 2113 animation: fade-slide-in 160ms ease; 2114 border: 1px solid rgba(219, 219, 229, 0.4); 2115 white-space: normal; 2116 word-break: break-word; 2117 text-align: left; 2118 } 2119 2120 .announcement-preview[data-side="left"] { 2121 right: 100%; 2122 margin-right: 10px; 2123 } 2124 2125 .announcement-preview[data-side="right"] { 2126 left: 100%; 2127 margin-left: 10px; 2128 } 2129 2130 .announcement-preview__arrow { 2131 position: absolute; 2132 width: 10px; 2133 height: 10px; 2134 background: white; 2135 border: 1px solid rgba(219, 219, 229, 0.4); 2136 transform: rotate(45deg); 2137 top: 50%; 2138 margin-top: -5px; 2139 z-index: -1; 2140 } 2141 2142 .announcement-preview[data-side="left"] .announcement-preview__arrow { 2143 right: -5px; 2144 box-shadow: 6px -6px 10px rgba(1, 5, 7, 0.08); 2145 } 2146 2147 .announcement-preview[data-side="right"] .announcement-preview__arrow { 2148 left: -5px; 2149 box-shadow: -6px 6px 10px rgba(1, 5, 7, 0.08); 2150 } 2151 2152 .announcement-preview__dismiss { 2153 flex: none;
2154 margin-top: -1px; 2155 width: 20px; 2156 height: 20px; 2157 padding: 0; 2158 appearance: none; 2159 background: none; 2160 border: 0; 2161 display: inline-flex; 2162 align-items: center; 2163 justify-content: center; 2164 border-radius: 6px; 2165 color: #68686e; 2166 cursor: pointer; 2167 transition: 2168 background 120ms ease, 2169 color 120ms ease; 2170 } 2171 2172 .announcement-preview__dismiss:hover { 2173 background: rgba(0, 0, 0, 0.06); 2174 color: #010507; 2175 } 2176 2177 .announcement-preview__dismiss:focus-visible { 2178 outline: 2px solid #bec2ff; 2179 outline-offset: 1px; 2180 } 2181 2182 .announcement-dismiss { 2183 background: none; 2184 border: none; 2185 cursor: pointer; 2186 color: #68686e; 2187 width: 28px; 2188 height: 28px; 2189 display: flex; 2190 align-items: center; 2191 justify-content: center; 2192 border-radius: 6px; 2193 padding: 0; 2194 transition: 2195 background 120ms ease, 2196 color 120ms ease; 2197 } 2198 2199 .announcement-dismiss:hover { 2200 background: rgba(0, 0, 0, 0.06); 2201 color: #010507; 2202 } 2203 2204 /* ââ Agent tab section cards âââââââââââââââââââââââââââââââââââââââ */ 2205 .cpk-section-card { 2206 border-radius: 8px; 2207 background: #ffffff; 2208 overflow: hidden; 2209 } 2210 2211 /* ââ Agent icon bubble âââââââââââââââââââââââââââââââââââââââââââââ */ 2212 .cpk-agent-icon { 2213 background-color: #f0f0f4 !important; 2214 color: #57575b !important; 2215 } 2216 2217 /* ââ Agent stat cards ââââââââââââââââââââââââââââââââââââââââââââââ */ 2218 .cpk-stat-card { 2219 background-color: #ffffff !important; 2220 border: 1px solid #dbdbe5 !important; 2221 } 2222 button.cpk-stat-card:hover { 2223 background-color: #f7f7f9 !important; 2224 } 2225 2226 /* ââ Circle chevron (Frontend Tools + Context) ââââââââââââââââââââ */ 2227 .cpk-chevron-circle { 2228 display: inline-flex; 2229 align-items: center; 2230 justify-content: center; 2231 width: 24px; 2232 height: 24px; 2233 border-radius: 50%; 2234 background-color: #f0f0f4; 2235 color: #68686e; 2236 flex-shrink: 0; 2237 transition: transform 0.2s; 2238 } 2239 .cpk-chevron-circle svg { 2240 width: 14px !important; 2241 height: 14px !important; 2242 } 2243 .cpk-chevron-circle--open { 2244 transform: rotate(180deg); 2245 } 2246 2247 /* ââ Inline copy button âââââââââââââââââââââââââââââââââââââââââââ */ 2248 .cpk-copy-btn { 2249 font-size: 10px; 2250 font-weight: 500; 2251 color: #57575b; 2252 background: #ffffff; 2253 border: 1px solid #dbdbe5; 2254 cursor: pointer; 2255 padding: 2px 8px; 2256 border-radius: 4px; 2257 flex-shrink: 0; 2258 transition: 2259 background-color 0.15s, 2260 border-color 0.15s; 2261 } 2262 .cpk-copy-btn:hover { 2263 background-color: #f0f0f4; 2264 border-color: #afafb7; 2265 } 2266 2267 .cpk-section-header { 2268 background: #e8edf5; 2269 border-bottom: 1px solid rgba(0, 0, 0, 0.08); 2270 padding: 10px 16px; 2271 } 2272 .cpk-section-header h4 { 2273 font-size: 11px; 2274 font-weight: 600; 2275 color: #181c1f; 2276 margin: 0; 2277 } 2278 2279 /* Inputs/selects inside the lavender header need an explicit white bg */ 2280 .cpk-section-header input, 2281 .cpk-section-header select { 2282 background-color: #ffffff !important; 2283 box-shadow: none !important; 2284 } 2285 .cpk-section-header select { 2286 padding-right: 24px !important; 2287 } 2288 /* Events table column headers */ 2289 table thead th { 2290 font-weight: 600 !important; 2291 } 2292 2293 .announcement-content { 2294 color: #1f2230; 2295 font-size: 13px; 2296 font-family: "Plus Jakarta Sans", system-ui, sans-serif; 2297 line-height: 1.55; 2298 } 2299 2300 .announcement-content h1, 2301 .announcement-content h2, 2302 .announcement-content h3 { 2303 color: #010507; 2304 font-weight: 700; 2305 line-height: 1.3; 2306 margin: 0.9rem 0 0.4rem; 2307 } 2308 .announcement-content > h1:first-child, 2309 .announcement-content > h2:first-child, 2310 .announcement-content > h3:first-child { 2311 margin-top: 0; 2312 } 2313 2314 .announcement-content h1 { 2315 font-size: 1.15rem; 2316 letter-spacing: -0.01em; 2317 } 2318 .announcement-content h2 { 2319 font-size: 1rem; 2320 } 2321 .announcement-content h3 { 2322 font-size: 0.9rem; 2323 text-transform: none; 2324 } 2325 2326 .announcement-content p { 2327 margin: 0.45rem 0; 2328 } 2329 2330 .announcement-content strong { 2331 color: #010507; 2332 font-weight: 700; 2333 } 2334 2335 .announcement-content ul { 2336 list-style: disc; 2337 padding-left: 1.25rem; 2338 margin: 0.45rem 0; 2339 } 2340 2341 .announcement-content ol { 2342 list-style: decimal; 2343 padding-left: 1.25rem; 2344 margin: 0.45rem 0; 2345 } 2346 2347 .announcement-content li + li { 2348 margin-top: 0.15rem; 2349 } 2350 2351 .announcement-content a { 2352 color: #5558b2; 2353 text-decoration: underline; 2354 } 2355 2356 .announcement-content :not(pre) > code { 2357 background: #f3f3f7; 2358 border: 1px solid #e4e4ec; 2359 border-radius: 4px; 2360 padding: 1px 5px; 2361 font-size: 0.85em; 2362 color: #4a3a8a; 2363 } 2364 2365 .announcement-code { 2366 position: relative; 2367 margin: 0.6rem 0; 2368 } 2369 2370 .announcement-code pre { 2371 background: #0f1117; 2372 color: #e6e8f2; 2373 border-radius: 8px; 2374 padding: 10px 12px; 2375 overflow-x: auto; 2376 font-size: 12px; 2377 line-height: 1.5; 2378 white-space: pre; 2379 } 2380 2381 .announcement-code pre code::after { 2382 content: ""; 2383 display: inline-block; 2384 width: 80px; 2385 } 2386 2387 .announcement-code__copy-shield { 2388 position: absolute; 2389 top: 4px; 2390 right: 4px; 2391 padding: 4px 4px 4px 24px; 2392 border-top-right-radius: 8px; 2393 background: linear-gradient( 2394 to right, 2395 rgba(15, 17, 23, 0) 0%, 2396 rgba(15, 17, 23, 0.95) 40%, 2397 #0f1117 100% 2398 ); 2399 pointer-events: none; 2400 } 2401 2402 .announcement-code pre code { 2403 background: transparent; 2404 border: none; 2405 padding: 0; 2406 color: inherit; 2407 font-size: inherit; 2408 } 2409 2410 .announcement-code pre::-webkit-scrollbar {
2411 height: 6px; 2412 } 2413 .announcement-code pre::-webkit-scrollbar-track { 2414 background: transparent; 2415 } 2416 .announcement-code pre::-webkit-scrollbar-thumb { 2417 background: rgba(255, 255, 255, 0.2); 2418 border-radius: 3px; 2419 } 2420 2421 .announcement-code__copy { 2422 position: relative; 2423 pointer-events: auto; 2424 padding: 3px 8px; 2425 font-family: "Plus Jakarta Sans", system-ui, sans-serif; 2426 font-size: 11px; 2427 font-weight: 600; 2428 color: #e6e8f2; 2429 background: #1f222d; 2430 border: 1px solid rgba(255, 255, 255, 0.15); 2431 border-radius: 5px; 2432 cursor: pointer; 2433 transition: 2434 background 0.12s ease, 2435 color 0.12s ease; 2436 } 2437 .announcement-code__copy:hover { 2438 background: #2a2e3c; 2439 } 2440 .announcement-code__copy[data-copied="true"] { 2441 background: #eee6fe; 2442 color: #6430ab; 2443 border-color: transparent; 2444 } 2445 2446 .announcement-body { 2447 position: relative; 2448 overflow: hidden; 2449 transition: max-height 0.25s ease; 2450 } 2451 .announcement-body--collapsed { 2452 max-height: 72px; 2453 } 2454 .announcement-body--expanded { 2455 max-height: 2000px; 2456 } 2457 .announcement-fade { 2458 position: absolute; 2459 bottom: 0; 2460 left: 0; 2461 right: 0; 2462 height: 48px; 2463 background: linear-gradient(to bottom, transparent, #ffffff); 2464 pointer-events: none; 2465 } 2466 .announcement-toggle { 2467 display: block; 2468 width: 100%; 2469 margin-top: 6px; 2470 padding: 0; 2471 background: none; 2472 border: none; 2473 font-family: "Plus Jakarta Sans", system-ui, sans-serif; 2474 font-size: 12px; 2475 font-weight: 500; 2476 color: #5558b2; 2477 cursor: pointer; 2478 text-align: center; 2479 } 2480 .announcement-toggle:hover { 2481 color: #6430ab; 2482 } 2483 2484 /* ââ Brand typography ââââââââââââââââââââââââââââââââââââââââââ */ 2485 /* Override Tailwind font-mono stack â Spline Sans Mono */ 2486 .font-mono, 2487 pre, 2488 code { 2489 font-family: "Spline Sans Mono", ui-monospace, "Cascadia Code", monospace; 2490 } 2491 2492 /* ââ Floating button âââââââââââââââââââââââââââââââââââââââââââ */ 2493 .console-button { 2494 background-color: rgba(1, 5, 7, 0.95) !important; 2495 border-color: rgba(190, 194, 255, 0.25) !important; 2496 box-shadow: 2497 0 0 0 1px rgba(190, 194, 255, 0.15), 2498 0 4px 14px rgba(1, 5, 7, 0.28) !important; 2499 } 2500 .console-button:hover { 2501 background-color: rgba(1, 5, 7, 1) !important; 2502 border-color: rgba(190, 194, 255, 0.45) !important; 2503 } 2504 .console-button:focus-visible { 2505 outline-color: #bec2ff !important; 2506 } 2507 2508 /* ââ Inspector window ââââââââââââââââââââââââââââââââââââââââââ */ 2509 .inspector-window { 2510 border-color: #dbdbe5 !important; 2511 box-shadow: 2512 0 8px 32px rgba(1, 5, 7, 0.1), 2513 0 2px 8px rgba(1, 5, 7, 0.06) !important; 2514 } 2515 2516 /* ââ Header drag area ââââââââââââââââââââââââââââââââââââââââââ */ 2517 .drag-handle { 2518 border-bottom-color: #dbdbe5 !important; 2519 /* Subtle pale lavender gradient â brand "light, spacious" surface */ 2520 background: linear-gradient(180deg, #f4f4fd 0%, #ffffff 100%) !important; 2521 } 2522 2523 /* Tab strip row: soft off-white, separated from content */ 2524 .drag-handle > div:last-child { 2525 border-top-color: #e2e2ea !important; 2526 background-color: #fafafc !important; 2527 } 2528 2529 /* ââ Tab buttons âââââââââââââââââââââââââââââââââââââââââââââââ */ 2530 /* 2531 * Named classes owned by this component â no Tailwind conflict. 2532 * Active: brand surface/surfaceContainerActive (lilac tint) + 2533 * border/borderActionEnabled underline. 2534 * Dark fill is for primary action buttons only, not nav tabs. 2535 */ 2536 .cpk-tab-active { 2537 background-color: rgba(190, 194, 255, 0.18); 2538 color: #010507; 2539 font-weight: 600; 2540 } 2541 .cpk-tab-icon { 2542 display: inline-flex; 2543 flex-shrink: 0; 2544 align-items: center; 2545 } 2546 .cpk-tab-active .cpk-tab-icon { 2547 color: #5558b2; 2548 } 2549 .cpk-tab-inactive { 2550 background-color: transparent; 2551 color: #2b2b2b; 2552 } 2553 .cpk-tab-inactive .cpk-tab-icon { 2554 color: #68686e; 2555 } 2556 .cpk-tab-inactive:hover { 2557 background-color: rgba(190, 194, 255, 0.08); 2558 color: #010507; 2559 cursor: pointer; 2560 } 2561 .cpk-tab-active { 2562 cursor: pointer; 2563 } 2564 .cpk-threads-overview-video-frame { 2565 position: relative; 2566 display: block; 2567 width: 100%; 2568 max-width: 440px; 2569 aspect-ratio: 16 / 9; 2570 margin: 0 0 14px; 2571 overflow: hidden; 2572 border: 1px solid #dbdbe5; 2573 border-radius: 8px; 2574 background: 2575 linear-gradient( 2576 135deg, 2577 rgba(190, 194, 255, 0.18), 2578 rgba(133, 236, 206, 0.12) 2579 ), 2580 #ffffff; 2581 box-shadow: 0 8px 20px rgba(1, 5, 7, 0.08); 2582 } 2583 .cpk-threads-overview-video { 2584 width: 100%; 2585 height: 100%; 2586 object-fit: cover; 2587 } 2588 2589 /* ââ Header controls on the dark account strip ââââââââââââââââ */ 2590 .drag-handle >
2590 div[data-inspector-account-strip] button { 2591 color: #afafb7 !important; 2592 cursor: pointer; 2593 } 2594 .drag-handle > div[data-inspector-account-strip] button, 2595 .inspector-nav-control, 2596 [data-inspector-thread-cta] { 2597 outline: 2px solid transparent; 2598 outline-offset: 2px; 2599 } 2600 .drag-handle > div[data-inspector-account-strip] button:hover { 2601 background-color: rgba(255, 255, 255, 0.12) !important; 2602 color: #ffffff !important; 2603 } 2604 .drag-handle > div[data-inspector-account-strip] button:focus-visible { 2605 outline-color: #bec2ff !important; 2606 } 2607 .drag-handle > div[data-inspector-account-strip] button:focus, 2608 .drag-handle > div[data-inspector-account-strip] button:focus-visible { 2609 outline: 2px solid #bec2ff !important; 2610 outline-offset: 2px; 2611 } 2612 .inspector-nav-control:focus, 2613 .inspector-nav-control:focus-visible, 2614 [data-inspector-thread-cta]:focus, 2615 [data-inspector-thread-cta]:focus-visible, 2616 [data-inspector-action-placement="threads-footer"]:focus, 2617 [data-inspector-action-placement="threads-footer"]:focus-visible { 2618 outline: 2px solid #6430ab !important; 2619 outline-offset: 2px; 2620 } 2621 2622 /* ââ Agent/context dropdown ââââââââââââââââââââââââââââââââââââ */ 2623 [data-context-dropdown-root="true"] > button { 2624 border-color: #dbdbe5 !important; 2625 color: #010507 !important; 2626 } 2627 [data-context-dropdown-root="true"] > button:hover { 2628 border-color: #bec2ff !important; 2629 background-color: #f7f7f9 !important; 2630 } 2631 [data-context-dropdown-root="true"] > button > span:last-child { 2632 color: #68686e !important; 2633 } 2634 [data-context-dropdown-root="true"] > div { 2635 border-color: #dbdbe5 !important; 2636 box-shadow: 0 4px 12px rgba(1, 5, 7, 0.08) !important; 2637 } 2638 [data-context-dropdown-root="true"] > div button:hover, 2639 [data-context-dropdown-root="true"] > div button:focus { 2640 background-color: #f7f7f9 !important; 2641 } 2642 [data-inspector-account-strip] 2643 .inspector-agent-selector 2644 > [data-context-dropdown-root="true"] 2645 > button { 2646 border-color: rgba(255, 255, 255, 0.28) !important; 2647 background-color: transparent !important; 2648 color: #e7e7ec !important; 2649 } 2650 [data-inspector-account-strip] 2651 .inspector-agent-selector 2652 > [data-context-dropdown-root="true"] 2653 > button:hover { 2654 border-color: rgba(190, 194, 255, 0.7) !important; 2655 background-color: rgba(255, 255, 255, 0.08) !important; 2656 } 2657 [data-inspector-account-strip] 2658 .inspector-agent-selector 2659 > [data-context-dropdown-root="true"] 2660 > button 2661 > span:last-child { 2662 color: #afafb7 !important; 2663 } 2664 2665 /* ââ Status bar (bottom chrome) ââââââââââââââââââââââââââââââââ */ 2666 .inspector-window > div > div:last-child { 2667 border-top-color: #dbdbe5 !important; 2668 background-color: #f7f7f9 !important; 2669 } 2670 2671 /* ââ Resize handle âââââââââââââââââââââââââââââââââââââââââââââ */ 2672 .resize-handle { 2673 color: #68686e !important; 2674 } 2675 .resize-handle:hover { 2676 color: #57575b !important; 2677 } 2678 2679 /* ââ AG-UI Events tab ââââââââââââââââââââââââââââââââââââââââââ */ 2680 /* Row hover: replace blue tint with brand lilac */ 2681 tr:hover td { 2682 background-color: rgba(190, 194, 255, 0.08) !important; 2683 } 2684 /* Reset/dark action button */ 2685 button[class*="bg-gray-900"] { 2686 background-color: #010507 !important; 2687 } 2688 button[class*="bg-gray-800"] { 2689 background-color: #2b2b2b !important; 2690 } 2691 /* Copy "copied" state: generic green â brand mint */ 2692 button[class*="bg-green-100"] { 2693 background-color: rgba(133, 236, 206, 0.2) !important; 2694 color: #087653 !important; 2695 } 2696 2697 /* ââ Agents tab ââââââââââââââââââââââââââââââââââââââââââââââââ */ 2698 /* Agent icon bubble: blue â lilac */ 2699 span[class*="bg-blue-100"]:not([class*="text-blue-800"]) { 2700 background-color: rgba(190, 194, 255, 0.15) !important; 2701 } 2702 span[class*="text-blue-600"] { 2703 color: #5558b2 !important; 2704 } 2705 /* Running badge: emerald â mint */ 2706 span[class*="bg-emerald-50"] { 2707 background-color: rgba(133, 236, 206, 0.15) !important; 2708 } 2709 span[class*="text-emerald-700"] { 2710 color: #087653 !important; 2711 } 2712 /* Running status dot */ 2713 span[class*="bg-emerald-500"] { 2714 background-color: #85ecce !important; 2715 } 2716 /* Idle dot */ 2717 span[class*="bg-gray-400"] { 2718 background-color: #afafb7 !important; 2719 } 2720 /* User role badge (blue â lilac) */ 2721 span[class*="bg-blue-100"][class*="text-blue-800"] { 2722 background-color: rgba(190, 194, 255, 0.22) !important; 2723 border: 1px solid rgba(190, 194, 255, 0.45) !important; 2724 color: #57575b !important; 2725 } 2726 /* Assistant role badge (green â mint) */ 2727 span[class*="bg-green-100"][class*="text-green-800"] { 2728 background-color: rgba(133, 236, 206, 0.18) !important; 2729 border: 1px solid rgba(133, 236, 206, 0.4) !important; 2730 color: #087653 !important; 2731 } 2732 /* Tool role badge (amber â orange brand) */ 2733 span[class*="bg-amber-100"][class*="text-amber-800"] { 2734 background-color: rgba(255, 172, 77, 0.15) !important; 2735 color: #57575b !important; 2736 } 2737 2738 /* ââ Frontend Tools tab ââââââââââââââââââââââââââââââââââââââââ */ 2739 /* Handler badge (blue â lilac) */ 2740 span[class*="bg-blue-50"][class*="text-blue-700"] { 2741 background-color: rgba(190, 194, 255, 0.12) !important; 2742 border-color: rgba(190, 194, 255, 0.3) !important; 2743 color: #010507 !important; 2744 } 2745 /* Renderer badge (purple â lilac-adjacent) */ 2746 span[class*="bg-purple-50"][class*="text-purple-700"] { 2747 background-color: rgba(190, 194, 255, 0.12) !important; 2748 border-color: rgba(190, 194, 255, 0.3) !important; 2749 color: #57575b !important; 2750 } 2751 /* Required badge (rose â brand red) */ 2752 span[class*="bg-rose-50"][class*="text-rose-700"] { 2753 background-color: rgba(250, 95, 103, 0.1) !important; 2754 border-color: rgba(250, 95, 103, 0.25) !important; 2755 color: #fa5f67 !important; 2756 } 2757 /* Code/default value blocks */ 2758 code[class*="bg-gray-100"], 2759 span[class*="bg-gray-100"] { 2760 background-color: #f0f0f4 !important; 2761 } 2762 2763 /* ââ Connected status bar: match threads header mint (#5BE4BB) ââââ */ 2764 /* Outer strip bg + top border + text when connected badge is present */ 2765 .inspector-window 2766 > div 2767 >
2767 div:last-child 2768 > div:last-child:has(div[class*="bg-emerald-50"]) { 2769 background-color: rgba(91, 228, 187, 0.08) !important; 2770 border-top-color: rgba(91, 228, 187, 0.3) !important; 2771 color: #087653 !important; 2772 } 2773 /* Inner badge â slightly more opaque on the mint bg */ 2774 div[class*="bg-emerald-50"][class*="border-emerald-200"] { 2775 background-color: rgba(91, 228, 187, 0.12) !important; 2776 border-color: rgba(91, 228, 187, 0.4) !important; 2777 color: #087653 !important; 2778 } 2779 div[class*="bg-emerald-50"][class*="border-emerald-200"] 2780 span[class*="opacity-80"] { 2781 opacity: 1 !important; 2782 } 2783 /* Icon bubble inside connected badge â mint tint */ 2784 div[class*="bg-emerald-50"] span[class*="bg-white"] { 2785 background-color: rgba(91, 228, 187, 0.3) !important; 2786 } 2787 2788 /* ââ Announcement panel ââââââââââââââââââââââââââââââââââââââââ */ 2789 div[class*="border-slate-200"][class*="bg-white"] { 2790 border-color: #dbdbe5 !important; 2791 } 2792 /* Announcement icon bubble: black â brand light lavender + lilac icon */ 2793 span[class*="bg-slate-900"], 2794 div[class*="bg-slate-900"] { 2795 background-color: #eee6fe !important; 2796 color: #5558b2 !important; 2797 } 2798 span[class*="text-slate-800"], 2799 div[class*="text-slate-800"] { 2800 color: #010507 !important; 2801 } 2802 `]}connectedCallback(){if(super.connectedCallback(),"undefined"!=typeof window){this.threadsExampleOverviewVideoReducedMotion=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches??!1,this.ensureBrandFonts(),window.addEventListener("resize",this.handleResize),window.addEventListener("pointerdown",this.handleGlobalPointerDown),window.addEventListener("beforeunload",this.handleAppBeforeUnload);let e=void 0;e&&e.on("vite:beforeUpdate",this.handleAppBeforeUnload),this.hydrateStateFromStorageEarly(),this.exampleTourDismissed=this.readThreadsExampleTourDismissed(),this.tryAutoAttachCore(),this.ensureAnnouncementLoading()}this.requestUpdate()}ensureBrandFonts(){(0,l.zD)(document)}disconnectedCallback(){for(let e of(super.disconnectedCallback(),this.closePopOut(),"undefined"!=typeof window&&(window.removeEventListener("resize",this.handleResize),window.removeEventListener("pointerdown",this.handleGlobalPointerDown),window.removeEventListener("beforeunload",this.handleAppBeforeUnload)),this.bodyTransitionTimeoutIds))clearTimeout(e);this.bodyTransitionTimeoutIds.clear(),null!==this.transitionTimeoutId&&(clearTimeout(this.transitionTimeoutId),this.transitionTimeoutId=null),this.threadsSetupPromptCopyGeneration+=1,null!==this.threadsSetupPromptCopyResetTimeoutId&&(window.clearTimeout(this.threadsSetupPromptCopyResetTimeoutId),this.threadsSetupPromptCopyResetTimeoutId=null),this.threadsSetupPromptCopyState="idle",this.cleanupThreadsExampleOverviewVideo(),this.removeDockStyles(!0),this.detachFromCore()}firstUpdated(){"undefined"!=typeof window&&(this._core||this.tryAutoAttachCore(),this.measureContext("button"),this.measureContext("window"),this.contextState.button.anchor={horizontal:"right",vertical:"top"},this.contextState.button.anchorOffset={x:16,y:16},this.contextState.window.anchor={horizontal:"right",vertical:"top"},this.contextState.window.anchorOffset={x:16,y:16},this.hydrateStateFromStorage(),this.contextState.window.size=this.clampWindowSize(this.contextState.window.size),"memories"===this.selectedMenu&&this.ensureMemorySubscription(),this.isOpen&&"floating"!==this.dockMode&&this.applyDockStyles(!0),this.applyAnchorPosition("button"),"floating"===this.dockMode&&(this.hasCustomPosition.window?this.applyAnchorPosition("window"):this.centerContext("window")),this.ensureAnnouncementLoading(),this.updateHostTransform(this.isOpen?"window":"button"))}render(){return this.isOpen?(0,h.qy)` 2803 <div data-inspector-portal-anchor></div> 2804 `:this.renderButton()}willUpdate(){this.reconcileSelectedMenuVisibility()}updated(){if(this.syncInspectorPortal(),this.syncThreadsExampleOverviewVideo(),this.maybeTrackInspectorMetadataViews(),!this.isOpen||"agents"!==this.selectedGroup){this.lastScrolledAgentNavigationLayout=null;return}let e=this.activeRoot.querySelector('nav[aria-label="Agent navigation"]');if(!e)return;let t=e.querySelector('[aria-current="page"]');if(!t)return;let i=[this.selectedMenu,this.dockMode,Math.round(this.contextState.window.size.width),"undefined"==typeof window?0:window.innerWidth,e.clientWidth,e.scrollWidth].join(":");this.lastScrolledAgentNavigationLayout!==i&&("function"==typeof t.scrollIntoView&&t.scrollIntoView({block:"nearest",inline:"nearest"}),this.lastScrolledAgentNavigationLayout=i)}renderButton(){return(0,h.qy)` 2805 <div class="console-button-wrapper"> 2806 <button 2807 class=${["console-button group relative pointer-events-auto inline-flex h-12 w-12 items-center justify-center rounded-full border border-white/20 bg-slate-950/95 text-xs font-medium text-white ring-1 ring-white/10 backdrop-blur-md transition hover:border-white/30 hover:bg-slate-900/95 hover:scale-105 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#BEC2FF] touch-none select-none",this.isDragging?"curs
2807or-grabbing":"cursor-grab"].join(" ")} 2808 type="button" 2809 aria-label="Web Inspector" 2810 data-drag-context="button" 2811 data-dragging=${this.isDragging&&"button"===this.pointerContext?"true":"false"} 2812 @pointerdown=${this.handlePointerDown} 2813 @pointermove=${this.handlePointerMove} 2814 @pointerup=${this.handlePointerUp} 2815 @pointercancel=${this.handlePointerCancel} 2816 @click=${this.handleButtonClick} 2817 > 2818 <img 2819 src=${a.A} 2820 alt="Inspector logo" 2821 class="h-5 w-auto" 2822 loading="lazy" 2823 /> 2824 </button> 2825 ${this.renderAnnouncementPreview()} 2826 </div> 2827 `}renderInspectorAction(e,t,i=e.label){return(0,h.qy)` 2828 <a 2829 data-inspector-action-placement=${t} 2830 data-inspector-action-intent=${("Upgrade Your Plan"===i?"upgrade":void 0)??h.s6} 2831 href=${e.url} 2832 target="_blank" 2833 rel="noopener noreferrer" 2834 aria-label="${i} (opens in a new tab)" 2835 style=${"threads-footer"===t?"":"display:inline-flex;min-height:34px;align-items:center;justify-content:center;gap:6px;border:1px solid #dbdbe5;border-radius:6px;background:#ffffff;padding:8px 12px;color:#57575b;font-size:12px;font-weight:600;text-decoration:none;outline-style:solid;outline-width:2px;outline-color:transparent;outline-offset:2px;cursor:pointer;"} 2836 @click=${()=>this.handleInspectorMetadataActionClick(e,t)} 2837 > 2838 ${i} 2839 </a> 2840 `}renderInspectorMetadataHeader(){let{identity:e,plan:t}=this.inspectorMetadataProjection;return e||t?(0,h.qy)` 2841 <div 2842 style="display:flex;min-width:0;flex:1 1 220px;flex-wrap:wrap;align-items:center;gap:6px 8px;" 2843 role="group" 2844 aria-label="Inspector account details" 2845 > 2846 ${e?(0,h.qy)` 2847 <div
2848 data-inspector-metadata="identity" 2849 style="display:flex;min-width:0;max-width:100%;align-items:center;gap:6px;color:#e7e7ec;font-size:11px;line-height:1.3;" 2850 title="${e.organizationName} / ${e.projectName}" 2851 > 2852 <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" 2853 >${e.organizationName}</span 2854 > 2855 <span aria-hidden="true" style="color:#68686e;">/</span> 2856 <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" 2857 >${e.projectName}</span 2858 > 2859 </div> 2860 `:h.s6} 2861 ${t?(0,h.qy)` 2862 <span 2863 data-inspector-metadata="plan" 2864 style="display:inline-flex;min-height:22px;align-items:center;border:1px solid rgba(133,236,206,0.5);border-radius:4px;background:rgba(133,236,206,0.14);padding:2px 7px;color:#85ecce;font-size:10px;font-weight:600;line-height:1.2;white-space:nowrap;" 2865 >${t.label}</span 2866 > 2867 `:h.s6} 2868 </div> 2869 `:h.s6}renderWindow(){let e=this.contextState.window,t="floating"!==this.dockMode,i=this.isPoppedOut,s=this.hasAttribute("data-transitioning"),a=t||i,r=i?{position:"fixed",inset:"0",width:"100%",height:"100%",minWidth:"0",minHeight:"0",borderRadius:"0",overflowX:"hidden"}:t?{...this.getDockedWindowStyles(),overflowX:"hidden"}:{width:`${Math.round(e.size.width)}px`,height:`${Math.round(e.size.height)}px`,minWidth:"600px",minHeight:"200px",overflowX:"hidden"},o=this.contextOptions.some(e=>"all-agents"!==e.key),l=o?this.renderContextDropdown():h.s6,d=this.getCoreStatusSummary(),c=o?l:(0,h.qy)` 2870 <div 2871 class="inspector-agent-placeholder flex items-center gap-2 rounded-md border border-dashed px-2 py-1 text-xs" 2872 > 2873 <span>${this.renderIcon("Bot")}</span> 2874 <span class="truncate">No agents available</span> 2875 </div> 2876 `;return(0,h.qy)` 2877 <section 2878 class="inspector-window pointer-events-auto relative flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white text-gray-900 shadow-lg" 2879 style=${(0,g.W)(r)} 2880 data-docked=${t} 2881 data-transitioning=${s} 2882 > 2883 ${t&&!i?(0,h.qy)` 2884 <div 2885 class="dock-resize-handle pointer-events-auto" 2886 role="presentation" 2887 aria-hidden="true" 2888 @pointerdown=${this.handleResizePointerDown} 2889 @pointermove=${this.handleResizePointerMove} 2890 @pointerup=${this.handleResizePointerUp} 2891 @pointercancel=${this.handleResizePointerCancel} 2892 ></div> 2893 `:h.s6} 2894 <div 2895 class="flex flex-1 flex-col overflow-hidden bg-white text-gray-800" 2896 > 2897 <div 2898 class="drag-handle relative z-30 flex flex-col border-b border-gray-200 bg-white/95 backdrop-blur-sm ${a?"":this.isDragging&&"window"===this.pointerContext?"cursor-grabbing":"cursor-grab"}" 2899 data-drag-context="window" 2900 @pointerdown=${a?void 0:this.handlePointerDown} 2901 @pointermove=${a?void 0:this.handlePointerMove} 2902 @pointerup=${a?void 0:this.handlePointerUp} 2903 @pointercancel=${a?void 0:this.handlePointerCancel} 2904 > 2905 <div 2906 class="inspector-account-strip flex flex-wrap items-center gap-3 px-4 py-3"
2907 data-inspector-account-strip 2908 style="width:100%;min-width:0;background-color:#010507;color:#ffffff;" 2909 > 2910 <div class="flex items-center min-w-0"> 2911 <img 2912 src=${n.A} 2913 alt="Inspector logo" 2914 class="inspector-account-logo h-6 w-auto" 2915 loading="lazy" 2916 /> 2917 </div> 2918 ${this.renderInspectorMetadataHeader()} 2919 <div class="ml-auto flex min-w-0 items-center gap-2"> 2920 <div class="inspector-agent-selector min-w-[160px] max-w-xs"> 2921 ${c} 2922 </div> 2923 <div class="flex items-center gap-1"> 2924 ${i?h.s6:(0,h.qy)` 2925 ${this.renderDockControls()} 2926 <button 2927 class="inspector-account-control flex h-8 w-8 items-center justify-center rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" 2928 type="button" 2929 aria-label="Detach Inspector into its own window" 2930 title="Detach into its own window" 2931 data-testid="cpk-inspector-pop-out" 2932 style=${$} 2933 .click=${this.requestPopOut} 2934 @click=${this.requestPopOut} 2935 > 2936 ${this.renderIcon("PictureInPicture2")} 2937 </button> 2938 `} 2939 <button 2940 class="inspector-account-control flex h-8 w-8 items-center justify-center rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ${this.settingsOpen?"inspector-account-control-active":""}" 2941 type="button" 2942 aria-label="Settings" 2943 aria-pressed=${this.settingsOpen} 2944 title="Settings" 2945 style=${$} 2946 @click=${this.handleSettingsToggle} 2947 > 2948 <span class="inspector-account-control-icon" aria-hidden="true"> 2949 ${this.renderIcon("Settings")} 2950 </span> 2951 </button> 2952 ${i?h.s6:(0,h.qy)` 2953 <button 2954 class="inspector-account-control flex h-8 w-8 items-center justify-center rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" 2955 type="button" 2956 aria-label="Close Web Inspector" 2957 style=${$} 2958 @pointerdown=${this.handleClosePointerDown} 2959 @click=${this.handleCloseClick} 2960 > 2961 ${this.renderIcon("X")} 2962 </button> 2963 `} 2964 </div> 2965 </div> 2966 </div> 2967 <nav 2968 class="inspector-primary-navigation" 2969 aria-label="Inspector primary navigation" 2970 style="overflow-x:auto;overflow-y:hidden;cursor:default;" 2971 > 2972 ${T.map(({key:e,label:t,icon:i})=>{let s=this.selectedGroup===e;return(0,h.qy)` 2973 <button 2974 type="button" 2975 class="inspector-nav-control inspector-primary-control ${s?"inspector-nav-control-active":""}"
2976 data-inspector-group=${e} 2977 data-inspector-menu-key=${("threads"===e?"threads":"learning"===e?"memories":void 0)??h.s6} 2978 aria-current=${s?"page":h.s6} 2979 style=${$} 2980 @click=${()=>this.handleGroupSelect(e)} 2981 > 2982 <span class="inspector-nav-icon" aria-hidden="true"> 2983 ${"threads"===e?(0,m._)(this.customTabIcons.threads):this.renderIcon(i)} 2984 </span> 2985 <span>${t}</span> 2986 </button> 2987 `})} 2988 ${"threads"===this.selectedGroup?(0,h.qy)` 2989 <a 2990 data-inspector-thread-cta 2991 href=${this.getThreadsTalkToEngineerUrl()} 2992 target="_blank" 2993 rel="noopener noreferrer" 2994 aria-label="Talk to an Engineer (opens in a new tab)" 2995 style=${$} 2996 @click=${this.handleTalkToEngineerClick} 2997 > 2998 Talk to an Engineer 2999 </a> 3000 `:h.s6} 3001 </nav> 3002 ${"agents"===this.selectedGroup?(0,h.qy)` 3003 <nav 3004 class="inspector-child-navigation" 3005 aria-label="Agent navigation" 3006 style="overflow-x:auto;overflow-y:hidden;white-space:nowrap;cursor:default;" 3007 > 3008 ${this.getVisibleMenuItemsForGroup("agents").map(({key:e,label:t,icon:i})=>{let s=this.selectedMenu===e;return(0,h.qy)` 3009 <button 3010 type="button" 3011 class="inspector-nav-control inspector-child-control ${s?"inspector-nav-control-active":""}"
3012 data-inspector-menu-key=${e} 3013 aria-current=${s?"page":h.s6} 3014 style=${$} 3015 @click=${()=>this.handleMenuSelect(e)} 3016 > 3017 <span 3018 class="inspector-nav-icon" 3019 aria-hidden="true" 3020 >${this.renderIcon(i)}</span 3021 > 3022 <span>${t}</span> 3023 </button> 3024 `})} 3025 </nav> 3026 `:h.s6} 3027 </div> 3028 <div class="flex flex-1 flex-col overflow-hidden"> 3029 <div id="cpk-main-scroll" class="flex-1 overflow-auto"> 3030 ${this.renderAnnouncementBanner()} 3031 ${this.renderCoreWarningBanner()} ${this.renderMainContent()} 3032 <slot></slot> 3033 </div> 3034 <div class="border-t border-gray-200 bg-gray-50 px-4 py-2"> 3035 <div 3036 class="flex items-center gap-2 rounded-md px-3 py-2 text-xs ${d.tone} w-full overflow-hidden my-1" 3037 title=${d.description} 3038 > 3039 <span 3040 class="flex h-6 w-6 items-center justify-center rounded bg-white/60" 3041 > 3042 ${this.renderIcon("Activity")} 3043 </span> 3044 <span class="font-medium">${d.label}</span> 3045 <span class="truncate text-[11px] opacity-80" 3046 >${d.description}</span 3047 > 3048 </div> 3049 </div> 3050 </div> 3051 </div> 3052 ${i?h.s6:(0,h.qy)` 3053 <div 3054 class="resize-handle pointer-events-auto absolute bottom-1 right-1 flex h-5 w-5 cursor-nwse-resize items-center justify-center text-gray-400 transition hover:text-gray-600" 3055 role="presentation" 3056 aria-hidden="true" 3057 @pointerdown=${this.handleResizePointerDown} 3058 @pointermove=${this.handleResizePointerMove} 3059 @pointerup=${this.handleResizePointerUp} 3060 @pointercancel=${this.handleResizePointerCancel} 3061 > 3062 <svg 3063 class="h-3 w-3"
3064 viewBox="0 0 16 16" 3065 fill="none" 3066 stroke="currentColor" 3067 stroke-linecap="round" 3068 stroke-width="1.5" 3069 > 3070 <path d="M5 15L15 5" /> 3071 <path d="M9 15L15 9" /> 3072 </svg> 3073 </div> 3074 `} 3075 </section> 3076 `}hydrateStateFromStorageEarly(){if("undefined"==typeof document||"undefined"==typeof window)return;let e=(0,o.lR)(S);e&&("boolean"==typeof e.isOpen&&(this.isOpen=e.isOpen),(0,o.LJ)(e.dockMode)&&(this.dockMode=e.dockMode),this.restorePersistedMenu(e.selectedMenu),"string"==typeof e.selectedContext&&(this.selectedContext=e.selectedContext,this.pendingSelectedContext=e.selectedContext))}hydrateStateFromStorage(){if("undefined"==typeof document||"undefined"==typeof window)return;let e=(0,o.lR)(S);if(!e)return;this.restorePersistedMenu(e.selectedMenu);let t=e.button;t&&((0,o.sf)(t.anchor)&&(this.contextState.button.anchor=t.anchor),(0,o.u1)(t.anchorOffset)&&(this.contextState.button.anchorOffset=t.anchorOffset),"boolean"==typeof t.hasCustomPosition&&(this.hasCustomPosition.button=t.hasCustomPosition));let i=e.window;i&&((0,o.sf)(i.anchor)&&(this.contextState.window.anchor=i.anchor),(0,o.u1)(i.anchorOffset)&&(this.contextState.window.anchorOffset=i.anchorOffset),(0,o.Mh)(i.size)&&(this.contextState.window.size=this.clampWindowSize(i.size)),"boolean"==typeof i.hasCustomPosition&&(this.hasCustomPosition.window=i.hasCustomPosition)),"string"==typeof e.selectedContext&&(this.selectedContext=e.selectedContext,this.pendingSelectedContext=e.selectedContext)}restorePersistedMenu(e){if(this.selectedMenu="threads",this.lastSelectedMenuByGroup.threads="threads",this.pendingPersistedMenu=null,!k(e))return;let t=this.menuItems.find(t=>t.key===e);if(!t){this.hasResolvedCore||(this.pendingPersistedMenu=e);return}this.selectedMenu=t.key,this.lastSelectedMenuByGroup[this.getGroupForMenu(t.key)]=t.key}resolvePendingPersistedMenu(){let e=this.pendingPersistedMenu;e&&(this.pendingPersistedMenu=null,this.restorePersistedMenu(e),this.persistState())}get activeContext(){return this.isOpen?"window":"button"}get isPoppedOut(){return null!==this.popOut&&!this.popOut.win.closed}get activeRoot(){return this.isPoppedOut?this.popOut.win.document:this.renderRoot}getPopOutCssTexts(){let t=e.styles.map(e=>"cssText"in e?String(e.cssText):""),i=` 3077 html, body { margin: 0; height: 100%; background: #ffffff; } 3078 .inspector-window { 3079 position: fixed !important; 3080 inset: 0 !important; 3081 width: 100% !important; 3082 height: 100% !important; 3083 min-width: 0 !important; 3084 min-height: 0 !important; 3085 border-radius: 0 !important; 3086 } 3087 `;return[...t.filter(Boolean),i]}unbindPopOutPointerDown(e){try{e.removeEventListener("pointerdown",this.handleGlobalPointerDown)}catch{}}closePopOut(){let e=this.popOut;e&&(this.handlePopOutClosed(),e.close())}syncInspectorPortal(){if(!this.inspectorPortal){let e=(this.ownerDocument??document).createElement("div");e.dataset.inspectorPortal="true",e.style.display="contents",this.inspectorPortal=e}if(!this.isOpen){(0,h.XX)(h.s6,this.inspectorPortal,{host:this,creationScope:this.ownerDocument??document}),this.inspectorPortal.remove();return}(0,h.XX)(this.renderWindow(),this.inspectorPortal,{host:this,creationScope:this.ownerDocument??document});let e=this.isPoppedOut?this.popOut.win.document.body:this.renderRoot.querySelector("[data-inspector-portal-anchor]");e&&this.inspectorPortal.parentNode!==e&&e.appendChild(this.inspectorPortal)}measureContext(e){let t=this.renderRoot?.querySelector("window"===e?".inspector-window":".console-button");t&&(0,r.Dy)(this.contextState[e],t,"window"===e?I:C)}centerContext(e){if("undefined"==typeof window)return;let t=this.getViewportSize();(0,r.DK)(this.contextState[e],t,16),e===this.activeContext&&this.updateHostTransform(e),this.hasCustomPosition[e]=!1,this.persistState()}ensureWindowPlacement(){if("undefined"==typeof window)return;if(!this.hasCustomPosition.window)return void this.centerContext("window");let e=this.getViewportSize();(0,r.om)(this.contextState.window,e,16),(0,r.A_)(this.contextState.window,e,16),this.updateHostTransform("window"),this.persistState()}constrainToViewport(e,t){if("undefined"==typeof window)return e;let i=this.getViewportSize();return(0,r.py)(this.contextState[t],e,i,16)}keepPositionWithinViewport(e){if("undefined"==typeof window)return;let t=this.getViewportSize();(0,r.om)(this.contextState[e],t,16)}getViewportSize(){return"undefined"==typeof window?{...I}:{width:window.innerWidth,height:window.innerHeight}}persistState(){let e={button:{anchor:this.contextState.button.anchor,anchorOffset:this.contextState.button.anchorOffset,hasCu
3087stomPosition:this.hasCustomPosition.button},window:{anchor:this.contextState.window.anchor,anchorOffset:this.contextState.window.anchorOffset,size:{width:Math.round(this.contextState.window.size.width),height:Math.round(this.contextState.window.size.height)},hasCustomPosition:this.hasCustomPosition.window},isOpen:this.isOpen,dockMode:this.dockMode,selectedMenu:this.pendingPersistedMenu??this.selectedMenu,selectedContext:this.selectedContext};(0,o.Kl)(S,e),this.pendingSelectedContext=e.selectedContext??null}clampWindowSize(e){let t="docked-left"===this.dockMode?420:600;return"undefined"==typeof window?{width:Math.max(t,e.width),height:Math.max(200,e.height)}:(0,r.Lh)(e,this.getViewportSize(),16,t,200)}setDockMode(e){this.dockMode!==e&&(this.startHostTransition(),this.removeDockStyles(),this.dockMode=e,"floating"!==e?("docked-left"===e&&(this.contextState.window.size.width=500),this.applyDockStyles()):(this.contextState.window.size=this.clampWindowSize(I),this.centerContext("window")),this.persistState(),this.requestUpdate(),this.updateHostTransform("window"))}startHostTransition(e=300){this.setAttribute("data-transitioning","true"),null!==this.transitionTimeoutId&&clearTimeout(this.transitionTimeoutId),this.transitionTimeoutId=setTimeout(()=>{this.removeAttribute("data-transitioning"),this.transitionTimeoutId=null},e)}applyDockStyles(e=!1){if("undefined"==typeof document||!document.body)return;let t=window.getComputedStyle(document.body);if(this.previousBodyMargins={left:t.marginLeft,bottom:t.marginBottom},this.isResizing||e||(document.body.style.transition="margin 300ms ease"),"docked-left"===this.dockMode&&(document.body.style.marginLeft=`${this.contextState.window.size.width}px`),!this.isResizing&&!e){let e=setTimeout(()=>{this.bodyTransitionTimeoutIds.delete(e),"undefined"!=typeof document&&document.body&&(document.body.style.transition="")},300);this.bodyTransitionTimeoutIds.add(e)}}removeDockStyles(e=!1){if("undefined"!=typeof document&&document.body)if(this.isResizing||e||(document.body.style.transition="margin 300ms ease"),this.previousBodyMargins?(document.body.style.marginLeft=this.previousBodyMargins.left,document.body.style.marginBottom=this.previousBodyMargins.bottom,this.previousBodyMargins=null):(document.body.style.marginLeft="",document.body.style.marginBottom=""),e)document.body.style.transition="";else{let e=setTimeout(()=>{this.bodyTransitionTimeoutIds.delete(e),"undefined"!=typeof document&&document.body&&(document.body.style.transition="")},300);this.bodyTransitionTimeoutIds.add(e)}}updateHostTransform(e=this.activeContext){if(!this.isPoppedOut&&e===this.activeContext)if(this.isOpen&&"docked-left"===this.dockMode)this.style.transform="translate3d(0, 0, 0)";else{let{position:t}=this.contextState[e];this.style.transform=`translate3d(${t.x}px, ${t.y}px, 0)`}}setDragging(e){this.isDragging!==e&&(this.isDragging=e,this.requestUpdate())}updateAnchorFromPosition(e){if("undefined"==typeof window)return;let t=this.getViewportSize();(0,r.A_)(this.contextState[e],t,16)}snapButtonToCorner(){if("undefined"==typeof window)return;let e=this.getViewportSize(),t=this.contextState.button,i=t.position.x+t.size.width/2,s=t.position.y+t.size.height/2;t.anchor={horizontal:i<e.width/2?"left":"right",vertical:s<e.height/2?"top":"bottom"},t.anchorOffset={x:16,y:16},this.startHostTransition(),this.applyAnchorPosition("button")}applyAnchorPosition(e){if(this.isPoppedOut||"undefined"==typeof window)return;let t=this.getViewportSize();(0,r.Tp)(this.contextState[e],t,16),this.updateHostTransform(e),this.persistState()}resetResizeTracking(){this.resizePointerId=null,this.resizeStart=null,this.resizeInitialSize=null,this.isResizing=!1}resetPointerTracking(){this.pointerId=null,this.dragStart=null,this.pointerContext=null,this.setDragging(!1),this.draggedDuringInteraction=!1}openInspector(e,t={}){if(t.threadId&&this.focusThread(t),this.isPoppedOut||this.isOpen)return;let i=this.hasUnseenAnnouncement;this.showAnnouncementPreview=!1,this.ensureAnnouncementLoading(),this.isOpen=!0,this.persistState(),this.trackOpened(e,i),this.maybeTrackBannerViewed(),"floating"!==this.dockMode&&this.applyDockStyles(),this.ensureWindowPlacement(),this.requestUpdate(),this.updateComplete.then(()=>{this.measureContext("window"),"floating"===this.dockMode?this.hasCustomPosition.window?this.applyAnchorPosition("window"):this.centerContext("window"):this.updateHostTransform("window")})}closeInspector(){!this.isPoppedOut&&this.isOpen&&(this.isOpen=!1,"floating"!==this.dockMode&&this.removeDockStyles(),this.persistState(),this.updateHostTransform("button"),this.requestUpdate(),this.updateComplete.then(()=>{this.measureContext("button"),this.applyAnchorPosition("button")}))}renderIcon(e){let t=f[e];return t?(0,m._)(`<svg ${this.serializeAttributes({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round",class:"h-3.5 w-3.5"})}>${t.map(([e,t])=>`<${e} ${this.serializeAttributes(t)} />`).join("")}</svg>`):h.s6}renderDockControls(){return"floating"===this.dockMode?(0,h.qy)` 3088 <button 3089 class="flex h-8 w-8 items-center justify-center rounded-md text-gray-400 transition hover:bg-gray-100 hover:text-gray-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400" 3090 type="button" 3091 aria-label="Dock to left" 3092 title="Dock Left" 3093 style=${$} 3094 @click=${()=>this.handleDockClick("docked-left")} 3095 > 3096 ${this.renderIcon("PanelLeft")} 3097 </button> 3098 `:(0,h.qy)` 3099 <button 3100 class="flex h-8 w-8 items-center justify-center rounded-md text-gray-400 transition hover:bg-gray-100 hover:text-gray-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400" 3101 type="button" 3102 aria-label="Float window" 3103 title="Float" 3104 style=${$} 3105 @click=${()=>this.handleDockClick("floating")} 3106 > 3107 ${this.renderIcon("Maximize2")} 3108 </button> 3109 `}getDockedWindowStyles(){return"docked-left"===this.dockMode?{position:"fixed",top:"0",left:"0",bottom:"0",width:`${Math.round(this.contextState.window.size.width)}px`,height:"100vh",minWidth:"420px",borderRadius:"0"}:{width:`${Math.round(this.contextState.window.size.width)}px`,height:`${Math.round(this.contextState.window.size.height)}px`,minWidth:"600px",minHeight:"200px"}}handleDockClick(e){this.setDockMode(e)}serializeAttributes(e){return Object.entries(e).filter(([e,t])=>"key"!==e&&null!=t&&""!==t).map(([e,t])=>`${e}="${String(t).replace(/"/g,""")}"`).join(" ")}sanitizeForLogging(e,t=0,i=new WeakSet){if(void 0===e)return"[undefined]";if(null===e||"number"==typeof e||"boolean"==typeof e||"string"==typeof e)return e;if("bigint"==typeof e||"symbol"==typeof e||"function"==typeof e)return String(e);if(e instanceof Date)return e.toISOString();if(Array.isArray(e))return t>=4?"[Truncated depth]":e.map(e=>this.sanitizeForLogging(e,t+1,i));if("object"==typeof e){if(i.has(e))return"[Circular]";if(i.add(e),t>=4)return"[Truncated depth]";let s={};for(let[n,a]of Object.entries(e))s[n]=this.sanitizeForLogging(a,t+1,i);return s}return String(e)}normalizeEventPayload(e,t){if(t&&"object"==typeof t&&"event"in t){let{event:e,...i}=t,s=0===Object.keys(i).length?e:{event:e,...i};return this.sanitizeForLogging(s)}return this.sanitizeForLogging(t)}normalizeMessageContent(e){if("string"==typeof e)return e;if(e&&"object"==typeof e&&"text"in e){let t=e.text;if("string"==typeof t)return t}if(null==e)return"";if("object"==typeof e)try{return JSON.stringify(this.sanitizeForLogging(e))}catch{return""}return String(e)}normalizeToolCalls(e){return Array.isArray(e)?e.map(e=>{if(!e||"object"!=typeof e)return null;let t=e.function,i="string"==typeof t?.name?t.name:"string"==typeof e.toolName?e.toolName:void 0,s=t&&"arguments"in t?t.arguments:e.arguments,n={id:"string"==typeof e.id?e.id:void 0,toolName:"string"==typeof e.toolName?e.toolName:i,status:"string"==typeof e.status?e.status:void 0};return i&&(n.function={name:i,arguments:this.sanitizeForLogging(s)}),n}).filter(e=>!!e):[]}normalizeAgentMessage(e){if(!e||"object"!=typeof e)return null;let t="string"==typeof e.role?e.role:"unknown",i=this.normalizeMessageContent(e.content),s=this.normalizeToolCalls(e.toolCalls);return{id:"string"==typeof e.id?e.id:void 0,role:t,contentText:i,contentRaw:void 0!==e.content?this.sanitizeForLogging(e.content):void 0,toolCalls:s,activityType:"string"==typeof e.activityType?e.activityType:void 0}}normalizeAgentMessages(e){return Array.isArray(e)?e.map(e=>this.normalizeAgentMessage(e)).filter(e=>null!==e):null}normalizeContextStore(e){if(!e||"object"!=typeof e)return{};let t={};for(let[i,s]of Object.entries(e))s&&"object"==typeof s&&"value"in s?t[i]={description:"string"==typeof s.description&&s.description.trim().length>0?s.description:void 0,value:s.value}:t[i]={value:s};return t}renderCoreWarningBanner(){return this._core?h.s6:(0,h.qy)` 3110 <div 3111 class="mx-4 my-3 flex items-start gap-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800" 3112 >
3113 <span class="mt-0.5 shrink-0 text-amber-600" 3114 >${this.renderIcon("AlertTriangle")}</span 3115 > 3116 <div class="space-y-1"> 3117 <div class="font-semibold text-amber-900"> 3118 CopilotKit core not attached 3119 </div> 3120 <p class="text-[11px] leading-snug text-amber-800"> 3121 Pass a live <code>CopilotKitCore</code> instance to 3122 <code><cpk-web-inspector></code> or expose it on 3123 <code>window.__COPILOTKIT_CORE__</code> for auto-attach. 3124 </p> 3125 </div> 3126 </div> 3127 `}getCoreStatusSummary(){if(!this._core)return{label:"Core not attached",tone:"border border-amber-200 bg-amber-50 text-amber-800",description:"Pass a CopilotKitCore instance to <cpk-web-inspector> or enable auto-attach."};let e=this.runtimeStatus??v.Ub.Disconnected,t=this.lastCoreError?.message;return e===v.Ub.Error?{label:"Runtime error",tone:"border border-rose-200 bg-rose-50 text-rose-700",description:t??"CopilotKit runtime reported an error."}:e===v.Ub.Connecting?{label:"Connecting",tone:"border border-amber-200 bg-amber-50 text-amber-800",description:"Waiting for CopilotKit runtime to finish connecting."}:e===v.Ub.Connected?{label:"Connected",tone:"border border-emerald-200 bg-emerald-50 text-emerald-700",description:"Live runtime connection established."}:{label:"Disconnected",tone:"border border-gray-200 bg-gray-50 text-gray-700",description:t??"Waiting for CopilotKit runtime to connect."}}renderMainContent(){return this.settingsOpen?this.renderSettingsPanel():"ag-ui-events"===this.selectedMenu?this.renderEventsTable():"agents"===this.selectedMenu?this.renderAgentsView():"frontend-tools"===this.selectedMenu?this.renderToolsView():"capabilities"===this.selectedMenu?this.renderCapabilitiesView():"agent-context"===this.selectedMenu?this.renderContextView():"threads"===this.selectedMenu?this.renderThreadsView():"memories"===this.selectedMenu?this.renderMemoriesView():h.s6}renderSettingsPanel(){let e=this.core?.telemetryDisabled??!1;return(0,h.qy)` 3128 <div class="flex h-full flex-col overflow-hidden"> 3129 <div class="overflow-auto p-4"> 3130 <div class="space-y-3"> 3131 <h2 class="text-sm font-semibold text-slate-900">Settings</h2> 3132 3133 <div class="space-y-2"> 3134 <h3 class="text-sm text-slate-500">Privacy</h3> 3135 <div 3136 class="rounded-lg border border-slate-200 bg-white p-4 space-y-3" 3137 > 3138 <p class="text-sm text-gray-600 flex items-start gap-2"> 3139 <span>${e?"â":"â "}</span> 3140 <span> 3141 ${e?"You have disabled anonymous interaction data collection.":"CopilotKit is currently collecting anonymous interaction data from the inspector so we know which features people use. We never collect message content, agent state, prompts, or completions."} 3142 </span> 3143 </p> 3144 <a 3145 class="inline-flex items-center gap-1 text-sm text-slate-700 underline hover:text-slate-900" 3146 href=${p.m6} 3147 target="_blank" 3148 rel="noopener" 3149 >Learn more â</a 3150 > 3151 </div> 3152 </div> 3153 </div> 3154 </div> 3155 </div> 3156 `}trackOpened(e,t){this.core?.telemetryDisabled||(0,p.y4)({open_source:e,..."connected"===this.runtimeStatus?{license_status:this.core?.licenseStatus??void 0,runtime_mode:this.core?.runtimeMode??void 0}:{},runtime_url_type:(0,p.kE)(this.core?.runtimeUrl),has_unseen_announcement:t})}getVisibleInspectorMetadataAction(){let{threadsFooterAction:e,lockedAction:t}=this.inspectorMetadataProjection;return e&&!this.settingsOpen&&"threads"===this.selectedMenu?{action:e,placement:"threads-footer"}:!t||this.settingsOpen||"threads"!==this.selectedMenu||this.areThreadEndpointsAvailable()?void 0:{action:t,placement:"locked"}}getMetadataTelemetryNavigation(){let e=this.selectedMenu;if(!k(e))return{};for(let t of T)if(w[t.key].some(t=>t===e))return{group_key:t.key,leaf_key:e};return{}}getMetadataTelemetryContext(){return{usage_bucket:this.getThreadsUsageBucket(),expiry_bucket:this.getThreadsExpiryBucket(),...this.getMetadataTelemetryNavigation()}}trackMetadataModuleIfChanged(e,t){if(this.metadataTelemetryFingerprints.get(e.module)!==t){this.metadataTelemetryFingerprints.set(e.module,t);try{(0,p.FC)(e)}catch{}}}maybeTrackInspectorMetadataViews(){if(!this.isOpen||this.runtimeStatus!==v.Ub.Connected||this.core?.telemetryDisabled)return;let{identity:e,plan:t}=this.inspectorMetadataProjection,i=this.inspectorMetadataProjection.licenseState,s=this.getMetadataTelemetryContext(),n=[s.usage_bucket,s.expiry_bucket,s.group_key??null,s.leaf_key??null];e?this.trackMetadataModuleIfChanged({module:"identity",license_bucket:i,...s},JSON.stringify([i,...n,e.organizationName,e.projectName])):this.metadataTelemetryFingerprints.delete("identity"),t?this.trackMetadataModuleIfChanged({module:"plan",license_bucket:i,...s},JSON.stringify([i,...n,t.code,t.label])):this.metadataTelemetryFingerprints.delete("plan");let a=this.getVisibleInspectorMetadataAction();if(a){let{action:e,placement:t}=a,r=B(t);this.trackMetadataModuleIfChanged({module:"action",action_kind:e.kind,license_bucket:i,...s,action_placement:r},JSON.stringify([i,...n,r,e.kind,e.url]))}else this.metadataTelemetryFingerprints.delete("action")}trackBannerDismissedOnce(e){if(this.core?.telemetryDisabled)return;let t=this.announcementTimestamp;if(!t)return;let i=`${t}:dismissed:${e}`;this.clickedBannerIds.has(i)||(this.clickedBannerIds.add(i),(0,p.Xw)({banner_id:t,surface:e,cta_label:this.announcementCtaLabel??void 0}))}trackBannerClickedOnce(e){if(this.core?.telemetryDisabled)return;let t=this.announcementTimestamp;if(!t)return;let i=`${t}:${e.cta}`;this.clickedBannerIds.has(i)||(this.clickedBannerIds.add(i),(0,p.b0)({banner_id:t,cta:e.cta,cta_label:this.announcementCtaLabel??void 0}))}trackThreadsViewStateOnce(e){if(this.core?.telemetryDisabled)return;let t=`${e}:${this.getThreadServiceStatus()}`;if(this.viewedThreadsTelemetryStates.has(t))return;this.viewedThreadsTelemetryStates.add(t);let i=this.getThreadsTelemetryProps();"locked"===e?(0,p.VP)(i):"empty_enabled"===e?(0,p.BB)(i):(0,p.W$)(i)}shouldRenderExampleThreads(e,t,i,s){return e||!i&&!s&&0===t.length}
3156isExampleThreadId(e){return L.some(t=>t.id===e)}getExampleThreadProvider(e){let t=this.exampleThreadProviders.get(e);if(t)return t;let i=L.find(t=>t.id===e),s=U[e],n={getThreadMetadata:async()=>i?{id:i.id,name:i.name,agentId:i.agentId,endUserId:"example-user",status:"completed",createdAt:i.createdAt,updatedAt:i.updatedAt}:null,getMessages:async()=>s?.messages??[],getEvents:async()=>s?.events??[],getState:async()=>s?.state??null};return this.exampleThreadProviders.set(e,n),n}trackThreadsExampleViewedOnce(){if(!this.core?.telemetryDisabled)for(let e of L){let t=V(e.id);!t||this.viewedExampleKinds.has(t)||(this.viewedExampleKinds.add(t),(0,p.nF)({...this.getThreadsTelemetryProps(),example_kind:t}))}}trackThreadsExampleSelectedOnce(e){if(this.core?.telemetryDisabled)return;let t=V(e);!t||this.selectedExampleKinds.has(t)||(this.selectedExampleKinds.add(t),(0,p.mM)({...this.getThreadsTelemetryProps(),example_kind:t}))}getCurrentExampleTourProps(){let e=this.selectedThreadId?V(this.selectedThreadId):void 0,t=F(this.exampleTourStep);if(e&&t)return{...this.getThreadsTelemetryProps(),example_kind:e,...t}}trackThreadsExampleTourStepViewedOnce(){if(this.core?.telemetryDisabled||!this.selectedThreadId)return;let e=this.getCurrentExampleTourProps();if(!e)return;let t=`${e.example_kind}:${e.tour_step}`;this.viewedExampleTourSteps.has(t)||(this.viewedExampleTourSteps.add(t),(0,p.Ze)(e))}syncExampleTourTab(){let e=N[this.exampleTourStep]??N[0];e&&this.updateComplete.then(()=>{this.activeRoot.querySelector("cpk-thread-details")?.selectTab?.(e.tab)})}startExampleTour(e){if(this.selectedThreadId){if(this.exampleTourActive=!0,this.exampleTourStep=0,e){if(this.exampleTourAutoShown=!0,!this.core?.telemetryDisabled){let e=this.getCurrentExampleTourProps();e&&(0,p.gr)(e)}}else if(!this.core?.telemetryDisabled){let e=this.getCurrentExampleTourProps();e&&(0,p.ZN)(e)}this.trackThreadsExampleTourStepViewedOnce(),this.syncExampleTourTab(),this.requestUpdate()}}setExampleTourStep(e){let t=void 0!==F(e);this.exampleTourStep=Math.max(0,Math.min(N.length-1,e)),t&&this.trackThreadsExampleTourStepViewedOnce(),this.syncExampleTourTab(),this.requestUpdate()}dismissExampleTour(e){if(this.selectedThreadId){if(this.exampleTourActive=!1,this.exampleTourDismissed=!0,this.writeThreadsExampleTourDismissed(),!this.core?.telemetryDisabled){let t=this.getCurrentExampleTourProps();if(t){let i={...t,dismiss_method:e};"done"===e?(0,p._Y)(i):(0,p.yc)(i)}}this.requestUpdate()}}handleThreadsThreadSelected(e,t){if(this.requestedThreadId=null,this.focusedThreadMessageId=null,t&&this.selectedThreadId===e&&this.selectedLocalExampleThreadId===e){this.selectedThreadId=null,this.selectedRealThreadIsExplicit=!1,this.selectedLocalExampleThreadId=null,this.exampleTourActive=!1,this.requestUpdate();return}if(this.selectedThreadId=e,t&&this.isExampleThreadId(e))this.selectedRealThreadIsExplicit=!1,this.selectedLocalExampleThreadId=e,this.trackThreadsExampleSelectedOnce(e),this.exampleTourDismissed||this.exampleTourAutoShown?this.exampleTourActive=!1:this.startExampleTour(!0);else{let{displayThreads:t}=this.getActiveThreadsState();this.selectedRealThreadIsExplicit=t.some(t=>t.id===e),this.selectedLocalExampleThreadId=null,this.exampleTourActive=!1}this.requestUpdate()}readThreadsExampleTourDismissed(){if("undefined"==typeof window)return!1;try{let e=window.localStorage.getItem(R);if(!e)return!1;return!0===JSON.parse(e).dismissed}catch{return!1}}writeThreadsExampleTourDismissed(){if("undefined"!=typeof window)try{window.localStorage.setItem(R,JSON.stringify({dismissed:!0}))}catch{}}cancelThreadsExampleOverviewVideoGate(){null!==this.threadsExampleOverviewVideoLoadTimer&&("undefined"!=typeof window&&window.clearTimeout(this.threadsExampleOverviewVideoLoadTimer),this.threadsExampleOverviewVideoLoadTimer=null),null!==this.threadsExampleOverviewVideoIdleCallbackId&&("undefined"!=typeof window&&"function"==typeof window.cancelIdleCallback&&window.cancelIdleCallback(this.threadsExampleOverviewVideoIdleCallbackId),this.threadsExampleOverviewVideoIdleCallbackId=null)}isCurrentThreadsExampleOverviewVideo(e,t){return this.isConnected&&e.isConnected&&this.threadsExampleOverviewVideoElement===e&&this.threadsExampleOverviewVideoLifecycleGeneration===t}invalidateThreadsExampleOverviewVideoPlay(){this.threadsExampleOverviewVideoPlayAttemptGeneration+=1,this.threadsExampleOverviewVideoPlayPromise=null}failThreadsExampleOverviewVideo(e,t){this.isCurrentThreadsExampleOverviewVideo(e,t)&&(this.invalidateThreadsExampleOverviewVideoPlay(),this.threadsExampleOverviewVideoLoaded=!1,this.threadsExampleOverviewVideoState="failed",this.requestUpdate())}async settleThreadsExampleOverviewVideoPlay(e,t,i,s){try{await s,this.isCurrentThreadsExampleOverviewVideo(e,t)&&this.threadsExampleOverviewVideoPlayAttemptGeneration===i&&"failed"!==this.threadsExampleOverviewVideoState&&(this.threadsExampleOverviewVideoState="playing",this.requestUpdate())}catch{this.isCurrentThreadsExampleOverviewVideo(e,t)&&this.threadsExampleOverviewVideoPlayAttemptGeneration===i&&this.failThreadsExampleOverviewVideo(e,t)}finally{this.threadsExampleOverviewVideoPlayAttemptGeneration===i&&(this.threadsExampleOverviewVideoPlayPromise=null)}}playThreadsExampleOverviewVideo(e,t){if(null!==this.threadsExampleOverviewVideoPlayPromise||"deferred"===this.threadsExampleOverviewVideoState||"failed"===this.threadsExampleOverviewVideoState||!this.isCurrentThreadsExampleOverviewVideo(e,t))return;let i=this.threadsExampleOverviewVideoPlayAttemptGeneration+1;this.threadsExampleOverviewVideoPlayAttemptGeneration=i;try{let s=Promise.resolve(e.play());this.threadsExampleOverviewVideoPlayPromise=this.settleThreadsExampleOverviewVideoPlay(e,t,i,s)}catch{this.failThreadsExampleOverviewVideo(e,t)}}activateThreadsExampleOverviewVideo(e,t,i){"deferred"===this.threadsExampleOverviewVideoState&&this.isCurrentThreadsExampleOverviewVideo(e,t)&&(this.threadsExampleOverviewVideoState="ready",this.threadsExampleOverviewVideoLoaded=!1,e.autoplay=!this.threadsExampleOverviewVideoReducedMotion,e.setAttribute("src","https://cdn.copilotkit.ai/corp-site/videos/copilotkit-generative-ui-agentic-frontend-demo.webm"),this.requestUpdate(),i&&this.playThreadsExampleOverviewVideo(e,t))}scheduleThreadsExampleOverviewVideoLoad(){let e=this.threadsExampleOverviewVideoElement;if(!e||!this.isConnected||"deferred"!==this.threadsExampleOverviewVideoState||null!==this.threadsExampleOverviewVideoLoadTimer||null!==this.threadsExampleOverviewVideoIdleCallbackId||"undefined"==typeof window)return;let t=this.threadsExampleOverviewVideoLifecycleGeneration;if("function"==typeof window.requestIdleCallback){let i=0,s=()=>{this.threadsExampleOverviewVideoIdleCallbackId===i&&(this.threadsExampleOverviewVideoIdleCallbackId=null,this.activateThreadsExampleOverviewVideo(e,t,!this.threadsExampleOverviewVideoReducedMotion))};i=window.requestIdleCallback(s,{timeout:1200}),this.threadsExampleOverviewVideoIdleCallbackId=i;return}let i=window.setTimeout(()=>{this.threadsExampleOverviewVideoLoadTimer===i&&(this.threadsExampleOverviewVideoLoadTimer=null,this.activateThreadsExampleOverviewVideo(e,t,!this.threadsExampleOverviewVideoReducedMotion))},450);this.threadsExampleOverviewVideoLoadTimer=i}bindThreadsExampleOverviewVideo(e){let t=this.threadsExampleOverviewVideoLifecycleGeneration,i={loadeddata:()=>{this.isCurrentThreadsExampleOverviewVideo(e,t)&&"deferred"!==this.threadsExampleOverviewVideoState&&"failed"!==this.threadsExampleOverviewVideoState&&(this.threadsExampleOverviewVideoLoaded=!0,this.requestUpdate())},play:()=>{this.isCurrentThreadsExampleOverviewVideo(e,t)&&"deferred"!==this.threadsExampleOverviewVideoState&&"failed"!==this.threadsExampleOverviewVideoState&&(this.threadsExampleOverviewVideoState="playing",this.requestUpdate())},pause:()=>{this.isCurrentThreadsExampleOverviewVideo(e,t)&&"deferred"!==this.threadsExampleOverviewVideoState&&"failed"!==this.threadsExampleOverviewVideoState&&(this.invalidateThreadsExampleOverviewVideoPlay(),this.threadsExampleOverviewVideoState="ready",this.requestUpdate())},error:()=>{this.failThreadsExampleOverviewVideo(e,t)}};this.threadsExampleOverviewVideoElement=e,this.threadsExampleOverviewVideoListeners=i,e.addEventListener("loadeddata",i.loadeddata),e.addEventListener("play",i.play),e.addEventListener("pause",i.pause),e.addEventListener("error",i.error),e.muted=!0,e.loop=!0,e.playsInl
3156ine=!0,e.autoplay="deferred"!==this.threadsExampleOverviewVideoState&&!this.threadsExampleOverviewVideoReducedMotion}cleanupThreadsExampleOverviewVideo(){let e=this.threadsExampleOverviewVideoElement;e&&(this.threadsExampleOverviewVideoLifecycleGeneration+=1),this.invalidateThreadsExampleOverviewVideoPlay(),this.cancelThreadsExampleOverviewVideoGate(),this.threadsExampleOverviewVideoPlayOnNextBind=!1;let t=this.threadsExampleOverviewVideoListeners;if(e&&t&&(e.removeEventListener("loadeddata",t.loadeddata),e.removeEventListener("play",t.play),e.removeEventListener("pause",t.pause),e.removeEventListener("error",t.error)),this.threadsExampleOverviewVideoElement=null,this.threadsExampleOverviewVideoListeners=null,e){try{e.pause()}catch{}e.removeAttribute("src");try{e.load()}catch{}}this.threadsExampleOverviewVideoLoaded=!1,this.threadsExampleOverviewVideoState="deferred"}syncThreadsExampleOverviewVideo(){let e=this.activeRoot.querySelector(".cpk-threads-overview-video");if(!e){(this.threadsExampleOverviewVideoElement||"deferred"!==this.threadsExampleOverviewVideoState||null!==this.threadsExampleOverviewVideoLoadTimer||null!==this.threadsExampleOverviewVideoIdleCallbackId||this.threadsExampleOverviewVideoPlayOnNextBind)&&this.cleanupThreadsExampleOverviewVideo();return}if(this.threadsExampleOverviewVideoElement!==e&&(this.threadsExampleOverviewVideoElement&&this.cleanupThreadsExampleOverviewVideo(),this.bindThreadsExampleOverviewVideo(e)),this.threadsExampleOverviewVideoPlayOnNextBind){this.threadsExampleOverviewVideoPlayOnNextBind=!1,this.activateThreadsExampleOverviewVideo(e,this.threadsExampleOverviewVideoLifecycleGeneration,!0);return}this.scheduleThreadsExampleOverviewVideoLoad()}renderThreadsExampleOverviewVideo(){let e="playing"===this.threadsExampleOverviewVideoState,t="deferred"!==this.threadsExampleOverviewVideoState,i=(0,h.qy)`<video 3157 class="cpk-threads-overview-video" 3158 data-loaded=${this.threadsExampleOverviewVideoLoaded} 3159 ?autoplay=${t&&!this.threadsExampleOverviewVideoReducedMotion} 3160 .autoplay=${t&&!this.threadsExampleOverviewVideoReducedMotion} 3161 loop 3162 .loop=${!0} 3163 muted 3164 .muted=${!0} 3165 playsinline 3166 .playsInline=${!0} 3167 preload="metadata" 3168 ></video>`;return(0,h.qy)` 3169 <div class="cpk-threads-overview-video-frame" aria-hidden="true"> 3170 ${this.threadsExampleOverviewVideoLifecycleGeneration%2==0?(0,h.qy)`<!-- cpk-video-generation-even -->${i}`:(0,h.qy)`<!-- cpk-video-generation-odd -->${i}`} 3171 </div> 3172 <button 3173 class="cpk-threads-overview-video-control" 3174 type="button" 3175 aria-pressed=${e?"false":"true"} 3176 @click=${this.handleThreadsExampleOverviewVideoControl} 3177 > 3178 ${e?"Pause demo":"Play demo"} 3179 </button> 3180 ${"failed"===this.threadsExampleOverviewVideoState?(0,h.qy)` 3181 <p class="cpk-threads-overview-video-fallback" role="status"> 3182 ${"The demo video is unavailable. Use the example threads to explore Messages, AG-UI Events, and State."} 3183 </p> 3184 `:h.s6} 3185 `}showThreadsSetupPromptCopyState(e,t){this.isConnected&&t===this.threadsSetupPromptCopyGeneration&&(null!==this.threadsSetupPromptCopyResetTimeoutId&&window.clearTimeout(this.threadsSetupPromptCopyResetTimeoutId),this.threadsSetupPromptCopyState=e,this.requestUpdate(),this.threadsSetupPromptCopyResetTimeoutId=window.setTimeout(()=>{this.isConnected&&t===this.threadsSetupPromptCopyGeneration&&(this.threadsSetupPromptCopyState="idle",this.threadsSetupPromptCopyResetTimeoutId=null,this.requestUpdate())},2e3))}renderThreadsExampleOverview(e){let t=e?this.getThreadsLockedCopy():void 0,{lockedAction:i}=this.inspectorMetadataProjection,s=this.getThreadsEmptyOnboardingAction();return(0,h.qy)` 3186 <div 3187 style=" 3188 flex: 1; 3189 min-width: 0; 3190 display: flex; 3191 align-items: center; 3192 justify-content: center; 3193 padding: 32px; 3194 background: #f7f7f9; 3195 " 3196 > 3197 <div style="max-width: 440px; color: #57575b;"> 3198 <h2 3199 style=" 3200 margin: 0 0 10px; 3201 font-size: 20px; 3202 line-height: 1.25; 3203 font-weight: 600; 3204 color: #010507; 3205 " 3206 > 3207 ${t?.heading??"Threads are persistent, inspectable conversations"} 3208 </h2> 3209 ${this.renderThreadsExampleOverviewVideo()} 3210 <p 3211 style=" 3212 margin: 0 0 16px; 3213 font-size: 13px; 3214 line-height: 1.55; 3215 color: #57575b; 3216 " 3217 > 3218 ${t?.description??"Take a tour with the example threads in the sidebar. Then, start chatting in y
3218our app to create the first real thread."} 3219 </p> 3220 <div style="display:flex;flex-wrap:wrap;gap:8px;"> 3221 ${e?(0,h.qy)` 3222 ${"valid"===this.inspectorMetadataProjection.licenseState?(0,h.qy)` 3223 <button 3224 data-inspector-threads-setup-prompt 3225 type="button" 3226 aria-label=${"copied"===this.threadsSetupPromptCopyState?"Setup prompt copied":"error"===this.threadsSetupPromptCopyState?"Copy setup prompt failed. Try again":"Copy setup prompt for your coding agent"} 3227 @click=${this.handleThreadsSetupPromptCopy} 3228 > 3229 ${this.renderIcon("copied"===this.threadsSetupPromptCopyState?"Check":"Copy")} 3230 ${"copied"===this.threadsSetupPromptCopyState?"Copied":"error"===this.threadsSetupPromptCopyState?"Copy blocked":"Copy prompt for your agent"} 3231 </button> 3232 <a
3233 data-inspector-threads-setup-link 3234 href=${this.getThreadsRuntimeSetupDocsUrl()} 3235 target="_blank" 3236 rel="noopener" 3237 aria-label="Open setup guide (opens in a new tab)" 3238 > 3239 Open setup guide 3240 </a> 3241 <span 3242 class="sr-only" 3243 data-inspector-threads-setup-copy-status 3244 aria-live="polite" 3245 >${"copied"===this.threadsSetupPromptCopyState?"Setup prompt copied.":"error"===this.threadsSetupPromptCopyState?"Setup prompt copy failed. Open the setup guide and copy it manually.":""}</span 3246 > 3247 `:h.s6} 3248 ${i?this.renderInspectorAction(i,"locked"):h.s6} 3249 `:(0,h.qy)` 3250 <a 3251 href=${this.getThreadsDocsUrl()} 3252 target="_blank" 3253 rel="noopener" 3254 style=" 3255 display: inline-flex; 3256 align-items: center; 3257 justify-content: center; 3258 gap: 6px; 3259 min-height: 34px; 3260 border-radius: 6px; 3261 background: #010507; 3262 padding: 8px 12px; 3263 font-size: 12px; 3264 font-weight: 600; 3265 color: #ffffff; 3266 text-decoration: none; 3267 " 3268 > 3269 Learn how Threads work 3270 </a> 3271 <a 3272 href=${s.href} 3273 target="_blank" 3274 rel="noopener" 3275 style=" 3276 display: inline-flex; 3277 align-items: center; 3278 justify-content: center; 3279 gap: 6px; 3280 min-height: 34px; 3281 border-radius: 6px; 3282 border: 1px solid #dbdbe5; 3283 background: #ffffff; 3284 padding: 8px 12px; 3285 font-size: 12px; 3286 font-weight: 600; 3287 color: #010507; 3288 text-decoration: none; 3289 " 3290 > 3291 ${s.label} 3292 </a> 3293 `} 3294 </div> 3295 </div> 3296 </div> 3297 `}renderThreadsExampleTour(){if(!this.selectedThreadId||this.selectedThreadId!==this.selectedLocalExampleThreadId)return h.s6;if(!this.exampleTourActive)return(0,h.qy)` 3298 <button 3299 type="button" 3300 style=" 3301 position: absolute; 3302 right: 16px; 3303 bottom: 16px; 3304 z-index: 2; 3305 border: 1px solid #dbdbe5; 3306 border-radius: 6px; 3307 background: #ffffff; 3308 padding: 7px 10px; 3309 color: #57575b; 3310 font-size: 12px; 3311 font-weight: 600; 3312 cursor: pointer; 3313 box-shadow: 0 8px 18px rgba(1, 5, 7, 0.08); 3314 " 3315 @click=${()=>this.startExampleTour(!1)} 3316 > 3317 Show tour 3318 </button> 3319 `;let e=N[this.exampleTourStep]??N[0],t=0===this.exampleTourStep,i=this.exampleTourStep===N.length-1;return(0,h.qy)` 3320 <div 3321 role="dialog" 3322 aria-label="Example thread tour" 3323 style=" 3324 position: absolute; 3325 right: 16px; 3326 bottom: 16px; 3327 z-index: 3; 3328 width: min(340px, calc(100% - 32px)); 3329 border: 1px solid #dbdbe5; 3330 border-radius: 8px; 3331 background: #ffffff; 3332 padding: 14px; 3333 box-shadow: 0 16px 36px rgba(1, 5, 7, 0.14); 3334 color: #57575b; 3335 " 3336 > 3337 <div 3338 style=" 3339 margin-bottom: 8px; 3340 font-family: 'Spline Sans Mono', monospace; 3341 font-size: 10px; 3342 font-weight: 600; 3343 color: #087653; 3344 text-transform: uppercase; 3345 " 3346 > 3347 ${this.exampleTourStep+1}/${N.length} 3348 ${e.label} 3349 </div> 3350 <div 3351 style=" 3352 margin-bottom: 6px; 3353 font-size: 14px; 3354 line-height: 1.35; 3355 font-weight: 600; 3356 color: #010507; 3357 " 3358 > 3359 ${e.title} 3360 </div> 3361 <div style="font-size: 12px; line-height: 1.5; color: #57575b;"> 3362 ${e.body} 3363 </div> 3364 <div 3365 style=" 3366 display: flex; 3367 justify-content: space-between; 3368 gap: 8px; 3369 margin-top: 14px; 3370 " 3371 > 3372 <button 3373 type="button" 3374 style="border:0;background:transparent;color:#68686e;font-size:12px;font-weight:600;cursor:pointer;padding:7px 0;" 3375 @click=${()=>this.dismissExampleTour("skip")} 3376 > 3377 Skip 3378 </button> 3379 <div style="display:flex;gap:8px;"> 3380 <button 3381 type="button" 3382 style="border:1px solid #dbdbe5;border-radius:6px;background:#ffffff;color:#57575b;font-size:12px;font-weight:600;cursor:pointer;padding:7px 10px;" 3383 ?disabled=${t} 3384 @click=${()=>this.setExampleTourStep(this.exampleTourStep-1)} 3385 > 3386 Back 3387 </button> 3388 <button 3389 type="button" 3390 style="border:1px solid #010507;border-radius:6px;background:#010507;color:#ffffff;font-size:12px;font-weight:600;cursor:pointer;padding:7px 10px;" 3391 @click=${()=>i?this.dismissExampleTour("done"):this.setExampleTourStep(this.exampleTourStep+1)} 3392 > 3393 ${i?"Done":"Next"} 3394 </button> 3395 </div> 3396 </div> 3397 </div> 3398 `}
3398renderThreadsLockedBackgroundMockup(){return(0,h.qy)` 3399 <div 3400 aria-hidden="true" 3401 style=" 3402 position: absolute; 3403 inset: 0; 3404 display: grid; 3405 grid-template-columns: minmax(180px, 28%) 1fr; 3406 overflow: hidden; 3407 opacity: 0.58; 3408 pointer-events: none; 3409 " 3410 > 3411 <div 3412 style=" 3413 display: flex; 3414 flex-direction: column; 3415 gap: 12px; 3416 padding: 28px 24px; 3417 border-right: 1px solid #dbdbe5; 3418 background: #fafafa; 3419 " 3420 > 3421 ${[{width:74,accent:!0},{width:92},{width:68},{width:84},{width:58},{width:76}].map(e=>(0,h.qy)` 3422 <div 3423 style=" 3424 padding: 12px; 3425 border-radius: 8px; 3426 background: ${e.accent?"#eee6fe":"#ffffff"}; 3427 box-shadow: inset 0 0 0 1px #eeeef4; 3428 " 3429 > 3430 <div 3431 style=" 3432 height: 8px; 3433 width: ${e.width}%; 3434 border-radius: 99px; 3435 background: ${e.accent?"#a984f5":"#d7d7df"}; 3436 " 3437 ></div> 3438 <div 3439 style=" 3440 height: 6px; 3441 width: 88%; 3442 margin-top: 10px; 3443 border-radius: 99px; 3444 background: #e3e3eb; 3445 " 3446 ></div> 3447 <div 3448 style=" 3449 height: 6px; 3450 width: 62%; 3451 margin-top: 7px; 3452 border-radius: 99px; 3453 background: #e8e8ef; 3454 " 3455 ></div> 3456 </div> 3457 `)} 3458 </div> 3459 <div 3460 style=" 3461 min-width: 0; 3462 padding: 42px 48px; 3463 background: #ffffff; 3464 " 3465 > 3466 <div 3467 style=" 3468 height: 10px; 3469 width: 180px; 3470 border-radius: 99px; 3471 background: #d7d7df; 3472 " 3473 ></div> 3474 <div 3475 style=" 3476 height: 8px; 3477 width: min(520px, 58%); 3478 margin-top: 28px; 3479 border-radius: 99px; 3480 background: #e3e3eb; 3481 " 3482 ></div> 3483 <div 3484 style=" 3485 height: 8px; 3486 width: min(430px, 48%); 3487 margin-top: 12px; 3488 border-radius: 99px; 3489 background: #e8e8ef; 3490 " 3491 ></div> 3492 <div 3493 style=" 3494 display: grid; 3495 grid-template-columns: repeat(2, minmax(0, 1fr)); 3496 gap: 16px; 3497 max-width: 620px; 3498 margin-top: 30px; 3499 " 3500 > 3501 <div 3502 style=" 3503 height: 116px; 3504 border-radius: 8px; 3505 background: #f5f5f8; 3506 box-shadow: inset 0 0 0 1px #eeeef4; 3507 " 3508 ></div> 3509 <div 3510 style=" 3511 height: 116px; 3512 border-radius: 8px; 3513 background: #f5f5f8; 3514 box-shadow: inset 0 0 0 1px #eeeef4; 3515 " 3516 ></div> 3517 </div> 3518 <div 3519 style=" 3520 height: 10px; 3521 width: min(680px, 74%); 3522 margin-top: 34px; 3523 border-radius: 99px; 3524 background: #e3e3eb; 3525 " 3526 ></div> 3527 <div 3528 style=" 3529 height: 10px; 3530 width: min(560px, 60%); 3531 margin-top: 14px; 3532 border-radius: 99px; 3533 background: #e8e8ef; 3534 " 3535 ></div> 3536 </div> 3537 </div> 3538 `}getThreadsLockedCopy(){switch(this.inspectorMetadataProjection.licenseState){case"valid":return{heading:"Finish setting up Rich Threads",description:"Copy this prompt into your coding agent to finish the setup."};case"none":return{heading:"Enable Intelligence to inspect Threads.",description:"Persist conversations and inspect saved thread history from the Inspector."};case"expired":return{heading:"Renew Intelligence to inspect Threads.",description:"Your Intelligence access has expired. Renew it to inspect saved thread history."};case"unknown":return{heading:"Threads are unavailable.",description:"This runtime does not expose Threads for the Inspector."}}}renderMemoryRealtimeIndicator(){let e=this._memoriesRealtimeStatus,t="connected"===e;return(0,h.qy)`
3539 <span 3540 style=" 3541 display: inline-flex; 3542 align-items: center; 3543 gap: 4px; 3544 font-size: 10px; 3545 font-weight: 500; 3546 color: ${t?"#57575b":"#68686e"}; 3547 " 3548 > 3549 <span 3550 style=" 3551 display: inline-block; 3552 width: 6px; 3553 height: 6px; 3554 border-radius: 50%; 3555 background: ${t?"#22c55e":"connecting"===e?"#f59e0b":"#9ca3af"}; 3556 " 3557 ></span> 3558 ${"connected"===e?"live":"connecting"===e?"reconnecting":"offline"} 3559 </span> 3560 `}renderMemoriesView(){return this.core?.intelligence&&this._memoriesAvailable?this._memoriesError&&0===this._memories.length?(0,h.qy)` 3561 <div 3562 style=" 3563 display: flex; 3564 height: 100%; 3565 flex-direction: column; 3566 align-items: center; 3567 justify-content: center; 3568 gap: 8px; 3569 color: #68686e; 3570 " 3571 > 3572 <svg 3573 width="24" 3574 height="24"
3575 viewBox="0 0 24 24" 3576 fill="none" 3577 stroke="#c0333a" 3578 stroke-width="1.5" 3579 stroke-linecap="round" 3580 stroke-linejoin="round" 3581 > 3582 <circle cx="12" cy="12" r="10" /> 3583 <line x1="12" y1="8" x2="12" y2="12" /> 3584 <line x1="12" y1="16" x2="12.01" y2="16" /> 3585 </svg> 3586 <span style="font-size: 13px; color: #c0333a;"> 3587 Failed to load memories 3588 </span> 3589 <span 3590 style=" 3591 max-width: 320px; 3592 text-align: center; 3593 font-size: 11px; 3594 line-height: 1.5; 3595 color: #c0333a; 3596 " 3597 > 3598 ${this._memoriesError.message} 3599 </span> 3600 </div> 3601 `:this._memoriesLoading&&0===this._memories.length?(0,h.qy)` 3602 <div 3603 style=" 3604 display: flex; 3605 height: 100%; 3606 flex-direction: column; 3607 align-items: center; 3608 justify-content: center; 3609 gap: 8px; 3610 color: #68686e; 3611 " 3612 > 3613 <svg 3614 width="24" 3615 height="24"
3616 viewBox="0 0 24 24" 3617 fill="none" 3618 stroke="#c0c0c8" 3619 stroke-width="1.5" 3620 stroke-linecap="round" 3621 stroke-linejoin="round" 3622 > 3623 <path d="M21 12a9 9 0 1 1-6.219-8.56" /> 3624 </svg> 3625 <span style="font-size: 13px">Loading memoriesâ¦</span> 3626 </div> 3627 `:(0,h.qy)` 3628 <div style="display:flex;height:100%;overflow:hidden;flex-direction:column;"> 3629 <div class="cpk-section-header" style="display:flex;align-items:center;justify-content:space-between;"> 3630 <h4>${y}</h4> 3631 <div style="display:flex;align-items:center;gap:6px;"> 3632 ${this.renderMemoryRealtimeIndicator()} 3633 <span 3634 style=" 3635 font-size: 11px; 3636 font-weight: 500; 3637 color: #57575b; 3638 background: rgba(0,0,0,0.07); 3639 border-radius: 9999px; 3640 padding: 1px 7px; 3641 " 3642 > 3643 ${this._memories.length} 3644 </span> 3645 </div> 3646 </div> 3647 ${this._memoriesError?(0,h.qy)` 3648 <div 3649 role="alert" 3650 style=" 3651 display: flex; 3652 align-items: flex-start; 3653 gap: 8px; 3654 flex-shrink: 0; 3655 border-bottom: 1px solid #f1c7c9; 3656 background: #fdf3f3; 3657 padding: 8px 12px; 3658 color: #c0333a; 3659 font-size: 12px; 3660 line-height: 1.45; 3661 " 3662 > 3663 <svg 3664 width="16" 3665 height="16"
3666 viewBox="0 0 24 24" 3667 fill="none" 3668 stroke="#c0333a" 3669 stroke-width="1.5" 3670 stroke-linecap="round" 3671 stroke-linejoin="round" 3672 style="flex-shrink:0;margin-top:1px;" 3673 > 3674 <circle cx="12" cy="12" r="10" /> 3675 <line x1="12" y1="8" x2="12" y2="12" /> 3676 <line x1="12" y1="16" x2="12.01" y2="16" /> 3677 </svg> 3678 <span>Action failed: ${this._memoriesError.message}</span> 3679 </div> 3680 `:h.s6} 3681 <div style="flex:1;min-height:0;overflow:hidden;"> 3682 <cpk-memory-list 3683 style="height:100%;" 3684 .memories=${this._memories} 3685 .recallResults=${this._recallResults} 3686 .recallLoading=${this._recallLoading} 3687 .recallError=${this._recallError} 3688 .recallQueryText=${this._recallQuery} 3689 @recallQueryChanged=${e=>{this._recallQuery=e.detail}} 3690 @recallSubmitted=${e=>{this.runRecall(e.detail)}} 3691 @recallCleared=${()=>{this.clearRecall()}} 3692 ></cpk-memory-list> 3693 </div> 3694 </div> 3695 `:(0,h.qy)` 3696 <div 3697 style=" 3698 position: relative; 3699 height: 100%; 3700 display: flex; 3701 align-items: center; 3702 justify-content: center; 3703 padding: 32px; 3704 overflow: hidden; 3705 background: #ffffff; 3706 " 3707 > 3708 ${this.renderThreadsLockedBackgroundMockup()} 3709 <div 3710 aria-hidden="true" 3711 style=" 3712 position: absolute; 3713 inset: 0; 3714 pointer-events: none; 3715 background: 3716 radial-gradient(circle at center, rgba(255,255,255,0.9) 0, rgba(255,255,255,0.78) 24%, rgba(255,255,255,0.34) 48%, rgba(255,255,255,0.56) 100%); 3717 " 3718 ></div> 3719 <div 3720 style=" 3721 position: relative; 3722 z-index: 1; 3723 max-width: 440px; 3724 text-align: center; 3725 color: #57575b; 3726 " 3727 > 3728 <div 3729 aria-hidden="true" 3730 style=" 3731 margin: 0 auto 18px; 3732 display: flex; 3733 justify-content: center; 3734 " 3735 > 3736 <div 3737 style=" 3738 display: flex; 3739 height: 44px; 3740 width: 44px; 3741 align-items: center; 3742 justify-content: center; 3743 border: 1px solid #dfd6fb; 3744 border-radius: 8px; 3745 background: #eee6fe; 3746 color: #57575b; 3747 box-shadow: 0 8px 18px rgba(87, 87, 91, 0.14); 3748 " 3749 > 3750 ${this.renderIcon("Lock")} 3751 </div> 3752 </div> 3753 <h2 3754 style=" 3755 margin: 0 0 8px; 3756 font-size: 16px; 3757 line-height: 1.35; 3758 font-weight: 600; 3759 color: #010507; 3760 " 3761 > 3762 Long-term memory 3763 </h2> 3764 <p 3765 style=" 3766 margin: 0 auto 18px; 3767 max-width: 380px; 3768 font-size: 13px; 3769 line-height: 1.55; 3770 color: #57575b; 3771 " 3772 > 3773 ${this._memoryStoreUnsupported?"Long-term memory isn't available in this version of the @copilotkit SDK. Upgrade @copilotkit/core (and @copilotkit/react) to a version that supports memory.":"Long-term memory isn't enabled on this deployment."} 3774 </p> 3775 <div 3776 style=" 3777 display: flex; 3778 flex-wrap: wrap; 3779 justify-content: center; 3780 gap: 8px; 3781 " 3782 > 3783 <a 3784 href=${this.getTalkToEngineerUrl()} 3785 target="_blank" 3786 rel="noopener" 3787 style=" 3788 display: inline-flex; 3789 min-height: 34px; 3790 align-items: center; 3791 justify-content: center; 3792 gap: 6px; 3793 border-radius: 6px; 3794 background: #010507; 3795 padding: 8px 12px; 3796 font-size: 12px; 3797 font-weight: 600; 3798 color: #ffffff; 3799 text-decoration: none; 3800 " 3801 @click=${this.handleThreadsTalkToEngineerClick} 3802 > 3803 Talk to an Engineer 3804 </a> 3805 <a 3806 href=${this.getIntelligenceSignupUrl()} 3807 target="_blank" 3808 rel="noopener" 3809 style=" 3810 display: inline-flex; 3811 min-height: 34px; 3812 align-items: center; 3813 justify-content: center; 3814 gap: 6px; 3815 border-radius: 6px; 3816 border: 1px solid #dbdbe5; 3817 background: #ffffff; 3818 padding: 8px 12px; 3819 font-size: 12px; 3820 font-weight: 600; 3821 color: #57575b; 3822 text-decoration: none; 3823 " 3824 @click=${this.handleThreadsIntelligenceSignupClick} 3825 > 3826 Sign up for Intelligence 3827 </a> 3828 </div> 3829 </div> 3830 </div> 3831 `}renderThreadsUsageFooter(){let e,t,i,{usage:s,threadsFooterAction:n}=this.inspectorMetadataProjection;if(!s&&!n)return h.s6;let a=this.getThreadsCapacityState();return s&&("finite"===s.limit.kind?(e=`${s.used>s.limit.value?`${s.limit.value}+`:String(s.used)} / ${s.limit.value} Threads`,t=s.limit.value,i=Math.min(s.used,s.limit.value)):e="unlimited"===s.limit.kind?`${s.used} Threads \xb7 Unlimited`:`${s.used} Threads \xb7 Limit unavailable`),(0,h.qy)` 3832 <footer 3833 class="inspector-threads-footer"
3834 data-inspector-threads-footer 3835 role="group" 3836 aria-label="Threads usage" 3837 > 3838 ${s&&e?(0,h.qy)` 3839 <div class="inspector-threads-usage"> 3840 <span data-inspector-thread-count>${e}</span> 3841 ${void 0!==t&&void 0!==i?(0,h.qy)` 3842 <progress 3843 class="inspector-thread-progress" 3844 data-inspector-thread-progress 3845 data-inspector-thread-capacity=${a} 3846 max=${t} 3847 value=${i} 3848 aria-label=${"warning"===a?`${e}. Near thread limit.`:"critical"===a?`${e}. Thread limit reached.`:e} 3849 >${e}</progress 3850 > 3851 `:h.s6} 3852 ${void 0!==s.expiringSoonCount?(0,h.qy)` 3853 <span data-inspector-thread-expiry 3854 >${s.expiringSoonCount} Expiring Soon</span 3855 > 3856 `:h.s6} 3857 </div> 3858 `:h.s6} 3859 ${n?this.renderInspectorAction(n,"threads-footer","warning"===a||"critical"===a?"Upgrade Your Plan":n.label):h.s6} 3860 </footer> 3861 `}renderThreadsView(){let e=!this.areThreadEndpointsAvailable(),{displayThreads:t,threadsErrorMessage:i,threadsLoading:s}=this.getActiveThreadsState(),n=!e&&s&&!i&&0===t.length,a=this.shouldRenderExampleThreads(e,t,i,s),r=!e&&(i||n)?[]:a?L:t;a&&this.trackThreadsExampleViewedOnce();let o=null!=this.selectedThreadId?r.find(e=>e.id===this.selectedThreadId)??null:null,l=null!==o&&o.id===this.selectedLocalExampleThreadId;return e?this.trackThreadsViewStateOnce("locked"):i||s&&!(t.length>0)||this.trackThreadsViewStateOnce(0===t.length?"empty_enabled":"enabled"),(0,h.qy)` 3862 <div style="display:flex;height:100%;overflow:hidden;flex-direction:column;"> 3863 <div style="display:flex;min-height:0;flex:1;overflow:hidden;"> 3864 <!-- Left sidebar: thread list --> 3865 <div 3866 style="width:${this.threadListWidth}px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;border-right:1px solid #DBDBE5;" 3867 > 3868 <cpk-thread-list 3869 style="min-height:0;flex:1;" 3870 .threads=${r} 3871 .selectedThreadId=${this.selectedThreadId} 3872 .errorMessage=${i} 3873 .suppressEmptyState=${n} 3874 @threadSelected=${e=>{this.handleThreadsThreadSelected(e.detail,a)}} 3875 ></cpk-thread-list> 3876 ${this.renderThreadsUsageFooter()} 3877 </div> 3878 3879 <!-- Resize divider --> 3880 <div 3881 style="width:4px;flex-shrink:0;cursor:col-resize;background:transparent;position:relative;z-index:1;" 3882 @pointerdown=${this.handleThreadDividerPointerDown} 3883 @pointermove=${this.handleThreadDividerPointerMove} 3884 @pointerup=${this.handleThreadDividerPointerUp} 3885 @pointercancel=${this.handleThreadDividerPointerUp} 3886 ></div> 3887 3888 <!-- Center + right: thread details or empty state --> 3889 <div style="flex:1;min-width:0;overflow:hidden;display:flex;position:relative;"> 3890 ${!e&&i?(0,h.qy)` 3891 <div 3892 role="alert" 3893 style=" 3894 display: flex; 3895 flex: 1; 3896 flex-direction: column; 3897 align-items: center; 3898 justify-content: center; 3899 gap: 6px; 3900 padding: 24px; 3901 color: #c0333a; 3902 text-align: center; 3903 " 3904 > 3905 <strong style="font-size:13px;">Failed to load threads</strong> 3906 <span style="max-width:440px;font-size:12px;line-height:1.5;" 3907 >${i}</span 3908 > 3909 </div> 3910 `:n?(0,h.qy)` 3911 <div 3912 role="status" 3913 style=" 3914 display: flex; 3915 flex: 1; 3916 align-items: center; 3917 justify-content: center; 3918 color: #57575b; 3919 font-size: 13px; 3920 " 3921 > 3922 Loading threads⦠3923 </div> 3924 `:o?(0,h.qy)`<cpk-thread-details 3925 style="flex:1;min-width:0;" 3926 .threadId=${o.id} 3927 .thread=${o} 3928 .provider=${l?this.getExampleThreadProvider(o.id):null} 3929 .runtimeUrl=${l?"":this._core?.runtimeUrl??""} 3930 .headers=${this._core?.headers??{}} 3931 .threadInspectionAvailable=${l||this.areThreadEndpointsAvailable()&&this._core?.threadEndpoints?.inspect!==!1} 3932 .liveMessageVersion=${this.liveMessageVersion.get(o.id)??0} 3933 .focusMessageId=${this.focusedThreadMessageId} 3934 .focusRequestId=${this.threadFocusRequestId} 3935 .agentStateInput=${this.getLatestStateForAgent(o.agentId)} 3936 .agentEventsInput=${this.agentEvents.get(o.agentId)??[]} 3937 ></cpk-thread-details> 3938 ${l?this.renderThreadsExampleTour():h.s6}`:a?this.renderThreadsExampleOverview(e):(0,h.qy)` 3939 <div 3940 style=" 3941 flex: 1; 3942 display: flex; 3943 flex-direction: column; 3944 align-items: center; 3945 justify-content: center; 3946 gap: 8px; 3947 color: #68686e; 3948 " 3949 > 3950 <svg 3951 width="32" 3952 height="32"
3953 viewBox="0 0 24 24" 3954 fill="none" 3955 stroke="#c0c0c8" 3956 stroke-width="1.5" 3957 stroke-linecap="round" 3958 stroke-linejoin="round" 3959 > 3960 <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /> 3961 </svg> 3962 <span style="font-size: 13px">${0===t.length?"No threads yet":"Select a thread to inspect"}</span> 3963 </div> 3964 `} 3965 </div> 3966 </div> 3967 </div> 3968 `}renderEventsTable(){let e=this.getEventsForSelectedContext(),t=this.filterEvents(e),i="all-agents"===this.selectedContext?"all agents":`agent ${this.selectedContext}`;return 0===e.length?(0,h.qy)` 3969 <div 3970 class="flex h-full flex-col items-center justify-center gap-2 px-4 py-10 text-center" 3971 > 3972 <div class="text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8"> 3973 ${this.renderIcon("Zap")} 3974 </div> 3975 <span class="text-sm text-gray-600">No events yet</span> 3976 <span class="max-w-[240px] text-xs leading-snug text-gray-400" 3977 >Events are recorded live. Run the agent to see them here.</span 3978 > 3979 </div> 3980 `:0===t.length?(0,h.qy)` 3981 <div 3982 class="flex h-full items-center justify-center px-4 py-8 text-center" 3983 >
3984 <div class="max-w-md space-y-3"> 3985 <div 3986 class="flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8" 3987 > 3988 ${this.renderIcon("Filter")} 3989 </div> 3990 <p class="text-sm text-gray-600"> 3991 No events match the current filters. 3992 </p> 3993 <div> 3994 <button 3995 type="button" 3996 class="inline-flex items-center gap-1 rounded-md bg-gray-900 px-3 py-1.5 text-[11px] font-medium text-white transition hover:bg-gray-800" 3997 @click=${this.resetEventFilters} 3998 > 3999 ${this.renderIcon("RefreshCw")} 4000 <span>Reset filters</span> 4001 </button> 4002 </div> 4003 </div> 4004 </div> 4005 `:(0,h.qy)` 4006 <div class="flex h-full flex-col"> 4007 <div 4008 class="flex flex-col gap-1.5 border-b border-gray-200 bg-white px-4 py-2.5" 4009 > 4010 <div class="flex flex-wrap items-center gap-2"> 4011 <div class="relative min-w-[200px] flex-1"> 4012 <input 4013 type="search" 4014 class="w-full rounded-md border border-gray-200 px-3 py-1.5 text-[11px] text-gray-700 shadow-sm outline-none ring-1 ring-transparent transition focus:border-gray-300 focus:ring-gray-200" 4015 placeholder="Search agent, type, payload" 4016 .value=${this.eventFilterText} 4017 @input=${this.handleEventFilterInput} 4018 /> 4019 </div> 4020 <select 4021 class="w-40 rounded-md border border-gray-200 bg-white px-2 py-1.5 text-[11px] text-gray-700 shadow-sm outline-none transition focus:border-gray-300 focus:ring-2 focus:ring-gray-200" 4022 .value=${this.eventTypeFilter} 4023 @change=${this.handleEventTypeChange} 4024 > 4025 <option value="all">All event types</option> 4026 ${z.map(e=>(0,h.qy)`<option value=${e}> 4027 ${e.toLowerCase().replace(/_/g," ")} 4028 </option>`)} 4029 </select> 4030 <div class="flex items-center gap-1 text-[11px]"> 4031 <button 4032 type="button" 4033 class="tooltip-target flex h-8 w-8 items-center justify-center rounded-md border border-gray-200 bg-white text-gray-600 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50" 4034 title="Reset filters" 4035 data-tooltip="Reset filters" 4036 aria-label="Reset filters" 4037 @click=${this.resetEventFilters} 4038 ?disabled=${!this.eventFilterText&&"all"===this.eventTypeFilter} 4039 > 4040 ${this.renderIcon("RotateCw")} 4041 </button> 4042 <button 4043 type="button" 4044 class="tooltip-target flex h-8 w-8 items-center justify-center rounded-md border border-gray-200 bg-white text-gray-600 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50" 4045 title="Export JSON" 4046 data-tooltip="Export JSON" 4047 aria-label="Export JSON" 4048 @click=${()=>this.exportEvents(t)} 4049 ?disabled=${0===t.length} 4050 > 4051 ${this.renderIcon("Download")} 4052 </button> 4053 <button 4054 type="button" 4055 class="tooltip-target flex h-8 w-8 items-center justify-center rounded-md border border-gray-200 bg-white text-gray-600 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50" 4056 title="Clear events" 4057 data-tooltip="Clear events" 4058 aria-label="Clear events" 4059 @click=${this.handleClearEvents} 4060 ?disabled=${0===e.length} 4061 > 4062 ${this.renderIcon("Trash2")} 4063 </button> 4064 </div> 4065 </div> 4066 <div class="text-[11px] text-gray-500"> 4067 Showing ${t.length} of 4068 ${e.length}${"all-agents"===this.selectedContext?"":` for ${i}`} 4069 </div> 4070 </div> 4071 <div class="relative h-full w-full overflow-y-auto overflow-x-hidden"> 4072 <table class="w-full table-fixed border-collapse text-xs box-border"> 4073 <colgroup> 4074 <col style="width:${this.evtColWidths[0]}px" /> 4075 <col style="width:${this.evtColWidths[1]}px" /> 4076 <col style="width:${this.evtColWidths[2]}px" /> 4077 <col /> 4078 </colgroup> 4079 <thead class="sticky top-0 z-10"> 4080 <tr class="bg-white"> 4081 ${["Agent","Time","Event Type"].map((e,t)=>(0,h.qy)` <th 4082 class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900" 4083 style="position:relative;overflow:hidden;" 4084 > 4085 ${e} 4086 <div 4087 style="position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;user-select:none;background:transparent;" 4088 @pointerdown=${e=>this._onEvtColResizeStart(e,t)} 4089 @pointermove=${e=>this._onEvtColResizeMove(e)} 4090 @pointerup=${()=>this._onEvtColResizeEnd()} 4091 @pointercancel=${()=>this._onEvtColResizeEnd()} 4092 ></div> 4093 </th>`)} 4094 <th 4095 class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900" 4096 > 4097 AG-UI Event 4098 </th> 4099 </tr> 4100 </thead> 4101 <tbody> 4102 ${t.map((e,t)=>{let i=this.getEventBadgeClasses(e.type),s=this.extractEventFromPayload(e.payload),n=this.stringifyPayload(s,!1)||"â",a=this.stringifyPayload(s,!0)||n,r=this.expandedRows.has(e.id);return(0,h.qy)` 4103 <tr 4104 class="${t%2==0?"bg-white":"bg-gray-50/50"} cursor-pointer transition hover:bg-blue-50/50" 4105 @click=${t=>this.toggleRowExpansion(e.id,t)} 4106 > 4107 <td 4108 class="border-l border-r border-b border-gray-200 px-3 py-2" 4109 >
4110 <span class="font-mono text-[11px] text-gray-600" 4111 >${e.agentId}</span 4112 > 4113 </td> 4114 <td 4115 class="border-r border-b border-gray-200 px-3 py-2 font-mono text-[11px] text-gray-600" 4116 > 4117 <span title=${new Date(e.timestamp).toLocaleString()}> 4118 ${new Date(e.timestamp).toLocaleTimeString()} 4119 </span> 4120 </td> 4121 <td class="border-r border-b border-gray-200 px-3 py-2"> 4122 <span class=${i}>${e.type}</span> 4123 </td> 4124 <td 4125 class="border-r border-b border-gray-200 px-3 py-2 font-mono text-[10px] text-gray-600 ${r?"":"truncate max-w-xs"}" 4126 > 4127 ${r?(0,h.qy)` 4128 <div class="group relative"> 4129 <pre 4130 class="m-0 whitespace-pre-wrap break-words text-[10px] font-mono text-gray-600" 4131 > 4132${a}</pre 4133 > 4134 <button 4135 class="absolute right-0 top-0 cursor-pointer rounded px-2 py-1 text-[10px] opacity-0 transition group-hover:opacity-100 ${this.copiedEvents.has(e.id)?"bg-green-100 text-green-700":"bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900"}" 4136 @click=${t=>{t.stopPropagation(),this.copyToClipboard(a,e.id,t)}} 4137 > 4138 ${this.copiedEvents.has(e.id)?(0,h.qy)` 4139 <span>â Copied</span> 4140 `:(0,h.qy)` 4141 <span>Copy</span> 4142 `} 4143 </button> 4144 </div> 4145 `:n} 4146 </td> 4147 </tr> 4148 `})} 4149 </tbody> 4150 </table> 4151 </div> 4152 </div> 4153 `}handleEventFilterInput(e){this.eventFilterText=e.target?.value??"",this.requestUpdate()}handleEventTypeChange(e){let t=e.target?.value;t&&(this.eventTypeFilter=t,this.requestUpdate())}resetEventFilters(){this.eventFilterText="",this.eventTypeFilter="all",this.requestUpdate()}_onEvtColResizeStart(e,t){e.preventDefault(),e.stopPropagation(),e.currentTarget.setPointerCapture(e.pointerId),this._evtColResize={col:t,startX:e.clientX,startW:this.evtColWidths[t]??0}}_onEvtColResizeMove(e){if(!this._evtColResize)return;let{col:t,startX:i,startW:s}=this._evtColResize;this.evtColWidths=this.evtColWidths.map((n,a)=>a===t?Math.max(40,s+(e.clientX-i)):n),this.requestUpdate()}_onEvtColResizeEnd(){this._evtColResize=null}exportEvents(e){try{let t=JSON.stringify(e,null,2),i=new Blob([t],{type:"application/json"}),s=URL.createObjectURL(i),n=document.createElement("a");n.href=s,n.download=`copilotkit-events-${Date.now()}.json`,n.click(),URL.revokeObjectURL(s)}catch(e){console.error("Failed to export events",e)}}renderAgentsView(){if("all-agents"===this.selectedContext)return(0,h.qy)` 4154 <div 4155 class="flex h-full items-center justify-center px-4 py-8 text-center" 4156 > 4157 <div class="max-w-md"> 4158 <div 4159 class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8" 4160 > 4161 ${this.renderIcon("Bot")} 4162 </div> 4163 <p class="text-sm text-gray-600">No agent selected</p> 4164 <p class="mt-2 text-xs text-gray-500"> 4165 Select an agent from the dropdown above to view details. 4166 </p> 4167 </div> 4168 </div> 4169 `;let e=this.selectedContext,t=this.getAgentStatus(e),i=this.getAgentStats(e),s=this.getLatestStateForAgent(e),n=this.getLatestMessagesForAgent(e);return(0,h.qy)` 4170 <div class="flex flex-col gap-4 p-4 overflow-auto"> 4171 <!-- Agent Overview Card --> 4172 <div class="rounded-lg border border-gray-200 bg-white p-4"> 4173 <div class="flex items-start justify-between mb-4"> 4174 <div class="flex items-center gap-3"> 4175 <div 4176 class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600 cpk-agent-icon" 4177 > 4178 ${this.renderIcon("Bot")} 4179 </div> 4180 <div> 4181 <h3 class="font-semibold text-sm text-gray-900">${e}</h3>
4182 <span 4183 class="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium ${({running:"bg-emerald-50 text-emerald-700",idle:"bg-gray-100 text-gray-600",error:"bg-rose-50 text-rose-700"})[t]} relative -translate-y-[2px]" 4184 > 4185 <span 4186 class="h-1.5 w-1.5 rounded-full ${"running"===t?"bg-emerald-500 animate-pulse":"error"===t?"bg-rose-500":"bg-gray-400"}" 4187 ></span> 4188 ${t.charAt(0).toUpperCase()+t.slice(1)} 4189 </span> 4190 </div> 4191 </div> 4192 ${i.lastActivity?(0,h.qy)`<span class="text-xs text-gray-500" 4193 >Last activity: 4194 ${new Date(i.lastActivity).toLocaleTimeString()}</span 4195 >`:h.s6} 4196 </div> 4197 <div class="grid grid-cols-2 gap-4 md:grid-cols-4"> 4198 <button 4199 type="button" 4200 class="rounded-md bg-gray-50 px-3 py-2 text-left transition hover:bg-gray-100 cursor-pointer overflow-hidden cpk-stat-card" 4201 @click=${()=>this.handleMenuSelect("ag-ui-events")} 4202 title="View all events in AG-UI Events" 4203 > 4204 <div class="truncate whitespace-nowrap text-xs text-gray-600"> 4205 Total Events 4206 </div> 4207 <div class="text-lg font-semibold text-gray-900"> 4208 ${i.totalEvents} 4209 </div> 4210 </button> 4211 <div 4212 class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden cpk-stat-card" 4213 > 4214 <div class="truncate whitespace-nowrap text-xs text-gray-600"> 4215 Messages 4216 </div> 4217 <div class="text-lg font-semibold text-gray-900"> 4218 ${i.messages} 4219 </div> 4220 </div> 4221 <div 4222 class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden cpk-stat-card" 4223 > 4224 <div class="truncate whitespace-nowrap text-xs text-gray-600"> 4225 Tool Calls 4226 </div> 4227 <div class="text-lg font-semibold text-gray-900"> 4228 ${i.toolCalls} 4229 </div> 4230 </div> 4231 <div 4232 class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden cpk-stat-card" 4233 > 4234 <div class="truncate whitespace-nowrap text-xs text-gray-600"> 4235 Errors 4236 </div> 4237 <div class="text-lg font-semibold text-gray-900"> 4238 ${i.errors} 4239 </div> 4240 </div> 4241 </div> 4242 </div> 4243 4244 <!-- Current State Section --> 4245 <div class="cpk-section-card"> 4246 <div class="cpk-section-header"> 4247 <h4>Current State</h4> 4248 </div> 4249 <div class="overflow-auto p-4"> 4250 ${this.hasRenderableState(s)?(0,h.qy)` 4251 <pre 4252 class="overflow-auto rounded-md bg-gray-50 p-3 text-xs text-gray-800 max-h-64" 4253 ><code>${this.formatStateForDisplay(s)}</code></pre> 4254 `:(0,h.qy)` 4255 <div 4256 class="flex h-12 items-center justify-center text-xs text-gray-500" 4257 > 4258 <div class="flex items-center gap-2 text-gray-500"> 4259 <span class="text-lg text-gray-400" 4260 >${this.renderIcon("Database")}</span 4261 > 4262 <span>State is empty</span> 4263 </div> 4264 </div> 4265 `} 4266 </div> 4267 </div> 4268 4269 <!-- Current Messages Section --> 4270 <div class="cpk-section-card"> 4271 <div class="cpk-section-header"> 4272 <h4>Current Messages</h4> 4273 </div> 4274 <div class="overflow-auto"> 4275 ${n&&n.length>0?(0,h.qy)` 4276 <div class="w-full text-xs"> 4277 <div class="flex bg-gray-50"> 4278 <div 4279 class="w-40 shrink-0 px-4 py-2 font-medium text-gray-700" 4280 > 4281 Role 4282 </div> 4283 <div class="flex-1 px-4 py-2 font-medium text-gray-700"> 4284 Content 4285 </div> 4286 </div> 4287 <div class="divide-y divide-gray-200"> 4288 ${n.map(e=>{let t=e.role||"unknown",i={user:"bg-blue-100 text-blue-800",assistant:"bg-green-100 text-green-800",system:"bg-gray-100 text-gray-800",tool:"bg-amber-100 text-amber-800",unknown:"bg-gray-100 text-gray-600"},s=e.contentText??"",n=e.toolCalls??[],a=s.trim().length>0,r=n.length>0?"Invoked tool call":"â";return(0,h.qy)` 4289 <div class="flex items-start"> 4290 <div class="w-40 shrink-0 px-4 py-2">
4291 <span 4292 class="inline-flex rounded px-2 py-0.5 text-[10px] font-medium ${i[t]||i.unknown}" 4293 > 4294 ${t} 4295 </span> 4296 </div> 4297 <div class="flex-1 px-4 py-2"> 4298 ${a?(0,h.qy)`<div 4299 class="whitespace-pre-line break-words text-gray-700" 4300 > 4301 ${s} 4302 </div>`:(0,h.qy)`<div class="italic text-gray-400"> 4303 ${r} 4304 </div>`} 4305 ${"assistant"===t&&n.length>0?this.renderToolCallDetails(n):h.s6} 4306 </div> 4307 </div> 4308 `})} 4309 </div> 4310 </div> 4311 `:(0,h.qy)` 4312 <div 4313 class="flex h-12 items-center justify-center text-xs text-gray-500" 4314 > 4315 <div class="flex items-center gap-2 text-gray-500"> 4316 <span class="text-lg text-gray-400" 4317 >${this.renderIcon("MessageSquare")}</span 4318 > 4319 <span>No messages available</span> 4320 </div> 4321 </div> 4322 `} 4323 </div> 4324 </div> 4325 </div> 4326 `}renderContextDropdown(){let e="agents"===this.selectedMenu?this.contextOptions.filter(e=>"all-agents"!==e.key):this.contextOptions,t=e.find(e=>e.key===this.selectedContext)?.label??"";return(0,h.qy)` 4327 <div 4328 class="relative z-40 min-w-0 flex-1" 4329 data-context-dropdown-root="true" 4330 > 4331 <button 4332 type="button" 4333 class="relative z-40 flex w-full min-w-0 max-w-[240px] items-center gap-1.5 rounded-md border border-gray-200 px-2 py-1 text-xs font-medium text-gray-700 transition hover:border-gray-300 hover:bg-gray-50" 4334 @pointerdown=${this.handleContextDropdownToggle} 4335 > 4336 <span class="truncate flex-1 text-left">${t}</span> 4337 <span class="shrink-0 text-gray-400" 4338 >${this.renderIcon("ChevronDown")}</span 4339 > 4340 </button> 4341 ${this.contextMenuOpen?(0,h.qy)` 4342 <div 4343 class="absolute left-0 z-50 mt-1.5 w-40 rounded-md border border-gray-200 bg-white py-1 shadow-md ring-1 ring-black/5" 4344 data-context-dropdown-root="true" 4345 > 4346 ${e.map(e=>(0,h.qy)` 4347 <button 4348 type="button" 4349 class="flex w-full items-center justify-between px-3 py-1.5 text-left text-xs transition hover:bg-gray-50 focus:bg-gray-50 focus:outline-none" 4350 data-context-dropdown-root="true" 4351 @click=${()=>this.handleContextOptionSelect(e.key)} 4352 > 4353 <span 4354 class="truncate ${e.key===this.selectedContext?"text-gray-900 font-medium":"text-gray-600"}" 4355 >${e.label}</span 4356 > 4357 ${e.key===this.selectedContext?(0,h.qy)`<span class="text-gray-500" 4358 >${this.renderIcon("Check")}</span 4359 >`:h.s6} 4360 </button> 4361 `)} 4362 </div> 4363 `:h.s6} 4364 </div> 4365 `}handleMenuSelect(e){if(!this.menuItems.some(t=>t.key===e))return;let t=this.selectedMenu;if(this.pendingPersistedMenu=null,this.selectedMenu=e,this.settingsOpen=!1,this.lastSelectedMenuByGroup[this.getGroupForMenu(e)]=e,"agents"===e&&"all-agents"===this.selectedContext){let e=this.contextOptions.filter(e=>"all-agents"!==e.key);if(e.length>0){let t=e.reduce((e,t)=>{let i=this.getAgentStats(t.key).lastActivity??-1;return null===e||i>e.ts?{key:t.key,ts:i}:e},null);this.selectedContext=t?t.key:e[0].key}}"agents"===t&&"agents"!==e&&this.contextOptions.filter(e=>"all-agents"!==e.key).length>1&&(this.selectedContext="all-agents"),"threads"===e&&("threads"===t||this.core?.telemetryDisabled||(0,p.x0)(this.getThreadsTelemetryProps()),this.autoSelectLatestThread()),"memories"===e&&(this.ensureMemorySubscription(),"memories"===t||this.core?.telemetryDisabled||(0,p.JV)(this.getMemoriesTelemetryProps())),("ag-ui-events"===e||"agents"===e)&&requestAnimationFrame(()=>{let e=this.activeRoot.querySelector("#cpk-main-scroll");e&&(e.scrollTop=0)}),this.contextMenuOpen=!1,this.persistState(),this.requestUpdate()}handleContextDropdownToggle(e){e.preventDefault(),e.stopPropagation(),this.contextMenuOpen=!this.contextMenuOpen,this.requestUpdate()}handleContextOptionSelect(e){this.contextOptions.some(t=>t.key===e)&&(this.selectedContext!==e&&(this.selectedContext=e,this.expandedRows.clear(),this.autoSelectLatestThread()),this.contextMenuOpen=!1,this.persistState(),this.requestUpdate())}renderCapabilitiesView(){if(!this._core)return(0,h.qy)` 4366 <div 4367 class="flex h-full items-center justify-center px-4 py-8 text-xs text-gray-500" 4368 > 4369 No core instance available 4370 </div> 4371 `;let e=D(this._core),t=this._core.catalogComponents??[],i=t.length>0;return 0!==e.length||i?(0,h.qy)` 4372 <div class="flex h-full flex-col overflow-hidden"> 4373 <div class="overflow-auto p-4"> 4374 <div class="space-y-3"> 4375 <p class="text-xs text-gray-500"> 4376 Toggle a capability off to omit it from what the agent sees. This 4377 is a client-side experimentation surface and takes effect 4378 immediately. 4379 </p> 4380 </div> 4381 4382 ${e.length>0?(0,h.qy)` 4383 <div class="mt-4 space-y-2"> 4384 <h3 class="text-sm text-slate-500">Frontend tools</h3> 4385 <div class="space-y-2"> 4386 ${e.map(e=>this.renderCapabilityRow(e))} 4387 </div> 4388 </div> 4389 `:h.s6} 4390 4391 ${i?(0,h.qy)` 4392 <div class="mt-6 space-y-2"> 4393 <h3 class="text-sm text-slate-500">A2UI catalog components</h3> 4394 <div class="space-y-2"> 4395 ${t.map(e=>this.renderCapabilityRow({key:e.name,name:e.name,description:e.description,enabled:this._core.isCatalogComponentEnabled(e.name)}))} 4396 </div> 4397 </div> 4398 `:h.s6} 4399 </div> 4400 </div> 4401 `:(0,h.qy)` 4402 <div class="flex h-full items-center justify-center px-4 py-8 text-center"> 4403 <div class="max-w-md"> 4404 <div class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8"> 4405 ${this.renderIcon("SlidersHorizontal")} 4406 </div> 4407 <p class="text-sm text-gray-600">No capabilities registered</p> 4408 <p class="mt-2 text-xs text-gray-500"> 4409 Frontend tools and A2UI catalog components will appear here once 4410 they are registered on the CopilotKit core. 4411 </p> 4412 </div> 4413 </div> 4414 `}renderCapabilityRow(e){let t=e.key.includes(":");return(0,h.qy)` 4415 <div class="flex items-center justify-between gap-3 rounded-lg border border-gray-200 bg-white px-4 py-3"> 4416 <div class="min-w-0 flex-1"> 4417 <div class="flex items-center gap-2">
4418 <span class="font-mono text-sm font-semibold text-gray-900">${e.name}</span> 4419 ${e.agentId?(0,h.qy)`<span class="inline-flex items-center gap-1 text-xs text-gray-500"> 4420 ${this.renderIcon("Bot")}<span class="font-mono">${e.agentId}</span> 4421 </span>`:h.s6} 4422 </div> 4423 ${e.description?(0,h.qy)`<p class="mt-1 text-xs text-gray-600">${e.description}</p>`:h.s6} 4424 </div> 4425 ${this.renderCapabilitySwitch(e.enabled,()=>t?this.handleToggleTool(e):this.handleToggleCatalogComponent(e.name))} 4426 </div> 4427 `}renderCapabilitySwitch(e,t){return(0,h.qy)` 4428 <button 4429 type="button" 4430 role="switch" 4431 aria-checked=${e?"true":"false"} 4432 class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300 ${e?"bg-emerald-500":"bg-gray-300"}" 4433 @click=${t} 4434 > 4435 <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${e?"translate-x-4":"translate-x-0.5"}"></span> 4436 </button> 4437 `}handleToggleTool(e){if(!this._core)return;let t=!e.enabled;this._core.setToolEnabled(e.name,t,e.agentId),this._capabilitiesVersion+=1,this.requestUpdate()}handleToggleCatalogComponent(e){if(!this._core)return;let t=!this._core.isCatalogComponentEnabled(e);this._core.setCatalogComponentEnabled(e,t),this._capabilitiesVersion+=1,this.requestUpdate()}renderToolsView(){if(!this._core)return(0,h.qy)` 4438 <div 4439 class="flex h-full items-center justify-center px-4 py-8 text-xs text-gray-500" 4440 > 4441 No core instance available 4442 </div> 4443 `;this.refreshToolsSnapshot();let e=this.cachedTools;return 0===e.length?(0,h.qy)` 4444 <div 4445 class="flex h-full items-center justify-center px-4 py-8 text-center" 4446 > 4447 <div class="max-w-md"> 4448 <div 4449 class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8" 4450 > 4451 ${this.renderIcon("Hammer")} 4452 </div> 4453 <p class="text-sm text-gray-600">No tools available</p> 4454 <p class="mt-2 text-xs text-gray-500"> 4455 Tools will appear here once agents are configured with tool 4456 handlers or renderers. 4457 </p> 4458 </div> 4459 </div> 4460 `:(0,h.qy)` 4461 <div class="flex h-full flex-col overflow-hidden"> 4462 <div class="overflow-auto p-4"> 4463 <div class="space-y-3"> 4464 ${("all-agents"===this.selectedContext?e:e.filter(e=>!e.agentId||e.agentId===this.selectedContext)).map(e=>this.renderToolCard(e))} 4465 </div> 4466 </div> 4467 </div> 4468 `}extractToolsFromAgents(){if(!this._core)return[];let e=[];for(let t of this._core.tools??[])e.push({agentId:t.agentId??"",name:t.name,description:t.description,parameters:t.parameters,type:"handler"});for(let[t,i]of Object.entries(this._core.agents)){if(!i)continue;let s=i.toolHandlers;if(s&&"object"==typeof s)for(let[i,n]of Object.entries(s))n&&"object"==typeof n&&e.push({agentId:t,name:i,description:"string"==typeof n.description&&n.description||n.tool?.description,parameters:n.parameters??n.tool?.parameters,type:"handler"});let n=i.toolRenderers;if(n&&"object"==typeof n)for(let[i,s]of Object.entries(n))!e.some(e=>e.agentId===t&&e.name===i)&&s&&"object"==typeof s&&e.push({agentId:t,name:i,description:"string"==typeof s.description&&s.description||s.tool?.description,parameters:s.parameters??s.tool?.parameters,type:"renderer"})}return e.sort((e,t)=>{let i=e.agentId.localeCompare(t.agentId);return 0!==i?i:e.name.localeCompare(t.name)})}renderToolCard(e){let t=this.expandedTools.has(`${e.agentId}:${e.name}`),i=this.extractSchemaInfo(e.parameters);return(0,h.qy)` 4469 <div class="rounded-lg border border-gray-200 bg-white overflow-hidden"> 4470 <button 4471 type="button" 4472 class="w-full px-4 py-3 text-left transition hover:bg-gray-50" 4473 @click=${()=>this.toggleToolExpansion(`${e.agentId}:${e.name}`)} 4474 > 4475 <div class="flex items-start justify-between gap-3"> 4476 <div class="flex-1 min-w-0"> 4477 <div class="flex items-center gap-2 mb-1">
4478 <span class="font-mono text-sm font-semibold text-gray-900" 4479 >${e.name}</span 4480 > 4481 <span 4482 class="inline-flex items-center rounded-sm border px-1.5 py-0.5 text-[10px] font-medium ${({handler:"bg-blue-50 text-blue-700 border-blue-200",renderer:"bg-purple-50 text-purple-700 border-purple-200"})[e.type]}" 4483 > 4484 ${e.type} 4485 </span> 4486 </div> 4487 <div class="flex items-center gap-2 text-xs text-gray-500"> 4488 <span class="flex items-center gap-1"> 4489 ${this.renderIcon("Bot")} 4490 <span class="font-mono">${e.agentId}</span> 4491 </span> 4492 ${i.properties.length>0?(0,h.qy)` 4493 <span class="text-gray-300">â¢</span> 4494 <span 4495 >${i.properties.length} 4496 parameter${1!==i.properties.length?"s":""}</span 4497 > 4498 `:h.s6} 4499 </div> 4500 ${e.description?(0,h.qy)`<p class="mt-2 text-xs text-gray-600"> 4501 ${e.description} 4502 </p>`:h.s6} 4503 </div> 4504 <span 4505 class="shrink-0 text-gray-400 transition ${t?"rotate-180":""}" 4506 > 4507 ${this.renderIcon("ChevronDown")} 4508 </span> 4509 </div> 4510 </button> 4511 4512 ${t?(0,h.qy)` 4513 <div class="border-t border-gray-200 bg-gray-50/50 px-4 py-3"> 4514 ${i.properties.length>0?(0,h.qy)` 4515 <h5 class="mb-3 text-xs font-semibold text-gray-700"> 4516 Parameters 4517 </h5> 4518 <div class="space-y-3"> 4519 ${i.properties.map(e=>(0,h.qy)` 4520 <div 4521 class="rounded-md border border-gray-200 bg-white p-3" 4522 > 4523 <div 4524 class="flex items-start justify-between gap-2 mb-1" 4525 > 4526 <span 4527 class="font-mono text-xs font-medium text-gray-900" 4528 >${e.name}</span 4529 > 4530 <div class="flex items-center gap-1.5 shrink-0"> 4531 ${e.required?(0,h.qy)` 4532 <span 4533 class="text-[9px] rounded border border-rose-200 bg-rose-50 px-1 py-0.5 font-medium text-rose-700" 4534 >required</span 4535 > 4536 `:(0,h.qy)` 4537 <span 4538 class="text-[9px] rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-medium text-gray-600" 4539 >optional</span 4540 > 4541 `} 4542 ${e.type?(0,h.qy)`<span 4543 class="text-[9px] rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-mono text-gray-600" 4544 >${e.type}</span 4545 >`:h.s6} 4546 </div> 4547 </div> 4548 ${e.description?(0,h.qy)`<p class="mt-1 text-xs text-gray-600"> 4549 ${e.description} 4550 </p>`:h.s6} 4551 ${void 0!==e.defaultValue?(0,h.qy)` 4552 <div 4553 class="mt-2 flex items-center gap-1.5 text-[10px] text-gray-500" 4554 > 4555 <span>Default:</span> 4556 <code 4557 class="rounded bg-gray-100 px-1 py-0.5 font-mono" 4558 >${JSON.stringify(e.defaultValue)}</code 4559 > 4560 </div> 4561 `:h.s6} 4562 ${e.enum&&e.enum.length>0?(0,h.qy)` 4563 <div class="mt-2">
4564 <span class="text-[10px] text-gray-500" 4565 >Allowed values:</span 4566 > 4567 <div class="mt-1 flex flex-wrap gap-1"> 4568 ${e.enum.map(e=>(0,h.qy)` 4569 <code 4570 class="rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 text-[10px] font-mono text-gray-700" 4571 >${JSON.stringify(e)}</code 4572 > 4573 `)} 4574 </div> 4575 </div> 4576 `:h.s6} 4577 </div> 4578 `)} 4579 </div> 4580 `:(0,h.qy)` 4581 <div class="flex items-center justify-center py-4 text-xs text-gray-500"> 4582 <span>No parameters defined</span> 4583 </div> 4584 `} 4585 </div> 4586 `:h.s6} 4587 </div> 4588 `}extractSchemaInfo(e){let t={properties:[]};if(!e||"object"!=typeof e)return t;let i=e._def;if(i&&"object"==typeof i){if("ZodObject"===i.typeName){let e=i.shape,s="function"==typeof e?e():e;if(!s||"object"!=typeof s)return t;let n=new Set;for(let[e,a]of("strict"!==i.unknownKeys&&i.catchall||Object.keys(s||{}).forEach(e=>{let t=s[e];t?._def&&!this.isZodOptional(t)&&n.add(e)}),Object.entries(s||{}))){let i=this.extractZodFieldInfo(a);t.properties.push({name:e,type:i.type,description:i.description,required:n.has(e),defaultValue:i.defaultValue,enum:i.enum})}}}else if("object"===e.type&&e.properties){let i=e.properties,s=new Set(Array.isArray(e.required)?e.required:[]);for(let[e,n]of Object.entries(i??{}))t.properties.push({name:e,type:n.type,description:"string"==typeof n.description?n.description:void 0,required:s.has(e),defaultValue:n.default,enum:Array.isArray(n.enum)?n.enum:void 0})}return t}isZodOptional(e){if(!e?._def)return!1;let t=e._def;return"ZodOptional"===t.typeName||"ZodNullable"===t.typeName||void 0!==t.defaultValue}extractZodFieldInfo(e){let t={};if(!e?._def)return t;let i=e,s=i._def;for(;("ZodOptional"===s.typeName||"ZodNullable"===s.typeName||"ZodDefault"===s.typeName)&&("ZodDefault"===s.typeName&&void 0!==s.defaultValue&&(t.defaultValue="function"==typeof s.defaultValue?s.defaultValue():s.defaultValue),i=s.innerType??i,i?._def);)s=i._def;t.description="string"==typeof s.description?s.description:void 0;let n="string"==typeof s.typeName?s.typeName:void 0;return t.type=n?({ZodString:"string",ZodNumber:"number",ZodBoolean:"boolean",ZodArray:"array",ZodObject:"object",ZodEnum:"enum",ZodLiteral:"literal",ZodUnion:"union",ZodAny:"any",ZodUnknown:"unknown"})[n]||n.replace("Zod","").toLowerCase():void 0,"ZodEnum"===n&&Array.isArray(s.values)?t.enum=s.values:"ZodLiteral"===n&&void 0!==s.value&&(t.enum=[s.value]),t}toggleToolExpansion(e){this.expandedTools.has(e)?this.expandedTools.delete(e):this.expandedTools.add(e),this.requestUpdate()}renderContextView(){let e=Object.entries(this.contextStore);return 0===e.length?(0,h.qy)` 4589 <div 4590 class="flex h-full items-center justify-center px-4 py-8 text-center" 4591 > 4592 <div class="max-w-md"> 4593 <div 4594 class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8" 4595 > 4596 ${this.renderIcon("FileText")} 4597 </div> 4598 <p class="text-sm text-gray-600">No context available</p> 4599 <p class="mt-2 text-xs text-gray-500"> 4600 Context will appear here once added to CopilotKit. 4601 </p> 4602 </div> 4603 </div> 4604 `:(0,h.qy)` 4605 <div class="flex h-full flex-col overflow-hidden"> 4606 <div class="overflow-auto p-4"> 4607 <div class="space-y-3"> 4608 ${e.map(([e,t])=>this.renderContextCard(e,t))} 4609 </div> 4610 </div> 4611 </div> 4612 `}renderContextCard(e,t){let i=this.expandedContextItems.has(e),s=this.getContextValuePreview(t.value),n=void 0!==t.value&&null!==t.value;return(0,h.qy)` 4613 <div class="rounded-lg border border-gray-200 bg-white overflow-hidden"> 4614 <button 4615 type="button" 4616 class="w-full px-4 py-3 text-left transition hover:bg-gray-50" 4617 @click=${()=>this.toggleContextExpansion(e)} 4618 > 4619 <div class="flex items-start justify-between gap-3"> 4620 <div class="flex-1 min-w-0"> 4621 <p class="text-sm font-medium text-gray-900 mb-1">${t.description?.trim()||e}</p> 4622 <div class="flex items-center gap-2 text-xs text-gray-500">
4623 <span 4624 class="font-mono truncate inline-block align-middle" 4625 style="max-width: 180px;" 4626 >${e}</span 4627 > 4628 ${n?(0,h.qy)` 4629 <span class="text-gray-300">â¢</span> 4630 <span class="truncate">${s}</span> 4631 `:h.s6} 4632 </div> 4633 </div> 4634 <span 4635 class="shrink-0 text-gray-400 transition ${i?"rotate-180":""}" 4636 > 4637 ${this.renderIcon("ChevronDown")} 4638 </span> 4639 </div> 4640 </button> 4641 4642 ${i?(0,h.qy)` 4643 <div class="border-t border-gray-200 bg-gray-50/50 px-4 py-3"> 4644 <div class="mb-3"> 4645 <h5 class="mb-1 text-xs font-semibold text-gray-700">ID</h5> 4646 <code 4647 class="font-mono text-xs font-medium text-gray-800 flex-1 truncate min-w-0" 4648 >${e}</code 4649 > 4650 <button 4651 type="button" 4652 class="cpk-copy-btn" 4653 @click=${t=>{t.stopPropagation(),this.copyContextValue(e,`${e}:id`,t)}} 4654 > 4655 ${this.copiedContextItems.has(`${e}:id`)?"â":"Copy"} 4656 </button> 4657 </div> 4658 ${n?(0,h.qy)` 4659 <div class="mb-2 flex items-center justify-between gap-2"> 4660 <h5 class="text-xs font-semibold text-gray-700"> 4661 Value 4662 </h5> 4663 <button 4664 type="button" 4665 class="cpk-copy-btn" 4666 @click=${i=>{i.stopPropagation(),this.copyContextValue(t.value,e,i)}} 4667 > 4668 ${this.copiedContextItems.has(e)?"Copied":"Copy JSON"} 4669 </button> 4670 </div> 4671 <pre 4672 style=" 4673 margin: 0; 4674 max-height: 180px; 4675 overflow: auto; 4676 white-space: pre-wrap; 4677 word-break: break-word; 4678 border-radius: 6px; 4679 border: 1px solid #eeeef4; 4680 background: #f7f7f9; 4681 padding: 10px; 4682 font-size: 11px; 4683 line-height: 1.5; 4684 color: #2d2d30; 4685 " 4686 >${this.formatContextValue(t.value)}</pre> 4687 `:(0,h.qy)` 4688 <div class="flex items-center justify-center py-4 text-xs text-gray-500"> 4689 <span>No value available</span> 4690 </div> 4691 `} 4692 </div> 4693 `:h.s6} 4694 </div> 4695 `}getContextValuePreview(e){if(null==e)return"â";if("string"==typeof e)return e.length>50?`${e.slice(0,50)}...`:e;if("number"==typeof e||"boolean"==typeof e)return String(e);if(Array.isArray(e))return`Array(${e.length})`;if("object"==typeof e){let t=Object.keys(e);return`Object with ${t.length} key${1!==t.length?"s":""}`}return"function"==typeof e?"Function":String(e)}formatContextValue(e){if(void 0===e)return"undefined";if(null===e)return"null";if("function"==typeof e)return e.toString();try{return JSON.stringify(e,null,2)}catch{return String(e)}}async copyContextValue(e,t,i){let s=this.getClipboard(i);if(!s?.writeText)return void console.warn("Clipboard API is not available in this environment.");let n=this.formatContextValue(e);try{await s.writeText(n),this.copiedContextItems.add(t),this.requestUpdate(),setTimeout(()=>{this.copiedContextItems.delete(t),this.requestUpdate()},1500)}catch(e){console.error("Failed to copy context value:",e)}}toggleContextExpansion(e){this.expandedContextItems.has(e)?this.expandedContextItems.delete(e):this.expandedContextItems.add(e),this.requestUpdate()}toggleRowExpansion(e,t){let i=t?.currentTarget,s=(i&&"ownerDocument"in i?i.ownerDocument:this.ownerDocument)?.getSelection();s&&s.toString().length>0||(this.expandedRows.has(e)?this.expandedRows.delete(e):this.expandedRows.add(e),this.requestUpdate())}renderAnnouncementBanner(){return this.hasUnseenAnnouncement?this.announcementLoaded||this.announcementHtml?this.announcementHtml?(0,h.qy)`<div 4696 class="mx-4 mt-3 mb-3 rounded-xl border border-slate-200 bg-white px-4 py-3" 4697 > 4698 <div 4699 class="mb-2 flex items-center gap-2 text-xs font-semibold text-slate-900" 4700 >
4701 <span 4702 class="inline-flex h-5 w-5 items-center justify-center rounded-md bg-slate-900 text-white shadow-sm" 4703 > 4704 ${this.renderIcon("Megaphone")} 4705 </span> 4706 <span>Announcement</span> 4707 <button 4708 class="announcement-dismiss ml-auto" 4709 type="button" 4710 @click=${()=>this.dismissAnnouncement("expanded_card")} 4711 aria-label="Dismiss announcement" 4712 > 4713 ${this.renderIcon("X")} 4714 </button> 4715 </div> 4716 <div 4717 class="announcement-body ${this.announcementExpanded?"announcement-body--expanded":"announcement-body--collapsed"}" 4718 > 4719 <div 4720 class="announcement-content" 4721 @click=${this.handleAnnouncementContentClick} 4722 > 4723 ${(0,m._)(this.announcementHtml)} 4724 </div> 4725 ${!this.announcementExpanded?(0,h.qy)` 4726 <div class="announcement-fade"></div> 4727 `:h.s6} 4728 </div> 4729 <button 4730 class="announcement-toggle" 4731 type="button" 4732 @click=${()=>{this.announcementExpanded=!this.announcementExpanded,this.requestUpdate()}} 4733 > 4734 ${this.announcementExpanded?"Show less â":"Show more â"} 4735 </button> 4736 </div>`:h.s6:(0,h.qy)`<div 4737 class="flex items-center gap-2 px-4 py-3 text-sm font-semibold text-slate-800" 4738 > 4739 <span 4740 class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-slate-900 text-white shadow-sm" 4741 > 4742 ${this.renderIcon("Megaphone")} 4743 </span> 4744 <span>Loading latest announcementâ¦</span> 4745 </div>`:h.s6}getVisibleBannerSurface(){return this.hasUnseenAnnouncement?this.isOpen?this.announcementHtml?"expanded_card":null:this.showAnnouncementPreview&&this.announcementPreviewText?"collapsed_preview":null:null}maybeTrackBannerViewed(){let e=this.announcementTimestamp;if(!e)return;let t=this.getVisibleBannerSurface();if(!t)return;let i=`${e}:${t}`;!this.viewedBannerSurfaces.has(i)&&(this.pendingBannerViewed.length>=20||(this.viewedBannerSurfaces.add(i),this.pendingBannerViewed.push({banner_id:e,surface:t,cta_label:this.announcementCtaLabel??void 0}),this.flushPendingBannerViewed()))}flushPendingBannerViewed(){if(0===this.pendingBannerViewed.length)return;if(this.core?.telemetryDisabled){this.pendingBannerViewed=[];return}if("connected"!==this.runtimeStatus)return;let e=this.pendingBannerViewed;for(let t of(this.pendingBannerViewed=[],e))(0,p.uh)(t)}ensureAnnouncementLoading(){this.announcementPromise||"undefined"==typeof window||"undefined"==typeof fetch||(this.announcementPromise=this.fetchAnnouncement())}renderAnnouncementPreview(){return this.hasUnseenAnnouncement&&this.showAnnouncementPreview&&this.announcementPreviewText?(0,h.qy)`<div 4746 class="announcement-preview" 4747 data-side=${"left"===this.contextState.button.anchor.horizontal?"right":"left"} 4748 role="note" 4749 @click=${()=>this.handleAnnouncementPreviewClick()} 4750 > 4751 <span>${this.announcementPreviewText}</span> 4752 <button 4753 type="button" 4754 class="announcement-preview__dismiss" 4755 aria-label="Dismiss announcement" 4756 @click=${this.handleDismissAnnouncementPreview} 4757 > 4758 ${this.renderIcon("X")} 4759 </button> 4760 <span class="announcement-preview__arrow"></span> 4761 </div>`:h.s6}handleAnnouncementPreviewClick(){this.showAnnouncementPreview=!1,this.openInspector("announcement_preview")}dismissAnnouncement(e){this.trackBannerClickedOnce({cta:"dismiss"}),this.trackBannerDismissedOnce(e),this.markAnnouncementSeen()}async fetchAnnouncement(){try{let e=await fetch("https://cdn.copilotkit.ai/announcements.json",{cache:"no-cache"});if(!e.ok)throw Error(`Failed to load announcement (${e.status})`);let t=await e.json(),i="string"==typeof t?.timestamp?t.timestamp:null,s="string"==typeof t?.previewText?t.previewText:null,n="string"==typeof t?.announcement?t.announcement:null,a="string"==typeof t?.cta_label?t.cta_label:null;if(!i||!n)throw Error("Malformed announcement payload");let r=this.loadStoredAnnouncementTimestamp();this.announcementTimestamp=i,this.announcementPreviewText=s??"",this.announcementCtaLabel=a,this.hasUnseenAnnouncement=(!r||r!==i)&&!!this.announcementPreviewText,this.showAnnouncementPreview=this.hasUnseenAnnouncement,this.announcementHtml=await this.convertMarkdownToHtml(n),this.announcementLoaded=!0,this.maybeTrackBannerViewed(),this.requestUpdate()}catch(e){console.warn("[CopilotKit Inspector] Failed to load announcement",e),this.announcementLoaded=!0,this.requestUpdate()}}async convertMarkdownToHtml(e){let t=new u.xI.Renderer;return t.link=(e,t,i)=>`<a href="${this.escapeHtmlAttr(this.isSafeAnnouncementHref(e??"")?this.appendRefParam(e??""):"#")}" target="_blank" rel="noopener"${t?` title="${this.escapeHtmlAttr(t)}"`:""}>${i}</a>`,t.html=e=>j(e),t.code=(e,t)=>{let i=(t??"").replace(/[^a-z0-9-]/gi,"");return`<div class="announcement-code"><pre><code${i?` class="language-${i}"`:""}>${j(e)}</code></pre><div class="announcement-code__copy-shield"><button type="button" class="announcement-code__copy" data-copy="${this.encodeBase64(e)}" aria-label="Copy code">Copy</button></div></div>`},u.xI.parse(e,{renderer:t,async:!1})}isSafeAnnouncementHref(e){try{let t=new URL(e,"undefined"!=typeof window?window.location.href:"https://copilotkit.ai");return"http:"===t.protocol||"https:"===t.protocol||"mailto:"===t.protocol}catch{return!1}}encodeBase64(e){if("undefined"==typeof window||"function"!=typeof window.btoa)return"";let t=new TextEncoder().encode(e),i="";for(let e of t)i+=String.fromCharCode(e);return window.btoa(i)}decodeBase64(e){if("undefined"==typeof window||"function"!=typeof window.atob)return"";let t=window.atob(e),i=new Uint8Array(t.length);for(let e=0;e<t.length;e++)i[e]=t.charCodeAt(e);return new TextDecoder().decode(i)}appendRefParam(e,t="cpk-inspector"){try{let i=e.startsWith("/")&&!e.startsWith("//"),s=new URL(e,"undefined"!=typeof window?window.location.href:"https://copilotkit.ai");if(s.searchParams.has("ref")||s.searchParams.append("ref",t),!s.searchParams.has("posthog_distinct_id")&&!this.core?.telemetryDisabled&&this.isCopilotKitDestination(s)){let e=(0,p.BZ)();e&&s.searchParams.append("posthog_distinct_id",e)}if(i)return`${s.pathname}${s.search}${s.hash}`;return s.toString()}catch{return e}}isCopilotKitDestination(e){let t=e.hostname.toLowerCase();return"copilotkit.ai"===t||t.endsWith(".copilotkit.ai")}escapeHtmlAttr(e){return j(e).replace(/"/g,""").replace(/'/g,"'")}loadStoredAnnouncementTimestamp(){if("undefined"==typeof window||!window.localStorage)return null;try{let e=window.localStorage.getItem(E);if(!e)return null;let t=JSON.parse(e);if(t&&"string"==typeof t.timestamp)return t.timestamp}catch{}return null}persistAnnouncementTimestamp(e){if("undefined"!=typeof window&&window.localStorage)try{let t=JSON.stringify({timestamp:e});window.localStorage.setItem(E,t)}catch{}}markAnnouncementSeen(){if(this.hasUnseenAnnouncement=!1,this.showAnnouncementPreview=!1,!this.announcementTimestamp){this.announcementPromise&&!this.announcementLoaded&&this.announcementPromise.then(()=>this.markAnnouncementSeen()).catch(()=>void 0),this.requestUpdate();return}this.persistAnnouncementTimestamp(this.announcementTimestamp),this.requestUpdate()}};function en(e=globalThis.customElements){e&&(ei(e,"cpk-thread-list",J),ei(e,x,Z),ei(e,"cpk-thread-details",et),ei(e,"cpk-memory-list",ee),ei(e,b,es))}en()}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.