@copilotkit/web-inspector 1.68.1 → 1.68.3-canary.1786716392

package/dist/index.mjs

@@ -3,10 +3,11 @@ import inspector_logo_default from "./assets/inspector-logo.mjs";
 import inspector_logo_icon_default from "./assets/inspector-logo-icon.mjs";
 import { applyAnchorPosition, centerContext, clampSize, constrainToViewport, keepPositionWithinViewport, updateAnchorFromPosition, updateSizeFromElement } from "./lib/context-helpers.mjs";
 import { isValidAnchor, isValidDockMode, isValidPosition, isValidSize, loadInspectorState, saveInspectorState } from "./lib/persistence.mjs";
+import { buildPopOutFeatures, ensureBrandFont, openPopOutWindow } from "./lib/pop-out.mjs";
 import { projectInspectorMetadata } from "./lib/inspector-metadata.mjs";
 import { selectVisibleRealThreadId } from "./lib/thread-selection.mjs";
 import { TELEMETRY_DOCS_URL, ensureTelemetryDistinctId, getRuntimeUrlType, getTelemetryDistinctIdForUrl, maybeShowDisclosure, trackBannerClicked, trackBannerDismissed, trackBannerViewed, trackInspectorOpened, trackMemoriesTabClicked, trackMetadataActionClicked, trackMetadataModuleViewed, trackTalkToEngineerClicked, trackThreadsEmptyEnabledViewed, trackThreadsEnabledViewed, trackThreadsExampleSelected, trackThreadsExampleTourCompleted, trackThreadsExampleTourDismissed, trackThreadsExampleTourReopened, trackThreadsExampleTourStarted, trackThreadsExampleTourStepViewed, trackThreadsExampleViewed, trackThreadsIntelligenceSignupClicked, trackThreadsLockedViewed, trackThreadsTabClicked, trackThreadsTalkToEngineerClicked } from "./lib/telemetry.mjs";
-import { LitElement, css, html, nothing, unsafeCSS } from "lit";
+import { LitElement, css, html, nothing, render, unsafeCSS } from "lit";
 import { marked } from "marked";
 import { styleMap } from "lit/directives/style-map.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
@@ -469,7 +470,24 @@ function formatTimestamp(ts) {
 		hour12: false
 	}) + "." + ms;
 }
