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

package/dist/index.mjs

@@ -36,15 +36,26 @@ function clampSize(size, viewport, edgeMargin, minWidth, minHeight) {
   };
 }
 function constrainToViewport(state, position, viewport, edgeMargin) {
-  const maxX = Math.max(edgeMargin, viewport.width - state.size.width - edgeMargin);
-  const maxY = Math.max(edgeMargin, viewport.height - state.size.height - edgeMargin);
+  const maxX = Math.max(
+    edgeMargin,
+    viewport.width - state.size.width - edgeMargin
+  );
+  const maxY = Math.max(
+    edgeMargin,
+    viewport.height - state.size.height - edgeMargin
+  );
   return {
     x: clamp(position.x, edgeMargin, maxX),
     y: clamp(position.y, edgeMargin, maxY)
   };
 }
 function keepPositionWithinViewport(state, viewport, edgeMargin) {
-  state.position = constrainToViewport(state, state.position, viewport, edgeMargin);
+  state.position = constrainToViewport(
+    state,
+    state.position,
+    viewport,
+    edgeMargin
+  );
 }
 function centerContext(state, viewport, edgeMargin) {
   const centered = {
@@ -61,18 +72,46 @@ function updateAnchorFromPosition(state, viewport, edgeMargin) {
   const horizontal = centerX < viewport.width / 2 ? "left" : "right";
   const vertical = centerY < viewport.height / 2 ? "top" : "bottom";
   state.anchor = { horizontal, vertical };
-  const maxHorizontalOffset = Math.max(edgeMargin, viewport.width - state.size.width - edgeMargin);
-  const maxVerticalOffset = Math.max(edgeMargin, viewport.height - state.size.height - edgeMargin);
+  const maxHorizontalOffset = Math.max(
+    edgeMargin,
+    viewport.width - state.size.width - edgeMargin
+  );
+  const maxVerticalOffset = Math.max(
+    edgeMargin,
+    viewport.height - state.size.height - edgeMargin
+  );
   state.anchorOffset = {
-    x: horizontal === "left" ? clamp(state.position.x, edgeMargin, maxHorizontalOffset) : clamp(viewport.width - state.position.x - state.size.width, edgeMargin, maxHorizontalOffset),
-    y: vertical === "top" ? clamp(state.position.y, edgeMargin, maxVerticalOffset) : clamp(viewport.height - state.position.y - state.size.height, edgeMargin, maxVerticalOffset)
+    x: horizontal === "left" ? clamp(state.position.x, edgeMargin, maxHorizontalOffset) : clamp(
+      viewport.width - state.position.x - state.size.width,
+      edgeMargin,
+      maxHorizontalOffset
+    ),
+    y: vertical === "top" ? clamp(state.position.y, edgeMargin, maxVerticalOffset) : clamp(
+      viewport.height - state.position.y - state.size.height,
+      edgeMargin,
+      maxVerticalOffset
+    )
   };
 }
 function applyAnchorPosition(state, viewport, edgeMargin) {
-  const maxHorizontalOffset = Math.max(edgeMargin, viewport.width - state.size.width - edgeMargin);
-  const maxVerticalOffset = Math.max(edgeMargin, viewport.height - state.size.height - edgeMargin);
-  const horizontalOffset = clamp(state.anchorOffset.x, edgeMargin, maxHorizontalOffset);
-  const verticalOffset = clamp(state.anchorOffset.y, edgeMargin, maxVerticalOffset);
+  const maxHorizontalOffset = Math.max(
+    edgeMargin,
+    viewport.width - state.size.width - edgeMargin
+  );
+  const maxVerticalOffset = Math.max(
+    edgeMargin,
+    viewport.height - state.size.height - edgeMargin
+  );
+  const horizontalOffset = clamp(
+    state.anchorOffset.x,
+    edgeMargin,
+    maxHorizontalOffset
+  );
+  const verticalOffset = clamp(
+    state.anchorOffset.y,
+    edgeMargin,
+    maxVerticalOffset
+  );
   const x = state.anchor.horizontal === "left" ? horizontalOffset : viewport.width - state.size.width - horizontalOffset;
   const y = state.anchor.vertical === "top" ? verticalOffset : viewport.height - state.size.height - verticalOffset;
   state.anchorOffset = { x: horizontalOffset, y: verticalOffset };
@@ -288,7 +327,10 @@ var WebInspectorElement = class extends LitElement {
       if (this.pointerId !== event.pointerId || !this.dragStart || !this.pointerContext) {
         return;
       }
-      const distance = Math.hypot(event.clientX - this.dragStart.x, event.clientY - this.dragStart.y);
+      const distance = Math.hypot(
+        event.clientX - this.dragStart.x,
+        event.clientY - this.dragStart.y
+      );
       if (!this.isDragging && distance < DRAG_THRESHOLD) {
         return;
       }
@@ -460,7 +502,9 @@ var WebInspectorElement = class extends LitElement {
         this.flattenedEvents = [];
       } else {
         this.agentEvents.delete(this.selectedContext);
-        this.flattenedEvents = this.flattenedEvents.filter((event) => event.agentId !== this.selectedContext);
+        this.flattenedEvents = this.flattenedEvents.filter(
+          (event) => event.agentId !== this.selectedContext
+        );
       }
       this.expandedRows.clear();
       this.copiedEvents.clear();
@@ -643,19 +687,39 @@ var WebInspectorElement = class extends LitElement {
         this.recordAgentEvent(agentId, "TEXT_MESSAGE_START", event);
       },
       onTextMessageContentEvent: ({ event, textMessageBuffer }) => {
-        this.recordAgentEvent(agentId, "TEXT_MESSAGE_CONTENT", { event, textMessageBuffer });
+        this.recordAgentEvent(agentId, "TEXT_MESSAGE_CONTENT", {
+          event,
+          textMessageBuffer
+        });
       },
       onTextMessageEndEvent: ({ event, textMessageBuffer }) => {
-        this.recordAgentEvent(agentId, "TEXT_MESSAGE_END", { event, textMessageBuffer });
+        this.recordAgentEvent(agentId, "TEXT_MESSAGE_END", {
+          event,
+          textMessageBuffer
+        });
       },
       onToolCallStartEvent: ({ event }) => {
         this.recordAgentEvent(agentId, "TOOL_CALL_START", event);
       },
-      onToolCallArgsEvent: ({ event, toolCallBuffer, toolCallName, partialToolCallArgs }) => {
-        this.recordAgentEvent(agentId, "TOOL_CALL_ARGS", { event, toolCallBuffer, toolCallName, partialToolCallArgs });
+      onToolCallArgsEvent: ({
+        event,
+        toolCallBuffer,
+        toolCallName,
+        partialToolCallArgs
+      }) => {
+        this.recordAgentEvent(agentId, "TOOL_CALL_ARGS", {
+          event,
+          toolCallBuffer,
+          toolCallName,
+          partialToolCallArgs
+        });
       },
       onToolCallEndEvent: ({ event, toolCallArgs, toolCallName }) => {
-        this.recordAgentEvent(agentId, "TOOL_CALL_END", { event, toolCallArgs, toolCallName });
+        this.recordAgentEvent(agentId, "TOOL_CALL_END", {
+          event,
+          toolCallArgs,
+          toolCallName
+        });
       },
       onToolCallResultEvent: ({ event }) => {
         this.recordAgentEvent(agentId, "TOOL_CALL_RESULT", event);
@@ -708,9 +772,15 @@ var WebInspectorElement = class extends LitElement {
       payload: normalizedPayload
     };
     const currentAgentEvents = this.agentEvents.get(agentId) ?? [];
-    const nextAgentEvents = [event, ...currentAgentEvents].slice(0, MAX_AGENT_EVENTS);
+    const nextAgentEvents = [event, ...currentAgentEvents].slice(
+      0,
+      MAX_AGENT_EVENTS
+    );
     this.agentEvents.set(agentId, nextAgentEvents);
-    this.flattenedEvents = [event, ...this.flattenedEvents].slice(0, MAX_TOTAL_EVENTS);
+    this.flattenedEvents = [event, ...this.flattenedEvents].slice(
+      0,
+      MAX_TOTAL_EVENTS
+    );
     this.refreshToolsSnapshot();
     this.requestUpdate();
   }
@@ -718,7 +788,9 @@ var WebInspectorElement = class extends LitElement {
     if (!agent?.agentId) {
       return;
     }
-    const messages = this.normalizeAgentMessages(agent.messages);
+    const messages = this.normalizeAgentMessages(
+      agent.messages
+    );
     if (messages) {
       this.agentMessages.set(agent.agentId, messages);
     } else {
@@ -743,7 +815,9 @@ var WebInspectorElement = class extends LitElement {
       { key: "all-agents", label: "All Agents" },
       ...Array.from(agentIds).sort((a, b) => a.localeCompare(b)).map((id) => ({ key: id, label: id }))
     ];
-    const optionsChanged = this.contextOptions.length !== nextOptions.length || this.contextOptions.some((option, index) => option.key !== nextOptions[index]?.key);
+    const optionsChanged = this.contextOptions.length !== nextOptions.length || this.contextOptions.some(
+      (option, index) => option.key !== nextOptions[index]?.key
+    );
     if (optionsChanged) {
       this.contextOptions = nextOptions;
     }
@@ -760,13 +834,17 @@ var WebInspectorElement = class extends LitElement {
         this.pendingSelectedContext = null;
       }
     }
-    const hasSelectedContext = nextOptions.some((option) => option.key === this.selectedContext);
+    const hasSelectedContext = nextOptions.some(
+      (option) => option.key === this.selectedContext
+    );
     if (!hasSelectedContext && this.pendingSelectedContext === null) {
       let nextSelected = "all-agents";
       if (agentIds.has("default")) {
         nextSelected = "default";
       } else if (agentIds.size > 0) {
-        nextSelected = Array.from(agentIds).sort((a, b) => a.localeCompare(b))[0];
+        nextSelected = Array.from(agentIds).sort(
+          (a, b) => a.localeCompare(b)
+        )[0];
       }
       if (this.selectedContext !== nextSelected) {
         this.selectedContext = nextSelected;
@@ -790,7 +868,10 @@ var WebInspectorElement = class extends LitElement {
       if (!query) {
         return true;
       }
-      const payloadText = this.stringifyPayload(event.payload, false).toLowerCase();
+      const payloadText = this.stringifyPayload(
+        event.payload,
+        false
+      ).toLowerCase();
       return event.type.toLowerCase().includes(query) || event.agentId.toLowerCase().includes(query) || payloadText.includes(query);
     });
   }
@@ -815,7 +896,9 @@ var WebInspectorElement = class extends LitElement {
     if (events.length === 0) {
       return "idle";
     }
-    const runEvent = events.find((e) => e.type === "RUN_STARTED" || e.type === "RUN_FINISHED" || e.type === "RUN_ERROR");
+    const runEvent = events.find(
+      (e) => e.type === "RUN_STARTED" || e.type === "RUN_FINISHED" || e.type === "RUN_ERROR"
+    );
     if (!runEvent) {
       return "idle";
     }
@@ -833,7 +916,10 @@ var WebInspectorElement = class extends LitElement {
   getAgentStats(agentId) {
     const events = this.agentEvents.get(agentId) ?? [];
     const messages = this.agentMessages.get(agentId);
-    const toolCallCount = messages ? messages.reduce((count, message) => count + (message.toolCalls?.length ?? 0), 0) : events.filter((e) => e.type === "TOOL_CALL_END").length;
+    const toolCallCount = messages ? messages.reduce(
+      (count, message) => count + (message.toolCalls?.length ?? 0),
+      0
+    ) : events.filter((e) => e.type === "TOOL_CALL_END").length;
     const messageCount = messages?.length ?? 0;
     return {
       totalEvents: events.length,
@@ -852,14 +938,24 @@ var WebInspectorElement = class extends LitElement {
         ${toolCalls.map((call, index) => {
       const functionName = call.function?.name ?? call.toolName ?? "Unknown function";
       const callId = typeof call?.id === "string" ? call.id : `tool-call-${index + 1}`;
-      const argsString = this.formatToolCallArguments(call.function?.arguments);
+      const argsString = this.formatToolCallArguments(
+        call.function?.arguments
+      );
       return 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>${functionName}</span>
                 <span class="text-[10px] text-gray-500">ID: ${callId}</span>
               </div>
-              ${argsString ? html`<pre class="mt-2 overflow-auto rounded bg-white p-2 text-[11px] leading-relaxed text-gray-800">${argsString}</pre>` : nothing}
+              ${argsString ? html`<pre
+                    class="mt-2 overflow-auto rounded bg-white p-2 text-[11px] leading-relaxed text-gray-800"
+                  >
+${argsString}</pre
+                  >` : nothing}
             </div>
           `;
     })}
@@ -1011,7 +1107,9 @@ var WebInspectorElement = class extends LitElement {
       }
 
       .inspector-window[data-transitioning="true"] {
-        transition: width 300ms ease, height 300ms ease;
+        transition:
+          width 300ms ease,
+          height 300ms ease;
       }
 
       .inspector-window[data-docked="true"] {
@@ -1056,7 +1154,9 @@ var WebInspectorElement = class extends LitElement {
         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;
       }
 
@@ -1128,7 +1228,9 @@ var WebInspectorElement = class extends LitElement {
         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 {
@@ -1188,7 +1290,10 @@ var WebInspectorElement = class extends LitElement {
     super.connectedCallback();
     if (typeof window !== "undefined") {
       window.addEventListener("resize", this.handleResize);
-      window.addEventListener("pointerdown", this.handleGlobalPointerDown);
+      window.addEventListener(
+        "pointerdown",
+        this.handleGlobalPointerDown
+      );
       this.hydrateStateFromStorageEarly();
       this.tryAutoAttachCore();
       this.ensureAnnouncementLoading();
@@ -1198,7 +1303,10 @@ var WebInspectorElement = class extends LitElement {
     super.disconnectedCallback();
     if (typeof window !== "undefined") {
       window.removeEventListener("resize", this.handleResize);
-      window.removeEventListener("pointerdown", this.handleGlobalPointerDown);
+      window.removeEventListener(
+        "pointerdown",
+        this.handleGlobalPointerDown
+      );
     }
     this.removeDockStyles();
     this.detachFromCore();
@@ -1281,7 +1389,12 @@ var WebInspectorElement = class extends LitElement {
         @click=${this.handleButtonClick}
       >
         ${this.renderAnnouncementPreview()}
-        <img src=${inspector_logo_icon_default} alt="Inspector logo" class="h-5 w-auto" loading="lazy" />
+        <img
+          src=${inspector_logo_icon_default}
+          alt="Inspector logo"
+          class="h-5 w-auto"
+          loading="lazy"
+        />
       </button>
     `;
   }
@@ -1299,7 +1412,9 @@ var WebInspectorElement = class extends LitElement {
     const contextDropdown = hasContextDropdown ? this.renderContextDropdown() : nothing;
     const coreStatus = this.getCoreStatusSummary();
     const agentSelector = hasContextDropdown ? contextDropdown : 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>
@@ -1322,7 +1437,9 @@ var WebInspectorElement = class extends LitElement {
                 @pointercancel=${this.handleResizePointerCancel}
               ></div>
             ` : 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 ${isDocked ? "" : this.isDragging && this.pointerContext === "window" ? "cursor-grabbing" : "cursor-grab"}"
             data-drag-context="window"
@@ -1333,12 +1450,15 @@ var WebInspectorElement = class extends LitElement {
           >
             <div class="flex flex-wrap items-center gap-3 px-4 py-3">
               <div class="flex items-center min-w-0">
-                <img src=${inspector_logo_default} alt="Inspector logo" class="h-6 w-auto" loading="lazy" />
+                <img
+                  src=${inspector_logo_default}
+                  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">
-                  ${agentSelector}
-                </div>
+                <div class="min-w-[160px] max-w-xs">${agentSelector}</div>
                 <div class="flex items-center gap-1">
                   ${this.renderDockControls()}
                   <button
@@ -1353,7 +1473,9 @@ var WebInspectorElement = class extends LitElement {
                 </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, label, icon }) => {
       const isSelected = this.selectedMenu === key;
       const tabClasses = [
@@ -1367,7 +1489,9 @@ var WebInspectorElement = class extends LitElement {
                     aria-pressed=${isSelected}
                     @click=${() => this.handleMenuSelect(key)}
                   >
-                    <span class="text-gray-400 ${isSelected ? "text-white" : ""}">
+                    <span
+                      class="text-gray-400 ${isSelected ? "text-white" : ""}"
+                    >
                       ${this.renderIcon(icon)}
                     </span>
                     <span>${label}</span>
@@ -1376,27 +1500,30 @@ var WebInspectorElement = class extends LitElement {
     })}
             </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 ${coreStatus.tone} w-full overflow-hidden my-1"
-                  title=${coreStatus.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 ${coreStatus.tone} w-full overflow-hidden my-1"
+                title=${coreStatus.description}
+              >
+                <span
+                  class="flex h-6 w-6 items-center justify-center rounded bg-white/60"
+                >
+                  ${this.renderIcon("Activity")}
+                </span>
+                <span class="font-medium">${coreStatus.label}</span>
+                <span class="truncate text-[11px] opacity-80"
+                  >${coreStatus.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">${coreStatus.label}</span>
-                  <span class="truncate text-[11px] opacity-80">${coreStatus.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"
@@ -1436,7 +1563,9 @@ var WebInspectorElement = class extends LitElement {
       this.dockMode = persisted.dockMode;
     }
     if (typeof persisted.selectedMenu === "string") {
-      const validMenu = this.menuItems.find((item) => item.key === persisted.selectedMenu);
+      const validMenu = this.menuItems.find(
+        (item) => item.key === persisted.selectedMenu
+      );
       if (validMenu) {
         this.selectedMenu = validMenu.key;
       }
@@ -1475,7 +1604,9 @@ var WebInspectorElement = class extends LitElement {
         this.contextState.window.anchorOffset = persistedWindow.anchorOffset;
       }
       if (isValidSize(persistedWindow.size)) {
-        this.contextState.window.size = this.clampWindowSize(persistedWindow.size);
+        this.contextState.window.size = this.clampWindowSize(
+          persistedWindow.size
+        );
       }
       if (typeof persistedWindow.hasCustomPosition === "boolean") {
         this.hasCustomPosition.window = persistedWindow.hasCustomPosition;
@@ -1491,7 +1622,9 @@ var WebInspectorElement = class extends LitElement {
   }
   measureContext(context) {
     const selector = context === "window" ? ".inspector-window" : ".console-button";
-    const element = this.renderRoot?.querySelector(selector);
+    const element = this.renderRoot?.querySelector(
+      selector
+    );
     if (!element) {
       return;
     }
@@ -1520,7 +1653,11 @@ var WebInspectorElement = class extends LitElement {
     }
     const viewport = this.getViewportSize();
     keepPositionWithinViewport(this.contextState.window, viewport, EDGE_MARGIN);
-    updateAnchorFromPosition(this.contextState.window, viewport, EDGE_MARGIN);
+    updateAnchorFromPosition(
+      this.contextState.window,
+      viewport,
+      EDGE_MARGIN
+    );
     this.updateHostTransform("window");
     this.persistState();
   }
@@ -1529,14 +1666,23 @@ var WebInspectorElement = class extends LitElement {
       return position;
     }
     const viewport = this.getViewportSize();
-    return constrainToViewport(this.contextState[context], position, viewport, EDGE_MARGIN);
+    return constrainToViewport(
+      this.contextState[context],
+      position,
+      viewport,
+      EDGE_MARGIN
+    );
   }
   keepPositionWithinViewport(context) {
     if (typeof window === "undefined") {
       return;
     }
     const viewport = this.getViewportSize();
-    keepPositionWithinViewport(this.contextState[context], viewport, EDGE_MARGIN);
+    keepPositionWithinViewport(
+      this.contextState[context],
+      viewport,
+      EDGE_MARGIN
+    );
   }
   getViewportSize() {
     if (typeof window === "undefined") {
@@ -1577,7 +1723,13 @@ var WebInspectorElement = class extends LitElement {
       };
     }
     const viewport = this.getViewportSize();
-    return clampSize(size, viewport, EDGE_MARGIN, minWidth, MIN_WINDOW_HEIGHT);
+    return clampSize(
+      size,
+      viewport,
+      EDGE_MARGIN,
+      minWidth,
+      MIN_WINDOW_HEIGHT
+    );
   }
   setDockMode(mode) {
     if (this.dockMode === mode) {
@@ -1675,7 +1827,11 @@ var WebInspectorElement = class extends LitElement {
       return;
     }
     const viewport = this.getViewportSize();
-    updateAnchorFromPosition(this.contextState[context], viewport, EDGE_MARGIN);
+    updateAnchorFromPosition(
+      this.contextState[context],
+      viewport,
+      EDGE_MARGIN
+    );
   }
   snapButtonToCorner() {
     if (typeof window === "undefined") {
@@ -1697,7 +1853,11 @@ var WebInspectorElement = class extends LitElement {
       return;
     }
     const viewport = this.getViewportSize();
-    applyAnchorPosition(this.contextState[context], viewport, EDGE_MARGIN);
+    applyAnchorPosition(
+      this.contextState[context],
+      viewport,
+      EDGE_MARGIN
+    );
     this.updateHostTransform(context);
     this.persistState();
   }
@@ -1825,7 +1985,11 @@ var WebInspectorElement = class extends LitElement {
     this.setDockMode(mode);
   }
   serializeAttributes(attributes) {
-    return Object.entries(attributes).filter(([key, value]) => key !== "key" && value !== void 0 && value !== null && value !== "").map(([key, value]) => `${key}="${String(value).replace(/"/g, "&quot;")}"`).join(" ");
+    return Object.entries(attributes).filter(
+      ([key, value]) => key !== "key" && value !== void 0 && value !== null && value !== ""
+    ).map(
+      ([key, value]) => `${key}="${String(value).replace(/"/g, "&quot;")}"`
+    ).join(" ");
   }
   sanitizeForLogging(value, depth = 0, seen = /* @__PURE__ */ new WeakSet()) {
     if (value === void 0) {
@@ -1847,7 +2011,9 @@ var WebInspectorElement = class extends LitElement {
       if (depth >= 4) {
         return "[Truncated depth]";
       }
-      return value.map((item) => this.sanitizeForLogging(item, depth + 1, seen));
+      return value.map(
+        (item) => this.sanitizeForLogging(item, depth + 1, seen)
+      );
     }
     if (typeof value === "object") {
       if (seen.has(value)) {
@@ -1858,7 +2024,9 @@ var WebInspectorElement = class extends LitElement {
         return "[Truncated depth]";
       }
       const result = {};
-      for (const [key, entry] of Object.entries(value)) {
+      for (const [key, entry] of Object.entries(
+        value
+      )) {
         result[key] = this.sanitizeForLogging(entry, depth + 1, seen);
       }
       return result;
@@ -1969,12 +2137,19 @@ var WebInspectorElement = class extends LitElement {
       return nothing;
     }
     return 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>
@@ -2039,25 +2214,37 @@ var WebInspectorElement = class extends LitElement {
     const selectedLabel = this.selectedContext === "all-agents" ? "all agents" : `agent ${this.selectedContext}`;
     if (events.length === 0) {
       return 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>
       `;
     }
     if (filteredEvents.length === 0) {
       return 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"
@@ -2074,7 +2261,9 @@ var WebInspectorElement = class extends LitElement {
     }
     return 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
@@ -2092,7 +2281,9 @@ var WebInspectorElement = class extends LitElement {
             >
               <option value="all">All event types</option>
               ${AGENT_EVENT_TYPES.map(
-      (type) => html`<option value=${type}>${type.toLowerCase().replace(/_/g, " ")}</option>`
+      (type) => html`<option value=${type}>
+                    ${type.toLowerCase().replace(/_/g, " ")}
+                  </option>`
     )}
             </select>
             <div class="flex items-center gap-1 text-[11px]">
@@ -2132,23 +2323,32 @@ var WebInspectorElement = class extends LitElement {
             </div>
           </div>
           <div class="text-[11px] text-gray-500">
-            Showing ${filteredEvents.length} of ${events.length}${this.selectedContext === "all-agents" ? "" : ` for ${selectedLabel}`}
+            Showing ${filteredEvents.length} of
+            ${events.length}${this.selectedContext === "all-agents" ? "" : ` for ${selectedLabel}`}
           </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>
@@ -2157,7 +2357,9 @@ var WebInspectorElement = class extends LitElement {
               ${filteredEvents.map((event, index) => {
       const rowBg = index % 2 === 0 ? "bg-white" : "bg-gray-50/50";
       const badgeClasses = this.getEventBadgeClasses(event.type);
-      const extractedEvent = this.extractEventFromPayload(event.payload);
+      const extractedEvent = this.extractEventFromPayload(
+        event.payload
+      );
       const inlineEvent = this.stringifyPayload(extractedEvent, false) || "\u2014";
       const prettyEvent = this.stringifyPayload(extractedEvent, true) || inlineEvent;
       const isExpanded = this.expandedRows.has(event.id);
@@ -2166,10 +2368,16 @@ var WebInspectorElement = class extends LitElement {
                     class="${rowBg} cursor-pointer transition hover:bg-blue-50/50"
                     @click=${() => this.toggleRowExpansion(event.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">${event.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"
+                        >${event.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(event.timestamp).toLocaleString()}>
                         ${new Date(event.timestamp).toLocaleTimeString()}
                       </span>
@@ -2177,12 +2385,20 @@ var WebInspectorElement = class extends LitElement {
                     <td class="border-r border-b border-gray-200 px-3 py-2">
                       <span class=${badgeClasses}>${event.type}</span>
                     </td>
-                    <td class="border-r border-b border-gray-200 px-3 py-2 font-mono text-[10px] text-gray-600 ${isExpanded ? "" : "truncate max-w-xs"}">
+                    <td
+                      class="border-r border-b border-gray-200 px-3 py-2 font-mono text-[10px] text-gray-600 ${isExpanded ? "" : "truncate max-w-xs"}"
+                    >
                       ${isExpanded ? html`
                             <div class="group relative">
-                              <pre class="m-0 whitespace-pre-wrap break-words text-[10px] font-mono text-gray-600">${prettyEvent}</pre>
+                              <pre
+                                class="m-0 whitespace-pre-wrap break-words text-[10px] font-mono text-gray-600"
+                              >
+${prettyEvent}</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(event.id) ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900"}"
+                                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(
+        event.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(prettyEvent, event.id);
@@ -2238,13 +2454,19 @@ var WebInspectorElement = class extends LitElement {
   renderAgentsView() {
     if (this.selectedContext === "all-agents") {
       return 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>
       `;
@@ -2265,18 +2487,27 @@ var WebInspectorElement = class extends LitElement {
         <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">${agentId}</h3>
-                <span class="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium ${statusColors[status]} relative -translate-y-[2px]">
-                  <span class="h-1.5 w-1.5 rounded-full ${status === "running" ? "bg-emerald-500 animate-pulse" : status === "error" ? "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 ${statusColors[status]} relative -translate-y-[2px]"
+                >
+                  <span
+                    class="h-1.5 w-1.5 rounded-full ${status === "running" ? "bg-emerald-500 animate-pulse" : status === "error" ? "bg-rose-500" : "bg-gray-400"}"
+                  ></span>
                   ${status.charAt(0).toUpperCase() + status.slice(1)}
                 </span>
               </div>
             </div>
-            ${stats.lastActivity ? html`<span class="text-xs text-gray-500">Last activity: ${new Date(stats.lastActivity).toLocaleTimeString()}</span>` : nothing}
+            ${stats.lastActivity ? html`<span class="text-xs text-gray-500"
+                  >Last activity:
+                  ${new Date(stats.lastActivity).toLocaleTimeString()}</span
+                >` : nothing}
           </div>
           <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
             <button
@@ -2285,20 +2516,36 @@ var WebInspectorElement = class extends LitElement {
               @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">${stats.totalEvents}</div>
+              <div class="truncate whitespace-nowrap text-xs text-gray-600">
+                Total Events
+              </div>
+              <div class="text-lg font-semibold text-gray-900">
+                ${stats.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">${stats.messages}</div>
+              <div class="truncate whitespace-nowrap text-xs text-gray-600">
+                Messages
+              </div>
+              <div class="text-lg font-semibold text-gray-900">
+                ${stats.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">${stats.toolCalls}</div>
+              <div class="truncate whitespace-nowrap text-xs text-gray-600">
+                Tool Calls
+              </div>
+              <div class="text-lg font-semibold text-gray-900">
+                ${stats.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">${stats.errors}</div>
+              <div class="truncate whitespace-nowrap text-xs text-gray-600">
+                Errors
+              </div>
+              <div class="text-lg font-semibold text-gray-900">
+                ${stats.errors}
+              </div>
             </div>
           </div>
         </div>
@@ -2310,11 +2557,17 @@ var WebInspectorElement = class extends LitElement {
           </div>
           <div class="overflow-auto p-4">
             ${this.hasRenderableState(state) ? html`
-                  <pre class="overflow-auto rounded-md bg-gray-50 p-3 text-xs text-gray-800 max-h-64"><code>${this.formatStateForDisplay(state)}</code></pre>
+                  <pre
+                    class="overflow-auto rounded-md bg-gray-50 p-3 text-xs text-gray-800 max-h-64"
+                  ><code>${this.formatStateForDisplay(state)}</code></pre>
                 ` : 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>
@@ -2325,15 +2578,25 @@ var WebInspectorElement = class extends LitElement {
         <!-- 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">
             ${messages && messages.length > 0 ? 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">
@@ -2353,12 +2616,22 @@ var WebInspectorElement = class extends LitElement {
       return html`
                           <tr>
                             <td class="px-4 py-2 align-top">
-                              <span class="inline-flex rounded px-2 py-0.5 text-[10px] font-medium ${roleColors[role] || roleColors.unknown}">
+                              <span
+                                class="inline-flex rounded px-2 py-0.5 text-[10px] font-medium ${roleColors[role] || roleColors.unknown}"
+                              >
                                 ${role}
                               </span>
                             </td>
                             <td class="px-4 py-2">
-                              ${hasContent ? html`<div class="max-w-2xl whitespace-pre-wrap break-words text-gray-700">${rawContent}</div>` : html`<div class="text-xs italic text-gray-400">${contentFallback}</div>`}
+                              ${hasContent ? html`<div
+                                    class="max-w-2xl whitespace-pre-wrap break-words text-gray-700"
+                                  >
+                                    ${rawContent}
+                                  </div>` : html`<div
+                                    class="text-xs italic text-gray-400"
+                                  >
+                                    ${contentFallback}
+                                  </div>`}
                               ${role === "assistant" && toolCalls.length > 0 ? this.renderToolCallDetails(toolCalls) : nothing}
                             </td>
                           </tr>
@@ -2367,9 +2640,13 @@ var WebInspectorElement = class extends LitElement {
                     </tbody>
                   </table>
                 ` : 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>
@@ -2383,14 +2660,19 @@ var WebInspectorElement = class extends LitElement {
     const filteredOptions = this.selectedMenu === "agents" ? this.contextOptions.filter((opt) => opt.key !== "all-agents") : this.contextOptions;
     const selectedLabel = filteredOptions.find((opt) => opt.key === this.selectedContext)?.label ?? "";
     return 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">${selectedLabel}</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 ? html`
               <div
@@ -2405,8 +2687,13 @@ var WebInspectorElement = class extends LitElement {
                       data-context-dropdown-root="true"
                       @click=${() => this.handleContextOptionSelect(option.key)}
                     >
-                      <span class="truncate ${option.key === this.selectedContext ? "text-gray-900 font-medium" : "text-gray-600"}">${option.label}</span>
-                      ${option.key === this.selectedContext ? html`<span class="text-gray-500">${this.renderIcon("Check")}</span>` : nothing}
+                      <span
+                        class="truncate ${option.key === this.selectedContext ? "text-gray-900 font-medium" : "text-gray-600"}"
+                        >${option.label}</span
+                      >
+                      ${option.key === this.selectedContext ? html`<span class="text-gray-500"
+                            >${this.renderIcon("Check")}</span
+                          >` : nothing}
                     </button>
                   `
     )}
@@ -2421,7 +2708,9 @@ var WebInspectorElement = class extends LitElement {
     }
     this.selectedMenu = key;
     if (key === "agents" && this.selectedContext === "all-agents") {
-      const agentOptions = this.contextOptions.filter((opt) => opt.key !== "all-agents");
+      const agentOptions = this.contextOptions.filter(
+        (opt) => opt.key !== "all-agents"
+      );
       if (agentOptions.length > 0) {
         const defaultAgent = agentOptions.find((opt) => opt.key === "default");
         this.selectedContext = defaultAgent ? defaultAgent.key : agentOptions[0].key;
@@ -2452,7 +2741,9 @@ var WebInspectorElement = class extends LitElement {
   renderToolsView() {
     if (!this._core) {
       return 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>
       `;
@@ -2461,18 +2752,27 @@ var WebInspectorElement = class extends LitElement {
     const allTools = this.cachedTools;
     if (allTools.length === 0) {
       return 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 filteredTools = this.selectedContext === "all-agents" ? allTools : allTools.filter((tool) => !tool.agentId || tool.agentId === this.selectedContext);
+    const filteredTools = this.selectedContext === "all-agents" ? allTools : allTools.filter(
+      (tool) => !tool.agentId || tool.agentId === this.selectedContext
+    );
     return html`
       <div class="flex h-full flex-col overflow-hidden">
         <div class="overflow-auto p-4">
@@ -2555,8 +2855,12 @@ var WebInspectorElement = class extends LitElement {
           <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">${tool.name}</span>
-                <span class="inline-flex items-center rounded-sm border px-1.5 py-0.5 text-[10px] font-medium ${typeColors[tool.type]}">
+                <span class="font-mono text-sm font-semibold text-gray-900"
+                  >${tool.name}</span
+                >
+                <span
+                  class="inline-flex items-center rounded-sm border px-1.5 py-0.5 text-[10px] font-medium ${typeColors[tool.type]}"
+                >
                   ${tool.type}
                 </span>
               </div>
@@ -2567,12 +2871,19 @@ var WebInspectorElement = class extends LitElement {
                 </span>
                 ${schema.properties.length > 0 ? html`
                       <span class="text-gray-300">•</span>
-                      <span>${schema.properties.length} parameter${schema.properties.length !== 1 ? "s" : ""}</span>
+                      <span
+                        >${schema.properties.length}
+                        parameter${schema.properties.length !== 1 ? "s" : ""}</span
+                      >
                     ` : nothing}
               </div>
-              ${tool.description ? html`<p class="mt-2 text-xs text-gray-600">${tool.description}</p>` : nothing}
+              ${tool.description ? html`<p class="mt-2 text-xs text-gray-600">
+                    ${tool.description}
+                  </p>` : nothing}
             </div>
-            <span class="shrink-0 text-gray-400 transition ${isExpanded ? "rotate-180" : ""}">
+            <span
+              class="shrink-0 text-gray-400 transition ${isExpanded ? "rotate-180" : ""}"
+            >
               ${this.renderIcon("ChevronDown")}
             </span>
           </div>
@@ -2581,39 +2892,77 @@ var WebInspectorElement = class extends LitElement {
         ${isExpanded ? html`
               <div class="border-t border-gray-200 bg-gray-50/50 px-4 py-3">
                 ${schema.properties.length > 0 ? 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">
-                        ${schema.properties.map((prop) => 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">${prop.name}</span>
-                              <div class="flex items-center gap-1.5 shrink-0">
-                                ${prop.required ? 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>` : 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>`}
-                                ${prop.type ? html`<span class="text-[9px] rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-mono text-gray-600">${prop.type}</span>` : nothing}
+                        ${schema.properties.map(
+      (prop) => 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"
+                                  >${prop.name}</span
+                                >
+                                <div class="flex items-center gap-1.5 shrink-0">
+                                  ${prop.required ? 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
+                                      >` : 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
+                                      >`}
+                                  ${prop.type ? html`<span
+                                        class="text-[9px] rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-mono text-gray-600"
+                                        >${prop.type}</span
+                                      >` : nothing}
+                                </div>
                               </div>
-                            </div>
-                            ${prop.description ? html`<p class="mt-1 text-xs text-gray-600">${prop.description}</p>` : nothing}
-                            ${prop.defaultValue !== void 0 ? 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(prop.defaultValue)}</code>
-                                  </div>
-                                ` : nothing}
-                            ${prop.enum && prop.enum.length > 0 ? html`
-                                  <div class="mt-2">
-                                    <span class="text-[10px] text-gray-500">Allowed values:</span>
-                                    <div class="mt-1 flex flex-wrap gap-1">
-                                      ${prop.enum.map((val) => 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(val)}</code>
-                                      `)}
+                              ${prop.description ? html`<p class="mt-1 text-xs text-gray-600">
+                                    ${prop.description}
+                                  </p>` : nothing}
+                              ${prop.defaultValue !== void 0 ? 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(
+        prop.defaultValue
+      )}</code
+                                      >
+                                    </div>
+                                  ` : nothing}
+                              ${prop.enum && prop.enum.length > 0 ? html`
+                                    <div class="mt-2">
+                                      <span class="text-[10px] text-gray-500"
+                                        >Allowed values:</span
+                                      >
+                                      <div class="mt-1 flex flex-wrap gap-1">
+                                        ${prop.enum.map(
+        (val) => 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(val)}</code
+                                            >
+                                          `
+      )}
+                                      </div>
                                     </div>
-                                  </div>
-                                ` : nothing}
-                          </div>
-                        `)}
+                                  ` : nothing}
+                            </div>
+                          `
+    )}
                       </div>
                     ` : 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>
                     `}
@@ -2736,13 +3085,19 @@ var WebInspectorElement = class extends LitElement {
     const contextEntries = Object.entries(this.contextStore);
     if (contextEntries.length === 0) {
       return 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>
       `;
@@ -2751,7 +3106,9 @@ var WebInspectorElement = class extends LitElement {
       <div class="flex h-full flex-col overflow-hidden">
         <div class="overflow-auto p-4">
           <div class="space-y-3">
-            ${contextEntries.map(([id, context]) => this.renderContextCard(id, context))}
+            ${contextEntries.map(
+      ([id, context]) => this.renderContextCard(id, context)
+    )}
           </div>
         </div>
       </div>
@@ -2773,14 +3130,20 @@ var WebInspectorElement = class extends LitElement {
             <div class="flex-1 min-w-0">
               <p class="text-sm font-medium text-gray-900 mb-1">${title}</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;">${id}</span>
+                <span
+                  class="font-mono truncate inline-block align-middle"
+                  style="max-width: 180px;"
+                  >${id}</span
+                >
                 ${hasValue ? html`
                       <span class="text-gray-300">•</span>
                       <span class="truncate">${valuePreview}</span>
                     ` : nothing}
               </div>
             </div>
-            <span class="shrink-0 text-gray-400 transition ${isExpanded ? "rotate-180" : ""}">
+            <span
+              class="shrink-0 text-gray-400 transition ${isExpanded ? "rotate-180" : ""}"
+            >
               ${this.renderIcon("ChevronDown")}
             </span>
           </div>
@@ -2790,11 +3153,16 @@ var WebInspectorElement = class extends LitElement {
               <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">${id}</code>
+                  <code
+                    class="block rounded bg-white border border-gray-200 px-2 py-1 text-[10px] font-mono text-gray-600"
+                    >${id}</code
+                  >
                 </div>
                 ${hasValue ? 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"
@@ -2806,11 +3174,19 @@ var WebInspectorElement = class extends LitElement {
                           ${this.copiedContextItems.has(id) ? "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(context.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(
+      context.value
+    )}</code></pre>
                       </div>
                     ` : 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>
                     `}
@@ -2904,9 +3280,13 @@ var WebInspectorElement = class extends LitElement {
       return nothing;
     }
     if (!this.announcementLoaded && !this.announcementMarkdown) {
-      return 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)]">
+      return 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>
@@ -2914,31 +3294,53 @@ var WebInspectorElement = class extends LitElement {
       </div>`;
     }
     if (this.announcementLoadError) {
-      return 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)]">
+      return 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>
+        <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 nothing;
     }
-    const content = this.announcementHtml ? unsafeHTML(this.announcementHtml) : html`<pre class="whitespace-pre-wrap text-sm text-gray-900">${this.announcementMarkdown}</pre>`;
-    return 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">
+    const content = this.announcementHtml ? unsafeHTML(this.announcementHtml) : html`<pre class="whitespace-pre-wrap text-sm text-gray-900">
+${this.announcementMarkdown}</pre
+        >`;
+    return 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">${content}</div>
+      <div class="announcement-content text-sm leading-relaxed text-gray-900">
+        ${content}
+      </div>
     </div>`;
   }
   ensureAnnouncementLoading() {
@@ -3005,7 +3407,10 @@ var WebInspectorElement = class extends LitElement {
   }
   appendRefParam(href) {
     try {
-      const url = new URL(href, typeof window !== "undefined" ? window.location.href : "https://copilotkit.ai");
+      const url = new URL(
+        href,
+        typeof window !== "undefined" ? window.location.href : "https://copilotkit.ai"
+      );
       if (!url.searchParams.has("ref")) {
         url.searchParams.append("ref", "cpk-inspector");
       }