import { LitElement, css, html, nothing, unsafeCSS } from "lit";
import { styleMap } from "lit/directives/style-map.js";
import tailwindStyles from "./styles/generated.css";
import inspectorLogoUrl from "./assets/inspector-logo.svg";
import inspectorLogoIconUrl from "./assets/inspector-logo-icon.svg";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
import { marked } from "marked";
import { icons } from "lucide";
import {
  CopilotKitCore,
  CopilotKitCoreRuntimeConnectionStatus,
  type CopilotKitCoreSubscriber,
  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 {
  applyAnchorPosition as applyAnchorPositionHelper,
  centerContext as centerContextHelper,
  constrainToViewport,
  keepPositionWithinViewport,
  updateAnchorFromPosition as updateAnchorFromPositionHelper,
  updateSizeFromElement,
  clampSize as clampSizeToViewport,
} from "./lib/context-helpers";
import {
  loadInspectorState,
  saveInspectorState,
  type PersistedState,
  isValidAnchor,
  isValidPosition,
  isValidSize,
  isValidDockMode,
} from "./lib/persistence";

export const WEB_INSPECTOR_TAG = "cpk-web-inspector" as const;

type LucideIconName = keyof typeof icons;

type MenuKey = "ag-ui-events" | "agents" | "frontend-tools" | "agent-context";

type MenuItem = {
  key: MenuKey;
  label: string;
  icon: LucideIconName;
};

const EDGE_MARGIN = 16;
const DRAG_THRESHOLD = 6;
const MIN_WINDOW_WIDTH = 600;
const MIN_WINDOW_WIDTH_DOCKED_LEFT = 420;
const MIN_WINDOW_HEIGHT = 200;
const INSPECTOR_STORAGE_KEY = "cpk:inspector:state";
const ANNOUNCEMENT_STORAGE_KEY = "cpk:inspector:announcements";
const ANNOUNCEMENT_URL = "https://cdn.copilotkit.ai/announcements.json";
const DEFAULT_BUTTON_SIZE: Size = { width: 48, height: 48 };
const DEFAULT_WINDOW_SIZE: Size = { width: 840, height: 560 };
const DOCKED_LEFT_WIDTH = 500; // Sensible width for left dock with collapsed sidebar
const MAX_AGENT_EVENTS = 200;
const MAX_TOTAL_EVENTS = 500;

type InspectorAgentEventType =
  | "RUN_STARTED"
  | "RUN_FINISHED"
  | "RUN_ERROR"
  | "TEXT_MESSAGE_START"
  | "TEXT_MESSAGE_CONTENT"
  | "TEXT_MESSAGE_END"
  | "TOOL_CALL_START"
  | "TOOL_CALL_ARGS"
  | "TOOL_CALL_END"
  | "TOOL_CALL_RESULT"
  | "STATE_SNAPSHOT"
  | "STATE_DELTA"
  | "MESSAGES_SNAPSHOT"
  | "RAW_EVENT"
  | "CUSTOM_EVENT"
  | "REASONING_START"
  | "REASONING_MESSAGE_START"
  | "REASONING_MESSAGE_CONTENT"
  | "REASONING_MESSAGE_END"
  | "REASONING_END"
  | "REASONING_ENCRYPTED_VALUE";

const AGENT_EVENT_TYPES: readonly InspectorAgentEventType[] = [
  "RUN_STARTED",
  "RUN_FINISHED",
  "RUN_ERROR",
  "TEXT_MESSAGE_START",
  "TEXT_MESSAGE_CONTENT",
  "TEXT_MESSAGE_END",
  "TOOL_CALL_START",
  "TOOL_CALL_ARGS",
  "TOOL_CALL_END",
  "TOOL_CALL_RESULT",
  "STATE_SNAPSHOT",
  "STATE_DELTA",
  "MESSAGES_SNAPSHOT",
  "RAW_EVENT",
  "CUSTOM_EVENT",
  "REASONING_START",
  "REASONING_MESSAGE_START",
  "REASONING_MESSAGE_CONTENT",
  "REASONING_MESSAGE_END",
  "REASONING_END",
  "REASONING_ENCRYPTED_VALUE",
] as const;

type SanitizedValue =
  | string
  | number
  | boolean
  | null
  | SanitizedValue[]
  | { [key: string]: SanitizedValue };

type InspectorToolCall = {
  id?: string;
  function?: {
    name?: string;
    arguments?: SanitizedValue | string;
  };
  toolName?: string;
  status?: string;
};

type InspectorMessage = {
  id?: string;
  role: string;
  contentText: string;
  contentRaw?: SanitizedValue;
  toolCalls: InspectorToolCall[];
};

type InspectorToolDefinition = {
  agentId: string;
  name: string;
  description?: string;
  parameters?: unknown;
  type: "handler" | "renderer";
};

type InspectorEvent = {
  id: string;
  agentId: string;
  type: InspectorAgentEventType;
  timestamp: number;
  payload: SanitizedValue;
};

export class WebInspectorElement extends LitElement {
  static properties = {
    core: { attribute: false },
    autoAttachCore: { type: Boolean, attribute: "auto-attach-core" },
  } as const;

  private _core: CopilotKitCore | null = null;
  private coreSubscriber: CopilotKitCoreSubscriber | null = null;
  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 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 pointerId: number | null = null;
  private dragStart: Position | null = null;
  private dragOffset: Position = { x: 0, y: 0 };
  private isDragging = false;
  private pointerContext: ContextKey | null = null;
  private isOpen = false;
  private draggedDuringInteraction = false;
  private ignoreNextButtonClick = false;
  private selectedMenu: MenuKey = "ag-ui-events";
  private contextMenuOpen = false;
  private dockMode: DockMode = "floating";
  private previousBodyMargins: { left: string; bottom: string } | null = null;
  private transitionTimeoutId: ReturnType<typeof setTimeout> | null = null;
  private pendingSelectedContext: string | null = null;
  private autoAttachCore = true;
  private attemptedAutoAttach = false;
  private cachedTools: InspectorToolDefinition[] = [];
  private toolSignature = "";
  private eventFilterText = "";
  private eventTypeFilter: InspectorAgentEventType | "all" = "all";

  private announcementMarkdown: string | null = null;
  private announcementHtml: string | null = null;
  private announcementTimestamp: string | null = null;
  private announcementPreviewText: string | null = null;
  private hasUnseenAnnouncement = false;
  private announcementLoaded = false;
  private announcementLoadError: unknown = null;
  private announcementPromise: Promise<void> | null = null;
  private showAnnouncementPreview = true;

  get core(): CopilotKitCore | null {
    return this._core;
  }

  set core(value: CopilotKitCore | null) {
    const oldValue = this._core;
    if (oldValue === value) {
      return;
    }

    this.detachFromCore();

    this._core = value ?? null;
    this.requestUpdate("core", oldValue);

    if (this._core) {
      this.attachToCore(this._core);
    }
  }

  private readonly contextState: Record<ContextKey, ContextState> = {
    button: {
      position: { x: EDGE_MARGIN, y: EDGE_MARGIN },
      size: { ...DEFAULT_BUTTON_SIZE },
      anchor: { horizontal: "right", vertical: "top" },
      anchorOffset: { x: EDGE_MARGIN, y: EDGE_MARGIN },
    },
    window: {
      position: { x: EDGE_MARGIN, y: EDGE_MARGIN },
      size: { ...DEFAULT_WINDOW_SIZE },
      anchor: { horizontal: "right", vertical: "top" },
      anchorOffset: { x: EDGE_MARGIN, y: EDGE_MARGIN },
    },
  };

  private hasCustomPosition: Record<ContextKey, boolean> = {
    button: false,
    window: false,
  };

  private resizePointerId: number | null = null;
  private resizeStart: Position | null = null;
  private resizeInitialSize: { width: number; height: number } | null = null;
  private isResizing = false;

  private readonly menuItems: MenuItem[] = [
    { key: "ag-ui-events", label: "AG-UI Events", icon: "Zap" },
    { key: "agents", label: "Agent", icon: "Bot" },
    { key: "frontend-tools", label: "Frontend Tools", icon: "Hammer" },
    { key: "agent-context", label: "Context", icon: "FileText" },
  ];

  private attachToCore(core: CopilotKitCore): void {
    this.runtimeStatus = core.runtimeConnectionStatus;
    this.coreProperties = core.properties;
    this.lastCoreError = null;

    this.coreSubscriber = {
      onRuntimeConnectionStatusChanged: ({ status }) => {
        this.runtimeStatus = status;
        this.requestUpdate();
      },
      onPropertiesChanged: ({ properties }) => {
        this.coreProperties = properties;
        this.requestUpdate();
      },
      onError: ({ code, error }) => {
        this.lastCoreError = { code, message: error.message };
        this.requestUpdate();
      },
      onAgentsChanged: ({ agents }) => {
        this.processAgentsChanged(agents);
      },
      onContextChanged: ({ context }) => {
        this.contextStore = this.normalizeContextStore(context);
        this.requestUpdate();
      },
    } satisfies CopilotKitCoreSubscriber;

    this.coreUnsubscribe = core.subscribe(this.coreSubscriber).unsubscribe;
    this.processAgentsChanged(core.agents);

    // Initialize context from core
    if (core.context) {
      this.contextStore = this.normalizeContextStore(core.context);
    }
  }

  private detachFromCore(): void {
    if (this.coreUnsubscribe) {
      this.coreUnsubscribe();
      this.coreUnsubscribe = null;
    }
    this.coreSubscriber = null;
    this.runtimeStatus = null;
    this.lastCoreError = null;
    this.coreProperties = {};
    this.cachedTools = [];
    this.toolSignature = "";
    this.teardownAgentSubscriptions();
  }

  private teardownAgentSubscriptions(): void {
    for (const unsubscribe of this.agentSubscriptions.values()) {
      unsubscribe();
    }
    this.agentSubscriptions.clear();
    this.agentEvents.clear();
    this.agentMessages.clear();
    this.agentStates.clear();
    this.flattenedEvents = [];
    this.eventCounter = 0;
  }

  private processAgentsChanged(
    agents: Readonly<Record<string, AbstractAgent>>,
  ): void {
    const seenAgentIds = new Set<string>();

    for (const agent of Object.values(agents)) {
      if (!agent?.agentId) {
        continue;
      }
      seenAgentIds.add(agent.agentId);
      this.subscribeToAgent(agent);
    }

    for (const agentId of Array.from(this.agentSubscriptions.keys())) {
      if (!seenAgentIds.has(agentId)) {
        this.unsubscribeFromAgent(agentId);
        this.agentEvents.delete(agentId);
        this.agentMessages.delete(agentId);
        this.agentStates.delete(agentId);
      }
    }

    this.updateContextOptions(seenAgentIds);
    this.refreshToolsSnapshot();
    this.requestUpdate();
  }

  private refreshToolsSnapshot(): void {
    if (!this._core) {
      if (this.cachedTools.length > 0) {
        this.cachedTools = [];
        this.toolSignature = "";
        this.requestUpdate();
      }
      return;
    }

    const tools = this.extractToolsFromAgents();
    const signature = JSON.stringify(
      tools.map((tool) => ({
        agentId: tool.agentId,
        name: tool.name,
        type: tool.type,
        hasDescription: Boolean(tool.description),
        hasParameters: Boolean(tool.parameters),
      })),
    );

    if (signature !== this.toolSignature) {
      this.toolSignature = signature;
      this.cachedTools = tools;
      this.requestUpdate();
    }
  }

  private tryAutoAttachCore(): void {
    if (
      this.attemptedAutoAttach ||
      this._core ||
      !this.autoAttachCore ||
      typeof window === "undefined"
    ) {
      return;
    }

    this.attemptedAutoAttach = true;

    const globalWindow = window as unknown as Record<string, unknown>;
    const globalCandidates: Array<unknown> = [
      // Common app-level globals used during development
      globalWindow.__COPILOTKIT_CORE__,
      (globalWindow.copilotkit as { core?: unknown } | undefined)?.core,
      globalWindow.copilotkitCore,
    ];

    const foundCore = globalCandidates.find(
      (candidate): candidate is CopilotKitCore =>
        !!candidate && typeof candidate === "object",
    );

    if (foundCore) {
      this.core = foundCore;
    }
  }

  private subscribeToAgent(agent: AbstractAgent): void {
    if (!agent.agentId) {
      return;
    }

    const agentId = agent.agentId;

    this.unsubscribeFromAgent(agentId);

    const subscriber: AgentSubscriber = {
      onRunStartedEvent: ({ event }) => {
        this.recordAgentEvent(agentId, "RUN_STARTED", event);
      },
      onRunFinishedEvent: ({ event, result }) => {
        this.recordAgentEvent(agentId, "RUN_FINISHED", { event, result });
      },
      onRunErrorEvent: ({ event }) => {
        this.recordAgentEvent(agentId, "RUN_ERROR", event);
      },
      onTextMessageStartEvent: ({ event }) => {
        this.recordAgentEvent(agentId, "TEXT_MESSAGE_START", event);
      },
      onTextMessageContentEvent: ({ event, textMessageBuffer }) => {
        this.recordAgentEvent(agentId, "TEXT_MESSAGE_CONTENT", {
          event,
          textMessageBuffer,
        });
      },
      onTextMessageEndEvent: ({ 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,
        });
      },
      onToolCallEndEvent: ({ event, toolCallArgs, toolCallName }) => {
        this.recordAgentEvent(agentId, "TOOL_CALL_END", {
          event,
          toolCallArgs,
          toolCallName,
        });
      },
      onToolCallResultEvent: ({ event }) => {
        this.recordAgentEvent(agentId, "TOOL_CALL_RESULT", event);
      },
      onStateSnapshotEvent: ({ event }) => {
        this.recordAgentEvent(agentId, "STATE_SNAPSHOT", event);
        this.syncAgentState(agent);
      },
      onStateDeltaEvent: ({ event }) => {
        this.recordAgentEvent(agentId, "STATE_DELTA", event);
        this.syncAgentState(agent);
      },
      onMessagesSnapshotEvent: ({ event }) => {
        this.recordAgentEvent(agentId, "MESSAGES_SNAPSHOT", event);
        this.syncAgentMessages(agent);
      },
      onMessagesChanged: () => {
        this.syncAgentMessages(agent);
      },
      onRawEvent: ({ event }) => {
        this.recordAgentEvent(agentId, "RAW_EVENT", event);
      },
      onCustomEvent: ({ event }) => {
        this.recordAgentEvent(agentId, "CUSTOM_EVENT", event);
      },
      onReasoningStartEvent: ({ event }) => {
        this.recordAgentEvent(agentId, "REASONING_START", event);
      },
      onReasoningMessageStartEvent: ({ event }) => {
        this.recordAgentEvent(agentId, "REASONING_MESSAGE_START", event);
      },
      onReasoningMessageContentEvent: ({ event, reasoningMessageBuffer }) => {
        this.recordAgentEvent(agentId, "REASONING_MESSAGE_CONTENT", {
          event,
          reasoningMessageBuffer,
        });
      },
      onReasoningMessageEndEvent: ({ event, reasoningMessageBuffer }) => {
        this.recordAgentEvent(agentId, "REASONING_MESSAGE_END", {
          event,
          reasoningMessageBuffer,
        });
      },
      onReasoningEndEvent: ({ event }) => {
        this.recordAgentEvent(agentId, "REASONING_END", event);
      },
      onReasoningEncryptedValueEvent: ({ event }) => {
        this.recordAgentEvent(agentId, "REASONING_ENCRYPTED_VALUE", event);
      },
    };

    const { unsubscribe } = agent.subscribe(subscriber);
    this.agentSubscriptions.set(agentId, unsubscribe);
    this.syncAgentMessages(agent);
    this.syncAgentState(agent);

    if (!this.agentEvents.has(agentId)) {
      this.agentEvents.set(agentId, []);
    }
  }

  private unsubscribeFromAgent(agentId: string): void {
    const unsubscribe = this.agentSubscriptions.get(agentId);
    if (unsubscribe) {
      unsubscribe();
      this.agentSubscriptions.delete(agentId);
    }
  }

  private recordAgentEvent(
    agentId: string,
    type: InspectorAgentEventType,
    payload: unknown,
  ): void {
    const eventId = `${agentId}:${++this.eventCounter}`;
    const normalizedPayload = this.normalizeEventPayload(type, payload);
    const event: InspectorEvent = {
      id: eventId,
      agentId,
      type,
      timestamp: Date.now(),
      payload: normalizedPayload,
    };

    const currentAgentEvents = this.agentEvents.get(agentId) ?? [];
    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.refreshToolsSnapshot();
    this.requestUpdate();
  }

  private syncAgentMessages(agent: AbstractAgent): void {
    if (!agent?.agentId) {
      return;
    }

    const messages = this.normalizeAgentMessages(
      (agent as { messages?: unknown }).messages,
    );
    if (messages) {
      this.agentMessages.set(agent.agentId, messages);
    } else {
      this.agentMessages.delete(agent.agentId);
    }

    this.requestUpdate();
  }

  private syncAgentState(agent: AbstractAgent): void {
    if (!agent?.agentId) {
      return;
    }

    const state = (agent as { state?: unknown }).state;

    if (state === undefined || state === null) {
      this.agentStates.delete(agent.agentId);
    } else {
      this.agentStates.set(agent.agentId, this.sanitizeForLogging(state));
    }

    this.requestUpdate();
  }

  private updateContextOptions(agentIds: Set<string>): void {
    const nextOptions: Array<{ key: string; label: string }> = [
      { key: "all-agents", label: "All Agents" },
      ...Array.from(agentIds)
        .sort((a, b) => a.localeCompare(b))
        .map((id) => ({ key: id, label: id })),
    ];

    const optionsChanged =
      this.contextOptions.length !== nextOptions.length ||
      this.contextOptions.some(
        (option, index) => option.key !== nextOptions[index]?.key,
      );

    if (optionsChanged) {
      this.contextOptions = nextOptions;
    }

    const pendingContext = this.pendingSelectedContext;
    if (pendingContext) {
      const isPendingAvailable =
        pendingContext === "all-agents" || agentIds.has(pendingContext);
      if (isPendingAvailable) {
        if (this.selectedContext !== pendingContext) {
          this.selectedContext = pendingContext;
          this.expandedRows.clear();
        }
        this.pendingSelectedContext = null;
      } else if (agentIds.size > 0) {
        // Agents are loaded but the pending selection no longer exists
        this.pendingSelectedContext = null;
      }
    }

    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"
      let nextSelected: string = "all-agents";

      if (agentIds.has("default")) {
        nextSelected = "default";
      } else if (agentIds.size > 0) {
        nextSelected = Array.from(agentIds).sort((a, b) =>
          a.localeCompare(b),
        )[0]!;
      }

      if (this.selectedContext !== nextSelected) {
        this.selectedContext = nextSelected;
        this.expandedRows.clear();
        this.persistState();
      }
    }
  }

  private getEventsForSelectedContext(): InspectorEvent[] {
    if (this.selectedContext === "all-agents") {
      return this.flattenedEvents;
    }

    return this.agentEvents.get(this.selectedContext) ?? [];
  }

  private filterEvents(events: InspectorEvent[]): InspectorEvent[] {
    const query = this.eventFilterText.trim().toLowerCase();

    return events.filter((event) => {
      if (
        this.eventTypeFilter !== "all" &&
        event.type !== this.eventTypeFilter
      ) {
        return false;
      }

      if (!query) {
        return true;
      }

      const payloadText = this.stringifyPayload(
        event.payload,
        false,
      ).toLowerCase();
      return (
        event.type.toLowerCase().includes(query) ||
        event.agentId.toLowerCase().includes(query) ||
        payloadText.includes(query)
      );
    });
  }

  private getLatestStateForAgent(agentId: string): SanitizedValue | null {
    if (this.agentStates.has(agentId)) {
      const value = this.agentStates.get(agentId);
      return value === undefined ? null : value;
    }

    const events = this.agentEvents.get(agentId) ?? [];
    const stateEvent = events.find((e) => e.type === "STATE_SNAPSHOT");
    if (!stateEvent) {
      return null;
    }
    return stateEvent.payload;
  }

  private getLatestMessagesForAgent(
    agentId: string,
  ): InspectorMessage[] | null {
    const messages = this.agentMessages.get(agentId);
    return messages ?? null;
  }

  private getAgentStatus(agentId: string): "running" | "idle" | "error" {
    const events = this.agentEvents.get(agentId) ?? [];
    if (events.length === 0) {
      return "idle";
    }

    // Check most recent run-related event
    const runEvent = events.find(
      (e) =>
        e.type === "RUN_STARTED" ||
        e.type === "RUN_FINISHED" ||
        e.type === "RUN_ERROR",
    );

    if (!runEvent) {
      return "idle";
    }

    if (runEvent.type === "RUN_ERROR") {
      return "error";
    }

    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,
      );
      return finishedAfter ? "idle" : "running";
    }

    return "idle";
  }

  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,
        )
      : events.filter((e) => e.type === "TOOL_CALL_END").length;

    const messageCount = messages?.length ?? 0;

    return {
      totalEvents: events.length,
      lastActivity: events[0]?.timestamp ?? null,
      messages: messageCount,
      toolCalls: toolCallCount,
      errors: events.filter((e) => e.type === "RUN_ERROR").length,
    };
  }

  private renderToolCallDetails(toolCalls: InspectorToolCall[]) {
    if (!Array.isArray(toolCalls) || toolCalls.length === 0) {
      return nothing;
    }

    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,
          );
          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"
              >
                <span>${functionName}</span>
                <span class="text-[10px] text-gray-500">ID: ${callId}</span>
              </div>
              ${argsString
                ? html`<pre
                    class="mt-2 overflow-auto rounded bg-white p-2 text-[11px] leading-relaxed text-gray-800"
                  >
${argsString}</pre
                  >`
                : nothing}
            </div>
          `;
        })}
      </div>
    `;
  }

  private formatToolCallArguments(args: unknown): string | null {
    if (args === undefined || args === null || args === "") {
      return null;
    }

    if (typeof args === "string") {
      try {
        const parsed = JSON.parse(args);
        return JSON.stringify(parsed, null, 2);
      } catch {
        return args;
      }
    }

    if (typeof args === "object") {
      try {
        return JSON.stringify(args, null, 2);
      } catch {
        return String(args);
      }
    }

    return String(args);
  }

  private hasRenderableState(state: unknown): boolean {
    if (state === null || state === undefined) {
      return false;
    }

    if (Array.isArray(state)) {
      return state.length > 0;
    }

    if (typeof state === "object") {
      return Object.keys(state as Record<string, unknown>).length > 0;
    }

    if (typeof state === "string") {
      const trimmed = state.trim();
      return trimmed.length > 0 && trimmed !== "{}";
    }

    return true;
  }

  private formatStateForDisplay(state: unknown): string {
    if (state === null || state === undefined) {
      return "";
    }

    if (typeof state === "string") {
      const trimmed = state.trim();
      if (trimmed.length === 0) {
        return "";
      }
      try {
        const parsed = JSON.parse(trimmed);
        return JSON.stringify(parsed, null, 2);
      } catch {
        return state;
      }
    }

    if (typeof state === "object") {
      try {
        return JSON.stringify(state, null, 2);
      } catch {
        return String(state);
      }
    }

    return String(state);
  }

  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";

    if (type.startsWith("RUN_")) {
      return `${base} bg-blue-50 text-blue-700 border-blue-200`;
    }

    if (type.startsWith("TEXT_MESSAGE")) {
      return `${base} bg-emerald-50 text-emerald-700 border-emerald-200`;
    }

    if (type.startsWith("TOOL_CALL")) {
      return `${base} bg-amber-50 text-amber-700 border-amber-200`;
    }

    if (type.startsWith("REASONING")) {
      return `${base} bg-fuchsia-50 text-fuchsia-700 border-fuchsia-200`;
    }

    if (type.startsWith("STATE")) {
      return `${base} bg-violet-50 text-violet-700 border-violet-200`;
    }

    if (type.startsWith("MESSAGES")) {
      return `${base} bg-sky-50 text-sky-700 border-sky-200`;
    }

    if (type === "RUN_ERROR") {
      return `${base} bg-rose-50 text-rose-700 border-rose-200`;
    }

    return `${base} bg-gray-100 text-gray-600 border-gray-200`;
  }

  private stringifyPayload(payload: unknown, pretty: boolean): string {
    try {
      if (payload === undefined) {
        return pretty ? "undefined" : "undefined";
      }
      if (typeof payload === "string") {
        return payload;
      }
      return JSON.stringify(payload, null, pretty ? 2 : 0) ?? "";
    } catch (error) {
      console.warn("Failed to stringify inspector payload", error);
      return String(payload);
    }
  }

  private extractEventFromPayload(payload: unknown): unknown {
    // If payload is an object with an 'event' field, extract it
    if (payload && typeof payload === "object" && "event" in payload) {
      return (payload as Record<string, unknown>).event;
    }
    // Otherwise, assume the payload itself is the event
    return payload;
  }

  private async copyToClipboard(text: string, eventId: string): Promise<void> {
    try {
      await navigator.clipboard.writeText(text);
      this.copiedEvents.add(eventId);
      this.requestUpdate();

      // Clear the "copied" state after 2 seconds
      setTimeout(() => {
        this.copiedEvents.delete(eventId);
        this.requestUpdate();
      }, 2000);
    } catch (err) {
      console.error("Failed to copy to clipboard:", err);
    }
  }

  static styles = [
    unsafeCSS(tailwindStyles),
    css`
      :host {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2147483646;
        display: block;
        will-change: transform;
      }

      :host([data-transitioning="true"]) {
        transition: transform 300ms ease;
      }

      .console-button {
        transition:
          transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
          opacity 160ms ease;
      }

      .console-button[data-dragging="true"] {
        transition: opacity 160ms ease;
      }

      .inspector-window[data-transitioning="true"] {
        transition:
          width 300ms ease,
          height 300ms ease;
      }

      .inspector-window[data-docked="true"] {
        border-radius: 0 !important;
        box-shadow: none !important;
      }

      .resize-handle {
        touch-action: none;
        user-select: none;
      }

      .dock-resize-handle {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 100%;
        cursor: ew-resize;
        touch-action: none;
        z-index: 50;
        background: transparent;
      }

      .tooltip-target {
        position: relative;
      }

      .tooltip-target::after {
        content: attr(data-tooltip);
        position: absolute;
        top: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%) translateY(-4px);
        white-space: nowrap;
        background: rgba(17, 24, 39, 0.95);
        color: white;
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 10px;
        line-height: 1.2;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        opacity: 0;
        pointer-events: none;
        transition:
          opacity 120ms ease,
          transform 120ms ease;
        z-index: 4000;
      }

      .tooltip-target:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }

      .announcement-preview {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        min-width: 300px;
        max-width: 300px;
        background: white;
        color: #111827;
        font-size: 13px;
        line-height: 1.4;
        border-radius: 12px;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
        padding: 10px 12px;
        display: inline-flex;
        align-items: flex-start;
        gap: 8px;
        z-index: 4500;
        animation: fade-slide-in 160ms ease;
        border: 1px solid rgba(148, 163, 184, 0.35);
        white-space: normal;
        word-break: break-word;
        text-align: left;
      }

      .announcement-preview[data-side="left"] {
        right: 100%;
        margin-right: 10px;
      }

      .announcement-preview[data-side="right"] {
        left: 100%;
        margin-left: 10px;
      }

      .announcement-preview__arrow {
        position: absolute;
        width: 10px;
        height: 10px;
        background: white;
        border: 1px solid rgba(148, 163, 184, 0.35);
        transform: rotate(45deg);
        top: 50%;
        margin-top: -5px;
        z-index: -1;
      }

      .announcement-preview[data-side="left"] .announcement-preview__arrow {
        right: -5px;
        box-shadow: 6px -6px 10px rgba(15, 23, 42, 0.12);
      }

      .announcement-preview[data-side="right"] .announcement-preview__arrow {
        left: -5px;
        box-shadow: -6px 6px 10px rgba(15, 23, 42, 0.12);
      }

      .announcement-dismiss {
        color: #6b7280;
        font-size: 12px;
        padding: 2px 8px;
        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;
      }

      .announcement-dismiss:hover {
        background: rgba(241, 245, 249, 1);
        color: #111827;
      }

      .announcement-content {
        color: #111827;
        font-size: 14px;
        line-height: 1.6;
      }

      .announcement-content h1,
      .announcement-content h2,
      .announcement-content h3 {
        font-weight: 700;
        margin: 0.4rem 0 0.2rem;
      }

      .announcement-content h1 {
        font-size: 1.1rem;
      }

      .announcement-content h2 {
        font-size: 1rem;
      }

      .announcement-content h3 {
        font-size: 0.95rem;
      }

      .announcement-content p {
        margin: 0.25rem 0;
      }

      .announcement-content ul {
        list-style: disc;
        padding-left: 1.25rem;
        margin: 0.3rem 0;
      }

      .announcement-content ol {
        list-style: decimal;
        padding-left: 1.25rem;
        margin: 0.3rem 0;
      }

      .announcement-content a {
        color: #0f766e;
        text-decoration: underline;
      }
    `,
  ];

  connectedCallback(): void {
    super.connectedCallback();
    if (typeof window !== "undefined") {
      window.addEventListener("resize", this.handleResize);
      window.addEventListener(
        "pointerdown",
        this.handleGlobalPointerDown as EventListener,
      );

      // Load state early (before first render) so menu selection is correct
      this.hydrateStateFromStorageEarly();
      this.tryAutoAttachCore();
      this.ensureAnnouncementLoading();
    }
  }

  disconnectedCallback(): void {
    super.disconnectedCallback();
    if (typeof window !== "undefined") {
      window.removeEventListener("resize", this.handleResize);
      window.removeEventListener(
        "pointerdown",
        this.handleGlobalPointerDown as EventListener,
      );
    }
    this.removeDockStyles(); // Clean up any docking styles
    this.detachFromCore();
  }

  firstUpdated(): void {
    if (typeof window === "undefined") {
      return;
    }

    if (!this._core) {
      this.tryAutoAttachCore();
    }

    this.measureContext("button");
    this.measureContext("window");

    this.contextState.button.anchor = { horizontal: "right", vertical: "top" };
    this.contextState.button.anchorOffset = { x: EDGE_MARGIN, y: EDGE_MARGIN };

    this.contextState.window.anchor = { horizontal: "right", vertical: "top" };
    this.contextState.window.anchorOffset = { x: EDGE_MARGIN, y: EDGE_MARGIN };

    this.hydrateStateFromStorage();

    // Apply docking styles if open and docked (skip transition on initial load)
    if (this.isOpen && this.dockMode !== "floating") {
      this.applyDockStyles(true);
    }

    this.applyAnchorPosition("button");

    if (this.dockMode === "floating") {
      if (this.hasCustomPosition.window) {
        this.applyAnchorPosition("window");
      } else {
        this.centerContext("window");
      }
    }

    this.ensureAnnouncementLoading();

    this.updateHostTransform(this.isOpen ? "window" : "button");
  }

  render() {
    return this.isOpen ? this.renderWindow() : this.renderButton();
  }

  private renderButton() {
    const buttonClasses = [
      "console-button",
      "group",
      "relative",
      "pointer-events-auto",
      "inline-flex",
      "h-12",
      "w-12",
      "items-center",
      "justify-center",
      "rounded-full",
      "border",
      "border-white/20",
      "bg-slate-950/95",
      "text-xs",
      "font-medium",
      "text-white",
      "ring-1",
      "ring-white/10",
      "backdrop-blur-md",
      "transition",
      "hover:border-white/30",
      "hover:bg-slate-900/95",
      "hover:scale-105",
      "focus-visible:outline",
      "focus-visible:outline-2",
      "focus-visible:outline-offset-2",
      "focus-visible:outline-rose-500",
      "touch-none",
      "select-none",
      this.isDragging ? "cursor-grabbing" : "cursor-grab",
    ].join(" ");

    return html`
      <button
        class=${buttonClasses}
        type="button"
        aria-label="Web Inspector"
        data-drag-context="button"
        data-dragging=${this.isDragging && this.pointerContext === "button"
          ? "true"
          : "false"}
        @pointerdown=${this.handlePointerDown}
        @pointermove=${this.handlePointerMove}
        @pointerup=${this.handlePointerUp}
        @pointercancel=${this.handlePointerCancel}
        @click=${this.handleButtonClick}
      >
        ${this.renderAnnouncementPreview()}
        <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 windowStyles = isDocked
      ? this.getDockedWindowStyles()
      : {
          width: `${Math.round(windowState.size.width)}px`,
          height: `${Math.round(windowState.size.height)}px`,
          minWidth: `${MIN_WINDOW_WIDTH}px`,
          minHeight: `${MIN_WINDOW_HEIGHT}px`,
        };

    const hasContextDropdown = this.contextOptions.length > 0;
    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"
          >
            <span>${this.renderIcon("Bot")}</span>
            <span class="truncate">No agents available</span>
          </div>
        `;

    return html`
      <section
        class="inspector-window pointer-events-auto relative flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white text-gray-900 shadow-lg"
        style=${styleMap(windowStyles)}
        data-docked=${isDocked}
        data-transitioning=${isTransitioning}
      >
        ${isDocked
          ? html`
              <div
                class="dock-resize-handle pointer-events-auto"
                role="presentation"
                aria-hidden="true"
                @pointerdown=${this.handleResizePointerDown}
                @pointermove=${this.handleResizePointerMove}
                @pointerup=${this.handleResizePointerUp}
                @pointercancel=${this.handleResizePointerCancel}
              ></div>
            `
          : nothing}
        <div
          class="flex flex-1 flex-col overflow-hidden bg-white text-gray-800"
        >
          <div
            class="drag-handle relative z-30 flex flex-col border-b border-gray-200 bg-white/95 backdrop-blur-sm ${isDocked
              ? ""
              : this.isDragging && this.pointerContext === "window"
                ? "cursor-grabbing"
                : "cursor-grab"}"
            data-drag-context="window"
            @pointerdown=${isDocked ? undefined : this.handlePointerDown}
            @pointermove=${isDocked ? undefined : this.handlePointerMove}
            @pointerup=${isDocked ? undefined : this.handlePointerUp}
            @pointercancel=${isDocked ? undefined : this.handlePointerCancel}
          >
            <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"
                />
              </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="flex items-center gap-1">
                  ${this.renderDockControls()}
                  <button
                    class="flex h-8 w-8 items-center justify-center rounded-md text-gray-400 transition hover:bg-gray-100 hover:text-gray-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400"
                    type="button"
                    aria-label="Close Web Inspector"
                    @pointerdown=${this.handleClosePointerDown}
                    @click=${this.handleCloseClick}
                  >
                    ${this.renderIcon("X")}
                  </button>
                </div>
              </div>
            </div>
            <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",
                ].join(" ");

                return html`
                  <button
                    type="button"
                    class=${tabClasses}
                    aria-pressed=${isSelected}
                    @click=${() => this.handleMenuSelect(key)}
                  >
                    <span
                      class="text-gray-400 ${isSelected ? "text-white" : ""}"
                    >
                      ${this.renderIcon(icon)}
                    </span>
                    <span>${label}</span>
                  </button>
                `;
              })}
            </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}
              >
                <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
          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"
          aria-hidden="true"
          @pointerdown=${this.handleResizePointerDown}
          @pointermove=${this.handleResizePointerMove}
          @pointerup=${this.handleResizePointerUp}
          @pointercancel=${this.handleResizePointerCancel}
        >
          <svg
            class="h-3 w-3"
            viewBox="0 0 16 16"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-width="1.5"
          >
            <path d="M5 15L15 5" />
            <path d="M9 15L15 9" />
          </svg>
        </div>
      </section>
    `;
  }

  private hydrateStateFromStorageEarly(): void {
    if (typeof document === "undefined" || typeof window === "undefined") {
      return;
    }

    const persisted = loadInspectorState(INSPECTOR_STORAGE_KEY);
    if (!persisted) {
      return;
    }

    // Restore the open/closed state
    if (typeof persisted.isOpen === "boolean") {
      this.isOpen = persisted.isOpen;
    }

    // Restore the dock mode
    if (isValidDockMode(persisted.dockMode)) {
      this.dockMode = persisted.dockMode;
    }

    // Restore selected menu
    if (typeof persisted.selectedMenu === "string") {
      const validMenu = this.menuItems.find(
        (item) => item.key === persisted.selectedMenu,
      );
      if (validMenu) {
        this.selectedMenu = validMenu.key;
      }
    }

    // Restore selected context (agent), will be validated later against available agents
    if (typeof persisted.selectedContext === "string") {
      this.selectedContext = persisted.selectedContext;
      this.pendingSelectedContext = persisted.selectedContext;
    }
  }

  private hydrateStateFromStorage(): void {
    if (typeof document === "undefined" || typeof window === "undefined") {
      return;
    }

    const persisted = loadInspectorState(INSPECTOR_STORAGE_KEY);
    if (!persisted) {
      return;
    }

    const persistedButton = persisted.button;
    if (persistedButton) {
      if (isValidAnchor(persistedButton.anchor)) {
        this.contextState.button.anchor = persistedButton.anchor;
      }

      if (isValidPosition(persistedButton.anchorOffset)) {
        this.contextState.button.anchorOffset = persistedButton.anchorOffset;
      }

      if (typeof persistedButton.hasCustomPosition === "boolean") {
        this.hasCustomPosition.button = persistedButton.hasCustomPosition;
      }
    }

    const persistedWindow = persisted.window;
    if (persistedWindow) {
      if (isValidAnchor(persistedWindow.anchor)) {
        this.contextState.window.anchor = persistedWindow.anchor;
      }

      if (isValidPosition(persistedWindow.anchorOffset)) {
        this.contextState.window.anchorOffset = persistedWindow.anchorOffset;
      }

      if (isValidSize(persistedWindow.size)) {
        // Now clampWindowSize will use the correct minimum based on dockMode
        this.contextState.window.size = this.clampWindowSize(
          persistedWindow.size,
        );
      }

      if (typeof persistedWindow.hasCustomPosition === "boolean") {
        this.hasCustomPosition.window = persistedWindow.hasCustomPosition;
      }
    }

    if (typeof persisted.selectedContext === "string") {
      this.selectedContext = persisted.selectedContext;
      this.pendingSelectedContext = persisted.selectedContext;
    }
  }

  private get activeContext(): ContextKey {
    return this.isOpen ? "window" : "button";
  }

  private handlePointerDown = (event: PointerEvent) => {
    // Don't allow dragging when docked
    if (this.dockMode !== "floating" && this.isOpen) {
      return;
    }

    const target = event.currentTarget as HTMLElement | null;
    const contextAttr = target?.dataset.dragContext;
    const context: ContextKey = contextAttr === "window" ? "window" : "button";

    const eventTarget = event.target as HTMLElement | null;
    if (context === "window" && eventTarget?.closest("button")) {
      return;
    }

    this.pointerContext = context;
    this.measureContext(context);

    event.preventDefault();

    this.pointerId = event.pointerId;
    this.dragStart = { x: event.clientX, y: event.clientY };
    const state = this.contextState[context];
    this.dragOffset = {
      x: event.clientX - state.position.x,
      y: event.clientY - state.position.y,
    };
    this.isDragging = false;
    this.draggedDuringInteraction = false;
    this.ignoreNextButtonClick = false;

    target?.setPointerCapture?.(this.pointerId);
  };

  private handlePointerMove = (event: PointerEvent) => {
    if (
      this.pointerId !== event.pointerId ||
      !this.dragStart ||
      !this.pointerContext
    ) {
      return;
    }

    const distance = Math.hypot(
      event.clientX - this.dragStart.x,
      event.clientY - this.dragStart.y,
    );
    if (!this.isDragging && distance < DRAG_THRESHOLD) {
      return;
    }

    event.preventDefault();
    this.setDragging(true);
    this.draggedDuringInteraction = true;

    const desired: Position = {
      x: event.clientX - this.dragOffset.x,
      y: event.clientY - this.dragOffset.y,
    };

    const constrained = this.constrainToViewport(desired, this.pointerContext);
    this.contextState[this.pointerContext].position = constrained;
    this.updateHostTransform(this.pointerContext);
  };

  private handlePointerUp = (event: PointerEvent) => {
    if (this.pointerId !== event.pointerId) {
      return;
    }

    const target = event.currentTarget as HTMLElement | null;
    if (target?.hasPointerCapture(this.pointerId)) {
      target.releasePointerCapture(this.pointerId);
    }

    const context = this.pointerContext ?? this.activeContext;

    if (this.isDragging && this.pointerContext) {
      event.preventDefault();
      this.setDragging(false);
      if (this.pointerContext === "window") {
        this.updateAnchorFromPosition(this.pointerContext);
        this.hasCustomPosition.window = true;
        this.applyAnchorPosition(this.pointerContext);
      } else if (this.pointerContext === "button") {
        // Snap button to nearest corner
        this.snapButtonToCorner();
        this.hasCustomPosition.button = true;
        if (this.draggedDuringInteraction) {
          this.ignoreNextButtonClick = true;
        }
      }
    } else if (
      context === "button" &&
      !this.isOpen &&
      !this.draggedDuringInteraction
    ) {
      this.openInspector();
    }

    this.resetPointerTracking();
  };

  private handlePointerCancel = (event: PointerEvent) => {
    if (this.pointerId !== event.pointerId) {
      return;
    }

    const target = event.currentTarget as HTMLElement | null;
    if (target?.hasPointerCapture(this.pointerId)) {
      target.releasePointerCapture(this.pointerId);
    }

    this.resetPointerTracking();
  };

  private handleButtonClick = (event: Event) => {
    if (this.isDragging) {
      event.preventDefault();
      return;
    }

    if (this.ignoreNextButtonClick) {
      event.preventDefault();
      this.ignoreNextButtonClick = false;
      return;
    }

    if (!this.isOpen) {
      event.preventDefault();
      this.openInspector();
    }
  };

  private handleClosePointerDown = (event: PointerEvent) => {
    event.stopPropagation();
    event.preventDefault();
  };

  private handleCloseClick = () => {
    this.closeInspector();
  };

  private handleResizePointerDown = (event: PointerEvent) => {
    event.stopPropagation();
    event.preventDefault();

    this.hasCustomPosition.window = true;
    this.isResizing = true;
    this.resizePointerId = event.pointerId;
    this.resizeStart = { x: event.clientX, y: event.clientY };
    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 = "";
    }

    const target = event.currentTarget as HTMLElement | null;
    target?.setPointerCapture?.(event.pointerId);
  };

  private handleResizePointerMove = (event: PointerEvent) => {
    if (
      !this.isResizing ||
      this.resizePointerId !== event.pointerId ||
      !this.resizeStart ||
      !this.resizeInitialSize
    ) {
      return;
    }

    event.preventDefault();

    const deltaX = event.clientX - this.resizeStart.x;
    const deltaY = event.clientY - this.resizeStart.y;
    const state = this.contextState.window;

    // For docked states, only resize in the appropriate dimension
    if (this.dockMode === "docked-left") {
      // Only resize width for left dock
      state.size = this.clampWindowSize({
        width: this.resizeInitialSize.width + deltaX,
        height: state.size.height,
      });
      // Update the body margin
      if (document.body) {
        document.body.style.marginLeft = `${state.size.width}px`;
      }
    } else {
      // Full resize for floating mode
      state.size = this.clampWindowSize({
        width: this.resizeInitialSize.width + deltaX,
        height: this.resizeInitialSize.height + deltaY,
      });
      this.keepPositionWithinViewport("window");
      this.updateAnchorFromPosition("window");
    }

    this.requestUpdate();
    this.updateHostTransform("window");
  };

  private handleResizePointerUp = (event: PointerEvent) => {
    if (this.resizePointerId !== event.pointerId) {
      return;
    }

    const target = event.currentTarget as HTMLElement | null;
    if (target?.hasPointerCapture(this.resizePointerId)) {
      target.releasePointerCapture(this.resizePointerId);
    }

    // Only update anchor position for floating mode
    if (this.dockMode === "floating") {
      this.updateAnchorFromPosition("window");
      this.applyAnchorPosition("window");
    }

    // Persist the new size after resize completes
    this.persistState();
    this.resetResizeTracking();
  };

  private handleResizePointerCancel = (event: PointerEvent) => {
    if (this.resizePointerId !== event.pointerId) {
      return;
    }

    const target = event.currentTarget as HTMLElement | null;
    if (target?.hasPointerCapture(this.resizePointerId)) {
      target.releasePointerCapture(this.resizePointerId);
    }

    // Only update anchor position for floating mode
    if (this.dockMode === "floating") {
      this.updateAnchorFromPosition("window");
      this.applyAnchorPosition("window");
    }

    // Persist the new size after resize completes
    this.persistState();
    this.resetResizeTracking();
  };

  private handleResize = () => {
    this.measureContext("button");
    this.applyAnchorPosition("button");

    this.measureContext("window");
    if (this.hasCustomPosition.window) {
      this.applyAnchorPosition("window");
    } else {
      this.centerContext("window");
    }

    this.updateHostTransform();
  };

  private measureContext(context: ContextKey): void {
    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;
    updateSizeFromElement(this.contextState[context], element, fallback);
  }

  private centerContext(context: ContextKey): void {
    if (typeof window === "undefined") {
      return;
    }

    const viewport = this.getViewportSize();
    centerContextHelper(this.contextState[context], viewport, EDGE_MARGIN);

    if (context === this.activeContext) {
      this.updateHostTransform(context);
    }

    this.hasCustomPosition[context] = false;
    this.persistState();
  }

  private ensureWindowPlacement(): void {
    if (typeof window === "undefined") {
      return;
    }

    if (!this.hasCustomPosition.window) {
      this.centerContext("window");
      return;
    }

    const viewport = this.getViewportSize();
    keepPositionWithinViewport(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 {
    if (typeof window === "undefined") {
      return position;
    }

    const viewport = this.getViewportSize();
    return constrainToViewport(
      this.contextState[context],
      position,
      viewport,
      EDGE_MARGIN,
    );
  }

  private keepPositionWithinViewport(context: ContextKey): void {
    if (typeof window === "undefined") {
      return;
    }

    const viewport = this.getViewportSize();
    keepPositionWithinViewport(
      this.contextState[context],
      viewport,
      EDGE_MARGIN,
    );
  }

  private getViewportSize(): Size {
    if (typeof window === "undefined") {
      return { ...DEFAULT_WINDOW_SIZE };
    }

    return { width: window.innerWidth, height: window.innerHeight };
  }

  private persistState(): void {
    const state: PersistedState = {
      button: {
        anchor: this.contextState.button.anchor,
        anchorOffset: this.contextState.button.anchorOffset,
        hasCustomPosition: this.hasCustomPosition.button,
      },
      window: {
        anchor: this.contextState.window.anchor,
        anchorOffset: this.contextState.window.anchorOffset,
        size: {
          width: Math.round(this.contextState.window.size.width),
          height: Math.round(this.contextState.window.size.height),
        },
        hasCustomPosition: this.hasCustomPosition.window,
      },
      isOpen: this.isOpen,
      dockMode: this.dockMode,
      selectedMenu: this.selectedMenu,
      selectedContext: this.selectedContext,
    };
    saveInspectorState(INSPECTOR_STORAGE_KEY, state);
    this.pendingSelectedContext = state.selectedContext ?? null;
  }

  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;

    if (typeof window === "undefined") {
      return {
        width: Math.max(minWidth, size.width),
        height: Math.max(MIN_WINDOW_HEIGHT, size.height),
      };
    }

    const viewport = this.getViewportSize();
    return clampSizeToViewport(
      size,
      viewport,
      EDGE_MARGIN,
      minWidth,
      MIN_WINDOW_HEIGHT,
    );
  }

  private setDockMode(mode: DockMode): void {
    if (this.dockMode === mode) {
      return;
    }

    // Add transition class for smooth dock mode changes
    this.startHostTransition();

    // Clean up previous dock state
    this.removeDockStyles();

    this.dockMode = mode;

    if (mode !== "floating") {
      // For docking, set the target size immediately so body margins are correct
      if (mode === "docked-left") {
        this.contextState.window.size.width = DOCKED_LEFT_WIDTH;
      }

      // Then apply dock styles with correct sizes
      this.applyDockStyles();
    } else {
      // When floating, set size first then center
      this.contextState.window.size = { ...DEFAULT_WINDOW_SIZE };
      this.centerContext("window");
    }

    this.persistState();
    this.requestUpdate();
    this.updateHostTransform("window");
  }

  private startHostTransition(duration = 300): void {
    this.setAttribute("data-transitioning", "true");

    if (this.transitionTimeoutId !== null) {
      clearTimeout(this.transitionTimeoutId);
    }

    this.transitionTimeoutId = setTimeout(() => {
      this.removeAttribute("data-transitioning");
      this.transitionTimeoutId = null;
    }, duration);
  }

  private applyDockStyles(skipTransition = false): void {
    if (typeof document === "undefined" || !document.body) {
      return;
    }

    // Save original body margins
    const computedStyle = window.getComputedStyle(document.body);
    this.previousBodyMargins = {
      left: computedStyle.marginLeft,
      bottom: computedStyle.marginBottom,
    };

    // 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";
    }

    // Apply body margins with the actual window sizes
    if (this.dockMode === "docked-left") {
      document.body.style.marginLeft = `${this.contextState.window.size.width}px`;
    }

    // Remove transition after animation completes
    if (!this.isResizing && !skipTransition) {
      setTimeout(() => {
        if (document.body) {
          document.body.style.transition = "";
        }
      }, 300);
    }
  }

  private removeDockStyles(): void {
    if (typeof document === "undefined" || !document.body) {
      return;
    }

    // Only add transition if not resizing
    if (!this.isResizing) {
      document.body.style.transition = "margin 300ms ease";
    }

    // Restore original margins if saved
    if (this.previousBodyMargins) {
      document.body.style.marginLeft = this.previousBodyMargins.left;
      document.body.style.marginBottom = this.previousBodyMargins.bottom;
      this.previousBodyMargins = null;
    } else {
      // Reset to default if no previous values
      document.body.style.marginLeft = "";
      document.body.style.marginBottom = "";
    }

    // Clean up transition after animation completes
    setTimeout(() => {
      if (document.body) {
        document.body.style.transition = "";
      }
    }, 300);
  }

  private updateHostTransform(context: ContextKey = this.activeContext): void {
    if (context !== this.activeContext) {
      return;
    }

    // For docked states, CSS handles positioning with fixed positioning
    if (this.isOpen && this.dockMode === "docked-left") {
      this.style.transform = `translate3d(0, 0, 0)`;
    } else {
      const { position } = this.contextState[context];
      this.style.transform = `translate3d(${position.x}px, ${position.y}px, 0)`;
    }
  }

  private setDragging(value: boolean): void {
    if (this.isDragging !== value) {
      this.isDragging = value;
      this.requestUpdate();
    }
  }

  private updateAnchorFromPosition(context: ContextKey): void {
    if (typeof window === "undefined") {
      return;
    }
    const viewport = this.getViewportSize();
    updateAnchorFromPositionHelper(
      this.contextState[context],
      viewport,
      EDGE_MARGIN,
    );
  }

  private snapButtonToCorner(): void {
    if (typeof window === "undefined") {
      return;
    }

    const viewport = this.getViewportSize();
    const state = this.contextState.button;

    // Determine which corner is closest based on center of button
    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";

    // Set anchor to nearest corner
    state.anchor = { horizontal, vertical };

    // Always use EDGE_MARGIN as offset (pinned to corner)
    state.anchorOffset = { x: EDGE_MARGIN, y: EDGE_MARGIN };

    // Apply the anchor position to snap to corner
    this.startHostTransition();
    this.applyAnchorPosition("button");
  }

  private applyAnchorPosition(context: ContextKey): void {
    if (typeof window === "undefined") {
      return;
    }
    const viewport = this.getViewportSize();
    applyAnchorPositionHelper(
      this.contextState[context],
      viewport,
      EDGE_MARGIN,
    );
    this.updateHostTransform(context);
    this.persistState();
  }

  private resetResizeTracking(): void {
    this.resizePointerId = null;
    this.resizeStart = null;
    this.resizeInitialSize = null;
    this.isResizing = false;
  }

  private resetPointerTracking(): void {
    this.pointerId = null;
    this.dragStart = null;
    this.pointerContext = null;
    this.setDragging(false);
    this.draggedDuringInteraction = false;
  }

  private openInspector(): void {
    if (this.isOpen) {
      return;
    }

    this.showAnnouncementPreview = false; // hide the bubble once the inspector is opened

    this.ensureAnnouncementLoading();

    this.isOpen = true;
    this.persistState(); // Save the open state

    // Apply docking styles if in docked mode
    if (this.dockMode !== "floating") {
      this.applyDockStyles();
    }

    this.ensureWindowPlacement();
    this.requestUpdate();
    void this.updateComplete.then(() => {
      this.measureContext("window");
      if (this.dockMode === "floating") {
        if (this.hasCustomPosition.window) {
          this.applyAnchorPosition("window");
        } else {
          this.centerContext("window");
        }
      } else {
        // Update transform for docked position
        this.updateHostTransform("window");
      }
    });
  }

  private closeInspector(): void {
    if (!this.isOpen) {
      return;
    }

    this.isOpen = false;

    // Remove docking styles when closing
    if (this.dockMode !== "floating") {
      this.removeDockStyles();
    }

    this.persistState(); // Save the closed state
    this.updateHostTransform("button");
    this.requestUpdate();
    void this.updateComplete.then(() => {
      this.measureContext("button");
      this.applyAnchorPosition("button");
    });
  }

  private renderIcon(name: LucideIconName) {
    const iconNode = icons[name];
    if (!iconNode) {
      return nothing;
    }

    const svgAttrs: Record<string, string | number> = {
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      "stroke-width": "1.5",
      "stroke-linecap": "round",
      "stroke-linejoin": "round",
      class: "h-3.5 w-3.5",
    };

    const svgMarkup = `<svg ${this.serializeAttributes(svgAttrs)}>${iconNode
      .map(([tag, attrs]) => `<${tag} ${this.serializeAttributes(attrs)} />`)
      .join("")}</svg>`;

    return unsafeHTML(svgMarkup);
  }

  private renderDockControls() {
    if (this.dockMode === "floating") {
      // Show dock left button
      return html`
        <button
          class="flex h-8 w-8 items-center justify-center rounded-md text-gray-400 transition hover:bg-gray-100 hover:text-gray-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400"
          type="button"
          aria-label="Dock to left"
          title="Dock Left"
          @click=${() => this.handleDockClick("docked-left")}
        >
          ${this.renderIcon("PanelLeft")}
        </button>
      `;
    } else {
      // Show float button
      return html`
        <button
          class="flex h-8 w-8 items-center justify-center rounded-md text-gray-400 transition hover:bg-gray-100 hover:text-gray-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400"
          type="button"
          aria-label="Float window"
          title="Float"
          @click=${() => this.handleDockClick("floating")}
        >
          ${this.renderIcon("Maximize2")}
        </button>
      `;
    }
  }

  private getDockedWindowStyles(): Record<string, string> {
    if (this.dockMode === "docked-left") {
      return {
        position: "fixed",
        top: "0",
        left: "0",
        bottom: "0",
        width: `${Math.round(this.contextState.window.size.width)}px`,
        height: "100vh",
        minWidth: `${MIN_WINDOW_WIDTH_DOCKED_LEFT}px`,
        borderRadius: "0",
      };
    }
    // Default to floating styles
    return {
      width: `${Math.round(this.contextState.window.size.width)}px`,
      height: `${Math.round(this.contextState.window.size.height)}px`,
      minWidth: `${MIN_WINDOW_WIDTH}px`,
      minHeight: `${MIN_WINDOW_HEIGHT}px`,
    };
  }

  private handleDockClick(mode: DockMode): void {
    this.setDockMode(mode);
  }

  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;")}"`,
      )
      .join(" ");
  }

  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"
    ) {
      return value;
    }

    if (typeof value === "string") {
      return value;
    }

    if (
      typeof value === "bigint" ||
      typeof value === "symbol" ||
      typeof value === "function"
    ) {
      return String(value);
    }

    if (value instanceof Date) {
      return value.toISOString();
    }

    if (Array.isArray(value)) {
      if (depth >= 4) {
        return "[Truncated depth]" as SanitizedValue;
      }
      return value.map((item) =>
        this.sanitizeForLogging(item, depth + 1, seen),
      );
    }

    if (typeof value === "object") {
      if (seen.has(value as object)) {
        return "[Circular]" as SanitizedValue;
      }
      seen.add(value as object);

      if (depth >= 4) {
        return "[Truncated depth]" as SanitizedValue;
      }

      const result: Record<string, SanitizedValue> = {};
      for (const [key, entry] of Object.entries(
        value as Record<string, unknown>,
      )) {
        result[key] = this.sanitizeForLogging(entry, depth + 1, seen);
      }
      return result;
    }

    return String(value);
  }

  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 };
      return this.sanitizeForLogging(cleaned);
    }

    return this.sanitizeForLogging(payload);
  }

  private normalizeMessageContent(content: unknown): string {
    if (typeof content === "string") {
      return content;
    }

    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;
      }
    }

    if (content === null || content === undefined) {
      return "";
    }

    if (typeof content === "object") {
      try {
        return JSON.stringify(this.sanitizeForLogging(content));
      } catch {
        return "";
      }
    }

    return String(content);
  }

  private normalizeToolCalls(raw: unknown): InspectorToolCall[] {
    if (!Array.isArray(raw)) {
      return [];
    }

    return raw
      .map((entry) => {
        if (!entry || typeof entry !== "object") {
          return null;
        }
        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 normalized: InspectorToolCall = {
          id: typeof call.id === "string" ? call.id : undefined,
          toolName:
            typeof call.toolName === "string" ? call.toolName : functionName,
          status: typeof call.status === "string" ? call.status : undefined,
        };

        if (functionName) {
          normalized.function = {
            name: functionName,
            arguments: this.sanitizeForLogging(args),
          };
        }

        return normalized;
      })
      .filter((call): call is InspectorToolCall => Boolean(call));
  }

  private normalizeAgentMessage(message: unknown): InspectorMessage | null {
    if (!message || typeof message !== "object") {
      return null;
    }

    const raw = message as Record<string, unknown>;
    const role = typeof raw.role === "string" ? raw.role : "unknown";
    const contentText = this.normalizeMessageContent(raw.content);
    const toolCalls = this.normalizeToolCalls(raw.toolCalls);

    return {
      id: typeof raw.id === "string" ? raw.id : undefined,
      role,
      contentText,
      contentRaw:
        raw.content !== undefined
          ? this.sanitizeForLogging(raw.content)
          : undefined,
      toolCalls,
    };
  }

  private normalizeAgentMessages(messages: unknown): InspectorMessage[] | null {
    if (!Array.isArray(messages)) {
      return null;
    }

    const normalized = messages
      .map((message) => this.normalizeAgentMessage(message))
      .filter((msg): msg is InspectorMessage => msg !== null);

    return normalized;
  }

  private normalizeContextStore(
    context: Readonly<Record<string, unknown>> | null | undefined,
  ): Record<string, { description?: string; value: unknown }> {
    if (!context || typeof context !== "object") {
      return {};
    }

    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>)
      ) {
        const candidate = entry as Record<string, unknown>;
        const description =
          typeof candidate.description === "string" &&
          candidate.description.trim().length > 0
            ? candidate.description
            : undefined;
        normalized[key] = { description, value: candidate.value };
      } else {
        normalized[key] = { value: entry };
      }
    }

    return normalized;
  }

  private contextOptions: Array<{ key: string; label: string }> = [
    { key: "all-agents", label: "All Agents" },
  ];

  private selectedContext = "all-agents";
  private expandedRows: Set<string> = new Set();
  private copiedEvents: Set<string> = new Set();
  private expandedTools: Set<string> = new Set();
  private expandedContextItems: Set<string> = new Set();
  private copiedContextItems: Set<string> = new Set();

  private getSelectedMenu(): MenuItem {
    const found = this.menuItems.find((item) => item.key === this.selectedMenu);
    return found ?? this.menuItems[0]!;
  }

  private renderCoreWarningBanner() {
    if (this._core) {
      return nothing;
    }

    return html`
      <div
        class="mx-4 my-3 flex items-start gap-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800"
      >
        <span class="mt-0.5 shrink-0 text-amber-600"
          >${this.renderIcon("AlertTriangle")}</span
        >
        <div class="space-y-1">
          <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
            <code>window.__COPILOTKIT_CORE__</code> for auto-attach.
          </p>
        </div>
      </div>
    `;
  }

  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.",
      };
    }

    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.",
      };
    }

    if (status === CopilotKitCoreRuntimeConnectionStatus.Connecting) {
      return {
        label: "Connecting",
        tone: "border border-amber-200 bg-amber-50 text-amber-800",
        description: "Waiting for CopilotKit runtime to finish connecting.",
      };
    }

    if (status === CopilotKitCoreRuntimeConnectionStatus.Connected) {
      return {
        label: "Connected",
        tone: "border border-emerald-200 bg-emerald-50 text-emerald-700",
        description: "Live runtime connection established.",
      };
    }

    return {
      label: "Disconnected",
      tone: "border border-gray-200 bg-gray-50 text-gray-700",
      description:
        lastErrorMessage ?? "Waiting for CopilotKit runtime to connect.",
    };
  }

  private renderMainContent() {
    if (this.selectedMenu === "ag-ui-events") {
      return this.renderEventsTable();
    }

    if (this.selectedMenu === "agents") {
      return this.renderAgentsView();
    }

    if (this.selectedMenu === "frontend-tools") {
      return this.renderToolsView();
    }

    if (this.selectedMenu === "agent-context") {
      return this.renderContextView();
    }

    return nothing;
  }

  private renderEventsTable() {
    const events = this.getEventsForSelectedContext();
    const filteredEvents = this.filterEvents(events);
    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="max-w-md">
            <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>
          </div>
        </div>
      `;
    }

    if (filteredEvents.length === 0) {
      return html`
        <div
          class="flex h-full items-center justify-center px-4 py-8 text-center"
        >
          <div class="max-w-md space-y-3">
            <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>
            <div>
              <button
                type="button"
                class="inline-flex items-center gap-1 rounded-md bg-gray-900 px-3 py-1.5 text-[11px] font-medium text-white transition hover:bg-gray-800"
                @click=${this.resetEventFilters}
              >
                ${this.renderIcon("RefreshCw")}
                <span>Reset filters</span>
              </button>
            </div>
          </div>
        </div>
      `;
    }

    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-wrap items-center gap-2">
            <div class="relative min-w-[200px] flex-1">
              <input
                type="search"
                class="w-full rounded-md border border-gray-200 px-3 py-1.5 text-[11px] text-gray-700 shadow-sm outline-none ring-1 ring-transparent transition focus:border-gray-300 focus:ring-gray-200"
                placeholder="Search agent, type, payload"
                .value=${this.eventFilterText}
                @input=${this.handleEventFilterInput}
              />
            </div>
            <select
              class="w-40 rounded-md border border-gray-200 bg-white px-2 py-1.5 text-[11px] text-gray-700 shadow-sm outline-none transition focus:border-gray-300 focus:ring-2 focus:ring-gray-200"
              .value=${this.eventTypeFilter}
              @change=${this.handleEventTypeChange}
            >
              <option value="all">All event types</option>
              ${AGENT_EVENT_TYPES.map(
                (type) =>
                  html`<option value=${type}>
                    ${type.toLowerCase().replace(/_/g, " ")}
                  </option>`,
              )}
            </select>
            <div class="flex items-center gap-1 text-[11px]">
              <button
                type="button"
                class="tooltip-target flex h-8 w-8 items-center justify-center rounded-md border border-gray-200 bg-white text-gray-600 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
                title="Reset filters"
                data-tooltip="Reset filters"
                aria-label="Reset filters"
                @click=${this.resetEventFilters}
                ?disabled=${!this.eventFilterText &&
                this.eventTypeFilter === "all"}
              >
                ${this.renderIcon("RotateCw")}
              </button>
              <button
                type="button"
                class="tooltip-target flex h-8 w-8 items-center justify-center rounded-md border border-gray-200 bg-white text-gray-600 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
                title="Export JSON"
                data-tooltip="Export JSON"
                aria-label="Export JSON"
                @click=${() => this.exportEvents(filteredEvents)}
                ?disabled=${filteredEvents.length === 0}
              >
                ${this.renderIcon("Download")}
              </button>
              <button
                type="button"
                class="tooltip-target flex h-8 w-8 items-center justify-center rounded-md border border-gray-200 bg-white text-gray-600 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
                title="Clear events"
                data-tooltip="Clear events"
                aria-label="Clear events"
                @click=${this.handleClearEvents}
                ?disabled=${events.length === 0}
              >
                ${this.renderIcon("Trash2")}
              </button>
            </div>
          </div>
          <div class="text-[11px] text-gray-500">
            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"
                >
                  Agent
                </th>
                <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"
                >
                  Event Type
                </th>
                <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>
            </thead>
            <tbody>
              ${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 isExpanded = this.expandedRows.has(event.id);

                return html`
                  <tr
                    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>
                    <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>
                    </td>
                    <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"}"
                    >
                      ${isExpanded
                        ? html`
                            <div class="group relative">
                              <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"}"
                                @click=${(e: Event) => {
                                  e.stopPropagation();
                                  this.copyToClipboard(prettyEvent, event.id);
                                }}
                              >
                                ${this.copiedEvents.has(event.id)
                                  ? html`<span>✓ Copied</span>`
                                  : html`<span>Copy</span>`}
                              </button>
                            </div>
                          `
                        : inlineEvent}
                    </td>
                  </tr>
                `;
              })}
            </tbody>
          </table>
        </div>
      </div>
    `;
  }

  private handleEventFilterInput(event: Event): void {
    const target = event.target as HTMLInputElement | null;
    this.eventFilterText = target?.value ?? "";
    this.requestUpdate();
  }

  private handleEventTypeChange(event: Event): void {
    const target = event.target as HTMLSelectElement | null;
    const value = target?.value as InspectorAgentEventType | "all" | undefined;
    if (!value) {
      return;
    }
    this.eventTypeFilter = value;
    this.requestUpdate();
  }

  private resetEventFilters(): void {
    this.eventFilterText = "";
    this.eventTypeFilter = "all";
    this.requestUpdate();
  }

  private handleClearEvents = (): void => {
    if (this.selectedContext === "all-agents") {
      this.agentEvents.clear();
      this.flattenedEvents = [];
    } else {
      this.agentEvents.delete(this.selectedContext);
      this.flattenedEvents = this.flattenedEvents.filter(
        (event) => event.agentId !== this.selectedContext,
      );
    }

    this.expandedRows.clear();
    this.copiedEvents.clear();
    this.requestUpdate();
  };

  private exportEvents(events: InspectorEvent[]): void {
    try {
      const payload = JSON.stringify(events, null, 2);
      const blob = new Blob([payload], { type: "application/json" });
      const url = URL.createObjectURL(blob);
      const anchor = document.createElement("a");
      anchor.href = url;
      anchor.download = `copilotkit-events-${Date.now()}.json`;
      anchor.click();
      URL.revokeObjectURL(url);
    } catch (error) {
      console.error("Failed to export events", error);
    }
  }

  private renderAgentsView() {
    // 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="max-w-md">
            <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>
          </div>
        </div>
      `;
    }

    const agentId = this.selectedContext;
    const status = this.getAgentStatus(agentId);
    const stats = this.getAgentStats(agentId);
    const state = this.getLatestStateForAgent(agentId);
    const messages = this.getLatestMessagesForAgent(agentId);

    const statusColors = {
      running: "bg-emerald-50 text-emerald-700",
      idle: "bg-gray-100 text-gray-600",
      error: "bg-rose-50 text-rose-700",
    };

    return html`
      <div class="flex flex-col gap-4 p-4 overflow-auto">
        <!-- Agent Overview Card -->
        <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"
              >
                ${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>
                  ${status.charAt(0).toUpperCase() + status.slice(1)}
                </span>
              </div>
            </div>
            ${stats.lastActivity
              ? html`<span class="text-xs text-gray-500"
                  >Last activity:
                  ${new Date(stats.lastActivity).toLocaleTimeString()}</span
                >`
              : nothing}
          </div>
          <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
            <button
              type="button"
              class="rounded-md bg-gray-50 px-3 py-2 text-left transition hover:bg-gray-100 cursor-pointer overflow-hidden"
              @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>
            </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>
            <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>
            <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>
          </div>
        </div>

        <!-- Current State 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 State</h4>
          </div>
          <div class="overflow-auto p-4">
            ${this.hasRenderableState(state)
              ? html`
                  <pre
                    class="overflow-auto rounded-md bg-gray-50 p-3 text-xs text-gray-800 max-h-64"
                  ><code>${this.formatStateForDisplay(state)}</code></pre>
                `
              : html`
                  <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>State is empty</span>
                    </div>
                  </div>
                `}
          </div>
        </div>

        <!-- 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>
          </div>
          <div class="overflow-auto">
            ${messages && messages.length > 0
              ? html`
                  <table class="w-full text-xs">
                    <thead class="bg-gray-50">
                      <tr>
                        <th
                          class="px-4 py-2 text-left font-medium text-gray-700"
                        >
                          Role
                        </th>
                        <th
                          class="px-4 py-2 text-left font-medium text-gray-700"
                        >
                          Content
                        </th>
                      </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                      ${messages.map((msg) => {
                        const role = msg.role || "unknown";
                        const roleColors: Record<string, string> = {
                          user: "bg-blue-100 text-blue-800",
                          assistant: "bg-green-100 text-green-800",
                          system: "bg-gray-100 text-gray-800",
                          tool: "bg-amber-100 text-amber-800",
                          unknown: "bg-gray-100 text-gray-600",
                        };

                        const rawContent = msg.contentText ?? "";
                        const toolCalls = msg.toolCalls ?? [];
                        const hasContent = rawContent.trim().length > 0;
                        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}"
                              >
                                ${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
                                ? this.renderToolCallDetails(toolCalls)
                                : nothing}
                            </td>
                          </tr>
                        `;
                      })}
                    </tbody>
                  </table>
                `
              : html`
                  <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>No messages available</span>
                    </div>
                  </div>
                `}
          </div>
        </div>
      </div>
    `;
  }

  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 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"
      >
        <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
          >
        </button>
        ${this.contextMenuOpen
          ? html`
              <div
                class="absolute left-0 z-50 mt-1.5 w-40 rounded-md border border-gray-200 bg-white py-1 shadow-md ring-1 ring-black/5"
                data-context-dropdown-root="true"
              >
                ${filteredOptions.map(
                  (option) => html`
                    <button
                      type="button"
                      class="flex w-full items-center justify-between px-3 py-1.5 text-left text-xs transition hover:bg-gray-50 focus:bg-gray-50 focus:outline-none"
                      data-context-dropdown-root="true"
                      @click=${() => this.handleContextOptionSelect(option.key)}
                    >
                      <span
                        class="truncate ${option.key === this.selectedContext
                          ? "text-gray-900 font-medium"
                          : "text-gray-600"}"
                        >${option.label}</span
                      >
                      ${option.key === this.selectedContext
                        ? html`<span class="text-gray-500"
                            >${this.renderIcon("Check")}</span
                          >`
                        : nothing}
                    </button>
                  `,
                )}
              </div>
            `
          : nothing}
      </div>
    `;
  }

  private handleMenuSelect(key: MenuKey): void {
    if (!this.menuItems.some((item) => item.key === key)) {
      return;
    }

    this.selectedMenu = key;

    // 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",
      );
      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.contextMenuOpen = false;
    this.persistState();
    this.requestUpdate();
  }

  private handleContextDropdownToggle(event: PointerEvent): void {
    event.preventDefault();
    event.stopPropagation();
    this.contextMenuOpen = !this.contextMenuOpen;
    this.requestUpdate();
  }

  private handleContextOptionSelect(key: string): void {
    if (!this.contextOptions.some((option) => option.key === key)) {
      return;
    }

    if (this.selectedContext !== key) {
      this.selectedContext = key;
      this.expandedRows.clear();
    }

    this.contextMenuOpen = false;
    this.persistState();
    this.requestUpdate();
  }

  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"
        >
          No core instance available
        </div>
      `;
    }

    this.refreshToolsSnapshot();
    const allTools = this.cachedTools;

    if (allTools.length === 0) {
      return html`
        <div
          class="flex h-full items-center justify-center px-4 py-8 text-center"
        >
          <div class="max-w-md">
            <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>
          </div>
        </div>
      `;
    }

    // Filter tools by selected agent
    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))}
          </div>
        </div>
      </div>
    `;
  }

  private extractToolsFromAgents(): InspectorToolDefinition[] {
    if (!this._core) {
      return [];
    }

    const tools: InspectorToolDefinition[] = [];

    // Start with tools registered on the core (frontend tools / HIL)
    for (const coreTool of this._core.tools ?? []) {
      tools.push({
        agentId: coreTool.agentId ?? "",
        name: coreTool.name,
        description: coreTool.description,
        parameters: coreTool.parameters,
        type: "handler",
      });
    }

    // Augment with agent-level tool handlers/renderers
    for (const [agentId, agent] of Object.entries(this._core.agents)) {
      if (!agent) continue;

      // Try to extract tool handlers
      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") {
            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,
              parameters:
                handlerObj.parameters ??
                (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") {
        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") {
              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,
                parameters:
                  rendererObj.parameters ??
                  (rendererObj.tool as { parameters?: unknown } | undefined)
                    ?.parameters,
                type: "renderer",
              });
            }
          }
        }
      }
    }

    return tools.sort((a, b) => {
      const agentCompare = a.agentId.localeCompare(b.agentId);
      if (agentCompare !== 0) return agentCompare;
      return a.name.localeCompare(b.name);
    });
  }

  private renderToolCard(tool: InspectorToolDefinition) {
    const isExpanded = this.expandedTools.has(`${tool.agentId}:${tool.name}`);
    const schema = this.extractSchemaInfo(tool.parameters);

    const typeColors = {
      handler: "bg-blue-50 text-blue-700 border-blue-200",
      renderer: "bg-purple-50 text-purple-700 border-purple-200",
    };

    return html`
      <div class="rounded-lg border border-gray-200 bg-white overflow-hidden">
        <button
          type="button"
          class="w-full px-4 py-3 text-left transition hover:bg-gray-50"
          @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
                  ]}"
                >
                  ${tool.type}
                </span>
              </div>
              <div class="flex items-center gap-2 text-xs text-gray-500">
                <span class="flex items-center gap-1">
                  ${this.renderIcon("Bot")}
                  <span class="font-mono">${tool.agentId}</span>
                </span>
                ${schema.properties.length > 0
                  ? html`
                      <span class="text-gray-300">•</span>
                      <span
                        >${schema.properties.length}
                        parameter${schema.properties.length !== 1
                          ? "s"
                          : ""}</span
                      >
                    `
                  : nothing}
              </div>
              ${tool.description
                ? html`<p class="mt-2 text-xs text-gray-600">
                    ${tool.description}
                  </p>`
                : nothing}
            </div>
            <span
              class="shrink-0 text-gray-400 transition ${isExpanded
                ? "rotate-180"
                : ""}"
            >
              ${this.renderIcon("ChevronDown")}
            </span>
          </div>
        </button>

        ${isExpanded
          ? html`
              <div class="border-t border-gray-200 bg-gray-50/50 px-4 py-3">
                ${schema.properties.length > 0
                  ? html`
                      <h5 class="mb-3 text-xs font-semibold text-gray-700">
                        Parameters
                      </h5>
                      <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}
                                </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
                                            >
                                          `,
                                        )}
                                      </div>
                                    </div>
                                  `
                                : nothing}
                            </div>
                          `,
                        )}
                      </div>
                    `
                  : html`
                      <div
                        class="flex items-center justify-center py-4 text-xs text-gray-500"
                      >
                        <span>No parameters defined</span>
                      </div>
                    `}
              </div>
            `
          : nothing}
      </div>
    `;
  }

  private extractSchemaInfo(parameters: unknown): {
    properties: Array<{
      name: string;
      type?: string;
      description?: string;
      required: boolean;
      defaultValue?: unknown;
      enum?: unknown[];
    }>;
  } {
    const result: {
      properties: Array<{
        name: string;
        type?: string;
        description?: string;
        required: boolean;
        defaultValue?: unknown;
        enum?: unknown[];
      }>;
    } = { properties: [] };

    if (!parameters || typeof parameters !== "object") {
      return result;
    }

    // Try Zod schema introspection
    const zodDef = (parameters as { _def?: Record<string, unknown> })._def;
    if (zodDef && typeof zodDef === "object") {
      // Handle Zod object schema
      if (zodDef.typeName === "ZodObject") {
        const rawShape = zodDef.shape;
        const shape =
          typeof rawShape === "function"
            ? (rawShape as () => Record<string, unknown>)()
            : (rawShape as Record<string, unknown> | undefined);

        if (!shape || typeof shape !== "object") {
          return result;
        }
        const requiredKeys = new Set<string>();

        // Get required fields
        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;
            if (fieldDef && !this.isZodOptional(candidate)) {
              requiredKeys.add(key);
            }
          });
        }

        // Extract properties
        for (const [key, value] of Object.entries(shape || {})) {
          const fieldInfo = this.extractZodFieldInfo(value);
          result.properties.push({
            name: key,
            type: fieldInfo.type,
            description: fieldInfo.description,
            required: requiredKeys.has(key),
            defaultValue: fieldInfo.defaultValue,
            enum: fieldInfo.enum,
          });
        }
      }
    } else if (
      (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 required = new Set(
        Array.isArray((parameters as { required?: string[] }).required)
          ? (parameters as { required?: string[] }).required
          : [],
      );

      for (const [key, value] of Object.entries(props ?? {})) {
        const prop = value as Record<string, unknown>;
        result.properties.push({
          name: key,
          type: prop.type as string | undefined,
          description:
            typeof prop.description === "string" ? prop.description : undefined,
          required: required.has(key),
          defaultValue: prop.default,
          enum: Array.isArray(prop.enum) ? prop.enum : undefined,
        });
      }
    }

    return result;
  }

  private isZodOptional(zodSchema: unknown): boolean {
    const schema = zodSchema as { _def?: Record<string, unknown> };
    if (!schema?._def) return false;

    const def = schema._def;

    // Check if it's explicitly optional or nullable
    if (def.typeName === "ZodOptional" || def.typeName === "ZodNullable") {
      return true;
    }

    // Check if it has a default value
    if (def.defaultValue !== undefined) {
      return true;
    }

    return false;
  }

  private extractZodFieldInfo(zodSchema: unknown): {
    type?: string;
    description?: string;
    defaultValue?: unknown;
    enum?: unknown[];
  } {
    const info: {
      type?: string;
      description?: string;
      defaultValue?: unknown;
      enum?: unknown[];
    } = {};

    const schema = zodSchema as { _def?: Record<string, unknown> };
    if (!schema?._def) return info;

    let currentSchema = schema as { _def?: Record<string, unknown> };
    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;
      }
      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;

    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",
    };
    info.type = typeName
      ? typeMap[typeName] || typeName.replace("Zod", "").toLowerCase()
      : undefined;

    // Extract enum values
    if (typeName === "ZodEnum" && Array.isArray(def.values)) {
      info.enum = def.values as unknown[];
    } else if (typeName === "ZodLiteral" && def.value !== undefined) {
      info.enum = [def.value];
    }

    return info;
  }

  private toggleToolExpansion(toolId: string): void {
    if (this.expandedTools.has(toolId)) {
      this.expandedTools.delete(toolId);
    } else {
      this.expandedTools.add(toolId);
    }
    this.requestUpdate();
  }

  private renderContextView() {
    const contextEntries = Object.entries(this.contextStore);

    if (contextEntries.length === 0) {
      return html`
        <div
          class="flex h-full items-center justify-center px-4 py-8 text-center"
        >
          <div class="max-w-md">
            <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>
          </div>
        </div>
      `;
    }

    return html`
      <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),
            )}
          </div>
        </div>
      </div>
    `;
  }

  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;
    const title = context.description?.trim() || id;

    return html`
      <div class="rounded-lg border border-gray-200 bg-white overflow-hidden">
        <button
          type="button"
          class="w-full px-4 py-3 text-left transition hover:bg-gray-50"
          @click=${() => this.toggleContextExpansion(id)}
        >
          <div class="flex items-start justify-between gap-3">
            <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
                >
                ${hasValue
                  ? html`
                      <span class="text-gray-300">•</span>
                      <span class="truncate">${valuePreview}</span>
                    `
                  : nothing}
              </div>
            </div>
            <span
              class="shrink-0 text-gray-400 transition ${isExpanded
                ? "rotate-180"
                : ""}"
            >
              ${this.renderIcon("ChevronDown")}
            </span>
          </div>
        </button>

        ${isExpanded
          ? html`
              <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
                  >
                </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>
                        <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"
                          @click=${(e: Event) => {
                            e.stopPropagation();
                            void this.copyContextValue(context.value, id);
                          }}
                        >
                          ${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>
                    `
                  : html`
                      <div
                        class="flex items-center justify-center py-4 text-xs text-gray-500"
                      >
                        <span>No value available</span>
                      </div>
                    `}
              </div>
            `
          : nothing}
      </div>
    `;
  }

  private getContextValuePreview(value: unknown): string {
    if (value === undefined || value === null) {
      return "—";
    }

    if (typeof value === "string") {
      return value.length > 50 ? `${value.substring(0, 50)}...` : value;
    }

    if (typeof value === "number" || typeof value === "boolean") {
      return String(value);
    }

    if (Array.isArray(value)) {
      return `Array(${value.length})`;
    }

    if (typeof value === "object") {
      const keys = Object.keys(value);
      return `Object with ${keys.length} key${keys.length !== 1 ? "s" : ""}`;
    }

    if (typeof value === "function") {
      return "Function";
    }

    return String(value);
  }

  private formatContextValue(value: unknown): string {
    if (value === undefined) {
      return "undefined";
    }

    if (value === null) {
      return "null";
    }

    if (typeof value === "function") {
      return value.toString();
    }

    try {
      return JSON.stringify(value, null, 2);
    } catch {
      return String(value);
    }
  }

  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;
    }

    const serialized = this.formatContextValue(value);
    try {
      await navigator.clipboard.writeText(serialized);
      this.copiedContextItems.add(contextId);
      this.requestUpdate();
      setTimeout(() => {
        this.copiedContextItems.delete(contextId);
        this.requestUpdate();
      }, 1500);
    } catch (error) {
      console.error("Failed to copy context value:", error);
    }
  }

  private toggleContextExpansion(contextId: string): void {
    if (this.expandedContextItems.has(contextId)) {
      this.expandedContextItems.delete(contextId);
    } else {
      this.expandedContextItems.add(contextId);
    }
    this.requestUpdate();
  }

  private handleGlobalPointerDown = (event: PointerEvent): void => {
    if (!this.contextMenuOpen) {
      return;
    }

    const clickedDropdown = event.composedPath().some((node) => {
      return (
        node instanceof HTMLElement &&
        node.dataset?.contextDropdownRoot === "true"
      );
    });

    if (!clickedDropdown) {
      this.contextMenuOpen = false;
      this.requestUpdate();
    }
  };

  private toggleRowExpansion(eventId: string): void {
    // Don't toggle if user is selecting text
    const selection = window.getSelection();
    if (selection && selection.toString().length > 0) {
      return;
    }

    if (this.expandedRows.has(eventId)) {
      this.expandedRows.delete(eventId);
    } else {
      this.expandedRows.add(eventId);
    }
    this.requestUpdate();
  }

  private renderAnnouncementPanel() {
    if (!this.isOpen) {
      return nothing;
    }

    // Ensure loading is triggered even if we mounted in an already-open state
    this.ensureAnnouncementLoading();

    if (!this.hasUnseenAnnouncement) {
      return nothing;
    }

    if (!this.announcementLoaded && !this.announcementMarkdown) {
      return html`<div
        class="mx-4 my-3 rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 shadow-[0_12px_30px_rgba(15,23,42,0.12)]"
      >
        <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"
          >
            ${this.renderIcon("Megaphone")}
          </span>
          <span>Loading latest announcement…</span>
        </div>
      </div>`;
    }

    if (this.announcementLoadError) {
      return html`<div
        class="mx-4 my-3 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-900 shadow-[0_12px_30px_rgba(15,23,42,0.12)]"
      >
        <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"
          >
            ${this.renderIcon("Megaphone")}
          </span>
          <span>Announcement unavailable</span>
        </div>
        <p class="mt-2 text-xs text-rose-800">
          We couldn’t load the latest notice. Please try opening the inspector
          again.
        </p>
      </div>`;
    }

    if (!this.announcementMarkdown) {
      return nothing;
    }

    const content = this.announcementHtml
      ? unsafeHTML(this.announcementHtml)
      : html`<pre class="whitespace-pre-wrap text-sm text-gray-900">
${this.announcementMarkdown}</pre
        >`;

    return html`<div
      class="mx-4 my-3 rounded-xl border border-slate-200 bg-white px-4 py-4 shadow-[0_12px_30px_rgba(15,23,42,0.12)]"
    >
      <div
        class="mb-3 flex items-center gap-2 text-sm font-semibold text-slate-900"
      >
        <span
          class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-slate-900 text-white shadow-sm"
        >
          ${this.renderIcon("Megaphone")}
        </span>
        <span>Announcement</span>
        <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>`;
  }

  private ensureAnnouncementLoading(): void {
    if (
      this.announcementPromise ||
      typeof window === "undefined" ||
      typeof fetch === "undefined"
    ) {
      return;
    }
    this.announcementPromise = this.fetchAnnouncement();
  }

  private renderAnnouncementPreview() {
    if (
      !this.hasUnseenAnnouncement ||
      !this.showAnnouncementPreview ||
      !this.announcementPreviewText
    ) {
      return nothing;
    }

    const side =
      this.contextState.button.anchor.horizontal === "left" ? "right" : "left";

    return html`<div
      class="announcement-preview"
      data-side=${side}
      role="note"
      @click=${() => this.handleAnnouncementPreviewClick()}
    >
      <span>${this.announcementPreviewText}</span>
      <span class="announcement-preview__arrow"></span>
    </div>`;
  }

  private handleAnnouncementPreviewClick(): void {
    this.showAnnouncementPreview = false;
    this.openInspector();
  }

  private handleDismissAnnouncement = (): void => {
    this.markAnnouncementSeen();
  };

  private async fetchAnnouncement(): Promise<void> {
    try {
      const response = await fetch(ANNOUNCEMENT_URL, { cache: "no-cache" });
      if (!response.ok) {
        throw new Error(`Failed to load announcement (${response.status})`);
      }

      const data = (await response.json()) as {
        timestamp?: unknown;
        previewText?: unknown;
        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;

      if (!timestamp || !markdown) {
        throw new Error("Malformed announcement payload");
      }

      const storedTimestamp = this.loadStoredAnnouncementTimestamp();

      this.announcementTimestamp = timestamp;
      this.announcementPreviewText = previewText ?? "";
      this.announcementMarkdown = markdown;
      this.hasUnseenAnnouncement =
        (!storedTimestamp || storedTimestamp !== timestamp) &&
        !!this.announcementPreviewText;
      this.showAnnouncementPreview = this.hasUnseenAnnouncement;
      this.announcementHtml = await this.convertMarkdownToHtml(markdown);
      this.announcementLoaded = true;

      this.requestUpdate();
    } catch (error) {
      this.announcementLoadError = error;
      this.announcementLoaded = true;
      this.requestUpdate();
    }
  }

  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 ?? ""));
      const titleAttr = title ? ` title="${this.escapeHtmlAttr(title)}"` : "";
      return `<a href="${safeHref}" target="_blank" rel="noopener"${titleAttr}>${text}</a>`;
    };
    return marked.parse(markdown, { renderer });
  }

  private appendRefParam(href: string): string {
    try {
      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");
      }
      return url.toString();
    } catch {
      return href;
    }
  }

  private escapeHtmlAttr(value: string): string {
    return value
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/\"/g, "&quot;")
      .replace(/'/g, "&#39;");
  }

  private loadStoredAnnouncementTimestamp(): string | null {
    if (typeof window === "undefined" || !window.localStorage) {
      return null;
    }
    try {
      const raw = window.localStorage.getItem(ANNOUNCEMENT_STORAGE_KEY);
      if (!raw) {
        return null;
      }
      const parsed = JSON.parse(raw);
      if (parsed && typeof parsed.timestamp === "string") {
        return parsed.timestamp;
      }
      // Backward compatibility: previous shape { hash }
      return null;
    } catch {
      // ignore malformed storage
    }
    return null;
  }

  private persistAnnouncementTimestamp(timestamp: string): void {
    if (typeof window === "undefined" || !window.localStorage) {
      return;
    }
    try {
      const payload = JSON.stringify({ timestamp });
      window.localStorage.setItem(ANNOUNCEMENT_STORAGE_KEY, payload);
    } catch {
      // Non-fatal if storage is unavailable
    }
  }

  private markAnnouncementSeen(): void {
    // Clear badge only when explicitly dismissed
    this.hasUnseenAnnouncement = false;
    this.showAnnouncementPreview = false;

    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);
      }
      this.requestUpdate();
      return;
    }

    this.persistAnnouncementTimestamp(this.announcementTimestamp);
    this.requestUpdate();
  }
}

export function defineWebInspector(): void {
  if (!customElements.get(WEB_INSPECTOR_TAG)) {
    customElements.define(WEB_INSPECTOR_TAG, WebInspectorElement);
  }
}

defineWebInspector();

declare global {
  interface HTMLElementTagNameMap {
    "cpk-web-inspector": WebInspectorElement;
  }
}