-var CpkThreadList = class extends LitElement {
+/**
+* Lit's constructable stylesheets belong to the document that created them.
+* These child elements move between the app and pop-out documents, so keep
+* their styles as shadow-root style nodes that travel with the live element.
+*/
+var PortableLitElement = class extends LitElement {
+	createRenderRoot() {
+		const elementClass = this.constructor;
+		const renderRoot = this.shadowRoot ?? this.attachShadow(elementClass.shadowRootOptions);
+		for (const style of elementClass.elementStyles) {
+			const styleElement = this.ownerDocument.createElement("style");
+			styleElement.textContent = "cssText" in style ? style.cssText : Array.from(style.cssRules, (rule) => rule.cssText).join("");
+			renderRoot.append(styleElement);
+		}
+		return renderRoot;
+	}
+};
+var CpkThreadList = class extends PortableLitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.threads = [];
@@ -767,7 +785,7 @@ var CpkThreadList = class extends LitElement {
     `;
 	}
 };
-var CpkThreadInspector = class CpkThreadInspector extends LitElement {
+var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 	constructor(..._args2) {
 		super(..._args2);
 		this.threadId = null;
@@ -779,6 +797,8 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
 		this.agentStateInput = null;
 		this.agentEventsInput = [];
 		this.liveMessageVersion = 0;
+		this.focusMessageId = null;
+		this.focusRequestId = 0;
 		this._tab = "timeline";
 		this._fetchedMetadata = null;
 		this._conversation = [];
@@ -798,6 +818,8 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
 		this._detailPanelWidth = 250;
 		this._eventsNotAvailable = false;
 		this._stateNotAvailable = false;
+		this._scrolledFocusRequestId = 0;
+		this._highlightedFocusRequestId = -1;
 		this._panelInitializing = false;
 		this._activatedTabs = new Set(["timeline"]);
 		this._panelTplCache = /* @__PURE__ */ new Map();
@@ -848,6 +870,8 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
 			agentStateInput: { attribute: false },
 			agentEventsInput: { attribute: false },
 			liveMessageVersion: { attribute: false },
+			focusMessageId: { attribute: false },
+			focusRequestId: { attribute: false },
 			_tab: { state: true },
 			_fetchedMetadata: { state: true },
 			_conversation: { state: true },
@@ -1222,6 +1246,37 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
       color: #c0333a;
     }
 
+    @keyframes cpk-td-focus-pulse {
+      0% {
+        outline-color: rgba(100, 48, 171, 0);
+        box-shadow: 0 0 0 rgba(100, 48, 171, 0);
+        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+      }
+      24%,
+      50% {
+        outline-color: rgba(100, 48, 171, 0.78);
+        box-shadow: 0 7px 20px rgba(100, 48, 171, 0.2);
+      }
+      100% {
+        outline-color: rgba(100, 48, 171, 0);
+        box-shadow: 0 0 0 rgba(100, 48, 171, 0);
+      }
+    }
+
+    .cpk-td__focus-pulse {
+      position: relative;
+      z-index: 1;
+      outline: 2px solid transparent;
+      outline-offset: 3px;
+      animation: cpk-td-focus-pulse 760ms linear;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .cpk-td__focus-pulse {
+        animation-duration: 320ms;
+      }
+    }
+
     /* ── Conversation bubbles ────────────────────────────────────────── */
     .cpk-td__bubble {
       display: flex;
@@ -1757,6 +1812,31 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
 			this._messagesAbort = null;
 			this.fetchMessages(this.threadId, true);
 		}
+		const focusedContentChanged = _changed.has("_fetchedEvents") || _changed.has("agentEventsInput") || _changed.has("_conversation");
+		if (this.focusMessageId && (this.focusRequestId > this._scrolledFocusRequestId || focusedContentChanged)) {
+			if (this._tab !== "timeline") {
+				this._activatedTabs = new Set([...this._activatedTabs, "timeline"]);
+				this._tab = "timeline";
+				this.requestUpdate();
+			}
+			requestAnimationFrame(() => this.scrollToFocusedMessage());
+		}
+	}
+	scrollToFocusedMessage() {
+		if (!this.focusMessageId) return;
+		const message = Array.from(this.shadowRoot?.querySelectorAll("[data-message-id]") ?? []).find((candidate) => candidate.dataset.messageId === this.focusMessageId);
+		if (!message) return;
+		message.scrollIntoView?.({ block: "center" });
+		this._scrolledFocusRequestId = this.focusRequestId;
+		this.pulseFocusedMessage(message);
+	}
+	pulseFocusedMessage(message) {
+		if (this.focusRequestId === this._highlightedFocusRequestId) return;
+		this._highlightedFocusRequestId = this.focusRequestId;
+		message.classList.remove("cpk-td__focus-pulse");
+		message.offsetWidth;
+		message.classList.add("cpk-td__focus-pulse");
+		message.addEventListener("animationend", () => message.classList.remove("cpk-td__focus-pulse"), { once: true });
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -2104,6 +2184,7 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
 			if (!item) {
 				item = {
 					id: `message-${key}`,
+					messageId: key,
 					kind: "message",
 					title: `${role || "message"} message`,
 					body: "",
@@ -2633,6 +2714,7 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
 		return html`
       <div
         class="cpk-td__timeline-item ${isWarning ? "cpk-td__timeline-item--warning" : ""}"
+        data-message-id=${item.messageId ?? nothing}
       >
         <div class="cpk-td__timeline-header">
           <span class="cpk-td__timeline-kind"
@@ -2769,6 +2851,7 @@ var CpkThreadInspector = class CpkThreadInspector extends LitElement {
 		return html`
       <div
         class="cpk-td__bubble ${isUser ? "cpk-td__bubble--user" : "cpk-td__bubble--assistant"}"
+        data-message-id=${item.id}
       >
         <div
           class="cpk-td__bubble-inner ${isUser ? "cpk-td__bubble-inner--user" : "cpk-td__bubble-inner--assistant"}"
@@ -3125,7 +3208,7 @@ function maxRecallScore(memories) {
 function relevanceBarWidth(relevance) {
 	return Math.max(6, Math.min(100, Math.round(relevance * 100)));
 }
-var CpkMemoryList = class extends LitElement {
+var CpkMemoryList = class extends PortableLitElement {
 	constructor(..._args3) {
 		super(..._args3);
 		this.memories = [];
@@ -3682,7 +3765,7 @@ var ɵCpkThreadDetails = class extends CpkThreadInspector {};
 function defineElementOnce(registry, tag, ctor) {
 	if (!registry.get(tag)) registry.define(tag, ctor);
 }
-var WebInspectorElement = class extends LitElement {
+var WebInspectorElement = class WebInspectorElement extends LitElement {
 	constructor(..._args4) {
 		super(..._args4);
 		this._core = null;
@@ -3738,6 +3821,9 @@ var WebInspectorElement = class extends LitElement {
 		this.selectedThreadId = null;
 		this.selectedRealThreadIsExplicit = false;
 		this.selectedLocalExampleThreadId = null;
+		this.requestedThreadId = null;
+		this.focusedThreadMessageId = null;
+		this.threadFocusRequestId = 0;
 		this.threadListWidth = 290;
 		this.threadDividerResizing = false;
 		this.threadDividerPointerId = -1;
@@ -3753,6 +3839,8 @@ var WebInspectorElement = class extends LitElement {
 		this.threadCapabilityGeneration = 0;
 		this.contextMenuOpen = false;
 		this.dockMode = "floating";
+		this.popOut = null;
+		this.inspectorPortal = null;
 		this.previousBodyMargins = null;
 		this.transitionTimeoutId = null;
 		this.bodyTransitionTimeoutIds = /* @__PURE__ */ new Set();
@@ -3933,6 +4021,45 @@ var WebInspectorElement = class extends LitElement {
 		this.handleCloseClick = () => {
 			this.closeInspector();
 		};
+		this.requestPopOut = () => {
+			if (this.isPoppedOut) return;
+			const size = this.contextState.window.size;
+			const handle = openPopOutWindow({
+				open: window.open.bind(window),
+				features: buildPopOutFeatures(size),
+				title: "CopilotKit Inspector",
+				cssTexts: this.getPopOutCssTexts(),
+				sourceDocument: document,
+				onClose: () => this.handlePopOutClosed()
+			});
+			this.popOut = handle;
+			try {
+				defineWebInspector(handle.win.customElements);
+				if (this.dockMode !== "floating") this.removeDockStyles();
+				handle.win.addEventListener("pointerdown", this.handleGlobalPointerDown);
+				this.syncInspectorPortal();
+				this.requestUpdate();
+			} catch (error) {
+				this.popOut = null;
+				this.unbindPopOutPointerDown(handle.win);
+				handle.close();
+				if (this.isConnected && this.isOpen && this.dockMode !== "floating") this.applyDockStyles();
+				this.requestUpdate();
+				throw error;
+			}
+		};
+		this.handlePopOutClosed = () => {
+			const handle = this.popOut;
+			if (!handle) return;
+			this.popOut = null;
+			this.unbindPopOutPointerDown(handle.win);
+			this.syncInspectorPortal();
+			if (this.isConnected && this.isOpen && this.dockMode !== "floating") this.applyDockStyles();
+			this.requestUpdate();
+		};
+		this.handleAppBeforeUnload = () => {
+			this.closePopOut();
+		};
 		this.handleResizePointerDown = (event) => {
 			event.stopPropagation();
 			event.preventDefault();
@@ -3993,6 +4120,7 @@ var WebInspectorElement = class extends LitElement {
 			this.resetResizeTracking();
 		};
 		this.handleResize = () => {
+			if (this.isPoppedOut) return;
 			this.measureContext("button");
 			this.applyAnchorPosition("button");
 			this.measureContext("window");
@@ -4086,7 +4214,7 @@ var WebInspectorElement = class extends LitElement {
 			}
 			this.playThreadsExampleOverviewVideo(video, lifecycleGeneration);
 		};
-		this.handleThreadsSetupPromptCopy = async () => {
+		this.handleThreadsSetupPromptCopy = async (event) => {
 			const generation = this.threadsSetupPromptCopyGeneration += 1;
 			if (this.threadsSetupPromptCopyResetTimeoutId !== null) {
 				window.clearTimeout(this.threadsSetupPromptCopyResetTimeoutId);
@@ -4094,12 +4222,13 @@ var WebInspectorElement = class extends LitElement {
 			}
 			this.threadsSetupPromptCopyState = "idle";
 			this.requestUpdate();
-			if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
+			const clipboard = this.getClipboard(event);
+			if (!clipboard?.writeText) {
 				this.showThreadsSetupPromptCopyState("error", generation);
 				return;
 			}
 			try {
-				await navigator.clipboard.writeText(THREADS_RUNTIME_SETUP_PROMPT);
+				await clipboard.writeText(THREADS_RUNTIME_SETUP_PROMPT);
 				this.showThreadsSetupPromptCopyState("copied", generation);
 			} catch {
 				this.showThreadsSetupPromptCopyState("error", generation);
@@ -4120,7 +4249,8 @@ var WebInspectorElement = class extends LitElement {
 		this.handleGlobalPointerDown = (event) => {
 			if (!this.contextMenuOpen) return;
 			if (!event.composedPath().some((node) => {
-				return node instanceof HTMLElement && node.dataset?.contextDropdownRoot === "true";
+				const candidate = node;
+				return typeof candidate.getAttribute === "function" && candidate.getAttribute("data-context-dropdown-root") === "true";
 			})) {
 				this.contextMenuOpen = false;
 				this.requestUpdate();
@@ -4132,8 +4262,10 @@ var WebInspectorElement = class extends LitElement {
 		};
 		this.copyResetTimeouts = /* @__PURE__ */ new WeakMap();
 		this.handleAnnouncementContentClick = (event) => {
-			const button = (event.target instanceof HTMLElement ? event.target : null)?.closest(".announcement-code__copy");
-			if (!(button instanceof HTMLButtonElement)) {
+			const target = event.target;
+			const closest = typeof target?.closest === "function" ? target.closest(".announcement-code__copy") : null;
+			const button = closest?.tagName === "BUTTON" ? closest : null;
+			if (!button) {
 				this.trackBannerClickedOnce({ cta: "body" });
 				return;
 			}
@@ -4143,12 +4275,13 @@ var WebInspectorElement = class extends LitElement {
 			const code = this.decodeBase64(encoded);
 			if (!code) return;
 			const showCopied = () => {
+				const view = button.ownerDocument.defaultView ?? window;
 				const existing = this.copyResetTimeouts.get(button);
-				if (existing !== void 0) window.clearTimeout(existing);
+				if (existing !== void 0) view.clearTimeout(existing);
 				button.setAttribute("data-copied", "true");
 				button.setAttribute("aria-label", "Code copied");
 				button.textContent = "Copied";
-				const id = window.setTimeout(() => {
+				const id = view.setTimeout(() => {
 					button.removeAttribute("data-copied");
 					button.setAttribute("aria-label", "Copy code");
 					button.textContent = "Copy";
@@ -4156,7 +4289,8 @@ var WebInspectorElement = class extends LitElement {
 				}, 1500);
 				this.copyResetTimeouts.set(button, id);
 			};
-			if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) navigator.clipboard.writeText(code).then(showCopied, () => {});
+			const clipboard = this.getClipboard(event);
+			if (clipboard?.writeText) clipboard.writeText(code).then(showCopied, () => {});
 		};
 	}
 	static {
@@ -4439,6 +4573,12 @@ var WebInspectorElement = class extends LitElement {
 		if (!this.areThreadEndpointsAvailable()) return;
 		const { displayThreads } = this.getActiveThreadsState();
 		const previousSelectedThreadId = this.selectedThreadId;
+		if (this.requestedThreadId !== null) {
+			this.selectedThreadId = this.requestedThreadId;
+			this.selectedRealThreadIsExplicit = true;
+			if (displayThreads.some((thread) => thread.id === this.requestedThreadId)) this.requestedThreadId = null;
+			return;
+		}
 		if (this.selectedLocalExampleThreadId !== null && previousSelectedThreadId === this.selectedLocalExampleThreadId && displayThreads.length === 0) {
 			this.selectedRealThreadIsExplicit = false;
 			return;
@@ -5048,6 +5188,26 @@ var WebInspectorElement = class extends LitElement {
 		if (this.selectedContext === "all-agents") return this.flattenedEvents;
 		return this.agentEvents.get(this.selectedContext) ?? [];
 	}
+	focusThread(options) {
+		if (!options.threadId) return;
+		this.pendingPersistedMenu = null;
+		this.selectedMenu = "threads";
+		this.settingsOpen = false;
+		this.lastSelectedMenuByGroup.threads = "threads";
+		this.contextMenuOpen = false;
+		this.selectedLocalExampleThreadId = null;
+		this.exampleTourActive = false;
+		this.selectedContext = options.agentId && this.contextOptions.some((option) => option.key === options.agentId) ? options.agentId : "all-agents";
+		this.requestedThreadId = options.threadId;
+		this.selectedThreadId = options.threadId;
+		this.selectedRealThreadIsExplicit = true;
+		this.focusedThreadMessageId = options.messageId ?? null;
+		this.threadFocusRequestId += 1;
+		const { displayThreads } = this.getActiveThreadsState();
+		if (displayThreads.some((thread) => thread.id === options.threadId)) this.requestedThreadId = null;
+		this.persistState();
+		this.requestUpdate();
+	}
 	filterEvents(events) {
 		const query = this.eventFilterText.trim().toLowerCase();
 		return events.filter((event) => {
@@ -5189,9 +5349,24 @@ ${argsString}</pre
 		if (payload && typeof payload === "object" && "event" in payload) return payload.event;
 		return payload;
 	}
-	async copyToClipboard(text, eventId) {
+	/** Prefer the window that owns the UI: the popup while popped out. */
+	getClipboard(event) {
+		if (this.isPoppedOut) {
+			const popped = this.popOut?.win.navigator.clipboard;
+			if (popped) return popped;
+		}
+		const viewClipboard = (event && "view" in event ? event.view : null)?.navigator.clipboard;
+		if (viewClipboard) return viewClipboard;
+		if (typeof navigator !== "undefined" && "clipboard" in navigator) return navigator.clipboard;
+	}
+	async copyToClipboard(text, eventId, event) {
+		const clipboard = this.getClipboard(event);
+		if (!clipboard) {
+			console.error("Failed to copy to clipboard:", "Clipboard API is not available");
+			return;
+		}
 		try {
-			await navigator.clipboard.writeText(text);
+			await clipboard.writeText(text);
 			this.copiedEvents.add(eventId);
 			this.requestUpdate();
 			setTimeout(() => {
@@ -6009,6 +6184,9 @@ ${argsString}</pre
 			this.ensureBrandFonts();
 			window.addEventListener("resize", this.handleResize);
 			window.addEventListener("pointerdown", this.handleGlobalPointerDown);
+			window.addEventListener("beforeunload", this.handleAppBeforeUnload);
+			const viteHot = import.meta.hot;
+			if (viteHot) viteHot.on("vite:beforeUpdate", this.handleAppBeforeUnload);
 			this.hydrateStateFromStorageEarly();
 			this.exampleTourDismissed = this.readThreadsExampleTourDismissed();
 			this.tryAutoAttachCore();
@@ -6017,19 +6195,15 @@ ${argsString}</pre
 		this.requestUpdate();
 	}
 	ensureBrandFonts() {
-		const FONT_LINK_ID = "cpk-inspector-brand-fonts";
-		if (document.getElementById(FONT_LINK_ID)) return;
-		const link = document.createElement("link");
-		link.id = FONT_LINK_ID;
-		link.rel = "stylesheet";
-		link.href = "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600&family=Spline+Sans+Mono:wght@600&display=swap";
-		document.head.appendChild(link);
+		ensureBrandFont(document);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this.closePopOut();
 		if (typeof window !== "undefined") {
 			window.removeEventListener("resize", this.handleResize);
 			window.removeEventListener("pointerdown", this.handleGlobalPointerDown);
+			window.removeEventListener("beforeunload", this.handleAppBeforeUnload);
 		}
 		for (const id of this.bodyTransitionTimeoutIds) clearTimeout(id);
 		this.bodyTransitionTimeoutIds.clear();
@@ -6079,19 +6253,22 @@ ${argsString}</pre
 		this.updateHostTransform(this.isOpen ? "window" : "button");
 	}
 	render() {
-		return this.isOpen ? this.renderWindow() : this.renderButton();
+		return this.isOpen ? html`
+          <div data-inspector-portal-anchor></div>
+        ` : this.renderButton();
 	}
 	willUpdate() {
 		this.reconcileSelectedMenuVisibility();
 	}
 	updated() {
+		this.syncInspectorPortal();
 		this.syncThreadsExampleOverviewVideo();
 		this.maybeTrackInspectorMetadataViews();
 		if (!this.isOpen || this.selectedGroup !== "agents") {
 			this.lastScrolledAgentNavigationLayout = null;
 			return;
 		}
-		const navigation = this.shadowRoot?.querySelector("nav[aria-label=\"Agent navigation\"]");
+		const navigation = this.activeRoot.querySelector("nav[aria-label=\"Agent navigation\"]");
 		if (!navigation) return;
 		const activeControl = navigation.querySelector("[aria-current=\"page\"]");
 		if (!activeControl) return;
@@ -6221,8 +6398,19 @@ ${argsString}</pre
 	renderWindow() {
 		const windowState = this.contextState.window;
 		const isDocked = this.dockMode !== "floating";
+		const isPoppedOut = this.isPoppedOut;
 		const isTransitioning = this.hasAttribute("data-transitioning");
-		const windowStyles = isDocked ? {
+		const disableDrag = isDocked || isPoppedOut;
+		const windowStyles = isPoppedOut ? {
+			position: "fixed",
+			inset: "0",
+			width: "100%",
+			height: "100%",
+			minWidth: "0",
+			minHeight: "0",
+			borderRadius: "0",
+			overflowX: "hidden"
+		} : isDocked ? {
 			...this.getDockedWindowStyles(),
 			overflowX: "hidden"
 		} : {
@@ -6250,7 +6438,7 @@ ${argsString}</pre
         data-docked=${isDocked}
         data-transitioning=${isTransitioning}
       >
-        ${isDocked ? html`
+        ${isDocked && !isPoppedOut ? html`
               <div
                 class="dock-resize-handle pointer-events-auto"
                 role="presentation"
@@ -6265,12 +6453,12 @@ ${argsString}</pre
           class="flex flex-1 flex-col overflow-hidden bg-white text-gray-800"
         >
           <div
-            class="drag-handle relative z-30 flex flex-col border-b border-gray-200 bg-white/95 backdrop-blur-sm ${isDocked ? "" : this.isDragging && this.pointerContext === "window" ? "cursor-grabbing" : "cursor-grab"}"
+            class="drag-handle relative z-30 flex flex-col border-b border-gray-200 bg-white/95 backdrop-blur-sm ${disableDrag ? "" : this.isDragging && this.pointerContext === "window" ? "cursor-grabbing" : "cursor-grab"}"
             data-drag-context="window"
-            @pointerdown=${isDocked ? void 0 : this.handlePointerDown}
-            @pointermove=${isDocked ? void 0 : this.handlePointerMove}
-            @pointerup=${isDocked ? void 0 : this.handlePointerUp}
-            @pointercancel=${isDocked ? void 0 : this.handlePointerCancel}
+            @pointerdown=${disableDrag ? void 0 : this.handlePointerDown}
+            @pointermove=${disableDrag ? void 0 : this.handlePointerMove}
+            @pointerup=${disableDrag ? void 0 : this.handlePointerUp}
+            @pointercancel=${disableDrag ? void 0 : this.handlePointerCancel}
           >
             <div
               class="inspector-account-strip flex flex-wrap items-center gap-3 px-4 py-3"
@@ -6291,27 +6479,46 @@ ${argsString}</pre
                   ${agentSelector}
                 </div>
                 <div class="flex items-center gap-1">
-                  ${this.renderDockControls()}
+                  ${isPoppedOut ? nothing : html`
+                          ${this.renderDockControls()}
+                          <button
+                            class="inspector-account-control flex h-8 w-8 items-center justify-center rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                            type="button"
+                            aria-label="Detach Inspector into its own window"
+                            title="Detach into its own window"
+                            data-testid="cpk-inspector-pop-out"
+                            style=${INTERACTIVE_FOCUS_BASE_STYLE}
+                            .click=${this.requestPopOut}
+                            @click=${this.requestPopOut}
+                          >
+                            ${this.renderIcon("PictureInPicture2")}
+                          </button>
+                        `}
                   <button
                     class="inspector-account-control flex h-8 w-8 items-center justify-center rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ${this.settingsOpen ? "inspector-account-control-active" : ""}"
                     type="button"
                     aria-label="Settings"
                     aria-pressed=${this.settingsOpen}
+                    title="Settings"
                     style=${INTERACTIVE_FOCUS_BASE_STYLE}
                     @click=${this.handleSettingsToggle}
                   >
-                    ${this.renderIcon("Settings")}
-                  </button>
-                  <button
-                    class="inspector-account-control flex h-8 w-8 items-center justify-center rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
-                    type="button"
-                    aria-label="Close Web Inspector"
-                    style=${INTERACTIVE_FOCUS_BASE_STYLE}
-                    @pointerdown=${this.handleClosePointerDown}
-                    @click=${this.handleCloseClick}
-                  >
-                    ${this.renderIcon("X")}
+                    <span class="inspector-account-control-icon" aria-hidden="true">
+                      ${this.renderIcon("Settings")}
+                    </span>
                   </button>
+                  ${isPoppedOut ? nothing : html`
+                          <button
+                            class="inspector-account-control flex h-8 w-8 items-center justify-center rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                            type="button"
+                            aria-label="Close Web Inspector"
+                            style=${INTERACTIVE_FOCUS_BASE_STYLE}
+                            @pointerdown=${this.handleClosePointerDown}
+                            @click=${this.handleCloseClick}
+                          >
+                            ${this.renderIcon("X")}
+                          </button>
+                        `}
                 </div>
               </div>
             </div>
@@ -6406,27 +6613,29 @@ ${argsString}</pre
             </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>
+        ${isPoppedOut ? nothing : html`
+                <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>
     `;
 	}
@@ -6490,6 +6699,62 @@ ${argsString}</pre
 	get activeContext() {
 		return this.isOpen ? "window" : "button";
 	}
+	get isPoppedOut() {
+		return this.popOut !== null && !this.popOut.win.closed;
+	}
+	get activeRoot() {
+		if (this.isPoppedOut) return this.popOut.win.document;
+		return this.renderRoot;
+	}
+	getPopOutCssTexts() {
+		const fromStatic = WebInspectorElement.styles.map((sheet) => "cssText" in sheet ? String(sheet.cssText) : "");
+		const overlay = `
+    html, body { margin: 0; height: 100%; background: #ffffff; }
+    .inspector-window {
+      position: fixed !important;
+      inset: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      min-width: 0 !important;
+      min-height: 0 !important;
+      border-radius: 0 !important;
+    }
+  `;
+		return [...fromStatic.filter(Boolean), overlay];
+	}
+	unbindPopOutPointerDown(win) {
+		try {
+			win.removeEventListener("pointerdown", this.handleGlobalPointerDown);
+		} catch {}
+	}
+	closePopOut() {
+		const handle = this.popOut;
+		if (!handle) return;
+		this.handlePopOutClosed();
+		handle.close();
+	}
+	syncInspectorPortal() {
+		if (!this.inspectorPortal) {
+			const portal = (this.ownerDocument ?? document).createElement("div");
+			portal.dataset.inspectorPortal = "true";
+			portal.style.display = "contents";
+			this.inspectorPortal = portal;
+		}
+		if (!this.isOpen) {
+			render(nothing, this.inspectorPortal, {
+				host: this,
+				creationScope: this.ownerDocument ?? document
+			});
+			this.inspectorPortal.remove();
+			return;
+		}
+		render(this.renderWindow(), this.inspectorPortal, {
+			host: this,
+			creationScope: this.ownerDocument ?? document
+		});
+		const target = this.isPoppedOut ? this.popOut.win.document.body : this.renderRoot.querySelector("[data-inspector-portal-anchor]");
+		if (target && this.inspectorPortal.parentNode !== target) target.appendChild(this.inspectorPortal);
+	}
 	measureContext(context) {
 		const selector = context === "window" ? ".inspector-window" : ".console-button";
 		const element = this.renderRoot?.querySelector(selector);
@@ -6627,6 +6892,7 @@ ${argsString}</pre
 		} else document.body.style.transition = "";
 	}
 	updateHostTransform(context = this.activeContext) {
+		if (this.isPoppedOut) return;
 		if (context !== this.activeContext) return;
 		if (this.isOpen && this.dockMode === "docked-left") this.style.transform = `translate3d(0, 0, 0)`;
 		else {
@@ -6663,6 +6929,7 @@ ${argsString}</pre
 		this.applyAnchorPosition("button");
 	}
 	applyAnchorPosition(context) {
+		if (this.isPoppedOut) return;
 		if (typeof window === "undefined") return;
 		const viewport = this.getViewportSize();
 		applyAnchorPosition(this.contextState[context], viewport, EDGE_MARGIN);
@@ -6682,7 +6949,9 @@ ${argsString}</pre
 		this.setDragging(false);
 		this.draggedDuringInteraction = false;
 	}
-	openInspector(source) {
+	openInspector(source, options = {}) {
+		if (options.threadId) this.focusThread(options);
+		if (this.isPoppedOut) return;
 		if (this.isOpen) return;
 		const hadUnseenAnnouncement = this.hasUnseenAnnouncement;
 		this.showAnnouncementPreview = false;
@@ -6702,6 +6971,7 @@ ${argsString}</pre
 		});
 	}
 	closeInspector() {
+		if (this.isPoppedOut) return;
 		if (!this.isOpen) return;
 		this.isOpen = false;
 		if (this.dockMode !== "floating") this.removeDockStyles();
@@ -7177,7 +7447,7 @@ ${argsString}</pre
 		const step = THREADS_EXAMPLE_TOUR_STEPS[this.exampleTourStep] ?? THREADS_EXAMPLE_TOUR_STEPS[0];
 		if (!step) return;
 		this.updateComplete.then(() => {
-			(this.shadowRoot?.querySelector("cpk-thread-details"))?.selectTab?.(step.tab);
+			this.activeRoot.querySelector("cpk-thread-details")?.selectTab?.(step.tab);
 		});
 	}
 	startExampleTour(autoStarted) {
@@ -7224,6 +7494,8 @@ ${argsString}</pre
 		this.requestUpdate();
 	}
 	handleThreadsThreadSelected(threadId, showingExamples) {
+		this.requestedThreadId = null;
+		this.focusedThreadMessageId = null;
 		if (showingExamples && this.selectedThreadId === threadId && this.selectedLocalExampleThreadId === threadId) {
 			this.selectedThreadId = null;
 			this.selectedRealThreadIsExplicit = false;
@@ -7417,7 +7689,7 @@ ${argsString}</pre
 	}
 	/** Reconciles the rendered media node with its current lifecycle. */
 	syncThreadsExampleOverviewVideo() {
-		const video = this.shadowRoot?.querySelector(".cpk-threads-overview-video");
+		const video = this.activeRoot.querySelector(".cpk-threads-overview-video");
 		if (!video) {
 			if (this.threadsExampleOverviewVideoElement || this.threadsExampleOverviewVideoState !== "deferred" || this.threadsExampleOverviewVideoLoadTimer !== null || this.threadsExampleOverviewVideoIdleCallbackId !== null || this.threadsExampleOverviewVideoPlayOnNextBind) this.cleanupThreadsExampleOverviewVideo();
 			return;
@@ -8329,6 +8601,8 @@ ${argsString}</pre
                     .headers=${this._core?.headers ?? {}}
                     .threadInspectionAvailable=${selectedThreadIsLocalExample || this.areThreadEndpointsAvailable() && this._core?.threadEndpoints?.inspect !== false}
                     .liveMessageVersion=${this.liveMessageVersion.get(selectedThread.id) ?? 0}
+                    .focusMessageId=${this.focusedThreadMessageId}
+                    .focusRequestId=${this.threadFocusRequestId}
                     .agentStateInput=${this.getLatestStateForAgent(selectedThread.agentId)}
                     .agentEventsInput=${this.agentEvents.get(selectedThread.agentId) ?? []}
                   ></cpk-thread-details>
@@ -8518,7 +8792,7 @@ ${argsString}</pre
 			return html`
                   <tr
                     class="${rowBg} cursor-pointer transition hover:bg-blue-50/50"
-                    @click=${() => this.toggleRowExpansion(event.id)}
+                    @click=${(clickEvent) => this.toggleRowExpansion(event.id, clickEvent)}
                   >
                     <td
                       class="border-l border-r border-b border-gray-200 px-3 py-2"
@@ -8551,7 +8825,7 @@ ${prettyEvent}</pre
                                 class="absolute right-0 top-0 cursor-pointer rounded px-2 py-1 text-[10px] opacity-0 transition group-hover:opacity-100 ${this.copiedEvents.has(event.id) ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900"}"
                                 @click=${(e) => {
 				e.stopPropagation();
-				this.copyToClipboard(prettyEvent, event.id);
+				this.copyToClipboard(prettyEvent, event.id, e);
 			}}
                               >
                                 ${this.copiedEvents.has(event.id) ? html`
@@ -8896,7 +9170,7 @@ ${prettyEvent}</pre
 			if (previousMenu !== "memories" && !this.core?.telemetryDisabled) trackMemoriesTabClicked(this.getMemoriesTelemetryProps());
 		}
 		if (key === "ag-ui-events" || key === "agents") requestAnimationFrame(() => {
-			const scroller = this.shadowRoot?.getElementById("cpk-main-scroll");
+			const scroller = this.activeRoot.querySelector("#cpk-main-scroll");
 			if (scroller) scroller.scrollTop = 0;
 		});
 		this.contextMenuOpen = false;
@@ -9401,7 +9675,7 @@ ${prettyEvent}</pre
                     class="cpk-copy-btn"
                     @click=${(e) => {
 			e.stopPropagation();
-			this.copyContextValue(id, `${id}:id`);
+			this.copyContextValue(id, `${id}:id`, e);
 		}}
                   >
                     ${this.copiedContextItems.has(`${id}:id`) ? "✓" : "Copy"}
@@ -9417,7 +9691,7 @@ ${prettyEvent}</pre
                           class="cpk-copy-btn"
                           @click=${(e) => {
 			e.stopPropagation();
-			this.copyContextValue(context.value, id);
+			this.copyContextValue(context.value, id, e);
 		}}
                         >
                           ${this.copiedContextItems.has(id) ? "Copied" : "Copy JSON"}
@@ -9471,14 +9745,15 @@ ${prettyEvent}</pre
 			return String(value);
 		}
 	}
-	async copyContextValue(value, contextId) {
-		if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
+	async copyContextValue(value, contextId, event) {
+		const clipboard = this.getClipboard(event);
+		if (!clipboard?.writeText) {
 			console.warn("Clipboard API is not available in this environment.");
 			return;
 		}
 		const serialized = this.formatContextValue(value);
 		try {
-			await navigator.clipboard.writeText(serialized);
+			await clipboard.writeText(serialized);
 			this.copiedContextItems.add(contextId);
 			this.requestUpdate();
 			setTimeout(() => {
@@ -9494,8 +9769,9 @@ ${prettyEvent}</pre
 		else this.expandedContextItems.add(contextId);
 		this.requestUpdate();
 	}
-	toggleRowExpansion(eventId) {
-		const selection = window.getSelection();
+	toggleRowExpansion(eventId, event) {
+		const target = event?.currentTarget;
+		const selection = (target && "ownerDocument" in target ? target.ownerDocument : this.ownerDocument)?.getSelection();
 		if (selection && selection.toString().length > 0) return;
 		if (this.expandedRows.has(eventId)) this.expandedRows.delete(eventId);
 		else this.expandedRows.add(eventId);