@copilotkit/web-inspector 1.69.2 → 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";
@@ -242,6 +243,21 @@ const LAUNCHER_BASE_LABEL = "Web Inspector";
 const EDGE_MARGIN = 16;
 /** HUD card plus the hover bridge. Used to pick left vs right. */
 const LAUNCHER_HUD_WIDTH = 248;
+/**
+* One page-load preview of the launcher's feature HUD.
+*
+* The card arrives after the host page has had a beat to settle. Its four rows
+* then come online in order, stay readable, and leave together. Nothing is
+* persisted: a new Inspector element means a new preview.
+*/
+const LAUNCHER_HUD_INTRO_MS = {
+	delay: 500,
+	duration: 3400,
+	rowStart: 180,
+	rowStagger: 170,
+	rowDuration: 300,
+	blockedRetry: 250
+};
 const DRAG_THRESHOLD = 6;
 const MIN_WINDOW_WIDTH = 880;
 const MIN_WINDOW_WIDTH_DOCKED_LEFT = 640;
@@ -281,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";
@@ -347,6 +465,29 @@ const AGENT_EVENT_TYPES = [
 	"ACTIVITY_SNAPSHOT",
 	"ACTIVITY_DELTA"
 ];
+const EMPTY_INSPECTOR_MESSAGES = [];
+function textFromUnknownContent(content) {
+	if (typeof content === "string") return content;
+	if (Array.isArray(content)) {
+		const parts = [];
+		for (const part of content) {
+			if (typeof part === "string") {
+				parts.push(part);
+				continue;
+			}
+			if (typeof part === "object" && part !== null && "text" in part) {
+				const text = part.text;
+				if (typeof text === "string") parts.push(text);
+			}
+		}
+		return parts.join("");
+	}
+	if (typeof content === "object" && content !== null && "text" in content) {
+		const text = content.text;
+		if (typeof text === "string") return text;
+	}
+	return "";
+}
 /**
 * Map core.tools (the registry INCLUDING disabled tools) into Capabilities-tab
 * frontend-tool rows. Pure: no DOM, no `this`. Reads current on/off state from
@@ -605,13 +746,6 @@ function highlightedJson(obj) {
 		const cached = highlightedJsonCache.get(obj);
 		if (cached !== void 0) return cached;
 	}
-	const colors = {
-		key: "#5558B2",
-		str: "#087653",
-		num: "#8a5900",
-		bool: "#c0333a",
-		nil: "#68686e"
-	};
 	const json = JSON.stringify(obj, null, 2);
 	if (!json) return "";
 	const parts = [];
@@ -621,11 +755,11 @@ function highlightedJson(obj) {
 	while ((match = re.exec(json)) !== null) {
 		parts.push(escapeHtml(json.slice(lastIndex, match.index)));
 		const m = match[0];
-		let color = colors.num;
-		if (m.startsWith("\"")) color = m.trimEnd().endsWith(":") ? colors.key : colors.str;
-		else if (m === "true" || m === "false") color = colors.bool;
-		else if (m === "null") color = colors.nil;
-		parts.push(`<span style="color:${color}">${escapeHtml(m)}</span>`);
+		let token = "num";
+		if (m.startsWith("\"")) token = m.trimEnd().endsWith(":") ? "key" : "str";
+		else if (m === "true" || m === "false") token = "bool";
+		else if (m === "null") token = "nil";
+		parts.push(`<span class="cpk-json-token cpk-json-token--${token}">${escapeHtml(m)}</span>`);
 		lastIndex = match.index + m.length;
 	}
 	parts.push(escapeHtml(json.slice(lastIndex)));
@@ -650,31 +784,23 @@ function renderHighlightedJsonBlock(value, options = {}) {
 ${unsafeHTML(highlightedJson(parsed))}</pre
   >`;
 }
-function eventColors(type) {
-	if (type.startsWith("TEXT_MESSAGE")) return {
-		bg: "#EEE6FE",
-		fg: "#57575B"
-	};
-	if (type.startsWith("TOOL_CALL")) return {
-		bg: "rgba(133,236,206,0.15)",
-		fg: "#087653"
-	};
-	if (type.startsWith("STATE")) return {
-		bg: "rgba(190,194,255,0.102)",
-		fg: "#5558B2"
-	};
-	if (type === "RUN_ERROR" || type === "ERROR") return {
-		bg: "rgba(250,95,103,0.13)",
-		fg: "#c0333a"
-	};
-	if (type.startsWith("RUN_") || type.startsWith("STEP_")) return {
-		bg: "rgba(255,172,77,0.2)",
-		fg: "#8a5900"
-	};
-	return {
-		bg: "#F7F7F9",
-		fg: "#68686e"
-	};
+function humanizeEventType(type) {
+	const words = type.trim().split(/[_\s]+/).filter(Boolean).map((word) => word.toLowerCase());
+	if (words.length === 0) return "Event";
+	const [first = "event", ...rest] = words;
+	return [`${first.charAt(0).toUpperCase()}${first.slice(1)}`, ...rest].join(" ");
+}
+function messageTitle(role) {
+	const normalized = role.trim() || "message";
+	return `${`${normalized.charAt(0).toUpperCase()}${normalized.slice(1).toLowerCase()}`} message`;
+}
+function eventCategory(type) {
+	if (type === "RUN_ERROR" || type === "ERROR") return "error";
+	if (type.startsWith("TEXT_MESSAGE")) return "message";
+	if (type.startsWith("TOOL_CALL")) return "tool";
+	if (type.startsWith("STATE") || type.startsWith("MESSAGES")) return "state";
+	if (type.startsWith("RUN_") || type.startsWith("STEP_")) return "run";
+	return "event";
 }
 function formatTimestamp(ts) {
 	const date = typeof ts === "number" ? new Date(ts) : new Date(ts);
@@ -1076,11 +1202,15 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		this.threadInspectionAvailable = false;
 		this.agentStateInput = null;
 		this.agentEventsInput = [];
+		this.agentMessagesInput = EMPTY_INSPECTOR_MESSAGES;
 		this.liveMessageVersion = 0;
 		this.viewInAppMode = "hidden";
 		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 = [];
@@ -1140,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 = {
@@ -1151,11 +1290,15 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			threadInspectionAvailable: { attribute: false },
 			agentStateInput: { attribute: false },
 			agentEventsInput: { attribute: false },
+			agentMessagesInput: { attribute: false },
 			liveMessageVersion: { attribute: false },
 			viewInAppMode: { attribute: false },
 			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 },
@@ -1232,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();
 	}
@@ -1295,6 +1438,11 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       display: flex;
       flex-direction: row;
       overflow: hidden;
+      --cpk-json-key: #3d408f;
+      --cpk-json-str: #0b6b4c;
+      --cpk-json-num: #8a5900;
+      --cpk-json-bool: #c0333a;
+      --cpk-json-nil: #57575b;
     }
 
     .cpk-td {
@@ -1419,11 +1567,25 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       flex-shrink: 0;
     }
 
-    .cpk-td__metadata-strip {
+    .cpk-td__chrome-actions {
+      margin-inline-start: auto;
       display: flex;
+      flex-wrap: wrap;
       align-items: center;
+      justify-content: flex-end;
       gap: 6px;
-      flex-wrap: wrap;
+      padding-inline: 8px;
+      min-width: 0;
+    }
+
+    .cpk-td__chrome-actions + .cpk-td__panel-toggle {
+      margin-inline-start: 0;
+    }
+
+    .cpk-td__metadata-strip {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
       padding: 10px 16px;
       border-bottom: 1px solid #e9e9ef;
       background: #fbfbfd;
@@ -1432,19 +1594,22 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 
     .cpk-td__metadata-pills {
       display: flex;
+      align-items: center;
       gap: 6px;
-      flex: 1;
-      flex-wrap: wrap;
+      width: 100%;
       min-width: 0;
+      flex-wrap: nowrap;
     }
 
     .cpk-td__metadata-pill {
       display: inline-flex;
       align-items: center;
-      gap: 5px;
-      max-width: 220px;
-      padding: 3px 7px;
-      border: 1px solid #e9e9ef;
+      gap: 6px;
+      flex: 1 1 0;
+      min-width: 0;
+      height: 24px;
+      padding: 0 8px;
+      border: 1px solid #dbdbe5;
       border-radius: 6px;
       background: #ffffff;
       color: #57575b;
@@ -1460,20 +1625,17 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
     }
 
     .cpk-td__metadata-value {
+      min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
+    .cpk-td__metadata-value--wrap,
     .cpk-td__metadata-pill--wrap {
-      max-width: 100%;
-      white-space: normal;
-    }
-
-    .cpk-td__metadata-value--wrap {
-      overflow: visible;
-      text-overflow: clip;
-      white-space: normal;
-      overflow-wrap: anywhere;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     .cpk-td__view-in-app {
@@ -1484,11 +1646,18 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       border-radius: 6px;
       background: #5558b2;
       color: #ffffff;
-      font-family: "Plus Jakarta Sans", sans-serif;
-      font-size: 11px;
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 10px;
       font-weight: 600;
-      padding: 5px 10px;
+      line-height: 1.2;
+      min-height: 24px;
+      padding: 3px 8px;
       cursor: pointer;
+      transition:
+        transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
+        background 120ms ease,
+        color 120ms ease,
+        border-color 120ms ease;
     }
 
     .cpk-td__view-in-app:focus-visible {
@@ -1496,6 +1665,10 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       outline-offset: 2px;
     }
 
+    .cpk-td__view-in-app:active {
+      transform: scale(0.96);
+    }
+
     .cpk-td__view-in-app--stop {
       background: #ffffff;
       color: #5558b2;
@@ -1507,6 +1680,65 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       font-size: 11px;
     }
 
+    @media (prefers-reduced-motion: reduce) {
+      .cpk-td__view-in-app {
+        transition: none;
+      }
+
+      .cpk-td__view-in-app:active {
+        transform: none;
+      }
+    }
+
+    .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
@@ -1703,15 +1935,16 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
     .cpk-td__tool-pre {
       margin: 0;
       font-family: "Spline Sans Mono", monospace;
-      font-size: 10px;
+      font-size: 12px;
       background: #f7f7f9;
-      padding: 6px 8px;
-      border-radius: 5px;
+      padding: 10px 12px;
+      border-radius: 6px;
       overflow-x: auto;
       white-space: pre-wrap;
-      word-break: break-all;
+      overflow-wrap: anywhere;
+      word-break: normal;
       color: #010507;
-      line-height: 1.6;
+      line-height: 1.65;
     }
 
     /* ── Tool call group ─────────────────────────────────────────────── */
@@ -1764,12 +1997,31 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 
     /* ── Interaction timeline ───────────────────────────────────────── */
     .cpk-td__timeline-item {
-      border: 1px solid #e9e9ef;
-      border-radius: 7px;
-      background: #ffffff;
+      border: 1px solid transparent;
+      border-radius: 10px;
+      background: transparent;
       overflow: hidden;
     }
 
