@copilotkit/web-inspector 1.69.1 → 1.69.3

package/dist/index.mjs

@@ -8,14 +8,13 @@ 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 { ACTIVITY_STARTERS, compileActivityRecipe, compileChatSnippet, compileFromActivityMessage, compileReasoningRecipe, compileTextRecipe, compileToolCallRecipe, createSnippetId, deleteEventSnippet, editorStateFromSnippet, expandSnippetEventsForRun, exportEventSnippetsJson, groupEventSnippets, importEventSnippets, loadEventSnippets, parseSnippetEvents, recipeIconName, recipeIconWrapClass, recipeLabel, snippetContainsToolCall, snippetJsonIsRunnable, upsertEventSnippet } from "./lib/event-snippets.mjs";
-import { TELEMETRY_DOCS_URL, ensureTelemetryDistinctId, getRuntimeUrlType, getTelemetryDistinctIdForUrl, maybeShowDisclosure, trackErrorSignalViewed, trackEventSnippetsRun, trackEventSnippetsSaved, 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, 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 { LitElement, css, html, nothing, render, unsafeCSS } from "lit";
 import { marked } from "marked";
 import { styleMap } from "lit/directives/style-map.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { icons } from "lucide";
-import { CopilotKitCoreErrorCode, CopilotKitCoreRuntimeConnectionStatus, createInspectorThreadRequestId, emitInspectorStopViewing, emitInspectorViewThread, isInspectorThreadBridgeEnabled, onInspectorActiveThread, onInspectorViewThreadResult, ɵcreateThreadStore, ɵinjectInspectorEvents, ɵresetInspectorInject, ɵselectMemories, ɵselectMemoriesAvailable, ɵselectMemoriesError, ɵselectMemoriesIsLoading, ɵselectMemoriesRealtimeStatus, ɵselectThreads, ɵselectThreadsError, ɵselectThreadsIsLoading } from "@copilotkit/core";
+import { CopilotKitCoreErrorCode, CopilotKitCoreRuntimeConnectionStatus, createInspectorThreadRequestId, emitInspectorStopViewing, emitInspectorViewThread, isInspectorThreadBridgeEnabled, onInspectorActiveThread, onInspectorViewThreadResult, ɵcreateThreadStore, ɵselectMemories, ɵselectMemoriesAvailable, ɵselectMemoriesError, ɵselectMemoriesIsLoading, ɵselectMemoriesRealtimeStatus, ɵselectThreads, ɵselectThreadsError, ɵselectThreadsIsLoading } from "@copilotkit/core";
 
 //#region src/index.ts
 const WEB_INSPECTOR_TAG = "cpk-web-inspector";
@@ -243,6 +242,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;
@@ -348,6 +362,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
@@ -606,13 +643,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 = [];
@@ -622,11 +652,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)));
@@ -651,31 +681,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);
@@ -1077,6 +1099,7 @@ 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;
@@ -1152,6 +1175,7 @@ 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 },
@@ -1296,6 +1320,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 {
@@ -1420,11 +1449,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;
@@ -1433,19 +1476,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;
@@ -1461,20 +1507,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 {
@@ -1485,11 +1528,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 {
@@ -1497,6 +1547,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;
@@ -1508,6 +1562,16 @@ 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;
+      }
+    }
+
     /*
      * Each tab's content is wrapped in this panel so the keep-mounted
      * inactive panels can be hidden via display:none without disturbing
@@ -1704,15 +1768,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 ─────────────────────────────────────────────── */
@@ -1765,12 +1830,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);
@@ -1780,29 +1864,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;
@@ -1813,6 +1940,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;
@@ -1820,21 +1948,26 @@ 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;
       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;
@@ -1909,84 +2042,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;
@@ -2028,8 +2083,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
@@ -2045,48 +2101,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 ──────────────────────────────────────────────── */
@@ -2185,6 +2282,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 {
@@ -2225,11 +2327,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,
@@ -2239,12 +2345,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,
@@ -2271,7 +2480,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 {
@@ -2291,7 +2502,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 = [];
@@ -2302,7 +2514,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"]);
@@ -2459,18 +2671,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;
 		}
@@ -2544,13 +2752,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 {
@@ -2579,10 +2789,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({
@@ -2630,14 +2841,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 = [];
@@ -2676,7 +2959,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
@@ -2824,7 +3107,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
@@ -2834,7 +3117,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
@@ -2973,6 +3256,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		});
 	}
 	render() {
+		const viewInApp = this.renderViewInAppAction();
 		return html`
       <div class="cpk-td">
         <!-- ── Left area: tabs + content ─────────────────────────────────── -->
@@ -3000,6 +3284,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()}
@@ -3054,8 +3339,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 [
 			{
@@ -3077,7 +3361,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"
@@ -3100,8 +3383,6 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
               </span>
             `)}
         </div>
