@copilotkit/web-inspector 1.69.0 → 1.69.2

package/dist/index.cjs

@@ -34,11 +34,215 @@ const WHATS_NEW_VIEW_LABEL = "What's new";
 /** Menu key of the What's new leaf — the news signal's destination. */
 const WHATS_NEW_MENU_KEY = "whats-new";
 const NEWS_SIGNAL_ID = "whats-new";
-const NEWS_SIGNAL_TONE = "news";
-const NEWS_SIGNAL_COLOR = "#A78BFA";
-const NEWS_SIGNAL_CADENCE_MS = 2100;
-const NEWS_SIGNAL_DESTINATION = WHATS_NEW_MENU_KEY;
+const LAUNCHER_SIGNAL_COLORS = {
+	news: "#A78BFA",
+	error: "#F87171"
+};
+/**
+* The failure gesture, four phases in series:
+*
+* ```
+* beat 400ms  →  open 250ms  →  hold 2500ms  →  close 250ms   (3400ms total)
+* ```
+*
+* Sequential rather than simultaneous, deliberately: the beat says *here*, the
+* pill says *this*. The beat is short so the words arrive quickly.
+*
+* **All four durations live here and nowhere else.** The stylesheet reads the
+* two animated phases as custom properties injected from these numbers rather
+* than restating them, because they are taste and will be tuned by eye after
+* the first live look — tuning the feel must be a number, not a refactor.
+*/
+const ERROR_GESTURE_MS = {
+	beat: 400,
+	open: 250,
+	hold: 2500,
+	close: 250
+};
+/**
+* The words the pill carries, which are the words the panel already carries.
+*
+* `Runtime error` is the System Health runtime tile's own label, and
+* `Failed to load threads` is the Threads view's own heading. The outside and
+* the inside must agree, so these are shared rather than paraphrased.
+*/
+const RUNTIME_ERROR_LABEL = "Runtime error";
+const THREADS_LOAD_ERROR_LABEL = "Failed to load threads";
+const AGENT_RUN_FAILED_LABEL = "Agent run failed";
+const TOOL_ERROR_LABEL = "Tool error";
+const MEMORY_LOAD_ERROR_LABEL = "Failed to load learning data";
+/**
+* Copy on the landing view. Titles match the pill.
+*
+* The two fields differ in what they can promise. `advice` is about the
+* reader's next move and is always true. `highlight` is a claim about *this
+* view* — that the failed item is visible below — and the error carries no
+* guarantee of that: a code mapped to `run` can arrive with no run in the
+* buffer at all, and a tool error can arrive without the call id the
+* highlight needs. So it is rendered only once the item is actually there.
+* A card pointing at something the reader cannot find is worse than a card
+* that stays quiet, because it sends them looking.
+*/
+const EVENT_ERROR_GUIDANCE = {
+	run: {
+		title: AGENT_RUN_FAILED_LABEL,
+		highlight: "The failed run event is highlighted below."
+	},
+	tool: {
+		title: TOOL_ERROR_LABEL,
+		highlight: "The failed tool call is highlighted below."
+	},
+	memory: {
+		title: MEMORY_LOAD_ERROR_LABEL,
+		advice: "Confirm CopilotKit Intelligence is connected, then retry Learning."
+	}
+};
+/**
+* The pill's second line, shared by every subject that carries a pill.
+*
+* **This is the one string in the feature that exists nowhere else in the
+* product.** Every other word the launcher shows is word-identical to the
+* panel, which is the standing rule; this line is a deliberate, owner-approved
+* exception to it, because the pill became clickable and an invitation that
+* says nothing is not an invitation.
+*
+* It is shown, never spoken: the polite live region carries the failure class
+* alone. A screen-reader user cannot act on an instruction delivered through
+* an announcement, and it would double the spoken length.
+*/
+const PILL_SUBLINE_LABEL = "Open Inspector for details";
+const HUD_OPEN_INSPECTOR_LABEL = "Open Inspector";
+const HUD_THREADS_OFF_LABEL = "Turn on Threads";
+const HUD_THREADS_ON_LABEL = "Threads on";
+const HUD_INTELLIGENCE_OFF_LABEL = "Turn on Intelligence";
+const HUD_INTELLIGENCE_ON_LABEL = "Intelligence connected";
+const HUD_THREADS_OFF_DETAIL = "Inspect conversations from this app.";
+const HUD_THREADS_ON_DETAIL = "Threads is on. Opens the Threads view.";
+const HUD_INTELLIGENCE_OFF_DETAIL = "Connect Intelligence to use Threads and Learning.";
+const HUD_INTELLIGENCE_ON_DETAIL = "Intelligence is connected. Opens Home.";
+const HUD_LEARNING_OFF_LABEL = "Turn on Learning";
+const HUD_LEARNING_ON_LABEL = "Learning on";
+const HUD_LEARNING_OFF_DETAIL = "Connect Intelligence to use Learning.";
+const HUD_LEARNING_ON_DETAIL = "Learning is on. Opens the Learning view.";
+const HUD_OPEN_INSPECTOR_DETAIL = "Same as clicking the circle. Opens the full Inspector.";
+const LAUNCHER_SIGNALS = {
+	"whats-new": {
+		tone: "news",
+		markerTarget: WHATS_NEW_MENU_KEY,
+		landingTarget: "home",
+		cadence: 2100,
+		priority: 0,
+		accessibleLabel: "new content"
+	},
+	connection: {
+		tone: "error",
+		markerTarget: "home",
+		landingTarget: "home",
+		cadence: ERROR_GESTURE_MS.beat,
+		priority: 5,
+		accessibleLabel: "runtime error",
+		pillLabel: RUNTIME_ERROR_LABEL
+	},
+	threads: {
+		tone: "error",
+		markerTarget: "threads",
+		landingTarget: "threads",
+		cadence: ERROR_GESTURE_MS.beat,
+		priority: 4,
+		accessibleLabel: "thread loading error",
+		pillLabel: THREADS_LOAD_ERROR_LABEL
+	},
+	run: {
+		tone: "error",
+		markerTarget: "ag-ui-events",
+		landingTarget: "ag-ui-events",
+		cadence: ERROR_GESTURE_MS.beat,
+		priority: 3,
+		accessibleLabel: "agent run failed",
+		pillLabel: AGENT_RUN_FAILED_LABEL
+	},
+	tool: {
+		tone: "error",
+		markerTarget: "agents",
+		landingTarget: "agents",
+		cadence: ERROR_GESTURE_MS.beat,
+		priority: 2,
+		accessibleLabel: "tool error",
+		pillLabel: TOOL_ERROR_LABEL
+	},
+	memory: {
+		tone: "error",
+		markerTarget: "memories",
+		landingTarget: "memories",
+		cadence: ERROR_GESTURE_MS.beat,
+		priority: 1,
+		accessibleLabel: "learning error",
+		pillLabel: MEMORY_LOAD_ERROR_LABEL
+	}
+};
+/** Highest priority first, so the winner of the single dot is the head. */
+const LAUNCHER_SIGNAL_PRIORITY_ORDER = Object.keys(LAUNCHER_SIGNALS).sort((a, b) => LAUNCHER_SIGNALS[b].priority - LAUNCHER_SIGNALS[a].priority);
+/** Wiring *state* — red until the problem heals. */
+const WIRING_ERROR_KEYS = ["connection", "threads"];
+/** Unread *events* — red until the landing view is read. */
+const EVENT_ERROR_KEYS = [
+	"run",
+	"tool",
+	"memory"
+];
+function isWiringErrorKey(key) {
+	return WIRING_ERROR_KEYS.includes(key);
+}
+/**
+* Takes a plain string rather than a `LauncherSignalKey`, because one caller
+* reads the subject back out of a `data-` attribute, where the DOM can only
+* offer `string | undefined`. Narrowing untrusted input is what a guard is
+* for; `LauncherSignalKey` still satisfies the parameter, so the callers that
+* already hold one are unaffected.
+*/
+function isEventErrorKey(key) {
+	return EVENT_ERROR_KEYS.includes(key);
+}
+/** Narrows a signal key to an error source, excluding the announcement. */
+function isErrorSignalKey(key) {
+	return isWiringErrorKey(key) || isEventErrorKey(key);
+}
+/**
+* The control range is the point, not an oversight: an attribute selector has
+* to escape those characters too, and CSS.escape — which the fallback below
+* stands in for — escapes them as well. Hoisted so the suppression can sit on
+* the pattern rather than three lines above it.
+*/
+const SELECTOR_ESCAPE_PATTERN = /[\0-\x1f\x7f!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g;
+/** Attribute selector value. jsdom does not implement CSS.escape. */
+function escapeSelectorValue(value) {
+	if (typeof CSS !== "undefined" && typeof CSS.escape === "function") return CSS.escape(value);
+	return value.replace(SELECTOR_ESCAPE_PATTERN, "\\$&");
+}
+function eventErrorKeyForCode(code) {
+	switch (code) {
+		case _copilotkit_core.CopilotKitCoreErrorCode.TOOL_NOT_FOUND:
+		case _copilotkit_core.CopilotKitCoreErrorCode.TOOL_HANDLER_FAILED:
+		case _copilotkit_core.CopilotKitCoreErrorCode.TOOL_ARGUMENT_PARSE_FAILED:
+		case _copilotkit_core.CopilotKitCoreErrorCode.AGENT_NOT_FOUND: return "tool";
+		case _copilotkit_core.CopilotKitCoreErrorCode.AGENT_CONNECT_FAILED:
+		case _copilotkit_core.CopilotKitCoreErrorCode.AGENT_RUN_FAILED:
+		case _copilotkit_core.CopilotKitCoreErrorCode.AGENT_RUN_FAILED_EVENT:
+		case _copilotkit_core.CopilotKitCoreErrorCode.AGENT_RUN_ERROR_EVENT: return "run";
+		default: return null;
+	}
+}
+/**
+* Coalesce inspector-owned GET /threads sends. The first refresh goes out
+* at once. Further calls in this window share one trailing request, so a
+* flaky network does not fire a burst of list fetches and error cards.
+*/
+const THREAD_LIST_DEBOUNCE_MS = 300;
+/** The launcher's accessible name with nothing wrong. */
+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;
 const DRAG_THRESHOLD = 6;
 const MIN_WINDOW_WIDTH = 880;
 const MIN_WINDOW_WIDTH_DOCKED_LEFT = 640;
@@ -514,6 +718,7 @@ var CpkThreadList = class extends PortableLitElement {
 		super(..._args);
 		this.threads = [];
 		this.selectedThreadId = null;
+		this.inAppThreadId = null;
 		this.errorMessage = null;
 		this.suppressEmptyState = false;
 		this._query = "";
@@ -525,6 +730,7 @@ var CpkThreadList = class extends PortableLitElement {
 		this.properties = {
 			threads: { attribute: false },
 			selectedThreadId: { attribute: false },
+			inAppThreadId: { attribute: false },
 			errorMessage: { attribute: false },
 			suppressEmptyState: { attribute: false },
 			_query: { state: true }
@@ -675,6 +881,11 @@ var CpkThreadList = class extends PortableLitElement {
       color: #087653;
     }
 
+    .cpk-tl__pill--in-app {
+      background: #bec2ff;
+      color: #010507;
+    }
+
     /* ── Empty state ── */
     .cpk-tl__empty {
       padding: 32px 16px;
@@ -798,6 +1009,9 @@ var CpkThreadList = class extends PortableLitElement {
                   ${thread.isExample ? lit.html`
                           <span class="cpk-tl__pill cpk-tl__pill--example">Example</span>
                         ` : lit.nothing}
+                  ${this.inAppThreadId === thread.id ? lit.html`
+                          <span class="cpk-tl__pill cpk-tl__pill--in-app">In app</span>
+                        ` : lit.nothing}
                 </span>
               </button>
             `)}
@@ -864,6 +1078,8 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		this.agentStateInput = null;
 		this.agentEventsInput = [];
 		this.liveMessageVersion = 0;
+		this.viewInAppMode = "hidden";
+		this.viewInAppError = null;
 		this.focusMessageId = null;
 		this.focusRequestId = 0;
 		this._tab = "timeline";
@@ -937,6 +1153,8 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			agentStateInput: { attribute: false },
 			agentEventsInput: { attribute: false },
 			liveMessageVersion: { attribute: false },
+			viewInAppMode: { attribute: false },
+			viewInAppError: { attribute: false },
 			focusMessageId: { attribute: false },
 			focusRequestId: { attribute: false },
 			_tab: { state: true },
@@ -1259,6 +1477,37 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       overflow-wrap: anywhere;
     }
 
+    .cpk-td__view-in-app {
+      appearance: none;
+      flex-shrink: 0;
+      margin: 0;
+      border: 1px solid #5558b2;
+      border-radius: 6px;
+      background: #5558b2;
+      color: #ffffff;
+      font-family: "Plus Jakarta Sans", sans-serif;
+      font-size: 11px;
+      font-weight: 600;
+      padding: 5px 10px;
+      cursor: pointer;
+    }
+
+    .cpk-td__view-in-app:focus-visible {
+      outline: 2px solid #010507;
+      outline-offset: 2px;
+    }
+
+    .cpk-td__view-in-app--stop {
+      background: #ffffff;
+      color: #5558b2;
+    }
+
+    .cpk-td__view-in-app-error {
+      flex-basis: 100%;
+      color: #c0333a;
+      font-size: 11px;
+    }
+
     /*
      * Each tab's content is wrapped in this panel so the keep-mounted
      * inactive panels can be hidden via display:none without disturbing
@@ -2851,8 +3100,32 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
               </span>
             `)}
         </div>
+        ${this.renderViewInAppAction()}
         ${bulkControls}
       </div>
+    `;
+	}
+	renderViewInAppAction() {
+		if (this.viewInAppMode === "hidden") return lit.nothing;
+		const isStop = this.viewInAppMode === "stop";
+		return lit.html`
+      <button
+        type="button"
+        class="cpk-td__view-in-app ${isStop ? "cpk-td__view-in-app--stop" : ""}"
+        data-testid="cpk-inspector-view-in-app"
+        aria-label=${isStop ? "Stop viewing this thread in the app" : "View this thread in your app"}
+        @click=${() => {
+			this.dispatchEvent(new CustomEvent(isStop ? "stopViewing" : "viewInApp", {
+				bubbles: true,
+				composed: true
+			}));
+		}}
+      >
+        ${isStop ? "Stop viewing" : "View in your app"}
+      </button>
+      ${this.viewInAppError ? lit.html`<span class="cpk-td__view-in-app-error" role="alert"
+              >${this.viewInAppError}</span
+            >` : lit.nothing}
     `;
 	}
 	renderActiveBulkControls() {
@@ -4133,6 +4406,12 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		};
 		this.lastScrolledAgentNavigationLayout = null;
 		this.selectedThreadId = null;
+		this.inAppThreadId = null;
+		this.inAppAgentId = null;
+		this.inAppSource = null;
+		this.activeViewInAppRequestId = null;
+		this.viewInAppError = null;
+		this.inspectorBridgeUnsubscribers = [];
 		this.selectedRealThreadIsExplicit = false;
 		this.selectedLocalExampleThreadId = null;
 		this.requestedThreadId = null;
@@ -4196,9 +4475,39 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		this.announcementLoaded = false;
 		this.announcementPromise = null;
 		this.newsSignalArmed = false;
-		this.newsSignalPulsing = false;
-		this.newsSignalPulsePending = false;
+		this.pulsingSignal = null;
+		this.pendingPulseSignal = null;
 		this.pulseTimeoutId = null;
+		this.errorSignalArmed = {
+			connection: false,
+			threads: false
+		};
+		this.eventErrorArmed = {
+			run: false,
+			tool: false,
+			memory: false
+		};
+		this.eventErrorDetails = {
+			run: null,
+			tool: null,
+			memory: null
+		};
+		this.pendingScrollToEventId = null;
+		this.pendingScrollToToolCallId = null;
+		this.threadRefreshLastSentAt = /* @__PURE__ */ new Map();
+		this.threadRefreshTrailingTimers = /* @__PURE__ */ new Map();
+		this.errorBeatSpent = false;
+		this.errorSignalViewedSources = /* @__PURE__ */ new Set();
+		this.gestureSignal = null;
+		this.pillPhase = null;
+		this.pillDirection = null;
+		this.pillTimeoutId = null;
+		this.launcherHudOpen = false;
+		this.launcherHudSide = "left";
+		this.launcherHudHelp = null;
+		this.launcherHudCloseTimer = null;
+		this.hudLandingMenu = null;
+		this.pillOutcome = null;
 		this.viewedNewsSignalIds = /* @__PURE__ */ new Set();
 		this.pendingNewsSignalViewed = null;
 		this.viewedBannerSurfaces = /* @__PURE__ */ new Set();
@@ -4272,9 +4581,59 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		this.customTabIcons = { threads: `<svg class="h-3.5 w-3.5" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.04167 15C8.29167 15 7.65972 14.7431 7.14583 14.2292C6.63194 13.7153 6.375 13.0972 6.375 12.375C6.375 11.3194 6.80208 10.3646 7.65625 9.51042C8.51042 8.65625 9.57639 8.125 10.8542 7.91667C10.8125 7.41667 10.6875 7.03819 10.4792 6.78125C10.2708 6.52431 9.98611 6.39583 9.625 6.39583C9.20833 6.39583 8.75694 6.56944 8.27083 6.91667C7.78472 7.26389 7.20833 7.83333 6.54167 8.625C5.45833 9.91667 4.66319 10.7569 4.15625 11.1458C3.64931 11.5347 3.10417 11.7292 2.52083 11.7292C1.8125 11.7292 1.21528 11.4653 0.729167 10.9375C0.243056 10.4097 0 9.77083 0 9.02083C0 8.27083 0.163194 7.50347 0.489583 6.71875C0.815972 5.93403 1.36806 4.99306 2.14583 3.89583C2.40972 3.53472 2.60417 3.22917 2.72917 2.97917C2.85417 2.72917 2.91667 2.52778 2.91667 2.375C2.91667 2.27778 2.89931 2.20486 2.86458 2.15625C2.82986 2.10764 2.77778 2.08333 2.70833 2.08333C2.56944 2.08333 2.39583 2.17014 2.1875 2.34375C1.97917 2.51736 1.73611 2.78472 1.45833 3.14583L0 1.66667C0.444444 1.125 0.895833 0.711806 1.35417 0.427083C1.8125 0.142361 2.26389 0 2.70833 0C3.34722 0 3.88889 0.222222 4.33333 0.666667C4.77778 1.11111 5 1.66667 5 2.33333C5 2.73611 4.89583 3.18056 4.6875 3.66667C4.47917 4.15278 4.13194 4.73611 3.64583 5.41667C3.11806 6.16667 2.72569 6.82639 2.46875 7.39583C2.21181 7.96528 2.08333 8.46528 2.08333 8.89583C2.08333 9.13194 2.12153 9.31597 2.19792 9.44792C2.27431 9.57986 2.38194 9.64583 2.52083 9.64583C2.65972 9.64583 2.78125 9.60764 2.88542 9.53125C2.98958 9.45486 3.18056 9.27083 3.45833 8.97917C3.63889 8.78472 3.85417 8.54514 4.10417 8.26042C4.35417 7.97569 4.65972 7.625 5.02083 7.20833C5.89583 6.16667 6.6875 5.42361 7.39583 4.97917C8.10417 4.53472 8.84722 4.3125 9.625 4.3125C10.5556 4.3125 11.3194 4.625 11.9167 5.25C12.5139 5.875 12.8542 6.72917 12.9375 7.8125H15V9.89583H12.9375C12.8264 11.4514 12.4201 12.691 11.7188 13.6146C11.0174 14.5382 10.125 15 9.04167 15ZM9.08333 12.9167C9.52778 12.9167 9.90278 12.6632 10.2083 12.1562C10.5139 11.6493 10.7222 10.9444 10.8333 10.0417C10.1944 10.1944 9.63889 10.4965 9.16667 10.9479C8.69444 11.3993 8.45833 11.8472 8.45833 12.2917C8.45833 12.4861 8.51389 12.6389 8.625 12.75C8.73611 12.8611 8.88889 12.9167 9.08333 12.9167Z" fill="currentColor"/></svg>` };
 		this.handleDocumentVisibilityChange = () => {
 			this.accountCtaMotionPaused = document.visibilityState !== "visible";
-			if (document.visibilityState === "visible" && this.newsSignalPulsePending && !this.isOpen) this.startNewsSignalPulse();
+			if (document.visibilityState === "visible" && !this.isOpen) this.flushPendingSignalPulse();
+			this.requestUpdate();
+		};
+		this.handlePillClick = (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			this.openInspector("floating_button");
+		};
+		this.handleLauncherHudEnter = () => {
+			this.openLauncherHud();
+		};
+		this.handleLauncherHudLeave = () => {
+			if (this.launcherHudCloseTimer !== null) clearTimeout(this.launcherHudCloseTimer);
+			this.launcherHudCloseTimer = setTimeout(() => {
+				this.launcherHudCloseTimer = null;
+				this.closeLauncherHud();
+			}, 160);
+		};
+		this.handleLauncherHudFocusIn = () => {
+			this.openLauncherHud();
+		};
+		this.handleLauncherHudFocusOut = (event) => {
+			const next = event.relatedTarget;
+			const wrapper = event.currentTarget;
+			if (next instanceof Node && wrapper instanceof Node && wrapper.contains(next)) return;
+			this.closeLauncherHud();
+		};
+		this.handleLauncherHudKeydown = (event) => {
+			if (event.key !== "Escape") return;
+			if (!this.launcherHudOpen) return;
+			event.preventDefault();
+			event.stopPropagation();
+			this.closeLauncherHud();
+			this.activeRoot.querySelector(".console-button")?.focus();
+		};
+		this.handleHudActionClick = (event, row) => {
+			event.preventDefault();
+			event.stopPropagation();
+			this.hudLandingMenu = row === "inspector" ? null : row === "threads" ? "threads" : row === "learning" ? "memories" : "home";
+			this.closeLauncherHud();
+			this.openInspector("floating_button");
+		};
+		this.handleHudHelpClick = (event, row) => {
+			event.preventDefault();
+			event.stopPropagation();
+			this.launcherHudHelp = this.launcherHudHelp === row ? null : row;
 			this.requestUpdate();
 		};
+		this.handleHudRowClick = (event, row) => {
+			const target = event.target;
+			if (target instanceof Element && target.closest(".cpk-launcher-hud__help, [data-cpk-hud-action]")) return;
+			this.handleHudActionClick(event, row);
+		};
 		this.handleSidebarToggle = () => {
 			this.sidebarRailTooltip = null;
 			this.sidebarCollapsed = !this.sidebarCollapsed;
@@ -4306,6 +4665,17 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			this.persistState();
 			this.requestUpdate();
 		};
+		this.handleEventErrorBannerKeydown = (event) => {
+			if (event.key !== "Enter" && event.key !== " ") return;
+			event.preventDefault();
+			this.refocusEventErrorLanding(event);
+		};
+		this.refocusEventErrorLanding = (event) => {
+			const key = event.currentTarget?.dataset.cpkEventError;
+			if (!key || !isEventErrorKey(key)) return;
+			this.applyEventErrorLanding(key);
+			this.requestUpdate();
+		};
 		this.handleSystemColorSchemeChange = (event) => {
 			if (this.hasExplicitColorScheme) return;
 			this.colorScheme = event.matches ? "dark" : "light";
@@ -4682,6 +5052,40 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			if (target.hasPointerCapture(this.threadDividerPointerId)) target.releasePointerCapture(this.threadDividerPointerId);
 			this.threadDividerResizing = false;
 		};
+		this.handleViewInApp = () => {
+			const thread = this.getSelectedRealThread();
+			if (!thread) return;
+			if (this.activeViewInAppRequestId && this.inAppAgentId) (0, _copilotkit_core.emitInspectorStopViewing)({
+				requestId: this.activeViewInAppRequestId,
+				agentId: this.inAppAgentId
+			});
+			this.viewInAppError = null;
+			const requestId = (0, _copilotkit_core.createInspectorThreadRequestId)();
+			this.activeViewInAppRequestId = requestId;
+			if (!(0, _copilotkit_core.emitInspectorViewThread)({
+				requestId,
+				threadId: thread.id,
+				agentId: thread.agentId
+			})) {
+				this.activeViewInAppRequestId = null;
+				this.inAppThreadId = null;
+				this.inAppAgentId = null;
+				this.inAppSource = null;
+				this.viewInAppError = "No official chat for this agent is on the page.";
+			}
+			this.requestUpdate();
+		};
+		this.handleStopViewing = () => {
+			const requestId = this.activeViewInAppRequestId;
+			const agentId = this.inAppAgentId;
+			if (!requestId || !agentId) return;
+			this.viewInAppError = null;
+			(0, _copilotkit_core.emitInspectorStopViewing)({
+				requestId,
+				agentId
+			});
+			this.requestUpdate();
+		};
 		this.handleThreadsExampleOverviewVideoControl = () => {
 			const video = this.threadsExampleOverviewVideoElement;
 			if (!video) return;
@@ -5102,7 +5506,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		const statusSub = store.select(createThreadStoreStatusSelector()).subscribe(({ error, isLoading }) => {
 			if (capabilityGeneration !== this.threadCapabilityGeneration || !this.areThreadEndpointsAvailable()) return;
 			if (error) this._threadsErrorByAgent.set(agentId, error);
-			else this._threadsErrorByAgent.delete(agentId);
+			else if (!isLoading) this._threadsErrorByAgent.delete(agentId);
 			this._threadsLoadingByAgent.set(agentId, isLoading);
 			this.requestUpdate();
 		});
@@ -5116,7 +5520,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		this._threadsLoadingByAgent.set(agentId, (0, _copilotkit_core.ɵselectThreadsIsLoading)(initialState));
 		const initialError = (0, _copilotkit_core.ɵselectThreadsError)(initialState);
 		if (initialError) this._threadsErrorByAgent.set(agentId, initialError);
-		else this._threadsErrorByAgent.delete(agentId);
+		else if (!(0, _copilotkit_core.ɵselectThreadsIsLoading)(initialState)) this._threadsErrorByAgent.delete(agentId);
 		this.rebuildFlattenedThreads();
 		this.autoSelectLatestThread();
 	}
@@ -5197,8 +5601,28 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		if (!this.areThreadEndpointsAvailable()) return;
 		const store = this._ownedThreadStores.get(agentId);
 		if (!store) return;
+		const now = Date.now();
+		const waitMs = THREAD_LIST_DEBOUNCE_MS - (now - (this.threadRefreshLastSentAt.get(agentId) ?? 0));
+		if (waitMs <= 0) {
+			this.sendOwnedThreadRefresh(agentId, store, now);
+			return;
+		}
+		if (this.threadRefreshTrailingTimers.has(agentId)) return;
+		this.threadRefreshTrailingTimers.set(agentId, setTimeout(() => {
+			this.threadRefreshTrailingTimers.delete(agentId);
+			const current = this._ownedThreadStores.get(agentId);
+			if (!current) return;
+			this.sendOwnedThreadRefresh(agentId, current, Date.now());
+		}, waitMs));
+	}
+	sendOwnedThreadRefresh(agentId, store, sentAt) {
+		this.threadRefreshLastSentAt.set(agentId, sentAt);
 		store.refresh();
 	}
+	cancelThreadRefreshDebounce() {
+		for (const timer of this.threadRefreshTrailingTimers.values()) clearTimeout(timer);
+		this.threadRefreshTrailingTimers.clear();
+	}
 	updateOwnedThreadStoreHeaders(headers) {
 		if (!this.areThreadEndpointsAvailable()) return;
 		const core = this.core;
@@ -5254,6 +5678,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		this.runtimeStatus = core.runtimeConnectionStatus;
 		this.coreProperties = core.properties;
 		this.lastCoreError = null;
+		this.clearAllEventErrors();
 		const supportsInspectorMetadata = this.coreSupportsInspectorMetadata(core);
 		this.updateInspectorMetadataProjection(this.readCoreInspectorMetadata(core));
 		this.coreSubscriber = {
@@ -5289,11 +5714,12 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 				this.updateInspectorMetadataProjection(inspectorMetadata);
 				this.requestUpdate();
 			} } : {},
-			onError: ({ code, error }) => {
+			onError: ({ code, error, context }) => {
 				this.lastCoreError = {
 					code,
 					message: error.message
 				};
+				this.armEventErrorFromCode(code, error.message, context);
 				this.requestUpdate();
 			},
 			onAgentsChanged: ({ agents }) => {
@@ -5386,6 +5812,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			}),
 			memoryStore.select(_copilotkit_core.ɵselectMemoriesError).subscribe((v) => {
 				this._memoriesError = v;
+				if (v) this.armEventError("memory", v.message);
 				this.requestUpdate();
 			}),
 			memoryStore.select(_copilotkit_core.ɵselectMemoriesAvailable).subscribe((v) => {
@@ -5472,10 +5899,12 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		this._recallQuery = "";
 		this.coreSubscriber = null;
 		this.runtimeStatus = null;
+		this.cancelThreadRefreshDebounce();
 		this.inspectorMetadataValue = void 0;
 		this.inspectorMetadataProjection = require_inspector_metadata.projectInspectorMetadata(void 0, void 0);
 		this.metadataTelemetryFingerprints.clear();
 		this.lastCoreError = null;
+		this.clearAllEventErrors();
 		this.coreProperties = {};
 		this.cachedTools = [];
 		this.toolSignature = "";
@@ -5834,22 +6263,28 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 	}
 	renderToolCallDetails(toolCalls) {
 		if (!Array.isArray(toolCalls) || toolCalls.length === 0) return lit.nothing;
+		const toolError = this.eventErrorDetails.tool;
 		return lit.html`
       <div class="mt-2 space-y-2">
         ${toolCalls.map((call, index) => {
 			const functionName = call.function?.name ?? call.toolName ?? "Unknown function";
 			const callId = typeof call?.id === "string" ? call.id : `tool-call-${index + 1}`;
 			const argsString = this.formatToolCallArguments(call.function?.arguments);
+			const isFailedCall = toolError?.toolCallId !== void 0 && toolError.toolCallId === callId;
 			return lit.html`
             <div
-              class="rounded-md border border-gray-200 bg-gray-50 p-3 text-xs text-gray-700"
+              class=${isFailedCall ? "rounded-md border border-rose-300 bg-rose-50 p-3 text-xs text-gray-900" : "rounded-md border border-gray-200 bg-gray-50 p-3 text-xs text-gray-700"}
+              data-cpk-failed-tool-call=${isFailedCall ? callId : void 0}
             >
               <div
                 class="flex flex-wrap items-center justify-between gap-1 font-medium text-gray-900"
               >
-                <span>${functionName}</span>
-                <span class="text-[10px] text-gray-500">ID: ${callId}</span>
+                <span>${functionName}${isFailedCall ? " failed" : ""}</span>
+                <span class="text-[10px] text-gray-600">ID: ${callId}</span>
               </div>
+              ${isFailedCall && toolError?.message ? lit.html`<p class="mt-2 break-words leading-relaxed text-gray-800">
+                    ${toolError.message}
+                  </p>` : lit.nothing}
               ${argsString ? lit.html`<pre
                     class="mt-2 overflow-auto rounded bg-white p-2 text-[11px] leading-relaxed text-gray-800"
                   >
@@ -6001,18 +6436,28 @@ ${argsString}</pre
       .console-button-wrapper {
         position: relative;
         display: inline-flex;
-      }
-
-      .console-button {
+        /* The launcher's surface and edge, shared by the button and the pill so
+           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(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.
            Percentages resolve against the padding box, which the 1px border
-           insets, and the dot would land inside the rim. */
+           insets, and the dot would land inside the rim.
+
+           Declared on the wrapper rather than on the button so the pill, which
+           is the button's sibling, can clear the mark by the same length. */
         --cpk-launcher-size: clamp(
           ${LAUNCHER_MIN_SIZE}px,
           7vw,
           ${LAUNCHER_MAX_SIZE}px
         );
+      }
+
+      .console-button {
         width: var(--cpk-launcher-size);
         height: var(--cpk-launcher-size);
         /* Keep the 1px border inside the declared outer size. */
@@ -6414,14 +6859,29 @@ ${argsString}</pre
 
       /* ── Floating button ─────────────────────────────────────────── */
       .console-button {
-        background-color: rgba(1, 5, 7, 0.95) !important;
-        border-color: rgba(190, 194, 255, 0.25) !important;
+        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: rgba(1, 5, 7, 1) !important;
+        background-color: var(--cpk-launcher-face-solid) !important;
         border-color: rgba(190, 194, 255, 0.45) !important;
       }
       .console-button:focus-visible {
@@ -6439,7 +6899,6 @@ ${argsString}</pre
        * that forces a repaint every frame is not acceptable.
        */
       .console-button[data-cpk-signal] {
-        --cpk-launcher-face: rgba(1, 5, 7, 0.95);
         isolation: isolate;
       }
 
@@ -6545,8 +7004,197 @@ ${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 ─── */
+      /*
+       * The pill is laid out at its FULL width from the first frame and
+       * revealed by animating a rectangular clip. Nothing is scaled and
+       * nothing is resized.
+       *
+       * That is not a stylistic choice. This component is permanently mounted
+       * on top of a customer's application, so no property that forces a
+       * layout on every frame is acceptable — and animating "width" does
+       * exactly that, sixty times a second, on someone else's page. A clip
+       * leaves the element's geometry constant and changes only the visible
+       * region, which the compositor handles. Animating a horizontal scale
+       * was the other candidate and squashes the mark itself, not merely the
+       * rounded end, so the logo would need counter-scaling and the dot and
+       * halo would become ellipses.
+       *
+       * The launcher's own face and border are repeated here so the two form
+       * one capsule: the button paints last and therefore on top, with no
+       * z-index needed. The mark's own ring and shadow are deliberately left
+       * alone for the whole gesture — the circle's outline staying visible
+       * inside the open pill was looked at against the alternative and kept.
+       *
+       * A column, not a row: the pill carries a heading and a subline stacked,
+       * centred against a height that does not change. "justify-content"
+       * centres the pair vertically and "align-items" keeps both lines flush
+       * left, so the pill never grows taller than the launcher it opens from.
+       */
+      .cpk-launcher-pill {
+        position: absolute;
+        top: 50%;
+        margin-top: calc(var(--cpk-launcher-size) / -2);
+        height: var(--cpk-launcher-size);
+        display: inline-flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: 1px;
+        box-sizing: border-box;
+        border-radius: 999px;
+        border: 1px solid var(--cpk-launcher-edge);
+        background: var(--cpk-launcher-face);
+        color: #ffffff;
+        white-space: nowrap;
+        pointer-events: none;
+        opacity: 0;
+      }
+
+      /* The failure class, word-identical to the panel's own wording. */
+      .cpk-launcher-pill__heading {
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 1.2;
+      }
+
+      /*
+       * The one line of copy in this feature that exists nowhere else in the
+       * product. The heading above is word-identical to the panel, which is
+       * the standing rule; this line is a deliberate, owner-approved exception
+       * to it, because the pill is now clickable and has to say so.
+       *
+       * It is NOT spoken. A screen-reader user cannot act on an instruction
+       * delivered through an announcement, and it would double the spoken
+       * length — so the live region carries the failure class alone.
+       */
+      .cpk-launcher-pill__subline {
+        font-size: 10.5px;
+        font-weight: 500;
+        line-height: 1.2;
+        opacity: 0.72;
+      }
+
+      /*
+       * Two directions, one animation with the inset on the other side. The
+       * padding on the launcher's side clears the mark, so the words never sit
+       * under it. The text-side padding is derived from the capsule's radius
+       * (half the launcher size), NOT a bare literal: padding is measured from
+       * the bounding box, but the first half-height of that side is the rounded
+       * cap. Half the size lands the text exactly where the cap ends and the
+       * straight edge begins. A literal 14px put it 16px inside the curve at the
+       * production launcher size, which is itself a clamp on the viewport.
+       */
+      .cpk-launcher-pill[data-cpk-pill-direction="left"] {
+        right: 0;
+        padding: 0 calc(var(--cpk-launcher-size) + 12px) 0
+          calc(var(--cpk-launcher-size) / 2);
+        clip-path: inset(0 0 0 calc(100% - var(--cpk-launcher-size)));
+      }
+      .cpk-launcher-pill[data-cpk-pill-direction="right"] {
+        left: 0;
+        padding: 0 calc(var(--cpk-launcher-size) / 2) 0
+          calc(var(--cpk-launcher-size) + 12px);
+        clip-path: inset(0 calc(100% - var(--cpk-launcher-size)) 0 0);
+      }
+
+      /*
+       * "round" on both stops, so the revealing edge is the capsule's own
+       * rounded end travelling sideways rather than a straight vertical line
+       * wiping across it. An unrounded inset reads as a wipe; this reads as an
+       * opening. It adds no animated property: the clip is still the clip.
+       */
+      @keyframes cpk-launcher-pill-left {
+        0% {
+          opacity: 0;
+          clip-path: inset(
+            0 0 0 calc(100% - var(--cpk-launcher-size)) round 999px
+          );
+        }
+        100% {
+          opacity: 1;
+          clip-path: inset(0 0 0 0 round 999px);
+        }
+      }
+
+      @keyframes cpk-launcher-pill-right {
+        0% {
+          opacity: 0;
+          clip-path: inset(
+            0 calc(100% - var(--cpk-launcher-size)) 0 0 round 999px
+          );
+        }
+        100% {
+          opacity: 1;
+          clip-path: inset(0 0 0 0 round 999px);
+        }
+      }
+
+      /*
+       * The pill takes the pointer exactly while it is on screen, so the
+       * instruction it now carries is honest: a click on it opens the
+       * Inspector, the same action as pressing the mark. During the beat the
+       * clip covers only the mark itself, and a click target nobody can see
+       * over someone else's page is not something to ship — so the base rule
+       * keeps "pointer-events: none" and only the three visible phases take it
+       * back.
+       * The button paints last and therefore wins the pointer where the two
+       * overlap, so dragging the launcher is unaffected throughout.
+       */
+      .cpk-launcher-pill[data-cpk-pill-phase="opening"],
+      .cpk-launcher-pill[data-cpk-pill-phase="holding"],
+      .cpk-launcher-pill[data-cpk-pill-phase="closing"] {
+        pointer-events: auto;
+        cursor: pointer;
+      }
+
+      /* Closing is the same animation played backwards, so the two phases can
+         never drift apart. */
+      .cpk-launcher-pill[data-cpk-pill-phase="opening"],
+      .cpk-launcher-pill[data-cpk-pill-phase="closing"] {
+        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+        animation-iteration-count: 1;
+        animation-fill-mode: forwards;
+      }
+      .cpk-launcher-pill[data-cpk-pill-phase="opening"] {
+        animation-duration: var(--cpk-launcher-pill-open);
+      }
+      .cpk-launcher-pill[data-cpk-pill-phase="closing"] {
+        animation-duration: var(--cpk-launcher-pill-close);
+        animation-direction: reverse;
+      }
+      .cpk-launcher-pill[data-cpk-pill-phase="opening"][data-cpk-pill-direction="left"],
+      .cpk-launcher-pill[data-cpk-pill-phase="closing"][data-cpk-pill-direction="left"] {
+        animation-name: cpk-launcher-pill-left;
+      }
+      .cpk-launcher-pill[data-cpk-pill-phase="opening"][data-cpk-pill-direction="right"],
+      .cpk-launcher-pill[data-cpk-pill-phase="closing"][data-cpk-pill-direction="right"] {
+        animation-name: cpk-launcher-pill-right;
+      }
+
+      /* The hold is the end state of the reveal, held. */
+      .cpk-launcher-pill[data-cpk-pill-phase="holding"] {
+        opacity: 1;
+        clip-path: inset(0 0 0 0);
       }
 
       /*
@@ -6554,6 +7202,18 @@ ${argsString}</pre
        * the information arrives without the movement.
        */
       @media (prefers-reduced-motion: reduce) {
+        /*
+         * The pill is shown by opacity alone, with no clip animation and the
+         * same hold. The instruction is to reduce motion, not to withhold
+         * information, and this reader needs the label as much as anyone.
+         */
+        .cpk-launcher-pill[data-cpk-pill-phase="opening"],
+        .cpk-launcher-pill[data-cpk-pill-phase="holding"],
+        .cpk-launcher-pill[data-cpk-pill-phase="closing"] {
+          animation: none !important;
+          opacity: 1;
+          clip-path: inset(0 0 0 0);
+        }
         .cpk-launcher-signal-wash {
           opacity: 0.85;
         }
@@ -6573,70 +7233,287 @@ ${argsString}</pre
         }
       }
 
-      /*
-       * Unread marker on the navigation entry, which is what keeps the signal
-       * alive once the panel is open and the launcher is hidden. Static by
-       * design: the pulse belongs to the launcher, and movement here would
-       * compete with the live event stream a developer is actually watching.
-       */
-      .inspector-nav-signal-dot {
-        display: inline-block;
-        flex: none;
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background: ${(0, lit.unsafeCSS)(NEWS_SIGNAL_COLOR)};
+      /* ── Launcher HUD: hover menu, quieter than the error island ── */
+      .console-button-wrapper[data-cpk-hud="open"] .cpk-launcher-hud {
+        pointer-events: auto;
+        opacity: 1;
+        transform: none;
+        visibility: visible;
       }
 
-      /* ── Inspector window ────────────────────────────────────────── */
-      .inspector-window {
-        border: 1px solid #d8d8e8 !important;
-        border-radius: 5px !important;
-        box-shadow: none !important;
+      .cpk-launcher-hud {
+        position: absolute;
+        top: 0;
+        z-index: 4;
+        padding-right: 14px;
+        pointer-events: none;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateX(8px);
+        transition:
+          opacity 160ms ease,
+          transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
       }
 
-      /* ── Header drag area ────────────────────────────────────────── */
-      .drag-handle {
-        border-bottom-color: #d8d8e8 !important;
-        background-color: #f7f6fd !important;
+      .cpk-launcher-hud[data-cpk-hud-side="left"] {
+        right: 100%;
+        padding-right: 14px;
+        padding-left: 0;
       }
 
-      .inspector-account-strip {
-        background: linear-gradient(
-          90deg,
-          #ffffff 0%,
-          #f3f1ff 58%,
-          #eefbf7 100%
-        ) !important;
-        color: #010507 !important;
+      .cpk-launcher-hud[data-cpk-hud-side="right"] {
+        left: 100%;
+        right: auto;
+        padding-right: 0;
+        padding-left: 14px;
+        transform: translateX(-8px);
       }
 
-      /* ── Tab buttons ─────────────────────────────────────────────── */
-      /*
-       * Named classes owned by this component — no Tailwind conflict.
-       * Active: brand surface/surfaceContainerActive (lilac tint) +
-       *         border/borderActionEnabled underline.
-       * Dark fill is for primary action buttons only, not nav tabs.
-       */
-      .cpk-tab-active {
-        background-color: rgba(190, 194, 255, 0.18);
-        color: #010507;
-        font-weight: 600;
+      .console-button-wrapper[data-cpk-hud="open"]
+        .cpk-launcher-hud[data-cpk-hud-side="right"] {
+        transform: none;
       }
-      .cpk-tab-icon {
-        display: inline-flex;
-        flex-shrink: 0;
-        align-items: center;
+
+      .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;
+        background: var(--hud-fill);
+        color: #fff;
+        backdrop-filter: blur(12px) saturate(1.2);
+        box-shadow: 0 8px 20px rgb(1 5 7 / 0.18);
       }
-      .cpk-tab-active .cpk-tab-icon {
-        color: #5558b2;
+
+      .cpk-launcher-hud__arrow {
+        position: absolute;
+        top: calc(var(--cpk-launcher-size) / 2);
+        width: 10px;
+        height: 10px;
+        background: var(--hud-fill);
+        transform: translateY(-50%) rotate(45deg);
       }
-      .cpk-tab-inactive {
-        background-color: transparent;
-        color: #2b2b2b;
+
+      .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);
       }
-      .cpk-tab-inactive .cpk-tab-icon {
-        color: #68686e;
+
+      .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);
+      }
+
+      .cpk-launcher-hud__list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+
+      .cpk-launcher-hud__list + .cpk-launcher-hud__list {
+        margin-top: 4px;
+        padding-top: 4px;
+        border-top: 1px dotted var(--hud-line);
+      }
+
+      .cpk-launcher-hud__row {
+        position: relative;
+        display: grid;
+        grid-template-columns: 1fr 28px;
+        align-items: start;
+        border-radius: 7px;
+        cursor: pointer;
+      }
+
+      .cpk-launcher-hud__row + .cpk-launcher-hud__row {
+        margin-top: 1px;
+      }
+
+      .cpk-launcher-hud__row:hover,
+      .cpk-launcher-hud__row:focus-within,
+      .cpk-launcher-hud__row[data-cpk-hud-help="open"] {
+        background: rgb(255 255 255 / 0.06);
+      }
+
+      .cpk-launcher-hud__action {
+        display: flex;
+        gap: 8px;
+        min-height: 32px;
+        align-items: center;
+        padding: 6px 8px;
+        border: 0;
+        border-radius: 7px;
+        background: transparent;
+        color: #fff;
+        font-family: inherit;
+        font-size: 12px;
+        font-weight: 600;
+        text-align: start;
+        cursor: pointer;
+      }
+
+      /* Stretch the row action over the whole tab, including the detail
+         copy. The help mark sits above this layer. */
+      .cpk-launcher-hud__action::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+      }
+
+      .cpk-launcher-hud__check {
+        flex: none;
+        width: 14px;
+        height: 14px;
+        color: #34d399;
+      }
+
+      .cpk-launcher-hud__help {
+        position: relative;
+        z-index: 1;
+        display: inline-flex;
+        width: 28px;
+        height: 32px;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: rgb(255 255 255 / 0.78);
+        font-size: 12px;
+        font-weight: 600;
+        cursor: pointer;
+      }
+
+      .cpk-launcher-hud__help span {
+        display: inline-flex;
+        width: 16px;
+        height: 16px;
+        align-items: center;
+        justify-content: center;
+        border: 1px dotted rgb(190 194 255 / 0.55);
+        border-radius: 50%;
+        line-height: 1;
+      }
+
+      .cpk-launcher-hud__help:focus-visible,
+      .cpk-launcher-hud__action:focus-visible {
+        outline: 2px solid #bec2ff;
+        outline-offset: 1px;
+      }
+
+      .cpk-launcher-hud__detail {
+        grid-column: 1 / -1;
+        max-height: 0;
+        margin: 0;
+        padding: 0 8px;
+        overflow: hidden;
+        color: rgb(255 255 255 / 0.78);
+        font-size: 11px;
+        font-weight: 400;
+        line-height: 1.4;
+        opacity: 0;
+        pointer-events: none;
+        transform: translateY(-6px);
+        transition:
+          max-height 200ms cubic-bezier(0.16, 1, 0.3, 1),
+          opacity 150ms ease-out,
+          transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
+          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;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .cpk-launcher-hud,
+        .cpk-launcher-hud__detail {
+          transition: 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:
+       * the beat belongs to the launcher, and movement here would compete with
+       * the live event stream a developer is actually watching.
+       *
+       * Tone-selected rather than tone-agnostic, because the marker has to
+       * agree with the dot that sent the reader here. Same shape, same
+       * placement, one declaration different — as on the launcher, where the
+       * treatment is shared and only the injected colour changes.
+       */
+      .inspector-nav-signal-dot {
+        display: inline-block;
+        flex: none;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: ${(0, lit.unsafeCSS)(LAUNCHER_SIGNAL_COLORS.news)};
+      }
+      .inspector-nav-signal-dot[data-cpk-signal-tone="error"] {
+        background: ${(0, lit.unsafeCSS)(LAUNCHER_SIGNAL_COLORS.error)};
+      }
+
+      /* ── Inspector window ────────────────────────────────────────── */
+      .inspector-window {
+        border: 1px solid #d8d8e8 !important;
+        border-radius: 5px !important;
+        box-shadow: none !important;
+      }
+
+      /* ── Header drag area ────────────────────────────────────────── */
+      .drag-handle {
+        border-bottom-color: #d8d8e8 !important;
+        background-color: #f7f6fd !important;
+      }
+
+      .inspector-account-strip {
+        background: linear-gradient(
+          90deg,
+          #ffffff 0%,
+          #f3f1ff 58%,
+          #eefbf7 100%
+        ) !important;
+        color: #010507 !important;
+      }
+
+      /* ── Tab buttons ─────────────────────────────────────────────── */
+      /*
+       * Named classes owned by this component — no Tailwind conflict.
+       * Active: brand surface/surfaceContainerActive (lilac tint) +
+       *         border/borderActionEnabled underline.
+       * Dark fill is for primary action buttons only, not nav tabs.
+       */
+      .cpk-tab-active {
+        background-color: rgba(190, 194, 255, 0.18);
+        color: #010507;
+        font-weight: 600;
+      }
+      .cpk-tab-icon {
+        display: inline-flex;
+        flex-shrink: 0;
+        align-items: center;
+      }
+      .cpk-tab-active .cpk-tab-icon {
+        color: #5558b2;
+      }
+      .cpk-tab-inactive {
+        background-color: transparent;
+        color: #2b2b2b;
+      }
+      .cpk-tab-inactive .cpk-tab-icon {
+        color: #68686e;
       }
       .cpk-tab-inactive:hover {
         background-color: rgba(190, 194, 255, 0.08);
@@ -6917,6 +7794,7 @@ ${argsString}</pre
 			require_persistence.clearLegacyAnnouncementReadState();
 			this.tryAutoAttachCore();
 			this.ensureAnnouncementLoading();
+			this.subscribeToInspectorThreadBridge();
 		}
 		this.requestUpdate();
 	}
@@ -6939,13 +7817,16 @@ ${argsString}</pre
 			clearTimeout(this.transitionTimeoutId);
 			this.transitionTimeoutId = null;
 		}
+		this.unsubscribeFromInspectorThreadBridge();
 		this.threadsSetupPromptCopyGeneration += 1;
 		if (this.threadsSetupPromptCopyResetTimeoutId !== null) {
 			window.clearTimeout(this.threadsSetupPromptCopyResetTimeoutId);
 			this.threadsSetupPromptCopyResetTimeoutId = null;
 		}
 		this.threadsSetupPromptCopyState = "idle";
-		this.stopNewsSignalPulse();
+		this.stopSignalPulse();
+		this.cancelGestureTail();
+		this.cancelThreadRefreshDebounce();
 		this.clearInspectorUsageRefresh();
 		this.cleanupThreadsExampleOverviewVideo();
 		this.removeDockStyles(true);
@@ -6988,6 +7869,7 @@ ${argsString}</pre
         ` : this.renderButton();
 	}
 	willUpdate() {
+		this.evaluateErrorSignals();
 		this.reconcileSelectedMenuVisibility();
 		if (this.isOpen && this.dockMode === "docked-left") this.setAttribute("data-docked", "true");
 		else this.removeAttribute("data-docked");
@@ -6997,7 +7879,11 @@ ${argsString}</pre
 		this.syncThreadsExampleOverviewVideo();
 		this.maybeTrackInspectorMetadataViews();
 		this.maybeTrackNewsSignalViewed();
+		this.resolvePillDirection();
+		this.maybeTrackErrorSignalViewed();
 		this.maybeCompleteWhatsNewView();
+		this.maybeCompleteEventErrorView();
+		this.flushErrorLandingScroll();
 		this.maybeTrackHomeViewed();
 		if (!this.isOpen) {
 			this.lastScrolledAgentNavigationLayout = null;
@@ -7035,17 +7921,10 @@ ${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",
@@ -7055,20 +7934,33 @@ ${argsString}</pre
 			"select-none",
 			this.isDragging ? "cursor-grabbing" : "cursor-pointer"
 		].join(" ");
-		const signalStyles = this.newsSignalArmed ? {
-			"--cpk-launcher-signal": NEWS_SIGNAL_COLOR,
-			"--cpk-launcher-cadence": `${NEWS_SIGNAL_CADENCE_MS}ms`
+		const activeSignal = this.getActiveLauncherSignal();
+		const signal = activeSignal ? LAUNCHER_SIGNALS[activeSignal] : null;
+		const signalStyles = signal ? {
+			"--cpk-launcher-signal": LAUNCHER_SIGNAL_COLORS[signal.tone],
+			"--cpk-launcher-cadence": `${signal.cadence}ms`
 		} : {};
 		return lit.html`
-      <div class="console-button-wrapper">
+      <div
+        class="console-button-wrapper"
+        data-cpk-hud=${this.launcherHudOpen ? "open" : "closed"}
+        @pointerenter=${this.handleLauncherHudEnter}
+        @pointerleave=${this.handleLauncherHudLeave}
+        @focusin=${this.handleLauncherHudFocusIn}
+        @focusout=${this.handleLauncherHudFocusOut}
+        @keydown=${this.handleLauncherHudKeydown}
+      >
+        ${this.renderLauncherPill()}
         <button
           class=${buttonClasses}
           type="button"
-          aria-label="Web Inspector"
-          title=${this.newsSignalArmed ? `${WHATS_NEW_VIEW_LABEL} — unread` : lit.nothing}
+          aria-expanded=${this.launcherHudOpen ? "true" : "false"}
+          aria-controls=${this.launcherHudOpen ? "cpk-launcher-hud" : lit.nothing}
+          aria-label=${signal && signal.tone === "error" ? `${LAUNCHER_BASE_LABEL}, ${signal.accessibleLabel}` : LAUNCHER_BASE_LABEL}
+          title=${activeSignal === NEWS_SIGNAL_ID ? `${WHATS_NEW_VIEW_LABEL} — unread` : lit.nothing}
           data-drag-context="button"
-          data-cpk-signal=${this.newsSignalArmed ? NEWS_SIGNAL_TONE : lit.nothing}
-          data-cpk-signal-pulsing=${this.newsSignalArmed && this.newsSignalPulsing ? "true" : lit.nothing}
+          data-cpk-signal=${signal ? signal.tone : lit.nothing}
+          data-cpk-signal-pulsing=${activeSignal !== null && this.pulsingSignal === activeSignal ? "true" : lit.nothing}
           style=${(0, lit_directives_style_map_js.styleMap)(signalStyles)}
           data-dragging=${this.isDragging && this.pointerContext === "button" ? "true" : "false"}
           @pointerdown=${this.handlePointerDown}
@@ -7083,16 +7975,210 @@ ${argsString}</pre
             class="cpk-launcher-mark h-6 w-auto"
             loading="lazy"
           />
-          ${this.newsSignalArmed ? lit.html`<span
+          ${activeSignal !== null ? lit.html`<span
                     class="cpk-launcher-signal-wash"
                     aria-hidden="true"
                   ></span>
                   <span
                     class="cpk-launcher-signal-dot"
-                    data-cpk-signal-dot=${NEWS_SIGNAL_ID}
+                    data-cpk-signal-dot=${activeSignal}
                     aria-hidden="true"
                   ></span>` : lit.nothing}
         </button>
+        ${lit.html`<span
+            class="sr-only"
+            data-cpk-launcher-announcement
+            role="status"
+            aria-live="polite"
+            >${this.getGestureLabel() ?? ""}</span
+          >`}
+        ${this.renderLauncherHud()}
+      </div>
+    `;
+	}
+	/**
+	* The words the running gesture carries, or null when the launcher is quiet.
+	*
+	* Read from the signal's own description rather than from a condition on the
+	* tone, so a third signal can carry a pill by declaring a label.
+	*/
+	getGestureLabel() {
+		if (this.gestureSignal === null) return null;
+		return LAUNCHER_SIGNALS[this.gestureSignal].pillLabel ?? null;
+	}
+	/**
+	* The pill, laid out at its full width and clipped, for the whole gesture.
+	*
+	* It renders from the first frame of the beat — clipped to nothing, so it
+	* shows nothing — because the room it needs cannot be measured until it has
+	* been laid out, and the direction is decided at gesture start.
+	*/
+	renderLauncherPill() {
+		const key = this.gestureSignal;
+		if (key === null || this.pillPhase === null) return lit.nothing;
+		const signal = LAUNCHER_SIGNALS[key];
+		const label = signal.pillLabel;
+		if (label === void 0) return lit.nothing;
+		return lit.html`
+      <span
+        class="cpk-launcher-pill"
+        data-cpk-launcher-pill=${key}
+        data-cpk-pill-phase=${this.pillPhase}
+        data-cpk-pill-direction=${this.pillDirection ?? "left"}
+        style=${(0, lit_directives_style_map_js.styleMap)({
+			"--cpk-launcher-signal": LAUNCHER_SIGNAL_COLORS[signal.tone],
+			"--cpk-launcher-pill-open": `${ERROR_GESTURE_MS.open}ms`,
+			"--cpk-launcher-pill-close": `${ERROR_GESTURE_MS.close}ms`
+		})}
+        aria-hidden="true"
+        @click=${this.handlePillClick}
+      >
+        <span class="cpk-launcher-pill__heading" data-cpk-pill-heading
+          >${label}</span
+        >
+        <span class="cpk-launcher-pill__subline" data-cpk-pill-subline
+          >${PILL_SUBLINE_LABEL}</span
+        >
+      </span>
+    `;
+	}
+	isLauncherHudBlocked() {
+		return this.gestureSignal !== null;
+	}
+	resolveLauncherHudSide() {
+		if (typeof window === "undefined") {
+			this.launcherHudSide = "left";
+			return;
+		}
+		const button = this.activeRoot.querySelector(".console-button");
+		if (!button) {
+			this.launcherHudSide = "left";
+			return;
+		}
+		if (button.getBoundingClientRect().left - LAUNCHER_HUD_WIDTH >= EDGE_MARGIN) {
+			this.launcherHudSide = "left";
+			return;
+		}
+		this.launcherHudSide = "right";
+	}
+	openLauncherHud() {
+		if (this.isLauncherHudBlocked() || this.isOpen) return;
+		this.resolveLauncherHudSide();
+		if (this.launcherHudCloseTimer !== null) {
+			clearTimeout(this.launcherHudCloseTimer);
+			this.launcherHudCloseTimer = null;
+		}
+		if (this.launcherHudOpen) return;
+		this.launcherHudOpen = true;
+		this.requestUpdate();
+	}
+	closeLauncherHud() {
+		if (this.launcherHudCloseTimer !== null) {
+			clearTimeout(this.launcherHudCloseTimer);
+			this.launcherHudCloseTimer = null;
+		}
+		if (!this.launcherHudOpen && this.launcherHudHelp === null) return;
+		this.launcherHudOpen = false;
+		this.launcherHudHelp = null;
+		this.requestUpdate();
+	}
+	renderHudCheck() {
+		return lit.html`
+      <svg
+        class="cpk-launcher-hud__check"
+        viewBox="0 0 16 16"
+        aria-hidden="true"
+        focusable="false"
+        data-cpk-hud-check
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M3 8.5 6.5 12 13 4.5"
+        />
+      </svg>
+    `;
+	}
+	renderHudRow(args) {
+		const helpOpen = this.launcherHudHelp === args.id;
+		const detailId = `cpk-hud-detail-${args.id}`;
+		return lit.html`
+      <li
+        class="cpk-launcher-hud__row"
+        data-cpk-hud-row=${args.id}
+        data-cpk-hud-help=${helpOpen ? "open" : lit.nothing}
+        @click=${(event) => this.handleHudRowClick(event, args.id)}
+      >
+        <button
+          type="button"
+          class="cpk-launcher-hud__action"
+          data-cpk-hud-action
+          aria-describedby=${detailId}
+          @click=${(event) => this.handleHudActionClick(event, args.id)}
+          @pointerdown=${(event) => event.stopPropagation()}
+        >
+          ${args.connected ? this.renderHudCheck() : lit.nothing}${args.label}
+        </button>
+        <button
+          type="button"
+          class="cpk-launcher-hud__help"
+          aria-expanded=${helpOpen ? "true" : "false"}
+          aria-controls=${detailId}
+          aria-label=${`About ${args.label}`}
+          @click=${(event) => this.handleHudHelpClick(event, args.id)}
+          @pointerdown=${(event) => event.stopPropagation()}
+        >
+          <span aria-hidden="true">?</span>
+        </button>
+        <p class="cpk-launcher-hud__detail" id=${detailId}>${args.detail}</p>
+      </li>
+    `;
+	}
+	renderLauncherHud() {
+		if (!this.launcherHudOpen) return lit.nothing;
+		const threadsOn = this.areThreadEndpointsAvailable();
+		const intelligenceOn = Boolean(this._core?.intelligence);
+		const learningOn = intelligenceOn && this._memoriesAvailable;
+		return lit.html`
+      <div
+        class="cpk-launcher-hud"
+        id="cpk-launcher-hud"
+        data-cpk-launcher-hud
+        data-cpk-hud-side=${this.launcherHudSide}
+      >
+        <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
+		})}
+          </ul>
+          <ul class="cpk-launcher-hud__list" role="list">
+            ${this.renderHudRow({
+			id: "threads",
+			label: threadsOn ? HUD_THREADS_ON_LABEL : HUD_THREADS_OFF_LABEL,
+			detail: threadsOn ? HUD_THREADS_ON_DETAIL : HUD_THREADS_OFF_DETAIL,
+			connected: threadsOn
+		})}
+            ${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
+		})}
+            ${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
+		})}
+          </ul>
+        </div>
       </div>
     `;
 	}
@@ -7114,7 +8200,6 @@ ${argsString}</pre
     `;
 	}
 	renderInspectorSidebar(iconRail, automaticallyCollapsed, agentSelector) {
-		const unread = this.newsSignalArmed && this.announcementLoaded;
 		const homeModel = this.getHomeModel();
 		return lit.html`
       <aside
@@ -7156,7 +8241,7 @@ ${argsString}</pre
                     </button>` : lit.nothing}
                 ${items.map((item) => {
 				const isSelected = this.selectedMenu === item.key;
-				const showBadge = item.key === NEWS_SIGNAL_DESTINATION && unread;
+				const marker = this.getNavigationSignalFor(item.key);
 				return lit.html`
                     <button
                       type="button"
@@ -7164,7 +8249,7 @@ ${argsString}</pre
                       data-inspector-group=${group}
                       data-inspector-menu-key=${item.key}
                       aria-current=${isSelected ? "page" : lit.nothing}
-                      aria-label=${showBadge ? `${item.label}, new content` : item.label}
+                      aria-label=${marker ? `${item.label}, ${marker.accessibleLabel}` : item.label}
                       data-inspector-tooltip=${item.label}
                       title=${iconRail ? lit.nothing : item.label}
                       style=${INTERACTIVE_FOCUS_BASE_STYLE}
@@ -7178,8 +8263,12 @@ ${argsString}</pre
                         ${item.key === "threads" ? (0, lit_directives_unsafe_html_js.unsafeHTML)(this.customTabIcons.threads) : this.renderIcon(item.icon)}
                       </span>
                       <span class="inspector-nav-label">${item.label}</span>
-                      ${showBadge ? lit.html`
-                              <span class="inspector-nav-signal-dot" aria-hidden="true"></span>
+                      ${marker ? lit.html`
+                              <span
+                                class="inspector-nav-signal-dot"
+                                data-cpk-signal-tone=${marker.tone}
+                                aria-hidden="true"
+                              ></span>
                             ` : lit.nothing}
                     </button>
                   `;
@@ -7653,6 +8742,31 @@ ${argsString}</pre
             `)}
         </dl>
       </section>
+    `;
+	}
+	renderEventErrorBanner(key) {
+		const error = this.eventErrorDetails[key];
+		if (!error) return lit.nothing;
+		const guide = EVENT_ERROR_GUIDANCE[key];
+		return lit.html`
+      <div
+        class="mx-3 mt-3 flex cursor-pointer items-start gap-2 rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-left text-[11px] text-rose-950"
+        role="alert"
+        tabindex="0"
+        data-cpk-event-error=${key}
+        @click=${this.refocusEventErrorLanding}
+        @keydown=${this.handleEventErrorBannerKeydown}
+      >
+        <span class="mt-0.5 shrink-0">${this.renderIcon("TriangleAlert")}</span>
+        <div class="min-w-0 flex-1 space-y-1">
+          <p class="font-semibold">${guide.title}</p>
+          ${error.agentId ? lit.html`<p>Agent: ${error.agentId}</p>` : lit.nothing}
+          ${error.toolName ? lit.html`<p>Tool: ${error.toolName}</p>` : lit.nothing}
+          <p class="break-words leading-relaxed">${error.message}</p>
+          ${guide.advice ? lit.html`<p class="leading-relaxed">${guide.advice}</p>` : lit.nothing}
+          ${guide.highlight && this.hasEventErrorHighlight(key) ? lit.html`<p class="leading-relaxed">${guide.highlight}</p>` : lit.nothing}
+        </div>
+      </div>
     `;
 	}
 	handleHomeLastEventSelect(eventId, agentId) {
@@ -8375,17 +9489,29 @@ ${argsString}</pre
 		if (this.isPoppedOut) return;
 		if (this.isOpen) return;
 		const hadUnseenAnnouncement = this.newsSignalArmed;
+		const activeSignalAtOpen = this.getActiveLauncherSignal();
 		const firstOpen = !this.hasOpenedInspector;
 		this.hasOpenedInspector = true;
 		this.homeViewedThisOpen = false;
-		if (this.newsSignalArmed && source === "floating_button") {
-			this.selectedMenu = "home";
-			this.lastSelectedMenuByGroup.home = "home";
+		this.closeLauncherHud();
+		const hudMenu = this.hudLandingMenu;
+		this.hudLandingMenu = null;
+		if (hudMenu) {
+			this.selectedMenu = hudMenu;
+			this.lastSelectedMenuByGroup[require_inspector_nav.getGroupForMenu(hudMenu)] = hudMenu;
+		} else if (activeSignalAtOpen !== null && source === "floating_button") {
+			const landing = LAUNCHER_SIGNALS[activeSignalAtOpen].landingTarget;
+			this.selectedMenu = landing;
+			this.lastSelectedMenuByGroup[require_inspector_nav.getGroupForMenu(landing)] = landing;
+			if (landing === "agents" || landing === "ag-ui-events") {
+				if (isEventErrorKey(activeSignalAtOpen)) this.applyEventErrorLanding(activeSignalAtOpen);
+			}
 		}
 		this.ensureAnnouncementLoading();
 		this.isOpen = true;
+		this.cancelGestureTail();
 		this.persistState();
-		this.trackOpened(source, hadUnseenAnnouncement, firstOpen);
+		this.trackOpened(source, hadUnseenAnnouncement, firstOpen, activeSignalAtOpen);
 		if (this.dockMode !== "floating") this.applyDockStyles();
 		this.ensureWindowPlacement();
 		this.requestUpdate();
@@ -8400,7 +9526,6 @@ ${argsString}</pre
 		if (this.isPoppedOut) return;
 		if (!this.isOpen) return;
 		this.isOpen = false;
-		if (this.newsSignalPulsePending) this.startNewsSignalPulse();
 		if (this.dockMode !== "floating") this.removeDockStyles();
 		this.persistState();
 		this.updateHostTransform("button");
@@ -8408,6 +9533,7 @@ ${argsString}</pre
 		this.updateComplete.then(() => {
 			this.measureContext("button");
 			this.applyAnchorPosition("button");
+			this.flushPendingSignalPulse();
 		});
 	}
 	renderIcon(name) {
@@ -8588,6 +9714,7 @@ ${argsString}</pre
 			contentText,
 			contentRaw: raw.content !== void 0 ? this.sanitizeForLogging(raw.content) : void 0,
 			toolCalls,
+			toolCallId: typeof raw.toolCallId === "string" ? raw.toolCallId : void 0,
 			activityType: typeof raw.activityType === "string" ? raw.activityType : void 0
 		};
 	}
@@ -8770,16 +9897,16 @@ ${argsString}</pre
         @submit=${this.handlePlaygroundSubmit}
       >
         ${this.playgroundError ? lit.html`<div
-                class="mx-auto mb-2 flex max-w-3xl items-start gap-2 rounded-lg border border-rose-200 bg-rose-50 px-2.5 py-2 text-[10px] text-rose-800"
+                class="mx-auto mb-2 flex max-w-3xl items-start gap-2 rounded-lg border border-rose-200 bg-rose-50 px-2.5 py-2 text-[10px] text-rose-950"
                 role="alert"
                 data-playground-error
               >
-                <span class="mt-0.5 shrink-0 text-rose-600"
+                <span class="mt-0.5 shrink-0"
                   >${this.renderIcon("TriangleAlert")}</span
                 >
                 <div class="min-w-0 flex-1">
                   <p class="font-semibold">Agent run failed</p>
-                  <p class="mt-0.5 break-words leading-relaxed text-rose-700">
+                  <p class="mt-0.5 break-words leading-relaxed">
                     ${this.playgroundError}
                   </p>
                 </div>
@@ -8829,7 +9956,14 @@ ${argsString}</pre
 		if (this.settingsOpen) return this.renderSettingsPanel();
 		if (this.selectedMenu === "home") return this.renderHomeView();
 		if (this.selectedMenu === WHATS_NEW_MENU_KEY) return this.renderWhatsNewView();
-		if (this.selectedMenu === "ag-ui-events") return this.renderEventsTable();
+		if (this.selectedMenu === "ag-ui-events") return lit.html`
+        <div class="flex h-full min-h-0 flex-col">
+          ${this.renderEventErrorBanner("run")}
+          <div class="min-h-0 flex-1 overflow-hidden">
+            ${this.renderEventsTable()}
+          </div>
+        </div>
+      `;
 		if (this.selectedMenu === "playground") return this.renderPlaygroundView();
 		if (this.selectedMenu === "agents") return this.renderAgentsView();
 		if (this.selectedMenu === "frontend-tools") return this.renderToolsView();
@@ -9214,8 +10348,9 @@ ${argsString}</pre
       </div>
     `;
 	}
-	trackOpened(source, hadUnseenAnnouncement, firstOpen = false) {
+	trackOpened(source, hadUnseenAnnouncement, firstOpen = false, activeSignal = null) {
 		if (this.core?.telemetryDisabled) return;
+		const errorSignal = activeSignal !== null && isErrorSignalKey(activeSignal) ? activeSignal : null;
 		require_telemetry.trackInspectorOpened({
 			open_source: source,
 			...this.runtimeStatus === "connected" ? {
@@ -9224,6 +10359,8 @@ ${argsString}</pre
 			} : {},
 			runtime_url_type: require_telemetry.getRuntimeUrlType(this.core?.runtimeUrl),
 			has_unseen_announcement: hadUnseenAnnouncement,
+			has_error_signal: errorSignal !== null,
+			...errorSignal === null ? {} : { error_signal_source: errorSignal },
 			first_open: firstOpen
 		});
 	}
@@ -9387,6 +10524,51 @@ ${argsString}</pre
 			example_kind: exampleKind
 		});
 	}
+	subscribeToInspectorThreadBridge() {
+		this.unsubscribeFromInspectorThreadBridge();
+		if (!(0, _copilotkit_core.isInspectorThreadBridgeEnabled)()) return;
+		this.inspectorBridgeUnsubscribers.push((0, _copilotkit_core.onInspectorActiveThread)((payload) => {
+			if (payload.requestId !== this.activeViewInAppRequestId) return;
+			this.inAppThreadId = payload.threadId;
+			this.inAppAgentId = payload.agentId;
+			this.inAppSource = payload.source;
+			if (payload.source === "app") {
+				this.activeViewInAppRequestId = null;
+				this.viewInAppError = null;
+			}
+			this.requestUpdate();
+		}), (0, _copilotkit_core.onInspectorViewThreadResult)((payload) => {
+			if (payload.requestId !== this.activeViewInAppRequestId) return;
+			if (payload.ok) {
+				this.viewInAppError = null;
+				this.inAppThreadId = payload.threadId;
+				this.inAppAgentId = payload.agentId;
+				this.inAppSource = "override";
+			} else {
+				this.activeViewInAppRequestId = null;
+				this.inAppThreadId = null;
+				this.inAppAgentId = null;
+				this.inAppSource = null;
+				this.viewInAppError = "The app could not load that thread. The previous chat is back.";
+			}
+			this.requestUpdate();
+		}));
+	}
+	unsubscribeFromInspectorThreadBridge() {
+		for (const unsubscribe of this.inspectorBridgeUnsubscribers) unsubscribe();
+		this.inspectorBridgeUnsubscribers = [];
+	}
+	getViewInAppMode(thread, isExample) {
+		if (!(0, _copilotkit_core.isInspectorThreadBridgeEnabled)()) return "hidden";
+		if (!thread || isExample) return "hidden";
+		if (this.activeViewInAppRequestId && this.inAppSource === "override" && this.inAppThreadId === thread.id) return "stop";
+		return "view";
+	}
+	getSelectedRealThread() {
+		if (!this.selectedThreadId) return null;
+		if (this.selectedThreadId === this.selectedLocalExampleThreadId) return null;
+		return this.getActiveThreadsState().displayThreads.find((thread) => thread.id === this.selectedThreadId) ?? null;
+	}
 	getCurrentExampleTourProps() {
 		const exampleKind = this.selectedThreadId ? getExampleKind(this.selectedThreadId) : void 0;
 		const tourPair = getExampleTourTelemetryPair(this.exampleTourStep);
@@ -10006,7 +11188,7 @@ ${argsString}</pre
             <line x1="12" y1="16" x2="12.01" y2="16" />
           </svg>
           <span style="font-size: 13px; color: #c0333a;">
-            Failed to load learning data
+            ${MEMORY_LOAD_ERROR_LABEL}
           </span>
           <span
             style="
@@ -10019,6 +11201,17 @@ ${argsString}</pre
           >
             ${this._memoriesError.message}
           </span>
+          <span
+            style="
+              max-width: 320px;
+              text-align: center;
+              font-size: 11px;
+              line-height: 1.5;
+              color: #c0333a;
+            "
+          >
+            ${EVENT_ERROR_GUIDANCE.memory.advice}
+          </span>
         </div>
       `;
 		if (this._memoriesLoading && this._memories.length === 0) return lit.html`
@@ -10202,6 +11395,7 @@ ${argsString}</pre
               data-color-scheme=${this.colorScheme}
               .threads=${visibleThreads}
               .selectedThreadId=${this.selectedThreadId}
+              .inAppThreadId=${this.inAppThreadId}
               .errorMessage=${threadsErrorMessage}
               .suppressEmptyState=${loadingWithoutRows}
               @threadSelected=${(e) => {
@@ -10271,6 +11465,10 @@ ${argsString}</pre
                         .headers=${this._core?.headers ?? {}}
                         .threadInspectionAvailable=${selectedThreadIsLocalExample || this.areThreadEndpointsAvailable() && this._core?.threadEndpoints?.inspect !== false}
                         .liveMessageVersion=${this.liveMessageVersion.get(selectedThread.id) ?? 0}
+                        .viewInAppMode=${this.getViewInAppMode(selectedThread, selectedThreadIsLocalExample)}
+                        .viewInAppError=${this.viewInAppError}
+                        @viewInApp=${this.handleViewInApp}
+                        @stopViewing=${this.handleStopViewing}
                         .focusMessageId=${this.focusedThreadMessageId}
                         .focusRequestId=${this.threadFocusRequestId}
                         .agentStateInput=${this.getLatestStateForAgent(selectedThread.agentId)}
@@ -10439,7 +11637,10 @@ ${argsString}</pre
           </div>
         </div>
       `;
-		else body = lit.html`
+		else {
+			const runError = this.eventErrorDetails.run;
+			const failedRunEventId = runError ? this.findLatestRunErrorEvent(runError.agentId)?.id : void 0;
+			body = lit.html`
         <div class="relative h-full w-full overflow-y-auto overflow-x-hidden">
           <table class="w-full table-fixed border-collapse text-xs box-border">
             <colgroup>
@@ -10451,10 +11652,10 @@ ${argsString}</pre
             <thead class="sticky top-0 z-10">
               <tr class="bg-white">
                 ${[
-			"Agent",
-			"Time",
-			"Event Type"
-		].map((label, col) => lit.html` <th
+				"Agent",
+				"Time",
+				"Event Type"
+			].map((label, col) => lit.html` <th
                       class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900"
                       style="position:relative;overflow:hidden;"
                     >
@@ -10476,16 +11677,18 @@ ${argsString}</pre
             </thead>
             <tbody>
               ${filteredEvents.map((event, index) => {
-			const rowBg = index % 2 === 0 ? "bg-white" : "bg-gray-50/50";
-			const badgeClasses = this.getEventBadgeClasses(event.type);
-			const extractedEvent = this.extractEventFromPayload(event.payload);
-			const inlineEvent = this.stringifyPayload(extractedEvent, false) || "—";
-			const prettyEvent = this.stringifyPayload(extractedEvent, true) || inlineEvent;
-			const isExpanded = this.expandedRows.has(event.id);
-			return lit.html`
+				const isFailedRunEvent = failedRunEventId !== void 0 && event.id === failedRunEventId;
+				const rowBg = isFailedRunEvent ? "bg-rose-50" : index % 2 === 0 ? "bg-white" : "bg-gray-50/50";
+				const badgeClasses = this.getEventBadgeClasses(event.type);
+				const extractedEvent = this.extractEventFromPayload(event.payload);
+				const inlineEvent = this.stringifyPayload(extractedEvent, false) || "—";
+				const prettyEvent = this.stringifyPayload(extractedEvent, true) || inlineEvent;
+				const isExpanded = this.expandedRows.has(event.id);
+				return lit.html`
                   <tr
                     class="${rowBg} cursor-pointer transition hover:bg-blue-50/50"
                     data-inspector-event-id=${event.id}
+                    data-cpk-failed-run-event=${isFailedRunEvent ? event.id : void 0}
                     @click=${(clickEvent) => this.toggleRowExpansion(event.id, clickEvent)}
                   >
                     <td
@@ -10518,9 +11721,9 @@ ${prettyEvent}</pre
                               <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) => {
-				e.stopPropagation();
-				this.copyToClipboard(prettyEvent, event.id, e);
-			}}
+					e.stopPropagation();
+					this.copyToClipboard(prettyEvent, event.id, e);
+				}}
                               >
                                 ${this.copiedEvents.has(event.id) ? lit.html`
                                         <span>✓ Copied</span>
@@ -10533,11 +11736,12 @@ ${prettyEvent}</pre
                     </td>
                   </tr>
                 `;
-		})}
+			})}
             </tbody>
           </table>
         </div>
       `;
+		}
 		return lit.html`
       <div
         class="${embedded ? "flex h-[28rem] min-h-[20rem] flex-col" : "flex h-full flex-col"}"
