@copilotkit/web-inspector 1.73.2 → 1.74.0

package/dist/index.cjs

@@ -1,10 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_notifications = require('./lib/notifications.cjs');
+const require_notification_loader = require('./lib/notification-loader.cjs');
+const require_persistence = require('./lib/persistence.cjs');
 const require_generated = require('./styles/generated.cjs');
+const require_notification_article = require('./styles/notification-article.cjs');
 const require_inspector_logo = require('./assets/inspector-logo.cjs');
 const require_inspector_logo_kite = require('./assets/inspector-logo-kite.cjs');
 const require_learning_view = require('./components/learning-view.cjs');
 const require_context_helpers = require('./lib/context-helpers.cjs');
-const require_persistence = require('./lib/persistence.cjs');
 const require_learning_setup = require('./lib/learning-setup.cjs');
 const require_inspector_learning = require('./lib/inspector-learning.cjs');
 const require_pop_out = require('./lib/pop-out.cjs');
@@ -265,7 +268,6 @@ const MIN_WINDOW_WIDTH = 880;
 const MIN_WINDOW_WIDTH_DOCKED_LEFT = 640;
 const MIN_WINDOW_HEIGHT = 480;
 const INSPECTOR_STORAGE_KEY = "cpk:inspector:state";
-const ANNOUNCEMENT_URL = "https://cdn.copilotkit.ai/announcements.json";
 const LAUNCHER_MIN_SIZE = 51.84;
 const LAUNCHER_MAX_SIZE = 62.208;
 const DEFAULT_BUTTON_SIZE = {
@@ -1264,6 +1266,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		this._loadingEvents = false;
 		this._loadingState = false;
 		this._messagesError = null;
+		this._messageRefreshError = null;
 		this._eventsError = null;
 		this._stateError = null;
 		this._expandedTools = /* @__PURE__ */ new Set();
@@ -1356,6 +1359,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			_loadingEvents: { state: true },
 			_loadingState: { state: true },
 			_messagesError: { state: true },
+			_messageRefreshError: { state: true },
 			_eventsError: { state: true },
 			_stateError: { state: true },
 			_expandedTools: { state: true },
@@ -1432,7 +1436,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       </div>`;
 	}
 	renderTabContent(id) {
-		if (id === "timeline") return lit.html`${this._showEventTimeline ? lit.html`<div class="cpk-td__timeline-toolbar">${this.renderTimelineBulkButtons()}</div>${this.renderTimeline()}` : this._conversation.length || this._loadingMessages || this._messagesError ? this.renderConversation() : this.renderTimeline()}`;
+		if (id === "timeline") return lit.html`${this._messageRefreshError ? lit.html`<div class="cpk-td__status cpk-td__status--error" role="status">${this._messageRefreshError}</div>` : lit.nothing}${this._showEventTimeline ? lit.html`<div class="cpk-td__timeline-toolbar">${this.renderTimelineBulkButtons()}</div>${this.renderTimeline()}` : this._conversation.length || this._loadingMessages || this._messagesError ? this.renderConversation() : this.renderTimeline()}`;
 		if (id === "state") return this.renderState();
 		return this.renderEvents();
 	}
@@ -1985,10 +1989,19 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       background: #ffffff;
       color: #71717a;
       cursor: pointer;
+      width: 100%;
+      border: 0;
+      font-family: inherit;
+      text-align: left;
       font-size: 11px;
       user-select: none;
     }
 
+    .cpk-td__tool-header:focus-visible {
+      outline: 2px solid var(--cpk-primary-color, #7076b3);
+      outline-offset: -2px;
+    }
+
     .cpk-td__tool-header:hover {
       background: #fafafa;
     }
@@ -2825,7 +2838,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 	}
 	scrollToFocusedMessage() {
 		if (!this.focusMessageId) return;
-		const message = Array.from(this.shadowRoot?.querySelectorAll("[data-message-id]") ?? []).find((candidate) => candidate.dataset.messageId === this.focusMessageId);
+		const message = Array.from(this.shadowRoot?.querySelectorAll(`#${this.panelDomId(this._tab)}:not([hidden]) [data-message-id]`) ?? []).find((candidate) => candidate.dataset.messageId === this.focusMessageId);
 		if (!message) return;
 		message.scrollIntoView?.({ block: "center" });
 		this._scrolledFocusRequestId = this.focusRequestId;
@@ -2893,6 +2906,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		this._loadingEvents = false;
 		this._loadingState = false;
 		this._messagesError = null;
+		this._messageRefreshError = null;
 		this._eventsError = null;
 		this._stateError = null;
 		this._fetchedMetadata = null;
@@ -2911,7 +2925,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			this._fetchedMetadata = metadata;
 		} catch (err) {
 			if (err instanceof Error && err.name === "AbortError") return;
-			if (this.threadId !== threadId) return;
+			if (controller.signal.aborted || this.threadId !== threadId) return;
 			this._fetchedMetadata = null;
 		}
 	}