-        ${this.renderViewInAppAction()}
-        ${bulkControls}
       </div>
     `;
 	}
@@ -3128,10 +3409,8 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
             >` : nothing}
     `;
 	}
-	renderActiveBulkControls() {
+	renderTimelineBulkControls() {
 		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">
@@ -3204,7 +3483,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) {
@@ -3220,14 +3504,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`${this.renderTimelineBulkControls()}${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">
@@ -3235,13 +3533,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
           >
@@ -3278,9 +3578,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>
     `;
 	}
@@ -3410,9 +3708,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"
@@ -3420,9 +3716,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}
@@ -3537,15 +3831,17 @@ ${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
+            <div
+              class="cpk-td__event cpk-td__event--${eventCategory(event.type)}"
+              data-source-index=${event.sourceIndex}
+            >
+              <div class="cpk-td__event-header">
+                <span class="cpk-td__event-type" title=${event.type}
+                  >${humanizeEventType(event.type)}</span
                 >
                 <span class="cpk-td__event-time"
                   >${formatTimestamp(event.timestamp)}</span
@@ -3584,9 +3880,7 @@ ${unsafeHTML(highlightedJson(item.result))}</pre
                   >${detailsExpanded ? "Hide details" : "Show details"}</span
                 >
               </button>
-              ${detailsExpanded ? html`<pre class="cpk-td__event-payload">
-${unsafeHTML(highlightedJson(event.rawEvent ?? event))}</pre
-                  >` : nothing}
+              ${detailsExpanded ? renderHighlightedJsonBlock(event.rawEvent ?? event) : nothing}
             </div>
           `;
 			})}`;
@@ -4405,26 +4699,6 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			inspect: "ag-ui-events"
 		};
 		this.lastScrolledAgentNavigationLayout = null;
-		this.eventSnippets = [];
-		this.selectedSnippetId = null;
-		this.snippetRecipe = "tool-call";
-		this.snippetName = "";
-		this.snippetJson = "[]";
-		this.snippetToolName = "";
-		this.snippetToolArgs = "{}";
-		this.snippetReasoningText = "";
-		this.snippetTextContent = "";
-		this.snippetActivityType = "a2ui-surface";
-		this.snippetActivityContent = "{}";
-		this.snippetError = null;
-		this.snippetBanner = null;
-		this.snippetConfirmOpen = false;
-		this.lastInject = null;
-		this.snippetListWidth = 200;
-		this.snippetDividerResizing = false;
-		this.snippetDividerPointerId = -1;
-		this.snippetDividerStartX = 0;
-		this.snippetDividerStartWidth = 0;
 		this.selectedThreadId = null;
 		this.inAppThreadId = null;
 		this.inAppAgentId = null;
@@ -4465,6 +4739,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.threadCapabilityEnabled = null;
 		this.threadCapabilityGeneration = 0;
 		this.contextMenuOpen = false;
+		this.iconRailContextCloseTimer = null;
 		this.layoutMenuOpen = false;
 		this.dockMode = "floating";
 		this.popOut = null;
@@ -4526,6 +4801,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();
@@ -4610,6 +4888,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			this.openInspector("floating_button");
 		};
 		this.handleLauncherHudEnter = () => {
+			this.cancelLauncherHudIntro();
 			this.openLauncherHud();
 		};
 		this.handleLauncherHudLeave = () => {
@@ -4620,6 +4899,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			}, 160);
 		};
 		this.handleLauncherHudFocusIn = () => {
+			this.cancelLauncherHudIntro();
 			this.openLauncherHud();
 		};
 		this.handleLauncherHudFocusOut = (event) => {
@@ -5025,19 +5305,6 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.handlePlaygroundStop = () => {
 			this.playgroundAgent?.abortRun();
 		};
-		this.handleSnippetImportChange = async (event) => {
-			const input = event.target;
-			const file = input.files?.[0];
-			input.value = "";
-			if (!file) return;
-			try {
-				this.eventSnippets = importEventSnippets(await file.text());
-				this.snippetError = null;
-			} catch (error) {
-				this.snippetError = error instanceof Error ? error.message : "Import failed.";
-			}
-			this.requestUpdate();
-		};
 		this.handleInspectorMetadataActionClick = (action, placement) => {
 			if (!this.isOpen || this.runtimeStatus !== CopilotKitCoreRuntimeConnectionStatus.Connected || this.core?.telemetryDisabled) return;
 			if (action.kind === "enable_intelligence") {
@@ -5065,26 +5332,6 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			if (this.core?.telemetryDisabled) return;
 			trackThreadsTalkToEngineerClicked(this.getThreadsCtaTelemetryProps("talk_to_engineer", "threads_locked"));
 		};
-		this.handleSnippetListDividerPointerDown = (event) => {
-			this.snippetDividerResizing = true;
-			this.snippetDividerPointerId = event.pointerId;
-			this.snippetDividerStartX = event.clientX;
-			this.snippetDividerStartWidth = this.snippetListWidth;
-			event.currentTarget.setPointerCapture(event.pointerId);
-			event.preventDefault();
-		};
-		this.handleSnippetListDividerPointerMove = (event) => {
-			if (!this.snippetDividerResizing || this.snippetDividerPointerId !== event.pointerId) return;
-			const delta = event.clientX - this.snippetDividerStartX;
-			this.snippetListWidth = Math.max(160, Math.min(360, this.snippetDividerStartWidth + delta));
-			this.requestUpdate();
-		};
-		this.handleSnippetListDividerPointerUp = (event) => {
-			if (this.snippetDividerPointerId !== event.pointerId) return;
-			const target = event.currentTarget;
-			if (target.hasPointerCapture(this.snippetDividerPointerId)) target.releasePointerCapture(this.snippetDividerPointerId);
-			this.snippetDividerResizing = false;
-		};
 		this.handleThreadDividerPointerDown = (event) => {
 			this.threadDividerResizing = true;
 			this.threadDividerPointerId = event.pointerId;
@@ -5199,15 +5446,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") {
@@ -5218,6 +5471,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			event.stopPropagation();
 		};
 		this.handleIconRailContextFocusIn = () => {
+			this.clearIconRailContextCloseTimer();
 			if (this.contextMenuOpen) return;
 			this.layoutMenuOpen = false;
 			this.contextMenuOpen = true;
@@ -5341,11 +5595,6 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 				label: "AG-UI Events",
 				icon: "Zap"
 			},
-			{
-				key: "event-snippets",
-				label: "Event Snippets",
-				icon: "Code"
-			},
 			{
 				key: "agents",
 				label: "Agent",
@@ -6193,7 +6442,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) {
@@ -6276,19 +6525,6 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.persistState();
 		this.requestUpdate();
 	}
-	focusEventSnippets(options) {
-		this.pendingPersistedMenu = null;
-		this.selectedMenu = "event-snippets";
-		this.settingsOpen = false;
-		this.lastSelectedMenuByGroup.inspect = "event-snippets";
-		this.contextMenuOpen = false;
-		this.layoutMenuOpen = false;
-		this.reloadEventSnippets();
-		if (options.snippetId) this.selectEventSnippet(options.snippetId);
-		if (options.agentId && this.contextOptions.some((option) => option.key === options.agentId)) this.selectedContext = options.agentId;
-		this.persistState();
-		this.requestUpdate();
-	}
 	filterEvents(events) {
 		const query = this.eventFilterText.trim().toLowerCase();
 		return events.filter((event) => {
@@ -6310,6 +6546,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";
@@ -6356,11 +6606,9 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
               ${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>
           `;
 		})}
