@copilotkitnext/web-inspector 1.51.4-next.7 → 1.51.4-next.8

package/dist/index.umd.js

@@ -54,12 +54,20 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
    */function Id(t,e){void 0===e&&(e=!1);var a=Ed.get(t.object);Rd(a.value,t.object,t.patches,"",e),t.patches.length&&Vd(a.value,t.patches);var h=t.patches;return h.length>0&&(t.patches=[],t.callback&&t.callback(h)),h}function Rd(t,e,a,h,r){if(e!==t){"function"==typeof e.toJSON&&(e=e.toJSON());for(var i=vd(e),n=vd(t),d=!1,o=n.length-1;o>=0;o--){var s=t[c=n[o]];if(!ud(e,c)||void 0===e[c]&&void 0!==s&&!1===Array.isArray(e))Array.isArray(t)===Array.isArray(e)?(r&&a.push({op:"test",path:h+"/"+xd(c),value:md(s)}),a.push({op:"remove",path:h+"/"+xd(c)}),d=!0):(r&&a.push({op:"test",path:h,value:t}),a.push({op:"replace",path:h,value:e}));else{var p=e[c];"object"==typeof s&&null!=s&&"object"==typeof p&&null!=p&&Array.isArray(s)===Array.isArray(p)?Rd(s,p,a,h+"/"+xd(c),r):s!==p&&(r&&a.push({op:"test",path:h+"/"+xd(c),value:md(s)}),a.push({op:"replace",path:h+"/"+xd(c),value:md(p)}))}}if(d||i.length!=n.length)for(o=0;o<i.length;o++){var c;ud(t,c=i[o])||void 0===e[c]||a.push({op:"add",path:h+"/"+xd(c),value:md(e[c])})}}}var Nd=Object.freeze({__proto__:null,compare:function(t,e,a){void 0===a&&(a=!1);var h=[];return Rd(t,e,h,"",a),h},generate:Id,observe:function(t,e){var a,h=function(t){return Ed.get(t)}(t);if(h){var r=function(t,e){return t.observers.get(e)}(h,e);a=r&&r.observer}else h=new Pd(t),Ed.set(t,h);if(a)return a;if(a={},h.value=md(t),e){a.callback=e,a.next=null;var i=function(){Id(a)},n=function(){clearTimeout(a.next),a.next=setTimeout(i)};"undefined"!=typeof window&&(window.addEventListener("mouseup",n),window.addEventListener("keyup",n),window.addEventListener("mousedown",n),window.addEventListener("keydown",n),window.addEventListener("change",n))}return a.patches=[],a.object=t,a.unobserve=function(){Id(a),clearTimeout(a.next),function(t,e){t.observers.delete(e.callback)}(h,a),"undefined"!=typeof window&&(window.removeEventListener("mouseup",n),window.removeEventListener("keyup",n),window.removeEventListener("mousedown",n),window.removeEventListener("keydown",n),window.removeEventListener("change",n))},h.observers.set(e,new $d(e,a)),a},unobserve:function(t,e){e.unobserve()}});Object.assign({},Od,Nd,{JsonPatchError:bd,deepClone:md,escapePathComponent:xd,unescapePathComponent:yd});var Zd=$n(["TextMessageStart","TextMessageContent","TextMessageEnd","ActionExecutionStart","ActionExecutionArgs","ActionExecutionEnd","ActionExecutionResult","AgentStateMessage","MetaEvent","RunStarted","RunFinished","RunError","NodeStarted","NodeFinished"]),Dd=$n(["LangGraphInterruptEvent","PredictState","Exit"]);On("type",[Ln({type:Pn(Zd.enum.TextMessageStart),messageId:_n(),parentMessageId:_n().optional(),role:_n().optional()}),Ln({type:Pn(Zd.enum.TextMessageContent),messageId:_n(),content:_n()}),Ln({type:Pn(Zd.enum.TextMessageEnd),messageId:_n()}),Ln({type:Pn(Zd.enum.ActionExecutionStart),actionExecutionId:_n(),actionName:_n(),parentMessageId:_n().optional()}),Ln({type:Pn(Zd.enum.ActionExecutionArgs),actionExecutionId:_n(),args:_n()}),Ln({type:Pn(Zd.enum.ActionExecutionEnd),actionExecutionId:_n()}),Ln({type:Pn(Zd.enum.ActionExecutionResult),actionName:_n(),actionExecutionId:_n(),result:_n()}),Ln({type:Pn(Zd.enum.AgentStateMessage),threadId:_n(),agentName:_n(),nodeName:_n(),runId:_n(),active:Hn(),role:_n(),state:_n(),running:Hn()}),Ln({type:Pn(Zd.enum.MetaEvent),name:Dd,value:Vn()}),Ln({type:Pn(Zd.enum.RunError),message:_n(),code:_n().optional()})]),Ln({id:_n(),role:_n(),content:_n(),parentMessageId:_n().optional()}),Ln({id:_n(),name:_n(),arguments:Vn(),parentMessageId:_n().optional()}),Ln({id:_n(),result:Vn(),actionExecutionId:_n(),actionName:_n()});var Fd,Bd,Ud={},jd={};function qd(){return Fd||(Fd=1,t=jd,Object.defineProperty(t,"__esModule",{value:!0}),t.Allow=t.ALL=t.COLLECTION=t.ATOM=t.SPECIAL=t.INF=t._INFINITY=t.INFINITY=t.NAN=t.BOOL=t.NULL=t.OBJ=t.ARR=t.NUM=t.STR=void 0,t.STR=1,t.NUM=2,t.ARR=4,t.OBJ=8,t.NULL=16,t.BOOL=32,t.NAN=64,t.INFINITY=128,t._INFINITY=256,t.INF=t.INFINITY|t._INFINITY,t.SPECIAL=t.NULL|t.BOOL|t.INF|t.NAN,t.ATOM=t.STR|t.NUM|t.SPECIAL,t.COLLECTION=t.ARR|t.OBJ,t.ALL=t.ATOM|t.COLLECTION,t.Allow={STR:t.STR,NUM:t.NUM,ARR:t.ARR,OBJ:t.OBJ,NULL:t.NULL,BOOL:t.BOOL,NAN:t.NAN,INFINITY:t.INFINITY,_INFINITY:t._INFINITY,INF:t.INF,SPECIAL:t.SPECIAL,ATOM:t.ATOM,COLLECTION:t.COLLECTION,ALL:t.ALL},t.default=t.Allow),jd;var t}Bd||(Bd=1,function(t){var e=Ud&&Ud.__createBinding||(Object.create?function(t,e,a,h){void 0===h&&(h=a);var r=Object.getOwnPropertyDescriptor(e,a);r&&!("get"in r?!e.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return e[a]}}),Object.defineProperty(t,h,r)}:function(t,e,a,h){void 0===h&&(h=a),t[h]=e[a]}),a=Ud&&Ud.__exportStar||function(t,a){for(var h in t)"default"===h||Object.prototype.hasOwnProperty.call(a,h)||e(a,t,h)};Object.defineProperty(t,"__esModule",{value:!0}),t.Allow=t.MalformedJSON=t.PartialJSON=t.parseJSON=t.parse=void 0;const h=qd();Object.defineProperty(t,"Allow",{enumerable:!0,get:function(){return h.Allow}}),a(qd(),t);class r extends Error{}t.PartialJSON=r;class i extends Error{}function n(t,e=h.Allow.ALL){if("string"!=typeof t)throw new TypeError("expecting str, got "+typeof t);if(!t.trim())throw new Error(`${t} is empty`);return d(t.trim(),e)}t.MalformedJSON=i,t.parseJSON=n;const d=(t,e)=>{const a=t.length;let n=0;const d=t=>{throw new r(`${t} at position ${n}`)},o=t=>{throw new i(`${t} at position ${n}`)},s=()=>(u(),n>=a&&d("Unexpected end of input"),'"'===t[n]?p():"{"===t[n]?c():"["===t[n]?l():"null"===t.substring(n,n+4)||h.Allow.NULL&e&&a-n<4&&"null".startsWith(t.substring(n))?(n+=4,null):"true"===t.substring(n,n+4)||h.Allow.BOOL&e&&a-n<4&&"true".startsWith(t.substring(n))?(n+=4,!0):"false"===t.substring(n,n+5)||h.Allow.BOOL&e&&a-n<5&&"false".startsWith(t.substring(n))?(n+=5,!1):"Infinity"===t.substring(n,n+8)||h.Allow.INFINITY&e&&a-n<8&&"Infinity".startsWith(t.substring(n))?(n+=8,1/0):"-Infinity"===t.substring(n,n+9)||h.Allow._INFINITY&e&&1<a-n&&a-n<9&&"-Infinity".startsWith(t.substring(n))?(n+=9,-1/0):"NaN"===t.substring(n,n+3)||h.Allow.NAN&e&&a-n<3&&"NaN".startsWith(t.substring(n))?(n+=3,NaN):M()),p=()=>{const r=n;let i=!1;for(n++;n<a&&('"'!==t[n]||i&&"\\"===t[n-1]);)i="\\"===t[n]&&!i,n++;if('"'==t.charAt(n))try{return JSON.parse(t.substring(r,++n-Number(i)))}catch(t){o(String(t))}else if(h.Allow.STR&e)try{return JSON.parse(t.substring(r,n-Number(i))+'"')}catch(e){return JSON.parse(t.substring(r,t.lastIndexOf("\\"))+'"')}d("Unterminated string literal")},c=()=>{n++,u();const r={};try{for(;"}"!==t[n];){if(u(),n>=a&&h.Allow.OBJ&e)return r;const i=p();u(),n++;try{const t=s();r[i]=t}catch(t){if(h.Allow.OBJ&e)return r;throw t}u(),","===t[n]&&n++}}catch(t){if(h.Allow.OBJ&e)return r;d("Expected '}' at end of object")}return n++,r},l=()=>{n++;const a=[];try{for(;"]"!==t[n];)a.push(s()),u(),","===t[n]&&n++}catch(t){if(h.Allow.ARR&e)return a;d("Expected ']' at end of array")}return n++,a},M=()=>{if(0===n){"-"===t&&o("Not sure what '-' is");try{return JSON.parse(t)}catch(a){if(h.Allow.NUM&e)try{return JSON.parse(t.substring(0,t.lastIndexOf("e")))}catch(t){}o(String(a))}}const r=n;for("-"===t[n]&&n++;t[n]&&-1===",]}".indexOf(t[n]);)n++;n!=a||h.Allow.NUM&e||d("Unterminated number literal");try{return JSON.parse(t.substring(r,n))}catch(e){"-"===t.substring(r,n)&&d("Not sure what '-' is");try{return JSON.parse(t.substring(r,t.lastIndexOf("e")))}catch(t){o(String(t))}}},u=()=>{for(;n<a&&" \n\r\t".includes(t[n]);)n++};return s()},o=n;t.parse=o}(Ud)),new Set("ABCDEFGHIJKLMNOPQRSTUVXYZabcdefghijklmnopqrstuvxyz0123456789");var Gd=(t=>(t.Disconnected="disconnected",t.Connected="connected",t.Connecting="connecting",t.Error="error",t))(Gd||{});function Wd(t,e,a,h){const r=Math.max(h,a.width-t.size.width-h),i=Math.max(h,a.height-t.size.height-h);return{x:Jd(e.x,h,r),y:Jd(e.y,h,i)}}function Xd(t,e,a){t.position=Wd(t,t.position,e,a)}function Kd(t,e,a){const h=t.position.x+t.size.width/2,r=t.position.y+t.size.height/2,i=h<e.width/2?"left":"right",n=r<e.height/2?"top":"bottom";t.anchor={horizontal:i,vertical:n};const d=Math.max(a,e.width-t.size.width-a),o=Math.max(a,e.height-t.size.height-a);t.anchorOffset={x:Jd("left"===i?t.position.x:e.width-t.position.x-t.size.width,a,d),y:Jd("top"===n?t.position.y:e.height-t.position.y-t.size.height,a,o)}}function Jd(t,e,a){return Math.min(Math.max(e,t),a)}function Yd(t){if("undefined"==typeof window)return null;const e=window.localStorage.getItem(t);if(e)try{const t=JSON.parse(e);if(t&&"object"==typeof t)return t}catch(t){}if("undefined"!=typeof document){const e=`${t}=`,a=document.cookie.split("; ").find(t=>t.startsWith(e));if(a){const t=a.substring(e.length);try{const e=JSON.parse(decodeURIComponent(t));if(e&&"object"==typeof e)return e}catch(t){return null}}}return null}function Qd(t){if(!t||"object"!=typeof t)return!1;const e=t;return!("left"!==e.horizontal&&"right"!==e.horizontal||"top"!==e.vertical&&"bottom"!==e.vertical)}function to(t){if(!t||"object"!=typeof t)return!1;const e=t;return eo(e.x)&&eo(e.y)}function eo(t){return"number"==typeof t&&Number.isFinite(t)}const ao="cpk-web-inspector",ho=16,ro=200,io="cpk:inspector:state",no="cpk:inspector:announcements",oo={width:48,height:48},so={width:840,height:560},po=["RUN_STARTED","RUN_FINISHED","RUN_ERROR","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"];class co extends e.LitElement{constructor(){super(...arguments),this._core=null,this.coreSubscriber=null,this.coreUnsubscribe=null,this.runtimeStatus=null,this.coreProperties={},this.lastCoreError=null,this.agentSubscriptions=new Map,this.agentEvents=new Map,this.agentMessages=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="ag-ui-events",this.contextMenuOpen=!1,this.dockMode="floating",this.previousBodyMargins=null,this.transitionTimeoutId=null,this.pendingSelectedContext=null,this.autoAttachCore=!0,this.attemptedAutoAttach=!1,this.cachedTools=[],this.toolSignature="",this.eventFilterText="",this.eventTypeFilter="all",this.announcementMarkdown=null,this.announcementHtml=null,this.announcementTimestamp=null,this.announcementPreviewText=null,this.hasUnseenAnnouncement=!1,this.announcementLoaded=!1,this.announcementLoadError=null,this.announcementPromise=null,this.showAnnouncementPreview=!0,this.contextState={button:{position:{x:ho,y:ho},size:{...oo},anchor:{horizontal:"right",vertical:"top"},anchorOffset:{x:ho,y:ho}},window:{position:{x:ho,y:ho},size:{...so},anchor:{horizontal:"right",vertical:"top"},anchorOffset:{x:ho,y:ho}}},this.hasCustomPosition={button:!1,window:!1},this.resizePointerId=null,this.resizeStart=null,this.resizeInitialSize=null,this.isResizing=!1,this.menuItems=[{key:"ag-ui-events",label:"AG-UI Events",icon:"Zap"},{key:"agents",label:"Agent",icon:"Bot"},{key:"frontend-tools",label:"Frontend Tools",icon:"Hammer"},{key:"agent-context",label:"Context",icon:"FileText"}],this.handlePointerDown=t=>{var e;if("floating"!==this.dockMode&&this.isOpen)return;const a=t.currentTarget,h="window"===(null==a?void 0:a.dataset.dragContext)?"window":"button",r=t.target;if("window"===h&&(null==r?void 0:r.closest("button")))return;this.pointerContext=h,this.measureContext(h),t.preventDefault(),this.pointerId=t.pointerId,this.dragStart={x:t.clientX,y:t.clientY};const i=this.contextState[h];this.dragOffset={x:t.clientX-i.position.x,y:t.clientY-i.position.y},this.isDragging=!1,this.draggedDuringInteraction=!1,this.ignoreNextButtonClick=!1,null===(e=null==a?void 0:a.setPointerCapture)||void 0===e||e.call(a,this.pointerId)},this.handlePointerMove=t=>{if(this.pointerId!==t.pointerId||!this.dragStart||!this.pointerContext)return;const e=Math.hypot(t.clientX-this.dragStart.x,t.clientY-this.dragStart.y);if(!this.isDragging&&e<6)return;t.preventDefault(),this.setDragging(!0),this.draggedDuringInteraction=!0;const a={x:t.clientX-this.dragOffset.x,y:t.clientY-this.dragOffset.y},h=this.constrainToViewport(a,this.pointerContext);this.contextState[this.pointerContext].position=h,this.updateHostTransform(this.pointerContext)},this.handlePointerUp=t=>{var e;if(this.pointerId!==t.pointerId)return;const a=t.currentTarget;(null==a?void 0:a.hasPointerCapture(this.pointerId))&&a.releasePointerCapture(this.pointerId);const h=null!==(e=this.pointerContext)&&void 0!==e?e:this.activeContext;this.isDragging&&this.pointerContext?(t.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"!==h||this.isOpen||this.draggedDuringInteraction||this.openInspector(),this.resetPointerTracking()},this.handlePointerCancel=t=>{if(this.pointerId!==t.pointerId)return;const e=t.currentTarget;(null==e?void 0:e.hasPointerCapture(this.pointerId))&&e.releasePointerCapture(this.pointerId),this.resetPointerTracking()},this.handleButtonClick=t=>{if(!this.isDragging)return this.ignoreNextButtonClick?(t.preventDefault(),void(this.ignoreNextButtonClick=!1)):void(this.isOpen||(t.preventDefault(),this.openInspector()));t.preventDefault()},this.handleClosePointerDown=t=>{t.stopPropagation(),t.preventDefault()},this.handleCloseClick=()=>{this.closeInspector()},this.handleResizePointerDown=t=>{var e;t.stopPropagation(),t.preventDefault(),this.hasCustomPosition.window=!0,this.isResizing=!0,this.resizePointerId=t.pointerId,this.resizeStart={x:t.clientX,y:t.clientY},this.resizeInitialSize={...this.contextState.window.size},document.body&&"floating"!==this.dockMode&&(document.body.style.transition="");const a=t.currentTarget;null===(e=null==a?void 0:a.setPointerCapture)||void 0===e||e.call(a,t.pointerId)},this.handleResizePointerMove=t=>{if(!this.isResizing||this.resizePointerId!==t.pointerId||!this.resizeStart||!this.resizeInitialSize)return;t.preventDefault();const e=t.clientX-this.resizeStart.x,a=t.clientY-this.resizeStart.y,h=this.contextState.window;"docked-left"===this.dockMode?(h.size=this.clampWindowSize({width:this.resizeInitialSize.width+e,height:h.size.height}),document.body&&(document.body.style.marginLeft=`${h.size.width}px`)):(h.size=this.clampWindowSize({width:this.resizeInitialSize.width+e,height:this.resizeInitialSize.height+a}),this.keepPositionWithinViewport("window"),this.updateAnchorFromPosition("window")),this.requestUpdate(),this.updateHostTransform("window")},this.handleResizePointerUp=t=>{if(this.resizePointerId!==t.pointerId)return;const e=t.currentTarget;(null==e?void 0:e.hasPointerCapture(this.resizePointerId))&&e.releasePointerCapture(this.resizePointerId),"floating"===this.dockMode&&(this.updateAnchorFromPosition("window"),this.applyAnchorPosition("window")),this.persistState(),this.resetResizeTracking()},this.handleResizePointerCancel=t=>{if(this.resizePointerId!==t.pointerId)return;const e=t.currentTarget;(null==e?void 0:e.hasPointerCapture(this.resizePointerId))&&e.releasePointerCapture(this.resizePointerId),"floating"===this.dockMode&&(this.updateAnchorFromPosition("window"),this.applyAnchorPosition("window")),this.persistState(),this.resetResizeTracking()},this.handleResize=()=>{this.measureContext("button"),this.applyAnchorPosition("button"),this.measureContext("window"),this.hasCustomPosition.window?this.applyAnchorPosition("window"):this.centerContext("window"),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.handleClearEvents=()=>{"all-agents"===this.selectedContext?(this.agentEvents.clear(),this.flattenedEvents=[]):(this.agentEvents.delete(this.selectedContext),this.flattenedEvents=this.flattenedEvents.filter(t=>t.agentId!==this.selectedContext)),this.expandedRows.clear(),this.copiedEvents.clear(),this.requestUpdate()},this.handleGlobalPointerDown=t=>{if(!this.contextMenuOpen)return;t.composedPath().some(t=>{var e;return t instanceof HTMLElement&&"true"===(null===(e=t.dataset)||void 0===e?void 0:e.contextDropdownRoot)})||(this.contextMenuOpen=!1,this.requestUpdate())},this.handleDismissAnnouncement=()=>{this.markAnnouncementSeen()}}get core(){return this._core}set core(t){const e=this._core;e!==t&&(this.detachFromCore(),this._core=null!=t?t:null,this.requestUpdate("core",e),this._core&&this.attachToCore(this._core))}attachToCore(t){this.runtimeStatus=t.runtimeConnectionStatus,this.coreProperties=t.properties,this.lastCoreError=null,this.coreSubscriber={onRuntimeConnectionStatusChanged:({status:t})=>{this.runtimeStatus=t,this.requestUpdate()},onPropertiesChanged:({properties:t})=>{this.coreProperties=t,this.requestUpdate()},onError:({code:t,error:e})=>{this.lastCoreError={code:t,message:e.message},this.requestUpdate()},onAgentsChanged:({agents:t})=>{this.processAgentsChanged(t)},onContextChanged:({context:t})=>{this.contextStore=this.normalizeContextStore(t),this.requestUpdate()}},this.coreUnsubscribe=t.subscribe(this.coreSubscriber).unsubscribe,this.processAgentsChanged(t.agents),t.context&&(this.contextStore=this.normalizeContextStore(t.context))}detachFromCore(){this.coreUnsubscribe&&(this.coreUnsubscribe(),this.coreUnsubscribe=null),this.coreSubscriber=null,this.runtimeStatus=null,this.lastCoreError=null,this.coreProperties={},this.cachedTools=[],this.toolSignature="",this.teardownAgentSubscriptions()}teardownAgentSubscriptions(){for(const t of this.agentSubscriptions.values())t();this.agentSubscriptions.clear(),this.agentEvents.clear(),this.agentMessages.clear(),this.agentStates.clear(),this.flattenedEvents=[],this.eventCounter=0}processAgentsChanged(t){const e=new Set;for(const a of Object.values(t))(null==a?void 0:a.agentId)&&(e.add(a.agentId),this.subscribeToAgent(a));for(const t of Array.from(this.agentSubscriptions.keys()))e.has(t)||(this.unsubscribeFromAgent(t),this.agentEvents.delete(t),this.agentMessages.delete(t),this.agentStates.delete(t));this.updateContextOptions(e),this.refreshToolsSnapshot(),this.requestUpdate()}refreshToolsSnapshot(){if(!this._core)return void(this.cachedTools.length>0&&(this.cachedTools=[],this.toolSignature="",this.requestUpdate()));const t=this.extractToolsFromAgents(),e=JSON.stringify(t.map(t=>({agentId:t.agentId,name:t.name,type:t.type,hasDescription:Boolean(t.description),hasParameters:Boolean(t.parameters)})));e!==this.toolSignature&&(this.toolSignature=e,this.cachedTools=t,this.requestUpdate())}tryAutoAttachCore(){var t;if(this.attemptedAutoAttach||this._core||!this.autoAttachCore||"undefined"==typeof window)return;this.attemptedAutoAttach=!0;const e=window,a=[e.__COPILOTKIT_CORE__,null===(t=e.copilotkit)||void 0===t?void 0:t.core,e.copilotkitCore].find(t=>!!t&&"object"==typeof t);a&&(this.core=a)}subscribeToAgent(t){if(!t.agentId)return;const e=t.agentId;this.unsubscribeFromAgent(e);const a={onRunStartedEvent:({event:t})=>{this.recordAgentEvent(e,"RUN_STARTED",t)},onRunFinishedEvent:({event:t,result:a})=>{this.recordAgentEvent(e,"RUN_FINISHED",{event:t,result:a})},onRunErrorEvent:({event:t})=>{this.recordAgentEvent(e,"RUN_ERROR",t)},onTextMessageStartEvent:({event:t})=>{this.recordAgentEvent(e,"TEXT_MESSAGE_START",t)},onTextMessageContentEvent:({event:t,textMessageBuffer:a})=>{this.recordAgentEvent(e,"TEXT_MESSAGE_CONTENT",{event:t,textMessageBuffer:a})},onTextMessageEndEvent:({event:t,textMessageBuffer:a})=>{this.recordAgentEvent(e,"TEXT_MESSAGE_END",{event:t,textMessageBuffer:a})},onToolCallStartEvent:({event:t})=>{this.recordAgentEvent(e,"TOOL_CALL_START",t)},onToolCallArgsEvent:({event:t,toolCallBuffer:a,toolCallName:h,partialToolCallArgs:r})=>{this.recordAgentEvent(e,"TOOL_CALL_ARGS",{event:t,toolCallBuffer:a,toolCallName:h,partialToolCallArgs:r})},onToolCallEndEvent:({event:t,toolCallArgs:a,toolCallName:h})=>{this.recordAgentEvent(e,"TOOL_CALL_END",{event:t,toolCallArgs:a,toolCallName:h})},onToolCallResultEvent:({event:t})=>{this.recordAgentEvent(e,"TOOL_CALL_RESULT",t)},onStateSnapshotEvent:({event:a})=>{this.recordAgentEvent(e,"STATE_SNAPSHOT",a),this.syncAgentState(t)},onStateDeltaEvent:({event:a})=>{this.recordAgentEvent(e,"STATE_DELTA",a),this.syncAgentState(t)},onMessagesSnapshotEvent:({event:a})=>{this.recordAgentEvent(e,"MESSAGES_SNAPSHOT",a),this.syncAgentMessages(t)},onMessagesChanged:()=>{this.syncAgentMessages(t)},onRawEvent:({event:t})=>{this.recordAgentEvent(e,"RAW_EVENT",t)},onCustomEvent:({event:t})=>{this.recordAgentEvent(e,"CUSTOM_EVENT",t)}},{unsubscribe:h}=t.subscribe(a);this.agentSubscriptions.set(e,h),this.syncAgentMessages(t),this.syncAgentState(t),this.agentEvents.has(e)||this.agentEvents.set(e,[])}unsubscribeFromAgent(t){const e=this.agentSubscriptions.get(t);e&&(e(),this.agentSubscriptions.delete(t))}recordAgentEvent(t,e,a){var h;const r=`${t}:${++this.eventCounter}`,i=this.normalizeEventPayload(e,a),n={id:r,agentId:t,type:e,timestamp:Date.now(),payload:i},d=[n,...null!==(h=this.agentEvents.get(t))&&void 0!==h?h:[]].slice(0,200);this.agentEvents.set(t,d),this.flattenedEvents=[n,...this.flattenedEvents].slice(0,500),this.refreshToolsSnapshot(),this.requestUpdate()}syncAgentMessages(t){if(!(null==t?void 0:t.agentId))return;const e=this.normalizeAgentMessages(t.messages);e?this.agentMessages.set(t.agentId,e):this.agentMessages.delete(t.agentId),this.requestUpdate()}syncAgentState(t){if(!(null==t?void 0:t.agentId))return;const e=t.state;null==e?this.agentStates.delete(t.agentId):this.agentStates.set(t.agentId,this.sanitizeForLogging(e)),this.requestUpdate()}updateContextOptions(t){const e=[{key:"all-agents",label:"All Agents"},...Array.from(t).sort((t,e)=>t.localeCompare(e)).map(t=>({key:t,label:t}))];(this.contextOptions.length!==e.length||this.contextOptions.some((t,a)=>{var h;return t.key!==(null===(h=e[a])||void 0===h?void 0:h.key)}))&&(this.contextOptions=e);const a=this.pendingSelectedContext;if(a){"all-agents"===a||t.has(a)?(this.selectedContext!==a&&(this.selectedContext=a,this.expandedRows.clear()),this.pendingSelectedContext=null):t.size>0&&(this.pendingSelectedContext=null)}if(!e.some(t=>t.key===this.selectedContext)&&null===this.pendingSelectedContext){let e="all-agents";t.has("default")?e="default":t.size>0&&(e=Array.from(t).sort((t,e)=>t.localeCompare(e))[0]),this.selectedContext!==e&&(this.selectedContext=e,this.expandedRows.clear(),this.persistState())}}getEventsForSelectedContext(){var t;return"all-agents"===this.selectedContext?this.flattenedEvents:null!==(t=this.agentEvents.get(this.selectedContext))&&void 0!==t?t:[]}filterEvents(t){const e=this.eventFilterText.trim().toLowerCase();return t.filter(t=>{if("all"!==this.eventTypeFilter&&t.type!==this.eventTypeFilter)return!1;if(!e)return!0;const a=this.stringifyPayload(t.payload,!1).toLowerCase();return t.type.toLowerCase().includes(e)||t.agentId.toLowerCase().includes(e)||a.includes(e)})}getLatestStateForAgent(t){var e;if(this.agentStates.has(t)){const e=this.agentStates.get(t);return void 0===e?null:e}const a=(null!==(e=this.agentEvents.get(t))&&void 0!==e?e:[]).find(t=>"STATE_SNAPSHOT"===t.type);return a?a.payload:null}getLatestMessagesForAgent(t){const e=this.agentMessages.get(t);return null!=e?e:null}getAgentStatus(t){var e;const a=null!==(e=this.agentEvents.get(t))&&void 0!==e?e:[];if(0===a.length)return"idle";const h=a.find(t=>"RUN_STARTED"===t.type||"RUN_FINISHED"===t.type||"RUN_ERROR"===t.type);if(!h)return"idle";if("RUN_ERROR"===h.type)return"error";if("RUN_STARTED"===h.type){const t=a.find(t=>"RUN_FINISHED"===t.type&&t.timestamp>h.timestamp);return t?"idle":"running"}return"idle"}getAgentStats(t){var e,a,h,r;const i=null!==(e=this.agentEvents.get(t))&&void 0!==e?e:[],n=this.agentMessages.get(t),d=n?n.reduce((t,e)=>{var a,h;return t+(null!==(h=null===(a=e.toolCalls)||void 0===a?void 0:a.length)&&void 0!==h?h:0)},0):i.filter(t=>"TOOL_CALL_END"===t.type).length,o=null!==(a=null==n?void 0:n.length)&&void 0!==a?a:0;return{totalEvents:i.length,lastActivity:null!==(r=null===(h=i[0])||void 0===h?void 0:h.timestamp)&&void 0!==r?r:null,messages:o,toolCalls:d,errors:i.filter(t=>"RUN_ERROR"===t.type).length}}renderToolCallDetails(t){return Array.isArray(t)&&0!==t.length?e.html`
       <div class="mt-2 space-y-2">
         ${t.map((t,a)=>{var h,r,i,n;const d=null!==(i=null!==(r=null===(h=t.function)||void 0===h?void 0:h.name)&&void 0!==r?r:t.toolName)&&void 0!==i?i:"Unknown function",o="string"==typeof(null==t?void 0:t.id)?t.id:`tool-call-${a+1}`,s=this.formatToolCallArguments(null===(n=t.function)||void 0===n?void 0:n.arguments);return e.html`
-            <div class="rounded-md border border-gray-200 bg-gray-50 p-3 text-xs text-gray-700">
-              <div class="flex flex-wrap items-center justify-between gap-1 font-medium text-gray-900">
+            <div
+              class="rounded-md border border-gray-200 bg-gray-50 p-3 text-xs text-gray-700"
+            >
+              <div
+                class="flex flex-wrap items-center justify-between gap-1 font-medium text-gray-900"
+              >
                 <span>${d}</span>
                 <span class="text-[10px] text-gray-500">ID: ${o}</span>
               </div>
-              ${s?e.html`<pre class="mt-2 overflow-auto rounded bg-white p-2 text-[11px] leading-relaxed text-gray-800">${s}</pre>`:e.nothing}
+              ${s?e.html`<pre
+                    class="mt-2 overflow-auto rounded bg-white p-2 text-[11px] leading-relaxed text-gray-800"
+                  >
+${s}</pre
+                  >`:e.nothing}
             </div>
           `})}
       </div>
@@ -77,10 +85,17 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
         @click=${this.handleButtonClick}
       >
         ${this.renderAnnouncementPreview()}
-        <img src=${"a1f6528fccd26dea.svg"} alt="Inspector logo" class="h-5 w-auto" loading="lazy" />
+        <img
+          src=${"a1f6528fccd26dea.svg"}
+          alt="Inspector logo"
+          class="h-5 w-auto"
+          loading="lazy"
+        />
       </button>
     `}renderWindow(){const t=this.contextState.window,a="floating"!==this.dockMode,h=this.hasAttribute("data-transitioning"),r=a?this.getDockedWindowStyles():{width:`${Math.round(t.size.width)}px`,height:`${Math.round(t.size.height)}px`,minWidth:"600px",minHeight:"200px"},i=this.contextOptions.length>0,n=i?this.renderContextDropdown():e.nothing,d=this.getCoreStatusSummary(),o=i?n:e.html`
-          <div class="flex items-center gap-2 rounded-md border border-dashed border-gray-200 px-2 py-1 text-xs text-gray-400">
+          <div
+            class="flex items-center gap-2 rounded-md border border-dashed border-gray-200 px-2 py-1 text-xs text-gray-400"
+          >
             <span>${this.renderIcon("Bot")}</span>
             <span class="truncate">No agents available</span>
           </div>
@@ -102,7 +117,9 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
                 @pointercancel=${this.handleResizePointerCancel}
               ></div>
             `:e.nothing}
-        <div class="flex flex-1 flex-col overflow-hidden bg-white text-gray-800">
+        <div
+          class="flex flex-1 flex-col overflow-hidden bg-white text-gray-800"
+        >
           <div
             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"}"
             data-drag-context="window"
@@ -113,12 +130,15 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
           >
             <div class="flex flex-wrap items-center gap-3 px-4 py-3">
               <div class="flex items-center min-w-0">
-                <img src=${"7a3b31978162670a.svg"} alt="Inspector logo" class="h-6 w-auto" loading="lazy" />
+                <img
+                  src=${"7a3b31978162670a.svg"}
+                  alt="Inspector logo"
+                  class="h-6 w-auto"
+                  loading="lazy"
+                />
               </div>
               <div class="ml-auto flex min-w-0 items-center gap-2">
-                <div class="min-w-[160px] max-w-xs">
-                  ${o}
-                </div>
+                <div class="min-w-[160px] max-w-xs">${o}</div>
                 <div class="flex items-center gap-1">
                   ${this.renderDockControls()}
                   <button
@@ -133,7 +153,9 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
                 </div>
               </div>
             </div>
-            <div class="flex flex-wrap items-center gap-2 border-t border-gray-100 px-3 py-2 text-xs">
+            <div
+              class="flex flex-wrap items-center gap-2 border-t border-gray-100 px-3 py-2 text-xs"
+            >
               ${this.menuItems.map(({key:t,label:a,icon:h})=>{const r=this.selectedMenu===t,i=["inline-flex items-center gap-2 rounded-md px-3 py-2 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300",r?"bg-gray-900 text-white shadow-sm":"text-gray-600 hover:bg-gray-100 hover:text-gray-900"].join(" ");return e.html`
                   <button
                     type="button"
@@ -141,7 +163,9 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
                     aria-pressed=${r}
                     @click=${()=>this.handleMenuSelect(t)}
                   >
-                    <span class="text-gray-400 ${r?"text-white":""}">
+                    <span
+                      class="text-gray-400 ${r?"text-white":""}"
+                    >
                       ${this.renderIcon(h)}
                     </span>
                     <span>${a}</span>
@@ -149,27 +173,30 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
                 `})}
             </div>
           </div>
-            <div class="flex flex-1 flex-col overflow-hidden">
-              <div class="flex-1 overflow-auto">
-                ${this.renderAnnouncementPanel()}
-                ${this.renderCoreWarningBanner()}
-                ${this.renderMainContent()}
-                <slot></slot>
-              </div>
-              <div class="border-t border-gray-200 bg-gray-50 px-4 py-2">
-                <div
-                  class="flex items-center gap-2 rounded-md px-3 py-2 text-xs ${d.tone} w-full overflow-hidden my-1"
-                  title=${d.description}
+          <div class="flex flex-1 flex-col overflow-hidden">
+            <div class="flex-1 overflow-auto">
+              ${this.renderAnnouncementPanel()}
+              ${this.renderCoreWarningBanner()} ${this.renderMainContent()}
+              <slot></slot>
+            </div>
+            <div class="border-t border-gray-200 bg-gray-50 px-4 py-2">
+              <div
+                class="flex items-center gap-2 rounded-md px-3 py-2 text-xs ${d.tone} w-full overflow-hidden my-1"
+                title=${d.description}
+              >
+                <span
+                  class="flex h-6 w-6 items-center justify-center rounded bg-white/60"
+                >
+                  ${this.renderIcon("Activity")}
+                </span>
+                <span class="font-medium">${d.label}</span>
+                <span class="truncate text-[11px] opacity-80"
+                  >${d.description}</span
                 >
-                  <span class="flex h-6 w-6 items-center justify-center rounded bg-white/60">
-                    ${this.renderIcon("Activity")}
-                  </span>
-                  <span class="font-medium">${d.label}</span>
-                  <span class="truncate text-[11px] opacity-80">${d.description}</span>
-                </div>
               </div>
             </div>
           </div>
+        </div>
         <div
           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"
           role="presentation"
@@ -213,33 +240,52 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
           ${this.renderIcon("Maximize2")}
         </button>
       `}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(t){this.setDockMode(t)}serializeAttributes(t){return Object.entries(t).filter(([t,e])=>"key"!==t&&null!=e&&""!==e).map(([t,e])=>`${t}="${String(e).replace(/"/g,"&quot;")}"`).join(" ")}sanitizeForLogging(t,e=0,a=new WeakSet){if(void 0===t)return"[undefined]";if(null===t||"number"==typeof t||"boolean"==typeof t)return t;if("string"==typeof t)return t;if("bigint"==typeof t||"symbol"==typeof t||"function"==typeof t)return String(t);if(t instanceof Date)return t.toISOString();if(Array.isArray(t))return e>=4?"[Truncated depth]":t.map(t=>this.sanitizeForLogging(t,e+1,a));if("object"==typeof t){if(a.has(t))return"[Circular]";if(a.add(t),e>=4)return"[Truncated depth]";const h={};for(const[r,i]of Object.entries(t))h[r]=this.sanitizeForLogging(i,e+1,a);return h}return String(t)}normalizeEventPayload(t,e){if(e&&"object"==typeof e&&"event"in e){const{event:t,...a}=e,h=0===Object.keys(a).length?t:{event:t,...a};return this.sanitizeForLogging(h)}return this.sanitizeForLogging(e)}normalizeMessageContent(t){if("string"==typeof t)return t;if(t&&"object"==typeof t&&"text"in t){const e=t.text;if("string"==typeof e)return e}if(null==t)return"";if("object"==typeof t)try{return JSON.stringify(this.sanitizeForLogging(t))}catch(t){return""}return String(t)}normalizeToolCalls(t){return Array.isArray(t)?t.map(t=>{if(!t||"object"!=typeof t)return null;const e=t,a=e.function,h="string"==typeof(null==a?void 0:a.name)?a.name:"string"==typeof e.toolName?e.toolName:void 0,r=a&&"arguments"in a?a.arguments:e.arguments,i={id:"string"==typeof e.id?e.id:void 0,toolName:"string"==typeof e.toolName?e.toolName:h,status:"string"==typeof e.status?e.status:void 0};return h&&(i.function={name:h,arguments:this.sanitizeForLogging(r)}),i}).filter(t=>Boolean(t)):[]}normalizeAgentMessage(t){if(!t||"object"!=typeof t)return null;const e=t,a="string"==typeof e.role?e.role:"unknown",h=this.normalizeMessageContent(e.content),r=this.normalizeToolCalls(e.toolCalls);return{id:"string"==typeof e.id?e.id:void 0,role:a,contentText:h,contentRaw:void 0!==e.content?this.sanitizeForLogging(e.content):void 0,toolCalls:r}}normalizeAgentMessages(t){if(!Array.isArray(t))return null;return t.map(t=>this.normalizeAgentMessage(t)).filter(t=>null!==t)}normalizeContextStore(t){if(!t||"object"!=typeof t)return{};const e={};for(const[a,h]of Object.entries(t))if(h&&"object"==typeof h&&"value"in h){const t=h,r="string"==typeof t.description&&t.description.trim().length>0?t.description:void 0;e[a]={description:r,value:t.value}}else e[a]={value:h};return e}getSelectedMenu(){const t=this.menuItems.find(t=>t.key===this.selectedMenu);return null!=t?t:this.menuItems[0]}renderCoreWarningBanner(){return this._core?e.nothing:e.html`
-      <div 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">
-        <span class="mt-0.5 shrink-0 text-amber-600">${this.renderIcon("AlertTriangle")}</span>
+      <div
+        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"
+      >
+        <span class="mt-0.5 shrink-0 text-amber-600"
+          >${this.renderIcon("AlertTriangle")}</span
+        >
         <div class="space-y-1">
-          <div class="font-semibold text-amber-900">CopilotKit core not attached</div>
+          <div class="font-semibold text-amber-900">
+            CopilotKit core not attached
+          </div>
           <p class="text-[11px] leading-snug text-amber-800">
-            Pass a live <code>CopilotKitCore</code> instance to <code>&lt;cpk-web-inspector&gt;</code> or expose it on
+            Pass a live <code>CopilotKitCore</code> instance to
+            <code>&lt;cpk-web-inspector&gt;</code> or expose it on
             <code>window.__COPILOTKIT_CORE__</code> for auto-attach.
           </p>
         </div>
       </div>
     `}getCoreStatusSummary(){var t,e;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."};const a=null!==(t=this.runtimeStatus)&&void 0!==t?t:Gd.Disconnected,h=null===(e=this.lastCoreError)||void 0===e?void 0:e.message;return a===Gd.Error?{label:"Runtime error",tone:"border border-rose-200 bg-rose-50 text-rose-700",description:null!=h?h:"CopilotKit runtime reported an error."}:a===Gd.Connecting?{label:"Connecting",tone:"border border-amber-200 bg-amber-50 text-amber-800",description:"Waiting for CopilotKit runtime to finish connecting."}:a===Gd.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:null!=h?h:"Waiting for CopilotKit runtime to connect."}}renderMainContent(){return"ag-ui-events"===this.selectedMenu?this.renderEventsTable():"agents"===this.selectedMenu?this.renderAgentsView():"frontend-tools"===this.selectedMenu?this.renderToolsView():"agent-context"===this.selectedMenu?this.renderContextView():e.nothing}renderEventsTable(){const t=this.getEventsForSelectedContext(),a=this.filterEvents(t),h="all-agents"===this.selectedContext?"all agents":`agent ${this.selectedContext}`;return 0===t.length?e.html`
-        <div class="flex h-full items-center justify-center px-4 py-8 text-center">
+        <div
+          class="flex h-full items-center justify-center px-4 py-8 text-center"
+        >
           <div class="max-w-md">
-            <div class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8">
+            <div
+              class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8"
+            >
               ${this.renderIcon("Zap")}
             </div>
             <p class="text-sm text-gray-600">No events yet</p>
-            <p class="mt-2 text-xs text-gray-500">Trigger an agent run to see live activity.</p>
+            <p class="mt-2 text-xs text-gray-500">
+              Trigger an agent run to see live activity.
+            </p>
           </div>
         </div>
       `:0===a.length?e.html`
-        <div class="flex h-full items-center justify-center px-4 py-8 text-center">
+        <div
+          class="flex h-full items-center justify-center px-4 py-8 text-center"
+        >
           <div class="max-w-md space-y-3">
-            <div class="flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8">
+            <div
+              class="flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8"
+            >
               ${this.renderIcon("Filter")}
             </div>
-            <p class="text-sm text-gray-600">No events match the current filters.</p>
+            <p class="text-sm text-gray-600">
+              No events match the current filters.
+            </p>
             <div>
               <button
                 type="button"
@@ -254,7 +300,9 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
         </div>
       `:e.html`
       <div class="flex h-full flex-col">
-        <div class="flex flex-col gap-1.5 border-b border-gray-200 bg-white px-4 py-2.5">
+        <div
+          class="flex flex-col gap-1.5 border-b border-gray-200 bg-white px-4 py-2.5"
+        >
           <div class="flex flex-wrap items-center gap-2">
             <div class="relative min-w-[200px] flex-1">
               <input
@@ -271,7 +319,9 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
               @change=${this.handleEventTypeChange}
             >
               <option value="all">All event types</option>
-              ${po.map(t=>e.html`<option value=${t}>${t.toLowerCase().replace(/_/g," ")}</option>`)}
+              ${po.map(t=>e.html`<option value=${t}>
+                    ${t.toLowerCase().replace(/_/g," ")}
+                  </option>`)}
             </select>
             <div class="flex items-center gap-1 text-[11px]">
               <button
@@ -310,23 +360,32 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
             </div>
           </div>
           <div class="text-[11px] text-gray-500">
-            Showing ${a.length} of ${t.length}${"all-agents"===this.selectedContext?"":` for ${h}`}
+            Showing ${a.length} of
+            ${t.length}${"all-agents"===this.selectedContext?"":` for ${h}`}
           </div>
         </div>
         <div class="relative h-full w-full overflow-y-auto overflow-x-hidden">
           <table class="w-full table-fixed border-collapse text-xs box-border">
             <thead class="sticky top-0 z-10">
               <tr class="bg-white">
-                <th class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900">
+                <th
+                  class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900"
+                >
                   Agent
                 </th>
-                <th class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900">
+                <th
+                  class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900"
+                >
                   Time
                 </th>
-                <th class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900">
+                <th
+                  class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900"
+                >
                   Event Type
                 </th>
-                <th class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900">
+                <th
+                  class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900"
+                >
                   AG-UI Event
                 </th>
               </tr>
@@ -337,10 +396,16 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
                     class="${h} cursor-pointer transition hover:bg-blue-50/50"
                     @click=${()=>this.toggleRowExpansion(t.id)}
                   >
-                    <td class="border-l border-r border-b border-gray-200 px-3 py-2">
-                      <span class="font-mono text-[11px] text-gray-600">${t.agentId}</span>
+                    <td
+                      class="border-l border-r border-b border-gray-200 px-3 py-2"
+                    >
+                      <span class="font-mono text-[11px] text-gray-600"
+                        >${t.agentId}</span
+                      >
                     </td>
-                    <td class="border-r border-b border-gray-200 px-3 py-2 font-mono text-[11px] text-gray-600">
+                    <td
+                      class="border-r border-b border-gray-200 px-3 py-2 font-mono text-[11px] text-gray-600"
+                    >
                       <span title=${new Date(t.timestamp).toLocaleString()}>
                         ${new Date(t.timestamp).toLocaleTimeString()}
                       </span>
@@ -348,10 +413,16 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
                     <td class="border-r border-b border-gray-200 px-3 py-2">
                       <span class=${r}>${t.type}</span>
                     </td>
-                    <td class="border-r border-b border-gray-200 px-3 py-2 font-mono text-[10px] text-gray-600 ${o?"":"truncate max-w-xs"}">
+                    <td
+                      class="border-r border-b border-gray-200 px-3 py-2 font-mono text-[10px] text-gray-600 ${o?"":"truncate max-w-xs"}"
+                    >
                       ${o?e.html`
                             <div class="group relative">
-                              <pre class="m-0 whitespace-pre-wrap break-words text-[10px] font-mono text-gray-600">${d}</pre>
+                              <pre
+                                class="m-0 whitespace-pre-wrap break-words text-[10px] font-mono text-gray-600"
+                              >
+${d}</pre
+                              >
                               <button
                                 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(t.id)?"bg-green-100 text-green-700":"bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900"}"
                                 @click=${e=>{e.stopPropagation(),this.copyToClipboard(d,t.id)}}
@@ -368,13 +439,19 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
         </div>
       </div>
     `}handleEventFilterInput(t){var e;const a=t.target;this.eventFilterText=null!==(e=null==a?void 0:a.value)&&void 0!==e?e:"",this.requestUpdate()}handleEventTypeChange(t){const e=t.target,a=null==e?void 0:e.value;a&&(this.eventTypeFilter=a,this.requestUpdate())}resetEventFilters(){this.eventFilterText="",this.eventTypeFilter="all",this.requestUpdate()}exportEvents(t){try{const e=JSON.stringify(t,null,2),a=new Blob([e],{type:"application/json"}),h=URL.createObjectURL(a),r=document.createElement("a");r.href=h,r.download=`copilotkit-events-${Date.now()}.json`,r.click(),URL.revokeObjectURL(h)}catch(t){console.error("Failed to export events",t)}}renderAgentsView(){if("all-agents"===this.selectedContext)return e.html`
-        <div class="flex h-full items-center justify-center px-4 py-8 text-center">
+        <div
+          class="flex h-full items-center justify-center px-4 py-8 text-center"
+        >
           <div class="max-w-md">
-            <div class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8">
+            <div
+              class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8"
+            >
               ${this.renderIcon("Bot")}
             </div>
             <p class="text-sm text-gray-600">No agent selected</p>
-            <p class="mt-2 text-xs text-gray-500">Select an agent from the dropdown above to view details.</p>
+            <p class="mt-2 text-xs text-gray-500">
+              Select an agent from the dropdown above to view details.
+            </p>
           </div>
         </div>
       `;const t=this.selectedContext,a=this.getAgentStatus(t),h=this.getAgentStats(t),r=this.getLatestStateForAgent(t),i=this.getLatestMessagesForAgent(t);return e.html`
@@ -383,18 +460,27 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
         <div class="rounded-lg border border-gray-200 bg-white p-4">
           <div class="flex items-start justify-between mb-4">
             <div class="flex items-center gap-3">
-              <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
+              <div
+                class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600"
+              >
                 ${this.renderIcon("Bot")}
               </div>
               <div>
                 <h3 class="font-semibold text-sm text-gray-900">${t}</h3>
-                <span 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"}[a]} relative -translate-y-[2px]">
-                  <span class="h-1.5 w-1.5 rounded-full ${"running"===a?"bg-emerald-500 animate-pulse":"error"===a?"bg-rose-500":"bg-gray-400"}"></span>
+                <span
+                  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"}[a]} relative -translate-y-[2px]"
+                >
+                  <span
+                    class="h-1.5 w-1.5 rounded-full ${"running"===a?"bg-emerald-500 animate-pulse":"error"===a?"bg-rose-500":"bg-gray-400"}"
+                  ></span>
                   ${a.charAt(0).toUpperCase()+a.slice(1)}
                 </span>
               </div>
             </div>
-            ${h.lastActivity?e.html`<span class="text-xs text-gray-500">Last activity: ${new Date(h.lastActivity).toLocaleTimeString()}</span>`:e.nothing}
+            ${h.lastActivity?e.html`<span class="text-xs text-gray-500"
+                  >Last activity:
+                  ${new Date(h.lastActivity).toLocaleTimeString()}</span
+                >`:e.nothing}
           </div>
           <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
             <button
@@ -403,20 +489,36 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
               @click=${()=>this.handleMenuSelect("ag-ui-events")}
               title="View all events in AG-UI Events"
             >
-              <div class="truncate whitespace-nowrap text-xs text-gray-600">Total Events</div>
-              <div class="text-lg font-semibold text-gray-900">${h.totalEvents}</div>
+              <div class="truncate whitespace-nowrap text-xs text-gray-600">
+                Total Events
+              </div>
+              <div class="text-lg font-semibold text-gray-900">
+                ${h.totalEvents}
+              </div>
             </button>
             <div class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden">
-              <div class="truncate whitespace-nowrap text-xs text-gray-600">Messages</div>
-              <div class="text-lg font-semibold text-gray-900">${h.messages}</div>
+              <div class="truncate whitespace-nowrap text-xs text-gray-600">
+                Messages
+              </div>
+              <div class="text-lg font-semibold text-gray-900">
+                ${h.messages}
+              </div>
             </div>
             <div class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden">
-              <div class="truncate whitespace-nowrap text-xs text-gray-600">Tool Calls</div>
-              <div class="text-lg font-semibold text-gray-900">${h.toolCalls}</div>
+              <div class="truncate whitespace-nowrap text-xs text-gray-600">
+                Tool Calls
+              </div>
+              <div class="text-lg font-semibold text-gray-900">
+                ${h.toolCalls}
+              </div>
             </div>
             <div class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden">
-              <div class="truncate whitespace-nowrap text-xs text-gray-600">Errors</div>
-              <div class="text-lg font-semibold text-gray-900">${h.errors}</div>
+              <div class="truncate whitespace-nowrap text-xs text-gray-600">
+                Errors
+              </div>
+              <div class="text-lg font-semibold text-gray-900">
+                ${h.errors}
+              </div>
             </div>
           </div>
         </div>
@@ -428,11 +530,17 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
           </div>
           <div class="overflow-auto p-4">
             ${this.hasRenderableState(r)?e.html`
-                  <pre class="overflow-auto rounded-md bg-gray-50 p-3 text-xs text-gray-800 max-h-64"><code>${this.formatStateForDisplay(r)}</code></pre>
+                  <pre
+                    class="overflow-auto rounded-md bg-gray-50 p-3 text-xs text-gray-800 max-h-64"
+                  ><code>${this.formatStateForDisplay(r)}</code></pre>
                 `:e.html`
-                  <div class="flex h-40 items-center justify-center text-xs text-gray-500">
+                  <div
+                    class="flex h-40 items-center justify-center text-xs text-gray-500"
+                  >
                     <div class="flex items-center gap-2 text-gray-500">
-                      <span class="text-lg text-gray-400">${this.renderIcon("Database")}</span>
+                      <span class="text-lg text-gray-400"
+                        >${this.renderIcon("Database")}</span
+                      >
                       <span>State is empty</span>
                     </div>
                   </div>
@@ -443,27 +551,47 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
         <!-- Current Messages Section -->
         <div class="rounded-lg border border-gray-200 bg-white">
           <div class="border-b border-gray-200 px-4 py-3">
-            <h4 class="text-sm font-semibold text-gray-900">Current Messages</h4>
+            <h4 class="text-sm font-semibold text-gray-900">
+              Current Messages
+            </h4>
           </div>
           <div class="overflow-auto">
             ${i&&i.length>0?e.html`
                   <table class="w-full text-xs">
                     <thead class="bg-gray-50">
                       <tr>
-                        <th class="px-4 py-2 text-left font-medium text-gray-700">Role</th>
-                        <th class="px-4 py-2 text-left font-medium text-gray-700">Content</th>
+                        <th
+                          class="px-4 py-2 text-left font-medium text-gray-700"
+                        >
+                          Role
+                        </th>
+                        <th
+                          class="px-4 py-2 text-left font-medium text-gray-700"
+                        >
+                          Content
+                        </th>
                       </tr>
                     </thead>
                     <tbody class="divide-y divide-gray-200">
                       ${i.map(t=>{var a,h;const r=t.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"},n=null!==(a=t.contentText)&&void 0!==a?a:"",d=null!==(h=t.toolCalls)&&void 0!==h?h:[],o=n.trim().length>0,s=d.length>0?"Invoked tool call":"—";return e.html`
                           <tr>
                             <td class="px-4 py-2 align-top">
-                              <span class="inline-flex rounded px-2 py-0.5 text-[10px] font-medium ${i[r]||i.unknown}">
+                              <span
+                                class="inline-flex rounded px-2 py-0.5 text-[10px] font-medium ${i[r]||i.unknown}"
+                              >
                                 ${r}
                               </span>
                             </td>
                             <td class="px-4 py-2">
-                              ${o?e.html`<div class="max-w-2xl whitespace-pre-wrap break-words text-gray-700">${n}</div>`:e.html`<div class="text-xs italic text-gray-400">${s}</div>`}
+                              ${o?e.html`<div
+                                    class="max-w-2xl whitespace-pre-wrap break-words text-gray-700"
+                                  >
+                                    ${n}
+                                  </div>`:e.html`<div
+                                    class="text-xs italic text-gray-400"
+                                  >
+                                    ${s}
+                                  </div>`}
                               ${"assistant"===r&&d.length>0?this.renderToolCallDetails(d):e.nothing}
                             </td>
                           </tr>
@@ -471,9 +599,13 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
                     </tbody>
                   </table>
                 `:e.html`
-                  <div class="flex h-40 items-center justify-center text-xs text-gray-500">
+                  <div
+                    class="flex h-40 items-center justify-center text-xs text-gray-500"
+                  >
                     <div class="flex items-center gap-2 text-gray-500">
-                      <span class="text-lg text-gray-400">${this.renderIcon("MessageSquare")}</span>
+                      <span class="text-lg text-gray-400"
+                        >${this.renderIcon("MessageSquare")}</span
+                      >
                       <span>No messages available</span>
                     </div>
                   </div>
@@ -482,14 +614,19 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
         </div>
       </div>
     `}renderContextDropdown(){var t,a;const h="agents"===this.selectedMenu?this.contextOptions.filter(t=>"all-agents"!==t.key):this.contextOptions,r=null!==(a=null===(t=h.find(t=>t.key===this.selectedContext))||void 0===t?void 0:t.label)&&void 0!==a?a:"";return e.html`
-      <div class="relative z-40 min-w-0 flex-1" data-context-dropdown-root="true">
+      <div
+        class="relative z-40 min-w-0 flex-1"
+        data-context-dropdown-root="true"
+      >
         <button
           type="button"
           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"
           @pointerdown=${this.handleContextDropdownToggle}
         >
           <span class="truncate flex-1 text-left">${r}</span>
-          <span class="shrink-0 text-gray-400">${this.renderIcon("ChevronDown")}</span>
+          <span class="shrink-0 text-gray-400"
+            >${this.renderIcon("ChevronDown")}</span
+          >
         </button>
         ${this.contextMenuOpen?e.html`
               <div
@@ -503,25 +640,39 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
                       data-context-dropdown-root="true"
                       @click=${()=>this.handleContextOptionSelect(t.key)}
                     >
-                      <span class="truncate ${t.key===this.selectedContext?"text-gray-900 font-medium":"text-gray-600"}">${t.label}</span>
-                      ${t.key===this.selectedContext?e.html`<span class="text-gray-500">${this.renderIcon("Check")}</span>`:e.nothing}
+                      <span
+                        class="truncate ${t.key===this.selectedContext?"text-gray-900 font-medium":"text-gray-600"}"
+                        >${t.label}</span
+                      >
+                      ${t.key===this.selectedContext?e.html`<span class="text-gray-500"
+                            >${this.renderIcon("Check")}</span
+                          >`:e.nothing}
                     </button>
                   `)}
               </div>
             `:e.nothing}
       </div>
     `}handleMenuSelect(t){if(this.menuItems.some(e=>e.key===t)){if(this.selectedMenu=t,"agents"===t&&"all-agents"===this.selectedContext){const t=this.contextOptions.filter(t=>"all-agents"!==t.key);if(t.length>0){const e=t.find(t=>"default"===t.key);this.selectedContext=e?e.key:t[0].key}}this.contextMenuOpen=!1,this.persistState(),this.requestUpdate()}}handleContextDropdownToggle(t){t.preventDefault(),t.stopPropagation(),this.contextMenuOpen=!this.contextMenuOpen,this.requestUpdate()}handleContextOptionSelect(t){this.contextOptions.some(e=>e.key===t)&&(this.selectedContext!==t&&(this.selectedContext=t,this.expandedRows.clear()),this.contextMenuOpen=!1,this.persistState(),this.requestUpdate())}renderToolsView(){if(!this._core)return e.html`
-        <div class="flex h-full items-center justify-center px-4 py-8 text-xs text-gray-500">
+        <div
+          class="flex h-full items-center justify-center px-4 py-8 text-xs text-gray-500"
+        >
           No core instance available
         </div>
       `;this.refreshToolsSnapshot();const t=this.cachedTools;if(0===t.length)return e.html`
-        <div class="flex h-full items-center justify-center px-4 py-8 text-center">
+        <div
+          class="flex h-full items-center justify-center px-4 py-8 text-center"
+        >
           <div class="max-w-md">
-            <div class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8">
+            <div
+              class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8"
+            >
               ${this.renderIcon("Hammer")}
             </div>
             <p class="text-sm text-gray-600">No tools available</p>
-            <p class="mt-2 text-xs text-gray-500">Tools will appear here once agents are configured with tool handlers or renderers.</p>
+            <p class="mt-2 text-xs text-gray-500">
+              Tools will appear here once agents are configured with tool
+              handlers or renderers.
+            </p>
           </div>
         </div>
       `;const a="all-agents"===this.selectedContext?t:t.filter(t=>!t.agentId||t.agentId===this.selectedContext);return e.html`
@@ -542,8 +693,12 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
           <div class="flex items-start justify-between gap-3">
             <div class="flex-1 min-w-0">
               <div class="flex items-center gap-2 mb-1">
-                <span class="font-mono text-sm font-semibold text-gray-900">${t.name}</span>
-                <span 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"}[t.type]}">
+                <span class="font-mono text-sm font-semibold text-gray-900"
+                  >${t.name}</span
+                >
+                <span
+                  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"}[t.type]}"
+                >
                   ${t.type}
                 </span>
               </div>
@@ -554,12 +709,19 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
                 </span>
                 ${h.properties.length>0?e.html`
                       <span class="text-gray-300">•</span>
-                      <span>${h.properties.length} parameter${1!==h.properties.length?"s":""}</span>
+                      <span
+                        >${h.properties.length}
+                        parameter${1!==h.properties.length?"s":""}</span
+                      >
                     `:e.nothing}
               </div>
-              ${t.description?e.html`<p class="mt-2 text-xs text-gray-600">${t.description}</p>`:e.nothing}
+              ${t.description?e.html`<p class="mt-2 text-xs text-gray-600">
+                    ${t.description}
+                  </p>`:e.nothing}
             </div>
-            <span class="shrink-0 text-gray-400 transition ${a?"rotate-180":""}">
+            <span
+              class="shrink-0 text-gray-400 transition ${a?"rotate-180":""}"
+            >
               ${this.renderIcon("ChevronDown")}
             </span>
           </div>
@@ -568,39 +730,71 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
         ${a?e.html`
               <div class="border-t border-gray-200 bg-gray-50/50 px-4 py-3">
                 ${h.properties.length>0?e.html`
-                      <h5 class="mb-3 text-xs font-semibold text-gray-700">Parameters</h5>
+                      <h5 class="mb-3 text-xs font-semibold text-gray-700">
+                        Parameters
+                      </h5>
                       <div class="space-y-3">
                         ${h.properties.map(t=>e.html`
-                          <div class="rounded-md border border-gray-200 bg-white p-3">
-                            <div class="flex items-start justify-between gap-2 mb-1">
-                              <span class="font-mono text-xs font-medium text-gray-900">${t.name}</span>
-                              <div class="flex items-center gap-1.5 shrink-0">
-                                ${t.required?e.html`<span class="text-[9px] rounded border border-rose-200 bg-rose-50 px-1 py-0.5 font-medium text-rose-700">required</span>`:e.html`<span class="text-[9px] rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-medium text-gray-600">optional</span>`}
-                                ${t.type?e.html`<span class="text-[9px] rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-mono text-gray-600">${t.type}</span>`:e.nothing}
+                            <div
+                              class="rounded-md border border-gray-200 bg-white p-3"
+                            >
+                              <div
+                                class="flex items-start justify-between gap-2 mb-1"
+                              >
+                                <span
+                                  class="font-mono text-xs font-medium text-gray-900"
+                                  >${t.name}</span
+                                >
+                                <div class="flex items-center gap-1.5 shrink-0">
+                                  ${t.required?e.html`<span
+                                        class="text-[9px] rounded border border-rose-200 bg-rose-50 px-1 py-0.5 font-medium text-rose-700"
+                                        >required</span
+                                      >`:e.html`<span
+                                        class="text-[9px] rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-medium text-gray-600"
+                                        >optional</span
+                                      >`}
+                                  ${t.type?e.html`<span
+                                        class="text-[9px] rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-mono text-gray-600"
+                                        >${t.type}</span
+                                      >`:e.nothing}
+                                </div>
                               </div>
-                            </div>
-                            ${t.description?e.html`<p class="mt-1 text-xs text-gray-600">${t.description}</p>`:e.nothing}
-                            ${void 0!==t.defaultValue?e.html`
-                                  <div class="mt-2 flex items-center gap-1.5 text-[10px] text-gray-500">
-                                    <span>Default:</span>
-                                    <code class="rounded bg-gray-100 px-1 py-0.5 font-mono">${JSON.stringify(t.defaultValue)}</code>
-                                  </div>
-                                `:e.nothing}
-                            ${t.enum&&t.enum.length>0?e.html`
-                                  <div class="mt-2">
-                                    <span class="text-[10px] text-gray-500">Allowed values:</span>
-                                    <div class="mt-1 flex flex-wrap gap-1">
-                                      ${t.enum.map(t=>e.html`
-                                        <code class="rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 text-[10px] font-mono text-gray-700">${JSON.stringify(t)}</code>
-                                      `)}
+                              ${t.description?e.html`<p class="mt-1 text-xs text-gray-600">
+                                    ${t.description}
+                                  </p>`:e.nothing}
+                              ${void 0!==t.defaultValue?e.html`
+                                    <div
+                                      class="mt-2 flex items-center gap-1.5 text-[10px] text-gray-500"
+                                    >
+                                      <span>Default:</span>
+                                      <code
+                                        class="rounded bg-gray-100 px-1 py-0.5 font-mono"
+                                        >${JSON.stringify(t.defaultValue)}</code
+                                      >
+                                    </div>
+                                  `:e.nothing}
+                              ${t.enum&&t.enum.length>0?e.html`
+                                    <div class="mt-2">
+                                      <span class="text-[10px] text-gray-500"
+                                        >Allowed values:</span
+                                      >
+                                      <div class="mt-1 flex flex-wrap gap-1">
+                                        ${t.enum.map(t=>e.html`
+                                            <code
+                                              class="rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 text-[10px] font-mono text-gray-700"
+                                              >${JSON.stringify(t)}</code
+                                            >
+                                          `)}
+                                      </div>
                                     </div>
-                                  </div>
-                                `:e.nothing}
-                          </div>
-                        `)}
+                                  `:e.nothing}
+                            </div>
+                          `)}
                       </div>
                     `:e.html`
-                      <div class="flex items-center justify-center py-4 text-xs text-gray-500">
+                      <div
+                        class="flex items-center justify-center py-4 text-xs text-gray-500"
+                      >
                         <span>No parameters defined</span>
                       </div>
                     `}
@@ -608,13 +802,19 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
             `:e.nothing}
       </div>
     `}extractSchemaInfo(t){const e={properties:[]};if(!t||"object"!=typeof t)return e;const a=t._def;if(a&&"object"==typeof a){if("ZodObject"===a.typeName){const t=a.shape,h="function"==typeof t?t():t;if(!h||"object"!=typeof h)return e;const r=new Set;"strict"!==a.unknownKeys&&a.catchall||Object.keys(h||{}).forEach(t=>{const e=h[t];(null==e?void 0:e._def)&&!this.isZodOptional(e)&&r.add(t)});for(const[t,a]of Object.entries(h||{})){const h=this.extractZodFieldInfo(a);e.properties.push({name:t,type:h.type,description:h.description,required:r.has(t),defaultValue:h.defaultValue,enum:h.enum})}}}else if("object"===t.type&&t.properties){const a=t.properties,h=new Set(Array.isArray(t.required)?t.required:[]);for(const[t,r]of Object.entries(null!=a?a:{})){const a=r;e.properties.push({name:t,type:a.type,description:"string"==typeof a.description?a.description:void 0,required:h.has(t),defaultValue:a.default,enum:Array.isArray(a.enum)?a.enum:void 0})}}return e}isZodOptional(t){const e=t;if(!(null==e?void 0:e._def))return!1;const a=e._def;return"ZodOptional"===a.typeName||"ZodNullable"===a.typeName||void 0!==a.defaultValue}extractZodFieldInfo(t){var e;const a={},h=t;if(!(null==h?void 0:h._def))return a;let r=h,i=r._def;for(;("ZodOptional"===i.typeName||"ZodNullable"===i.typeName||"ZodDefault"===i.typeName)&&("ZodDefault"===i.typeName&&void 0!==i.defaultValue&&(a.defaultValue="function"==typeof i.defaultValue?i.defaultValue():i.defaultValue),r=null!==(e=i.innerType)&&void 0!==e?e:r,null==r?void 0:r._def);)i=r._def;a.description="string"==typeof i.description?i.description:void 0;const n="string"==typeof i.typeName?i.typeName:void 0;return a.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(i.values)?a.enum=i.values:"ZodLiteral"===n&&void 0!==i.value&&(a.enum=[i.value]),a}toggleToolExpansion(t){this.expandedTools.has(t)?this.expandedTools.delete(t):this.expandedTools.add(t),this.requestUpdate()}renderContextView(){const t=Object.entries(this.contextStore);return 0===t.length?e.html`
-        <div class="flex h-full items-center justify-center px-4 py-8 text-center">
+        <div
+          class="flex h-full items-center justify-center px-4 py-8 text-center"
+        >
           <div class="max-w-md">
-            <div class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8">
+            <div
+              class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8"
+            >
               ${this.renderIcon("FileText")}
             </div>
             <p class="text-sm text-gray-600">No context available</p>
-            <p class="mt-2 text-xs text-gray-500">Context will appear here once added to CopilotKit.</p>
+            <p class="mt-2 text-xs text-gray-500">
+              Context will appear here once added to CopilotKit.
+            </p>
           </div>
         </div>
       `:e.html`
@@ -636,14 +836,20 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
             <div class="flex-1 min-w-0">
               <p class="text-sm font-medium text-gray-900 mb-1">${d}</p>
               <div class="flex items-center gap-2 text-xs text-gray-500">
-                <span class="font-mono truncate inline-block align-middle" style="max-width: 180px;">${t}</span>
+                <span
+                  class="font-mono truncate inline-block align-middle"
+                  style="max-width: 180px;"
+                  >${t}</span
+                >
                 ${n?e.html`
                       <span class="text-gray-300">•</span>
                       <span class="truncate">${i}</span>
                     `:e.nothing}
               </div>
             </div>
-            <span class="shrink-0 text-gray-400 transition ${r?"rotate-180":""}">
+            <span
+              class="shrink-0 text-gray-400 transition ${r?"rotate-180":""}"
+            >
               ${this.renderIcon("ChevronDown")}
             </span>
           </div>
@@ -653,11 +859,16 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
               <div class="border-t border-gray-200 bg-gray-50/50 px-4 py-3">
                 <div class="mb-3">
                   <h5 class="mb-1 text-xs font-semibold text-gray-700">ID</h5>
-                  <code class="block rounded bg-white border border-gray-200 px-2 py-1 text-[10px] font-mono text-gray-600">${t}</code>
+                  <code
+                    class="block rounded bg-white border border-gray-200 px-2 py-1 text-[10px] font-mono text-gray-600"
+                    >${t}</code
+                  >
                 </div>
                 ${n?e.html`
                       <div class="mb-2 flex items-center justify-between gap-2">
-                        <h5 class="text-xs font-semibold text-gray-700">Value</h5>
+                        <h5 class="text-xs font-semibold text-gray-700">
+                          Value
+                        </h5>
                         <button
                           class="flex items-center gap-1 rounded-md border border-gray-200 bg-white px-2 py-1 text-[10px] font-medium text-gray-700 transition hover:bg-gray-50"
                           type="button"
@@ -666,43 +877,75 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
                           ${this.copiedContextItems.has(t)?"Copied":"Copy JSON"}
                         </button>
                       </div>
-                      <div class="rounded-md border border-gray-200 bg-white p-3">
-                        <pre class="overflow-auto text-xs text-gray-800 max-h-96"><code>${this.formatContextValue(a.value)}</code></pre>
+                      <div
+                        class="rounded-md border border-gray-200 bg-white p-3"
+                      >
+                        <pre
+                          class="overflow-auto text-xs text-gray-800 max-h-96"
+                        ><code>${this.formatContextValue(a.value)}</code></pre>
                       </div>
                     `:e.html`
-                      <div class="flex items-center justify-center py-4 text-xs text-gray-500">
+                      <div
+                        class="flex items-center justify-center py-4 text-xs text-gray-500"
+                      >
                         <span>No value available</span>
                       </div>
                     `}
               </div>
             `:e.nothing}
       </div>
-    `}getContextValuePreview(t){if(null==t)return"—";if("string"==typeof t)return t.length>50?`${t.substring(0,50)}...`:t;if("number"==typeof t||"boolean"==typeof t)return String(t);if(Array.isArray(t))return`Array(${t.length})`;if("object"==typeof t){const e=Object.keys(t);return`Object with ${e.length} key${1!==e.length?"s":""}`}return"function"==typeof t?"Function":String(t)}formatContextValue(t){if(void 0===t)return"undefined";if(null===t)return"null";if("function"==typeof t)return t.toString();try{return JSON.stringify(t,null,2)}catch(e){return String(t)}}async copyContextValue(t,e){var a;if("undefined"==typeof navigator||!(null===(a=navigator.clipboard)||void 0===a?void 0:a.writeText))return void console.warn("Clipboard API is not available in this environment.");const h=this.formatContextValue(t);try{await navigator.clipboard.writeText(h),this.copiedContextItems.add(e),this.requestUpdate(),setTimeout(()=>{this.copiedContextItems.delete(e),this.requestUpdate()},1500)}catch(t){console.error("Failed to copy context value:",t)}}toggleContextExpansion(t){this.expandedContextItems.has(t)?this.expandedContextItems.delete(t):this.expandedContextItems.add(t),this.requestUpdate()}toggleRowExpansion(t){const e=window.getSelection();e&&e.toString().length>0||(this.expandedRows.has(t)?this.expandedRows.delete(t):this.expandedRows.add(t),this.requestUpdate())}renderAnnouncementPanel(){if(!this.isOpen)return e.nothing;if(this.ensureAnnouncementLoading(),!this.hasUnseenAnnouncement)return e.nothing;if(!this.announcementLoaded&&!this.announcementMarkdown)return e.html`<div class="mx-4 my-3 rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 shadow-[0_12px_30px_rgba(15,23,42,0.12)]">
+    `}getContextValuePreview(t){if(null==t)return"—";if("string"==typeof t)return t.length>50?`${t.substring(0,50)}...`:t;if("number"==typeof t||"boolean"==typeof t)return String(t);if(Array.isArray(t))return`Array(${t.length})`;if("object"==typeof t){const e=Object.keys(t);return`Object with ${e.length} key${1!==e.length?"s":""}`}return"function"==typeof t?"Function":String(t)}formatContextValue(t){if(void 0===t)return"undefined";if(null===t)return"null";if("function"==typeof t)return t.toString();try{return JSON.stringify(t,null,2)}catch(e){return String(t)}}async copyContextValue(t,e){var a;if("undefined"==typeof navigator||!(null===(a=navigator.clipboard)||void 0===a?void 0:a.writeText))return void console.warn("Clipboard API is not available in this environment.");const h=this.formatContextValue(t);try{await navigator.clipboard.writeText(h),this.copiedContextItems.add(e),this.requestUpdate(),setTimeout(()=>{this.copiedContextItems.delete(e),this.requestUpdate()},1500)}catch(t){console.error("Failed to copy context value:",t)}}toggleContextExpansion(t){this.expandedContextItems.has(t)?this.expandedContextItems.delete(t):this.expandedContextItems.add(t),this.requestUpdate()}toggleRowExpansion(t){const e=window.getSelection();e&&e.toString().length>0||(this.expandedRows.has(t)?this.expandedRows.delete(t):this.expandedRows.add(t),this.requestUpdate())}renderAnnouncementPanel(){if(!this.isOpen)return e.nothing;if(this.ensureAnnouncementLoading(),!this.hasUnseenAnnouncement)return e.nothing;if(!this.announcementLoaded&&!this.announcementMarkdown)return e.html`<div
+        class="mx-4 my-3 rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 shadow-[0_12px_30px_rgba(15,23,42,0.12)]"
+      >
         <div class="flex items-center gap-2 font-semibold">
-          <span class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-slate-900 text-white shadow-sm">
+          <span
+            class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-slate-900 text-white shadow-sm"
+          >
             ${this.renderIcon("Megaphone")}
           </span>
           <span>Loading latest announcement…</span>
         </div>
-      </div>`;if(this.announcementLoadError)return e.html`<div class="mx-4 my-3 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-900 shadow-[0_12px_30px_rgba(15,23,42,0.12)]">
+      </div>`;if(this.announcementLoadError)return e.html`<div
+        class="mx-4 my-3 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-900 shadow-[0_12px_30px_rgba(15,23,42,0.12)]"
+      >
         <div class="flex items-center gap-2 font-semibold">
-          <span class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-rose-600 text-white shadow-sm">
+          <span
+            class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-rose-600 text-white shadow-sm"
+          >
             ${this.renderIcon("Megaphone")}
           </span>
           <span>Announcement unavailable</span>
         </div>
-        <p class="mt-2 text-xs text-rose-800">We couldn’t load the latest notice. Please try opening the inspector again.</p>
-      </div>`;if(!this.announcementMarkdown)return e.nothing;const t=this.announcementHtml?G(this.announcementHtml):e.html`<pre class="whitespace-pre-wrap text-sm text-gray-900">${this.announcementMarkdown}</pre>`;return e.html`<div class="mx-4 my-3 rounded-xl border border-slate-200 bg-white px-4 py-4 shadow-[0_12px_30px_rgba(15,23,42,0.12)]">
-      <div class="mb-3 flex items-center gap-2 text-sm font-semibold text-slate-900">
-        <span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-slate-900 text-white shadow-sm">
+        <p class="mt-2 text-xs text-rose-800">
+          We couldn’t load the latest notice. Please try opening the inspector
+          again.
+        </p>
+      </div>`;if(!this.announcementMarkdown)return e.nothing;const t=this.announcementHtml?G(this.announcementHtml):e.html`<pre class="whitespace-pre-wrap text-sm text-gray-900">
+${this.announcementMarkdown}</pre
+        >`;return e.html`<div
+      class="mx-4 my-3 rounded-xl border border-slate-200 bg-white px-4 py-4 shadow-[0_12px_30px_rgba(15,23,42,0.12)]"
+    >
+      <div
+        class="mb-3 flex items-center gap-2 text-sm font-semibold text-slate-900"
+      >
+        <span
+          class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-slate-900 text-white shadow-sm"
+        >
           ${this.renderIcon("Megaphone")}
         </span>
         <span>Announcement</span>
-        <button class="announcement-dismiss ml-auto" type="button" @click=${this.handleDismissAnnouncement} aria-label="Dismiss announcement">
+        <button
+          class="announcement-dismiss ml-auto"
+          type="button"
+          @click=${this.handleDismissAnnouncement}
+          aria-label="Dismiss announcement"
+        >
           Dismiss
         </button>
       </div>
-      <div class="announcement-content text-sm leading-relaxed text-gray-900">${t}</div>
+      <div class="announcement-content text-sm leading-relaxed text-gray-900">
+        ${t}
+      </div>
     </div>`}ensureAnnouncementLoading(){this.announcementPromise||"undefined"==typeof window||"undefined"==typeof fetch||(this.announcementPromise=this.fetchAnnouncement())}renderAnnouncementPreview(){if(!this.hasUnseenAnnouncement||!this.showAnnouncementPreview||!this.announcementPreviewText)return e.nothing;const t="left"===this.contextState.button.anchor.horizontal?"right":"left";return e.html`<div
       class="announcement-preview"
       data-side=${t}
@@ -736,7 +979,9 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
       }
 
       .inspector-window[data-transitioning="true"] {
-        transition: width 300ms ease, height 300ms ease;
+        transition:
+          width 300ms ease,
+          height 300ms ease;
       }
 
       .inspector-window[data-docked="true"] {
@@ -781,7 +1026,9 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
         opacity: 0;
         pointer-events: none;
-        transition: opacity 120ms ease, transform 120ms ease;
+        transition:
+          opacity 120ms ease,
+          transform 120ms ease;
         z-index: 4000;
       }
 
@@ -853,7 +1100,9 @@ var cd,ld=(cd=function(t,e){return cd=Object.setPrototypeOf||{__proto__:[]}insta
         border-radius: 8px;
         border: 1px solid rgba(148, 163, 184, 0.5);
         background: rgba(248, 250, 252, 0.9);
-        transition: background 120ms ease, color 120ms ease;
+        transition:
+          background 120ms ease,
+          color 120ms ease;
       }
 
       .announcement-dismiss:hover {