@@ -10602,6 +11806,7 @@ ${prettyEvent}</pre
 	}
 	renderAgentsView() {
 		if (this.selectedContext === "all-agents") return lit.html`
+        ${this.renderEventErrorBanner("tool")}
         <div
           class="flex h-full items-center justify-center px-4 py-8 text-center"
         >
@@ -10625,6 +11830,7 @@ ${prettyEvent}</pre
 		const messages = this.getLatestMessagesForAgent(agentId);
 		return lit.html`
       <div class="cpk-agent-view flex flex-col gap-4 p-4 overflow-auto">
+        ${this.renderEventErrorBanner("tool")}
         <!-- Agent Overview Card -->
         <div
           class="cpk-agent-overview rounded-lg border border-gray-200 bg-white p-4"
@@ -10757,8 +11963,13 @@ ${prettyEvent}</pre
 			const toolCalls = msg.toolCalls ?? [];
 			const hasContent = rawContent.trim().length > 0;
 			const contentFallback = toolCalls.length > 0 ? "Invoked tool call" : "—";
+			const toolError = this.eventErrorDetails.tool;
+			const isFailedResult = role === "tool" && toolError?.toolCallId !== void 0 && toolError.toolCallId === msg.toolCallId;
 			return lit.html`
-                          <div class="flex items-start">
+                          <div
+                            class=${isFailedResult ? "flex items-start bg-rose-50" : "flex items-start"}
+                            data-cpk-failed-tool-result=${isFailedResult ? msg.toolCallId : lit.nothing}
+                          >
                             <div class="w-40 shrink-0 px-4 py-2">
                               <span
                                 class="inline-flex rounded px-2 py-0.5 text-[10px] font-medium ${roleColors[role] || roleColors.unknown}"
@@ -10864,6 +12075,81 @@ ${prettyEvent}</pre
       </div>
     `;
 	}
