@copilotkit/web-inspector 1.69.2 → 1.69.3

package/dist/index.mjs

@@ -242,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;
@@ -347,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
@@ -605,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 = [];
@@ -621,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)));
@@ -650,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);
@@ -1076,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;
@@ -1151,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 },
@@ -1295,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 {
@@ -1419,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;
@@ -1432,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;
@@ -1460,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 {
@@ -1484,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 {
@@ -1496,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;
@@ -1507,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
@@ -1703,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 ─────────────────────────────────────────────── */
@@ -1764,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);
@@ -1779,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;
@@ -1812,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;
@@ -1819,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;
@@ -1908,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;
@@ -2027,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
@@ -2044,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 ──────────────────────────────────────────────── */
@@ -2184,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 {
@@ -2224,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,
@@ -2238,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,
@@ -2270,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 {
@@ -2290,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 = [];
@@ -2301,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"]);
@@ -2458,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;
 		}
@@ -2543,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 {
@@ -2578,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({
@@ -2629,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 = [];
@@ -2675,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
@@ -2823,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
@@ -2833,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
@@ -2972,6 +3256,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		});
 	}
 	render() {
+		const viewInApp = this.renderViewInAppAction();
 		return html`
       <div class="cpk-td">
         <!-- ── Left area: tabs + content ─────────────────────────────────── -->
@@ -2999,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()}
@@ -3053,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 [
 			{
@@ -3076,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"
@@ -3099,8 +3383,6 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
               </span>
             `)}
         </div>
-        ${this.renderViewInAppAction()}
-        ${bulkControls}
       </div>
     `;
 	}
@@ -3127,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">
@@ -3203,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) {
@@ -3219,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">
@@ -3234,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
           >
@@ -3277,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>
     `;
 	}
@@ -3409,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"
@@ -3419,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}
@@ -3536,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
@@ -3583,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>
           `;
 			})}`;