+    .cpk-td__timeline-item--run,
+    .cpk-td__timeline-item--state,
+    .cpk-td__timeline-item--event,
+    .cpk-td__timeline-item--tool,
+    .cpk-td__event--run,
+    .cpk-td__event--event,
+    .cpk-td__event--state,
+    .cpk-td__event--message,
+    .cpk-td__event--tool {
+      border-color: #dbdbe5;
+      background: #ffffff;
+    }
+
+    .cpk-td__timeline-item--message {
+      border-color: #dbdbe5;
+      background: #ffffff;
+      box-shadow: 0 1px 2px #0105070d;
+    }
+
     .cpk-td__timeline-item--warning {
       border-color: rgba(250, 95, 103, 0.35);
       background: rgba(250, 95, 103, 0.04);
@@ -1779,29 +2031,72 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       display: flex;
       align-items: center;
       gap: 8px;
-      padding: 7px 10px;
+      padding: 6px 10px;
+      background: transparent;
+    }
+
+    .cpk-td__timeline-item--message .cpk-td__timeline-header {
+      padding: 10px 12px;
       background: #f7f7f9;
     }
 
+    .cpk-td__timeline-item--user .cpk-td__timeline-header {
+      background: #bec2ff1a;
+    }
+
+    .cpk-td__timeline-item--assistant .cpk-td__timeline-header {
+      background: #85ecce1a;
+    }
+
     .cpk-td__timeline-kind {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 8px;
+      border-radius: 999px;
+      background: #f0f0f4;
+      color: #57575b;
       font-family: "Spline Sans Mono", monospace;
-      font-size: 9px;
+      font-size: 10px;
       font-weight: 600;
+      letter-spacing: 0.04em;
+      line-height: 1.2;
       text-transform: uppercase;
-      color: #5558b2;
+      flex-shrink: 0;
+    }
+
+    .cpk-td__timeline-item--message .cpk-td__timeline-kind {
+      background: #bec2ff33;
+      color: #010507;
+    }
+
+    .cpk-td__timeline-item--assistant .cpk-td__timeline-kind {
+      background: #85ecce4d;
+      color: #010507;
+    }
+
+    .cpk-td__timeline-item--warning .cpk-td__timeline-kind {
+      background: rgba(250, 95, 103, 0.16);
+      color: #c0333a;
     }
 
     .cpk-td__timeline-title {
       flex: 1;
       min-width: 0;
+      font-family: "Plus Jakarta Sans", sans-serif;
       font-size: 12px;
       font-weight: 500;
-      color: #010507;
+      color: #57575b;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
+    .cpk-td__timeline-item--message .cpk-td__timeline-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: #010507;
+    }
+
     .cpk-td__timeline-time {
       font-family: "Spline Sans Mono", monospace;
       font-size: 9px;
@@ -1812,6 +2107,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
     .cpk-td__timeline-body {
       margin: 0;
       padding: 0 10px 9px;
+      font-family: "Plus Jakarta Sans", sans-serif;
       font-size: 12px;
       line-height: 1.55;
       color: #57575b;
@@ -1819,21 +2115,28 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       word-break: break-word;
     }
 
+    .cpk-td__timeline-item--message .cpk-td__timeline-body {
+      padding: 0 12px 12px;
+      font-size: 13px;
+      color: #010507;
+    }
+
     .cpk-td__timeline-toolbar {
       display: flex;
+      flex-wrap: wrap;
+      align-items: center;
       gap: 6px;
-      margin-left: auto;
     }
 
     .cpk-td__timeline-bulk-toggle {
       margin: 0;
-      padding: 4px 8px;
-      border: 1px solid #dcdce8;
-      border-radius: 7px;
+      padding: 6px 10px;
+      border: 1px solid #dbdbe5;
+      border-radius: 8px;
       background: #ffffff;
       color: #36363a;
       cursor: pointer;
-      font-family: "Inter", sans-serif;
+      font-family: "Spline Sans Mono", monospace;
       font-size: 11px;
       font-weight: 600;
       line-height: 1.2;
@@ -1908,84 +2211,6 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       }
     }
 