+	/**
+	* The Agent view is empty on "All Agents". Pick the agent that just failed
+	* a tool, or the one with the most recent activity.
+	*/
+	applyEventErrorLanding(key) {
+		const error = this.eventErrorDetails[key];
+		if (!error) {
+			if (this.selectedMenu === "agents") this.focusAgentForView();
+			return;
+		}
+		if (error.agentId && this.contextOptions.some((option) => option.key === error.agentId)) this.selectedContext = error.agentId;
+		else if (this.selectedMenu === "agents") this.focusAgentForView(error);
+		if (key === "tool" && error.toolCallId) {
+			this.pendingScrollToToolCallId = error.toolCallId;
+			return;
+		}
+		if (key === "run") {
+			this.eventFilterText = "";
+			this.eventTypeFilter = "all";
+			const event = this.findLatestRunErrorEvent(error.agentId);
+			if (!event) return;
+			this.expandedRows.clear();
+			this.expandedRows.add(event.id);
+			this.pendingScrollToEventId = event.id;
+		}
+	}
+	/**
+	* Whether the landing view really carries the item the card points at.
+	* Mirrors the two branches of `applyEventErrorLanding` that can bail out.
+	*/
+	hasEventErrorHighlight(key) {
+		const error = this.eventErrorDetails[key];
+		if (!error) return false;
+		if (key === "tool") return error.toolCallId !== void 0;
+		if (key === "run") return this.findLatestRunErrorEvent(error.agentId) !== void 0;
+		return false;
+	}
+	findLatestRunErrorEvent(agentId) {
+		return (agentId && agentId !== "all-agents" ? this.agentEvents.get(agentId) ?? [] : this.flattenedEvents).find((event) => event.type === "RUN_ERROR");
+	}
+	flushErrorLandingScroll() {
+		const eventId = this.pendingScrollToEventId;
+		if (eventId) {
+			this.pendingScrollToEventId = null;
+			Array.from(this.activeRoot.querySelectorAll("[data-inspector-event-id]")).find((candidate) => candidate.dataset.inspectorEventId === eventId)?.scrollIntoView?.({ block: "center" });
+		}
+		const toolCallId = this.pendingScrollToToolCallId;
+		if (toolCallId) {
+			this.pendingScrollToToolCallId = null;
+			const escaped = escapeSelectorValue(toolCallId);
+			(this.activeRoot.querySelector(`[data-cpk-failed-tool-call="${escaped}"]`) ?? this.activeRoot.querySelector(`[data-cpk-failed-tool-result="${escaped}"]`))?.scrollIntoView?.({ block: "center" });
+		}
+	}
+	/**
+	* The Agent view is empty on "All Agents". Pick the agent that just failed
+	* a tool, or the one with the most recent activity.
+	*/
+	focusAgentForView(error) {
+		const agentOptions = this.contextOptions.filter((opt) => opt.key !== "all-agents");
+		if (agentOptions.length === 0) return;
+		const errorAgentId = error?.agentId;
+		if (errorAgentId && agentOptions.some((option) => option.key === errorAgentId)) {
+			this.selectedContext = errorAgentId;
+			return;
+		}
+		if (this.selectedContext !== "all-agents") return;
+		const mostRecent = agentOptions.reduce((best, opt) => {
+			const ts = this.getAgentStats(opt.key).lastActivity ?? -1;
+			return best === null || ts > best.ts ? {
+				key: opt.key,
+				ts
+			} : best;
+		}, null);
+		this.selectedContext = mostRecent ? mostRecent.key : agentOptions[0].key;
+	}
 	handleMenuSelect(key) {
 		if (!this.menuItems.some((item) => item.key === key)) return;
 		const previousMenu = this.selectedMenu;
@@ -10872,19 +12158,6 @@ ${prettyEvent}</pre
 		this.selectedMenu = key;
 		this.settingsOpen = false;
 		this.lastSelectedMenuByGroup[require_inspector_nav.getGroupForMenu(key)] = key;
-		if (key === "agents" && this.selectedContext === "all-agents") {
-			const agentOptions = this.contextOptions.filter((opt) => opt.key !== "all-agents");
-			if (agentOptions.length > 0) {
-				const mostRecent = agentOptions.reduce((best, opt) => {
-					const ts = this.getAgentStats(opt.key).lastActivity ?? -1;
-					return best === null || ts > best.ts ? {
-						key: opt.key,
-						ts
-					} : best;
-				}, null);
-				this.selectedContext = mostRecent ? mostRecent.key : agentOptions[0].key;
-			}
-		}
 		if (previousMenu === "agents" && key !== "agents") {
 			if (this.contextOptions.filter((opt) => opt.key !== "all-agents").length > 1) this.selectedContext = "all-agents";
 		}
@@ -10898,10 +12171,12 @@ ${prettyEvent}</pre
 			if (previousMenu !== "memories" && !this.core?.telemetryDisabled) require_telemetry.trackMemoriesTabClicked(this.getMemoriesTelemetryProps());
 		}
 		if (key === "home" && previousMenu !== "home") this.homeViewedThisOpen = false;
