@copilotkit/web-inspector 1.69.3 → 1.70.0

package/dist/index.mjs

@@ -8,7 +8,8 @@ import { projectInspectorMetadata } from "./lib/inspector-metadata.mjs";
 import { buildHomeModel, runtimeConnectionNeedsAttention } from "./lib/home-briefing.mjs";
 import { INSPECTOR_GROUPS, INSPECTOR_NAV_SECTIONS, getGroupForMenu, isInspectorMenuKey, shouldUseIconRail } from "./lib/inspector-nav.mjs";
 import { selectVisibleRealThreadId } from "./lib/thread-selection.mjs";
-import { TELEMETRY_DOCS_URL, ensureTelemetryDistinctId, getRuntimeUrlType, getTelemetryDistinctIdForUrl, maybeShowDisclosure, trackErrorSignalViewed, trackHomeCtaClicked, trackHomeViewed, trackInspectorOpened, trackMemoriesTabClicked, trackMetadataActionClicked, trackMetadataModuleViewed, trackTalkToEngineerClicked, trackThreadsEmptyEnabledViewed, trackThreadsEnabledViewed, trackThreadsExampleSelected, trackThreadsExampleTourCompleted, trackThreadsExampleTourDismissed, trackThreadsExampleTourReopened, trackThreadsExampleTourStarted, trackThreadsExampleTourStepViewed, trackThreadsExampleViewed, trackThreadsIntelligenceSignupClicked, trackThreadsLockedViewed, trackThreadsTabClicked, trackThreadsTalkToEngineerClicked, trackWhatsNewClicked, trackWhatsNewSignalViewed, trackWhatsNewViewed } from "./lib/telemetry.mjs";
+import { TELEMETRY_DOCS_URL, ensureTelemetryDistinctId, getRuntimeUrlType, getTelemetryDistinctIdForUrl, maybeShowDisclosure, trackErrorSignalViewed, trackHomeCtaClicked, trackHomePromptCopied, trackHomeStoryBeatSelected, trackHomeViewed, trackInspectorOpened, trackMemoriesTabClicked, trackMetadataActionClicked, trackMetadataModuleViewed, trackTalkToEngineerClicked, trackThreadsEmptyEnabledViewed, trackThreadsEnabledViewed, trackThreadsExampleSelected, trackThreadsExampleTourCompleted, trackThreadsExampleTourDismissed, trackThreadsExampleTourReopened, trackThreadsExampleTourStarted, trackThreadsExampleTourStepViewed, trackThreadsExampleViewed, trackThreadsIntelligenceSignupClicked, trackThreadsLockedViewed, trackThreadsTabClicked, trackThreadsTalkToEngineerClicked, trackThreadsTryFromHereClicked, trackWhatsNewClicked, trackWhatsNewSignalViewed, trackWhatsNewViewed } from "./lib/telemetry.mjs";
+import { createOnboardingPrompt, createOnboardingRunId } from "./lib/onboarding-prompt.mjs";
 import { LitElement, css, html, nothing, render, unsafeCSS } from "lit";
 import { marked } from "marked";
 import { styleMap } from "lit/directives/style-map.js";
@@ -296,6 +297,108 @@ const THREADS_RUNTIME_SETUP_PROMPT = [
 	"Start the app and verify GET {basePath}/info reports threadEndpoints.list, inspect, mutations, and realtimeMetadata as true. Run focused tests, lint, and typecheck. Report the files changed, commands run, and verification result. If blocked, explain the missing input; do not invent setup."
 ].join("\n");
 const SELF_HOSTED_INTELLIGENCE_URL = "https://docs.copilotkit.ai/premium/self-hosting";
+const INTELLIGENCE_STORY_BEATS = [
+	{
+		id: "threads",
+		label: "Threads",
+		duration: 6500,
+		lead: "You only see this session. Your users have all the others.",
+		support: "Rich Threads keep every conversation and its state, so you can open the one that broke instead of reproducing it."
+	},
+	{
+		id: "learning",
+		label: "Learning",
+		duration: 6e3,
+		lead: "Your users already told you what to fix.",
+		support: "Learning reads the runs behind those threads and finds the patterns — every Insight linked to the messages that back it."
+	},
+	{
+		id: "skill",
+		label: "Skills",
+		duration: 5500,
+		lead: "An Insight becomes a skill you own.",
+		support: "A SKILL.md built from that evidence — yours to review, edit and ship with your project."
+	},
+	{
+		id: "intelligence",
+		label: "Intelligence",
+		duration: 6e3,
+		lead: "Every round of real use leaves your agent better.",
+		support: "Approve a skill, pull it into your project, and the next run starts from what already worked."
+	}
+];
+/**
+* The threads the first beat shows.
+*
+* One of them failed, because that is the row a developer actually wants and
+* the reason durable threads are worth paying for. It is a user's thread that
+* went wrong, not a demo of our agent failing — the distinction matters for a
+* card that has to argue for the product.
+*/
+const INTELLIGENCE_STORY_THREADS = [
+	{
+		title: "Reschedule the Tuesday sync",
+		meta: "2 min ago",
+		failed: false
+	},
+	{
+		title: "Book time with the design team",
+		meta: "18 min ago",
+		failed: false
+	},
+	{
+		title: "Booked the wrong slot",
+		meta: "Needs a look",
+		failed: true
+	}
+];
+/** The three rules the story derives, shown verbatim across all three beats. */
+const INTELLIGENCE_STORY_RULES = [
+	"Check both calendars.",
+	"Propose several times.",
+	"Ask before booking."
+];
+/**
+* The raw thread signals the first beat collapses into those rules.
+*
+* Kept at real-message length and varied on purpose — these have to read as
+* things people actually typed, not as three tidy bullet points. The longest
+* one truncates in a narrow panel, which is honest: it is an excerpt.
+*/
+const INTELLIGENCE_STORY_SIGNALS = [
+	"Check our calendars and find a time for both of us.",
+	"Could you share a few options?",
+	"Ask me before you book it."
+];
+const INTELLIGENCE_STORY_SKILL_FILE = "meeting-scheduling/SKILL.md";
+/**
+* How long the copied confirmation stands before the button invites a second
+* press. Longer than the 2s the Threads setup prompt uses, because this state
+* also carries an instruction that has to be read, not just an acknowledgement.
+*/
+const PROMPT_COPY_RESET_MS = 4e3;
+const INTELLIGENCE_STORY_CHAIN = [
+	{
+		icon: "MessagesSquare",
+		name: "Threads",
+		detail: "Every conversation"
+	},
+	{
+		icon: "Lightbulb",
+		name: "Insights",
+		detail: "Backed by evidence"
+	},
+	{
+		icon: "FileText",
+		name: "Skills",
+		detail: "You approve"
+	},
+	{
+		icon: "Wand2",
+		name: "Your agent",
+		detail: "Starts from what worked"
+	}
+];
 const THREADS_EXAMPLE_OVERVIEW_VIDEO_URL = "https://cdn.copilotkit.ai/corp-site/videos/copilotkit-generative-ui-agentic-frontend-demo.webm";
 const THREADS_EXAMPLE_OVERVIEW_VIDEO_FALLBACK = "The demo video is unavailable. Use the example threads to explore Messages, AG-UI Events, and State.";
 const THREADS_EXAMPLE_TOUR_STORAGE_KEY = "cpk:inspector:threads-example-tour:v1";
@@ -1105,6 +1208,9 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		this.viewInAppError = null;
 		this.focusMessageId = null;
 		this.focusRequestId = 0;
+		this.tryFromHereAvailable = false;
+		this.tryFromHereBusy = false;
+		this.tryFromHereError = null;
 		this._tab = "timeline";
 		this._fetchedMetadata = null;
 		this._conversation = [];
@@ -1164,6 +1270,15 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			if (target.hasPointerCapture(this._dividerPointerId)) target.releasePointerCapture(this._dividerPointerId);
 			this._dividerResizing = false;
 		};
+		this.onTryFromHere = (event) => {
+			event.preventDefault();
+			if (!this.tryFromHereAvailable || this.tryFromHereBusy) return;
+			this.dispatchEvent(new CustomEvent("tryFromHere", {
+				detail: this.threadId,
+				bubbles: true,
+				composed: true
+			}));
+		};
 	}
 	static {
 		this.properties = {
@@ -1181,6 +1296,9 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			viewInAppError: { attribute: false },
 			focusMessageId: { attribute: false },
 			focusRequestId: { attribute: false },
+			tryFromHereAvailable: { attribute: false },
+			tryFromHereBusy: { attribute: false },
+			tryFromHereError: { attribute: false },
 			_tab: { state: true },
 			_fetchedMetadata: { state: true },
 			_conversation: { state: true },
@@ -1257,7 +1375,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		return JSON.stringify(Object.entries(headers).sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey)));
 	}
 	renderTabContent(id) {
-		if (id === "timeline") return this.renderTimeline();
+		if (id === "timeline") return this.withMessagesToolbar(this.renderTimeline());
 		if (id === "state") return this.renderState();
 		return this.renderEvents();
 	}
@@ -1572,6 +1690,55 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       }
     }
 