-    @keyframes cpk-playground-message-enter {
-      from {
-        opacity: 0;
-        filter: blur(2px);
-        transform: translateY(4px);
-      }
-      to {
-        opacity: 1;
-        filter: blur(0);
-        transform: translateY(0);
-      }
-    }
-
-    @keyframes cpk-playground-thinking {
-      0%,
-      60%,
-      100% {
-        opacity: 0.28;
-        transform: translateY(0);
-      }
-      30% {
-        opacity: 1;
-        transform: translateY(-2px);
-      }
-    }
-
-    .cpk-playground-root {
-      container-type: inline-size;
-    }
-
-    .cpk-playground-message-enter {
-      animation: cpk-playground-message-enter 0.24s cubic-bezier(0.16, 1, 0.3, 1)
-        both;
-    }
-
-    .cpk-playground-thinking-dot {
-      animation: cpk-playground-thinking 1.2s ease-in-out infinite;
-    }
-
-    .cpk-playground-thinking-dot:nth-child(2) {
-      animation-delay: 0.12s;
-    }
-
-    .cpk-playground-thinking-dot:nth-child(3) {
-      animation-delay: 0.24s;
-    }
-
-    .cpk-playground-reasoning summary::-webkit-details-marker {
-      display: none;
-    }
-
-    .cpk-playground-reasoning[open] .cpk-playground-reasoning-chevron {
-      transform: rotate(90deg);
-    }
-
-    @container (max-width: 560px) {
-      .cpk-playground-header {
-        align-items: stretch;
-      }
-
-      .cpk-playground-actions {
-        width: 100%;
-      }
-
-      .cpk-playground-thread-select {
-        min-width: 0;
-        max-width: none;
-        flex: 1;
-      }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .cpk-playground-message-enter,
-      .cpk-playground-thinking-dot {
-        animation: none;
-      }
-    }
-
     .cpk-td__genui {
       display: flex;
       flex-direction: column;
@@ -2027,8 +2252,9 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
     /* ── AG-UI Events ────────────────────────────────────────────────── */
     .cpk-td__event {
       flex-shrink: 0;
-      border: 1px solid #e9e9ef;
-      border-radius: 7px;
+      border: 1px solid #dbdbe5;
+      border-radius: 10px;
+      background: #ffffff;
       overflow: hidden;
       /*
        * content-visibility: auto lets the browser skip layout + paint for
@@ -2044,48 +2270,89 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       contain-intrinsic-size: 0 80px;
     }
 
+    .cpk-td__event--error {
+      border-color: rgba(250, 95, 103, 0.35);
+      background: rgba(250, 95, 103, 0.04);
+    }
+
     .cpk-td__event-header {
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      padding: 5px 10px;
+      gap: 8px;
+      padding: 6px 10px;
+      background: transparent;
     }
 
     .cpk-td__event-type {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 8px;
+      border-radius: 999px;
+      background: #f0f0f4;
+      color: #010507;
       font-family: "Spline Sans Mono", monospace;
-      font-size: 9px;
-      font-weight: 500;
-      text-transform: uppercase;
+      font-size: 10px;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      line-height: 1.2;
+    }
+
+    .cpk-td__event--message .cpk-td__event-type {
+      background: #bec2ff33;
+    }
+
+    .cpk-td__event--tool .cpk-td__event-type {
+      background: #85ecce4d;
+    }
+
+    .cpk-td__event--error .cpk-td__event-type {
+      background: rgba(250, 95, 103, 0.16);
+      color: #c0333a;
     }
 
     .cpk-td__event-time {
+      margin-inline-start: auto;
       font-family: "Spline Sans Mono", monospace;
       font-size: 9px;
       color: #68686e;
+      flex-shrink: 0;
     }
 
-    .cpk-td__event-payload {
-      margin: 0;
-      font-family: "Spline Sans Mono", monospace;
-      font-size: 10px;
-      line-height: 1.6;
-      white-space: pre-wrap;
-      word-break: break-all;
-      color: #57575b;
-      padding: 8px 10px;
-      border-top: 1px solid #e9e9ef;
-    }
-
-    /* ── JSON block (agent state) ────────────────────────────────────── */
+    .cpk-td__event-payload,
     .cpk-td__json-block,
     .cpk-json-block {
       margin: 0;
+      padding: 10px 12px;
+      border-top: 1px solid #dbdbe5;
+      background: #f7f7f9;
       font-family: "Spline Sans Mono", monospace;
-      font-size: 11px;
-      line-height: 1.8;
+      font-size: 12px;
+      line-height: 1.65;
       white-space: pre-wrap;
-      word-break: break-all;
-      color: #57575b;
+      overflow-wrap: anywhere;
+      word-break: normal;
+      color: #010507;
+      overflow: auto;
+    }
+
+    .cpk-json-token--key {
+      color: var(--cpk-json-key);
+    }
+
+    .cpk-json-token--str {
+      color: var(--cpk-json-str);
+    }
+
+    .cpk-json-token--num {
+      color: var(--cpk-json-num);
+    }
+
+    .cpk-json-token--bool {
+      color: var(--cpk-json-bool);
+    }
+
+    .cpk-json-token--nil {
+      color: var(--cpk-json-nil);
     }
 
     /* ── Resize divider ──────────────────────────────────────────────── */
@@ -2184,6 +2451,11 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 
     :host([data-color-scheme="dark"]) {
       color-scheme: dark;
+      --cpk-json-key: #bec2ff;
+      --cpk-json-str: #85ecce;
+      --cpk-json-num: #ffac4d;
+      --cpk-json-bool: #fa5f67;
+      --cpk-json-nil: #afafb7;
     }
 
     :host([data-color-scheme="dark"]) .cpk-td {
@@ -2195,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,
@@ -2212,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,
@@ -2224,11 +2498,15 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
     }
 
     :host([data-color-scheme="dark"]) .cpk-td__timeline-header,
-    :host([data-color-scheme="dark"]) .cpk-td__tool-body,
-    :host([data-color-scheme="dark"]) .cpk-td__tool-pre {
+    :host([data-color-scheme="dark"]) .cpk-td__tool-body {
       background: #171a22;
     }
 
+    :host([data-color-scheme="dark"]) .cpk-td__tool-pre {
+      background: #111319;
+      color: #f3f4f8;
+    }
+
     :host([data-color-scheme="dark"]) .cpk-td__panel-toggle:hover,
     :host([data-color-scheme="dark"]) .cpk-td__tool-header:hover,
     :host([data-color-scheme="dark"]) .cpk-td__timeline-bulk-toggle:hover,
@@ -2238,12 +2516,115 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 
     :host([data-color-scheme="dark"]) .cpk-td__panel-toggle--active,
     :host([data-color-scheme="dark"]) .cpk-td__inline-chip,
-    :host([data-color-scheme="dark"]) .cpk-td__timeline-kind,
     :host([data-color-scheme="dark"]) .cpk-td__genui-badge {
       background: #302b43;
       color: #d8d9ff;
     }
 
+    :host([data-color-scheme="dark"]) .cpk-td__timeline-item--message {
+      background: #191c24;
+      border-color: #343742;
+      box-shadow: none;
+    }
+
+    :host([data-color-scheme="dark"])
+      .cpk-td__timeline-item--user
+      .cpk-td__timeline-header {
+      background: #bec2ff1a;
+    }
+
+    :host([data-color-scheme="dark"])
+      .cpk-td__timeline-item--assistant
+      .cpk-td__timeline-header {
+      background: #85ecce1a;
+    }
+
+    :host([data-color-scheme="dark"])
+      .cpk-td__timeline-item--message
+      .cpk-td__timeline-kind {
+      background: #302b43;
+      color: #d8d9ff;
+    }
+
+    :host([data-color-scheme="dark"])
+      .cpk-td__timeline-item--assistant
+      .cpk-td__timeline-kind {
+      background: #1a3a32;
+      color: #85ecce;
+    }
+
+    :host([data-color-scheme="dark"]) .cpk-td__timeline-item--run,
+    :host([data-color-scheme="dark"]) .cpk-td__timeline-item--event,
+    :host([data-color-scheme="dark"]) .cpk-td__timeline-item--state,
+    :host([data-color-scheme="dark"]) .cpk-td__timeline-item--tool,
+    :host([data-color-scheme="dark"]) .cpk-td__event--run,
+    :host([data-color-scheme="dark"]) .cpk-td__event--event,
+    :host([data-color-scheme="dark"]) .cpk-td__event--state,
+    :host([data-color-scheme="dark"]) .cpk-td__event--message,
+    :host([data-color-scheme="dark"]) .cpk-td__event--tool {
+      background: #191c24;
+      border-color: #343742;
+    }
+
+    :host([data-color-scheme="dark"])
+      .cpk-td__timeline-item--run
+      .cpk-td__timeline-header,
+    :host([data-color-scheme="dark"])
+      .cpk-td__timeline-item--event
+      .cpk-td__timeline-header,
+    :host([data-color-scheme="dark"])
+      .cpk-td__timeline-item--state
+      .cpk-td__timeline-header {
+      background: transparent;
+    }
+
+    :host([data-color-scheme="dark"]) .cpk-td__timeline-kind {
+      background: #20232d;
+      color: #aeb1bd;
+    }
+
+    :host([data-color-scheme="dark"])
+      .cpk-td__timeline-item--run
+      .cpk-td__timeline-title,
+    :host([data-color-scheme="dark"])
+      .cpk-td__timeline-item--event
+      .cpk-td__timeline-title,
+    :host([data-color-scheme="dark"])
+      .cpk-td__timeline-item--state
+      .cpk-td__timeline-title {
+      color: #aeb1bd;
+    }
+
+    :host([data-color-scheme="dark"]) .cpk-td__event-header {
+      background: transparent;
+    }
+
+    :host([data-color-scheme="dark"]) .cpk-td__event-type {
+      background: #20232d;
+      color: #f3f4f8;
+    }
+
+    :host([data-color-scheme="dark"]) .cpk-td__event--message .cpk-td__event-type {
+      background: #302b43;
+      color: #d8d9ff;
+    }
+
+    :host([data-color-scheme="dark"]) .cpk-td__event--tool .cpk-td__event-type {
+      background: #1a3a32;
+      color: #85ecce;
+    }
+
+    :host([data-color-scheme="dark"]) .cpk-td__event--error .cpk-td__event-type {
+      background: rgba(250, 95, 103, 0.2);
+      color: #fa5f67;
+    }
+
+    :host([data-color-scheme="dark"])
+      .cpk-td__timeline-item--message
+      .cpk-td__timeline-body {
+      color: #f3f4f8;
+    }
+
     :host([data-color-scheme="dark"]) .cpk-td__tab,
     :host([data-color-scheme="dark"]) .cpk-td__panel-toggle,
     :host([data-color-scheme="dark"]) .cpk-td__metadata-label,
@@ -2263,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;
     }
@@ -2270,7 +2652,9 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
     :host([data-color-scheme="dark"]) .cpk-td__event-payload,
     :host([data-color-scheme="dark"]) .cpk-td__json-block,
     :host([data-color-scheme="dark"]) .cpk-json-block {
-      color: #c7c9d2;
+      background: #111319;
+      border-top-color: #343742;
+      color: #f3f4f8;
     }
 
     :host([data-color-scheme="dark"]) .cpk-tdp__divider {
@@ -2290,7 +2674,8 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 				if (this.canFetchEvents()) {
 					this._eventsFetched = true;
 					this.fetchEvents(this.threadId);
-				} else this.fetchMessages(this.threadId);
+				}
+				if (this.canFetchMessages()) this.fetchMessages(this.threadId);
 			} else {
 				this._fetchedMetadata = null;
 				this._conversation = [];
@@ -2301,7 +2686,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			this._messagesAbort = null;
 			this.fetchMessages(this.threadId, true);
 		}
-		const focusedContentChanged = _changed.has("_fetchedEvents") || _changed.has("agentEventsInput") || _changed.has("_conversation");
+		const focusedContentChanged = _changed.has("_fetchedEvents") || _changed.has("agentEventsInput") || _changed.has("agentMessagesInput") || _changed.has("_conversation");
 		if (this.focusMessageId && (this.focusRequestId > this._scrolledFocusRequestId || focusedContentChanged)) {
 			if (this._tab !== "timeline") {
 				this._activatedTabs = new Set([...this._activatedTabs, "timeline"]);
@@ -2458,18 +2843,14 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			if (result.status === "not-available") {
 				this._eventsNotAvailable = true;
 				this._fetchedEvents = [];
-				if (this.canFetchMessages()) this.fetchMessages(threadId);
 				return;
 			}
-			const mappedEvents = this.mapApiEvents(result.events);
-			this._fetchedEvents = mappedEvents;
-			if (mappedEvents.length === 0 && this.canFetchMessages()) this.fetchMessages(threadId);
+			this._fetchedEvents = this.mapApiEvents(result.events);
 		} catch (err) {
 			if (err instanceof Error && err.name === "AbortError") return;
 			if (this.threadId !== threadId) return;
 			this._eventsError = err instanceof Error ? err.message : "Failed to load events";
 			this._fetchedEvents = [];
-			if (this.canFetchMessages()) this.fetchMessages(threadId);
 		} finally {
 			if (!controller.signal.aborted && this.threadId === threadId) this._loadingEvents = false;
 		}
@@ -2543,13 +2924,15 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 	mapMessages(messages) {
 		const items = [];
 		const toolCallMap = /* @__PURE__ */ new Map();
-		for (const msg of messages) if (msg.role === "user" && msg.content) items.push({
-			id: msg.id,
-			type: "user",
-			content: msg.content,
-			createdAt: ""
-		});
-		else if (msg.role === "assistant") {
+		for (const msg of messages) if (msg.role === "user") {
+			const content = textFromUnknownContent(msg.content);
+			if (content) items.push({
+				id: msg.id,
+				type: "user",
+				content,
+				createdAt: ""
+			});
+		} else if (msg.role === "assistant") {
 			if (msg.toolCalls?.length) for (const tc of msg.toolCalls) {
 				let args = {};
 				if (typeof tc.args === "string") try {
@@ -2578,10 +2961,11 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 				toolCallMap.set(tc.id, item);
 				items.push(item);
 			}
-			if (msg.content) items.push({
+			const assistantContent = textFromUnknownContent(msg.content);
+			if (assistantContent) items.push({
 				id: msg.id,
 				type: "assistant",
-				content: msg.content,
+				content: assistantContent,
 				createdAt: ""
 			});
 		} else if (msg.role === "activity") items.push({
@@ -2629,14 +3013,86 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		return this.timelineItemsForEvents(this.activeEvents);
 	}
 	timelineItemsForEvents(events) {
-		if (this._timelineItemsCache?.events === events) return this._timelineItemsCache.items;
-		const items = this.timelineItemsFromEvents(events);
+		const conversation = this._conversation;
+		const agentMessages = this.agentMessagesInput;
+		if (this._timelineItemsCache?.events === events && this._timelineItemsCache.conversation === conversation && this._timelineItemsCache.agentMessages === agentMessages) return this._timelineItemsCache.items;
+		const items = this.mergeUserMessagesIntoTimeline(this.timelineItemsFromEvents(events));
 		this._timelineItemsCache = {
 			events,
+			conversation,
+			agentMessages,
 			items
 		};
 		return items;
 	}
+	conversationUsers() {
+		const users = [];
+		const seenIds = /* @__PURE__ */ new Set();
+		const seenBodies = /* @__PURE__ */ new Set();
+		const push = (user) => {
+			const body = user.content.trim();
+			if (!body) return;
+			if (seenIds.has(user.id) || seenBodies.has(body)) return;
+			seenIds.add(user.id);
+			seenBodies.add(body);
+			users.push(user);
+		};
+		for (const item of this._conversation) if (item.type === "user") push(item);
+		this.agentMessagesInput.forEach((message, index) => {
+			if (message.role !== "user") return;
+			push({
+				id: message.id ?? `live-user-${index}`,
+				type: "user",
+				content: message.contentText,
+				createdAt: ""
+			});
+		});
+		return users;
+	}
+	mergeUserMessagesIntoTimeline(items) {
+		if (items.length === 0) return items;
+		const users = this.conversationUsers();
+		if (users.length === 0) return items;
+		const shownIds = /* @__PURE__ */ new Set();
+		const shownBodies = /* @__PURE__ */ new Set();
+		for (const item of items) {
+			if (item.kind !== "message") continue;
+			if (!item.title.toLowerCase().startsWith("user")) continue;
+			if (item.messageId) shownIds.add(item.messageId);
+			const body = item.body?.trim();
+			if (body) shownBodies.add(body);
+		}
+		const missing = users.filter((user) => {
+			if (shownIds.has(user.id)) return false;
+			if (shownBodies.has(user.content.trim())) return false;
+			return true;
+		});
+		if (missing.length === 0) return items;
+		const insertAt = [];
+		for (let index = 0; index < items.length; index++) {
+			const item = items[index];
+			if (item.kind === "run" && item.title === "Run started") insertAt.push(index);
+		}
+		if (insertAt.length === 0) for (let index = 0; index < items.length; index++) {
+			const item = items[index];
+			if (item.kind === "message" && item.title.toLowerCase().includes("assistant")) insertAt.push(index);
+		}
+		const merged = [...items];
+		for (let index = missing.length - 1; index >= 0; index--) {
+			const user = missing[index];
+			const row = {
+				id: `conversation-user-${user.id}`,
+				messageId: user.id,
+				kind: "message",
+				title: "User message",
+				body: user.content,
+				timestamp: user.createdAt || 0,
+				sourceIndex: 0
+			};
+			merged.splice(insertAt[index] ?? 0, 0, row);
+		}
+		return merged;
+	}
 	timelineItemsFromEvents(events) {
 		if (events.length === 0) return [];
 		const items = [];
@@ -2675,7 +3131,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 					id: `message-${key}`,
 					messageId: key,
 					kind: "message",
-					title: `${role || "message"} message`,
+					title: messageTitle(role || "message"),
 					body: "",
 					timestamp: event.timestamp,
 					sourceIndex
@@ -2823,7 +3279,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 				items.push({
 					id: `${type}-${sourceIndex}`,
 					kind: "state",
-					title: type === "STATE_SNAPSHOT" ? "State snapshot captured" : "State delta captured",
+					title: type === "STATE_SNAPSHOT" ? "State snapshot" : "State delta",
 					timestamp: event.timestamp,
 					sourceIndex,
 					details: payload
@@ -2833,7 +3289,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			items.push({
 				id: `event-${sourceIndex}`,
 				kind: "event",
-				title: type,
+				title: humanizeEventType(type),
 				timestamp: event.timestamp,
 				sourceIndex,
 				details: payload
@@ -2972,6 +3428,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		});
 	}
 	render() {
+		const viewInApp = this.renderViewInAppAction();
 		return html`
       <div class="cpk-td">
         <!-- ── Left area: tabs + content ─────────────────────────────────── -->
@@ -2999,6 +3456,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
                   </button>
                 `)}
             </div>
+            ${viewInApp !== nothing ? html`<div class="cpk-td__chrome-actions">${viewInApp}</div>` : nothing}
             ${this.renderPanelToggle()}
           </div>
           ${this.renderMetadataStrip()}
@@ -3053,8 +3511,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			value: metadata?.name ?? this.thread?.name ?? "Untitled"
 		}, {
 			label: "ID",
-			value: metadata?.id ?? this.threadId ?? "—",
-			wrap: true
+			value: metadata?.id ?? this.threadId ?? "—"
 		}];
 		for (const fact of [
 			{
@@ -3076,7 +3533,6 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 				value: fact.label === "Created" || fact.label === "Updated" ? this.fmtTime(fact.value) : fact.value
 			});
 		}
-		const bulkControls = this.renderActiveBulkControls();
 		return html`
       <div
         class="cpk-td__metadata-strip"
@@ -3099,8 +3555,6 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
               </span>
             `)}
         </div>
-        ${this.renderViewInAppAction()}
-        ${bulkControls}
       </div>
     `;
 	}
@@ -3123,17 +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}
     `;
 	}
-	renderActiveBulkControls() {
+	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;
-		if (this._tab === "raw-events") return this.renderRawEventBulkControls();
-		if (this._tab !== "timeline") 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"
@@ -3150,7 +3642,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       >
         Collapse all
       </button>
-    </div>`;
+    `;
 	}
 	renderRawEventBulkControls() {
 		const eventIds = this.activeEvents.map((event) => this.rawEventId(event));
@@ -3182,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>
@@ -3203,7 +3698,12 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       `;
 		}
 		const events = this.activeEvents;
-		const cachedTimeline = this.getCachedPanelTpl("timeline", [events, this._expandedTimelineDetails]);
+		const cachedTimeline = this.getCachedPanelTpl("timeline", [
+			events,
+			this._conversation,
+			this.agentMessagesInput,
+			this._expandedTimelineDetails
+		]);
 		if (cachedTimeline) return cachedTimeline;
 		const timelineItems = this.timelineItemsForEvents(events);
 		if (timelineItems.length === 0) {
@@ -3219,14 +3719,28 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
         </div>
       `;
 		}
-		return this.cachedPanelTpl("timeline", [events, this._expandedTimelineDetails], () => html`${timelineItems.map((item) => this.renderTimelineItem(item))}`);
+		return this.cachedPanelTpl("timeline", [
+			events,
+			this._conversation,
+			this.agentMessagesInput,
+			this._expandedTimelineDetails
+		], () => html`${timelineItems.map((item) => this.renderTimelineItem(item))}`);
+	}
+	timelineItemClass(item) {
+		const classes = ["cpk-td__timeline-item", `cpk-td__timeline-item--${item.kind}`];
+		if (item.kind === "warning" || item.severity === "error") classes.push("cpk-td__timeline-item--warning");
+		if (item.kind === "message") {
+			const title = item.title.toLowerCase();
+			if (title.startsWith("user")) classes.push("cpk-td__timeline-item--user");
+			else if (title.includes("assistant")) classes.push("cpk-td__timeline-item--assistant");
+		}
+		return classes.join(" ");
 	}
 	renderTimelineItem(item) {
-		const isWarning = item.kind === "warning";
 		const detailsExpanded = this._expandedTimelineDetails.has(item.id);
 		return html`
       <div
-        class="cpk-td__timeline-item ${isWarning ? "cpk-td__timeline-item--warning" : ""}"
+        class=${this.timelineItemClass(item)}
         data-message-id=${item.messageId ?? nothing}
       >
         <div class="cpk-td__timeline-header">
@@ -3234,13 +3748,15 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
             >${item.severity === "error" ? "error" : item.kind}</span
           >
           <span class="cpk-td__timeline-title">${item.title}</span>
-          <button
-            type="button"
-            class="cpk-td__source-link"
-            @click=${() => this.revealSourceEvent(item.sourceIndex)}
-          >
-            Source event #${item.sourceIndex}
-          </button>
+          ${item.sourceIndex ? html`
+                <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
           >
@@ -3277,9 +3793,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
               <span>${detailsExpanded ? "Hide details" : "Show details"}</span>
             </button>` : nothing}
         ${item.body ? html`<div class="cpk-td__timeline-body">${item.body}</div>` : nothing}
-        ${item.details && detailsExpanded ? html`<pre class="cpk-td__timeline-body">
-${unsafeHTML(highlightedJson(item.details))}</pre
-            >` : nothing}
+        ${item.details && detailsExpanded ? renderHighlightedJsonBlock(item.details) : nothing}
       </div>
     `;
 	}
@@ -3409,9 +3923,7 @@ ${unsafeHTML(highlightedJson(item.details))}</pre
         ${expanded ? html`
               <div class="cpk-td__tool-body">
                 <div class="cpk-td__tool-section-label">Arguments</div>
-                <pre class="cpk-td__tool-pre">
-${unsafeHTML(highlightedJson(item.arguments))}</pre
-                >
+                ${renderHighlightedJsonBlock(item.arguments)}
                 ${item.result ? html`
                       <div
                         class="cpk-td__tool-section-label"
@@ -3419,9 +3931,7 @@ ${unsafeHTML(highlightedJson(item.arguments))}</pre
                       >
                         Result
                       </div>
-                      <pre class="cpk-td__tool-pre">
-${unsafeHTML(highlightedJson(item.result))}</pre
-                      >
+                      ${renderHighlightedJsonBlock(item.result)}
                     ` : nothing}
               </div>
             ` : nothing}
@@ -3536,58 +4046,58 @@ ${unsafeHTML(highlightedJson(item.result))}</pre
         </div>
       `;
 		return this.cachedPanelTpl("raw-events", [events, this._expandedRawEvents], () => {
-			return html`${events.map((event) => {
-				const { bg, fg } = eventColors(event.type);
+			return html`${this.renderRawEventBulkControls()}${events.map((event) => {
 				const eventId = this.rawEventId(event);
 				const detailsExpanded = this._expandedRawEvents.has(eventId);
 				return html`
-            <div class="cpk-td__event" data-source-index=${event.sourceIndex}>
-              <div class="cpk-td__event-header" style="background:${bg}">
-                <span class="cpk-td__event-type" style="color:${fg}"
-                  >${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 ? html`<pre class="cpk-td__event-payload">
-${unsafeHTML(highlightedJson(event.rawEvent ?? event))}</pre
-                  >` : 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>
+            `;
 			})}`;
 		});
 	}
@@ -4396,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 = {
@@ -4441,9 +4958,12 @@ 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;
+		this.iconRailContextCloseTimer = null;
 		this.layoutMenuOpen = false;
 		this.dockMode = "floating";
 		this.popOut = null;
@@ -4505,6 +5025,9 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.launcherHudSide = "left";
 		this.launcherHudHelp = null;
 		this.launcherHudCloseTimer = null;
+		this.launcherHudIntro = false;
+		this.launcherHudIntroStartTimer = null;
+		this.launcherHudIntroEndTimer = null;
 		this.hudLandingMenu = null;
 		this.pillOutcome = null;
 		this.viewedNewsSignalIds = /* @__PURE__ */ new Set();
@@ -4589,6 +5112,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			this.openInspector("floating_button");
 		};
 		this.handleLauncherHudEnter = () => {
+			this.cancelLauncherHudIntro();
 			this.openLauncherHud();
 		};
 		this.handleLauncherHudLeave = () => {
@@ -4599,6 +5123,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			}, 160);
 		};
 		this.handleLauncherHudFocusIn = () => {
+			this.cancelLauncherHudIntro();
 			this.openLauncherHud();
 		};
 		this.handleLauncherHudFocusOut = (event) => {
@@ -4675,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";
@@ -4919,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 {
@@ -4941,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;
@@ -5145,15 +5712,21 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			this.requestUpdate();
 		};
 		this.handleIconRailContextPointerEnter = (event) => {
-			if (event.pointerType === "touch" || this.contextMenuOpen) return;
+			if (event.pointerType === "touch") return;
+			this.clearIconRailContextCloseTimer();
+			if (this.contextMenuOpen) return;
 			this.layoutMenuOpen = false;
 			this.contextMenuOpen = true;
 			this.requestUpdate();
 		};
 		this.handleIconRailContextPointerLeave = () => {
 			if (!this.contextMenuOpen) return;
-			this.contextMenuOpen = false;
-			this.requestUpdate();
+			this.clearIconRailContextCloseTimer();
+			this.iconRailContextCloseTimer = setTimeout(() => {
+				this.iconRailContextCloseTimer = null;
+				this.contextMenuOpen = false;
+				this.requestUpdate();
+			}, 180);
 		};
 		this.handleIconRailContextPointerDown = (event) => {
 			if (event.pointerType === "touch") {
@@ -5164,6 +5737,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			event.stopPropagation();
 		};
 		this.handleIconRailContextFocusIn = () => {
+			this.clearIconRailContextCloseTimer();
 			if (this.contextMenuOpen) return;
 			this.layoutMenuOpen = false;
 			this.contextMenuOpen = true;
@@ -5584,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,
@@ -6134,7 +6708,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			const messages = this.normalizeAgentMessages(agent.messages);
 			if (messages) this.agentMessages.set(agent.agentId, messages);
 			else this.agentMessages.delete(agent.agentId);
-			const runThreadId = agent.threadId;
+			const runThreadId = this.readAgentThreadId(agent);
 			if (runThreadId) this.liveMessageVersion.set(runThreadId, (this.liveMessageVersion.get(runThreadId) ?? 0) + 1);
 			this.requestUpdate();
 		} catch (error) {
@@ -6238,6 +6812,20 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 	getLatestMessagesForAgent(agentId) {
 		return this.agentMessages.get(agentId) ?? null;
 	}
+	readAgentThreadId(agent) {
+		if (!("threadId" in agent)) return void 0;
+		const threadId = agent.threadId;
+		return typeof threadId === "string" ? threadId : void 0;
+	}
+	getLiveAgentMessagesForThread(thread) {
+		const messages = this.agentMessages.get(thread.agentId) ?? EMPTY_INSPECTOR_MESSAGES;
+		const core = this._core;
+		if (!core || typeof core.getAgent !== "function") return messages;
+		const agent = core.getAgent(thread.agentId);
+		if (!agent) return EMPTY_INSPECTOR_MESSAGES;
+		if (this.readAgentThreadId(agent) !== thread.id) return EMPTY_INSPECTOR_MESSAGES;
+		return messages;
+	}
 	getAgentStatus(agentId) {
 		const events = this.agentEvents.get(agentId) ?? [];
 		if (events.length === 0) return "idle";
@@ -6281,14 +6869,14 @@ 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`<pre
-                    class="mt-2 overflow-auto rounded bg-white p-2 text-[11px] leading-relaxed text-gray-800"
-                  >
-${argsString}</pre
-                  >` : nothing}
+              ${argsString ? html`<div class="mt-2">
+                    ${renderHighlightedJsonBlock(coerceJsonValue(call.function?.arguments))}
+                  </div>` : nothing}
             </div>
           `;
 		})}
@@ -6340,15 +6928,14 @@ ${argsString}</pre
 		return String(state);
 	}
 	getEventBadgeClasses(type) {
-		const base = "font-mono text-[10px] font-medium inline-flex items-center rounded-sm px-1.5 py-0.5 border";
-		if (type === "RUN_ERROR") return `${base} bg-rose-50 text-rose-700 border-rose-200`;
-		if (type.startsWith("RUN_")) return `${base} bg-blue-50 text-blue-700 border-blue-200`;
-		if (type.startsWith("TEXT_MESSAGE")) return `${base} bg-emerald-50 text-emerald-700 border-emerald-200`;
-		if (type.startsWith("TOOL_CALL")) return `${base} bg-amber-50 text-amber-700 border-amber-200`;
-		if (type.startsWith("REASONING")) return `${base} bg-fuchsia-50 text-fuchsia-700 border-fuchsia-200`;
-		if (type.startsWith("STATE")) return `${base} bg-violet-50 text-violet-700 border-violet-200`;
-		if (type.startsWith("MESSAGES")) return `${base} bg-sky-50 text-sky-700 border-sky-200`;
-		return `${base} bg-gray-100 text-gray-600 border-gray-200`;
+		const base = "font-mono text-[10px] font-semibold inline-flex items-center rounded-sm px-1.5 py-0.5 border";
+		if (type === "RUN_ERROR") return `${base} bg-rose-50 text-rose-800 border-rose-200`;
+		if (type.startsWith("TEXT_MESSAGE")) return `${base} bg-violet-50 text-gray-900 border-violet-200`;
+		if (type.startsWith("TOOL_CALL")) return `${base} bg-emerald-50 text-gray-900 border-emerald-200`;
+		if (type.startsWith("RUN_") || type.startsWith("STEP_")) return `${base} bg-gray-100 text-gray-900 border-gray-200`;
+		if (type.startsWith("REASONING")) return `${base} bg-violet-50 text-gray-900 border-violet-200`;
+		if (type.startsWith("STATE") || type.startsWith("MESSAGES")) return `${base} bg-violet-50 text-gray-900 border-violet-200`;
+		return `${base} bg-gray-100 text-gray-900 border-gray-200`;
 	}
 	stringifyPayload(payload, pretty) {
 		try {
@@ -6395,6 +6982,13 @@ ${argsString}</pre
 	static {
 		this.styles = [unsafeCSS(generated_default), css`
       :host {
+        --cpk-inspector-shell-radius: 5px;
+        --cpk-inspector-surface-dark: #111319;
+        --cpk-json-key: #3d408f;
+        --cpk-json-str: #0b6b4c;
+        --cpk-json-num: #8a5900;
+        --cpk-json-bool: #c0333a;
+        --cpk-json-nil: #57575b;
         position: fixed;
         top: 0;
         left: 0;
@@ -6404,6 +6998,194 @@ ${argsString}</pre
         font-family: "Plus Jakarta Sans", system-ui, sans-serif;
       }
 
+      :host([data-color-scheme="dark"]),
+      .inspector-window[data-color-scheme="dark"] {
+        --cpk-json-key: #bec2ff;
+        --cpk-json-str: #85ecce;
+        --cpk-json-num: #ffac4d;
+        --cpk-json-bool: #fa5f67;
+        --cpk-json-nil: #afafb7;
+      }
+
+      .cpk-json-token--key {
+        color: var(--cpk-json-key);
+      }
+
+      .cpk-json-token--str {
+        color: var(--cpk-json-str);
+      }
+
+      .cpk-json-token--num {
+        color: var(--cpk-json-num);
+      }
+
+      .cpk-json-token--bool {
+        color: var(--cpk-json-bool);
+      }
+
+      .cpk-json-token--nil {
+        color: var(--cpk-json-nil);
+      }
+
+      .cpk-json-block {
+        margin: 0;
+        padding: 10px 12px;
+        border: 1px solid #dbdbe5;
+        border-radius: 8px;
+        background: #f7f7f9;
+        font-family: "Spline Sans Mono", monospace;
+        font-size: 12px;
+        line-height: 1.65;
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+        word-break: normal;
+        color: #010507;
+        overflow: auto;
+      }
+
+      :host([data-color-scheme="dark"]) .cpk-json-block,
+      .inspector-window[data-color-scheme="dark"] .cpk-json-block {
+        background: #111319;
+        border-color: #343742;
+        color: #f3f4f8;
+      }
+
+      @keyframes cpk-playground-message-enter {
+        from {
+          opacity: 0;
+          filter: blur(2px);
+          transform: translateY(4px);
+        }
+        to {
+          opacity: 1;
+          filter: blur(0);
+          transform: translateY(0);
+        }
+      }
+
+      @keyframes cpk-playground-thinking {
+        0%,
+        60%,
+        100% {
+          opacity: 0.28;
+          transform: translateY(0);
+        }
+        30% {
+          opacity: 1;
+          transform: translateY(-2px);
+        }
+      }
+
+      .cpk-playground-root {
+        container-type: inline-size;
+        background: #fbfbfd !important;
+      }
+
+      .cpk-playground-header {
+        min-height: 58px;
+        background: #f7f6fd !important;
+      }
+
+      .cpk-playground-welcome {
+        max-width: 560px;
+        padding: 24px;
+      }
+
+      .cpk-playground-welcome-title {
+        color: #24242b;
+        font-size: 15px;
+        font-weight: 600;
+        letter-spacing: -0.015em;
+      }
+
+      .cpk-playground-composer {
+        border: 1px solid #dcdce8;
+        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),
+          0 0 0 3px rgba(190, 194, 255, 0.3);
+      }
+
+      .inspector-window[data-color-scheme="dark"] .cpk-playground-root,
+      .inspector-window[data-color-scheme="dark"] .cpk-playground-header {
+        background: #15171e !important;
+      }
+
+      .inspector-window[data-color-scheme="dark"]
+        .cpk-playground-welcome-title {
+        color: #f3f4f8 !important;
+      }
+
+      .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),
+          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),
+          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;
+      }
+
+      .cpk-playground-thinking-dot {
+        animation: cpk-playground-thinking 1.2s ease-in-out infinite;
+      }
+
+      .cpk-playground-thinking-dot:nth-child(2) {
+        animation-delay: 0.12s;
+      }
+
+      .cpk-playground-thinking-dot:nth-child(3) {
+        animation-delay: 0.24s;
+      }
+
+      .cpk-playground-reasoning summary::-webkit-details-marker {
+        display: none;
+      }
+
+      .cpk-playground-reasoning[open] .cpk-playground-reasoning-chevron {
+        transform: rotate(90deg);
+      }
+
+      @container (max-width: 560px) {
+        .cpk-playground-header {
+          align-items: stretch;
+        }
+
+        .cpk-playground-actions {
+          width: 100%;
+        }
+
+        .cpk-playground-thread-select {
+          min-width: 0;
+          max-width: none;
+          flex: 1;
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .cpk-playground-message-enter,
+        .cpk-playground-thinking-dot {
+          animation: none;
+        }
+      }
+
       .rounded-sm {
         border-radius: 3px;
       }
@@ -6463,6 +7245,10 @@ ${argsString}</pre
         box-sizing: border-box;
         transition:
           transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
+          scale 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
+          background-color 200ms ease,
+          border-color 200ms ease,
+          box-shadow 200ms ease,
           opacity 160ms ease;
       }
 
@@ -6490,6 +7276,7 @@ ${argsString}</pre
         touch-action: none;
         user-select: none;
         z-index: 60;
+        background: transparent;
       }
 
       .edge-resize-handle {
@@ -6624,11 +7411,67 @@ ${argsString}</pre
         flex-shrink: 0;
         transition:
           background-color 0.15s,
-          border-color 0.15s;
+          border-color 0.15s,
+          color 0.15s;
+      }
+      .cpk-copy-btn:hover {
+        background-color: #f0f0f4;
+        border-color: #afafb7;
+      }
+
+      .inspector-window[data-color-scheme="dark"] .cpk-copy-btn {
+        background: #191c24;
+        border-color: #3a3d49;
+        color: #f3f4f8;
+      }
+
+      .inspector-window[data-color-scheme="dark"] .cpk-copy-btn:hover {
+        background: #20232d;
+        border-color: #57575b;
+      }
+
+      .inspector-sidebar[data-icon-rail="true"]
+        .inspector-sidebar-agent-scope
+        [data-context-dropdown-root="true"]
+        > div {
+        left: 100%;
+        margin-inline-start: 8px;
+      }
+
+      .inspector-icon-rail-menu {
+        transform-origin: left center;
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+        transform: translateX(-8px) scale(0.96);
+        transition:
+          opacity 180ms ease,
+          transform 180ms ease,
+          visibility 180ms ease;
+      }
+
+      .inspector-icon-rail-menu[data-open="true"] {
+        opacity: 1;
+        visibility: visible;
+        pointer-events: auto;
+        transform: translateX(0) scale(1);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .inspector-icon-rail-menu {
+          transition: none;
+        }
       }