@@ -4444,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;
@@ -4505,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();
@@ -4589,6 +4888,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			this.openInspector("floating_button");
 		};
 		this.handleLauncherHudEnter = () => {
+			this.cancelLauncherHudIntro();
 			this.openLauncherHud();
 		};
 		this.handleLauncherHudLeave = () => {
@@ -4599,6 +4899,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			}, 160);
 		};
 		this.handleLauncherHudFocusIn = () => {
+			this.cancelLauncherHudIntro();
 			this.openLauncherHud();
 		};
 		this.handleLauncherHudFocusOut = (event) => {
@@ -5145,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") {
@@ -5164,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;
@@ -6134,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) {
@@ -6238,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";
@@ -6284,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>
           `;
 		})}
@@ -6340,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 {
@@ -6395,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;
@@ -6404,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;
       }
@@ -6463,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;
       }
 
@@ -6490,6 +7005,7 @@ ${argsString}</pre
         touch-action: none;
         user-select: none;
         z-index: 60;
+        background: transparent;
       }
 
       .edge-resize-handle {
@@ -6624,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;
@@ -6882,6 +7457,7 @@ ${argsString}</pre
       .console-button:hover {
         background-color: var(--cpk-launcher-face-solid) !important;
         border-color: rgba(190, 194, 255, 0.45) !important;
+        transform: scale(1.05);
       }
       .console-button:focus-visible {
         outline-color: #bec2ff !important;
@@ -7230,6 +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 ── */
@@ -7241,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;
@@ -7274,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 {
@@ -7339,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;
@@ -7356,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 {
@@ -7399,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;
@@ -7425,6 +8033,10 @@ ${argsString}</pre
           padding-bottom 200ms cubic-bezier(0.16, 1, 0.3, 1);
       }
 
+      .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__detail {
+        color: #68686e;
+      }
+
       .cpk-launcher-hud__row:hover .cpk-launcher-hud__detail,
       .cpk-launcher-hud__row:focus-within .cpk-launcher-hud__detail,
       .cpk-launcher-hud__row[data-cpk-hud-help="open"] .cpk-launcher-hud__detail {
@@ -7441,6 +8053,103 @@ ${argsString}</pre
         }
       }
 
+      /*
+       * On mount, borrow the hover HUD for one short introduction. The card
+       * establishes the destination first; its rows then resolve in order so
+       * the eye can count the available features instead of receiving one
+       * undifferentiated block. Only opacity and transform move.
+       */
+      @keyframes cpk-launcher-hud-intro {
+        0% {
+          opacity: 0;
+          transform: translateX(8px);
+        }
+        8%,
+        88% {
+          opacity: 1;
+          transform: none;
+        }
+        100% {
+          opacity: 0;
+          transform: translateX(4px);
+        }
+      }
+
+      @keyframes cpk-launcher-hud-intro-right {
+        0% {
+          opacity: 0;
+          transform: translateX(-8px);
+        }
+        8%,
+        88% {
+          opacity: 1;
+          transform: none;
+        }
+        100% {
+          opacity: 0;
+          transform: translateX(-4px);
+        }
+      }
+
+      @keyframes cpk-launcher-hud-row-online {
+        from {
+          opacity: 0;
+          transform: translateY(4px);
+        }
+        to {
+          opacity: 1;
+          transform: none;
+        }
+      }
+
+      @keyframes cpk-launcher-hud-check-online {
+        from {
+          opacity: 0;
+          transform: scale(0.65);
+        }
+        to {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+
+      .cpk-launcher-hud[data-cpk-hud-intro="true"] {
+        animation: cpk-launcher-hud-intro
+          var(--cpk-launcher-hud-intro-duration)
+          cubic-bezier(0.16, 1, 0.3, 1) both;
+      }
+
+      .cpk-launcher-hud[data-cpk-hud-intro="true"][data-cpk-hud-side="right"] {
+        animation-name: cpk-launcher-hud-intro-right;
+      }
+
+      .cpk-launcher-hud[data-cpk-hud-intro="true"]
+        .cpk-launcher-hud__row {
+        animation: cpk-launcher-hud-row-online
+          var(--cpk-launcher-hud-row-duration)
+          cubic-bezier(0.16, 1, 0.3, 1) both;
+        animation-delay: var(--cpk-hud-row-delay);
+      }
+
+      .cpk-launcher-hud[data-cpk-hud-intro="true"]
+        .cpk-launcher-hud__check {
+        animation: cpk-launcher-hud-check-online 220ms
+          cubic-bezier(0.16, 1, 0.3, 1) both;
+        animation-delay: calc(var(--cpk-hud-row-delay) + 90ms);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .cpk-launcher-hud[data-cpk-hud-intro="true"],
+        .cpk-launcher-hud[data-cpk-hud-intro="true"]
+          .cpk-launcher-hud__row,
+        .cpk-launcher-hud[data-cpk-hud-intro="true"]
+          .cpk-launcher-hud__check {
+          animation: none !important;
+          opacity: 1;
+          transform: none;
+        }
+      }
+
       /*
        * Marker on the navigation entry, which is what keeps a signal alive
        * once the panel is open and the launcher is hidden. Static by design:
@@ -7467,7 +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;
       }
 
@@ -7583,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 {
@@ -7816,6 +8584,7 @@ ${argsString}</pre
 			clearTimeout(this.transitionTimeoutId);
 			this.transitionTimeoutId = null;
 		}
+		this.clearIconRailContextCloseTimer();
 		this.unsubscribeFromInspectorThreadBridge();
 		this.threadsSetupPromptCopyGeneration += 1;
 		if (this.threadsSetupPromptCopyResetTimeoutId !== null) {
@@ -7825,6 +8594,7 @@ ${argsString}</pre
 		this.threadsSetupPromptCopyState = "idle";
 		this.stopSignalPulse();
 		this.cancelGestureTail();
+		this.cancelLauncherHudIntro();
 		this.cancelThreadRefreshDebounce();
 		this.clearInspectorUsageRefresh();
 		this.cleanupThreadsExampleOverviewVideo();
@@ -7861,6 +8631,7 @@ ${argsString}</pre
 		else this.centerContext("window");
 		this.ensureAnnouncementLoading();
 		this.updateHostTransform(this.isOpen ? "window" : "button");
+		this.scheduleLauncherHudIntro();
 	}
 	render() {
 		return this.isOpen ? html`
@@ -7923,8 +8694,6 @@ ${argsString}</pre
 			"text-xs",
 			"font-medium",
 			"text-white",
-			"transition",
-			"hover:scale-105",
 			"focus-visible:outline",
 			"focus-visible:outline-2",
 			"focus-visible:outline-offset-2",
@@ -8044,6 +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";
@@ -8072,6 +8876,7 @@ ${argsString}</pre
 		this.requestUpdate();
 	}
 	closeLauncherHud() {
+		this.cancelLauncherHudIntro();
 		if (this.launcherHudCloseTimer !== null) {
 			clearTimeout(this.launcherHudCloseTimer);
 			this.launcherHudCloseTimer = null;
@@ -8109,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
@@ -8138,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">
@@ -8162,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>
@@ -8277,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>
@@ -9067,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"
@@ -9668,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));
@@ -9892,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
@@ -9921,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"
@@ -9935,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}
@@ -10095,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)}
@@ -11472,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
@@ -11712,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) => {
@@ -11938,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"
                       >
@@ -11948,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 = {
@@ -11966,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">
@@ -12048,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
@@ -12188,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();
@@ -12684,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">
@@ -13427,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, defineWebInspector, ɵCpkThreadDetails, buildCapabilityRows as ɵbuildCapabilityRows, maxRecallScore as ɵmaxRecallScore, normalizeRelevance as ɵnormalizeRelevance, relevanceBarWidth as ɵrelevanceBarWidth };
+export { CpkThreadInspector, THREAD_INSPECTOR_TAG, WEB_INSPECTOR_TAG, WebInspectorElement, configureWebInspectorElement, defineWebInspector, ɵCpkThreadDetails, buildCapabilityRows as ɵbuildCapabilityRows, maxRecallScore as ɵmaxRecallScore, normalizeRelevance as ɵnormalizeRelevance, relevanceBarWidth as ɵrelevanceBarWidth };
 //# sourceMappingURL=index.mjs.map