@@ -6412,15 +6660,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 {
@@ -6467,6 +6714,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;
@@ -6476,6 +6730,191 @@ ${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;
       }
@@ -6511,8 +6950,8 @@ ${argsString}</pre
            the two cannot drift apart. A dark grey rather than near-black: the
            launcher sits on a customer's page, and 1,5,7 against white is a
            harder edge than this surface needs. */
-        --cpk-launcher-face: rgba(28, 31, 36, 0.95);
-        --cpk-launcher-face-solid: rgb(28, 31, 36);
+        --cpk-launcher-face: rgba(24, 28, 31, 0.95);
+        --cpk-launcher-face-solid: rgb(24, 28, 31);
         --cpk-launcher-edge: rgba(190, 194, 255, 0.25);
         /* The launcher's own size, exposed so the signal dot can be placed
            against the OUTER rim with a length rather than a percentage.
@@ -6535,6 +6974,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;
       }
 
@@ -6562,6 +7005,7 @@ ${argsString}</pre
         touch-action: none;
         user-select: none;
         z-index: 60;
+        background: transparent;
       }
 
       .edge-resize-handle {
@@ -6696,18 +7140,77 @@ ${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;
+        }
+      }
+
+      .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 {
         background: #e8edf5;
         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;
@@ -6932,13 +7435,29 @@ ${argsString}</pre
       .console-button {
         background-color: var(--cpk-launcher-face) !important;
         border-color: var(--cpk-launcher-edge) !important;
+        /* One hairline, not two. The border above is it; a second ring used to
+           sit 1px outside as a box-shadow and hardcoded the lilac instead of
+           reading the --cpk-launcher-edge token, so it could not follow it.
+           What replaces it is a one-pixel light edge along the top, which is
+           what keeps the face from reading flat without drawing a frame.
+
+           The border is not decoration: the face is #181C1F, which against a
+           dark host page (GitHub dark 1.10:1, Tailwind slate-900 1.04:1) is
+           indistinguishable from the page. It is the only thing that gives the
+           launcher an outline there, so it stays. */
         box-shadow:
-          0 0 0 1px rgba(190, 194, 255, 0.15),
+          inset 0 1px 0 rgba(255, 255, 255, 0.07),
           0 4px 14px rgba(1, 5, 7, 0.28) !important;
+        /* Promotes the launcher to its own compositing layer, which the
+           backdrop-filter this replaces used to do as a side effect. Without
+           a layer the hover scale re-rasterises the mark every frame and it
+           visibly jitters; with one, the compositor scales it as a texture. */
+        will-change: transform;
       }
       .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;
@@ -7060,8 +7579,23 @@ ${argsString}</pre
         width: 19%;
         height: 19%;
         border-radius: 50%;
-        background: var(--cpk-launcher-signal);
-        box-shadow: 0 0 0 1.5px var(--cpk-launcher-face);
+        /* Lit from the upper left and shaded at the lower right, so the dot
+           reads as a lens rather than a flat disc. Both stops are derived from
+           the signal colour, so a new tone needs no new values. */
+        background: radial-gradient(
+          circle at 32% 28%,
+          color-mix(in srgb, var(--cpk-launcher-signal), white 40%) 0%,
+          var(--cpk-launcher-signal) 60%,
+          color-mix(in srgb, var(--cpk-launcher-signal), black 20%) 100%
+        );
+        /* Replaces an opaque 1.5px collar in the launcher's own face. That
+           collar was 21% of the dot's footprint, and because the dot's centre
+           sits *on* the rim, its outer half painted a hard dark crescent onto
+           the host page rather than onto the launcher. A hairline plus a soft
+           drop does the same separating job without the hard edge. */
+        box-shadow:
+          0 0 0 0.5px rgba(1, 5, 7, 0.4),
+          0 1px 2.5px rgba(1, 5, 7, 0.5);
       }
 
       /* ── Launcher pill: the launcher opens sideways and says what ─── */