-      .cpk-copy-btn:hover {
-        background-color: #f0f0f4;
-        border-color: #afafb7;
+
+      .inspector-sidebar[data-icon-rail="true"]
+        .inspector-sidebar-agent-scope
+        [data-context-dropdown-root="true"]
+        > div::before {
+        content: "";
+        position: absolute;
+        inset-block: 0;
+        inset-inline-end: 100%;
+        width: 12px;
       }
 
       .cpk-section-header {
@@ -6636,6 +7479,9 @@ ${argsString}</pre
         border-bottom: 1px solid rgba(0, 0, 0, 0.08);
         padding: 10px 16px;
       }
+      .inspector-window[data-color-scheme="dark"] .cpk-section-header {
+        border-bottom-color: #3a3d49;
+      }
       .cpk-section-header h4 {
         font-size: 11px;
         font-weight: 600;
@@ -6882,6 +7728,7 @@ ${argsString}</pre
       .console-button:hover {
         background-color: var(--cpk-launcher-face-solid) !important;
         border-color: rgba(190, 194, 255, 0.45) !important;
+        transform: scale(1.05);
       }
       .console-button:focus-visible {
         outline-color: #bec2ff !important;
@@ -7230,6 +8077,12 @@ ${argsString}</pre
           .cpk-launcher-signal-wash {
           animation: none !important;
         }
+        .console-button {
+          transition: opacity 160ms ease;
+        }
+        .console-button:hover {
+          transform: none;
+        }
       }
 
       /* ── Launcher HUD: hover menu, quieter than the error island ── */
@@ -7241,6 +8094,9 @@ ${argsString}</pre
       }
 
       .cpk-launcher-hud {
+        --hud-fill: var(--cpk-inspector-surface-dark);
+        --hud-line: rgb(190 194 255 / 0.5);
+        --hud-blur: blur(12px) saturate(1.2);
         position: absolute;
         top: 0;
         z-index: 4;
@@ -7274,38 +8130,47 @@ ${argsString}</pre
       }
 
       .cpk-launcher-hud__card {
-        --hud-fill: rgb(28 31 36 / 0.88);
-        --hud-line: rgb(190 194 255 / 0.5);
         position: relative;
         width: 228px;
         padding: 4px;
         border: 1px dotted var(--hud-line);
-        border-radius: 10px;
+        border-radius: var(--cpk-inspector-shell-radius);
         background: var(--hud-fill);
         color: #fff;
-        backdrop-filter: blur(12px) saturate(1.2);
+        backdrop-filter: var(--hud-blur);
+        -webkit-backdrop-filter: var(--hud-blur);
         box-shadow: 0 8px 20px rgb(1 5 7 / 0.18);
       }
 
+      .cpk-launcher-hud[data-color-scheme="light"] {
+        --hud-fill: #fff;
+        --hud-line: #d8d8e8;
+      }
+
+      .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__card {
+        color: #010507;
+      }
+
       .cpk-launcher-hud__arrow {
         position: absolute;
         top: calc(var(--cpk-launcher-size) / 2);
+        z-index: 1;
         width: 10px;
         height: 10px;
-        background: var(--hud-fill);
+        border: 0;
+        /* The card frosts the page behind it, so it reads lighter than the
+           raw fill. Mix a little white so the arrow matches the glass card
+           without going lighter than the HUD. */
+        background: color-mix(in srgb, var(--hud-fill) 88%, white 12%);
         transform: translateY(-50%) rotate(45deg);
       }
 
       .cpk-launcher-hud[data-cpk-hud-side="left"] .cpk-launcher-hud__arrow {
-        right: -5px;
-        border-top: 1px solid var(--hud-line);
-        border-right: 1px solid var(--hud-line);
+        right: 9px;
       }
 
       .cpk-launcher-hud[data-cpk-hud-side="right"] .cpk-launcher-hud__arrow {
-        left: -5px;
-        border-bottom: 1px solid var(--hud-line);
-        border-left: 1px solid var(--hud-line);
+        left: 9px;
       }
 
       .cpk-launcher-hud__list {
@@ -7339,6 +8204,14 @@ ${argsString}</pre
         background: rgb(255 255 255 / 0.06);
       }
 
+      .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"] {
+        background: #f0f0f4;
+      }
+
       .cpk-launcher-hud__action {
         display: flex;
         gap: 8px;
@@ -7356,6 +8229,10 @@ ${argsString}</pre
         cursor: pointer;
       }
 