-		if (key === "ag-ui-events" || key === "agents") requestAnimationFrame(() => {
-			const scroller = this.activeRoot.querySelector("#cpk-main-scroll");
-			if (scroller) scroller.scrollTop = 0;
-		});
+		if (key === "ag-ui-events" || key === "agents") {
+			if (!(this.pendingScrollToEventId !== null || this.pendingScrollToToolCallId !== null)) requestAnimationFrame(() => {
+				const scroller = this.activeRoot.querySelector("#cpk-main-scroll");
+				if (scroller) scroller.scrollTop = 0;
+			});
+		}
 		this.contextMenuOpen = false;
 		this.layoutMenuOpen = false;
 		this.persistState();
@@ -11537,50 +12812,443 @@ ${prettyEvent}</pre
 		else this.expandedRows.add(eventId);
 		this.requestUpdate();
 	}
+	/** Whether a given subject currently has something to say. */
+	isSignalArmed(key) {
+		if (isWiringErrorKey(key)) return this.errorSignalArmed[key];
+		if (isEventErrorKey(key)) return this.eventErrorArmed[key];
+		return this.newsSignalArmed;
+	}
+	/**
+	* The signal that owns the single launcher dot, or null when the launcher is
+	* quiet. Precedence rather than replacement: a suppressed signal stays armed
+	* and takes the dot as soon as the higher-priority one clears, and its own
+	* navigation marker is visible the whole time.
+	*/
+	getActiveLauncherSignal() {
+		for (const key of LAUNCHER_SIGNAL_PRIORITY_ORDER) if (this.isSignalArmed(key)) return key;
+		return null;
+	}
+	/**
+	* The marker a navigation entry carries, or null for an unmarked entry.
+	*
+	* Markers are independent of the launcher's single dot, so a suppressed
+	* signal is never actually hidden once the panel is open. They also render
+	* on the entry that is *currently selected*: for the news signal that never
+	* mattered, because its marker clears as soon as the view renders, but a
+	* state mirror stays true while it is being read and suppressing it on the
+	* active entry would make it reappear on navigating away.
+	*/
+	getNavigationSignalFor(key) {
+		for (const signalKey of LAUNCHER_SIGNAL_PRIORITY_ORDER) {
+			const signal = LAUNCHER_SIGNALS[signalKey];
+			if (signal.markerTarget !== key) continue;
+			if (!this.isSignalArmed(signalKey)) continue;
+			if (signalKey === NEWS_SIGNAL_ID && !this.announcementLoaded) continue;
+			return signal;
+		}
+		return null;
+	}
+	/** Whether a wiring error source is currently red. */
+	hasArmedErrorSignal() {
+		return WIRING_ERROR_KEYS.some((source) => this.errorSignalArmed[source]);
+	}
+	armEventErrorFromCode(code, message, context) {
+		const key = eventErrorKeyForCode(code);
+		if (key === null) return;
+		const agentId = typeof context?.agentId === "string" && context.agentId.length > 0 ? context.agentId : void 0;
+		const toolName = typeof context?.toolName === "string" && context.toolName.length > 0 ? context.toolName : void 0;
+		const toolCallId = typeof context?.toolCallId === "string" && context.toolCallId.length > 0 ? context.toolCallId : void 0;
+		this.armEventError(key, message, {
+			agentId,
+			toolName,
+			toolCallId
+		});
+	}
+	armEventError(key, message, extras = {}) {
+		this.eventErrorDetails[key] = {
+			message,
+			...extras
+		};
+		const wasArmed = this.eventErrorArmed[key];
+		this.eventErrorArmed[key] = true;
+		if (!wasArmed) this.startSignalPulse(key);
+		if (this.isOpen && !this.settingsOpen && this.selectedMenu === LAUNCHER_SIGNALS[key].landingTarget) this.applyEventErrorLanding(key);
+		this.requestUpdate();
+	}
+	clearEventError(key) {
+		if (!this.eventErrorArmed[key]) return;
+		this.eventErrorArmed[key] = false;
+		this.errorSignalViewedSources.delete(key);
+		this.retireSignal(key);
+		this.requestUpdate();
+	}
+	clearAllEventErrors() {
+		for (const key of EVENT_ERROR_KEYS) {
+			this.eventErrorDetails[key] = null;
+			if (!this.eventErrorArmed[key]) continue;
+			this.eventErrorArmed[key] = false;
+			this.retireSignal(key);
+		}
+	}
+	/**
+	* An event error is unread until its landing view is actually on screen.
+	* Opening the Inspector for a different leaf must not burn it.
+	*/
+	maybeCompleteEventErrorView() {
+		if (!this.isOpen || this.settingsOpen) return;
+		for (const key of EVENT_ERROR_KEYS) {
+			if (!this.eventErrorArmed[key]) continue;
+			if (this.selectedMenu !== LAUNCHER_SIGNALS[key].landingTarget) continue;
+			this.clearEventError(key);
+		}
+	}
+	isReducedMotionPreferred() {
+		return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+	}
 	armNewsSignal(options) {
 		const wasArmed = this.newsSignalArmed;
 		this.newsSignalArmed = true;
-		if (options.pulse && this.isOpen) {
-			this.newsSignalPulsePending = true;
-			if (!wasArmed) this.requestUpdate();
-		} else if (options.pulse) this.startNewsSignalPulse();
+		if (options.pulse) this.startSignalPulse(NEWS_SIGNAL_ID);
 		else if (!wasArmed) this.requestUpdate();
 	}
 	clearNewsSignal() {
 		if (!this.newsSignalArmed) return;
 		this.newsSignalArmed = false;
-		this.newsSignalPulsePending = false;
 		if (this.announcementTimestamp) require_persistence.saveAnnouncementReadTimestamp(this.announcementTimestamp);
-		if (this.newsSignalPulsing) this.stopNewsSignalPulse();
+		this.retireSignal(NEWS_SIGNAL_ID);
 		this.requestUpdate();
 	}