@@ -7272,6 +7806,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 ── */
@@ -7283,6 +7823,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;
@@ -7316,38 +7859,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 {
@@ -7381,6 +7933,12 @@ ${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;
@@ -7398,6 +7956,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 {
@@ -7441,6 +8003,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;
@@ -7467,19 +8033,120 @@ ${argsString}</pre
           padding-bottom 200ms cubic-bezier(0.16, 1, 0.3, 1);
       }
 
-      .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 {
-        max-height: 72px;
-        padding: 0 8px 7px;
-        opacity: 1;
-        transform: none;
+      .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 {
+        max-height: 72px;
+        padding: 0 8px 7px;
+        opacity: 1;
+        transform: none;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .cpk-launcher-hud,
+        .cpk-launcher-hud__detail {
+          transition: none;
+        }
+      }
+
+      /*
+       * 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,
-        .cpk-launcher-hud__detail {
-          transition: none;
+        .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;
         }
       }
 
@@ -7509,7 +8176,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;
       }
 
@@ -7625,10 +8292,69 @@ ${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 {
@@ -7858,6 +8584,7 @@ ${argsString}</pre
 			clearTimeout(this.transitionTimeoutId);
 			this.transitionTimeoutId = null;
 		}
+		this.clearIconRailContextCloseTimer();
 		this.unsubscribeFromInspectorThreadBridge();
 		this.threadsSetupPromptCopyGeneration += 1;
 		if (this.threadsSetupPromptCopyResetTimeoutId !== null) {
@@ -7867,6 +8594,7 @@ ${argsString}</pre
 		this.threadsSetupPromptCopyState = "idle";
 		this.stopSignalPulse();
 		this.cancelGestureTail();
+		this.cancelLauncherHudIntro();
 		this.cancelThreadRefreshDebounce();
 		this.clearInspectorUsageRefresh();
 		this.cleanupThreadsExampleOverviewVideo();
@@ -7903,6 +8631,7 @@ ${argsString}</pre
 		else this.centerContext("window");
 		this.ensureAnnouncementLoading();
 		this.updateHostTransform(this.isOpen ? "window" : "button");
+		this.scheduleLauncherHudIntro();
 	}
 	render() {
 		return this.isOpen ? html`
@@ -7962,18 +8691,9 @@ ${argsString}</pre
 			"justify-center",
 			"rounded-full",
 			"border",
-			"border-white/20",
-			"bg-slate-950/95",
 			"text-xs",
 			"font-medium",
 			"text-white",
-			"ring-1",
-			"ring-white/10",
-			"backdrop-blur-md",
-			"transition",
-			"hover:border-white/30",
-			"hover:bg-slate-900/95",
-			"hover:scale-105",
 			"focus-visible:outline",
 			"focus-visible:outline-2",
 			"focus-visible:outline-offset-2",
@@ -8093,6 +8813,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";
@@ -8121,6 +8876,7 @@ ${argsString}</pre
 		this.requestUpdate();
 	}
 	closeLauncherHud() {
+		this.cancelLauncherHudIntro();
 		if (this.launcherHudCloseTimer !== null) {
 			clearTimeout(this.launcherHudCloseTimer);
 			this.launcherHudCloseTimer = null;
@@ -8158,6 +8914,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
@@ -8187,23 +8947,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">
@@ -8211,19 +8979,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>
@@ -8326,34 +9097,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>
@@ -9116,16 +9887,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"
@@ -9533,8 +10294,7 @@ ${argsString}</pre
 		this.draggedDuringInteraction = false;
 	}
 	openInspector(source, options = {}) {
-		if (options.snippetId || options.menu === "event-snippets") this.focusEventSnippets(options);
-		else if (options.threadId) this.focusThread(options);
+		if (options.threadId) this.focusThread(options);
 		if (this.isPoppedOut) return;
 		if (this.isOpen) return;
 		const hadUnseenAnnouncement = this.newsSignalArmed;
@@ -9718,11 +10478,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));
@@ -9942,7 +10699,7 @@ ${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
@@ -9971,10 +10728,10 @@ ${argsString}</pre
                       ` : 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"
@@ -9985,7 +10742,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}
@@ -9999,549 +10756,6 @@ ${argsString}</pre
           AI can make mistakes. Please verify important information.
         </p>
       </form>
-    `;
-	}
-	reloadEventSnippets() {
-		this.eventSnippets = loadEventSnippets();
-	}
-	renderSnippetImportControl() {
-		return html`
-      <label
-        class="inline-flex shrink-0 cursor-pointer items-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-[11px] text-gray-700"
-        data-testid="cpk-snippet-import"
-      >
-        Import
-        <input
-          type="file"
-          accept="application/json"
-          class="hidden"
-          @change=${this.handleSnippetImportChange}
-        />
-      </label>
-    `;
-	}
-	selectEventSnippet(id) {
-		const snippet = this.eventSnippets.find((item) => item.id === id);
-		this.selectedSnippetId = id;
-		if (!snippet) {
-			this.requestUpdate();
-			return;
-		}
-		const editor = editorStateFromSnippet(snippet);
-		this.snippetRecipe = editor.recipe;
-		this.snippetName = editor.name;
-		this.snippetJson = editor.json;
-		this.snippetToolName = editor.draft.toolName;
-		this.snippetToolArgs = editor.draft.toolArgs;
-		this.snippetReasoningText = editor.draft.reasoningText;
-		this.snippetTextContent = editor.draft.textContent;
-		this.snippetActivityType = editor.draft.activityType;
-		this.snippetActivityContent = editor.draft.activityContent;
-		this.snippetError = null;
-		this.requestUpdate();
-	}
-	compileSnippetDraft() {
-		switch (this.snippetRecipe) {
-			case "tool-call": return compileToolCallRecipe({
-				toolName: this.snippetToolName,
-				argsJson: this.snippetToolArgs,
-				threadId: this.getSnippetThreadId(),
-				runId: this.getSnippetRunId()
-			});
-			case "reasoning": return compileReasoningRecipe({
-				text: this.snippetReasoningText,
-				threadId: this.getSnippetThreadId(),
-				runId: this.getSnippetRunId()
-			});
-			case "text": return compileTextRecipe({
-				text: this.snippetTextContent,
-				threadId: this.getSnippetThreadId(),
-				runId: this.getSnippetRunId()
-			});
-			case "activity": return compileActivityRecipe({
-				activityType: this.snippetActivityType,
-				contentJson: this.snippetActivityContent,
-				threadId: this.getSnippetThreadId(),
-				runId: this.getSnippetRunId()
-			});
-			case "raw": return parseSnippetEvents(this.snippetJson);
-		}
-	}
-	getSnippetThreadId() {
-		return this.selectedThreadId ?? "inspector-snippet";
-	}
-	getSnippetRunId() {
-		return `inspector-snippet-${Date.now()}`;
-	}
-	getSnippetTargetAgent() {
-		const core = this._core;
-		if (!core) return null;
-		const selected = this.selectedContext !== "all-agents" ? this.selectedContext : null;
-		if (selected) return core.getAgent(selected) ?? null;
-		const first = this.contextOptions.find((option) => option.key !== "all-agents");
-		return first ? core.getAgent(first.key) ?? null : null;
-	}
-	applyRecipeToEditor() {
-		try {
-			const events = this.compileSnippetDraft();
-			this.snippetJson = JSON.stringify(events, null, 2);
-			this.snippetError = null;
-		} catch (error) {
-			this.snippetError = error instanceof Error ? error.message : "Could not compile recipe.";
-		}
-		this.requestUpdate();
-	}
-	handleSnippetRecipeChange(event) {
-		const value = event.target.value;
-		if (value === "tool-call" || value === "reasoning" || value === "text" || value === "activity" || value === "raw") {
-			this.snippetRecipe = value;
-			if (value !== "raw") this.applyRecipeToEditor();
-			else this.requestUpdate();
-		}
-	}
-	saveCurrentSnippet(source) {
-		try {
-			const events = parseSnippetEvents(this.snippetJson);
-			const now = (/* @__PURE__ */ new Date()).toISOString();
-			const snippet = {
-				id: this.selectedSnippetId ?? createSnippetId(),
-				name: this.snippetName.trim() || recipeLabel(this.snippetRecipe),
-				recipe: this.snippetRecipe,
-				events,
-				createdAt: this.eventSnippets.find((item) => item.id === this.selectedSnippetId)?.createdAt ?? now,
-				updatedAt: now
-			};
-			this.eventSnippets = upsertEventSnippet(snippet);
-			this.selectedSnippetId = snippet.id;
-			this.snippetBanner = "Snippet saved.";
-			this.snippetError = null;
-			if (!this.core?.telemetryDisabled) trackEventSnippetsSaved({
-				recipe: this.snippetRecipe,
-				source,
-				success: true
-			});
-		} catch (error) {
-			this.snippetError = error instanceof Error ? error.message : "Could not save snippet.";
-			if (!this.core?.telemetryDisabled) trackEventSnippetsSaved({
-				recipe: this.snippetRecipe,
-				source,
-				success: false
-			});
-		}
-		this.requestUpdate();
-	}
-	async runCurrentSnippet() {
-		this.snippetError = null;
-		this.snippetBanner = null;
-		let events;
-		try {
-			events = expandSnippetEventsForRun(parseSnippetEvents(this.snippetJson));
-		} catch (error) {
-			this.snippetError = error instanceof Error ? error.message : "Snippet JSON is invalid.";
-			this.requestUpdate();
-			return;
-		}
-		if (snippetContainsToolCall(events) && !this.snippetConfirmOpen) {
-			this.snippetConfirmOpen = true;
-			this.requestUpdate();
-			return;
-		}
-		this.snippetConfirmOpen = false;
-		const core = this._core;
-		const agent = this.getSnippetTargetAgent();
-		if (!core || !agent) {
-			this.snippetError = "No agent is available to inject into.";
-			this.requestUpdate();
-			return;
-		}
-		if (agent.isRunning) {
-			this.snippetError = "The agent is running. Wait for the current run to end.";
-			this.requestUpdate();
-			return;
-		}
-		try {
-			const result = await ɵinjectInspectorEvents({
-				core,
-				agent,
-				events
-			});
-			this.lastInject = {
-				snippetId: this.selectedSnippetId ?? "unsaved",
-				agentId: agent.agentId ?? "default",
-				runId: this.getSnippetRunId(),
-				messageIds: result.messageIds
-			};
-			this.snippetBanner = "Inspector injected these events into the live thread.";
-			if (!this.core?.telemetryDisabled) trackEventSnippetsRun({
-				recipe: this.snippetRecipe,
-				source: "pane",
-				success: true
-			});
-		} catch (error) {
-			this.snippetError = error instanceof Error ? error.message : "Could not run snippet.";
-			if (!this.core?.telemetryDisabled) trackEventSnippetsRun({
-				recipe: this.snippetRecipe,
-				source: "pane",
-				success: false
-			});
-		}
-		this.requestUpdate();
-	}
-	resetLastSnippetRun() {
-		const last = this.lastInject;
-		const core = this._core;
-		if (!last || !core) return;
-		const agent = core.getAgent(last.agentId);
-		if (!agent) {
-			this.snippetError = "The injected agent is no longer available.";
-			this.requestUpdate();
-			return;
-		}
-		ɵresetInspectorInject({
-			agent,
-			messageIds: last.messageIds
-		});
-		this.lastInject = null;
-		this.snippetBanner = "Last inject was removed from the thread. App state from a tool handler was not undone.";
-		this.requestUpdate();
-	}
-	renderEventSnippetsView() {
-		if (this.eventSnippets.length === 0 && this.selectedSnippetId === null) this.reloadEventSnippets();
-		const agent = this.getSnippetTargetAgent();
-		const runBlocked = agent?.isRunning === true;
-		const canRunJson = snippetJsonIsRunnable(this.snippetJson);
-		const canRun = canRunJson && !!agent && !runBlocked;
-		const canSave = canRunJson;
-		const canDelete = this.selectedSnippetId !== null;
-		const canExport = this.eventSnippets.length > 0;
-		const canReset = this.lastInject !== null;
-		const snippetGroups = groupEventSnippets(this.eventSnippets);
-		const tools = this._core?.tools ?? [];
-		return html`
-      <div class="flex h-full min-h-0 flex-col bg-white">
-        <div
-          class="flex items-center justify-between gap-4 border-b border-gray-200 px-4 py-3"
-        >
-          <div class="min-w-0">
-            <h2 class="text-sm font-semibold text-gray-900">Event Snippets</h2>
-            <p class="mt-1 text-[11px] text-gray-500">
-              Compile AG-UI events, run them on the live agent, and save them
-              for later. Tool-call runs use the real frontend-tool handler.
-            </p>
-          </div>
-          ${this.renderSnippetImportControl()}
-        </div>
-        ${this.snippetBanner ? html`<div
-                class="border-b border-emerald-200 bg-emerald-50 px-4 py-2 text-[11px] text-emerald-800"
-                role="status"
-              >
-                ${this.snippetBanner}
-              </div>` : nothing}
-        ${this.snippetError ? html`<div
-                class="border-b border-rose-200 bg-rose-50 px-4 py-2 text-[11px] text-rose-800"
-                role="alert"
-              >
-                ${this.snippetError}
-              </div>` : nothing}
-        ${this.snippetConfirmOpen ? html`<div
-                class="border-b border-amber-200 bg-amber-50 px-4 py-2 text-[11px] text-amber-900"
-                role="alertdialog"
-                aria-label="Confirm tool-call run"
-              >
-                <p>
-                  This snippet contains a tool call. Run will execute the real
-                  handler on the live thread.
-                </p>
-                <div class="mt-2 flex gap-2">
-                  <button
-                    type="button"
-                    class="rounded-md bg-gray-900 px-2 py-1 text-[11px] text-white"
-                    data-testid="cpk-snippet-run-handler"
-                    @click=${() => {
-			this.snippetConfirmOpen = true;
-			this.runCurrentSnippet();
-		}}
-                  >
-                    Run handler
-                  </button>
-                  <button
-                    type="button"
-                    class="rounded-md border border-gray-300 bg-white px-2 py-1 text-[11px]"
-                    @click=${() => {
-			this.snippetConfirmOpen = false;
-			this.requestUpdate();
-		}}
-                  >
-                    Cancel
-                  </button>
-                </div>
-              </div>` : nothing}
-        <div class="flex min-h-0 flex-1">
-          <div
-            class="inspector-snippet-sidebar shrink-0"
-            style="width:${this.snippetListWidth}px"
-            data-testid="cpk-snippet-list"
-          >
-            ${snippetGroups.length === 0 ? html`
-                    <p class="px-2 py-2 text-[11px] text-gray-500">No saved snippets yet.</p>
-                  ` : html`
-                    <nav class="inspector-sidebar-nav" aria-label="Saved snippets">
-                      ${snippetGroups.map((group) => html`
-                          <div class="inspector-sidebar-section">
-                            <div
-                              class="inspector-sidebar-label"
-                              data-testid="cpk-snippet-category"
-                              data-recipe=${group.recipe}
-                            >
-                              ${group.label}
-                            </div>
-                            ${group.snippets.map((snippet) => {
-			const isSelected = snippet.id === this.selectedSnippetId;
-			return html`
-                                <button
-                                  type="button"
-                                  class="inspector-nav-control inspector-sidebar-control ${isSelected ? "inspector-nav-control-active" : ""}"
-                                  data-testid="cpk-snippet-item"
-                                  data-recipe=${snippet.recipe}
-                                  aria-current=${isSelected ? "page" : nothing}
-                                  aria-label="${recipeLabel(snippet.recipe)}: ${snippet.name}"
-                                  style=${INTERACTIVE_FOCUS_BASE_STYLE}
-                                  @click=${() => this.selectEventSnippet(snippet.id)}
-                                >
-                                  <span
-                                    class="inspector-nav-icon"
-                                    aria-hidden="true"
-                                  >
-                                    <span
-                                      class="flex h-6 w-6 items-center justify-center rounded-md ${recipeIconWrapClass(snippet.recipe)}"
-                                    >
-                                      ${this.renderIcon(recipeIconName(snippet.recipe))}
-                                    </span>
-                                  </span>
-                                  <span class="inspector-nav-label"
-                                    >${snippet.name}</span
-                                  >
-                                </button>
-                              `;
-		})}
-                          </div>
-                        `)}
-                    </nav>
-                  `}
-          </div>
-          <div
-            class="w-1.5 shrink-0 cursor-col-resize bg-gray-200 hover:bg-gray-400"
-            role="separator"
-            aria-orientation="vertical"
-            aria-label="Resize snippet list"
-            title="Drag to resize"
-            data-testid="cpk-snippet-list-resize"
-            style="touch-action:none"
-            @pointerdown=${this.handleSnippetListDividerPointerDown}
-            @pointermove=${this.handleSnippetListDividerPointerMove}
-            @pointerup=${this.handleSnippetListDividerPointerUp}
-            @pointercancel=${this.handleSnippetListDividerPointerUp}
-          ></div>
-          <div class="flex min-h-0 min-w-0 flex-1 flex-col gap-2 overflow-auto p-4">
-            <label class="text-[11px] text-gray-600">
-              Name
-              <input
-                class="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
-                data-testid="cpk-snippet-name"
-                .value=${this.snippetName}
-                @input=${(event) => {
-			this.snippetName = event.target.value;
-		}}
-              />
-            </label>
-            <label class="text-[11px] text-gray-600">
-              Recipe
-              <select
-                class="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
-                data-testid="cpk-snippet-recipe"
-                .value=${this.snippetRecipe}
-                @change=${this.handleSnippetRecipeChange}
-              >
-                ${[
-			"tool-call",
-			"reasoning",
-			"text",
-			"activity",
-			"raw"
-		].map((recipe) => html`<option
-                    value=${recipe}
-                    ?selected=${recipe === this.snippetRecipe}
-                  >
-                    ${recipeLabel(recipe)}
-                  </option>`)}
-              </select>
-            </label>
-            ${this.snippetRecipe === "tool-call" ? html`
-                    <label class="text-[11px] text-gray-600">
-                      Tool
-                      <input
-                        list="cpk-snippet-tools"
-                        class="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
-                        data-testid="cpk-snippet-tool-name"
-                        .value=${this.snippetToolName}
-                        @input=${(event) => {
-			this.snippetToolName = event.target.value;
-			this.applyRecipeToEditor();
-		}}
-                      />
-                      <datalist id="cpk-snippet-tools">
-                        ${tools.map((tool) => html`<option value=${tool.name}></option>`)}
-                      </datalist>
-                    </label>
-                    <label class="text-[11px] text-gray-600">
-                      Args JSON
-                      <textarea
-                        class="mt-1 h-20 w-full rounded-md border border-gray-200 px-2 py-1 font-mono text-[11px]"
-                        data-testid="cpk-snippet-tool-args"
-                        .value=${this.snippetToolArgs}
-                        @input=${(event) => {
-			this.snippetToolArgs = event.target.value;
-			this.applyRecipeToEditor();
-		}}
-                      ></textarea>
-                    </label>
-                  ` : nothing}
-            ${this.snippetRecipe === "reasoning" ? html`<label class="text-[11px] text-gray-600">
-                    Reasoning
-                    <textarea
-                      class="mt-1 h-20 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
-                      data-testid="cpk-snippet-reasoning"
-                      .value=${this.snippetReasoningText}
-                      @input=${(event) => {
-			this.snippetReasoningText = event.target.value;
-			this.applyRecipeToEditor();
-		}}
-                    ></textarea>
-                  </label>` : nothing}
-            ${this.snippetRecipe === "text" ? html`<label class="text-[11px] text-gray-600">
-                    Assistant text
-                    <textarea
-                      class="mt-1 h-20 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
-                      data-testid="cpk-snippet-text"
-                      .value=${this.snippetTextContent}
-                      @input=${(event) => {
-			this.snippetTextContent = event.target.value;
-			this.applyRecipeToEditor();
-		}}
-                    ></textarea>
-                  </label>` : nothing}
-            ${this.snippetRecipe === "activity" ? html`
-                    <label class="text-[11px] text-gray-600">
-                      Activity type
-                      <input
-                        list="cpk-snippet-activity"
-                        class="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
-                        data-testid="cpk-snippet-activity-type"
-                        .value=${this.snippetActivityType}
-                        @input=${(event) => {
-			this.snippetActivityType = event.target.value;
-			this.applyRecipeToEditor();
-		}}
-                      />
-                      <datalist id="cpk-snippet-activity">
-                        ${ACTIVITY_STARTERS.map((type) => html`<option value=${type}></option>`)}
-                      </datalist>
-                    </label>
-                    <label class="text-[11px] text-gray-600">
-                      Content JSON
-                      <textarea
-                        class="mt-1 h-24 w-full rounded-md border border-gray-200 px-2 py-1 font-mono text-[11px]"
-                        data-testid="cpk-snippet-activity-content"
-                        .value=${this.snippetActivityContent}
-                        @input=${(event) => {
-			this.snippetActivityContent = event.target.value;
-			this.applyRecipeToEditor();
-		}}
-                      ></textarea>
-                    </label>
-                  ` : nothing}
-            <label class="text-[11px] text-gray-600">
-              Events JSON
-              <textarea
-                class="mt-1 h-40 w-full rounded-md border border-gray-200 px-2 py-1 font-mono text-[11px]"
-                data-testid="cpk-snippet-json"
-                .value=${this.snippetJson}
-                @input=${(event) => {
-			this.snippetJson = event.target.value;
-			this.requestUpdate();
-		}}
-              ></textarea>
-            </label>
-            <div class="flex flex-wrap gap-2">
-              <button
-                type="button"
-                class="rounded-md bg-gray-900 px-3 py-1.5 text-[11px] text-white disabled:opacity-50"
-                data-testid="cpk-snippet-run"
-                ?disabled=${!canRun}
-                title=${runBlocked ? "The agent is running. Wait for the current run to end." : !agent ? "No agent is available to inject into." : !canRunJson ? "Events JSON must be a non-empty event array." : "Run snippet"}
-                @click=${() => void this.runCurrentSnippet()}
-              >
-                ${runBlocked ? "Agent running" : "Run"}
-              </button>
-              <button
-                type="button"
-                class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-[11px] disabled:opacity-50"
-                data-testid="cpk-snippet-save"
-                ?disabled=${!canSave}
-                title=${canSave ? "Save snippet" : "Events JSON must be a non-empty event array."}
-                @click=${() => this.saveCurrentSnippet("pane")}
-              >
-                Save
-              </button>
-              <button
-                type="button"
-                class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-[11px] disabled:opacity-50"
-                data-testid="cpk-snippet-reset"
-                ?disabled=${!canReset}
-                title=${canReset ? "Remove the last inject from the thread" : "No Inspector inject to reset."}
-                @click=${() => this.resetLastSnippetRun()}
-              >
-                Reset last run
-              </button>
-              <button
-                type="button"
-                class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-[11px] disabled:opacity-50"
-                data-testid="cpk-snippet-delete"
-                ?disabled=${!canDelete}
-                title=${canDelete ? "Delete this snippet" : "Select a snippet to delete."}
-                @click=${() => {
-			if (!this.selectedSnippetId) return;
-			if (!window.confirm("Delete this snippet?")) return;
-			this.eventSnippets = deleteEventSnippet(this.selectedSnippetId);
-			this.selectedSnippetId = null;
-			this.requestUpdate();
-		}}
-              >
-                Delete
-              </button>
-              <button
-                type="button"
-                class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-[11px] disabled:opacity-50"
-                data-testid="cpk-snippet-export"
-                ?disabled=${!canExport}
-                title=${canExport ? "Export snippets" : "Save a snippet before you export."}
-                @click=${() => {
-			if (!canExport) return;
-			const blob = new Blob([exportEventSnippetsJson(this.eventSnippets)], { type: "application/json" });
-			const url = URL.createObjectURL(blob);
-			const link = document.createElement("a");
-			link.href = url;
-			link.download = "event-snippets.json";
-			link.click();
-			URL.revokeObjectURL(url);
-		}}
-              >
-                Export
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
     `;
 	}
 	renderMainContent() {
@@ -10557,7 +10771,6 @@ ${argsString}</pre
         </div>
       `;
 		if (this.selectedMenu === "playground") return this.renderPlaygroundView();
-		if (this.selectedMenu === "event-snippets") return this.renderEventSnippetsView();
 		if (this.selectedMenu === "agents") return this.renderAgentsView();
 		if (this.selectedMenu === "frontend-tools") return this.renderToolsView();
 		if (this.selectedMenu === "capabilities") return this.renderCapabilitiesView();
@@ -10689,9 +10902,9 @@ ${argsString}</pre
                   </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"
+                      class="cpk-playground-welcome mx-auto flex h-full w-full flex-col items-center justify-center text-center"
                     >
-                      <p class="text-base font-medium tracking-tight text-gray-900">
+                      <p class="cpk-playground-welcome-title">
                         How can I help you today?
                       </p>
                       ${this.renderPlaygroundComposer(agentId, busy, hasRetry, true)}
@@ -12066,6 +12279,7 @@ ${argsString}</pre
                         .focusRequestId=${this.threadFocusRequestId}
                         .agentStateInput=${this.getLatestStateForAgent(selectedThread.agentId)}
                         .agentEventsInput=${this.agentEvents.get(selectedThread.agentId) ?? []}
+                        .agentMessagesInput=${selectedThreadIsLocalExample ? EMPTY_INSPECTOR_MESSAGES : this.getLiveAgentMessagesForThread(selectedThread)}
                       ></cpk-thread-details>
                       ${selectedThreadIsLocalExample ? this.renderThreadsExampleTour() : nothing}` : showingExamples ? this.renderThreadsExampleOverview(locked) : html`
                         <div
@@ -12306,11 +12520,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) => {
@@ -12532,7 +12742,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"
                       >
@@ -12542,7 +12752,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 = {
@@ -12560,7 +12770,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">
@@ -12642,10 +12852,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
@@ -12764,7 +12976,6 @@ ${prettyEvent}</pre
 			if (previousMenu !== "memories" && !this.core?.telemetryDisabled) trackMemoriesTabClicked(this.getMemoriesTelemetryProps());
 		}
 		if (key === "home" && previousMenu !== "home") this.homeViewedThisOpen = false;
-		if (key === "event-snippets") this.reloadEventSnippets();
 		if (key === "ag-ui-events" || key === "agents") {
 			if (!(this.pendingScrollToEventId !== null || this.pendingScrollToToolCallId !== null)) requestAnimationFrame(() => {
 				const scroller = this.activeRoot.querySelector("#cpk-main-scroll");
@@ -12783,8 +12994,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();
@@ -13279,23 +13496,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">
@@ -14022,8 +14241,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, compileChatSnippet, compileFromActivityMessage, defineWebInspector, upsertEventSnippet, ɵ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