+      .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__action {
+        color: #010507;
+      }
+
       /* Stretch the row action over the whole tab, including the detail
          copy. The help mark sits above this layer. */
       .cpk-launcher-hud__action::after {
@@ -7399,6 +8276,10 @@ ${argsString}</pre
         line-height: 1;
       }
 
+      .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__help {
+        color: #68686e;
+      }
+
       .cpk-launcher-hud__help:focus-visible,
       .cpk-launcher-hud__action:focus-visible {
         outline: 2px solid #bec2ff;
@@ -7425,9 +8306,14 @@ ${argsString}</pre
           padding-bottom 200ms cubic-bezier(0.16, 1, 0.3, 1);
       }
 
+      .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__detail {
+        color: #68686e;
+      }
+
       .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;
@@ -7441,6 +8327,98 @@ ${argsString}</pre
         }
       }
 
+      /*
+       * On mount, borrow the hover HUD for one short introduction. The card
+       * establishes the destination first; its rows then resolve in order so
+       * the eye can count the available features instead of receiving one
+       * undifferentiated block. Only opacity and transform move.
+       */
+      @keyframes cpk-launcher-hud-intro {
+        0% {
+          opacity: 0;
+          transform: translateX(8px);
+        }
+        8%,
+        88% {
+          opacity: 1;
+          transform: none;
+        }
+        100% {
+          opacity: 0;
+          transform: translateX(4px);
+        }
+      }
+
+      @keyframes cpk-launcher-hud-intro-right {
+        0% {
+          opacity: 0;
+          transform: translateX(-8px);
+        }
+        8%,
+        88% {
+          opacity: 1;
+          transform: none;
+        }
+        100% {
+          opacity: 0;
+          transform: translateX(-4px);
+        }
+      }
+
+      @keyframes cpk-launcher-hud-row-online {
+        from {
+          opacity: 0;
+          transform: translateY(4px);
+        }
+        to {
+          opacity: 1;
+          transform: none;
+        }
+      }
+
+      @keyframes cpk-launcher-hud-check-online {
+        from {
+          opacity: 0;
+          transform: scale(0.65);
+        }
+        to {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+
+      .cpk-launcher-hud[data-cpk-hud-intro="true"] {
+        animation: cpk-launcher-hud-intro var(--cpk-launcher-hud-intro-duration)
+          cubic-bezier(0.16, 1, 0.3, 1) both;
+      }
+
+      .cpk-launcher-hud[data-cpk-hud-intro="true"][data-cpk-hud-side="right"] {
+        animation-name: cpk-launcher-hud-intro-right;
+      }
+
+      .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;
+        animation-delay: var(--cpk-hud-row-delay);
+      }
+
+      .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);
+      }
+
+      @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 {
+          animation: none !important;
+          opacity: 1;
+          transform: none;
+        }
+      }
+
       /*
        * Marker on the navigation entry, which is what keeps a signal alive
        * once the panel is open and the launcher is hidden. Static by design:
@@ -7467,7 +8445,7 @@ ${argsString}</pre
       /* ── Inspector window ────────────────────────────────────────── */
       .inspector-window {
         border: 1px solid #d8d8e8 !important;
-        border-radius: 5px !important;
+        border-radius: var(--cpk-inspector-shell-radius) !important;
         box-shadow: none !important;
       }
 