-	startNewsSignalPulse() {
-		this.stopNewsSignalPulse();
-		if (typeof document !== "undefined" && document.visibilityState !== "visible") {
-			this.newsSignalPulsePending = true;
+	/**
+	* Requests one beat for a signal, running it now or deferring it.
+	*
+	* There is a single pending slot and four reasons a beat cannot land. All
+	* four are the same situation — "cannot land now, run later" — and treating
+	* them alike is the point: three separate behaviours for one situation would
+	* not survive a third signal.
+	*
+	* Reason 3 is not cosmetic. Starting a beat while one runs does not restart
+	* the animation, because the attribute it binds to does not change value and
+	* the pseudo-element selectors match on attribute *presence*; the running
+	* beat would merely change colour mid-flight. A failure that arms during an
+	* announcement beat must wait for that beat to end, or it would run only as
+	* its final fraction.
+	*
+	* A failure's beat is followed by a pill, and the whole 3.4-second gesture
+	* holds this one slot for its full duration. That is not a second scheduling
+	* concept: reason 3 already says "another beat is running", and a gesture is
+	* simply a longer beat.
+	*/
+	startSignalPulse(key) {
+		if (this.isOpen || typeof document !== "undefined" && document.visibilityState !== "visible" || this.gestureSlotSignal !== null && this.gestureSlotSignal !== key || this.getActiveLauncherSignal() !== key) {
+			const pending = this.pendingPulseSignal;
+			if (pending === null || LAUNCHER_SIGNALS[key].priority >= LAUNCHER_SIGNALS[pending].priority) this.pendingPulseSignal = key;
 			this.requestUpdate();
 			return;
 		}
-		this.newsSignalPulsePending = false;
-		this.newsSignalPulsing = true;
-		if (this.announcementTimestamp) require_persistence.saveAnnouncementPulsedTimestamp(this.announcementTimestamp);
+		this.stopSignalPulse();
+		this.pendingPulseSignal = null;
+		this.pulsingSignal = key;
+		if (isWiringErrorKey(key)) this.errorBeatSpent = true;
+		else if (this.announcementTimestamp && key === NEWS_SIGNAL_ID) require_persistence.saveAnnouncementPulsedTimestamp(this.announcementTimestamp);
+		this.beginGestureTail(key);
 		this.requestUpdate();
 		if (typeof window === "undefined") return;
 		this.pulseTimeoutId = setTimeout(() => {
 			this.pulseTimeoutId = null;
-			this.newsSignalPulsing = false;
+			this.pulsingSignal = null;
 			this.requestUpdate();
-		}, NEWS_SIGNAL_CADENCE_MS);
+			if (this.gestureSignal === key && this.pillPhase === "closed") {
+				this.openPill();
+				return;
+			}
+			if (this.gestureSignal === key) {
+				this.endGesture();
+				return;
+			}
+			this.flushPendingSignalPulse();
+		}, LAUNCHER_SIGNALS[key].cadence);
 	}
