@copilotkit/web-inspector 1.69.0 → 1.69.1

package/dist/index.mjs

@@ -5,16 +5,17 @@ import { applyAnchorPosition, centerContext, clampSize, constrainToViewport, kee
 import { clearLegacyAnnouncementReadState, isValidAnchor, isValidDockMode, isValidPosition, isValidSize, loadAnnouncementPulsedTimestamp, loadAnnouncementReadTimestamp, loadInspectorState, saveAnnouncementPulsedTimestamp, saveAnnouncementReadTimestamp, saveInspectorState } from "./lib/persistence.mjs";
 import { buildPopOutFeatures, ensureBrandFont, openPopOutWindow } from "./lib/pop-out.mjs";
 import { projectInspectorMetadata } from "./lib/inspector-metadata.mjs";
-import { buildHomeModel } from "./lib/home-briefing.mjs";
+import { buildHomeModel, runtimeConnectionNeedsAttention } from "./lib/home-briefing.mjs";
 import { INSPECTOR_GROUPS, INSPECTOR_NAV_SECTIONS, getGroupForMenu, isInspectorMenuKey, shouldUseIconRail } from "./lib/inspector-nav.mjs";
 import { selectVisibleRealThreadId } from "./lib/thread-selection.mjs";
-import { TELEMETRY_DOCS_URL, ensureTelemetryDistinctId, getRuntimeUrlType, getTelemetryDistinctIdForUrl, maybeShowDisclosure, trackHomeCtaClicked, trackHomeViewed, trackInspectorOpened, trackMemoriesTabClicked, trackMetadataActionClicked, trackMetadataModuleViewed, trackTalkToEngineerClicked, trackThreadsEmptyEnabledViewed, trackThreadsEnabledViewed, trackThreadsExampleSelected, trackThreadsExampleTourCompleted, trackThreadsExampleTourDismissed, trackThreadsExampleTourReopened, trackThreadsExampleTourStarted, trackThreadsExampleTourStepViewed, trackThreadsExampleViewed, trackThreadsIntelligenceSignupClicked, trackThreadsLockedViewed, trackThreadsTabClicked, trackThreadsTalkToEngineerClicked, trackWhatsNewClicked, trackWhatsNewSignalViewed, trackWhatsNewViewed } from "./lib/telemetry.mjs";
+import { ACTIVITY_STARTERS, compileActivityRecipe, compileChatSnippet, compileFromActivityMessage, compileReasoningRecipe, compileTextRecipe, compileToolCallRecipe, createSnippetId, deleteEventSnippet, editorStateFromSnippet, expandSnippetEventsForRun, exportEventSnippetsJson, groupEventSnippets, importEventSnippets, loadEventSnippets, parseSnippetEvents, recipeIconName, recipeIconWrapClass, recipeLabel, snippetContainsToolCall, snippetJsonIsRunnable, upsertEventSnippet } from "./lib/event-snippets.mjs";
+import { TELEMETRY_DOCS_URL, ensureTelemetryDistinctId, getRuntimeUrlType, getTelemetryDistinctIdForUrl, maybeShowDisclosure, trackErrorSignalViewed, trackEventSnippetsRun, trackEventSnippetsSaved, trackHomeCtaClicked, trackHomeViewed, trackInspectorOpened, trackMemoriesTabClicked, trackMetadataActionClicked, trackMetadataModuleViewed, trackTalkToEngineerClicked, trackThreadsEmptyEnabledViewed, trackThreadsEnabledViewed, trackThreadsExampleSelected, trackThreadsExampleTourCompleted, trackThreadsExampleTourDismissed, trackThreadsExampleTourReopened, trackThreadsExampleTourStarted, trackThreadsExampleTourStepViewed, trackThreadsExampleViewed, trackThreadsIntelligenceSignupClicked, trackThreadsLockedViewed, trackThreadsTabClicked, trackThreadsTalkToEngineerClicked, trackWhatsNewClicked, trackWhatsNewSignalViewed, trackWhatsNewViewed } from "./lib/telemetry.mjs";
 import { LitElement, css, html, nothing, render, unsafeCSS } from "lit";
 import { marked } from "marked";
 import { styleMap } from "lit/directives/style-map.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { icons } from "lucide";
-import { CopilotKitCoreRuntimeConnectionStatus, ɵcreateThreadStore, ɵselectMemories, ɵselectMemoriesAvailable, ɵselectMemoriesError, ɵselectMemoriesIsLoading, ɵselectMemoriesRealtimeStatus, ɵselectThreads, ɵselectThreadsError, ɵselectThreadsIsLoading } from "@copilotkit/core";
+import { CopilotKitCoreErrorCode, CopilotKitCoreRuntimeConnectionStatus, createInspectorThreadRequestId, emitInspectorStopViewing, emitInspectorViewThread, isInspectorThreadBridgeEnabled, onInspectorActiveThread, onInspectorViewThreadResult, ɵcreateThreadStore, ɵinjectInspectorEvents, ɵresetInspectorInject, ɵselectMemories, ɵselectMemoriesAvailable, ɵselectMemoriesError, ɵselectMemoriesIsLoading, ɵselectMemoriesRealtimeStatus, ɵselectThreads, ɵselectThreadsError, ɵselectThreadsIsLoading } from "@copilotkit/core";
 
 //#region src/index.ts
 const WEB_INSPECTOR_TAG = "cpk-web-inspector";
@@ -33,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 CopilotKitCoreErrorCode.TOOL_NOT_FOUND:
+		case CopilotKitCoreErrorCode.TOOL_HANDLER_FAILED:
+		case CopilotKitCoreErrorCode.TOOL_ARGUMENT_PARSE_FAILED:
+		case CopilotKitCoreErrorCode.AGENT_NOT_FOUND: return "tool";
+		case CopilotKitCoreErrorCode.AGENT_CONNECT_FAILED:
+		case CopilotKitCoreErrorCode.AGENT_RUN_FAILED:
+		case CopilotKitCoreErrorCode.AGENT_RUN_FAILED_EVENT:
+		case 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;
@@ -513,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 = "";
@@ -524,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 }
@@ -674,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;
@@ -797,6 +1009,9 @@ var CpkThreadList = class extends PortableLitElement {
                   ${thread.isExample ? html`
                           <span class="cpk-tl__pill cpk-tl__pill--example">Example</span>
                         ` : nothing}
+                  ${this.inAppThreadId === thread.id ? html`
+                          <span class="cpk-tl__pill cpk-tl__pill--in-app">In app</span>
+                        ` : nothing}
                 </span>
               </button>
             `)}
@@ -863,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";
@@ -936,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 },
@@ -1258,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
@@ -2850,8 +3100,32 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
               </span>
             `)}
         </div>