@@ -2936,19 +2950,23 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		if (!silent) {
 			this._loadingMessages = true;
 			this._messagesError = null;
+			this._messageRefreshError = null;
 		}
 		try {
 			const messages = this.provider?.getMessages ? await this.provider.getMessages(threadId, { signal: controller.signal }) : await this.fetchRuntimeMessages(threadId, controller.signal);
 			if (controller.signal.aborted || this.threadId !== threadId) return;
 			this._conversation = this.mapMessages(messages);
+			this._messagesError = null;
+			this._messageRefreshError = null;
 		} catch (err) {
+			if (controller.signal.aborted || this.threadId !== threadId) return;
 			if (err instanceof Error && err.name === "AbortError") return;
-			if (!silent) {
+			if (!silent || this._conversation.length === 0) {
 				this._messagesError = err instanceof Error ? err.message : "Failed to load messages";
 				this._conversation = [];
-			}
+			} else this._messageRefreshError = "Could not refresh messages. Showing the last loaded conversation.";
 		} finally {
-			if (!silent && !controller.signal.aborted) this._loadingMessages = false;
+			if (!controller.signal.aborted && this.threadId === threadId) this._loadingMessages = false;
 		}
 	}
 	async fetchEvents(threadId) {
@@ -2975,7 +2993,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			this._fetchedEvents = this.mapApiEvents(result.events);
 		} catch (err) {
 			if (err instanceof Error && err.name === "AbortError") return;
-			if (this.threadId !== threadId) return;
+			if (controller.signal.aborted || this.threadId !== threadId) return;
 			this._eventsError = err instanceof Error ? err.message : "Failed to load events";
 			this._fetchedEvents = [];
 		} finally {
@@ -3006,7 +3024,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			this._fetchedState = result.state ?? null;
 		} catch (err) {
 			if (err instanceof Error && err.name === "AbortError") return;
-			if (this.threadId !== threadId) return;
+			if (controller.signal.aborted || this.threadId !== threadId) return;
 			this._stateError = err instanceof Error ? err.message : "Failed to load state";
 			this._fetchedState = null;
 		} finally {
@@ -3083,6 +3101,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 					toolCallId: tc.id,
 					arguments: args,
 					result: null,
+					hasResult: false,
 					createdAt: ""
 				};
 				toolCallMap.set(tc.id, item);