-	stopNewsSignalPulse() {
+	stopSignalPulse() {
 		if (this.pulseTimeoutId !== null) {
 			clearTimeout(this.pulseTimeoutId);
 			this.pulseTimeoutId = null;
 		}
-		this.newsSignalPulsing = false;
+		this.pulsingSignal = null;
+	}
+	/**
+	* Runs a deferred beat if it can land now, and drops it if its reason to
+	* exist has gone: a nudge about a problem that no longer exists is worse
+	* than no nudge at all.
+	*/
+	flushPendingSignalPulse() {
+		const key = this.pendingPulseSignal;
+		if (key === null) return;
+		if (!this.isSignalArmed(key)) {
+			this.pendingPulseSignal = null;
+			this.requestUpdate();
+			return;
+		}
+		this.startSignalPulse(key);
+	}
+	/**
+	* Drops a signal's gesture, pending or running, when the signal goes quiet.
+	*
+	* The pill closes early: it states a condition, and the condition has
+	* stopped being true. The beat is left to finish, because a beat asserts
+	* nothing — it says *here*, and "here" is still true.
+	*/
+	retireSignal(key) {
+		if (this.pendingPulseSignal === key) this.pendingPulseSignal = null;
+		if (this.gestureSignal === key) this.closePillEarly();
+		this.flushPendingSignalPulse();
+	}
+	/**
+	* The signal holding the single gesture slot: a beat in flight, or the pill
+	* and spoken sentence that follow it. One slot, not two — see reason 3 in
+	* `startSignalPulse`.
+	*/
+	get gestureSlotSignal() {
+		return this.pulsingSignal ?? this.gestureSignal;
+	}
+	/**
+	* Opens the gesture's tail alongside the beat, for a signal that carries a
+	* pill. The pill is rendered immediately — clipped to nothing, so it shows
+	* nothing — because its full width has to be on the page before the room
+	* either side of the launcher can be measured.
+	*
+	* A signal with no pill label gets no tail at all, so the announcement's
+	* gesture is exactly the beat it has always been.
+	*/
+	beginGestureTail(key) {
+		this.cancelPillTimeout();
+		if (LAUNCHER_SIGNALS[key].pillLabel === void 0) {
+			this.gestureSignal = null;
+			this.pillPhase = null;
+			this.pillDirection = null;
+			return;
+		}
+		this.gestureSignal = key;
+		this.pillPhase = "closed";
+		this.pillDirection = null;
+		this.closeLauncherHud();
+	}
+	/**
+	* Chooses the side, or suppresses the pill, from the room actually available
+	* at gesture start. Measured once, from the DOM, because the launcher is
+	* draggable and its position persists: a reader who parked it near the left
+	* edge would otherwise get a permanently truncated pill.
+	*
+	* Where neither side has room there is no pill at all rather than a cut-off
+	* one — the dot and the beat still fire, so the signal is intact and only
+	* the label is lost. Constraining where the reader may drag the control to
+	* protect this animation was considered and rejected: the page is theirs.
+	*/
+	resolvePillDirection() {
+		if (this.pillDirection !== null || this.pillPhase === null) return;
+		const wrapper = this.activeRoot.querySelector(".console-button-wrapper");
+		const button = wrapper?.querySelector(".console-button");
+		const pill = wrapper?.querySelector(".cpk-launcher-pill");
+		if (!button || !pill || typeof window === "undefined") return;
+		const mark = button.getBoundingClientRect();
+		const overhang = Math.max(0, pill.getBoundingClientRect().width - mark.width);
+		const viewportWidth = window.innerWidth;
+		if (overhang === 0) {
+			this.setPillOutcome("left");
+			return;
+		}
+		if (mark.left - overhang >= EDGE_MARGIN) {
+			this.setPillOutcome("left");
+			return;
+		}
+		if (mark.right + overhang <= viewportWidth - EDGE_MARGIN) {
+			this.setPillOutcome("right");
+			return;
+		}
+		this.setPillOutcome(null);
+	}
+	/** Records the measurement's verdict, and drops the pill when it is null. */
+	setPillOutcome(direction) {
+		if (direction === null) {
+			this.pillPhase = null;
+			this.pillDirection = null;
+			this.pillOutcome = "suppressed";
+			this.requestUpdate();
+			return;
+		}
+		this.pillDirection = direction;
+		this.pillOutcome = "shown";
+		this.requestUpdate();
+	}
+	/** Runs the pill's three phases in series once the beat has finished. */
+	openPill() {
+		this.resolvePillDirection();
+		if (this.pillPhase === null) {
+			this.endGesture();
+			return;
+		}
+		this.advancePill("opening", ERROR_GESTURE_MS.open, () => {
+			this.advancePill("holding", ERROR_GESTURE_MS.hold, () => {
+				this.advancePill("closing", ERROR_GESTURE_MS.close, () => {
+					this.endGesture();
+				});
+			});
+		});
+	}
+	advancePill(phase, duration, next) {
+		this.cancelPillTimeout();
+		this.pillPhase = phase;
+		this.requestUpdate();
+		if (typeof window === "undefined") return;
+		this.pillTimeoutId = setTimeout(() => {
+			this.pillTimeoutId = null;
+			next();
+		}, duration);
+	}
+	/**
+	* Closes the pill before its hold is out, because the failure it names has
+	* been fixed. A pill that has not opened yet is simply dropped; the beat is
+	* never cut short.
+	*/
+	closePillEarly() {
+		if (this.pillPhase === null) {
+			this.endGesture();
+			return;
+		}
+		if (this.pillPhase === "closing") return;
+		if (this.pillPhase === "closed") {
+			this.pillPhase = null;
+			this.requestUpdate();
+			return;
+		}
+		this.advancePill("closing", ERROR_GESTURE_MS.close, () => {
+			this.endGesture();
+		});
+	}
+	/** Releases the slot and leaves the plain mark with its dot behind. */
+	endGesture() {
+		this.cancelGestureTail();
+		this.requestUpdate();
+		this.flushPendingSignalPulse();
+	}
+	/**
+	* Drops the gesture's tail outright, with no closing animation, for the
+	* cases where the launcher itself has gone: the panel opened over it, or the
+	* element was removed from the page.
+	*/
+	cancelGestureTail() {
+		this.cancelPillTimeout();
+		this.gestureSignal = null;
+		this.pillPhase = null;
+		this.pillDirection = null;
+	}
+	cancelPillTimeout() {
+		if (this.pillTimeoutId !== null) {
+			clearTimeout(this.pillTimeoutId);
+			this.pillTimeoutId = null;
+		}
+	}
+	/**
+	* Whether each error source is currently broken.
+	*
+	* Only two *wiring* conditions qualify. App errors (runs, tools, memory)
+	* are unread events on a different latch — they name themselves on the pill
+	* and clear when their landing view is read. Notably absent from *this*
+	* latch:
+	*
+	* - **A failed agent run.** A run is an event. It arms `run`, not this
+	*   state. The resting wiring dot must not stay red for the rest of a debug
+	*   hour.
+	* - **The core error channel as a wiring source.** Handshake failure already
+	*   sets the connection state. Other codes arm `run` or `tool`.
+	* - **Memory failures before Learning is live.** The memory store is lazy
+	*   because creating it opens a realtime connection. Once it exists, a load
+	*   failure arms `memory`.
+	* - **Product states.** An unconfigured Intelligence and an unentitled
+	*   Memory plan are not defects. The signal fires only where wiring is
+	*   present and the call still fails — which for threads is guaranteed by
+	*   `_threadsErrorByAgent` only ever being written while the thread
+	*   endpoints are available.
+	*
+	* Known limitation: the runtime handshake runs once, on connect. A server
+	* that dies *after* the page loaded leaves the connection state at connected
+	* and raises nothing; the next page load re-runs the handshake and the
+	* signal appears then. The signal reports the wiring state as last
+	* established. Closing that gap means a re-probe in the core, which is a
+	* runtime concern.
+	*/
+	isErrorSourceBroken(source) {
+		if (source === "connection") {
+			const state = this.getCoreStatusSummary().state;
+			if (require_home_briefing.runtimeConnectionNeedsAttention(state)) return true;
+			return this.errorSignalArmed.connection && state === "connecting";
+		}
+		return this._threadsErrorByAgent.size > 0;
+	}
+	/**
+	* Mirrors both error latches onto the live state. Called from `willUpdate`,
+	* because every mutation of the underlying state already requests an update,
+	* so the resting dot follows the state within the same render.
+	*/
+	evaluateErrorSignals() {
+		const wasArmed = this.hasArmedErrorSignal();
+		for (const source of WIRING_ERROR_KEYS) {
+			if (this.isErrorSourceBroken(source)) {
+				if (this.errorSignalArmed[source]) continue;
+				this.errorSignalArmed[source] = true;
+				continue;
+			}
+			if (!this.errorSignalArmed[source]) continue;
+			this.errorSignalArmed[source] = false;
+			this.errorSignalViewedSources.delete(source);
+			this.retireSignal(source);
+		}
+		this.onErrorSignalsChanged(wasArmed);
+	}
+	/**
+	* Applies the rising-edge rule after a latch changed.
+	*
+	* The beat fires on the transition from "no failure" to "at least one
+	* failure", evaluated globally across the sources and never again while
+	* anything is red — one root cause, one nudge.
+	*/
+	onErrorSignalsChanged(wasArmed) {
+		if (!this.hasArmedErrorSignal()) {
+			this.errorBeatSpent = false;
+			this.pillOutcome = null;
+			return;
+		}
+		if (wasArmed || this.errorBeatSpent) return;
+		const active = this.getActiveLauncherSignal();
+		if (active !== null && isErrorSignalKey(active)) this.startSignalPulse(active);
+	}
+	/**
+	* Records `oss.inspector.error_signal_viewed` once per source per outage,
+	* when the dot is actually on screen.
+	*
+	* Unlike the announcement's launcher event this fires immediately rather
+	* than waiting for the runtime handshake to report `telemetryDisabled`.
+	* The held-queue would never drain for the connection source — a connection
+	* failure means the handshake did not complete — so queuing would guarantee
+	* zero data for the case this event exists to measure. `trackOpened` already
+	* sends on the same terms. Both opt-out layers still gate it: the local
+	* opt-out inside `track`, and the runtime's flag once it is known.
+	*/
+	maybeTrackErrorSignalViewed() {
+		if (this.isOpen || typeof document === "undefined" || document.visibilityState !== "visible") return;
+		const active = this.getActiveLauncherSignal();
+		if (active === null || !isErrorSignalKey(active)) return;
+		if (this.errorSignalViewedSources.has(active)) return;
+		if (this.pillOutcome === null && LAUNCHER_SIGNALS[active].pillLabel !== void 0) return;
+		if (this.core?.telemetryDisabled) return;
+		this.errorSignalViewedSources.add(active);
+		require_telemetry.trackErrorSignalViewed({
+			source: active,
+			presentation: this.isReducedMotionPreferred() ? "reduced_motion" : "animated",
+			label: this.pillOutcome ?? "suppressed"
+		});
 	}
 	maybeTrackNewsSignalViewed() {
-		if (!this.newsSignalArmed || !this.newsSignalPulsing || this.isOpen || typeof document === "undefined" || document.visibilityState !== "visible") return;
+		if (!this.newsSignalArmed || this.pulsingSignal !== NEWS_SIGNAL_ID || this.isOpen || typeof document === "undefined" || document.visibilityState !== "visible") return;
 		const id = this.announcementTimestamp;
 		if (!id || this.viewedNewsSignalIds.has(id)) return;
 		this.viewedNewsSignalIds.add(id);