+        ${this.renderViewInAppAction()}
         ${bulkControls}
       </div>
+    `;
+	}
+	renderViewInAppAction() {
+		if (this.viewInAppMode === "hidden") return nothing;
+		const isStop = this.viewInAppMode === "stop";
+		return 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 ? html`<span class="cpk-td__view-in-app-error" role="alert"
+              >${this.viewInAppError}</span
+            >` : nothing}
     `;
 	}
 	renderActiveBulkControls() {
@@ -4131,7 +4405,33 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			inspect: "ag-ui-events"
 		};
 		this.lastScrolledAgentNavigationLayout = null;
+		this.eventSnippets = [];
+		this.selectedSnippetId = null;
+		this.snippetRecipe = "tool-call";
+		this.snippetName = "";
+		this.snippetJson = "[]";
+		this.snippetToolName = "";
+		this.snippetToolArgs = "{}";
+		this.snippetReasoningText = "";
+		this.snippetTextContent = "";
+		this.snippetActivityType = "a2ui-surface";
+		this.snippetActivityContent = "{}";
+		this.snippetError = null;
+		this.snippetBanner = null;
+		this.snippetConfirmOpen = false;
+		this.lastInject = null;
+		this.snippetListWidth = 200;
+		this.snippetDividerResizing = false;
+		this.snippetDividerPointerId = -1;
+		this.snippetDividerStartX = 0;
+		this.snippetDividerStartWidth = 0;
 		this.selectedThreadId = null;
+		this.inAppThreadId = null;
+		this.inAppAgentId = null;
+		this.inAppSource = null;
+		this.activeViewInAppRequestId = null;
+		this.viewInAppError = null;
+		this.inspectorBridgeUnsubscribers = [];
 		this.selectedRealThreadIsExplicit = false;
 		this.selectedLocalExampleThreadId = null;
 		this.requestedThreadId = null;
@@ -4195,9 +4495,39 @@ var WebInspectorElement = class WebInspectorElement extends 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();
@@ -4271,9 +4601,59 @@ var WebInspectorElement = class WebInspectorElement extends 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;
@@ -4305,6 +4685,17 @@ var WebInspectorElement = class WebInspectorElement extends 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";
@@ -4634,6 +5025,19 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.handlePlaygroundStop = () => {
 			this.playgroundAgent?.abortRun();
 		};
+		this.handleSnippetImportChange = async (event) => {
+			const input = event.target;
+			const file = input.files?.[0];
+			input.value = "";
+			if (!file) return;
+			try {
+				this.eventSnippets = importEventSnippets(await file.text());
+				this.snippetError = null;
+			} catch (error) {
+				this.snippetError = error instanceof Error ? error.message : "Import failed.";
+			}
+			this.requestUpdate();
+		};
 		this.handleInspectorMetadataActionClick = (action, placement) => {
 			if (!this.isOpen || this.runtimeStatus !== CopilotKitCoreRuntimeConnectionStatus.Connected || this.core?.telemetryDisabled) return;
 			if (action.kind === "enable_intelligence") {
@@ -4661,6 +5065,26 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			if (this.core?.telemetryDisabled) return;
 			trackThreadsTalkToEngineerClicked(this.getThreadsCtaTelemetryProps("talk_to_engineer", "threads_locked"));
 		};
+		this.handleSnippetListDividerPointerDown = (event) => {
+			this.snippetDividerResizing = true;
+			this.snippetDividerPointerId = event.pointerId;
+			this.snippetDividerStartX = event.clientX;
+			this.snippetDividerStartWidth = this.snippetListWidth;
+			event.currentTarget.setPointerCapture(event.pointerId);
+			event.preventDefault();
+		};
+		this.handleSnippetListDividerPointerMove = (event) => {
+			if (!this.snippetDividerResizing || this.snippetDividerPointerId !== event.pointerId) return;
+			const delta = event.clientX - this.snippetDividerStartX;
+			this.snippetListWidth = Math.max(160, Math.min(360, this.snippetDividerStartWidth + delta));
+			this.requestUpdate();
+		};
+		this.handleSnippetListDividerPointerUp = (event) => {
+			if (this.snippetDividerPointerId !== event.pointerId) return;
+			const target = event.currentTarget;
+			if (target.hasPointerCapture(this.snippetDividerPointerId)) target.releasePointerCapture(this.snippetDividerPointerId);
+			this.snippetDividerResizing = false;
+		};
 		this.handleThreadDividerPointerDown = (event) => {
 			this.threadDividerResizing = true;
 			this.threadDividerPointerId = event.pointerId;
@@ -4681,6 +5105,40 @@ var WebInspectorElement = class WebInspectorElement extends 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) emitInspectorStopViewing({
+				requestId: this.activeViewInAppRequestId,
+				agentId: this.inAppAgentId
+			});
+			this.viewInAppError = null;
+			const requestId = createInspectorThreadRequestId();
+			this.activeViewInAppRequestId = requestId;
+			if (!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;
+			emitInspectorStopViewing({
+				requestId,
+				agentId
+			});
+			this.requestUpdate();
+		};
 		this.handleThreadsExampleOverviewVideoControl = () => {
 			const video = this.threadsExampleOverviewVideoElement;
 			if (!video) return;
@@ -4883,6 +5341,11 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 				label: "AG-UI Events",
 				icon: "Zap"
 			},
+			{
+				key: "event-snippets",
+				label: "Event Snippets",
+				icon: "Code"
+			},
 			{
 				key: "agents",
 				label: "Agent",
@@ -5101,7 +5564,7 @@ var WebInspectorElement = class WebInspectorElement extends 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();
 		});