@@ -7583,10 +8561,71 @@ ${argsString}</pre
       .inspector-sidebar[data-icon-rail="true"] .inspector-nav-control,
       .inspector-sidebar[data-icon-rail="true"] .inspector-sidebar-control,
       .inspector-sidebar[data-icon-rail="true"] .inspector-sidebar-toggle {
+        box-sizing: border-box !important;
+        width: 36px !important;
+        height: 36px !important;
+        min-width: 36px !important;
+        min-height: 36px !important;
+        justify-content: center !important;
+        align-items: center !important;
+        gap: 0 !important;
+        padding: 0 !important;
+        overflow: visible !important;
+      }
+      .inspector-sidebar[data-icon-rail="true"] .inspector-nav-icon,
+      .inspector-sidebar[data-icon-rail="true"] .inspector-nav-icon svg,
+      .inspector-sidebar[data-icon-rail="true"]
+        .inspector-context-dropdown-icon,
+      .inspector-sidebar[data-icon-rail="true"]
+        .inspector-context-dropdown-icon
+        svg,
+      .inspector-sidebar[data-icon-rail="true"]
+        .inspector-agent-placeholder
+        svg {
+        width: 18px !important;
+        height: 18px !important;
+        overflow: visible !important;
+      }
+      .inspector-sidebar[data-icon-rail="true"]
+        .inspector-agent-selector
+        > [data-context-dropdown-root="true"] {
+        display: flex !important;
+        flex: none !important;
+        width: 36px !important;
+        min-width: 36px !important;
+        max-width: 36px !important;
         justify-content: center !important;
         align-items: center !important;
+      }
+      .inspector-sidebar[data-icon-rail="true"]
+        .inspector-agent-selector
+        > [data-context-dropdown-root="true"]
+        > button,
+      .inspector-sidebar[data-icon-rail="true"] .inspector-agent-placeholder {
+        display: flex !important;
+        width: 36px !important;
+        height: 36px !important;
+        min-width: 36px !important;
+        min-height: 36px !important;
+        max-width: 36px !important;
+        align-items: center !important;
+        justify-content: center !important;
         gap: 0 !important;
-        padding-inline: 0 !important;
+        padding: 0 !important;
+        transition:
+          background-color 180ms ease,
+          border-color 180ms ease,
+          color 180ms ease !important;
+      }
+      .inspector-sidebar[data-icon-rail="true"]
+        .inspector-context-dropdown-label,
+      .inspector-sidebar[data-icon-rail="true"]
+        .inspector-context-dropdown-chevron {
+        display: none !important;
+        width: 0 !important;
+        min-width: 0 !important;
+        flex: none !important;
+        overflow: hidden !important;
       }
       .inspector-sidebar[data-icon-rail="true"] .inspector-nav-label,
       .inspector-sidebar[data-icon-rail="true"] .inspector-sidebar-label {
@@ -7816,7 +8855,10 @@ ${argsString}</pre
 			clearTimeout(this.transitionTimeoutId);
 			this.transitionTimeoutId = null;
 		}
+		this.clearIconRailContextCloseTimer();
 		this.unsubscribeFromInspectorThreadBridge();