+    .cpk-td__try-from-here {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      margin-inline-start: auto;
+      padding: 6px 10px;
+      border: 1px solid #dbdbe5;
+      border-radius: 8px;
+      background: #ffffff;
+      color: #36363a;
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 11px;
+      font-weight: 600;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+
+    .cpk-td__try-from-here-icon {
+      display: block;
+      flex-shrink: 0;
+    }
+
+    :host([dir="rtl"]) .cpk-td__try-from-here-icon {
+      scale: -1 1;
+    }
+
+    .cpk-td__try-from-here:hover:not(:disabled) {
+      border-color: rgba(85, 88, 178, 0.38);
+      background: #f7f7ff;
+      color: #010507;
+    }
+
+    .cpk-td__try-from-here:focus-visible {
+      outline: 2px solid #a78bfa;
+      outline-offset: 1px;
+    }
+
+    .cpk-td__try-from-here:disabled {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+
+    .cpk-td__try-from-here-error {
+      flex-basis: 100%;
+      color: #c0333a;
+      font-size: 11px;
+      line-height: 1.4;
+    }
+
     /*
      * Each tab's content is wrapped in this panel so the keep-mounted
      * inactive panels can be hidden via display:none without disturbing
@@ -1956,6 +2123,8 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 
     .cpk-td__timeline-toolbar {
       display: flex;
+      flex-wrap: wrap;
+      align-items: center;
       gap: 6px;
     }
 
@@ -2298,6 +2467,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
     :host([data-color-scheme="dark"]) .cpk-td__panel-toggle,
     :host([data-color-scheme="dark"]) .cpk-td__metadata-strip,
     :host([data-color-scheme="dark"]) .cpk-td__metadata-pill,
+    :host([data-color-scheme="dark"]) .cpk-td__try-from-here,
     :host([data-color-scheme="dark"]) .cpk-td__tool-block,
     :host([data-color-scheme="dark"]) .cpk-td__tool-header,
     :host([data-color-scheme="dark"]) .cpk-td__tool-body,
@@ -2315,6 +2485,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
     }
 
     :host([data-color-scheme="dark"]) .cpk-td__metadata-pill,
+    :host([data-color-scheme="dark"]) .cpk-td__try-from-here,
     :host([data-color-scheme="dark"]) .cpk-td__bubble-inner--assistant,
     :host([data-color-scheme="dark"]) .cpk-td__tool-block,
     :host([data-color-scheme="dark"]) .cpk-td__event,
@@ -2473,6 +2644,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
     :host([data-color-scheme="dark"]) .cpk-td__timeline-title,
     :host([data-color-scheme="dark"]) .cpk-td__timeline-bulk-toggle,
     :host([data-color-scheme="dark"]) .cpk-td__timeline-details-toggle,
+    :host([data-color-scheme="dark"]) .cpk-td__try-from-here,
     :host([data-color-scheme="dark"]) .cpk-tdp__value {
       color: #f3f4f8;
     }
@@ -3405,15 +3577,55 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
         ${isStop ? "Stop viewing" : "View in your app"}
       </button>
       ${this.viewInAppError ? html`<span class="cpk-td__view-in-app-error" role="alert"
-              >${this.viewInAppError}</span
-            >` : nothing}
+            >${this.viewInAppError}</span
+          >` : nothing}
+    `;
+	}
+	renderTryFromHereControl() {
+		if (!this.tryFromHereAvailable) return nothing;
+		return html`
+      <button
+        type="button"
+        class="cpk-td__try-from-here"
+        aria-label="Try from here"
+        ?disabled=${this.tryFromHereBusy}
+        @click=${this.onTryFromHere}
+      >
+        ${this.tryFromHereBusy ? "Loading…" : "Try from here"}
+        <svg
+          class="cpk-td__try-from-here-icon"
+          aria-hidden="true"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M7 7h10v10" />
+          <path d="M7 17 17 7" />
+        </svg>
+      </button>
+      ${this.tryFromHereError ? html`<span class="cpk-td__try-from-here-error" role="alert"
+            >${this.tryFromHereError}</span
+          >` : nothing}
     `;
 	}
 	renderTimelineBulkControls() {
+		const bulk = this.renderTimelineBulkButtons();
+		const tryFromHere = this.renderTryFromHereControl();
+		if (bulk === nothing && tryFromHere === nothing) return nothing;
+		return html`<div class="cpk-td__timeline-toolbar">
+      ${bulk}${tryFromHere}
+    </div>`;
+	}
+	renderTimelineBulkButtons() {
 		if (this._eventsNotAvailable) return nothing;
 		const detailIds = this.timelineItemsForEvents(this.activeEvents).filter((item) => item.details).map((item) => item.id);
 		if (detailIds.length <= 1) return nothing;
-		return html`<div class="cpk-td__timeline-toolbar">
+		return html`
       <button
         type="button"
         class="cpk-td__timeline-bulk-toggle"
@@ -3430,7 +3642,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       >
         Collapse all
       </button>
-    </div>`;
+    `;
 	}
 	renderRawEventBulkControls() {
 		const eventIds = this.activeEvents.map((event) => this.rawEventId(event));
@@ -3462,6 +3674,9 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			(this.shadowRoot?.querySelector(`[data-source-index="${sourceIndex}"]`))?.scrollIntoView?.({ block: "center" });
 		});
 	}
+	withMessagesToolbar(content) {
+		return html`${this.renderTimelineBulkControls()}${content}`;
+	}
 	renderTimeline() {
 		if (this._loadingEvents) return html`
         <div class="cpk-td__status">Loading timeline…</div>
@@ -3509,7 +3724,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			this._conversation,
 			this.agentMessagesInput,
 			this._expandedTimelineDetails
-		], () => html`${this.renderTimelineBulkControls()}${timelineItems.map((item) => this.renderTimelineItem(item))}`);
+		], () => html`${timelineItems.map((item) => this.renderTimelineItem(item))}`);
 	}
 	timelineItemClass(item) {
 		const classes = ["cpk-td__timeline-item", `cpk-td__timeline-item--${item.kind}`];
@@ -3534,14 +3749,14 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
           >
           <span class="cpk-td__timeline-title">${item.title}</span>
           ${item.sourceIndex ? html`
-                  <button
-                    type="button"
-                    class="cpk-td__source-link"
-                    @click=${() => this.revealSourceEvent(item.sourceIndex)}
-                  >
-                    Source event #${item.sourceIndex}
-                  </button>
-                ` : nothing}
+                <button
+                  type="button"
+                  class="cpk-td__source-link"
+                  @click=${() => this.revealSourceEvent(item.sourceIndex)}
+                >
+                  Source event #${item.sourceIndex}
+                </button>
+              ` : nothing}
           <span class="cpk-td__timeline-time"
             >${formatTimestamp(item.timestamp)}</span
           >
@@ -3835,54 +4050,54 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 				const eventId = this.rawEventId(event);
 				const detailsExpanded = this._expandedRawEvents.has(eventId);
 				return html`
-            <div
-              class="cpk-td__event cpk-td__event--${eventCategory(event.type)}"
-              data-source-index=${event.sourceIndex}
-            >
-              <div class="cpk-td__event-header">
-                <span class="cpk-td__event-type" title=${event.type}
-                  >${humanizeEventType(event.type)}</span
-                >
-                <span class="cpk-td__event-time"
-                  >${formatTimestamp(event.timestamp)}</span
-                >
-              </div>
-              <button
-                type="button"
-                class="cpk-td__timeline-details-toggle"
-                aria-expanded=${detailsExpanded ? "true" : "false"}
-                @click=${() => this.toggleRawEventDetails(eventId)}
+              <div
+                class="cpk-td__event cpk-td__event--${eventCategory(event.type)}"
+                data-source-index=${event.sourceIndex}
               >
-                ${detailsExpanded ? html`
-                        <svg
-                          aria-hidden="true"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                        >
-                          <path d="m6 9 6 6 6-6" />
-                        </svg>
-                      ` : html`
-                        <svg
-                          aria-hidden="true"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                        >
-                          <path d="m9 18 6-6-6-6" />
-                        </svg>
-                      `}
-                <span
-                  >${detailsExpanded ? "Hide details" : "Show details"}</span
+                <div class="cpk-td__event-header">
+                  <span class="cpk-td__event-type" title=${event.type}
+                    >${humanizeEventType(event.type)}</span
+                  >
+                  <span class="cpk-td__event-time"
+                    >${formatTimestamp(event.timestamp)}</span
+                  >
+                </div>
+                <button
+                  type="button"
+                  class="cpk-td__timeline-details-toggle"
+                  aria-expanded=${detailsExpanded ? "true" : "false"}
+                  @click=${() => this.toggleRawEventDetails(eventId)}
                 >
-              </button>
-              ${detailsExpanded ? renderHighlightedJsonBlock(event.rawEvent ?? event) : nothing}
-            </div>
-          `;
+                  ${detailsExpanded ? html`
+                          <svg
+                            aria-hidden="true"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          >
+                            <path d="m6 9 6 6 6-6" />
+                          </svg>
+                        ` : html`
+                          <svg
+                            aria-hidden="true"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          >
+                            <path d="m9 18 6-6-6-6" />
+                          </svg>
+                        `}
+                  <span
+                    >${detailsExpanded ? "Hide details" : "Show details"}</span
+                  >
+                </button>
+                ${detailsExpanded ? renderHighlightedJsonBlock(event.rawEvent ?? event) : nothing}
+              </div>
+            `;
 			})}`;
 		});
 	}
@@ -4691,6 +4906,13 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.systemColorSchemeMediaQuery = null;
 		this.briefingRestoreMenu = null;
 		this.homeViewedThisOpen = false;
+		this.onboardingRunId = null;
+		this.promptCopyState = "idle";
+		this.promptCopyResetTimer = null;
+		this.intelStoryBeat = 0;
+		this.intelStoryUserPinned = false;
+		this.intelStoryTimer = null;
+		this.intelStoryReducedMotion = null;
 		this.hasResolvedCore = false;
 		this.settingsOpen = false;
 		this.lastSelectedMenuByGroup = {
@@ -4736,6 +4958,8 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.playgroundError = null;
 		this.playgroundSourceThreadId = null;
 		this.playgroundShowEphemeralNotice = false;
+		this.tryFromHereBusy = false;
+		this.tryFromHereError = null;
 		this.threadCapabilityEnabled = null;
 		this.threadCapabilityGeneration = 0;
 		this.contextMenuOpen = false;
@@ -4976,6 +5200,26 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			this.applyEventErrorLanding(key);
 			this.requestUpdate();
 		};
+		this.handleIntelligencePromptCopy = async (event) => {
+			this.clearIntelligencePromptReset();
+			const runId = this.getOnboardingRunId();
+			const clipboard = this.getClipboard(event);
+			let outcome = "failed";
+			if (clipboard?.writeText) try {
+				await clipboard.writeText(createOnboardingPrompt(runId));
+				outcome = "copied";
+			} catch {
+				outcome = "failed";
+			}
+			if (!this.isConnected) return;
+			this.promptCopyState = outcome;
+			this.requestUpdate();
+			if (outcome === "copied") this.scheduleIntelligencePromptReset();
+			if (!this.core?.telemetryDisabled) trackHomePromptCopied({
+				onboarding_run_id: runId,
+				outcome
+			});
+		};
 		this.handleSystemColorSchemeChange = (event) => {
 			if (this.hasExplicitColorScheme) return;
 			this.colorScheme = event.matches ? "dark" : "light";
@@ -5220,21 +5464,14 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 				this.startPlaygroundSession(false);
 				return;
 			}
-			const core = this._core;
 			const thread = this._threads.find((candidate) => candidate.id === threadId);
-			if (!core?.runtimeUrl || !thread) return;
+			if (!thread) return;
 			this.playgroundIsLoadingThread = true;
 			this.playgroundError = null;
 			this.requestUpdate();
 			try {
-				const baseUrl = core.runtimeUrl.replace(/\/+$/, "");
-				const encodedThreadId = encodeURIComponent(threadId);
-				const [messagesResponse, stateResponse] = await Promise.all([fetch(`${baseUrl}/threads/${encodedThreadId}/messages`, { headers: { ...core.headers } }), fetch(`${baseUrl}/threads/${encodedThreadId}/state`, { headers: { ...core.headers } })]);
-				if (!messagesResponse.ok) throw new Error(`Failed to load thread (HTTP ${messagesResponse.status}).`);
-				const messagesBody = await messagesResponse.json();
-				const stateBody = stateResponse.ok ? await stateResponse.json() : { state: {} };
-				this.startPlaygroundSession(false, this.mapThreadMessagesToPlayground(messagesBody.messages ?? []), stateBody.state ?? {}, thread.agentId);
-				this.playgroundSourceThreadId = threadId;
+				const snapshot = await this.loadThreadSnapshot(thread);
+				this.applyThreadSnapshotToPlayground(thread, snapshot);
 			} catch (error) {
 				this.playgroundError = error instanceof Error ? error.message : "Failed to load thread.";
 			} finally {
@@ -5242,6 +5479,35 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 				this.requestUpdate();
 			}
 		};
+		this.handleTryFromHere = async (threadId) => {
+			if (!threadId || this.tryFromHereBusy) return;
+			const thread = this._threads.find((candidate) => candidate.id === threadId) ?? null;
+			if (!thread) return;
+			this.tryFromHereBusy = true;
+			this.tryFromHereError = null;
+			this.requestUpdate();
+			const isCurrentTryFromHereRequest = () => this.selectedThreadId === threadId && this.selectedMenu === "threads";
+			try {
+				const snapshot = await this.loadThreadSnapshot(thread);
+				if (isCurrentTryFromHereRequest()) {
+					this.applyThreadSnapshotToPlayground(thread, snapshot);
+					this.handleMenuSelect("playground");
+				}
+				if (!this.core?.telemetryDisabled) trackThreadsTryFromHereClicked({
+					...this.getThreadsTelemetryProps(),
+					outcome: "success"
+				});
+			} catch (error) {
+				if (isCurrentTryFromHereRequest()) this.tryFromHereError = error instanceof Error ? error.message : "Failed to load thread.";
+				if (!this.core?.telemetryDisabled) trackThreadsTryFromHereClicked({
+					...this.getThreadsTelemetryProps(),
+					outcome: "failure"
+				});
+			} finally {
+				this.tryFromHereBusy = false;
+				this.requestUpdate();
+			}
+		};
 		this.runPlaygroundAgent = async () => {
 			const core = this._core;
 			const agent = this.playgroundAgent;
@@ -5892,7 +6158,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		if (this.core?.getThreadStore(agentId)) return;
 		const core = this.core;
 		if (!core?.runtimeUrl) return;
-		const store = ɵcreateThreadStore({ fetch: globalThis.fetch });
+		const store = ɵcreateThreadStore({ fetch: typeof core.ɵruntimeFetch === "function" ? core.ɵruntimeFetch : globalThis.fetch });
 		store.start();
 		store.setContext({
 			runtimeUrl: core.runtimeUrl,
@@ -6603,7 +6869,9 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
                 <span>${functionName}${isFailedCall ? " failed" : ""}</span>
                 <span class="text-[10px] text-gray-600">ID: ${callId}</span>
               </div>
-              ${isFailedCall && toolError?.message ? html`<p class="mt-2 break-words leading-relaxed text-gray-800">
+              ${isFailedCall && toolError?.message ? html`<p
+                    class="mt-2 break-words leading-relaxed text-gray-800"
+                  >
                     ${toolError.message}
                   </p>` : nothing}
               ${argsString ? html`<div class="mt-2">
@@ -6832,13 +7100,15 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 
       .cpk-playground-composer {
         border: 1px solid #dcdce8;
-        box-shadow: 0 8px 22px rgba(31, 23, 57, 0.08),
+        box-shadow:
+          0 8px 22px rgba(31, 23, 57, 0.08),
           0 1px 2px rgba(31, 23, 57, 0.1);
       }
 
       .cpk-playground-composer:focus-within {
         border-color: #aaa4d4;
-        box-shadow: 0 10px 26px rgba(86, 53, 155, 0.13),
+        box-shadow:
+          0 10px 26px rgba(86, 53, 155, 0.13),
           0 0 0 3px rgba(190, 194, 255, 0.3);
       }
 
@@ -6855,20 +7125,22 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
       .inspector-window[data-color-scheme="dark"] .cpk-playground-composer {
         border-color: #464957;
         background: #15171e !important;
-        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26),
+        box-shadow:
+          0 8px 22px rgba(0, 0, 0, 0.26),
           0 1px 2px rgba(0, 0, 0, 0.36);
       }
 
       .inspector-window[data-color-scheme="dark"]
         .cpk-playground-composer:focus-within {
         border-color: #777aae;
-        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34),
+        box-shadow:
+          0 10px 26px rgba(0, 0, 0, 0.34),
           0 0 0 3px rgba(102, 106, 158, 0.3);
       }
 
       .cpk-playground-message-enter {
-        animation: cpk-playground-message-enter 0.24s cubic-bezier(0.16, 1, 0.3, 1)
-          both;
+        animation: cpk-playground-message-enter 0.24s
+          cubic-bezier(0.16, 1, 0.3, 1) both;
       }
 
       .cpk-playground-thinking-dot {
@@ -6887,8 +7159,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
         display: none;
       }
 
-      .cpk-playground-reasoning[open]
-        .cpk-playground-reasoning-chevron {
+      .cpk-playground-reasoning[open] .cpk-playground-reasoning-chevron {
         transform: rotate(90deg);
       }
 
@@ -7934,8 +8205,10 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
       }
 
       .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__row:hover,
-      .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__row:focus-within,
-      .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__row[data-cpk-hud-help="open"] {
+      .cpk-launcher-hud[data-color-scheme="light"]
+        .cpk-launcher-hud__row:focus-within,
+      .cpk-launcher-hud[data-color-scheme="light"]
+        .cpk-launcher-hud__row[data-cpk-hud-help="open"] {
         background: #f0f0f4;
       }
 
@@ -8039,7 +8312,8 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 
       .cpk-launcher-hud__row:hover .cpk-launcher-hud__detail,
       .cpk-launcher-hud__row:focus-within .cpk-launcher-hud__detail,
-      .cpk-launcher-hud__row[data-cpk-hud-help="open"] .cpk-launcher-hud__detail {
+      .cpk-launcher-hud__row[data-cpk-hud-help="open"]
+        .cpk-launcher-hud__detail {
         max-height: 72px;
         padding: 0 8px 7px;
         opacity: 1;
@@ -8114,8 +8388,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
       }
 
       .cpk-launcher-hud[data-cpk-hud-intro="true"] {
-        animation: cpk-launcher-hud-intro
-          var(--cpk-launcher-hud-intro-duration)
+        animation: cpk-launcher-hud-intro var(--cpk-launcher-hud-intro-duration)
           cubic-bezier(0.16, 1, 0.3, 1) both;
       }
 
@@ -8123,16 +8396,14 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
         animation-name: cpk-launcher-hud-intro-right;
       }
 
-      .cpk-launcher-hud[data-cpk-hud-intro="true"]
-        .cpk-launcher-hud__row {
+      .cpk-launcher-hud[data-cpk-hud-intro="true"] .cpk-launcher-hud__row {
         animation: cpk-launcher-hud-row-online
-          var(--cpk-launcher-hud-row-duration)
-          cubic-bezier(0.16, 1, 0.3, 1) both;
+          var(--cpk-launcher-hud-row-duration) cubic-bezier(0.16, 1, 0.3, 1)
+          both;
         animation-delay: var(--cpk-hud-row-delay);
       }
 
-      .cpk-launcher-hud[data-cpk-hud-intro="true"]
-        .cpk-launcher-hud__check {
+      .cpk-launcher-hud[data-cpk-hud-intro="true"] .cpk-launcher-hud__check {
         animation: cpk-launcher-hud-check-online 220ms
           cubic-bezier(0.16, 1, 0.3, 1) both;
         animation-delay: calc(var(--cpk-hud-row-delay) + 90ms);
@@ -8140,10 +8411,8 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 
       @media (prefers-reduced-motion: reduce) {
         .cpk-launcher-hud[data-cpk-hud-intro="true"],
-        .cpk-launcher-hud[data-cpk-hud-intro="true"]
-          .cpk-launcher-hud__row,
-        .cpk-launcher-hud[data-cpk-hud-intro="true"]
-          .cpk-launcher-hud__check {
+        .cpk-launcher-hud[data-cpk-hud-intro="true"] .cpk-launcher-hud__row,
+        .cpk-launcher-hud[data-cpk-hud-intro="true"] .cpk-launcher-hud__check {
           animation: none !important;
           opacity: 1;
           transform: none;
@@ -8310,7 +8579,9 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
       .inspector-sidebar[data-icon-rail="true"]
         .inspector-context-dropdown-icon
         svg,
-      .inspector-sidebar[data-icon-rail="true"] .inspector-agent-placeholder svg {
+      .inspector-sidebar[data-icon-rail="true"]
+        .inspector-agent-placeholder
+        svg {
         width: 18px !important;
         height: 18px !important;
         overflow: visible !important;
@@ -8586,6 +8857,8 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		}
 		this.clearIconRailContextCloseTimer();
 		this.unsubscribeFromInspectorThreadBridge();
+		this.stopIntelligenceStory();
+		this.clearIntelligencePromptReset();
 		this.threadsSetupPromptCopyGeneration += 1;
 		if (this.threadsSetupPromptCopyResetTimeoutId !== null) {
 			window.clearTimeout(this.threadsSetupPromptCopyResetTimeoutId);
@@ -8655,6 +8928,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.maybeCompleteEventErrorView();
 		this.flushErrorLandingScroll();
 		this.maybeTrackHomeViewed();
+		this.syncIntelligenceStory();
 		if (!this.isOpen) {
 			this.lastScrolledAgentNavigationLayout = null;
 			return;
@@ -9083,12 +9357,12 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
                       </span>
                       <span class="inspector-nav-label">${item.label}</span>
                       ${marker ? html`
-                              <span
-                                class="inspector-nav-signal-dot"
-                                data-cpk-signal-tone=${marker.tone}
-                                aria-hidden="true"
-                              ></span>
-                            ` : nothing}
+                            <span
+                              class="inspector-nav-signal-dot"
+                              data-cpk-signal-tone=${marker.tone}
+                              aria-hidden="true"
+                            ></span>
+                          ` : nothing}
                     </button>
                   `;
 			})}
@@ -9329,23 +9603,37 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		const connected = model.hero.connection === "connected";
 		const action = model.hero.action;
 		const renewing = action?.kind === "renew";
+		const installing = !connected && !renewing;
 		return html`
       <section
         class="inspector-home-section inspector-intelligence-hud"
         data-inspector-home-card="intelligence"
         data-state=${connected ? "connected" : "disconnected"}
+        data-mode=${connected ? "connected" : renewing ? "renew" : "install"}
         aria-label="Intelligence ${connected ? "connected" : renewing ? "plan expired" : "not enabled"}"
       >
         <header class="inspector-intelligence-hud-header">
           <div class="inspector-intelligence-hud-heading">
             <h2 class="inspector-home-section-title">
+              ${installing ? html`
+                      <img
+                        class="inspector-intelligence-mark"
+                        src=${inspector_logo_kite_default}
+                        alt=""
+                        aria-hidden="true"
+                      />
+                    ` : nothing}
               ${connected ? "Intelligence" : model.hero.title}
             </h2>
-            ${connected ? nothing : html`
-                  <p class="inspector-intelligence-hud-description">
-                    ${model.hero.body}
-                  </p>
-                `}
+            ${connected ? nothing : installing ? html`
+                    <p class="inspector-intelligence-sr-summary">
+                      ${model.hero.body}
+                    </p>
+                  ` : html`
+                    <p class="inspector-intelligence-hud-description">
+                      ${model.hero.body}
+                    </p>
+                  `}
           </div>
           <div class="inspector-intelligence-hud-header-actions">
             ${connected || renewing ? html`
@@ -9357,7 +9645,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
                     ${connected ? "Connected" : "Plan expired"}
                   </span>
                 ` : nothing}
-            ${!connected && action ? html`
+            ${renewing && action ? html`
                   <a
                     class="inspector-intelligence-hud-action inspector-intelligence-hud-connect-action"
                     data-inspector-home-intelligence-action=${action.kind}
@@ -9371,9 +9659,18 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
                     ${action.label} ${this.renderIcon("ArrowUpRight")}
                   </a>
                 ` : nothing}
+            ${installing ? this.renderIntelligenceInstallActions(action) : nothing}
           </div>
         </header>
 
+        ${installing && this.promptCopyState === "failed" ? html`
+                <code
+                  class="inspector-intelligence-install-fallback"
+                  tabindex="0"
+                  >${createOnboardingPrompt(this.getOnboardingRunId())}</code
+                >
+              ` : nothing}
+        ${installing ? this.renderIntelligenceStory() : nothing}
         ${connected ? html`
               <div
                 class="inspector-intelligence-hud-details"
@@ -9675,23 +9972,393 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		if (this.core?.telemetryDisabled) return;
 		trackHomeCtaClicked({ action_kind: action.kind });
 	}
-	maybeTrackHomeViewed() {
-		if (this.selectedMenu !== "home" || this.settingsOpen || !this.isOpen) return;
-		if (!this.homeViewedThisOpen && !this.core?.telemetryDisabled) {
-			this.homeViewedThisOpen = true;
-			trackHomeViewed();
+	/**
+	* The install row: copy the prompt, or fall back to the signup page.
+	*
+	* The prompt is primary and the link is secondary, which is the inversion
+	* this card exists for. Leaving for a signup page is where developers drop
+	* out; pasting into the editor they are already in is not.
+	*
+	* No third-party coding-agent logos here, unlike the Intelligence app. That
+	* app is a private hosted surface; this one is a published npm package
+	* embedded in other people's sites, and shipping Anthropic's and OpenAI's
+	* marks inside it is a trademark call that is not ours to make quietly. The
+	* helper line names the agents in text instead.
+	*/
+	renderIntelligenceInstallActions(action) {
+		const copied = this.promptCopyState === "copied";
+		const failed = this.promptCopyState === "failed";
+		return html`
+      <div
+        class="inspector-intelligence-install"
+        data-copy-state=${this.promptCopyState}
+      >
+        ${this.promptCopyState === "idle" ? action ? html`
+                  <a
+                    class="inspector-intelligence-install-secondary"
+                    data-inspector-home-intelligence-action=${action.kind}
+                    href=${action.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="Set Intelligence up yourself (opens in a new tab)"
+                    style=${INTERACTIVE_FOCUS_BASE_STYLE}
+                    @click=${() => this.handleHomeHeroCta(action)}
+                  >
+                    Set it up yourself ${this.renderIcon("ArrowUpRight")}
+                  </a>
+                ` : nothing : html`
+                <p
+                  class="inspector-intelligence-install-hint"
+                  data-tone=${failed ? "error" : "success"}
+                  role="status"
+                >
+                  ${failed ? "Clipboard blocked — copy the prompt below." : "Paste it into your coding agent."}
+                </p>
+              `}
+        <button
+          type="button"
+          class="inspector-intelligence-hud-action inspector-intelligence-install-copy"
+          data-inspector-intelligence-copy-prompt
+          aria-label=${copied ? "Install prompt copied to clipboard. Paste it into your coding agent." : "Copy the Intelligence install prompt"}
+          style=${INTERACTIVE_FOCUS_BASE_STYLE}
+          @click=${this.handleIntelligencePromptCopy}
+        >
+          ${this.renderIcon(copied ? "Check" : "ClipboardCopy")}
+          ${copied ? "Prompt copied" : "Copy setup prompt"}
+        </button>
+      </div>
+    `;
+	}
+	/** One run id per element lifetime; minted on first use, never rotated. */
+	getOnboardingRunId() {
+		this.onboardingRunId ??= createOnboardingRunId();
+		return this.onboardingRunId;
+	}
+	/**
+	* Return the button and its secondary line to the idle state.
+	*
+	* Long enough to read six words, short enough that a developer who went to
+	* their editor and came back — because the paste went somewhere wrong, or
+	* the terminal is gone — finds a button that plainly invites a second press
+	* rather than a spent one wearing a checkmark.
+	*
+	* Only the copied state resets. A failed copy has the prompt on screen for
+	* manual selection, and yanking that away mid-drag would be worse than the
+	* clipboard failing in the first place.
+	*/
+	scheduleIntelligencePromptReset() {
+		this.clearIntelligencePromptReset();
+		this.promptCopyResetTimer = setTimeout(() => {
+			this.promptCopyResetTimer = null;
+			if (!this.isConnected || this.promptCopyState !== "copied") return;
+			this.promptCopyState = "idle";
+			this.requestUpdate();
+		}, PROMPT_COPY_RESET_MS);
+	}
+	clearIntelligencePromptReset() {
+		if (this.promptCopyResetTimer !== null) {
+			clearTimeout(this.promptCopyResetTimer);
+			this.promptCopyResetTimer = null;
 		}
 	}
-	renderWindow() {
-		const windowState = this.contextState.window;
-		const isDocked = this.dockMode !== "floating";
-		const isPoppedOut = this.isPoppedOut;
-		const isTransitioning = this.hasAttribute("data-transitioning");
-		const disableDrag = isDocked || isPoppedOut;
-		const windowStyles = isPoppedOut ? {
-			position: "fixed",
-			inset: "0",
-			width: "100%",
+	/**
+	* The three-beat Intelligence story.
+	*
+	* Every beat is in the DOM at all times and switched by opacity, so the
+	* strip never reflows and screen readers get one stable structure. The
+	* caption is the live text; the beats themselves are decorative and hidden
+	* from assistive tech, because reading out a mocked code listing helps
+	* nobody.
+	*/
+	/**
+	* The rotating argument, paired to whatever the picture below is showing.
+	*
+	* Hidden from assistive tech: a sentence that replaces itself every few
+	* seconds is noise in a screen reader, so the stable summary above carries
+	* the message there instead. Both sentences are always in the DOM and only
+	* their opacity changes, so the block cannot reflow and the card never jumps
+	* height mid-loop.
+	*/
+	/**
+	* Where a slide sits relative to the one on screen.
+	*
+	* This is what makes the motion agree with the rail: the rail reads left to
+	* right, so a slide that has not been reached yet waits to the right, and one
+	* already passed leaves to the left. Deriving it from the indices rather than
+	* remembering a direction means clicking backwards through the tabs animates
+	* backwards for free, with no state to keep in sync. The loop's wrap from the
+	* last tab to the first therefore reads as a rewind, which is what it is.
+	*/
+	intelligenceSlidePosition(index) {
+		if (index === this.intelStoryBeat) return "active";
+		return index < this.intelStoryBeat ? "before" : "after";
+	}
+	/** Same rule, addressed by beat id, for the picture halves. */
+	intelligenceBeatPosition(beatId) {
+		return this.intelligenceSlidePosition(INTELLIGENCE_STORY_BEATS.findIndex((beat) => beat.id === beatId));
+	}
+	renderIntelligenceStoryCopy() {
+		return html`
+      <div
+        class="inspector-intelligence-copy"
+        data-inspector-intelligence-copy
+        data-beat=${INTELLIGENCE_STORY_BEATS[this.intelStoryBeat]?.id ?? "threads"}
+        aria-hidden="true"
+      >
+        ${INTELLIGENCE_STORY_BEATS.map((beat, index) => html`
+            <div
+              class="inspector-intelligence-copy-slide"
+              data-beat-id=${beat.id}
+              data-active=${index === this.intelStoryBeat}
+              data-position=${this.intelligenceSlidePosition(index)}
+            >
+              <strong>${beat.lead}</strong>
+              <span>${beat.support}</span>
+            </div>
+          `)}
+      </div>
+    `;
+	}
+	renderIntelligenceStory() {
+		return html`
+      <section
+        class="inspector-intelligence-story"
+        data-inspector-intelligence-story
+        data-beat=${INTELLIGENCE_STORY_BEATS[this.intelStoryBeat]?.id ?? "threads"}
+      >
+        ${this.renderIntelligenceStoryCopy()}
+        <div class="inspector-intelligence-story-stage" aria-hidden="true">
+          ${this.renderIntelligenceStoryThreads()}
+          ${this.renderIntelligenceStoryLearning()}
+          ${this.renderIntelligenceStorySkill()}
+          ${this.renderIntelligenceStoryReuse()}
+        </div>
+        <div
+          class="inspector-intelligence-story-rail"
+          role="tablist"
+          aria-label="What Intelligence adds"
+        >
+          ${INTELLIGENCE_STORY_BEATS.map((beat, index) => html`
+              <button
+                type="button"
+                role="tab"
+                class="inspector-intelligence-story-tab"
+                aria-selected=${index === this.intelStoryBeat}
+                data-active=${index === this.intelStoryBeat}
+                style=${INTERACTIVE_FOCUS_BASE_STYLE}
+                @click=${() => this.pinIntelligenceStoryBeat(index)}
+              >
+                ${beat.label}
+              </button>
+            `)}
+        </div>
+      </section>
+    `;
+	}
+	/** Beat 1 — the developer's own users' conversations, one of them broken. */
+	renderIntelligenceStoryThreads() {
+		return html`
+      <div
+        class="inspector-intelligence-beat"
+        data-beat-id="threads"
+        data-position=${this.intelligenceBeatPosition("threads")}
+      >
+        <div class="inspector-intelligence-threads">
+          ${INTELLIGENCE_STORY_THREADS.map((thread, index) => html`
+              <span
+                class="inspector-intelligence-thread"
+                data-failed=${thread.failed}
+                style="--thread-index:${index}"
+              >
+                <i></i>
+                <strong>${thread.title}</strong>
+                <small>${thread.meta}</small>
+              </span>
+            `)}
+        </div>
+      </div>
+    `;
+	}
+	renderIntelligenceStoryLearning() {
+		return html`
+      <div
+        class="inspector-intelligence-beat"
+        data-beat-id="learning"
+        data-position=${this.intelligenceBeatPosition("learning")}
+      >
+        <div class="inspector-intelligence-beat-col">
+          <span class="inspector-intelligence-beat-label">
+            Signals from ${INTELLIGENCE_STORY_SIGNALS.length} threads
+          </span>
+          ${INTELLIGENCE_STORY_SIGNALS.map((signal, index) => html`
+              <span
+                class="inspector-intelligence-signal"
+                style="--signal-index:${index}"
+                >${signal}</span
+              >
+            `)}
+        </div>
+        <div class="inspector-intelligence-beat-flow">
+          ${this.renderIcon("ArrowRight")}
+        </div>
+        <div class="inspector-intelligence-beat-col">
+          <span class="inspector-intelligence-beat-label">
+            Reusable pattern
+          </span>
+          ${INTELLIGENCE_STORY_RULES.map((rule, index) => html`
+              <span
+                class="inspector-intelligence-rule"
+                style="--rule-index:${index}"
+              >
+                <i>${this.renderIcon("Check")}</i>${rule}
+              </span>
+            `)}
+        </div>
+      </div>
+    `;
+	}
+	renderIntelligenceStorySkill() {
+		return html`
+      <div
+        class="inspector-intelligence-beat"
+        data-beat-id="skill"
+        data-position=${this.intelligenceBeatPosition("skill")}
+      >
+        <div class="inspector-intelligence-skill-file">
+          <header>
+            ${this.renderIcon("FileText")}
+            <strong>${INTELLIGENCE_STORY_SKILL_FILE}</strong>
+            <em>Pending review</em>
+          </header>
+          <div class="inspector-intelligence-skill-code">
+            <span data-line="1"><b># Meeting scheduling</b></span>
+            <span data-line="2">When planning a meeting:</span>
+            ${INTELLIGENCE_STORY_RULES.map((rule, index) => html`
+                <span data-line=${index + 3} style="--rule-index:${index}"
+                  >${index + 1}. ${rule}</span
+                >
+              `)}
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	renderIntelligenceStoryReuse() {
+		return html`
+      <div
+        class="inspector-intelligence-beat"
+        data-beat-id="intelligence"
+        data-position=${this.intelligenceBeatPosition("intelligence")}
+      >
+        <div class="inspector-intelligence-chain">
+          ${INTELLIGENCE_STORY_CHAIN.map((step, index) => html`
+              <span
+                class="inspector-intelligence-chain-step"
+                style="--step-index:${index}"
+              >
+                <i>${this.renderIcon(step.icon)}</i>
+                <strong>${step.name}</strong>
+                <small>${step.detail}</small>
+              </span>
+              ${index === INTELLIGENCE_STORY_CHAIN.length - 1 ? nothing : html`
+                    <span
+                      class="inspector-intelligence-chain-arrow"
+                      style="--step-index:${index}"
+                      >${this.renderIcon("ChevronRight")}</span
+                    >
+                  `}
+            `)}
+        </div>
+        <span class="inspector-intelligence-chain-proof">
+          ${this.renderIcon("Sparkles")} Next run starts with
+          <code>${INTELLIGENCE_STORY_SKILL_FILE}</code>
+        </span>
+      </div>
+    `;
+	}
+	/** A press pins that beat and stops the loop; the developer is now driving. */
+	pinIntelligenceStoryBeat(index) {
+		this.intelStoryUserPinned = true;
+		this.intelStoryBeat = index;
+		this.stopIntelligenceStory();
+		this.requestUpdate();
+		if (!this.core?.telemetryDisabled) {
+			const beat = INTELLIGENCE_STORY_BEATS[index];
+			if (beat) trackHomeStoryBeatSelected({
+				beat: beat.id,
+				beat_index: index
+			});
+		}
+	}
+	/**
+	* Advance the story only while it is actually on screen.
+	*
+	* Gated on the panel being open, Home being the visible tab, settings being
+	* closed and the document being visible. Anything less and a debugging tool
+	* would be holding a repeating timer behind a closed panel.
+	*/
+	syncIntelligenceStory() {
+		if (!(this.isOpen && !this.settingsOpen && this.selectedMenu === "home" && !this._core?.intelligence && typeof document !== "undefined" && document.visibilityState !== "hidden")) {
+			this.intelStoryUserPinned = false;
+			this.stopIntelligenceStory();
+			return;
+		}
+		if (this.intelStoryUserPinned || this.prefersReducedMotion()) {
+			this.stopIntelligenceStory();
+			return;
+		}
+		if (this.intelStoryTimer !== null) return;
+		const advance = () => {
+			const current = INTELLIGENCE_STORY_BEATS[this.intelStoryBeat];
+			this.intelStoryTimer = setTimeout(() => {
+				this.intelStoryTimer = null;
+				if (!this.isConnected) return;
+				this.intelStoryBeat = (this.intelStoryBeat + 1) % INTELLIGENCE_STORY_BEATS.length;
+				this.requestUpdate();
+				advance();
+			}, current?.duration ?? 3800);
+		};
+		advance();
+	}
+	stopIntelligenceStory() {
+		if (this.intelStoryTimer !== null) {
+			clearTimeout(this.intelStoryTimer);
+			this.intelStoryTimer = null;
+		}
+	}
+	/**
+	* Reduced motion parks the story on the closing beat.
+	*
+	* That beat is the whole argument in one static frame, so a developer who
+	* asked their OS for less motion still gets the point rather than a
+	* fragment of it.
+	*/
+	prefersReducedMotion() {
+		if (typeof window === "undefined" || !window.matchMedia) return false;
+		this.intelStoryReducedMotion ??= window.matchMedia("(prefers-reduced-motion: reduce)");
+		if (this.intelStoryReducedMotion.matches) {
+			this.intelStoryBeat = INTELLIGENCE_STORY_BEATS.length - 1;
+			return true;
+		}
+		return false;
+	}
+	maybeTrackHomeViewed() {
+		if (this.selectedMenu !== "home" || this.settingsOpen || !this.isOpen) return;
+		if (!this.homeViewedThisOpen && !this.core?.telemetryDisabled) {
+			this.homeViewedThisOpen = true;
+			trackHomeViewed();
+		}
+	}
+	renderWindow() {
+		const windowState = this.contextState.window;
+		const isDocked = this.dockMode !== "floating";
+		const isPoppedOut = this.isPoppedOut;
+		const isTransitioning = this.hasAttribute("data-transitioning");
+		const disableDrag = isDocked || isPoppedOut;
+		const windowStyles = isPoppedOut ? {
+			position: "fixed",
+			inset: "0",
+			width: "100%",
 			height: "100%",
 			minWidth: "0",
 			minHeight: "0",
@@ -10680,6 +11347,24 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		});
 		return mapped;
 	}
+	async loadThreadSnapshot(thread) {
+		const core = this._core;
+		if (!core?.runtimeUrl) throw new Error("Failed to load thread.");
+		const baseUrl = core.runtimeUrl.replace(/\/+$/, "");
+		const encodedThreadId = encodeURIComponent(thread.id);
+		const [messagesResponse, stateResponse] = await Promise.all([fetch(`${baseUrl}/threads/${encodedThreadId}/messages`, { headers: { ...core.headers } }), fetch(`${baseUrl}/threads/${encodedThreadId}/state`, { headers: { ...core.headers } })]);
+		if (!messagesResponse.ok) throw new Error(`Failed to load thread (HTTP ${messagesResponse.status}).`);
+		const messagesBody = await messagesResponse.json();
+		const stateBody = stateResponse.ok ? await stateResponse.json() : { state: {} };
+		return {
+			messages: this.mapThreadMessagesToPlayground(messagesBody.messages ?? []),
+			state: stateBody.state ?? {}
+		};
+	}
+	applyThreadSnapshotToPlayground(thread, snapshot) {
+		this.startPlaygroundSession(false, snapshot.messages, snapshot.state, thread.agentId);
+		this.playgroundSourceThreadId = thread.id;
+	}
 	sendPlaygroundMessage(content) {
 		if (!content || this.playgroundIsRunning || this.playgroundIsLoadingThread) return;
 		const selectedAgentId = this.resolvePlaygroundAgentId(this.selectedContext);
@@ -10703,30 +11388,30 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
         @submit=${this.handlePlaygroundSubmit}
       >
         ${this.playgroundError ? html`<div
-                class="mx-auto mb-2 flex max-w-3xl items-start gap-2 rounded-lg border border-rose-200 bg-rose-50 px-2.5 py-2 text-[10px] text-rose-950"
-                role="alert"
-                data-playground-error
+              class="mx-auto mb-2 flex max-w-3xl items-start gap-2 rounded-lg border border-rose-200 bg-rose-50 px-2.5 py-2 text-[10px] text-rose-950"
+              role="alert"
+              data-playground-error
+            >
+              <span class="mt-0.5 shrink-0"
+                >${this.renderIcon("TriangleAlert")}</span
               >
-                <span class="mt-0.5 shrink-0"
-                  >${this.renderIcon("TriangleAlert")}</span
-                >
-                <div class="min-w-0 flex-1">
-                  <p class="font-semibold">Agent run failed</p>
-                  <p class="mt-0.5 break-words leading-relaxed">
-                    ${this.playgroundError}
-                  </p>
-                </div>
-                ${hasRetry ? html`
-                        <button
-                          type="button"
-                          class="shrink-0 rounded-md border border-rose-200 bg-white px-2 py-1 font-medium text-rose-700 transition hover:bg-rose-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300 focus-visible:ring-offset-1 disabled:opacity-50"
-                          ?disabled=${busy}
-                          @click=${this.handlePlaygroundRetry}
-                        >
-                          Retry
-                        </button>
-                      ` : nothing}
-              </div>` : nothing}
+              <div class="min-w-0 flex-1">
+                <p class="font-semibold">Agent run failed</p>
+                <p class="mt-0.5 break-words leading-relaxed">
+                  ${this.playgroundError}
+                </p>
+              </div>
+              ${hasRetry ? html`
+                    <button
+                      type="button"
+                      class="shrink-0 rounded-md border border-rose-200 bg-white px-2 py-1 font-medium text-rose-700 transition hover:bg-rose-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300 focus-visible:ring-offset-1 disabled:opacity-50"
+                      ?disabled=${busy}
+                      @click=${this.handlePlaygroundRetry}
+                    >
+                      Retry
+                    </button>
+                  ` : nothing}
+            </div>` : nothing}
         <div
           class="cpk-playground-composer mx-auto flex max-w-3xl items-end gap-1.5 rounded-[28px] bg-white px-2.5 py-1.5 shadow-[0_4px_4px_0_#0000000a,0_0_1px_0_#0000009e] transition-shadow duration-200 focus-within:shadow-[0_6px_18px_0_#00000014,0_0_1px_0_#0000009e]"
         >
@@ -10814,31 +11499,41 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
                 class="h-3 w-px shrink-0 bg-gray-200"
                 aria-hidden="true"
               ></span>
-              <span class="truncate" title=${runtimeLabel}>${runtimeLabel}</span>
+              <span class="truncate" title=${runtimeLabel}
+                >${runtimeLabel}</span
+              >
             </div>
           </div>
           <div
             class="cpk-playground-actions ml-auto flex min-w-0 items-center gap-2"
           >
             ${sourceThreads.length > 0 ? html`
-                    <label class="sr-only" for="cpk-playground-thread-source"
-                      >Start from a thread</label
-                    >
-                    <select
-                      id="cpk-playground-thread-source"
-                      class="cpk-playground-thread-select max-w-[200px] rounded-md border border-gray-200 bg-white px-2 py-1 text-[10px] text-gray-700 outline-none transition hover:border-gray-300 focus:border-violet-400 focus:ring-2 focus:ring-violet-100 disabled:cursor-not-allowed disabled:opacity-50"
-                      .value=${this.playgroundSourceThreadId ?? ""}
-                      ?disabled=${busy}
-                      @change=${this.handlePlaygroundThreadSourceChange}
+                  <label class="sr-only" for="cpk-playground-thread-source"
+                    >Start from a thread</label
+                  >
+                  <select
+                    id="cpk-playground-thread-source"
+                    class="cpk-playground-thread-select max-w-[200px] rounded-md border border-gray-200 bg-white px-2 py-1 text-[10px] text-gray-700 outline-none transition hover:border-gray-300 focus:border-violet-400 focus:ring-2 focus:ring-violet-100 disabled:cursor-not-allowed disabled:opacity-50"
+                    .value=${this.playgroundSourceThreadId ?? ""}
+                    ?disabled=${busy}
+                    @change=${this.handlePlaygroundThreadSourceChange}
+                  >
+                    <option
+                      value=""
+                      ?selected=${!this.playgroundSourceThreadId}
                     >
-                      <option value="">Load a thread...</option>
-                      ${sourceThreads.map((thread) => html`
-                          <option value=${thread.id}>
-                            ${thread.name?.trim() || `Thread ${thread.id.slice(0, 8)}`}
-                          </option>
-                        `)}
-                    </select>
-                  ` : nothing}
+                      Load a thread...
+                    </option>
+                    ${sourceThreads.map((thread) => html`
+                        <option
+                          value=${thread.id}
+                          ?selected=${this.playgroundSourceThreadId === thread.id}
+                        >
+                          ${thread.name?.trim() || `Thread ${thread.id.slice(0, 8)}`}
+                        </option>
+                      `)}
+                  </select>
+                ` : nothing}
             <button
               type="button"
               class="inline-flex shrink-0 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:border-gray-300 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&>svg]:h-3.5 [&>svg]:w-3.5"
@@ -10851,67 +11546,66 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
         </header>
 
         ${this.playgroundShowEphemeralNotice && runtimeMode !== "intelligence" ? html`
-                <div
-                  role="alert"
-                  class="mx-3 mt-2 flex items-start gap-2 rounded-lg border border-violet-200 bg-violet-50 px-2.5 py-2 text-[10px] text-violet-950"
-                  data-playground-ephemeral-notice
+              <div
+                role="alert"
+                class="mx-3 mt-2 flex items-start gap-2 rounded-lg border border-violet-200 bg-violet-50 px-2.5 py-2 text-[10px] text-violet-950"
+                data-playground-ephemeral-notice
+              >
+                <span class="mt-0.5 text-violet-600 [&>svg]:h-3.5 [&>svg]:w-3.5"
+                  >${this.renderIcon("Clock3")}</span
                 >
-                  <span
-                    class="mt-0.5 text-violet-600 [&>svg]:h-3.5 [&>svg]:w-3.5"
-                    >${this.renderIcon("Clock3")}</span
-                  >
-                  <p class="min-w-0 flex-1 leading-relaxed">
-                    Scratch threads are ephemeral and will be deleted when your
-                    local session ends. Need durable history?
-                    <a
-                      class="font-semibold underline decoration-violet-300 underline-offset-2 hover:decoration-violet-700 focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-1"
-                      href=${this.getThreadsIntelligenceSignupUrl()}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      >Set up Intelligence</a
-                    >.
-                  </p>
-                  <button
-                    type="button"
-                    class="rounded p-0.5 text-violet-500 transition hover:bg-violet-100 hover:text-violet-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-1"
-                    aria-label="Dismiss ephemeral thread notice"
-                    @click=${() => {
+                <p class="min-w-0 flex-1 leading-relaxed">
+                  Scratch threads are ephemeral and will be deleted when your
+                  local session ends. Need durable history?
+                  <a
+                    class="font-semibold underline decoration-violet-300 underline-offset-2 hover:decoration-violet-700 focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-1"
+                    href=${this.getThreadsIntelligenceSignupUrl()}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    >Set up Intelligence</a
+                  >.
+                </p>
+                <button
+                  type="button"
+                  class="rounded p-0.5 text-violet-500 transition hover:bg-violet-100 hover:text-violet-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-1"
+                  aria-label="Dismiss ephemeral thread notice"
+                  @click=${() => {
 			this.playgroundShowEphemeralNotice = false;
 			this.requestUpdate();
 		}}
-                  >
-                    ${this.renderIcon("X")}
-                  </button>
-                </div>
-              ` : nothing}
+                >
+                  ${this.renderIcon("X")}
+                </button>
+              </div>
+            ` : nothing}
 
         <div
           class="min-h-0 flex-1 overflow-y-auto px-3 py-3"
           data-playground-messages
         >
           ${this.playgroundIsLoadingThread ? html`
+                <div
+                  class="flex h-full items-center justify-center gap-1.5 text-[10px] text-gray-600"
+                >
+                  <span
+                    class="text-gray-500 [&>svg]:animate-spin"
+                    aria-hidden="true"
+                    >${this.renderIcon("LoaderCircle")}</span
+                  >
+                  Loading thread into a scratch session...
+                </div>
+              ` : visibleMessages.length === 0 ? html`
                   <div
-                    class="flex h-full items-center justify-center gap-1.5 text-[10px] text-gray-600"
+                    class="cpk-playground-welcome mx-auto flex h-full w-full flex-col items-center justify-center text-center"
                   >
-                    <span
-                      class="text-gray-500 [&>svg]:animate-spin"
-                      aria-hidden="true"
-                      >${this.renderIcon("LoaderCircle")}</span
-                    >
-                    Loading thread into a scratch session...
+                    <p class="cpk-playground-welcome-title">
+                      How can I help you today?
+                    </p>
+                    ${this.renderPlaygroundComposer(agentId, busy, hasRetry, true)}
                   </div>
-                ` : visibleMessages.length === 0 ? html`
-                    <div
-                      class="cpk-playground-welcome mx-auto flex h-full w-full flex-col items-center justify-center text-center"
-                    >
-                      <p class="cpk-playground-welcome-title">
-                        How can I help you today?
-                      </p>
-                      ${this.renderPlaygroundComposer(agentId, busy, hasRetry, true)}
-                    </div>
-                  ` : html`
-                    <div class="mx-auto flex max-w-3xl flex-col pb-5">
-                      ${visibleMessages.map((message, index) => {
+                ` : html`
+                  <div class="mx-auto flex max-w-3xl flex-col pb-5">
+                    ${visibleMessages.map((message, index) => {
 			const isUser = message.role === "user";
 			const isReasoning = message.role === "reasoning";
 			const isActivity = message.role === "activity";
@@ -10923,152 +11617,156 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 				const durationLabel = duration === void 0 || duration < 1e3 ? "a few seconds" : `${Math.round(duration / 1e3)} seconds`;
 				const label = isStreaming ? "Thinking…" : `Thought for ${durationLabel}`;
 				if (isStreaming) return html`
-                              <section
-                                class="cpk-playground-message-enter my-1 text-[11px] text-gray-500"
+                            <section
+                              class="cpk-playground-message-enter my-1 text-[11px] text-gray-500"
+                              data-playground-message-role="reasoning"
+                            >
+                              <div
+                                class="inline-flex items-center gap-1 py-1 font-medium"
+                              >
+                                <span>${label}</span>
+                                ${content ? nothing : html`
+                                        <span
+                                          class="cpk-playground-thinking-dot ml-1 h-1.5 w-1.5 rounded-full bg-gray-500"
+                                          aria-hidden="true"
+                                        ></span>
+                                      `}
+                              </div>
+                              ${content ? html`<div
+                                    class="pb-2 pt-1 leading-5 text-gray-500"
+                                  >
+                                    ${content}
+                                  </div>` : nothing}
+                            </section>
+                          `;
+				return content ? html`
+                              <details
+                                class="cpk-playground-message-enter cpk-playground-reasoning my-1 text-[11px] text-gray-500"
                                 data-playground-message-role="reasoning"
                               >
-                                <div
-                                  class="inline-flex items-center gap-1 py-1 font-medium"
+                                <summary
+                                  class="inline-flex cursor-pointer list-none items-center gap-1 py-1 font-medium transition-colors hover:text-gray-900 focus-visible:rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300 focus-visible:ring-offset-1"
                                 >
                                   <span>${label}</span>
-                                  ${content ? nothing : html`
-                                          <span
-                                            class="cpk-playground-thinking-dot ml-1 h-1.5 w-1.5 rounded-full bg-gray-500"
-                                            aria-hidden="true"
-                                          ></span>
-                                        `}
+                                  <span
+                                    class="cpk-playground-reasoning-chevron transition-transform duration-200 [&>svg]:h-3 [&>svg]:w-3"
+                                    >${this.renderIcon("ChevronRight")}</span
+                                  >
+                                </summary>
+                                <div class="pb-2 pt-1 leading-5 text-gray-500">
+                                  ${content}
                                 </div>
-                                ${content ? html`<div
-                                        class="pb-2 pt-1 leading-5 text-gray-500"
-                                      >
-                                        ${content}
-                                      </div>` : nothing}
-                              </section>
+                              </details>
+                            ` : html`
+                              <div
+                                class="cpk-playground-message-enter my-1 py-1 text-[11px] font-medium text-gray-500"
+                                data-playground-message-role="reasoning"
+                              >
+                                ${label}
+                              </div>
                             `;
-				return content ? html`
-                                <details
-                                  class="cpk-playground-message-enter cpk-playground-reasoning my-1 text-[11px] text-gray-500"
-                                  data-playground-message-role="reasoning"
+			}
+			const isMultiline = content.includes("\n") || content.length > 72;
+			const copyKey = `playground-message-${message.id ?? index}`;
+			const showToolbar = !isUser && !isActivity && Boolean(content) && !(this.playgroundIsRunning && index === lastAssistantIndex);
+			return html`
+                        <article
+                          class=${isActivity ? "cpk-playground-message-enter mr-auto mt-3 flex max-w-full items-center gap-1.5 rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-1.5 text-[10px] text-gray-600" : isUser ? "cpk-playground-message-enter flex w-full flex-col items-end pt-8" : "cpk-playground-message-enter w-full"}
+                          data-playground-message-role=${message.role}
+                        >
+                          ${isActivity ? html`
+                                <span class="text-gray-500"
+                                  >${this.renderIcon("Activity")}</span
+                                >
+                                <span class="font-medium text-gray-700"
+                                  >Activity</span
                                 >
-                                  <summary
-                                    class="inline-flex cursor-pointer list-none items-center gap-1 py-1 font-medium transition-colors hover:text-gray-900 focus-visible:rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300 focus-visible:ring-offset-1"
+                                <span class="truncate">${content}</span>
+                              ` : isUser ? html`
+                                  <div
+                                    class=${`max-w-[80%] whitespace-pre-wrap break-words rounded-[16px] bg-gray-100 px-3 text-[13px] leading-5 text-gray-900 ${isMultiline ? "py-2.5" : "py-1"}`}
+                                  >
+                                    ${content}
+                                  </div>
+                                ` : html`
+                                  <div
+                                    class="whitespace-pre-wrap break-words py-3 text-[13px] leading-[22px] text-gray-800"
                                   >
-                                    <span>${label}</span>
-                                    <span
-                                      class="cpk-playground-reasoning-chevron transition-transform duration-200 [&>svg]:h-3 [&>svg]:w-3"
-                                      >${this.renderIcon("ChevronRight")}</span
-                                    >
-                                  </summary>
-                                  <div class="pb-2 pt-1 leading-5 text-gray-500">
                                     ${content}
                                   </div>
-                                </details>
-                              ` : html`
+                                `}
+                          ${!isUser && message.toolCalls.length > 0 ? this.renderToolCallDetails(message.toolCalls) : nothing}
+                          ${showToolbar ? html`
                                 <div
-                                  class="cpk-playground-message-enter my-1 py-1 text-[11px] font-medium text-gray-500"
-                                  data-playground-message-role="reasoning"
+                                  class="-ml-1 flex min-h-7 w-full items-center gap-1 bg-transparent"
+                                  data-playground-assistant-toolbar
                                 >
-                                  ${label}
+                                  <button
+                                    type="button"
+                                    class="flex h-7 w-7 items-center justify-center rounded-md text-gray-500 transition hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300 focus-visible:ring-offset-1 [&>svg]:h-3.5 [&>svg]:w-3.5"
+                                    title="Copy message"
+                                    aria-label="Copy message"
+                                    @click=${(event) => this.copyToClipboard(content, copyKey, event)}
+                                  >
+                                    ${this.copiedEvents.has(copyKey) ? this.renderIcon("Check") : this.renderIcon("Copy")}
+                                  </button>
+                                  ${index === lastAssistantIndex && hasRetry && !busy && !this.playgroundError ? html`
+                                        <button
+                                          type="button"
+                                          class="flex h-7 w-7 items-center justify-center rounded-md text-gray-500 transition hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300 focus-visible:ring-offset-1 [&>svg]:h-3.5 [&>svg]:w-3.5"
+                                          title="Retry last prompt"
+                                          aria-label="Retry last prompt"
+                                          @click=${this.handlePlaygroundRetry}
+                                        >
+                                          ${this.renderIcon("RotateCcw")}
+                                        </button>
+                                      ` : nothing}
                                 </div>
-                              `;
-			}
-			const isMultiline = content.includes("\n") || content.length > 72;
-			const copyKey = `playground-message-${message.id ?? index}`;
-			const showToolbar = !isUser && !isActivity && Boolean(content) && !(this.playgroundIsRunning && index === lastAssistantIndex);
-			return html`
-                          <article
-                            class=${isActivity ? "cpk-playground-message-enter mr-auto mt-3 flex max-w-full items-center gap-1.5 rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-1.5 text-[10px] text-gray-600" : isUser ? "cpk-playground-message-enter flex w-full flex-col items-end pt-8" : "cpk-playground-message-enter w-full"}
-                            data-playground-message-role=${message.role}
-                          >
-                            ${isActivity ? html`
-                                    <span class="text-gray-500"
-                                      >${this.renderIcon("Activity")}</span
-                                    >
-                                    <span class="font-medium text-gray-700"
-                                      >Activity</span
-                                    >
-                                    <span class="truncate">${content}</span>
-                                  ` : isUser ? html`
-                                      <div
-                                        class=${`max-w-[80%] whitespace-pre-wrap break-words rounded-[16px] bg-gray-100 px-3 text-[13px] leading-5 text-gray-900 ${isMultiline ? "py-2.5" : "py-1"}`}
-                                      >${content}</div>
-                                    ` : html`
-                                      <div
-                                        class="whitespace-pre-wrap break-words py-3 text-[13px] leading-[22px] text-gray-800"
-                                      >${content}</div>
-                                    `}
-                            ${!isUser && message.toolCalls.length > 0 ? this.renderToolCallDetails(message.toolCalls) : nothing}
-                            ${showToolbar ? html`
-                                    <div
-                                      class="-ml-1 flex min-h-7 w-full items-center gap-1 bg-transparent"
-                                      data-playground-assistant-toolbar
-                                    >
-                                      <button
-                                        type="button"
-                                        class="flex h-7 w-7 items-center justify-center rounded-md text-gray-500 transition hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300 focus-visible:ring-offset-1 [&>svg]:h-3.5 [&>svg]:w-3.5"
-                                        title="Copy message"
-                                        aria-label="Copy message"
-                                        @click=${(event) => this.copyToClipboard(content, copyKey, event)}
-                                      >
-                                        ${this.copiedEvents.has(copyKey) ? this.renderIcon("Check") : this.renderIcon("Copy")}
-                                      </button>
-                                      ${index === lastAssistantIndex && hasRetry && !busy && !this.playgroundError ? html`
-                                              <button
-                                                type="button"
-                                                class="flex h-7 w-7 items-center justify-center rounded-md text-gray-500 transition hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300 focus-visible:ring-offset-1 [&>svg]:h-3.5 [&>svg]:w-3.5"
-                                                title="Retry last prompt"
-                                                aria-label="Retry last prompt"
-                                                @click=${this.handlePlaygroundRetry}
-                                              >
-                                                ${this.renderIcon("RotateCcw")}
-                                              </button>
-                                            ` : nothing}
-                                    </div>
-                                  ` : nothing}
-                          </article>
-                        `;
+                              ` : nothing}
+                        </article>
+                      `;
 		})}
-                      ${this.playgroundIsRunning && lastReasoningIndex < 0 ? html`
-                              <div
-                                class="cpk-playground-message-enter mt-3 flex items-center gap-1 px-1 py-1"
-                                aria-label="Agent is working"
-                              >
-                                <span
-                                  class="cpk-playground-thinking-dot h-1.5 w-1.5 rounded-full bg-gray-500"
-                                ></span>
-                                <span
-                                  class="cpk-playground-thinking-dot h-1.5 w-1.5 rounded-full bg-gray-500"
-                                ></span>
-                                <span
-                                  class="cpk-playground-thinking-dot h-1.5 w-1.5 rounded-full bg-gray-500"
-                                ></span>
-                              </div>
-                            ` : nothing}
-                      ${!busy && lastAssistantIndex >= 0 && suggestions.length > 0 ? html`
-                              <div
-                                class="mt-3 flex flex-wrap items-center gap-1.5"
-                                data-playground-suggestions
-                              >
-                                ${suggestions.map((suggestion) => html`
-                                    <button
-                                      type="button"
-                                      class="inline-flex h-7 items-center gap-1 rounded-full border border-gray-200 bg-white px-2.5 text-[10px] font-medium leading-none text-gray-900 transition-colors hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:text-gray-500"
-                                      ?disabled=${suggestion.isLoading}
-                                      aria-busy=${suggestion.isLoading ? "true" : "false"}
-                                      @click=${() => this.handlePlaygroundSuggestion(suggestion.message)}
-                                    >
-                                      ${suggestion.isLoading ? html`<span
-                                              class="[&>svg]:animate-spin"
-                                              aria-hidden="true"
-                                              >${this.renderIcon("LoaderCircle")}</span
-                                            >` : nothing}
-                                      <span>${suggestion.title}</span>
-                                    </button>
-                                  `)}
-                              </div>
-                            ` : nothing}
-                    </div>
-                  `}
+                    ${this.playgroundIsRunning && lastReasoningIndex < 0 ? html`
+                            <div
+                              class="cpk-playground-message-enter mt-3 flex items-center gap-1 px-1 py-1"
+                              aria-label="Agent is working"
+                            >
+                              <span
+                                class="cpk-playground-thinking-dot h-1.5 w-1.5 rounded-full bg-gray-500"
+                              ></span>
+                              <span
+                                class="cpk-playground-thinking-dot h-1.5 w-1.5 rounded-full bg-gray-500"
+                              ></span>
+                              <span
+                                class="cpk-playground-thinking-dot h-1.5 w-1.5 rounded-full bg-gray-500"
+                              ></span>
+                            </div>
+                          ` : nothing}
+                    ${!busy && lastAssistantIndex >= 0 && suggestions.length > 0 ? html`
+                          <div
+                            class="mt-3 flex flex-wrap items-center gap-1.5"
+                            data-playground-suggestions
+                          >
+                            ${suggestions.map((suggestion) => html`
+                                <button
+                                  type="button"
+                                  class="inline-flex h-7 items-center gap-1 rounded-full border border-gray-200 bg-white px-2.5 text-[10px] font-medium leading-none text-gray-900 transition-colors hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:text-gray-500"
+                                  ?disabled=${suggestion.isLoading}
+                                  aria-busy=${suggestion.isLoading ? "true" : "false"}
+                                  @click=${() => this.handlePlaygroundSuggestion(suggestion.message)}
+                                >
+                                  ${suggestion.isLoading ? html`<span
+                                        class="[&>svg]:animate-spin"
+                                        aria-hidden="true"
+                                        >${this.renderIcon("LoaderCircle")}</span
+                                      >` : nothing}
+                                  <span>${suggestion.title}</span>
+                                </button>
+                              `)}
+                          </div>
+                        ` : nothing}
+                  </div>
+                `}
         </div>
 
         ${showWelcome ? nothing : this.renderPlaygroundComposer(agentId, busy, hasRetry)}
@@ -11455,6 +12153,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			this.requestUpdate();
 			return;
 		}
+		this.tryFromHereError = null;
 		this.selectedThreadId = threadId;
 		if (showingExamples && this.isExampleThreadId(threadId)) {
 			this.selectedRealThreadIsExplicit = false;
@@ -11718,6 +12417,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
           <p class="cpk-threads-overview-copy">
             ${lockedCopy?.description ?? "Take a tour with the example threads in the sidebar. Then, start chatting in your app to create the first real thread."}
           </p>
+          ${locked ? this.renderRuntimeEntitlementDiagnostic(this.getRuntimeEntitlementDiagnostic()) : nothing}
           <div class="cpk-threads-overview-actions">
             ${locked ? html`
                   ${this.inspectorMetadataProjection.licenseState === "valid" ? html`
@@ -11896,6 +12596,74 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		}
 	}
 	/**
+	* Prefer the Runtime's structured entitlement diagnostic and derive a
+	* compatibility diagnostic only when an older Core exposes legacy status.
+	*/
+	getRuntimeEntitlementDiagnostic() {
+		const runtimeEntitlements = this.core?.runtimeEntitlements;
+		if (runtimeEntitlements) return runtimeEntitlements.status === "ready" ? { status: runtimeEntitlements.status } : {
+			status: runtimeEntitlements.status,
+			error: runtimeEntitlements.error
+		};
+		switch (this.core?.licenseStatus) {
+			case "valid": return { status: "ready" };
+			case "expired": return {
+				status: "degraded",
+				error: {
+					code: "legacy_license_expired",
+					message: "Legacy Runtime license has expired.",
+					retryable: false
+				}
+			};
+			case "expiring": return {
+				status: "degraded",
+				error: {
+					code: "legacy_license_expiring",
+					message: "Legacy Runtime license is expiring.",
+					retryable: false
+				}
+			};
+			case "invalid": return {
+				status: "misconfigured",
+				error: {
+					code: "legacy_license_invalid",
+					message: "Legacy Runtime license is invalid.",
+					retryable: false
+				}
+			};
+			case "none":
+			case "unknown": return { status: "unavailable" };
+			default: return null;
+		}
+	}
+	/** Render exact Runtime entitlement correlation details without gating UI. */
+	renderRuntimeEntitlementDiagnostic(diagnostic) {
+		if (!diagnostic) return nothing;
+		return html`
+      <div
+        role="status"
+        data-runtime-entitlement-status=${diagnostic.status}
+        style="
+          margin: -8px auto 18px;
+          max-width: 380px;
+          font-size: 11px;
+          line-height: 1.5;
+          color: #57575b;
+        "
+      >
+        <div style="font-weight: 600;">
+          Runtime entitlement: ${diagnostic.status}
+        </div>
+        ${diagnostic.error ? html`
+              <div>${diagnostic.error.message}</div>
+              <div>Code: ${diagnostic.error.code}</div>
+              ${diagnostic.error.requestId ? html`<div>Request ID: ${diagnostic.error.requestId}</div>` : nothing}
+              ${diagnostic.error.traceId ? html`<div>Trace ID: ${diagnostic.error.traceId}</div>` : nothing}
+            ` : nothing}
+      </div>
+    `;
+	}
+	/**
 	* Renders the realtime-connection indicator in the memory-store header.
 	* Only `"connected"` shows the live (green-dot) state; `"connecting"` shows a
 	* muted amber "reconnecting" and `"unavailable"` a muted grey "offline", so
@@ -12280,6 +13048,12 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
                         .agentStateInput=${this.getLatestStateForAgent(selectedThread.agentId)}
                         .agentEventsInput=${this.agentEvents.get(selectedThread.agentId) ?? []}
                         .agentMessagesInput=${selectedThreadIsLocalExample ? EMPTY_INSPECTOR_MESSAGES : this.getLiveAgentMessagesForThread(selectedThread)}
+                        .tryFromHereAvailable=${!selectedThreadIsLocalExample && this.areThreadEndpointsAvailable() && this._core?.threadEndpoints?.inspect !== false}
+                        .tryFromHereBusy=${this.tryFromHereBusy}
+                        .tryFromHereError=${this.tryFromHereError}
+                        @tryFromHere=${(event) => {
+			this.handleTryFromHere(event.detail);
+		}}
                       ></cpk-thread-details>
                       ${selectedThreadIsLocalExample ? this.renderThreadsExampleTour() : nothing}` : showingExamples ? this.renderThreadsExampleOverview(locked) : html`
                         <div
@@ -12781,9 +13555,10 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
                               </span>
                             </div>
                             <div class="flex-1 px-4 py-2">
-                              ${hasContent ? html`<div
-                                    class="whitespace-pre-wrap break-words text-gray-700"
-                                  >${rawContent}</div>` : html`<div class="italic text-gray-400">
+                              ${hasContent ? html`
+                                    <!-- prettier-ignore -->
+                                    <div class="whitespace-pre-wrap break-words text-gray-700">${rawContent}</div>
+                                  ` : html`<div class="italic text-gray-400">
                                     ${contentFallback}
                                   </div>`}
                               ${role === "assistant" && toolCalls.length > 0 ? this.renderToolCallDetails(toolCalls) : nothing}