@@ -5115,7 +5578,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this._threadsLoadingByAgent.set(agentId, ɵselectThreadsIsLoading(initialState));
 		const initialError = ɵselectThreadsError(initialState);
 		if (initialError) this._threadsErrorByAgent.set(agentId, initialError);
-		else this._threadsErrorByAgent.delete(agentId);
+		else if (!ɵselectThreadsIsLoading(initialState)) this._threadsErrorByAgent.delete(agentId);
 		this.rebuildFlattenedThreads();
 		this.autoSelectLatestThread();
 	}
@@ -5196,8 +5659,28 @@ var WebInspectorElement = class WebInspectorElement extends 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;
@@ -5253,6 +5736,7 @@ var WebInspectorElement = class WebInspectorElement extends 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 = {
@@ -5288,11 +5772,12 @@ var WebInspectorElement = class WebInspectorElement extends 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 }) => {
@@ -5385,6 +5870,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			}),
 			memoryStore.select(ɵselectMemoriesError).subscribe((v) => {
 				this._memoriesError = v;
+				if (v) this.armEventError("memory", v.message);
 				this.requestUpdate();
 			}),
 			memoryStore.select(ɵselectMemoriesAvailable).subscribe((v) => {
@@ -5471,10 +5957,12 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this._recallQuery = "";
 		this.coreSubscriber = null;
 		this.runtimeStatus = null;
+		this.cancelThreadRefreshDebounce();
 		this.inspectorMetadataValue = void 0;
 		this.inspectorMetadataProjection = projectInspectorMetadata(void 0, void 0);
 		this.metadataTelemetryFingerprints.clear();
 		this.lastCoreError = null;
+		this.clearAllEventErrors();
 		this.coreProperties = {};
 		this.cachedTools = [];
 		this.toolSignature = "";
@@ -5788,6 +6276,19 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.persistState();
 		this.requestUpdate();
 	}
+	focusEventSnippets(options) {
+		this.pendingPersistedMenu = null;
+		this.selectedMenu = "event-snippets";
+		this.settingsOpen = false;
+		this.lastSelectedMenuByGroup.inspect = "event-snippets";
+		this.contextMenuOpen = false;
+		this.layoutMenuOpen = false;
+		this.reloadEventSnippets();
+		if (options.snippetId) this.selectEventSnippet(options.snippetId);
+		if (options.agentId && this.contextOptions.some((option) => option.key === options.agentId)) this.selectedContext = options.agentId;
+		this.persistState();
+		this.requestUpdate();
+	}
 	filterEvents(events) {
 		const query = this.eventFilterText.trim().toLowerCase();
 		return events.filter((event) => {
@@ -5833,22 +6334,28 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 	}
 	renderToolCallDetails(toolCalls) {
 		if (!Array.isArray(toolCalls) || toolCalls.length === 0) return nothing;
+		const toolError = this.eventErrorDetails.tool;
 		return 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 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 ? html`<p class="mt-2 break-words leading-relaxed text-gray-800">
+                    ${toolError.message}
+                  </p>` : nothing}
               ${argsString ? html`<pre
                     class="mt-2 overflow-auto rounded bg-white p-2 text-[11px] leading-relaxed text-gray-800"
                   >
@@ -6000,18 +6507,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(28, 31, 36, 0.95);
+        --cpk-launcher-face-solid: rgb(28, 31, 36);
+        --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. */
@@ -6413,14 +6930,14 @@ ${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;
         box-shadow:
           0 0 0 1px rgba(190, 194, 255, 0.15),
           0 4px 14px rgba(1, 5, 7, 0.28) !important;
       }
       .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 {
@@ -6438,7 +6955,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;
       }
 
@@ -6548,11 +7064,197 @@ ${argsString}</pre
         box-shadow: 0 0 0 1.5px var(--cpk-launcher-face);
       }
 
+      /* ── 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);
+      }
+
       /*
        * Reduced motion: the halo is held statically rather than animated, so
        * 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;
         }
@@ -6572,58 +7274,275 @@ ${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: ${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;
+
+      .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-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-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-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: ${unsafeCSS(LAUNCHER_SIGNAL_COLORS.news)};
+      }
+      .inspector-nav-signal-dot[data-cpk-signal-tone="error"] {
+        background: ${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;
       }
@@ -6916,6 +7835,7 @@ ${argsString}</pre
 			clearLegacyAnnouncementReadState();
 			this.tryAutoAttachCore();
 			this.ensureAnnouncementLoading();
+			this.subscribeToInspectorThreadBridge();
 		}
 		this.requestUpdate();
 	}
@@ -6938,13 +7858,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);
@@ -6987,6 +7910,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");
@@ -6996,7 +7920,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;
@@ -7054,20 +7982,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 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` : nothing}
+          aria-expanded=${this.launcherHudOpen ? "true" : "false"}
+          aria-controls=${this.launcherHudOpen ? "cpk-launcher-hud" : 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` : nothing}
           data-drag-context="button"
-          data-cpk-signal=${this.newsSignalArmed ? NEWS_SIGNAL_TONE : nothing}
-          data-cpk-signal-pulsing=${this.newsSignalArmed && this.newsSignalPulsing ? "true" : nothing}
+          data-cpk-signal=${signal ? signal.tone : nothing}
+          data-cpk-signal-pulsing=${activeSignal !== null && this.pulsingSignal === activeSignal ? "true" : nothing}
           style=${styleMap(signalStyles)}
           data-dragging=${this.isDragging && this.pointerContext === "button" ? "true" : "false"}
           @pointerdown=${this.handlePointerDown}
@@ -7082,16 +8023,210 @@ ${argsString}</pre
             class="cpk-launcher-mark h-6 w-auto"
             loading="lazy"
           />
-          ${this.newsSignalArmed ? html`<span
+          ${activeSignal !== null ? 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>` : nothing}
         </button>
+        ${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 nothing;
+		const signal = LAUNCHER_SIGNALS[key];
+		const label = signal.pillLabel;
+		if (label === void 0) return nothing;
+		return 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=${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 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 html`
+      <li
+        class="cpk-launcher-hud__row"
+        data-cpk-hud-row=${args.id}
+        data-cpk-hud-help=${helpOpen ? "open" : 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() : 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 nothing;
+		const threadsOn = this.areThreadEndpointsAvailable();
+		const intelligenceOn = Boolean(this._core?.intelligence);
+		const learningOn = intelligenceOn && this._memoriesAvailable;
+		return 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>
     `;
 	}
@@ -7113,7 +8248,6 @@ ${argsString}</pre
     `;
 	}
 	renderInspectorSidebar(iconRail, automaticallyCollapsed, agentSelector) {
-		const unread = this.newsSignalArmed && this.announcementLoaded;
 		const homeModel = this.getHomeModel();
 		return html`
       <aside
@@ -7155,7 +8289,7 @@ ${argsString}</pre
                     </button>` : 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 html`
                     <button
                       type="button"
@@ -7163,7 +8297,7 @@ ${argsString}</pre
                       data-inspector-group=${group}
                       data-inspector-menu-key=${item.key}
                       aria-current=${isSelected ? "page" : 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 ? nothing : item.label}
                       style=${INTERACTIVE_FOCUS_BASE_STYLE}
@@ -7177,8 +8311,12 @@ ${argsString}</pre
                         ${item.key === "threads" ? unsafeHTML(this.customTabIcons.threads) : this.renderIcon(item.icon)}
                       </span>
                       <span class="inspector-nav-label">${item.label}</span>
-                      ${showBadge ? html`
-                              <span class="inspector-nav-signal-dot" aria-hidden="true"></span>
+                      ${marker ? html`
+                              <span
+                                class="inspector-nav-signal-dot"
+                                data-cpk-signal-tone=${marker.tone}
+                                aria-hidden="true"
+                              ></span>
                             ` : nothing}
                     </button>
                   `;
@@ -7652,6 +8790,31 @@ ${argsString}</pre
             `)}
         </dl>
       </section>
+    `;
+	}
+	renderEventErrorBanner(key) {
+		const error = this.eventErrorDetails[key];
+		if (!error) return nothing;
+		const guide = EVENT_ERROR_GUIDANCE[key];
+		return 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 ? html`<p>Agent: ${error.agentId}</p>` : nothing}
+          ${error.toolName ? html`<p>Tool: ${error.toolName}</p>` : nothing}
+          <p class="break-words leading-relaxed">${error.message}</p>
+          ${guide.advice ? html`<p class="leading-relaxed">${guide.advice}</p>` : nothing}
+          ${guide.highlight && this.hasEventErrorHighlight(key) ? html`<p class="leading-relaxed">${guide.highlight}</p>` : nothing}
+        </div>
+      </div>
     `;
 	}
 	handleHomeLastEventSelect(eventId, agentId) {
@@ -8370,21 +9533,34 @@ ${argsString}</pre
 		this.draggedDuringInteraction = false;
 	}
 	openInspector(source, options = {}) {
-		if (options.threadId) this.focusThread(options);
+		if (options.snippetId || options.menu === "event-snippets") this.focusEventSnippets(options);
+		else if (options.threadId) this.focusThread(options);
 		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[getGroupForMenu(hudMenu)] = hudMenu;
+		} else if (activeSignalAtOpen !== null && source === "floating_button") {
+			const landing = LAUNCHER_SIGNALS[activeSignalAtOpen].landingTarget;
+			this.selectedMenu = landing;
+			this.lastSelectedMenuByGroup[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();
@@ -8399,7 +9575,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");
@@ -8407,6 +9582,7 @@ ${argsString}</pre
 		this.updateComplete.then(() => {
 			this.measureContext("button");
 			this.applyAnchorPosition("button");
+			this.flushPendingSignalPulse();
 		});
 	}
 	renderIcon(name) {
@@ -8587,6 +9763,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
 		};
 	}
@@ -8769,16 +9946,16 @@ ${argsString}</pre
         @submit=${this.handlePlaygroundSubmit}
       >
         ${this.playgroundError ? html`<div
-                class="mx-auto mb-2 flex max-w-3xl items-start gap-2 rounded-lg border border-rose-200 bg-rose-50 px-2.5 py-2 text-[10px] text-rose-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>
@@ -8813,23 +9990,574 @@ ${argsString}</pre
             ?disabled=${sendDisabled}
             @click=${this.playgroundIsRunning ? this.handlePlaygroundStop : nothing}
           >
-            ${this.renderIcon(this.playgroundIsRunning ? "Square" : "ArrowUp")}
-          </button>
+            ${this.renderIcon(this.playgroundIsRunning ? "Square" : "ArrowUp")}
+          </button>
+        </div>
+        <p
+          class="mx-auto max-w-3xl px-3 py-2 text-center text-[10px] leading-4 text-gray-500"
+        >
+          AI can make mistakes. Please verify important information.
+        </p>
+      </form>
+    `;
+	}
+	reloadEventSnippets() {
+		this.eventSnippets = loadEventSnippets();
+	}
+	renderSnippetImportControl() {
+		return html`
+      <label
+        class="inline-flex shrink-0 cursor-pointer items-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-[11px] text-gray-700"
+        data-testid="cpk-snippet-import"
+      >
+        Import
+        <input
+          type="file"
+          accept="application/json"
+          class="hidden"
+          @change=${this.handleSnippetImportChange}
+        />
+      </label>
+    `;
+	}
+	selectEventSnippet(id) {
+		const snippet = this.eventSnippets.find((item) => item.id === id);
+		this.selectedSnippetId = id;
+		if (!snippet) {
+			this.requestUpdate();
+			return;
+		}
+		const editor = editorStateFromSnippet(snippet);
+		this.snippetRecipe = editor.recipe;
+		this.snippetName = editor.name;
+		this.snippetJson = editor.json;
+		this.snippetToolName = editor.draft.toolName;
+		this.snippetToolArgs = editor.draft.toolArgs;
+		this.snippetReasoningText = editor.draft.reasoningText;
+		this.snippetTextContent = editor.draft.textContent;
+		this.snippetActivityType = editor.draft.activityType;
+		this.snippetActivityContent = editor.draft.activityContent;
+		this.snippetError = null;
+		this.requestUpdate();
+	}
+	compileSnippetDraft() {
+		switch (this.snippetRecipe) {
+			case "tool-call": return compileToolCallRecipe({
+				toolName: this.snippetToolName,
+				argsJson: this.snippetToolArgs,
+				threadId: this.getSnippetThreadId(),
+				runId: this.getSnippetRunId()
+			});
+			case "reasoning": return compileReasoningRecipe({
+				text: this.snippetReasoningText,
+				threadId: this.getSnippetThreadId(),
+				runId: this.getSnippetRunId()
+			});
+			case "text": return compileTextRecipe({
+				text: this.snippetTextContent,
+				threadId: this.getSnippetThreadId(),
+				runId: this.getSnippetRunId()
+			});
+			case "activity": return compileActivityRecipe({
+				activityType: this.snippetActivityType,
+				contentJson: this.snippetActivityContent,
+				threadId: this.getSnippetThreadId(),
+				runId: this.getSnippetRunId()
+			});
+			case "raw": return parseSnippetEvents(this.snippetJson);
+		}
+	}
+	getSnippetThreadId() {
+		return this.selectedThreadId ?? "inspector-snippet";
+	}
+	getSnippetRunId() {
+		return `inspector-snippet-${Date.now()}`;
+	}
+	getSnippetTargetAgent() {
+		const core = this._core;
+		if (!core) return null;
+		const selected = this.selectedContext !== "all-agents" ? this.selectedContext : null;
+		if (selected) return core.getAgent(selected) ?? null;
+		const first = this.contextOptions.find((option) => option.key !== "all-agents");
+		return first ? core.getAgent(first.key) ?? null : null;
+	}
+	applyRecipeToEditor() {
+		try {
+			const events = this.compileSnippetDraft();
+			this.snippetJson = JSON.stringify(events, null, 2);
+			this.snippetError = null;
+		} catch (error) {
+			this.snippetError = error instanceof Error ? error.message : "Could not compile recipe.";
+		}
+		this.requestUpdate();
+	}
+	handleSnippetRecipeChange(event) {
+		const value = event.target.value;
+		if (value === "tool-call" || value === "reasoning" || value === "text" || value === "activity" || value === "raw") {
+			this.snippetRecipe = value;
+			if (value !== "raw") this.applyRecipeToEditor();
+			else this.requestUpdate();
+		}
+	}
+	saveCurrentSnippet(source) {
+		try {
+			const events = parseSnippetEvents(this.snippetJson);
+			const now = (/* @__PURE__ */ new Date()).toISOString();
+			const snippet = {
+				id: this.selectedSnippetId ?? createSnippetId(),
+				name: this.snippetName.trim() || recipeLabel(this.snippetRecipe),
+				recipe: this.snippetRecipe,
+				events,
+				createdAt: this.eventSnippets.find((item) => item.id === this.selectedSnippetId)?.createdAt ?? now,
+				updatedAt: now
+			};
+			this.eventSnippets = upsertEventSnippet(snippet);
+			this.selectedSnippetId = snippet.id;
+			this.snippetBanner = "Snippet saved.";
+			this.snippetError = null;
+			if (!this.core?.telemetryDisabled) trackEventSnippetsSaved({
+				recipe: this.snippetRecipe,
+				source,
+				success: true
+			});
+		} catch (error) {
+			this.snippetError = error instanceof Error ? error.message : "Could not save snippet.";
+			if (!this.core?.telemetryDisabled) trackEventSnippetsSaved({
+				recipe: this.snippetRecipe,
+				source,
+				success: false
+			});
+		}
+		this.requestUpdate();
+	}
+	async runCurrentSnippet() {
+		this.snippetError = null;
+		this.snippetBanner = null;
+		let events;
+		try {
+			events = expandSnippetEventsForRun(parseSnippetEvents(this.snippetJson));
+		} catch (error) {
+			this.snippetError = error instanceof Error ? error.message : "Snippet JSON is invalid.";
+			this.requestUpdate();
+			return;
+		}
+		if (snippetContainsToolCall(events) && !this.snippetConfirmOpen) {
+			this.snippetConfirmOpen = true;
+			this.requestUpdate();
+			return;
+		}
+		this.snippetConfirmOpen = false;
+		const core = this._core;
+		const agent = this.getSnippetTargetAgent();
+		if (!core || !agent) {
+			this.snippetError = "No agent is available to inject into.";
+			this.requestUpdate();
+			return;
+		}
+		if (agent.isRunning) {
+			this.snippetError = "The agent is running. Wait for the current run to end.";
+			this.requestUpdate();
+			return;
+		}
+		try {
+			const result = await ɵinjectInspectorEvents({
+				core,
+				agent,
+				events
+			});
+			this.lastInject = {
+				snippetId: this.selectedSnippetId ?? "unsaved",
+				agentId: agent.agentId ?? "default",
+				runId: this.getSnippetRunId(),
+				messageIds: result.messageIds
+			};
+			this.snippetBanner = "Inspector injected these events into the live thread.";
+			if (!this.core?.telemetryDisabled) trackEventSnippetsRun({
+				recipe: this.snippetRecipe,
+				source: "pane",
+				success: true
+			});
+		} catch (error) {
+			this.snippetError = error instanceof Error ? error.message : "Could not run snippet.";
+			if (!this.core?.telemetryDisabled) trackEventSnippetsRun({
+				recipe: this.snippetRecipe,
+				source: "pane",
+				success: false
+			});
+		}
+		this.requestUpdate();
+	}
+	resetLastSnippetRun() {
+		const last = this.lastInject;
+		const core = this._core;
+		if (!last || !core) return;
+		const agent = core.getAgent(last.agentId);
+		if (!agent) {
+			this.snippetError = "The injected agent is no longer available.";
+			this.requestUpdate();
+			return;
+		}
+		ɵresetInspectorInject({
+			agent,
+			messageIds: last.messageIds
+		});
+		this.lastInject = null;
+		this.snippetBanner = "Last inject was removed from the thread. App state from a tool handler was not undone.";
+		this.requestUpdate();
+	}
+	renderEventSnippetsView() {
+		if (this.eventSnippets.length === 0 && this.selectedSnippetId === null) this.reloadEventSnippets();
+		const agent = this.getSnippetTargetAgent();
+		const runBlocked = agent?.isRunning === true;
+		const canRunJson = snippetJsonIsRunnable(this.snippetJson);
+		const canRun = canRunJson && !!agent && !runBlocked;
+		const canSave = canRunJson;
+		const canDelete = this.selectedSnippetId !== null;
+		const canExport = this.eventSnippets.length > 0;
+		const canReset = this.lastInject !== null;
+		const snippetGroups = groupEventSnippets(this.eventSnippets);
+		const tools = this._core?.tools ?? [];
+		return html`
+      <div class="flex h-full min-h-0 flex-col bg-white">
+        <div
+          class="flex items-center justify-between gap-4 border-b border-gray-200 px-4 py-3"
+        >
+          <div class="min-w-0">
+            <h2 class="text-sm font-semibold text-gray-900">Event Snippets</h2>
+            <p class="mt-1 text-[11px] text-gray-500">
+              Compile AG-UI events, run them on the live agent, and save them
+              for later. Tool-call runs use the real frontend-tool handler.
+            </p>
+          </div>
+          ${this.renderSnippetImportControl()}
+        </div>
+        ${this.snippetBanner ? html`<div
+                class="border-b border-emerald-200 bg-emerald-50 px-4 py-2 text-[11px] text-emerald-800"
+                role="status"
+              >
+                ${this.snippetBanner}
+              </div>` : nothing}
+        ${this.snippetError ? html`<div
+                class="border-b border-rose-200 bg-rose-50 px-4 py-2 text-[11px] text-rose-800"
+                role="alert"
+              >
+                ${this.snippetError}
+              </div>` : nothing}
+        ${this.snippetConfirmOpen ? html`<div
+                class="border-b border-amber-200 bg-amber-50 px-4 py-2 text-[11px] text-amber-900"
+                role="alertdialog"
+                aria-label="Confirm tool-call run"
+              >
+                <p>
+                  This snippet contains a tool call. Run will execute the real
+                  handler on the live thread.
+                </p>
+                <div class="mt-2 flex gap-2">
+                  <button
+                    type="button"
+                    class="rounded-md bg-gray-900 px-2 py-1 text-[11px] text-white"
+                    data-testid="cpk-snippet-run-handler"
+                    @click=${() => {
+			this.snippetConfirmOpen = true;
+			this.runCurrentSnippet();
+		}}
+                  >
+                    Run handler
+                  </button>
+                  <button
+                    type="button"
+                    class="rounded-md border border-gray-300 bg-white px-2 py-1 text-[11px]"
+                    @click=${() => {
+			this.snippetConfirmOpen = false;
+			this.requestUpdate();
+		}}
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>` : nothing}
+        <div class="flex min-h-0 flex-1">
+          <div
+            class="inspector-snippet-sidebar shrink-0"
+            style="width:${this.snippetListWidth}px"
+            data-testid="cpk-snippet-list"
+          >
+            ${snippetGroups.length === 0 ? html`
+                    <p class="px-2 py-2 text-[11px] text-gray-500">No saved snippets yet.</p>
+                  ` : html`
+                    <nav class="inspector-sidebar-nav" aria-label="Saved snippets">
+                      ${snippetGroups.map((group) => html`
+                          <div class="inspector-sidebar-section">
+                            <div
+                              class="inspector-sidebar-label"
+                              data-testid="cpk-snippet-category"
+                              data-recipe=${group.recipe}
+                            >
+                              ${group.label}
+                            </div>
+                            ${group.snippets.map((snippet) => {
+			const isSelected = snippet.id === this.selectedSnippetId;
+			return html`
+                                <button
+                                  type="button"
+                                  class="inspector-nav-control inspector-sidebar-control ${isSelected ? "inspector-nav-control-active" : ""}"
+                                  data-testid="cpk-snippet-item"
+                                  data-recipe=${snippet.recipe}
+                                  aria-current=${isSelected ? "page" : nothing}
+                                  aria-label="${recipeLabel(snippet.recipe)}: ${snippet.name}"
+                                  style=${INTERACTIVE_FOCUS_BASE_STYLE}
+                                  @click=${() => this.selectEventSnippet(snippet.id)}
+                                >
+                                  <span
+                                    class="inspector-nav-icon"
+                                    aria-hidden="true"
+                                  >
+                                    <span
+                                      class="flex h-6 w-6 items-center justify-center rounded-md ${recipeIconWrapClass(snippet.recipe)}"
+                                    >
+                                      ${this.renderIcon(recipeIconName(snippet.recipe))}
+                                    </span>
+                                  </span>
+                                  <span class="inspector-nav-label"
+                                    >${snippet.name}</span
+                                  >
+                                </button>
+                              `;
+		})}
+                          </div>
+                        `)}
+                    </nav>
+                  `}
+          </div>
+          <div
+            class="w-1.5 shrink-0 cursor-col-resize bg-gray-200 hover:bg-gray-400"
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize snippet list"
+            title="Drag to resize"
+            data-testid="cpk-snippet-list-resize"
+            style="touch-action:none"
+            @pointerdown=${this.handleSnippetListDividerPointerDown}
+            @pointermove=${this.handleSnippetListDividerPointerMove}
+            @pointerup=${this.handleSnippetListDividerPointerUp}
+            @pointercancel=${this.handleSnippetListDividerPointerUp}
+          ></div>
+          <div class="flex min-h-0 min-w-0 flex-1 flex-col gap-2 overflow-auto p-4">
+            <label class="text-[11px] text-gray-600">
+              Name
+              <input
+                class="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
+                data-testid="cpk-snippet-name"
+                .value=${this.snippetName}
+                @input=${(event) => {
+			this.snippetName = event.target.value;
+		}}
+              />
+            </label>
+            <label class="text-[11px] text-gray-600">
+              Recipe
+              <select
+                class="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
+                data-testid="cpk-snippet-recipe"
+                .value=${this.snippetRecipe}
+                @change=${this.handleSnippetRecipeChange}
+              >
+                ${[
+			"tool-call",
+			"reasoning",
+			"text",
+			"activity",
+			"raw"
+		].map((recipe) => html`<option
+                    value=${recipe}
+                    ?selected=${recipe === this.snippetRecipe}
+                  >
+                    ${recipeLabel(recipe)}
+                  </option>`)}
+              </select>
+            </label>
+            ${this.snippetRecipe === "tool-call" ? html`
+                    <label class="text-[11px] text-gray-600">
+                      Tool
+                      <input
+                        list="cpk-snippet-tools"
+                        class="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
+                        data-testid="cpk-snippet-tool-name"
+                        .value=${this.snippetToolName}
+                        @input=${(event) => {
+			this.snippetToolName = event.target.value;
+			this.applyRecipeToEditor();
+		}}
+                      />
+                      <datalist id="cpk-snippet-tools">
+                        ${tools.map((tool) => html`<option value=${tool.name}></option>`)}
+                      </datalist>
+                    </label>
+                    <label class="text-[11px] text-gray-600">
+                      Args JSON
+                      <textarea
+                        class="mt-1 h-20 w-full rounded-md border border-gray-200 px-2 py-1 font-mono text-[11px]"
+                        data-testid="cpk-snippet-tool-args"
+                        .value=${this.snippetToolArgs}
+                        @input=${(event) => {
+			this.snippetToolArgs = event.target.value;
+			this.applyRecipeToEditor();
+		}}
+                      ></textarea>
+                    </label>
+                  ` : nothing}
+            ${this.snippetRecipe === "reasoning" ? html`<label class="text-[11px] text-gray-600">
+                    Reasoning
+                    <textarea
+                      class="mt-1 h-20 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
+                      data-testid="cpk-snippet-reasoning"
+                      .value=${this.snippetReasoningText}
+                      @input=${(event) => {
+			this.snippetReasoningText = event.target.value;
+			this.applyRecipeToEditor();
+		}}
+                    ></textarea>
+                  </label>` : nothing}
+            ${this.snippetRecipe === "text" ? html`<label class="text-[11px] text-gray-600">
+                    Assistant text
+                    <textarea
+                      class="mt-1 h-20 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
+                      data-testid="cpk-snippet-text"
+                      .value=${this.snippetTextContent}
+                      @input=${(event) => {
+			this.snippetTextContent = event.target.value;
+			this.applyRecipeToEditor();
+		}}
+                    ></textarea>
+                  </label>` : nothing}
+            ${this.snippetRecipe === "activity" ? html`
+                    <label class="text-[11px] text-gray-600">
+                      Activity type
+                      <input
+                        list="cpk-snippet-activity"
+                        class="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
+                        data-testid="cpk-snippet-activity-type"
+                        .value=${this.snippetActivityType}
+                        @input=${(event) => {
+			this.snippetActivityType = event.target.value;
+			this.applyRecipeToEditor();
+		}}
+                      />
+                      <datalist id="cpk-snippet-activity">
+                        ${ACTIVITY_STARTERS.map((type) => html`<option value=${type}></option>`)}
+                      </datalist>
+                    </label>
+                    <label class="text-[11px] text-gray-600">
+                      Content JSON
+                      <textarea
+                        class="mt-1 h-24 w-full rounded-md border border-gray-200 px-2 py-1 font-mono text-[11px]"
+                        data-testid="cpk-snippet-activity-content"
+                        .value=${this.snippetActivityContent}
+                        @input=${(event) => {
+			this.snippetActivityContent = event.target.value;
+			this.applyRecipeToEditor();
+		}}
+                      ></textarea>
+                    </label>
+                  ` : nothing}
+            <label class="text-[11px] text-gray-600">
+              Events JSON
+              <textarea
+                class="mt-1 h-40 w-full rounded-md border border-gray-200 px-2 py-1 font-mono text-[11px]"
+                data-testid="cpk-snippet-json"
+                .value=${this.snippetJson}
+                @input=${(event) => {
+			this.snippetJson = event.target.value;
+			this.requestUpdate();
+		}}
+              ></textarea>
+            </label>
+            <div class="flex flex-wrap gap-2">
+              <button
+                type="button"
+                class="rounded-md bg-gray-900 px-3 py-1.5 text-[11px] text-white disabled:opacity-50"
+                data-testid="cpk-snippet-run"
+                ?disabled=${!canRun}
+                title=${runBlocked ? "The agent is running. Wait for the current run to end." : !agent ? "No agent is available to inject into." : !canRunJson ? "Events JSON must be a non-empty event array." : "Run snippet"}
+                @click=${() => void this.runCurrentSnippet()}
+              >
+                ${runBlocked ? "Agent running" : "Run"}
+              </button>
+              <button
+                type="button"
+                class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-[11px] disabled:opacity-50"
+                data-testid="cpk-snippet-save"
+                ?disabled=${!canSave}
+                title=${canSave ? "Save snippet" : "Events JSON must be a non-empty event array."}
+                @click=${() => this.saveCurrentSnippet("pane")}
+              >
+                Save
+              </button>
+              <button
+                type="button"
+                class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-[11px] disabled:opacity-50"
+                data-testid="cpk-snippet-reset"
+                ?disabled=${!canReset}
+                title=${canReset ? "Remove the last inject from the thread" : "No Inspector inject to reset."}
+                @click=${() => this.resetLastSnippetRun()}
+              >
+                Reset last run
+              </button>
+              <button
+                type="button"
+                class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-[11px] disabled:opacity-50"
+                data-testid="cpk-snippet-delete"
+                ?disabled=${!canDelete}
+                title=${canDelete ? "Delete this snippet" : "Select a snippet to delete."}
+                @click=${() => {
+			if (!this.selectedSnippetId) return;
+			if (!window.confirm("Delete this snippet?")) return;
+			this.eventSnippets = deleteEventSnippet(this.selectedSnippetId);
+			this.selectedSnippetId = null;
+			this.requestUpdate();
+		}}
+              >
+                Delete
+              </button>
+              <button
+                type="button"
+                class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-[11px] disabled:opacity-50"
+                data-testid="cpk-snippet-export"
+                ?disabled=${!canExport}
+                title=${canExport ? "Export snippets" : "Save a snippet before you export."}
+                @click=${() => {
+			if (!canExport) return;
+			const blob = new Blob([exportEventSnippetsJson(this.eventSnippets)], { type: "application/json" });
+			const url = URL.createObjectURL(blob);
+			const link = document.createElement("a");
+			link.href = url;
+			link.download = "event-snippets.json";
+			link.click();
+			URL.revokeObjectURL(url);
+		}}
+              >
+                Export
+              </button>
+            </div>
+          </div>
         </div>
-        <p
-          class="mx-auto max-w-3xl px-3 py-2 text-center text-[10px] leading-4 text-gray-500"
-        >
-          AI can make mistakes. Please verify important information.
-        </p>
-      </form>
+      </div>
     `;
 	}
 	renderMainContent() {
 		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 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 === "event-snippets") return this.renderEventSnippetsView();
 		if (this.selectedMenu === "agents") return this.renderAgentsView();
 		if (this.selectedMenu === "frontend-tools") return this.renderToolsView();
 		if (this.selectedMenu === "capabilities") return this.renderCapabilitiesView();
@@ -9213,8 +10941,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;
 		trackInspectorOpened({
 			open_source: source,
 			...this.runtimeStatus === "connected" ? {
@@ -9223,6 +10952,8 @@ ${argsString}</pre
 			} : {},
 			runtime_url_type: getRuntimeUrlType(this.core?.runtimeUrl),
 			has_unseen_announcement: hadUnseenAnnouncement,
+			has_error_signal: errorSignal !== null,
+			...errorSignal === null ? {} : { error_signal_source: errorSignal },
 			first_open: firstOpen
 		});
 	}
@@ -9386,6 +11117,51 @@ ${argsString}</pre
 			example_kind: exampleKind
 		});
 	}
