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

package/src/index.ts

@@ -13,7 +13,14 @@ import {
   type CopilotKitCoreErrorCode,
 } from "@copilotkitnext/core";
 import type { AbstractAgent, AgentSubscriber } from "@ag-ui/client";
-import type { Anchor, ContextKey, ContextState, DockMode, Position, Size } from "./lib/types";
+import type {
+  Anchor,
+  ContextKey,
+  ContextState,
+  DockMode,
+  Position,
+  Size,
+} from "./lib/types";
 import {
   applyAnchorPosition as applyAnchorPositionHelper,
   centerContext as centerContextHelper,
@@ -147,14 +154,20 @@ export class WebInspectorElement extends LitElement {
   private coreUnsubscribe: (() => void) | null = null;
   private runtimeStatus: CopilotKitCoreRuntimeConnectionStatus | null = null;
   private coreProperties: Readonly<Record<string, unknown>> = {};
-  private lastCoreError: { code: CopilotKitCoreErrorCode; message: string } | null = null;
+  private lastCoreError: {
+    code: CopilotKitCoreErrorCode;
+    message: string;
+  } | null = null;
   private agentSubscriptions: Map<string, () => void> = new Map();
   private agentEvents: Map<string, InspectorEvent[]> = new Map();
   private agentMessages: Map<string, InspectorMessage[]> = new Map();
   private agentStates: Map<string, SanitizedValue> = new Map();
   private flattenedEvents: InspectorEvent[] = [];
   private eventCounter = 0;
-  private contextStore: Record<string, { description?: string; value: unknown }> = {};
+  private contextStore: Record<
+    string,
+    { description?: string; value: unknown }
+  > = {};
 
   private pointerId: number | null = null;
   private dragStart: Position | null = null;
@@ -301,7 +314,9 @@ export class WebInspectorElement extends LitElement {
     this.eventCounter = 0;
   }
 
-  private processAgentsChanged(agents: Readonly<Record<string, AbstractAgent>>): void {
+  private processAgentsChanged(
+    agents: Readonly<Record<string, AbstractAgent>>,
+  ): void {
     const seenAgentIds = new Set<string>();
 
     for (const agent of Object.values(agents)) {
@@ -355,7 +370,12 @@ export class WebInspectorElement extends LitElement {
   }
 
   private tryAutoAttachCore(): void {
-    if (this.attemptedAutoAttach || this._core || !this.autoAttachCore || typeof window === "undefined") {
+    if (
+      this.attemptedAutoAttach ||
+      this._core ||
+      !this.autoAttachCore ||
+      typeof window === "undefined"
+    ) {
       return;
     }
 
@@ -370,7 +390,8 @@ export class WebInspectorElement extends LitElement {
     ];
 
     const foundCore = globalCandidates.find(
-      (candidate): candidate is CopilotKitCore => !!candidate && typeof candidate === "object",
+      (candidate): candidate is CopilotKitCore =>
+        !!candidate && typeof candidate === "object",
     );
 
     if (foundCore) {
@@ -401,19 +422,39 @@ export class WebInspectorElement 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);
@@ -459,7 +500,11 @@ export class WebInspectorElement extends LitElement {
     }
   }
 
-  private recordAgentEvent(agentId: string, type: InspectorAgentEventType, payload: unknown): void {
+  private recordAgentEvent(
+    agentId: string,
+    type: InspectorAgentEventType,
+    payload: unknown,
+  ): void {
     const eventId = `${agentId}:${++this.eventCounter}`;
     const normalizedPayload = this.normalizeEventPayload(type, payload);
     const event: InspectorEvent = {
@@ -471,10 +516,16 @@ export class WebInspectorElement extends LitElement {
     };
 
     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();
   }
@@ -484,7 +535,9 @@ export class WebInspectorElement extends LitElement {
       return;
     }
 
-    const messages = this.normalizeAgentMessages((agent as { messages?: unknown }).messages);
+    const messages = this.normalizeAgentMessages(
+      (agent as { messages?: unknown }).messages,
+    );
     if (messages) {
       this.agentMessages.set(agent.agentId, messages);
     } else {
@@ -520,7 +573,9 @@ export class WebInspectorElement extends LitElement {
 
     const optionsChanged =
       this.contextOptions.length !== nextOptions.length ||
-      this.contextOptions.some((option, index) => option.key !== nextOptions[index]?.key);
+      this.contextOptions.some(
+        (option, index) => option.key !== nextOptions[index]?.key,
+      );
 
     if (optionsChanged) {
       this.contextOptions = nextOptions;
@@ -528,7 +583,8 @@ export class WebInspectorElement extends LitElement {
 
     const pendingContext = this.pendingSelectedContext;
     if (pendingContext) {
-      const isPendingAvailable = pendingContext === "all-agents" || agentIds.has(pendingContext);
+      const isPendingAvailable =
+        pendingContext === "all-agents" || agentIds.has(pendingContext);
       if (isPendingAvailable) {
         if (this.selectedContext !== pendingContext) {
           this.selectedContext = pendingContext;
@@ -541,7 +597,9 @@ export class WebInspectorElement extends LitElement {
       }
     }
 
-    const hasSelectedContext = nextOptions.some((option) => option.key === this.selectedContext);
+    const hasSelectedContext = nextOptions.some(
+      (option) => option.key === this.selectedContext,
+    );
 
     if (!hasSelectedContext && this.pendingSelectedContext === null) {
       // Auto-select "default" agent if it exists, otherwise first agent, otherwise "all-agents"
@@ -550,7 +608,9 @@ export class WebInspectorElement extends LitElement {
       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) {
@@ -573,7 +633,10 @@ export class WebInspectorElement extends LitElement {
     const query = this.eventFilterText.trim().toLowerCase();
 
     return events.filter((event) => {
-      if (this.eventTypeFilter !== "all" && event.type !== this.eventTypeFilter) {
+      if (
+        this.eventTypeFilter !== "all" &&
+        event.type !== this.eventTypeFilter
+      ) {
         return false;
       }
 
@@ -581,7 +644,10 @@ export class WebInspectorElement extends LitElement {
         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) ||
@@ -604,7 +670,9 @@ export class WebInspectorElement extends LitElement {
     return stateEvent.payload;
   }
 
-  private getLatestMessagesForAgent(agentId: string): InspectorMessage[] | null {
+  private getLatestMessagesForAgent(
+    agentId: string,
+  ): InspectorMessage[] | null {
     const messages = this.agentMessages.get(agentId);
     return messages ?? null;
   }
@@ -616,7 +684,12 @@ export class WebInspectorElement extends LitElement {
     }
 
     // Check most recent run-related event
-    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";
@@ -629,7 +702,7 @@ export class WebInspectorElement extends LitElement {
     if (runEvent.type === "RUN_STARTED") {
       // Check if there's a RUN_FINISHED after this
       const finishedAfter = events.find(
-        (e) => e.type === "RUN_FINISHED" && e.timestamp > runEvent.timestamp
+        (e) => e.type === "RUN_FINISHED" && e.timestamp > runEvent.timestamp,
       );
       return finishedAfter ? "idle" : "running";
     }
@@ -637,13 +710,22 @@ export class WebInspectorElement extends LitElement {
     return "idle";
   }
 
-  private getAgentStats(agentId: string): { totalEvents: number; lastActivity: number | null; messages: number; toolCalls: number; errors: number } {
+  private getAgentStats(agentId: string): {
+    totalEvents: number;
+    lastActivity: number | null;
+    messages: number;
+    toolCalls: number;
+    errors: number;
+  } {
     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)
+      ? messages.reduce(
+          (count, message) => count + (message.toolCalls?.length ?? 0),
+          0,
+        )
       : events.filter((e) => e.type === "TOOL_CALL_END").length;
 
     const messageCount = messages?.length ?? 0;
@@ -665,17 +747,29 @@ export class WebInspectorElement extends LitElement {
     return html`
       <div class="mt-2 space-y-2">
         ${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 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,
+          );
           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>`
+                ? html`<pre
+                    class="mt-2 overflow-auto rounded bg-white p-2 text-[11px] leading-relaxed text-gray-800"
+                  >
+${argsString}</pre
+                  >`
                 : nothing}
             </div>
           `;
@@ -685,11 +779,11 @@ export class WebInspectorElement extends LitElement {
   }
 
   private formatToolCallArguments(args: unknown): string | null {
-    if (args === undefined || args === null || args === '') {
+    if (args === undefined || args === null || args === "") {
       return null;
     }
 
-    if (typeof args === 'string') {
+    if (typeof args === "string") {
       try {
         const parsed = JSON.parse(args);
         return JSON.stringify(parsed, null, 2);
@@ -698,7 +792,7 @@ export class WebInspectorElement extends LitElement {
       }
     }
 
-    if (typeof args === 'object') {
+    if (typeof args === "object") {
       try {
         return JSON.stringify(args, null, 2);
       } catch {
@@ -718,13 +812,13 @@ export class WebInspectorElement extends LitElement {
       return state.length > 0;
     }
 
-    if (typeof state === 'object') {
+    if (typeof state === "object") {
       return Object.keys(state as Record<string, unknown>).length > 0;
     }
 
-    if (typeof state === 'string') {
+    if (typeof state === "string") {
       const trimmed = state.trim();
-      return trimmed.length > 0 && trimmed !== '{}';
+      return trimmed.length > 0 && trimmed !== "{}";
     }
 
     return true;
@@ -732,13 +826,13 @@ export class WebInspectorElement extends LitElement {
 
   private formatStateForDisplay(state: unknown): string {
     if (state === null || state === undefined) {
-      return '';
+      return "";
     }
 
-    if (typeof state === 'string') {
+    if (typeof state === "string") {
       const trimmed = state.trim();
       if (trimmed.length === 0) {
-        return '';
+        return "";
       }
       try {
         const parsed = JSON.parse(trimmed);
@@ -748,7 +842,7 @@ export class WebInspectorElement extends LitElement {
       }
     }
 
-    if (typeof state === 'object') {
+    if (typeof state === "object") {
       try {
         return JSON.stringify(state, null, 2);
       } catch {
@@ -760,7 +854,8 @@ export class WebInspectorElement extends LitElement {
   }
 
   private getEventBadgeClasses(type: string): string {
-    const base = "font-mono text-[10px] font-medium inline-flex items-center rounded-sm px-1.5 py-0.5 border";
+    const base =
+      "font-mono text-[10px] font-medium inline-flex items-center rounded-sm px-1.5 py-0.5 border";
 
     if (type.startsWith("RUN_")) {
       return `${base} bg-blue-50 text-blue-700 border-blue-200`;
@@ -856,7 +951,9 @@ export class WebInspectorElement 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"] {
@@ -901,7 +998,9 @@ export class WebInspectorElement 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;
       }
 
@@ -973,7 +1072,9 @@ export class WebInspectorElement 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 {
@@ -1033,7 +1134,10 @@ export class WebInspectorElement extends LitElement {
     super.connectedCallback();
     if (typeof window !== "undefined") {
       window.addEventListener("resize", this.handleResize);
-      window.addEventListener("pointerdown", this.handleGlobalPointerDown as EventListener);
+      window.addEventListener(
+        "pointerdown",
+        this.handleGlobalPointerDown as EventListener,
+      );
 
       // Load state early (before first render) so menu selection is correct
       this.hydrateStateFromStorageEarly();
@@ -1046,7 +1150,10 @@ export class WebInspectorElement extends LitElement {
     super.disconnectedCallback();
     if (typeof window !== "undefined") {
       window.removeEventListener("resize", this.handleResize);
-      window.removeEventListener("pointerdown", this.handleGlobalPointerDown as EventListener);
+      window.removeEventListener(
+        "pointerdown",
+        this.handleGlobalPointerDown as EventListener,
+      );
     }
     this.removeDockStyles(); // Clean up any docking styles
     this.detachFromCore();
@@ -1073,13 +1180,13 @@ export class WebInspectorElement extends LitElement {
     this.hydrateStateFromStorage();
 
     // Apply docking styles if open and docked (skip transition on initial load)
-    if (this.isOpen && this.dockMode !== 'floating') {
+    if (this.isOpen && this.dockMode !== "floating") {
       this.applyDockStyles(true);
     }
 
     this.applyAnchorPosition("button");
 
-    if (this.dockMode === 'floating') {
+    if (this.dockMode === "floating") {
       if (this.hasCustomPosition.window) {
         this.applyAnchorPosition("window");
       } else {
@@ -1136,7 +1243,9 @@ export class WebInspectorElement extends LitElement {
         type="button"
         aria-label="Web Inspector"
         data-drag-context="button"
-        data-dragging=${this.isDragging && this.pointerContext === "button" ? "true" : "false"}
+        data-dragging=${this.isDragging && this.pointerContext === "button"
+          ? "true"
+          : "false"}
         @pointerdown=${this.handlePointerDown}
         @pointermove=${this.handlePointerMove}
         @pointerup=${this.handlePointerUp}
@@ -1144,15 +1253,20 @@ export class WebInspectorElement extends LitElement {
         @click=${this.handleButtonClick}
       >
         ${this.renderAnnouncementPreview()}
-        <img src=${inspectorLogoIconUrl} alt="Inspector logo" class="h-5 w-auto" loading="lazy" />
+        <img
+          src=${inspectorLogoIconUrl}
+          alt="Inspector logo"
+          class="h-5 w-auto"
+          loading="lazy"
+        />
       </button>
     `;
   }
 
   private renderWindow() {
     const windowState = this.contextState.window;
-    const isDocked = this.dockMode !== 'floating';
-    const isTransitioning = this.hasAttribute('data-transitioning');
+    const isDocked = this.dockMode !== "floating";
+    const isTransitioning = this.hasAttribute("data-transitioning");
 
     const windowStyles = isDocked
       ? this.getDockedWindowStyles()
@@ -1164,12 +1278,16 @@ export class WebInspectorElement extends LitElement {
         };
 
     const hasContextDropdown = this.contextOptions.length > 0;
-    const contextDropdown = hasContextDropdown ? this.renderContextDropdown() : nothing;
+    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>
@@ -1195,9 +1313,15 @@ export class WebInspectorElement extends LitElement {
               ></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')}"
+            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"
             @pointerdown=${isDocked ? undefined : this.handlePointerDown}
             @pointermove=${isDocked ? undefined : this.handlePointerMove}
@@ -1206,12 +1330,15 @@ export class WebInspectorElement 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=${inspectorLogoUrl} alt="Inspector logo" class="h-6 w-auto" loading="lazy" />
+                <img
+                  src=${inspectorLogoUrl}
+                  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
@@ -1226,12 +1353,16 @@ export class WebInspectorElement 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 = [
                   "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",
-                  isSelected ? "bg-gray-900 text-white shadow-sm" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900",
+                  isSelected
+                    ? "bg-gray-900 text-white shadow-sm"
+                    : "text-gray-600 hover:bg-gray-100 hover:text-gray-900",
                 ].join(" ");
 
                 return html`
@@ -1241,7 +1372,9 @@ export class WebInspectorElement 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>
@@ -1250,27 +1383,30 @@ export class WebInspectorElement 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"
@@ -1318,7 +1454,9 @@ export class WebInspectorElement extends LitElement {
 
     // Restore selected menu
     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;
       }
@@ -1368,7 +1506,9 @@ export class WebInspectorElement extends LitElement {
 
       if (isValidSize(persistedWindow.size)) {
         // Now clampWindowSize will use the correct minimum based on dockMode
-        this.contextState.window.size = this.clampWindowSize(persistedWindow.size);
+        this.contextState.window.size = this.clampWindowSize(
+          persistedWindow.size,
+        );
       }
 
       if (typeof persistedWindow.hasCustomPosition === "boolean") {
@@ -1388,7 +1528,7 @@ export class WebInspectorElement extends LitElement {
 
   private handlePointerDown = (event: PointerEvent) => {
     // Don't allow dragging when docked
-    if (this.dockMode !== 'floating' && this.isOpen) {
+    if (this.dockMode !== "floating" && this.isOpen) {
       return;
     }
 
@@ -1421,11 +1561,18 @@ export class WebInspectorElement extends LitElement {
   };
 
   private handlePointerMove = (event: PointerEvent) => {
-    if (this.pointerId !== event.pointerId || !this.dragStart || !this.pointerContext) {
+    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;
     }
@@ -1471,7 +1618,11 @@ export class WebInspectorElement extends LitElement {
           this.ignoreNextButtonClick = true;
         }
       }
-    } else if (context === "button" && !this.isOpen && !this.draggedDuringInteraction) {
+    } else if (
+      context === "button" &&
+      !this.isOpen &&
+      !this.draggedDuringInteraction
+    ) {
       this.openInspector();
     }
 
@@ -1529,8 +1680,8 @@ export class WebInspectorElement extends LitElement {
     this.resizeInitialSize = { ...this.contextState.window.size };
 
     // Remove transition from body during resize to prevent lag
-    if (document.body && this.dockMode !== 'floating') {
-      document.body.style.transition = '';
+    if (document.body && this.dockMode !== "floating") {
+      document.body.style.transition = "";
     }
 
     const target = event.currentTarget as HTMLElement | null;
@@ -1538,7 +1689,12 @@ export class WebInspectorElement extends LitElement {
   };
 
   private handleResizePointerMove = (event: PointerEvent) => {
-    if (!this.isResizing || this.resizePointerId !== event.pointerId || !this.resizeStart || !this.resizeInitialSize) {
+    if (
+      !this.isResizing ||
+      this.resizePointerId !== event.pointerId ||
+      !this.resizeStart ||
+      !this.resizeInitialSize
+    ) {
       return;
     }
 
@@ -1549,7 +1705,7 @@ export class WebInspectorElement extends LitElement {
     const state = this.contextState.window;
 
     // For docked states, only resize in the appropriate dimension
-    if (this.dockMode === 'docked-left') {
+    if (this.dockMode === "docked-left") {
       // Only resize width for left dock
       state.size = this.clampWindowSize({
         width: this.resizeInitialSize.width + deltaX,
@@ -1584,7 +1740,7 @@ export class WebInspectorElement extends LitElement {
     }
 
     // Only update anchor position for floating mode
-    if (this.dockMode === 'floating') {
+    if (this.dockMode === "floating") {
       this.updateAnchorFromPosition("window");
       this.applyAnchorPosition("window");
     }
@@ -1605,7 +1761,7 @@ export class WebInspectorElement extends LitElement {
     }
 
     // Only update anchor position for floating mode
-    if (this.dockMode === 'floating') {
+    if (this.dockMode === "floating") {
       this.updateAnchorFromPosition("window");
       this.applyAnchorPosition("window");
     }
@@ -1630,12 +1786,16 @@ export class WebInspectorElement extends LitElement {
   };
 
   private measureContext(context: ContextKey): void {
-    const selector = context === "window" ? ".inspector-window" : ".console-button";
-    const element = this.renderRoot?.querySelector(selector) as HTMLElement | null;
+    const selector =
+      context === "window" ? ".inspector-window" : ".console-button";
+    const element = this.renderRoot?.querySelector(
+      selector,
+    ) as HTMLElement | null;
     if (!element) {
       return;
     }
-    const fallback = context === "window" ? DEFAULT_WINDOW_SIZE : DEFAULT_BUTTON_SIZE;
+    const fallback =
+      context === "window" ? DEFAULT_WINDOW_SIZE : DEFAULT_BUTTON_SIZE;
     updateSizeFromElement(this.contextState[context], element, fallback);
   }
 
@@ -1667,18 +1827,30 @@ export class WebInspectorElement extends LitElement {
 
     const viewport = this.getViewportSize();
     keepPositionWithinViewport(this.contextState.window, viewport, EDGE_MARGIN);
-    updateAnchorFromPositionHelper(this.contextState.window, viewport, EDGE_MARGIN);
+    updateAnchorFromPositionHelper(
+      this.contextState.window,
+      viewport,
+      EDGE_MARGIN,
+    );
     this.updateHostTransform("window");
     this.persistState();
   }
 
-  private constrainToViewport(position: Position, context: ContextKey): Position {
+  private constrainToViewport(
+    position: Position,
+    context: ContextKey,
+  ): Position {
     if (typeof window === "undefined") {
       return position;
     }
 
     const viewport = this.getViewportSize();
-    return constrainToViewport(this.contextState[context], position, viewport, EDGE_MARGIN);
+    return constrainToViewport(
+      this.contextState[context],
+      position,
+      viewport,
+      EDGE_MARGIN,
+    );
   }
 
   private keepPositionWithinViewport(context: ContextKey): void {
@@ -1687,7 +1859,11 @@ export class WebInspectorElement extends LitElement {
     }
 
     const viewport = this.getViewportSize();
-    keepPositionWithinViewport(this.contextState[context], viewport, EDGE_MARGIN);
+    keepPositionWithinViewport(
+      this.contextState[context],
+      viewport,
+      EDGE_MARGIN,
+    );
   }
 
   private getViewportSize(): Size {
@@ -1725,7 +1901,10 @@ export class WebInspectorElement extends LitElement {
 
   private clampWindowSize(size: Size): Size {
     // Use smaller minimum width when docked left
-    const minWidth = this.dockMode === 'docked-left' ? MIN_WINDOW_WIDTH_DOCKED_LEFT : MIN_WINDOW_WIDTH;
+    const minWidth =
+      this.dockMode === "docked-left"
+        ? MIN_WINDOW_WIDTH_DOCKED_LEFT
+        : MIN_WINDOW_WIDTH;
 
     if (typeof window === "undefined") {
       return {
@@ -1735,7 +1914,13 @@ export class WebInspectorElement extends LitElement {
     }
 
     const viewport = this.getViewportSize();
-    return clampSizeToViewport(size, viewport, EDGE_MARGIN, minWidth, MIN_WINDOW_HEIGHT);
+    return clampSizeToViewport(
+      size,
+      viewport,
+      EDGE_MARGIN,
+      minWidth,
+      MIN_WINDOW_HEIGHT,
+    );
   }
 
   private setDockMode(mode: DockMode): void {
@@ -1751,9 +1936,9 @@ export class WebInspectorElement extends LitElement {
 
     this.dockMode = mode;
 
-    if (mode !== 'floating') {
+    if (mode !== "floating") {
       // For docking, set the target size immediately so body margins are correct
-      if (mode === 'docked-left') {
+      if (mode === "docked-left") {
         this.contextState.window.size.width = DOCKED_LEFT_WIDTH;
       }
 
@@ -1762,29 +1947,29 @@ export class WebInspectorElement extends LitElement {
     } else {
       // When floating, set size first then center
       this.contextState.window.size = { ...DEFAULT_WINDOW_SIZE };
-      this.centerContext('window');
+      this.centerContext("window");
     }
 
     this.persistState();
     this.requestUpdate();
-    this.updateHostTransform('window');
+    this.updateHostTransform("window");
   }
 
   private startHostTransition(duration = 300): void {
-    this.setAttribute('data-transitioning', 'true');
+    this.setAttribute("data-transitioning", "true");
 
     if (this.transitionTimeoutId !== null) {
       clearTimeout(this.transitionTimeoutId);
     }
 
     this.transitionTimeoutId = setTimeout(() => {
-      this.removeAttribute('data-transitioning');
+      this.removeAttribute("data-transitioning");
       this.transitionTimeoutId = null;
     }, duration);
   }
 
   private applyDockStyles(skipTransition = false): void {
-    if (typeof document === 'undefined' || !document.body) {
+    if (typeof document === "undefined" || !document.body) {
       return;
     }
 
@@ -1797,11 +1982,11 @@ export class WebInspectorElement extends LitElement {
 
     // Apply transition to body for smooth animation (only when docking, not during resize or initial load)
     if (!this.isResizing && !skipTransition) {
-      document.body.style.transition = 'margin 300ms ease';
+      document.body.style.transition = "margin 300ms ease";
     }
 
     // Apply body margins with the actual window sizes
-    if (this.dockMode === 'docked-left') {
+    if (this.dockMode === "docked-left") {
       document.body.style.marginLeft = `${this.contextState.window.size.width}px`;
     }
 
@@ -1809,20 +1994,20 @@ export class WebInspectorElement extends LitElement {
     if (!this.isResizing && !skipTransition) {
       setTimeout(() => {
         if (document.body) {
-          document.body.style.transition = '';
+          document.body.style.transition = "";
         }
       }, 300);
     }
   }
 
   private removeDockStyles(): void {
-    if (typeof document === 'undefined' || !document.body) {
+    if (typeof document === "undefined" || !document.body) {
       return;
     }
 
     // Only add transition if not resizing
     if (!this.isResizing) {
-      document.body.style.transition = 'margin 300ms ease';
+      document.body.style.transition = "margin 300ms ease";
     }
 
     // Restore original margins if saved
@@ -1832,14 +2017,14 @@ export class WebInspectorElement extends LitElement {
       this.previousBodyMargins = null;
     } else {
       // Reset to default if no previous values
-      document.body.style.marginLeft = '';
-      document.body.style.marginBottom = '';
+      document.body.style.marginLeft = "";
+      document.body.style.marginBottom = "";
     }
 
     // Clean up transition after animation completes
     setTimeout(() => {
       if (document.body) {
-        document.body.style.transition = '';
+        document.body.style.transition = "";
       }
     }, 300);
   }
@@ -1850,7 +2035,7 @@ export class WebInspectorElement extends LitElement {
     }
 
     // For docked states, CSS handles positioning with fixed positioning
-    if (this.isOpen && this.dockMode === 'docked-left') {
+    if (this.isOpen && this.dockMode === "docked-left") {
       this.style.transform = `translate3d(0, 0, 0)`;
     } else {
       const { position } = this.contextState[context];
@@ -1870,7 +2055,11 @@ export class WebInspectorElement extends LitElement {
       return;
     }
     const viewport = this.getViewportSize();
-    updateAnchorFromPositionHelper(this.contextState[context], viewport, EDGE_MARGIN);
+    updateAnchorFromPositionHelper(
+      this.contextState[context],
+      viewport,
+      EDGE_MARGIN,
+    );
   }
 
   private snapButtonToCorner(): void {
@@ -1885,8 +2074,10 @@ export class WebInspectorElement extends LitElement {
     const centerX = state.position.x + state.size.width / 2;
     const centerY = state.position.y + state.size.height / 2;
 
-    const horizontal: Anchor['horizontal'] = centerX < viewport.width / 2 ? 'left' : 'right';
-    const vertical: Anchor['vertical'] = centerY < viewport.height / 2 ? 'top' : 'bottom';
+    const horizontal: Anchor["horizontal"] =
+      centerX < viewport.width / 2 ? "left" : "right";
+    const vertical: Anchor["vertical"] =
+      centerY < viewport.height / 2 ? "top" : "bottom";
 
     // Set anchor to nearest corner
     state.anchor = { horizontal, vertical };
@@ -1896,7 +2087,7 @@ export class WebInspectorElement extends LitElement {
 
     // Apply the anchor position to snap to corner
     this.startHostTransition();
-    this.applyAnchorPosition('button');
+    this.applyAnchorPosition("button");
   }
 
   private applyAnchorPosition(context: ContextKey): void {
@@ -1904,7 +2095,11 @@ export class WebInspectorElement extends LitElement {
       return;
     }
     const viewport = this.getViewportSize();
-    applyAnchorPositionHelper(this.contextState[context], viewport, EDGE_MARGIN);
+    applyAnchorPositionHelper(
+      this.contextState[context],
+      viewport,
+      EDGE_MARGIN,
+    );
     this.updateHostTransform(context);
     this.persistState();
   }
@@ -1937,7 +2132,7 @@ export class WebInspectorElement extends LitElement {
     this.persistState(); // Save the open state
 
     // Apply docking styles if in docked mode
-    if (this.dockMode !== 'floating') {
+    if (this.dockMode !== "floating") {
       this.applyDockStyles();
     }
 
@@ -1945,7 +2140,7 @@ export class WebInspectorElement extends LitElement {
     this.requestUpdate();
     void this.updateComplete.then(() => {
       this.measureContext("window");
-      if (this.dockMode === 'floating') {
+      if (this.dockMode === "floating") {
         if (this.hasCustomPosition.window) {
           this.applyAnchorPosition("window");
         } else {
@@ -1955,7 +2150,6 @@ export class WebInspectorElement extends LitElement {
         // Update transform for docked position
         this.updateHostTransform("window");
       }
-
     });
   }
 
@@ -1967,7 +2161,7 @@ export class WebInspectorElement extends LitElement {
     this.isOpen = false;
 
     // Remove docking styles when closing
-    if (this.dockMode !== 'floating') {
+    if (this.dockMode !== "floating") {
       this.removeDockStyles();
     }
 
@@ -2005,7 +2199,7 @@ export class WebInspectorElement extends LitElement {
   }
 
   private renderDockControls() {
-    if (this.dockMode === 'floating') {
+    if (this.dockMode === "floating") {
       // Show dock left button
       return html`
         <button
@@ -2013,7 +2207,7 @@ export class WebInspectorElement extends LitElement {
           type="button"
           aria-label="Dock to left"
           title="Dock Left"
-          @click=${() => this.handleDockClick('docked-left')}
+          @click=${() => this.handleDockClick("docked-left")}
         >
           ${this.renderIcon("PanelLeft")}
         </button>
@@ -2026,7 +2220,7 @@ export class WebInspectorElement extends LitElement {
           type="button"
           aria-label="Float window"
           title="Float"
-          @click=${() => this.handleDockClick('floating')}
+          @click=${() => this.handleDockClick("floating")}
         >
           ${this.renderIcon("Maximize2")}
         </button>
@@ -2035,16 +2229,16 @@ export class WebInspectorElement extends LitElement {
   }
 
   private getDockedWindowStyles(): Record<string, string> {
-    if (this.dockMode === 'docked-left') {
+    if (this.dockMode === "docked-left") {
       return {
-        position: 'fixed',
-        top: '0',
-        left: '0',
-        bottom: '0',
+        position: "fixed",
+        top: "0",
+        left: "0",
+        bottom: "0",
         width: `${Math.round(this.contextState.window.size.width)}px`,
-        height: '100vh',
+        height: "100vh",
         minWidth: `${MIN_WINDOW_WIDTH_DOCKED_LEFT}px`,
-        borderRadius: '0',
+        borderRadius: "0",
       };
     }
     // Default to floating styles
@@ -2060,19 +2254,37 @@ export class WebInspectorElement extends LitElement {
     this.setDockMode(mode);
   }
 
-  private serializeAttributes(attributes: Record<string, string | number | undefined>): string {
+  private serializeAttributes(
+    attributes: Record<string, string | number | undefined>,
+  ): string {
     return Object.entries(attributes)
-      .filter(([key, value]) => key !== "key" && value !== undefined && value !== null && value !== "")
-      .map(([key, value]) => `${key}="${String(value).replace(/"/g, "&quot;")}"`)
+      .filter(
+        ([key, value]) =>
+          key !== "key" &&
+          value !== undefined &&
+          value !== null &&
+          value !== "",
+      )
+      .map(
+        ([key, value]) => `${key}="${String(value).replace(/"/g, "&quot;")}"`,
+      )
       .join(" ");
   }
 
-  private sanitizeForLogging(value: unknown, depth = 0, seen = new WeakSet<object>()): SanitizedValue {
+  private sanitizeForLogging(
+    value: unknown,
+    depth = 0,
+    seen = new WeakSet<object>(),
+  ): SanitizedValue {
     if (value === undefined) {
       return "[undefined]";
     }
 
-    if (value === null || typeof value === "number" || typeof value === "boolean") {
+    if (
+      value === null ||
+      typeof value === "number" ||
+      typeof value === "boolean"
+    ) {
       return value;
     }
 
@@ -2080,7 +2292,11 @@ export class WebInspectorElement extends LitElement {
       return value;
     }
 
-    if (typeof value === "bigint" || typeof value === "symbol" || typeof value === "function") {
+    if (
+      typeof value === "bigint" ||
+      typeof value === "symbol" ||
+      typeof value === "function"
+    ) {
       return String(value);
     }
 
@@ -2092,7 +2308,9 @@ export class WebInspectorElement extends LitElement {
       if (depth >= 4) {
         return "[Truncated depth]" as SanitizedValue;
       }
-      return value.map((item) => this.sanitizeForLogging(item, depth + 1, seen));
+      return value.map((item) =>
+        this.sanitizeForLogging(item, depth + 1, seen),
+      );
     }
 
     if (typeof value === "object") {
@@ -2106,7 +2324,9 @@ export class WebInspectorElement extends LitElement {
       }
 
       const result: Record<string, SanitizedValue> = {};
-      for (const [key, entry] of Object.entries(value as Record<string, unknown>)) {
+      for (const [key, entry] of Object.entries(
+        value as Record<string, unknown>,
+      )) {
         result[key] = this.sanitizeForLogging(entry, depth + 1, seen);
       }
       return result;
@@ -2115,10 +2335,14 @@ export class WebInspectorElement extends LitElement {
     return String(value);
   }
 
-  private normalizeEventPayload(_type: InspectorAgentEventType, payload: unknown): SanitizedValue {
+  private normalizeEventPayload(
+    _type: InspectorAgentEventType,
+    payload: unknown,
+  ): SanitizedValue {
     if (payload && typeof payload === "object" && "event" in payload) {
       const { event, ...rest } = payload as Record<string, unknown>;
-      const cleaned = Object.keys(rest).length === 0 ? event : { event, ...rest };
+      const cleaned =
+        Object.keys(rest).length === 0 ? event : { event, ...rest };
       return this.sanitizeForLogging(cleaned);
     }
 
@@ -2130,7 +2354,11 @@ export class WebInspectorElement extends LitElement {
       return content;
     }
 
-    if (content && typeof content === "object" && "text" in (content as Record<string, unknown>)) {
+    if (
+      content &&
+      typeof content === "object" &&
+      "text" in (content as Record<string, unknown>)
+    ) {
       const maybeText = (content as Record<string, unknown>).text;
       if (typeof maybeText === "string") {
         return maybeText;
@@ -2164,12 +2392,21 @@ export class WebInspectorElement extends LitElement {
         }
         const call = entry as Record<string, unknown>;
         const fn = call.function as Record<string, unknown> | undefined;
-        const functionName = typeof fn?.name === "string" ? fn.name : typeof call.toolName === "string" ? call.toolName : undefined;
-        const args = fn && "arguments" in fn ? (fn as Record<string, unknown>).arguments : call.arguments;
+        const functionName =
+          typeof fn?.name === "string"
+            ? fn.name
+            : typeof call.toolName === "string"
+              ? call.toolName
+              : undefined;
+        const args =
+          fn && "arguments" in fn
+            ? (fn as Record<string, unknown>).arguments
+            : call.arguments;
 
         const normalized: InspectorToolCall = {
           id: typeof call.id === "string" ? call.id : undefined,
-          toolName: typeof call.toolName === "string" ? call.toolName : functionName,
+          toolName:
+            typeof call.toolName === "string" ? call.toolName : functionName,
           status: typeof call.status === "string" ? call.status : undefined,
         };
 
@@ -2199,7 +2436,10 @@ export class WebInspectorElement extends LitElement {
       id: typeof raw.id === "string" ? raw.id : undefined,
       role,
       contentText,
-      contentRaw: raw.content !== undefined ? this.sanitizeForLogging(raw.content) : undefined,
+      contentRaw:
+        raw.content !== undefined
+          ? this.sanitizeForLogging(raw.content)
+          : undefined,
       toolCalls,
     };
   }
@@ -2223,12 +2463,18 @@ export class WebInspectorElement extends LitElement {
       return {};
     }
 
-    const normalized: Record<string, { description?: string; value: unknown }> = {};
+    const normalized: Record<string, { description?: string; value: unknown }> =
+      {};
     for (const [key, entry] of Object.entries(context)) {
-      if (entry && typeof entry === "object" && "value" in (entry as Record<string, unknown>)) {
+      if (
+        entry &&
+        typeof entry === "object" &&
+        "value" in (entry as Record<string, unknown>)
+      ) {
         const candidate = entry as Record<string, unknown>;
         const description =
-          typeof candidate.description === "string" && candidate.description.trim().length > 0
+          typeof candidate.description === "string" &&
+          candidate.description.trim().length > 0
             ? candidate.description
             : undefined;
         normalized[key] = { description, value: candidate.value };
@@ -2262,12 +2508,19 @@ export class WebInspectorElement extends LitElement {
     }
 
     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>
@@ -2275,23 +2528,30 @@ export class WebInspectorElement extends LitElement {
     `;
   }
 
-  private getCoreStatusSummary(): { label: string; tone: string; description: string } {
+  private getCoreStatusSummary(): {
+    label: string;
+    tone: string;
+    description: string;
+  } {
     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.",
+        description:
+          "Pass a CopilotKitCore instance to <cpk-web-inspector> or enable auto-attach.",
       };
     }
 
-    const status = this.runtimeStatus ?? CopilotKitCoreRuntimeConnectionStatus.Disconnected;
+    const status =
+      this.runtimeStatus ?? CopilotKitCoreRuntimeConnectionStatus.Disconnected;
     const lastErrorMessage = this.lastCoreError?.message;
 
     if (status === CopilotKitCoreRuntimeConnectionStatus.Error) {
       return {
         label: "Runtime error",
         tone: "border border-rose-200 bg-rose-50 text-rose-700",
-        description: lastErrorMessage ?? "CopilotKit runtime reported an error.",
+        description:
+          lastErrorMessage ?? "CopilotKit runtime reported an error.",
       };
     }
 
@@ -2314,7 +2574,8 @@ export class WebInspectorElement extends LitElement {
     return {
       label: "Disconnected",
       tone: "border border-gray-200 bg-gray-50 text-gray-700",
-      description: lastErrorMessage ?? "Waiting for CopilotKit runtime to connect.",
+      description:
+        lastErrorMessage ?? "Waiting for CopilotKit runtime to connect.",
     };
   }
 
@@ -2341,17 +2602,26 @@ export class WebInspectorElement extends LitElement {
   private renderEventsTable() {
     const events = this.getEventsForSelectedContext();
     const filteredEvents = this.filterEvents(events);
-    const selectedLabel = this.selectedContext === "all-agents" ? "all agents" : `agent ${this.selectedContext}`;
+    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>
       `;
@@ -2359,12 +2629,18 @@ export class WebInspectorElement extends LitElement {
 
     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"
@@ -2382,7 +2658,9 @@ export class WebInspectorElement 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
@@ -2401,7 +2679,9 @@ export class WebInspectorElement extends LitElement {
               <option value="all">All event types</option>
               ${AGENT_EVENT_TYPES.map(
                 (type) =>
-                  html`<option value=${type}>${type.toLowerCase().replace(/_/g, " ")}</option>`,
+                  html`<option value=${type}>
+                    ${type.toLowerCase().replace(/_/g, " ")}
+                  </option>`,
               )}
             </select>
             <div class="flex items-center gap-1 text-[11px]">
@@ -2412,7 +2692,8 @@ export class WebInspectorElement extends LitElement {
                 data-tooltip="Reset filters"
                 aria-label="Reset filters"
                 @click=${this.resetEventFilters}
-                ?disabled=${!this.eventFilterText && this.eventTypeFilter === "all"}
+                ?disabled=${!this.eventFilterText &&
+                this.eventTypeFilter === "all"}
               >
                 ${this.renderIcon("RotateCw")}
               </button>
@@ -2441,23 +2722,34 @@ export class WebInspectorElement 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>
@@ -2466,9 +2758,13 @@ export class WebInspectorElement 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 inlineEvent = this.stringifyPayload(extractedEvent, false) || "—";
-                const prettyEvent = this.stringifyPayload(extractedEvent, true) || inlineEvent;
+                const extractedEvent = this.extractEventFromPayload(
+                  event.payload,
+                );
+                const inlineEvent =
+                  this.stringifyPayload(extractedEvent, false) || "—";
+                const prettyEvent =
+                  this.stringifyPayload(extractedEvent, true) || inlineEvent;
                 const isExpanded = this.expandedRows.has(event.id);
 
                 return html`
@@ -2476,10 +2772,16 @@ export class WebInspectorElement 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>
@@ -2487,17 +2789,25 @@ export class WebInspectorElement 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: Event) => {
                                   e.stopPropagation();
                                   this.copyToClipboard(prettyEvent, event.id);
@@ -2549,7 +2859,9 @@ export class WebInspectorElement 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();
@@ -2576,13 +2888,19 @@ export class WebInspectorElement extends LitElement {
     // Show message if "all-agents" is selected or no agents available
     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>
       `;
@@ -2606,19 +2924,34 @@ export class WebInspectorElement 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>`
+              ? 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">
@@ -2628,20 +2961,36 @@ export class WebInspectorElement 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>
@@ -2654,12 +3003,18 @@ export class WebInspectorElement extends LitElement {
           <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>
@@ -2670,7 +3025,9 @@ export class WebInspectorElement 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
@@ -2678,8 +3035,16 @@ export class WebInspectorElement extends LitElement {
                   <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">
@@ -2696,20 +3061,33 @@ export class WebInspectorElement extends LitElement {
                         const rawContent = msg.contentText ?? "";
                         const toolCalls = msg.toolCalls ?? [];
                         const hasContent = rawContent.trim().length > 0;
-                        const contentFallback = toolCalls.length > 0 ? "Invoked tool call" : "—";
+                        const contentFallback =
+                          toolCalls.length > 0 ? "Invoked tool call" : "—";
 
                         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>`}
-                              ${role === 'assistant' && toolCalls.length > 0
+                                ? 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>
@@ -2720,9 +3098,13 @@ export class WebInspectorElement extends LitElement {
                   </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>
@@ -2735,21 +3117,29 @@ export class WebInspectorElement extends LitElement {
 
   private renderContextDropdown() {
     // Filter out "all-agents" when in agents view
-    const filteredOptions = this.selectedMenu === "agents"
-      ? this.contextOptions.filter((opt) => opt.key !== "all-agents")
-      : this.contextOptions;
+    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 ?? "";
+    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`
@@ -2765,9 +3155,16 @@ export class WebInspectorElement 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>
+                      <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>`
+                        ? html`<span class="text-gray-500"
+                            >${this.renderIcon("Check")}</span
+                          >`
                         : nothing}
                     </button>
                   `,
@@ -2788,11 +3185,15 @@ export class WebInspectorElement extends LitElement {
 
     // If switching to agents view and "all-agents" is selected, switch to default or first agent
     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) {
         // Try to find "default" agent first
         const defaultAgent = agentOptions.find((opt) => opt.key === "default");
-        this.selectedContext = defaultAgent ? defaultAgent.key : agentOptions[0]!.key;
+        this.selectedContext = defaultAgent
+          ? defaultAgent.key
+          : agentOptions[0]!.key;
       }
     }
 
@@ -2826,7 +3227,9 @@ export class WebInspectorElement extends LitElement {
   private 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>
       `;
@@ -2837,28 +3240,38 @@ export class WebInspectorElement extends LitElement {
 
     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>
       `;
     }
 
     // Filter tools by selected agent
-    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">
           <div class="space-y-3">
-            ${filteredTools.map(tool => this.renderToolCard(tool))}
+            ${filteredTools.map((tool) => this.renderToolCard(tool))}
           </div>
         </div>
       </div>
@@ -2879,7 +3292,7 @@ export class WebInspectorElement extends LitElement {
         name: coreTool.name,
         description: coreTool.description,
         parameters: coreTool.parameters,
-        type: 'handler',
+        type: "handler",
       });
     }
 
@@ -2888,44 +3301,54 @@ export class WebInspectorElement extends LitElement {
       if (!agent) continue;
 
       // Try to extract tool handlers
-      const handlers = (agent as { toolHandlers?: Record<string, unknown> }).toolHandlers;
-      if (handlers && typeof handlers === 'object') {
+      const handlers = (agent as { toolHandlers?: Record<string, unknown> })
+        .toolHandlers;
+      if (handlers && typeof handlers === "object") {
         for (const [toolName, handler] of Object.entries(handlers)) {
-          if (handler && typeof handler === 'object') {
+          if (handler && typeof handler === "object") {
             const handlerObj = handler as Record<string, unknown>;
             tools.push({
               agentId,
               name: toolName,
               description:
-                (typeof handlerObj.description === "string" && handlerObj.description) ||
-                (handlerObj.tool as { description?: string } | undefined)?.description,
+                (typeof handlerObj.description === "string" &&
+                  handlerObj.description) ||
+                (handlerObj.tool as { description?: string } | undefined)
+                  ?.description,
               parameters:
                 handlerObj.parameters ??
-                (handlerObj.tool as { parameters?: unknown } | undefined)?.parameters,
-              type: 'handler',
+                (handlerObj.tool as { parameters?: unknown } | undefined)
+                  ?.parameters,
+              type: "handler",
             });
           }
         }
       }
 
       // Try to extract tool renderers
-      const renderers = (agent as { toolRenderers?: Record<string, unknown> }).toolRenderers;
-      if (renderers && typeof renderers === 'object') {
+      const renderers = (agent as { toolRenderers?: Record<string, unknown> })
+        .toolRenderers;
+      if (renderers && typeof renderers === "object") {
         for (const [toolName, renderer] of Object.entries(renderers)) {
           // Don't duplicate if we already have it as a handler
-          if (!tools.some(t => t.agentId === agentId && t.name === toolName)) {
-            if (renderer && typeof renderer === 'object') {
+          if (
+            !tools.some((t) => t.agentId === agentId && t.name === toolName)
+          ) {
+            if (renderer && typeof renderer === "object") {
               const rendererObj = renderer as Record<string, unknown>;
               tools.push({
                 agentId,
                 name: toolName,
                 description:
-                  (typeof rendererObj.description === "string" && rendererObj.description) ||
-                  (rendererObj.tool as { description?: string } | undefined)?.description,
+                  (typeof rendererObj.description === "string" &&
+                    rendererObj.description) ||
+                  (rendererObj.tool as { description?: string } | undefined)
+                    ?.description,
                 parameters:
                   rendererObj.parameters ??
-                  (rendererObj.tool as { parameters?: unknown } | undefined)?.parameters,
-                type: 'renderer',
+                  (rendererObj.tool as { parameters?: unknown } | undefined)
+                    ?.parameters,
+                type: "renderer",
               });
             }
           }
@@ -2954,13 +3377,20 @@ export class WebInspectorElement extends LitElement {
         <button
           type="button"
           class="w-full px-4 py-3 text-left transition hover:bg-gray-50"
-          @click=${() => this.toggleToolExpansion(`${tool.agentId}:${tool.name}`)}
+          @click=${() =>
+            this.toggleToolExpansion(`${tool.agentId}:${tool.name}`)}
         >
           <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>
@@ -2972,15 +3402,26 @@ export class WebInspectorElement extends LitElement {
                 ${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>`
+                ? 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>
@@ -2991,50 +3432,88 @@ export class WebInspectorElement extends LitElement {
               <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 !== undefined
-                              ? 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 !== undefined
+                                ? 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>
-                                  </div>
-                                `
-                              : nothing}
-                          </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>
+                                  `
+                                : 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>
                     `}
@@ -3066,7 +3545,7 @@ export class WebInspectorElement extends LitElement {
       }>;
     } = { properties: [] };
 
-    if (!parameters || typeof parameters !== 'object') {
+    if (!parameters || typeof parameters !== "object") {
       return result;
     }
 
@@ -3074,7 +3553,7 @@ export class WebInspectorElement extends LitElement {
     const zodDef = (parameters as { _def?: Record<string, unknown> })._def;
     if (zodDef && typeof zodDef === "object") {
       // Handle Zod object schema
-      if (zodDef.typeName === 'ZodObject') {
+      if (zodDef.typeName === "ZodObject") {
         const rawShape = zodDef.shape;
         const shape =
           typeof rawShape === "function"
@@ -3087,10 +3566,12 @@ export class WebInspectorElement extends LitElement {
         const requiredKeys = new Set<string>();
 
         // Get required fields
-        if (zodDef.unknownKeys === 'strict' || !zodDef.catchall) {
+        if (zodDef.unknownKeys === "strict" || !zodDef.catchall) {
           Object.keys(shape || {}).forEach((key) => {
             const candidate = (shape as Record<string, unknown>)[key];
-            const fieldDef = (candidate as { _def?: Record<string, unknown> } | undefined)?._def;
+            const fieldDef = (
+              candidate as { _def?: Record<string, unknown> } | undefined
+            )?._def;
             if (fieldDef && !this.isZodOptional(candidate)) {
               requiredKeys.add(key);
             }
@@ -3111,11 +3592,13 @@ export class WebInspectorElement extends LitElement {
         }
       }
     } else if (
-      (parameters as { type?: string; properties?: Record<string, unknown> }).type === 'object' &&
+      (parameters as { type?: string; properties?: Record<string, unknown> })
+        .type === "object" &&
       (parameters as { properties?: Record<string, unknown> }).properties
     ) {
       // Handle JSON Schema format
-      const props = (parameters as { properties?: Record<string, unknown> }).properties;
+      const props = (parameters as { properties?: Record<string, unknown> })
+        .properties;
       const required = new Set(
         Array.isArray((parameters as { required?: string[] }).required)
           ? (parameters as { required?: string[] }).required
@@ -3127,7 +3610,8 @@ export class WebInspectorElement extends LitElement {
         result.properties.push({
           name: key,
           type: prop.type as string | undefined,
-          description: typeof prop.description === "string" ? prop.description : undefined,
+          description:
+            typeof prop.description === "string" ? prop.description : undefined,
           required: required.has(key),
           defaultValue: prop.default,
           enum: Array.isArray(prop.enum) ? prop.enum : undefined,
@@ -3145,7 +3629,7 @@ export class WebInspectorElement extends LitElement {
     const def = schema._def;
 
     // Check if it's explicitly optional or nullable
-    if (def.typeName === 'ZodOptional' || def.typeName === 'ZodNullable') {
+    if (def.typeName === "ZodOptional" || def.typeName === "ZodNullable") {
       return true;
     }
 
@@ -3177,39 +3661,51 @@ export class WebInspectorElement extends LitElement {
     let def = currentSchema._def as Record<string, unknown>;
 
     // Unwrap optional/nullable
-    while (def.typeName === 'ZodOptional' || def.typeName === 'ZodNullable' || def.typeName === 'ZodDefault') {
-      if (def.typeName === 'ZodDefault' && def.defaultValue !== undefined) {
-        info.defaultValue = typeof def.defaultValue === 'function' ? def.defaultValue() : def.defaultValue;
+    while (
+      def.typeName === "ZodOptional" ||
+      def.typeName === "ZodNullable" ||
+      def.typeName === "ZodDefault"
+    ) {
+      if (def.typeName === "ZodDefault" && def.defaultValue !== undefined) {
+        info.defaultValue =
+          typeof def.defaultValue === "function"
+            ? def.defaultValue()
+            : def.defaultValue;
       }
-      currentSchema = (def.innerType as { _def?: Record<string, unknown> }) ?? currentSchema;
+      currentSchema =
+        (def.innerType as { _def?: Record<string, unknown> }) ?? currentSchema;
       if (!currentSchema?._def) break;
       def = currentSchema._def as Record<string, unknown>;
     }
 
     // Extract description
-    info.description = typeof def.description === "string" ? def.description : undefined;
+    info.description =
+      typeof def.description === "string" ? def.description : undefined;
 
-    const typeName = typeof def.typeName === "string" ? def.typeName : undefined;
+    const typeName =
+      typeof def.typeName === "string" ? def.typeName : undefined;
 
     // Extract type
     const typeMap: Record<string, string> = {
-      ZodString: 'string',
-      ZodNumber: 'number',
-      ZodBoolean: 'boolean',
-      ZodArray: 'array',
-      ZodObject: 'object',
-      ZodEnum: 'enum',
-      ZodLiteral: 'literal',
-      ZodUnion: 'union',
-      ZodAny: 'any',
-      ZodUnknown: 'unknown',
+      ZodString: "string",
+      ZodNumber: "number",
+      ZodBoolean: "boolean",
+      ZodArray: "array",
+      ZodObject: "object",
+      ZodEnum: "enum",
+      ZodLiteral: "literal",
+      ZodUnion: "union",
+      ZodAny: "any",
+      ZodUnknown: "unknown",
     };
-    info.type = typeName ? typeMap[typeName] || typeName.replace('Zod', '').toLowerCase() : undefined;
+    info.type = typeName
+      ? typeMap[typeName] || typeName.replace("Zod", "").toLowerCase()
+      : undefined;
 
     // Extract enum values
-    if (typeName === 'ZodEnum' && Array.isArray(def.values)) {
+    if (typeName === "ZodEnum" && Array.isArray(def.values)) {
       info.enum = def.values as unknown[];
-    } else if (typeName === 'ZodLiteral' && def.value !== undefined) {
+    } else if (typeName === "ZodLiteral" && def.value !== undefined) {
       info.enum = [def.value];
     }
 
@@ -3230,13 +3726,19 @@ export class WebInspectorElement extends LitElement {
 
     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>
       `;
@@ -3246,14 +3748,19 @@ export class WebInspectorElement 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>
     `;
   }
 
-  private renderContextCard(id: string, context: { description?: string; value: unknown }) {
+  private renderContextCard(
+    id: string,
+    context: { description?: string; value: unknown },
+  ) {
     const isExpanded = this.expandedContextItems.has(id);
     const valuePreview = this.getContextValuePreview(context.value);
     const hasValue = context.value !== undefined && context.value !== null;
@@ -3270,7 +3777,11 @@ export class WebInspectorElement 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>
@@ -3279,7 +3790,11 @@ export class WebInspectorElement extends LitElement {
                   : 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>
@@ -3290,12 +3805,17 @@ export class WebInspectorElement 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"
@@ -3304,15 +3824,25 @@ export class WebInspectorElement extends LitElement {
                             void this.copyContextValue(context.value, id);
                           }}
                         >
-                          ${this.copiedContextItems.has(id) ? "Copied" : "Copy JSON"}
+                          ${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>
                     `}
@@ -3325,14 +3855,14 @@ export class WebInspectorElement extends LitElement {
 
   private getContextValuePreview(value: unknown): string {
     if (value === undefined || value === null) {
-      return '—';
+      return "—";
     }
 
-    if (typeof value === 'string') {
+    if (typeof value === "string") {
       return value.length > 50 ? `${value.substring(0, 50)}...` : value;
     }
 
-    if (typeof value === 'number' || typeof value === 'boolean') {
+    if (typeof value === "number" || typeof value === "boolean") {
       return String(value);
     }
 
@@ -3340,13 +3870,13 @@ export class WebInspectorElement extends LitElement {
       return `Array(${value.length})`;
     }
 
-    if (typeof value === 'object') {
+    if (typeof value === "object") {
       const keys = Object.keys(value);
-      return `Object with ${keys.length} key${keys.length !== 1 ? 's' : ''}`;
+      return `Object with ${keys.length} key${keys.length !== 1 ? "s" : ""}`;
     }
 
-    if (typeof value === 'function') {
-      return 'Function';
+    if (typeof value === "function") {
+      return "Function";
     }
 
     return String(value);
@@ -3354,14 +3884,14 @@ export class WebInspectorElement extends LitElement {
 
   private formatContextValue(value: unknown): string {
     if (value === undefined) {
-      return 'undefined';
+      return "undefined";
     }
 
     if (value === null) {
-      return 'null';
+      return "null";
     }
 
-    if (typeof value === 'function') {
+    if (typeof value === "function") {
       return value.toString();
     }
 
@@ -3372,7 +3902,10 @@ export class WebInspectorElement extends LitElement {
     }
   }
 
-  private async copyContextValue(value: unknown, contextId: string): Promise<void> {
+  private async copyContextValue(
+    value: unknown,
+    contextId: string,
+  ): Promise<void> {
     if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
       console.warn("Clipboard API is not available in this environment.");
       return;
@@ -3407,7 +3940,10 @@ export class WebInspectorElement extends LitElement {
     }
 
     const clickedDropdown = event.composedPath().some((node) => {
-      return node instanceof HTMLElement && node.dataset?.contextDropdownRoot === "true";
+      return (
+        node instanceof HTMLElement &&
+        node.dataset?.contextDropdownRoot === "true"
+      );
     });
 
     if (!clickedDropdown) {
@@ -3444,9 +3980,13 @@ export class WebInspectorElement extends LitElement {
     }
 
     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>
@@ -3455,14 +3995,21 @@ export class WebInspectorElement extends LitElement {
     }
 
     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>`;
     }
 
@@ -3472,35 +4019,59 @@ export class WebInspectorElement extends LitElement {
 
     const content = this.announcementHtml
       ? unsafeHTML(this.announcementHtml)
-      : html`<pre class="whitespace-pre-wrap text-sm text-gray-900">${this.announcementMarkdown}</pre>`;
+      : 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">
+    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>`;
   }
 
   private ensureAnnouncementLoading(): void {
-    if (this.announcementPromise || typeof window === "undefined" || typeof fetch === "undefined") {
+    if (
+      this.announcementPromise ||
+      typeof window === "undefined" ||
+      typeof fetch === "undefined"
+    ) {
       return;
     }
     this.announcementPromise = this.fetchAnnouncement();
   }
 
   private renderAnnouncementPreview() {
-    if (!this.hasUnseenAnnouncement || !this.showAnnouncementPreview || !this.announcementPreviewText) {
+    if (
+      !this.hasUnseenAnnouncement ||
+      !this.showAnnouncementPreview ||
+      !this.announcementPreviewText
+    ) {
       return nothing;
     }
 
-    const side = this.contextState.button.anchor.horizontal === "left" ? "right" : "left";
+    const side =
+      this.contextState.button.anchor.horizontal === "left" ? "right" : "left";
 
     return html`<div
       class="announcement-preview"
@@ -3535,9 +4106,12 @@ export class WebInspectorElement extends LitElement {
         announcement?: unknown;
       };
 
-      const timestamp = typeof data?.timestamp === "string" ? data.timestamp : null;
-      const previewText = typeof data?.previewText === "string" ? data.previewText : null;
-      const markdown = typeof data?.announcement === "string" ? data.announcement : null;
+      const timestamp =
+        typeof data?.timestamp === "string" ? data.timestamp : null;
+      const previewText =
+        typeof data?.previewText === "string" ? data.previewText : null;
+      const markdown =
+        typeof data?.announcement === "string" ? data.announcement : null;
 
       if (!timestamp || !markdown) {
         throw new Error("Malformed announcement payload");
@@ -3548,7 +4122,9 @@ export class WebInspectorElement extends LitElement {
       this.announcementTimestamp = timestamp;
       this.announcementPreviewText = previewText ?? "";
       this.announcementMarkdown = markdown;
-      this.hasUnseenAnnouncement = (!storedTimestamp || storedTimestamp !== timestamp) && !!this.announcementPreviewText;
+      this.hasUnseenAnnouncement =
+        (!storedTimestamp || storedTimestamp !== timestamp) &&
+        !!this.announcementPreviewText;
       this.showAnnouncementPreview = this.hasUnseenAnnouncement;
       this.announcementHtml = await this.convertMarkdownToHtml(markdown);
       this.announcementLoaded = true;
@@ -3561,7 +4137,9 @@ export class WebInspectorElement extends LitElement {
     }
   }
 
-  private async convertMarkdownToHtml(markdown: string): Promise<string | null> {
+  private async convertMarkdownToHtml(
+    markdown: string,
+  ): Promise<string | null> {
     const renderer = new marked.Renderer();
     renderer.link = (href, title, text) => {
       const safeHref = this.escapeHtmlAttr(this.appendRefParam(href ?? ""));
@@ -3573,7 +4151,12 @@ export class WebInspectorElement extends LitElement {
 
   private appendRefParam(href: string): string {
     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");
       }
@@ -3633,7 +4216,9 @@ export class WebInspectorElement extends LitElement {
     if (!this.announcementTimestamp) {
       // If still loading, attempt once more after promise resolves; avoid infinite requeues
       if (this.announcementPromise && !this.announcementLoaded) {
-        void this.announcementPromise.then(() => this.markAnnouncementSeen()).catch(() => undefined);
+        void this.announcementPromise
+          .then(() => this.markAnnouncementSeen())
+          .catch(() => undefined);
       }
       this.requestUpdate();
       return;