+		this.stopIntelligenceStory();
+		this.clearIntelligencePromptReset();
 		this.threadsSetupPromptCopyGeneration += 1;
 		if (this.threadsSetupPromptCopyResetTimeoutId !== null) {
 			window.clearTimeout(this.threadsSetupPromptCopyResetTimeoutId);
@@ -7825,6 +8867,7 @@ ${argsString}</pre
 		this.threadsSetupPromptCopyState = "idle";
 		this.stopSignalPulse();
 		this.cancelGestureTail();
+		this.cancelLauncherHudIntro();
 		this.cancelThreadRefreshDebounce();
 		this.clearInspectorUsageRefresh();
 		this.cleanupThreadsExampleOverviewVideo();
@@ -7861,6 +8904,7 @@ ${argsString}</pre
 		else this.centerContext("window");
 		this.ensureAnnouncementLoading();
 		this.updateHostTransform(this.isOpen ? "window" : "button");
+		this.scheduleLauncherHudIntro();
 	}
 	render() {
 		return this.isOpen ? html`
@@ -7884,6 +8928,7 @@ ${argsString}</pre
 		this.maybeCompleteEventErrorView();
 		this.flushErrorLandingScroll();
 		this.maybeTrackHomeViewed();
+		this.syncIntelligenceStory();
 		if (!this.isOpen) {
 			this.lastScrolledAgentNavigationLayout = null;
 			return;
@@ -7923,8 +8968,6 @@ ${argsString}</pre
 			"text-xs",
 			"font-medium",
 			"text-white",
-			"transition",
-			"hover:scale-105",
 			"focus-visible:outline",
 			"focus-visible:outline-2",
 			"focus-visible:outline-offset-2",
@@ -8044,6 +9087,41 @@ ${argsString}</pre
 	isLauncherHudBlocked() {
 		return this.gestureSignal !== null;
 	}
+	scheduleLauncherHudIntro(delay = LAUNCHER_HUD_INTRO_MS.delay) {
+		if (this.launcherHudIntroStartTimer !== null) clearTimeout(this.launcherHudIntroStartTimer);
+		this.launcherHudIntroStartTimer = setTimeout(() => {
+			this.launcherHudIntroStartTimer = null;
+			if (!this.isConnected || this.isOpen) return;
+			if (this.isLauncherHudBlocked()) {
+				this.scheduleLauncherHudIntro(LAUNCHER_HUD_INTRO_MS.blockedRetry);
+				return;
+			}
+			this.resolveLauncherHudSide();
+			this.launcherHudIntro = true;
+			this.launcherHudOpen = true;
+			this.requestUpdate();
+			this.launcherHudIntroEndTimer = setTimeout(() => {
+				this.launcherHudIntroEndTimer = null;
+				this.launcherHudIntro = false;
+				this.launcherHudOpen = false;
+				this.launcherHudHelp = null;
+				this.requestUpdate();
+			}, LAUNCHER_HUD_INTRO_MS.duration);
+		}, delay);
+	}
+	cancelLauncherHudIntro() {
+		if (this.launcherHudIntroStartTimer !== null) {
+			clearTimeout(this.launcherHudIntroStartTimer);
+			this.launcherHudIntroStartTimer = null;
+		}
+		if (this.launcherHudIntroEndTimer !== null) {
+			clearTimeout(this.launcherHudIntroEndTimer);
+			this.launcherHudIntroEndTimer = null;
+		}
+		if (!this.launcherHudIntro) return;
+		this.launcherHudIntro = false;
+		if (this.isConnected) this.requestUpdate();
+	}
 	resolveLauncherHudSide() {
 		if (typeof window === "undefined") {
 			this.launcherHudSide = "left";
@@ -8072,6 +9150,7 @@ ${argsString}</pre
 		this.requestUpdate();
 	}
 	closeLauncherHud() {
+		this.cancelLauncherHudIntro();
 		if (this.launcherHudCloseTimer !== null) {
 			clearTimeout(this.launcherHudCloseTimer);
 			this.launcherHudCloseTimer = null;
@@ -8109,6 +9188,10 @@ ${argsString}</pre
         class="cpk-launcher-hud__row"
         data-cpk-hud-row=${args.id}
         data-cpk-hud-help=${helpOpen ? "open" : nothing}
+        style=${styleMap({
+			"--cpk-hud-row-index": `${args.introIndex}`,
+			"--cpk-hud-row-delay": `${LAUNCHER_HUD_INTRO_MS.rowStart + args.introIndex * LAUNCHER_HUD_INTRO_MS.rowStagger}ms`
+		})}
         @click=${(event) => this.handleHudRowClick(event, args.id)}
       >
         <button
@@ -8138,23 +9221,31 @@ ${argsString}</pre
 	}
 	renderLauncherHud() {
 		if (!this.launcherHudOpen) return nothing;
-		const threadsOn = this.areThreadEndpointsAvailable();
-		const intelligenceOn = Boolean(this._core?.intelligence);
-		const learningOn = intelligenceOn && this._memoriesAvailable;
+		const homeModel = this.getHomeModel();
+		const threadsOn = homeModel.services.some((service) => service.id === "threads" && service.enabled);
+		const learningOn = homeModel.services.some((service) => service.id === "memory" && service.enabled);
+		const intelligenceOn = homeModel.hero.connection === "connected";
 		return html`
       <div
         class="cpk-launcher-hud"
         id="cpk-launcher-hud"
         data-cpk-launcher-hud
         data-cpk-hud-side=${this.launcherHudSide}
+        data-cpk-hud-intro=${this.launcherHudIntro ? "true" : nothing}
+        data-color-scheme=${this.colorScheme}
+        style=${styleMap({
+			"--cpk-launcher-hud-intro-duration": `${LAUNCHER_HUD_INTRO_MS.duration}ms`,
+			"--cpk-launcher-hud-row-duration": `${LAUNCHER_HUD_INTRO_MS.rowDuration}ms`
+		})}
       >
+        <span class="cpk-launcher-hud__arrow" aria-hidden="true"></span>
         <div class="cpk-launcher-hud__card">
-          <span class="cpk-launcher-hud__arrow" aria-hidden="true"></span>
           <ul class="cpk-launcher-hud__list" role="list">
             ${this.renderHudRow({
 			id: "inspector",
 			label: HUD_OPEN_INSPECTOR_LABEL,
-			detail: HUD_OPEN_INSPECTOR_DETAIL
+			detail: HUD_OPEN_INSPECTOR_DETAIL,
+			introIndex: 0
 		})}
           </ul>
           <ul class="cpk-launcher-hud__list" role="list">
@@ -8162,19 +9253,22 @@ ${argsString}</pre
 			id: "threads",
 			label: threadsOn ? HUD_THREADS_ON_LABEL : HUD_THREADS_OFF_LABEL,
 			detail: threadsOn ? HUD_THREADS_ON_DETAIL : HUD_THREADS_OFF_DETAIL,
-			connected: threadsOn
+			connected: threadsOn,
+			introIndex: 1
 		})}
             ${this.renderHudRow({
 			id: "intelligence",
 			label: intelligenceOn ? HUD_INTELLIGENCE_ON_LABEL : HUD_INTELLIGENCE_OFF_LABEL,
 			detail: intelligenceOn ? HUD_INTELLIGENCE_ON_DETAIL : HUD_INTELLIGENCE_OFF_DETAIL,
-			connected: intelligenceOn
+			connected: intelligenceOn,
+			introIndex: 2
 		})}
             ${this.renderHudRow({
 			id: "learning",
 			label: learningOn ? HUD_LEARNING_ON_LABEL : HUD_LEARNING_OFF_LABEL,
 			detail: learningOn ? HUD_LEARNING_ON_DETAIL : HUD_LEARNING_OFF_DETAIL,
-			connected: learningOn
+			connected: learningOn,
+			introIndex: 3
 		})}
           </ul>
         </div>
@@ -8263,12 +9357,12 @@ ${argsString}</pre
                       </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>
                   `;
 			})}
@@ -8277,34 +9371,34 @@ ${argsString}</pre
 		})}
         </nav>
         ${automaticallyCollapsed ? nothing : html`
-              <button
-                type="button"
-                class="inspector-sidebar-toggle"
-                data-inspector-sidebar-toggle
-                aria-label=${iconRail ? "Expand sidebar" : "Collapse sidebar"}
-                aria-expanded=${iconRail ? "false" : "true"}
-                data-inspector-tooltip=${iconRail ? "Expand sidebar" : nothing}
-                title=${iconRail ? nothing : "Collapse sidebar"}
-                style=${INTERACTIVE_FOCUS_BASE_STYLE}
-                @pointerenter=${iconRail ? this.handleSidebarRailTooltipShow : nothing}
-                @pointerleave=${iconRail ? this.handleSidebarRailTooltipHide : nothing}
-                @focus=${iconRail ? this.handleSidebarRailTooltipShow : nothing}
-                @blur=${iconRail ? this.handleSidebarRailTooltipHide : nothing}
-                @click=${this.handleSidebarToggle}
-              >
-                <span class="inspector-nav-icon" aria-hidden="true">
-                  ${this.renderIcon(iconRail ? "ChevronRight" : "ChevronLeft")}
-                </span>
-                <span class="inspector-nav-label"
-                  >${iconRail ? "Expand" : "Collapse"}</span
-                >
-              </button>
-            `}
-        ${iconRail ? nothing : html`
               <div class="inspector-sidebar-footer">
-                <div class="inspector-sidebar-status-list">
-                  ${this.renderSidebarIntelligenceStatus(homeModel)}
-                </div>
+                ${iconRail ? nothing : html`
+                      <div class="inspector-sidebar-status-list">
+                        ${this.renderSidebarIntelligenceStatus(homeModel)}
+                      </div>
+                    `}
+                <button
+                  type="button"
+                  class="inspector-sidebar-toggle"
+                  data-inspector-sidebar-toggle
+                  aria-label=${iconRail ? "Expand sidebar" : "Collapse sidebar"}
+                  aria-expanded=${iconRail ? "false" : "true"}
+                  data-inspector-tooltip=${iconRail ? "Expand sidebar" : nothing}
+                  title=${iconRail ? nothing : "Collapse sidebar"}
+                  style=${INTERACTIVE_FOCUS_BASE_STYLE}
+                  @pointerenter=${iconRail ? this.handleSidebarRailTooltipShow : nothing}
+                  @pointerleave=${iconRail ? this.handleSidebarRailTooltipHide : nothing}
+                  @focus=${iconRail ? this.handleSidebarRailTooltipShow : nothing}
+                  @blur=${iconRail ? this.handleSidebarRailTooltipHide : nothing}
+                  @click=${this.handleSidebarToggle}
+                >
+                  <span class="inspector-nav-icon" aria-hidden="true">
+                    ${this.renderIcon(iconRail ? "ChevronRight" : "ChevronLeft")}
+                  </span>
+                  <span class="inspector-nav-label"
+                    >${iconRail ? "Expand" : "Collapse"}</span
+                  >
+                </button>
               </div>
             `}
       </aside>
@@ -8509,23 +9603,37 @@ ${argsString}</pre
 		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`
@@ -8537,7 +9645,7 @@ ${argsString}</pre
                     ${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}
@@ -8551,9 +9659,18 @@ ${argsString}</pre
                     ${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"
@@ -8836,24 +9953,394 @@ ${argsString}</pre
                   data-feature-state-group="available"
                   aria-label="Available features"
                 >
-                  <header class="inspector-home-feature-group-header">
-                    <strong>Available</strong>
-                    <span>${disabledServices.length}</span>
-                  </header>
-                  <div class="inspector-home-feature-list">
-                    ${disabledServices.length > 0 ? disabledServices.map(renderService) : html`
-                            <p class="inspector-home-feature-group-empty">Everything is active</p>
-                          `}
-                  </div>
-                </section>
-              </div>
-            `}
-      </section>
+                  <header class="inspector-home-feature-group-header">
+                    <strong>Available</strong>
+                    <span>${disabledServices.length}</span>
+                  </header>
+                  <div class="inspector-home-feature-list">
+                    ${disabledServices.length > 0 ? disabledServices.map(renderService) : html`
+                            <p class="inspector-home-feature-group-empty">Everything is active</p>
+                          `}
+                  </div>
+                </section>
+              </div>
+            `}
+      </section>
+    `;
+	}
+	handleHomeHeroCta(action) {
+		if (this.core?.telemetryDisabled) return;
+		trackHomeCtaClicked({ action_kind: action.kind });
+	}
+	/**
+	* 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;
+		}
+	}
+	/**
+	* 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>
     `;
 	}