@@ -3103,18 +3122,23 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		});
 		else if (msg.role === "tool" && msg.toolCallId) {
 			const tc = toolCallMap.get(msg.toolCallId);
-			if (tc) try {
-				tc.result = this.parseToolCallContent(msg.content);
-			} catch (err) {
-				console.error("[CopilotKit Inspector] Failed to parse tool-call result content", {
-					toolCallId: msg.toolCallId,
-					raw: msg.content,
-					error: err
-				});
-				tc.result = {
-					__parseError: true,
-					__raw: msg.content ?? null
-				};
+			if (tc) {
+				tc.hasResult = true;
+				tc.resultUnreadable = false;
+				try {
+					tc.result = this.parseToolCallContent(msg.content);
+				} catch (err) {
+					console.error("[CopilotKit Inspector] Failed to parse tool-call result content", {
+						toolCallId: msg.toolCallId,
+						raw: msg.content,
+						error: err
+					});
+					tc.resultUnreadable = true;
+					tc.result = {
+						__parseError: true,
+						__raw: msg.content ?? null
+					};
+				}
 			}
 		}
 		return items;
@@ -3870,13 +3894,60 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
           <span>No messages yet</span>
         </div>
       `;
+		const items = this.renderItems;
+		const errors = this.conversationRunErrors(items);
 		return this.cachedPanelTpl("timeline-fallback", [
 			this._conversation,
 			this._expandedTools,
-			this._expandedMessages
+			this._expandedMessages,
+			JSON.stringify(errors),
+			this._expandedTimelineDetails
 		], () => {
-			return lit.html`${this.renderItems.map((item) => this.renderRenderItem(item))}`;
+			const errorsAfter = /* @__PURE__ */ new Map();
+			for (const { after, item } of errors) {
+				const group = errorsAfter.get(after) ?? [];
+				group.push(item);
+				errorsAfter.set(after, group);
+			}
+			const renderErrors = (after) => errorsAfter.get(after)?.map((item) => this.renderTimelineItem(item));
+			return lit.html`
+          ${renderErrors(-1)}
+          ${items.map((item, index) => lit.html`${this.renderRenderItem(item)}${renderErrors(index)}`)}
+        `;
+		});
+	}
+	conversationRunErrors(items) {
+		const positions = /* @__PURE__ */ new Map();
+		items.forEach((item, index) => {
+			positions.set(item.id, index);
+			if (item.type === "tool_call_group") for (const tool of item.items) positions.set(tool.id, index);
 		});
+		const errors = [];
+		let after = -1;
+		let hasAnchor = false;
+		for (const event of this.activeEvents) {
+			const id = (event.type.startsWith("TOOL_CALL") ? [
+				"toolCallId",
+				"tool_call_id",
+				"callId",
+				"id"
+			] : event.type.startsWith("TEXT_MESSAGE") || event.type.startsWith("ACTIVITY") ? [
+				"messageId",
+				"message_id",
+				"id"
+			] : []).map((key) => event.payload[key]).find((value) => typeof value === "string");
+			const position = id == null ? void 0 : positions.get(id);
+			if (position !== void 0) {
+				after = Math.max(after, position);
+				hasAnchor = true;
+			}
+			if (event.type === "RUN_ERROR" || event.type === "ERROR") for (const item of this.timelineItemsFromEvents([event])) errors.push({
+				after,
+				item
+			});
+		}
+		if (!hasAnchor) for (const error of errors) error.after = items.length - 1;
+		return errors;
 	}
 	/**
 	* Memoize the rendered TemplateResult for `slot` keyed by tuple
@@ -3950,32 +4021,40 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		const expanded = this._expandedTools.has(item.id);
 		return lit.html`
       <div class="cpk-td__tool-block">
-        <div
+        <button
+          type="button"
           class="cpk-td__tool-header"
+          aria-expanded=${expanded}
           @click=${() => this.toggleToolExpand(item.id)}
         >
-          <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
             <path
-              d="M1 9C1 9 2 7 5 7C8 7 9 9 9 9M5 1C5 1 7 2.5 7 4.5C7 6.5 5 7 5 7C5 7 3 6.5 3 4.5C3 2.5 5 1 5 1Z"
+              d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94z"
               stroke="currentColor"
-              stroke-width="1.2"
+              stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round"
             />
           </svg>
           <span class="cpk-td__tool-name">${item.toolName}</span>
-          ${item.result || Object.keys(item.arguments).length > 0 ? lit.html`
-                  <span class="cpk-td__tool-status">Complete</span>
-                ` : lit.html`
-                  <span class="cpk-td__tool-status cpk-td__tool-status--pending">Pending</span>
-                `}
+          ${item.resultUnreadable ? lit.html`
+                  <span class="cpk-td__tool-status cpk-td__tool-status--pending"
+                    >Result unreadable</span
+                  >
+                ` : item.hasResult ? lit.html`
+                    <span class="cpk-td__tool-status">Result received</span>
+                  ` : lit.html`
+                    <span class="cpk-td__tool-status cpk-td__tool-status--pending"
+                      >No result recorded</span
+                    >
+                  `}
           <span class="cpk-td__tool-chevron">${expanded ? "▾" : "▸"}</span>
-        </div>
+        </button>
         ${expanded ? lit.html`
               <div class="cpk-td__tool-body">
                 <div class="cpk-td__tool-section-label">Arguments</div>
                 ${renderHighlightedJsonBlock(item.arguments)}
-                ${item.result ? lit.html`
+                ${item.hasResult ? lit.html`
                       <div
                         class="cpk-td__tool-section-label"
                         style="margin-top:8px"
@@ -5055,11 +5134,13 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			150
 		];
 		this._evtColResize = null;
+		this.notificationContext = { development: false };
+		this.notificationFeed = null;
+		this.notificationState = require_notifications.emptyNotificationState();
+		this.notificationDocuments = /* @__PURE__ */ new Map();
+		this.selectedNotificationId = null;
 		this.announcementHtml = null;
-		this.announcementMarkdown = null;
-		this.announcementTimestamp = null;
-		this.announcementPreviewText = null;
-		this.announcementCtaLabel = null;
+		this.announcementId = null;
 		this.announcementLoaded = false;
 		this.announcementPromise = null;
 		this.newsSignalArmed = false;
@@ -5096,6 +5177,10 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		this.launcherHudIntro = false;
 		this.launcherHudIntroStartTimer = null;
 		this.launcherHudIntroEndTimer = null;
+		this.viewedHudElement = null;
+		this.launcherHudTrigger = "user";
+		this.viewedHudParts = /* @__PURE__ */ new Set();
+		this.pendingHudTelemetry = [];
 		this.inspectorDismissedUntil = null;
 		this.lastReportedInspectorVisibility = null;
 		this.inspectorDismissalTimer = null;
@@ -5384,9 +5469,18 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			this.closeLauncherHud();
 			this.activeRoot.querySelector(".console-button")?.focus();
 		};
-		this.handleHudActionClick = (event, row) => {
+		this.handleHudActionClick = (event, row, control) => {
 			event.preventDefault();
 			event.stopPropagation();
+			const trigger = this.launcherHudTrigger;
+			this.queueHudTelemetry(() => control === "toggle" ? require_telemetry.trackHudFeatureToggleClicked({
+				feature: row,
+				trigger
+			}) : require_telemetry.trackHudFeatureClicked({
+				feature: row,
+				control,
+				trigger
+			}));
 			this.hudLandingMenu = row === "threads" ? "threads" : row === "learning" ? "memories" : "home";
 			this.closeLauncherHud();
 			this.openInspector("floating_button");
@@ -5394,24 +5488,47 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		this.handleHudRowClick = (event, row) => {
 			const target = event.target;
 			if (target instanceof Element && target.closest(".cpk-launcher-hud__controls, [data-cpk-hud-action]")) return;
-			this.handleHudActionClick(event, row);
+			this.handleHudActionClick(event, row, "row");
 		};
 		this.handleHudNewsClick = (event) => {
 			event.preventDefault();
 			event.stopPropagation();
+			const banner_id = this.announcementId;
+			if (banner_id) {
+				const trigger = this.launcherHudTrigger;
+				this.queueHudTelemetry(() => require_telemetry.trackHudNotificationClicked({
+					banner_id,
+					notification_id: banner_id,
+					action: "open",
+					trigger
+				}));
+			}
 			this.hudLandingMenu = WHATS_NEW_MENU_KEY;
+			if (this.notificationState.activeId) this.readNotification(this.notificationState.activeId);
 			this.closeLauncherHud();
 			this.openInspector("floating_button");
 		};
 		this.handleHudNewsDismissClick = (event) => {
 			event.preventDefault();
 			event.stopPropagation();
+			const banner_id = this.announcementId;
+			if (banner_id) {
+				const trigger = this.launcherHudTrigger;
+				this.queueHudTelemetry(() => require_telemetry.trackHudNotificationClicked({
+					banner_id,
+					notification_id: banner_id,
+					action: "dismiss",
+					trigger
+				}));
+			}
 			this.clearNewsSignal();
 			this.activeRoot.querySelector(".console-button")?.focus({ preventScroll: true });
 		};
 		this.handleHudDismissDayClick = (event) => {
 			event.preventDefault();
 			event.stopPropagation();
+			const trigger = this.launcherHudTrigger;
+			this.queueHudTelemetry(() => require_telemetry.trackHudHideClicked({ trigger }));
 			this.dismissInspectorFor("day");
 		};
 		this.handleSidebarToggle = () => {
@@ -6062,6 +6179,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 	static {
 		this.properties = {
 			core: { attribute: false },
+			notificationContext: { attribute: false },
 			autoAttachCore: {
 				type: Boolean,
 				attribute: "auto-attach-core"
@@ -6497,6 +6615,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			runtimeLicense = void 0;
 		}
 		this.inspectorMetadataProjection = require_inspector_metadata.projectInspectorMetadata(value, runtimeLicense);
+		this.refreshNotifications();
 	}
 	attachToCore(core) {
 		this.runtimeStatus = core.runtimeConnectionStatus;
@@ -7850,158 +7969,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
         font-weight: 600 !important;
       }
 
-      .announcement-content {
-        color: #1f2230;
-        font-size: 13px;
-        font-family: "Plus Jakarta Sans", system-ui, sans-serif;
-        line-height: 1.55;
-      }
-
-      .announcement-content h1,
-      .announcement-content h2,
-      .announcement-content h3 {
-        color: #010507;
-        font-weight: 700;
-        line-height: 1.3;
-        margin: 0.9rem 0 0.4rem;
-      }
-      .announcement-content > h1:first-child,
-      .announcement-content > h2:first-child,
-      .announcement-content > h3:first-child {
-        margin-top: 0;
-      }
-
-      .announcement-content h1 {
-        font-size: 1.15rem;
-        letter-spacing: -0.01em;
-      }
-      .announcement-content h2 {
-        font-size: 1rem;
-      }
-      .announcement-content h3 {
-        font-size: 0.9rem;
-        text-transform: none;
-      }
-
-      .announcement-content p {
-        margin: 0.45rem 0;
-      }
-
-      .announcement-content strong {
-        color: #010507;
-        font-weight: 700;
-      }
-
-      .announcement-content ul {
-        list-style: disc;
-        padding-left: 1.25rem;
-        margin: 0.45rem 0;
-      }
-
-      .announcement-content ol {
-        list-style: decimal;
-        padding-left: 1.25rem;
-        margin: 0.45rem 0;
-      }
-
-      .announcement-content li + li {
-        margin-top: 0.15rem;
-      }
-
-      .announcement-content a {
-        color: #5558b2;
-        text-decoration: underline;
-      }
-
-      .announcement-content :not(pre) > code {
-        background: #f3f3f7;
-        border: 1px solid #e4e4ec;
-        border-radius: 5px;
-        padding: 1px 5px;
-        font-size: 0.85em;
-        color: #4a3a8a;
-      }
-
-      .announcement-code {
-        position: relative;
-        margin: 0.6rem 0;
-      }
-
-      .announcement-code pre {
-        background: #0f1117;
-        color: #e6e8f2;
-        border-radius: 10px;
-        padding: 10px 12px;
-        overflow-x: auto;
-        font-size: 12px;
-        line-height: 1.5;
-        white-space: pre;
-      }
-
-      .announcement-code pre code::after {
-        content: "";
-        display: inline-block;
-        width: 80px;
-      }
-
-      .announcement-code__copy-shield {
-        position: absolute;
-        top: 4px;
-        right: 4px;
-        padding: 4px 4px 4px 24px;
-        border-top-right-radius: 10px;
-        background: linear-gradient(
-          to right,
-          rgba(15, 17, 23, 0) 0%,
-          rgba(15, 17, 23, 0.95) 40%,
-          #0f1117 100%
-        );
-        pointer-events: none;
-      }
-
-      .announcement-code pre code {
-        background: transparent;
-        border: none;
-        padding: 0;
-        color: inherit;
-        font-size: inherit;
-      }
-
-      .announcement-code pre::-webkit-scrollbar {
-        height: 6px;
-      }
-      .announcement-code pre::-webkit-scrollbar-track {
-        background: transparent;
-      }
-      .announcement-code pre::-webkit-scrollbar-thumb {
-        background: rgba(255, 255, 255, 0.2);
-        border-radius: 4px;
-      }
-
-      .announcement-code__copy {
-        position: relative;
-        pointer-events: auto;
-        padding: 3px 8px;
-        font-family: "Plus Jakarta Sans", system-ui, sans-serif;
-        font-size: 11px;
-        font-weight: 600;
-        color: #e6e8f2;
-        background: #1f222d;
-        border: 1px solid rgba(255, 255, 255, 0.15);
-        border-radius: 6px;
-        cursor: pointer;
-        transition:
-          background 0.12s ease,
-          color 0.12s ease;
-      }
-      .announcement-code__copy:hover {
-        background: #2a2e3c;
-      }
-      .announcement-code__copy[data-copied="true"] {
-        background: #eee6fe;
-        color: #6430ab;
-        border-color: transparent;
-      }
+      ${require_notification_article.notificationArticleStyles}
 
       /* ── What's new ──────────────────────────────────────────────── */
       .whats-new {
@@ -9529,6 +9497,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
+		this.notificationState = require_persistence.loadNotificationState();
 		if (typeof window !== "undefined") {
 			this.accountCtaMotionPaused = document.visibilityState !== "visible";
 			this.threadsExampleOverviewVideoReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
@@ -9643,7 +9612,11 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		if (this.isOpen && this.dockMode === "docked-left") this.setAttribute("data-docked", "true");
 		else this.removeAttribute("data-docked");
 	}
-	updated() {
+	updated(changed) {
+		if (changed.has("notificationContext") || changed.has("core")) {
+			this.ensureAnnouncementLoading();
+			this.refreshNotifications();
+		}
 		const visible = !this.isInspectorDismissed;
 		if (visible !== this.lastReportedInspectorVisibility) {
 			this.lastReportedInspectorVisibility = visible;
@@ -9653,6 +9626,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		this.syncThreadsExampleOverviewVideo();
 		this.maybeTrackInspectorMetadataViews();
 		this.maybeTrackNewsSignalViewed();
+		this.maybeTrackHudViews();
 		this.resolvePillDirection();
 		this.maybeTrackErrorSignalViewed();
 		this.maybeCompleteWhatsNewView();
@@ -9894,6 +9868,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			this.resolveLauncherHudSide();
 			this.launcherHudIntro = true;
 			this.launcherHudOpen = true;
+			this.launcherHudTrigger = "intro";
 			this.refreshLearningSnapshot({ preserve: true });
 			this.requestUpdate();
 			this.launcherHudIntroEndTimer = setTimeout(() => {
@@ -9942,6 +9917,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		}
 		if (this.launcherHudOpen) return;
 		this.launcherHudOpen = true;
+		this.launcherHudTrigger = "user";
 		this.refreshLearningSnapshot({ preserve: true });
 		this.requestUpdate();
 	}
@@ -9953,11 +9929,61 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		}
 		if (!this.launcherHudOpen) return;
 		this.launcherHudOpen = false;
+		this.viewedHudElement = null;
+		this.viewedHudParts.clear();
 		this.requestUpdate();
 	}
+	queueHudTelemetry(send) {
+		if (this.core?.telemetryDisabled) return;
+		if (this.runtimeStatus === _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Connected) send();
+		else if (this.pendingHudTelemetry.length < MAX_PENDING_BANNER_VIEWED) this.pendingHudTelemetry.push(send);
+	}
+	flushPendingHudTelemetry() {
+		if (this.core?.telemetryDisabled) {
+			this.pendingHudTelemetry = [];
+			return;
+		}
+		if (this.runtimeStatus !== _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Connected) return;
+		const queued = this.pendingHudTelemetry;
+		this.pendingHudTelemetry = [];
+		for (const send of queued) send();
+	}
+	maybeTrackHudViews() {
+		const hud = this.activeRoot.querySelector("[data-cpk-launcher-hud]");
+		if (!hud) {
+			this.viewedHudElement = null;
+			this.viewedHudParts.clear();
+			return;
+		}
+		if (document.visibilityState !== "visible") return;
+		if (hud !== this.viewedHudElement) {
+			this.viewedHudElement = hud;
+			this.viewedHudParts.clear();
+		}
+		const once = (key, send) => {
+			if (this.viewedHudParts.has(key)) return;
+			this.viewedHudParts.add(key);
+			this.queueHudTelemetry(send);
+		};
+		const trigger = this.launcherHudTrigger;
+		once("hud", () => require_telemetry.trackHudViewed({ trigger }));
+		if (hud.querySelector("[data-cpk-hud-news]") && this.announcementId) {
+			const banner_id = this.announcementId;
+			once(`notification:${banner_id}`, () => require_telemetry.trackHudNotificationViewed({
+				banner_id,
+				notification_id: banner_id,
+				trigger
+			}));
+		}
+		for (const feature of ["threads", "learning"]) if (hud.querySelector(`[data-cpk-hud-toggle="${feature}"]`)) once(`toggle:${feature}`, () => require_telemetry.trackHudFeatureToggleViewed({
+			feature,
+			trigger
+		}));
+		if (hud.querySelector("[data-cpk-dismiss-inspector=\"day\"]")) once("hide", () => require_telemetry.trackHudHideViewed({ trigger }));
+	}
 	getUnreadAnnouncementTitle() {
 		if (!this.newsSignalArmed || !this.announcementLoaded) return null;
-		const title = this.announcementPreviewText?.trim() || "New in CopilotKit";
+		const title = this.notificationFeed?.notifications.find((notice) => notice.id === this.notificationState.activeId)?.title.trim() || "New in CopilotKit";
 		const titleCharacters = Array.from(title);
 		return titleCharacters.length > HUD_ANNOUNCEMENT_TITLE_LIMIT ? `${titleCharacters.slice(0, HUD_ANNOUNCEMENT_TITLE_LIMIT).join("").trimEnd()}...` : title;
 	}
@@ -9978,7 +10004,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
             class="cpk-launcher-hud__action"
             data-cpk-hud-action
             aria-label=${`Open ${args.label} in Inspector`}
-            @click=${(event) => this.handleHudActionClick(event, args.id)}
+            @click=${(event) => this.handleHudActionClick(event, args.id, "action")}
             @pointerdown=${(event) => event.stopPropagation()}
           >
             <span
@@ -10003,7 +10029,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
             data-cpk-hud-learn-more=${args.id}
             aria-label=${`Learn more about ${args.label}`}
             aria-describedby=${detailId}
-            @click=${(event) => this.handleHudActionClick(event, args.id)}
+            @click=${(event) => this.handleHudActionClick(event, args.id, "learn_more")}
             @pointerdown=${(event) => event.stopPropagation()}
           >
             ${this.renderIcon("CircleHelp")}
@@ -10015,7 +10041,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
             data-enabled=${args.connected ? "true" : "false"}
             aria-label=${args.connected ? `${args.label} is enabled` : `Open ${args.label} in Inspector`}
             ?disabled=${args.connected}
-            @click=${(event) => this.handleHudActionClick(event, args.id)}
+            @click=${(event) => this.handleHudActionClick(event, args.id, "toggle")}
             @pointerdown=${(event) => event.stopPropagation()}
           >
             <span
@@ -10332,6 +10358,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 	}
 	getHomeModel() {
 		const lastRuntimeEvent = this.flattenedEvents[0];
+		const activeNotice = this.notificationFeed?.notifications.find((notice) => notice.id === this.notificationState.activeId);
 		return require_home_briefing.buildHomeModel({
 			intelligenceConnected: Boolean(this._core?.intelligence),
 			threadsAvailable: this.areThreadEndpointsAvailable(),
@@ -10350,25 +10377,23 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			suggestionsOn: this._core?.suggestions === true,
 			audioOn: this._core?.audioFileTranscriptionEnabled === true,
 			websocketUrl: this._core?.intelligence?.wsUrl,
-			announcementPreviewText: this.announcementPreviewText ?? void 0,
-			announcementMarkdown: this.announcementMarkdown ?? void 0,
-			announcementHtml: this.announcementHtml ?? void 0,
+			announcementPreviewText: activeNotice?.title,
+			announcementMarkdown: activeNotice?.body,
+			announcementHtml: activeNotice ? this.notificationDocuments.get(activeNotice.id) : void 0,
 			intelligenceSignupUrl: this.getIntelligenceSignupUrl()
 		});
 	}
 	renderHomeView() {
 		const model = this.getHomeModel();
-		const connected = model.hero.connection === "connected";
 		return lit.html`
       <div
         class="inspector-home"
         data-inspector-home
-        data-inspector-home-state=${connected ? "connected" : "disconnected"}
+        data-inspector-home-state=${model.hero.connection === "connected" ? "connected" : "disconnected"}
       >
         ${this.renderHomeWhatsNewPreview(model.news)}
-        <header class="inspector-home-heading"><div><h1>${connected ? model.project?.projectName ?? "Your agent workspace" : "Welcome to Intelligence"}</h1><p>${connected ? "Inspect conversations and see what your agent is learning." : "Connect your agent. Intelligence learns from experience."}</p></div></header>
-        ${connected ? this.renderHomeSystemHealth(model) : this.renderHomeIntelligenceHud(model)}
-        ${connected ? this.renderHomeIntelligenceHud(model) : this.renderHomeSystemHealth(model)}
+        ${this.renderHomeSystemHealth(model)}
+        ${this.renderHomeIntelligenceHud(model)}
         ${this.renderHomeFeatures(model)}
       </div>
     `;
@@ -10390,7 +10415,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
           data-inspector-whats-new-preview
           aria-label="Open What's New"
           style=${INTERACTIVE_FOCUS_BASE_STYLE}
-          @click=${() => this.handleMenuSelect(WHATS_NEW_MENU_KEY)}
+          @click=${() => this.notificationState.activeId ? this.readNotification(this.notificationState.activeId) : this.handleMenuSelect(WHATS_NEW_MENU_KEY)}
         >
           <span class="inspector-whats-new-preview-copy">
             <span class="inspector-whats-new-preview-title">
@@ -10407,47 +10432,89 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
     `;
 	}
 	renderWhatsNewView() {
-		const state = this.getWhatsNewState();
-		const news = this.getHomeModel().news;
-		const updatedAt = this.announcementTimestamp ? new Date(this.announcementTimestamp) : null;
-		const updatedLabel = updatedAt && !Number.isNaN(updatedAt.getTime()) ? new Intl.DateTimeFormat(void 0, {
-			month: "long",
+		const notices = this.notificationFeed?.notifications.filter((n) => this.notificationState.eligibleIds.includes(n.id)).sort(require_notifications.compareNotifications) ?? [];
+		const selected = notices.find((n) => n.id === this.selectedNotificationId);
+		const formatDate = (date) => new Date(date).toLocaleDateString(void 0, {
+			month: "short",
 			day: "numeric",
 			year: "numeric"
-		}).format(updatedAt) : null;
+		});
 		return lit.html`
       <div
         class="inspector-home inspector-whats-new"
         data-inspector-whats-new
         data-cpk-whats-new
-        data-cpk-whats-new-state=${state}
+        data-cpk-whats-new-state=${this.getWhatsNewState()}
       >
-        <header class="inspector-whats-new-header">
-          <h1 class="inspector-home-title">What's New</h1>
-          ${updatedLabel ? lit.html`
-                <p class="inspector-whats-new-updated">
-                  Updated
-                  <time datetime=${updatedAt?.toISOString()}
-                    >${updatedLabel}</time
-                  >
-                </p>
-              ` : lit.nothing}
-        </header>
         <section class="inspector-home-news" aria-label="CopilotKit updates">
-          ${news.empty || !news.documentHtml ? lit.html`
-                <article class="inspector-whats-new-empty">
-                  <h2 class="inspector-home-card-title">${news.title}</h2>
-                  <p class="inspector-home-card-copy">${news.previewText}</p>
-                </article>
-              ` : lit.html`
+          ${selected ? lit.html`
+                <button
+                  type="button"
+                  class="inspector-whats-new-back"
+                  @click=${() => {
+			this.selectedNotificationId = null;
+			this.requestUpdate();
+		}}
+                >
+                  <span aria-hidden="true"
+                    >${this.renderIcon("ArrowLeft")}</span
+                  >
+                  All updates
+                </button>
                 <article class="inspector-whats-new-document">
+                  <header class="inspector-whats-new-document-header">
+                    <h1>${selected.title}</h1>
+                    <time datetime=${selected.publishedAt}>
+                      ${formatDate(selected.publishedAt)}
+                    </time>
+                  </header>
                   <div
                     class="announcement-content"
                     @click=${this.handleAnnouncementContentClick}
                   >
-                    ${(0, lit_directives_unsafe_html_js.unsafeHTML)(news.documentHtml)}
+                    ${(0, lit_directives_unsafe_html_js.unsafeHTML)(this.notificationDocuments.get(selected.id) ?? "")}
                   </div>
                 </article>
+              ` : lit.html`
+                <header class="inspector-whats-new-header">
+                  <h1 class="inspector-home-title">What's New</h1>
+                </header>
+                ${notices.length ? lit.html`
+                      <ul class="inspector-whats-new-list">
+                        ${notices.map((notice) => {
+			const read = this.notificationState.readIds.includes(notice.id);
+			return lit.html`
+                            <li>
+                              <button
+                                type="button"
+                                class="cpk-notification-row"
+                                data-notification-id=${notice.id}
+                                @click=${() => this.readNotification(notice.id)}
+                              >
+                                <span class="cpk-notification-copy">
+                                  <strong>${notice.title}</strong>
+                                  <span class="cpk-notification-meta">
+                                    <time datetime=${notice.publishedAt}
+                                      >${formatDate(notice.publishedAt)}</time
+                                    >
+                                    ${read ? lit.nothing : lit.html`
+                                            <span class="cpk-notification-unread">Unread</span>
+                                          `}
+                                  </span>
+                                </span>
+                                <span
+                                  class="cpk-notification-chevron"
+                                  aria-hidden="true"
+                                  >${this.renderIcon("ChevronRight")}</span
+                                >
+                              </button>
+                            </li>
+                          `;
+		})}
+                      </ul>
+                    ` : lit.html`<p class="inspector-whats-new-empty" role="status">
+                      ${this.announcementLoaded || !this.notificationContext.development ? "You're all caught up." : "Loading updates…"}
+                    </p>`}
               `}
         </section>
       </div>
@@ -12930,15 +12997,15 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 	}
 	trackWhatsNewClickedOnce(opts) {
 		if (this.runtimeStatus !== _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Connected || this.core?.telemetryDisabled) return;
-		const id = this.announcementTimestamp;
+		const id = this.announcementId;
 		if (!id) return;
 		const key = `${id}:${opts.cta}`;
 		if (this.clickedBannerIds.has(key)) return;
 		this.clickedBannerIds.add(key);
 		require_telemetry.trackWhatsNewClicked({
 			banner_id: id,
-			cta: opts.cta,
-			cta_label: this.announcementCtaLabel ?? void 0
+			notification_id: id,
+			cta: opts.cta
 		});
 	}
 	trackThreadsViewStateOnce(state) {
@@ -15450,11 +15517,9 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		else if (!wasArmed) this.requestUpdate();
 	}
 	clearNewsSignal() {
-		if (!this.newsSignalArmed) return;
-		this.newsSignalArmed = false;
-		if (this.announcementTimestamp) require_persistence.saveAnnouncementReadTimestamp(this.announcementTimestamp);
-		this.retireSignal(NEWS_SIGNAL_ID);
-		this.requestUpdate();
+		if (!this.notificationState.activeId) return;
+		this.notificationState = require_notifications.acknowledgeNotification(this.notificationState, this.notificationState.activeId);
+		this.refreshNotifications();
 	}
 	/**
 	* Requests one beat for a signal, running it now or deferring it.
@@ -15487,7 +15552,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		this.pendingPulseSignal = null;
 		this.pulsingSignal = key;
 		if (isWiringErrorKey(key)) this.errorBeatSpent = true;
-		else if (this.announcementTimestamp && key === NEWS_SIGNAL_ID) require_persistence.saveAnnouncementPulsedTimestamp(this.announcementTimestamp);
+		else if (this.notificationState.activeId && key === NEWS_SIGNAL_ID) require_persistence.saveNotificationPulsedId(this.notificationState.activeId);
 		this.beginGestureTail(key);
 		this.requestUpdate();
 		if (typeof window === "undefined") return;
@@ -15787,14 +15852,14 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 	}
 	maybeTrackNewsSignalViewed() {
 		if (!this.newsSignalArmed || this.pulsingSignal !== NEWS_SIGNAL_ID || this.isOpen || typeof document === "undefined" || document.visibilityState !== "visible") return;
-		const id = this.announcementTimestamp;
+		const id = (this.notificationFeed?.notifications.find((n) => n.id === this.notificationState.activeId))?.id;
 		if (!id || this.viewedNewsSignalIds.has(id)) return;
 		this.viewedNewsSignalIds.add(id);
 		this.pendingNewsSignalViewed = {
 			banner_id: id,
+			notification_id: id,
 			surface: "launcher",
-			presentation: typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? "reduced_motion" : "animated",
-			cta_label: this.announcementCtaLabel ?? void 0
+			presentation: typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? "reduced_motion" : "animated"
 		};
 		this.flushPendingWhatsNewTelemetry();
 	}
@@ -15812,7 +15877,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 	getVisibleBannerSurface() {
 		if (!this.isOpen || this.settingsOpen) return null;
 		if (this.selectedMenu !== WHATS_NEW_MENU_KEY) return null;
-		return this.announcementHtml ? "whats_new" : null;
+		return this.selectedNotificationId && this.announcementHtml ? "whats_new" : null;
 	}
 	/**
 	* The single condition that retires the news signal: What's new has
@@ -15831,14 +15896,13 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 	maybeCompleteWhatsNewView() {
 		if (!this.getVisibleBannerSurface()) return;
 		this.maybeTrackWhatsNewViewed();
-		this.clearNewsSignal();
 	}
 	/**
 	* Records a `whats_new_viewed` impression for whichever surface is
 	* currently visible, once per announcement per surface.
 	*/
 	maybeTrackWhatsNewViewed() {
-		const id = this.announcementTimestamp;
+		const id = this.announcementId;
 		if (!id) return;
 		const surface = this.getVisibleBannerSurface();
 		if (!surface) return;
@@ -15848,12 +15912,13 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		this.viewedBannerSurfaces.add(key);
 		this.pendingBannerViewed.push({
 			banner_id: id,
-			surface,
-			cta_label: this.announcementCtaLabel ?? void 0
+			notification_id: id,
+			surface
 		});
 		this.flushPendingWhatsNewTelemetry();
 	}
 	flushPendingWhatsNewTelemetry() {
+		this.flushPendingHudTelemetry();
 		if (this.pendingBannerViewed.length === 0 && !this.pendingNewsSignalViewed) return;
 		if (this.core?.telemetryDisabled) {
 			this.pendingBannerViewed = [];
@@ -15871,32 +15936,58 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		}
 	}
 	ensureAnnouncementLoading() {
-		if (this.announcementPromise || typeof window === "undefined" || typeof fetch === "undefined") return;
+		if (this.isInspectorDismissed || !this.notificationContext.development || !this.isConnected || this.announcementPromise || typeof window === "undefined" || typeof fetch === "undefined") return;
 		this.announcementPromise = this.fetchAnnouncement();
 	}
 	async fetchAnnouncement() {
 		try {
-			const response = await fetch(ANNOUNCEMENT_URL, { cache: "no-cache" });
-			if (!response.ok) throw new Error(`Failed to load announcement (${response.status})`);
-			const data = await response.json();
-			const timestamp = typeof data?.timestamp === "string" ? data.timestamp : null;
-			const previewText = typeof data?.previewText === "string" ? data.previewText : null;
-			const markdown = typeof data?.announcement === "string" ? data.announcement : null;
-			const ctaLabel = typeof data?.cta_label === "string" ? data.cta_label : null;
-			if (!timestamp || !markdown) throw new Error("Malformed announcement payload");
-			this.announcementTimestamp = timestamp;
-			this.announcementPreviewText = previewText ?? "";
-			this.announcementMarkdown = markdown;
-			this.announcementCtaLabel = ctaLabel;
-			this.announcementHtml = await this.convertMarkdownToHtml(markdown);
-			this.announcementLoaded = true;
-			if (this.announcementHtml && require_persistence.loadAnnouncementReadTimestamp() !== timestamp) this.armNewsSignal({ pulse: require_persistence.loadAnnouncementPulsedTimestamp() !== timestamp });
-			this.requestUpdate();
-		} catch (error) {
-			console.warn("[CopilotKit Inspector] Failed to load announcement", error);
-			this.announcementLoaded = true;
-			this.requestUpdate();
+			const feed = await require_notification_loader.loadNotificationFeed(this.notificationContext);
+			if (feed) {
+				const documents = await Promise.all(feed.notifications.map(async (notice) => [notice.id, await this.convertMarkdownToHtml(notice.body) ?? ""]));
+				this.notificationDocuments = new Map(documents);
+				this.notificationFeed = feed;
+			}
+		} catch {}
+		this.announcementLoaded = true;
+		this.refreshNotifications();
+		this.requestUpdate();
+	}
+	/** Resolve only confirmed runtime metadata; missing fields stay unknown. */
+	getNotificationContext() {
+		const base = this.notificationContext;
+		const core = this.core;
+		if (!core || this.runtimeStatus !== _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Connected) return base;
+		const mode = core.runtimeMode;
+		const entitlement = core.runtimeEntitlements?.status === "ready" ? core.runtimeEntitlements.entitlement : void 0;
+		return {
+			...base,
+			intelligence: mode === "intelligence" ? "enabled" : mode === "sse" ? "disabled" : void 0,
+			plan: this.inspectorMetadataProjection.plan?.code ?? entitlement?.planCode,
+			deployment: entitlement?.source === "managedOrgSubscription" ? "managed" : entitlement ? "self-hosted" : void 0
+		};
+	}
+	refreshNotifications() {
+		if (!this.notificationFeed) return;
+		this.notificationState = require_persistence.migrateAnnouncementReadState(this.notificationState, this.notificationFeed);
+		const previousActiveId = this.notificationState.activeId;
+		this.notificationState = require_notifications.reconcileNotifications(this.notificationState, this.notificationFeed, this.getNotificationContext());
+		require_persistence.saveNotificationState(this.notificationState);
+		if (!this.notificationState.eligibleIds.includes(this.selectedNotificationId ?? "")) this.selectedNotificationId = null;
+		const notice = this.notificationFeed.notifications.find((n) => this.notificationState.eligibleIds.includes(n.id) && n.id === (this.selectedNotificationId ?? this.notificationState.activeId)) ?? this.notificationFeed.notifications.filter((n) => this.notificationState.eligibleIds.includes(n.id)).sort(require_notifications.compareNotifications)[0];
+		this.announcementId = notice?.id ?? null;
+		this.announcementHtml = notice ? this.notificationDocuments.get(notice.id) ?? null : null;
+		if (this.notificationState.activeId && this.notificationState.eligibleIds.includes(this.notificationState.activeId)) this.armNewsSignal({ pulse: (previousActiveId !== this.notificationState.activeId || !this.newsSignalArmed) && !require_persistence.hasNotificationPulsed(this.notificationState.activeId, this.notificationFeed.notifications.find((n) => n.id === this.notificationState.activeId).publishedAt) });
+		else {
+			this.newsSignalArmed = false;
+			this.retireSignal(NEWS_SIGNAL_ID);
 		}
+		this.requestUpdate();
+	}
+	readNotification(id) {
+		this.selectedNotificationId = id;
+		this.notificationState = require_notifications.acknowledgeNotification(this.notificationState, id);
+		this.refreshNotifications();
+		this.handleMenuSelect(WHATS_NEW_MENU_KEY);
 	}
 	async convertMarkdownToHtml(markdown) {
 		const renderer = new marked.marked.Renderer();
@@ -15971,8 +16062,9 @@ function defineWebInspector(registry = globalThis.customElements) {
 * auto-attachment first prevents `connectedCallback` from briefly selecting a
 * different global core.
 */
-function configureWebInspectorElement(inspector, core) {
+function configureWebInspectorElement(inspector, core, notificationContext = { development: false }) {
 	inspector.autoAttachCore = false;
+	inspector.notificationContext = notificationContext;
 	inspector.core = core;
 	return inspector;
 }