+	subscribeToInspectorThreadBridge() {
+		this.unsubscribeFromInspectorThreadBridge();
+		if (!isInspectorThreadBridgeEnabled()) return;
+		this.inspectorBridgeUnsubscribers.push(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();
+		}), 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 (!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);
@@ -10005,7 +11781,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="
@@ -10018,6 +11794,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 html`
@@ -10201,6 +11988,7 @@ ${argsString}</pre
               data-color-scheme=${this.colorScheme}
               .threads=${visibleThreads}
               .selectedThreadId=${this.selectedThreadId}
+              .inAppThreadId=${this.inAppThreadId}
               .errorMessage=${threadsErrorMessage}
               .suppressEmptyState=${loadingWithoutRows}
               @threadSelected=${(e) => {
@@ -10270,6 +12058,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)}
@@ -10438,7 +12230,10 @@ ${argsString}</pre
           </div>
         </div>
       `;
-		else body = html`
+		else {
+			const runError = this.eventErrorDetails.run;
+			const failedRunEventId = runError ? this.findLatestRunErrorEvent(runError.agentId)?.id : void 0;
+			body = 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>
@@ -10450,10 +12245,10 @@ ${argsString}</pre
             <thead class="sticky top-0 z-10">
               <tr class="bg-white">
                 ${[
-			"Agent",
-			"Time",
-			"Event Type"
-		].map((label, col) => html` <th
+				"Agent",
+				"Time",
+				"Event Type"
+			].map((label, col) => 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;"
                     >
@@ -10475,16 +12270,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 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 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
@@ -10517,9 +12314,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) ? html`
                                         <span>✓ Copied</span>
@@ -10532,11 +12329,12 @@ ${prettyEvent}</pre
                     </td>
                   </tr>
                 `;