-	handleHomeHeroCta(action) {
-		if (this.core?.telemetryDisabled) return;
-		trackHomeCtaClicked({ action_kind: action.kind });
+	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;
@@ -9067,16 +10554,6 @@ ${argsString}</pre
                       @pointerup=${this.handleResizePointerUp}
                       @pointercancel=${this.handleResizePointerCancel}
                     ></div>
-                    <div
-                      class="resize-handle pointer-events-auto absolute bottom-0 left-0 flex h-7 w-7 cursor-nesw-resize items-center justify-center text-gray-600 transition hover:text-gray-900"
-                      data-resize-edge="sw"
-                      role="presentation"
-                      aria-hidden="true"
-                      @pointerdown=${this.handleResizePointerDown}
-                      @pointermove=${this.handleResizePointerMove}
-                      @pointerup=${this.handleResizePointerUp}
-                      @pointercancel=${this.handleResizePointerCancel}
-                    ></div>
                   `}
               <div
                 class="resize-handle pointer-events-auto absolute bottom-0 right-0 flex h-7 w-7 cursor-nwse-resize items-center justify-center text-gray-600 transition hover:text-gray-900"
@@ -9668,11 +11145,8 @@ ${argsString}</pre
 		return this.sanitizeForLogging(payload);
 	}
 	normalizeMessageContent(content) {
-		if (typeof content === "string") return content;
-		if (content && typeof content === "object" && "text" in content) {
-			const maybeText = content.text;
-			if (typeof maybeText === "string") return maybeText;
-		}
+		const extracted = textFromUnknownContent(content);
+		if (extracted) return extracted;
 		if (content === null || content === void 0) return "";
 		if (typeof content === "object") try {
 			return JSON.stringify(this.sanitizeForLogging(content));
@@ -9873,6 +11347,24 @@ ${argsString}</pre
 		});
 		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);
@@ -9892,39 +11384,39 @@ ${argsString}</pre
 		const sendDisabled = !agentId || this.playgroundIsLoadingThread || !this.playgroundIsRunning && !this.playgroundInput.trim();
 		return html`
       <form
-        class=${centered ? "mt-5 w-full" : "bg-white px-3 pb-3 pt-1.5"}
+        class=${centered ? "cpk-playground-form mt-5 w-full" : "cpk-playground-form bg-white px-3 pb-3 pt-1.5"}
         @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="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]"
+          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]"
         >
           <textarea
-            class="min-h-[40px] max-h-32 flex-1 resize-none bg-transparent px-2.5 py-2.5 text-[13px] leading-5 text-gray-900 outline-none placeholder:text-gray-500 disabled:cursor-not-allowed disabled:opacity-60"
+            class="cpk-playground-input min-h-[40px] max-h-32 flex-1 resize-none bg-transparent px-2.5 py-2.5 text-[13px] leading-5 text-gray-900 outline-none placeholder:text-gray-500 disabled:cursor-not-allowed disabled:opacity-60"
             rows="1"
             placeholder=${placeholder}
             aria-label="Playground message"
@@ -9935,7 +11427,7 @@ ${argsString}</pre
           ></textarea>
           <button
             type=${this.playgroundIsRunning ? "button" : "submit"}
-            class=${`mb-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-2 [&>svg]:h-[18px] [&>svg]:w-[18px] ${sendDisabled ? "cursor-not-allowed bg-[#00000014] text-[rgb(13,13,13)] opacity-50" : "cursor-pointer bg-black text-white hover:opacity-70 active:opacity-60"}`}
+            class=${`cpk-playground-send mb-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-2 [&>svg]:h-[18px] [&>svg]:w-[18px] ${sendDisabled ? "cursor-not-allowed bg-[#00000014] text-[rgb(13,13,13)] opacity-50" : "cursor-pointer bg-black text-white hover:opacity-70 active:opacity-60"}`}
             aria-label=${this.playgroundIsRunning ? "Stop agent" : "Send playground message"}
             ?disabled=${sendDisabled}
             @click=${this.playgroundIsRunning ? this.handlePlaygroundStop : nothing}
@@ -10007,31 +11499,41 @@ ${argsString}</pre
                 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"
@@ -10044,67 +11546,66 @@ ${argsString}</pre
         </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="mx-auto flex h-full w-full max-w-3xl flex-col items-center justify-center text-center"
-                    >
-                      <p class="text-base font-medium tracking-tight text-gray-900">
-                        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";
@@ -10116,152 +11617,156 @@ ${argsString}</pre
 				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)}
@@ -10648,6 +12153,7 @@ ${argsString}</pre
 			this.requestUpdate();
 			return;
 		}
+		this.tryFromHereError = null;
 		this.selectedThreadId = threadId;
 		if (showingExamples && this.isExampleThreadId(threadId)) {
 			this.selectedRealThreadIsExplicit = false;
@@ -10911,6 +12417,7 @@ ${argsString}</pre
           <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`
@@ -11089,6 +12596,74 @@ ${argsString}</pre
 		}
 	}
 	/**
+	* 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
@@ -11472,6 +13047,13 @@ ${argsString}</pre
                         .focusRequestId=${this.threadFocusRequestId}
                         .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
@@ -11712,11 +13294,7 @@ ${argsString}</pre
                     >
                       ${isExpanded ? html`
                             <div class="group relative">
-                              <pre
-                                class="m-0 whitespace-pre-wrap break-words text-[10px] font-mono text-gray-600"
-                              >
-${prettyEvent}</pre
-                              >
+                              ${renderHighlightedJsonBlock(extractedEvent)}
                               <button
                                 class="absolute right-0 top-0 cursor-pointer rounded px-2 py-1 text-[10px] opacity-0 transition group-hover:opacity-100 ${this.copiedEvents.has(event.id) ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900"}"
                                 @click=${(e) => {
@@ -11938,7 +13516,7 @@ ${prettyEvent}</pre
           <div class="overflow-auto">
             ${messages && messages.length > 0 ? html`
                   <div class="w-full text-xs">
-                    <div class="flex bg-gray-50">
+                    <div class="cpk-agent-messages-head flex bg-gray-50">
                       <div
                         class="w-40 shrink-0 px-4 py-2 font-medium text-gray-700"
                       >
@@ -11948,7 +13526,7 @@ ${prettyEvent}</pre
                         Content
                       </div>
                     </div>
-                    <div class="divide-y divide-gray-200">
+                    <div class="cpk-agent-messages-rows">
                       ${messages.map((msg) => {
 			const role = msg.role || "unknown";
 			const roleColors = {
@@ -11966,7 +13544,7 @@ ${prettyEvent}</pre
 			const isFailedResult = role === "tool" && toolError?.toolCallId !== void 0 && toolError.toolCallId === msg.toolCallId;
 			return html`
                           <div
-                            class=${isFailedResult ? "flex items-start bg-rose-50" : "flex items-start"}
+                            class=${isFailedResult ? "cpk-agent-message-row flex items-start bg-rose-50" : "cpk-agent-message-row flex items-start"}
                             data-cpk-failed-tool-result=${isFailedResult ? msg.toolCallId : nothing}
                           >
                             <div class="w-40 shrink-0 px-4 py-2">
@@ -11977,9 +13555,10 @@ ${prettyEvent}</pre
                               </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}
@@ -12048,10 +13627,12 @@ ${prettyEvent}</pre
             >${this.renderIcon("ChevronDown")}</span
           >
         </button>
-        ${this.contextMenuOpen ? html`
+        ${iconRail || this.contextMenuOpen ? html`
               <div
-                class="absolute left-0 z-50 mt-1.5 w-40 rounded-md border border-gray-200 bg-white py-1 shadow-md ring-1 ring-black/5"
+                class="absolute left-0 z-50 mt-1.5 w-40 rounded-md border border-gray-200 bg-white py-1 shadow-md ring-1 ring-black/5${iconRail ? " inspector-icon-rail-menu" : ""}"
                 data-context-dropdown-root="true"
+                data-open=${this.contextMenuOpen ? "true" : "false"}
+                aria-hidden=${this.contextMenuOpen ? "false" : "true"}
               >
                 ${filteredOptions.map((option) => html`
                     <button
@@ -12188,8 +13769,14 @@ ${prettyEvent}</pre
 		this.contextMenuOpen = !this.contextMenuOpen;
 		this.requestUpdate();
 	}
+	clearIconRailContextCloseTimer() {
+		if (this.iconRailContextCloseTimer === null) return;
+		clearTimeout(this.iconRailContextCloseTimer);
+		this.iconRailContextCloseTimer = null;
+	}
 	handleContextOptionSelect(key) {
 		if (!this.contextOptions.some((option) => option.key === key)) return;
+		this.clearIconRailContextCloseTimer();
 		if (this.selectedContext !== key) {
 			this.selectedContext = key;
 			this.expandedRows.clear();
@@ -12684,23 +14271,25 @@ ${prettyEvent}</pre
         </button>
 
         ${isExpanded ? html`
-              <div class="border-t border-gray-200 bg-gray-50/50 px-4 py-3">
+              <div class="border-t border-gray-200 px-4 py-3">
                 <div class="mb-3">
-                  <h5 class="mb-1 text-xs font-semibold text-gray-700">ID</h5>
-                  <code
-                    class="font-mono text-xs font-medium text-gray-800 flex-1 truncate min-w-0"
-                    >${id}</code
-                  >
-                  <button
-                    type="button"
-                    class="cpk-copy-btn"
-                    @click=${(e) => {
+                  <div class="mb-1 flex items-center justify-between gap-2">
+                    <h5 class="text-xs font-semibold text-gray-700">ID</h5>
+                    <button
+                      type="button"
+                      class="cpk-copy-btn"
+                      @click=${(e) => {
 			e.stopPropagation();
 			this.copyContextValue(id, `${id}:id`, e);
 		}}
+                    >
+                      ${this.copiedContextItems.has(`${id}:id`) ? "Copied" : "Copy"}
+                    </button>
+                  </div>
+                  <code
+                    class="block min-w-0 truncate font-mono text-xs font-medium text-gray-800"
+                    >${id}</code
                   >
-                    ${this.copiedContextItems.has(`${id}:id`) ? "✓" : "Copy"}
-                  </button>
                 </div>
                 ${hasValue ? html`
                       <div class="mb-2 flex items-center justify-between gap-2">
@@ -13427,8 +15016,18 @@ function defineWebInspector(registry = globalThis.customElements) {
 	defineElementOnce(registry, "cpk-memory-list", CpkMemoryList);
 	defineElementOnce(registry, WEB_INSPECTOR_TAG, WebInspectorElement);
 }
+/**
+* Bind a host-owned core before an Inspector is connected to the DOM. Disabling
+* auto-attachment first prevents `connectedCallback` from briefly selecting a
+* different global core.
+*/
+function configureWebInspectorElement(inspector, core) {
+	inspector.autoAttachCore = false;
+	inspector.core = core;
+	return inspector;
+}
 defineWebInspector();
 
 //#endregion
-export { CpkThreadInspector, THREAD_INSPECTOR_TAG, WEB_INSPECTOR_TAG, WebInspectorElement, defineWebInspector, ɵCpkThreadDetails, buildCapabilityRows as ɵbuildCapabilityRows, maxRecallScore as ɵmaxRecallScore, normalizeRelevance as ɵnormalizeRelevance, relevanceBarWidth as ɵrelevanceBarWidth };
+export { CpkThreadInspector, THREAD_INSPECTOR_TAG, WEB_INSPECTOR_TAG, WebInspectorElement, configureWebInspectorElement, defineWebInspector, ɵCpkThreadDetails, buildCapabilityRows as ɵbuildCapabilityRows, maxRecallScore as ɵmaxRecallScore, normalizeRelevance as ɵnormalizeRelevance, relevanceBarWidth as ɵrelevanceBarWidth };
 //# sourceMappingURL=index.mjs.map