-		})}
+			})}
             </tbody>
           </table>
         </div>
       `;
+		}
 		return html`
       <div
         class="${embedded ? "flex h-[28rem] min-h-[20rem] flex-col" : "flex h-full flex-col"}"
@@ -10601,6 +12399,7 @@ ${prettyEvent}</pre
 	}
 	renderAgentsView() {
 		if (this.selectedContext === "all-agents") return html`
+        ${this.renderEventErrorBanner("tool")}
         <div
           class="flex h-full items-center justify-center px-4 py-8 text-center"
         >
@@ -10624,6 +12423,7 @@ ${prettyEvent}</pre
 		const messages = this.getLatestMessagesForAgent(agentId);
 		return 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"
@@ -10756,8 +12556,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 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 : 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}"
@@ -10863,6 +12668,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;
@@ -10871,19 +12751,6 @@ ${prettyEvent}</pre
 		this.selectedMenu = key;
 		this.settingsOpen = false;
 		this.lastSelectedMenuByGroup[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";
 		}
@@ -10897,10 +12764,13 @@ ${prettyEvent}</pre
 			if (previousMenu !== "memories" && !this.core?.telemetryDisabled) 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 === "event-snippets") this.reloadEventSnippets();
+		if (key === "ag-ui-events" || key === "agents") {
+			if (!(this.pendingScrollToEventId !== null || this.pendingScrollToToolCallId !== null)) requestAnimationFrame(() => {
+				const scroller = this.activeRoot.querySelector("#cpk-main-scroll");
+				if (scroller) scroller.scrollTop = 0;
+			});
+		}
 		this.contextMenuOpen = false;
 		this.layoutMenuOpen = false;
 		this.persistState();
@@ -11536,50 +13406,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) 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) 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) 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 (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);
+		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);
@@ -11762,5 +14025,5 @@ function defineWebInspector(registry = globalThis.customElements) {
 defineWebInspector();
 
 //#endregion
-export { CpkThreadInspector, THREAD_INSPECTOR_TAG, WEB_INSPECTOR_TAG, WebInspectorElement, defineWebInspector, ɵCpkThreadDetails, buildCapabilityRows as ɵbuildCapabilityRows, maxRecallScore as ɵmaxRecallScore, normalizeRelevance as ɵnormalizeRelevance, relevanceBarWidth as ɵrelevanceBarWidth };
+export { CpkThreadInspector, THREAD_INSPECTOR_TAG, WEB_INSPECTOR_TAG, WebInspectorElement, compileChatSnippet, compileFromActivityMessage, defineWebInspector, upsertEventSnippet, ɵCpkThreadDetails, buildCapabilityRows as ɵbuildCapabilityRows, maxRecallScore as ɵmaxRecallScore, normalizeRelevance as ɵnormalizeRelevance, relevanceBarWidth as ɵrelevanceBarWidth };
 //# sourceMappingURL=index.mjs.map