@copilotkit/web-inspector 1.73.2 → 1.74.0

package/dist/index.mjs

@@ -1,9 +1,12 @@
+import { acknowledgeNotification, compareNotifications, emptyNotificationState, reconcileNotifications } from "./lib/notifications.mjs";
+import { loadNotificationFeed } from "./lib/notification-loader.mjs";
+import { INSPECTOR_DISMISSAL_MAX_DURATION_MS, clearLegacyAnnouncementReadState, hasNotificationPulsed, isValidAnchor, isValidDockMode, isValidPosition, isValidSize, loadInspectorDismissedUntil, loadInspectorState, loadNotificationState, migrateAnnouncementReadState, saveInspectorDismissedUntil, saveInspectorState, saveNotificationPulsedId, saveNotificationState } from "./lib/persistence.mjs";
 import generated_default from "./styles/generated.mjs";
+import { notificationArticleStyles } from "./styles/notification-article.mjs";
 import inspector_logo_default from "./assets/inspector-logo.mjs";
 import inspector_logo_kite_default from "./assets/inspector-logo-kite.mjs";
 import { deriveLearningViewState } from "./components/learning-view.mjs";
 import { applyAnchorPosition, centerContext, clampSize, constrainToViewport, keepPositionWithinViewport, updateAnchorFromPosition, updateSizeFromElement } from "./lib/context-helpers.mjs";
-import { INSPECTOR_DISMISSAL_MAX_DURATION_MS, clearLegacyAnnouncementReadState, isValidAnchor, isValidDockMode, isValidPosition, isValidSize, loadAnnouncementPulsedTimestamp, loadAnnouncementReadTimestamp, loadInspectorDismissedUntil, loadInspectorState, saveAnnouncementPulsedTimestamp, saveAnnouncementReadTimestamp, saveInspectorDismissedUntil, saveInspectorState } from "./lib/persistence.mjs";
 import { clearLearningSetupMarker, learningSetupMarkerMatches, readLearningSetupMarker, subscribeToLearningSetupMarker, writeLearningSetupMarker } from "./lib/learning-setup.mjs";
 import { InspectorLearningUnsupportedError, fetchInspectorLearning } from "./lib/inspector-learning.mjs";
 import { buildPopOutFeatures, ensureBrandFont, openPopOutWindow } from "./lib/pop-out.mjs";
@@ -11,7 +14,7 @@ import { projectInspectorMetadata } from "./lib/inspector-metadata.mjs";
 import { buildHomeModel, runtimeConnectionNeedsAttention } from "./lib/home-briefing.mjs";
 import { INSPECTOR_GROUPS, INSPECTOR_NAV_SECTIONS, getGroupForMenu, isInspectorMenuKey, shouldUseIconRail } from "./lib/inspector-nav.mjs";
 import { selectVisibleRealThreadId } from "./lib/thread-selection.mjs";
-import { TELEMETRY_DOCS_URL, ensureTelemetryDistinctId, getRuntimeUrlType, getTelemetryDistinctIdForUrl, learningCountBucket, learningDurationBucket, maybeShowDisclosure, trackErrorSignalViewed, trackHomeCtaClicked, trackHomeFeaturePromptClicked, trackHomePromptCopied, trackHomeStoryBeatSelected, trackHomeViewed, trackInspectorOpened, trackLearningEvidenceOpened, trackLearningPageChanged, trackLearningPaneViewed, trackLearningSetupPromptClicked, trackLearningSkillToggled, trackLearningSnapshotLoaded, trackLearningWebAppOpened, trackMemoriesTabClicked, trackMetadataActionClicked, trackMetadataModuleViewed, trackTalkToEngineerClicked, trackThreadsEmptyEnabledViewed, trackThreadsEnabledViewed, trackThreadsExampleSelected, trackThreadsExampleTourCompleted, trackThreadsExampleTourDismissed, trackThreadsExampleTourReopened, trackThreadsExampleTourStarted, trackThreadsExampleTourStepViewed, trackThreadsExampleViewed, trackThreadsIntelligenceSignupClicked, trackThreadsLockedViewed, trackThreadsTabClicked, trackThreadsTalkToEngineerClicked, trackThreadsTryFromHereClicked, trackWhatsNewClicked, trackWhatsNewSignalViewed, trackWhatsNewViewed } from "./lib/telemetry.mjs";
+import { TELEMETRY_DOCS_URL, ensureTelemetryDistinctId, getRuntimeUrlType, getTelemetryDistinctIdForUrl, learningCountBucket, learningDurationBucket, maybeShowDisclosure, trackErrorSignalViewed, trackHomeCtaClicked, trackHomeFeaturePromptClicked, trackHomePromptCopied, trackHomeStoryBeatSelected, trackHomeViewed, trackHudFeatureClicked, trackHudFeatureToggleClicked, trackHudFeatureToggleViewed, trackHudHideClicked, trackHudHideViewed, trackHudNotificationClicked, trackHudNotificationViewed, trackHudViewed, trackInspectorOpened, trackLearningEvidenceOpened, trackLearningPageChanged, trackLearningPaneViewed, trackLearningSetupPromptClicked, trackLearningSkillToggled, trackLearningSnapshotLoaded, trackLearningWebAppOpened, trackMemoriesTabClicked, trackMetadataActionClicked, trackMetadataModuleViewed, trackTalkToEngineerClicked, trackThreadsEmptyEnabledViewed, trackThreadsEnabledViewed, trackThreadsExampleSelected, trackThreadsExampleTourCompleted, trackThreadsExampleTourDismissed, trackThreadsExampleTourReopened, trackThreadsExampleTourStarted, trackThreadsExampleTourStepViewed, trackThreadsExampleViewed, trackThreadsIntelligenceSignupClicked, trackThreadsLockedViewed, trackThreadsTabClicked, trackThreadsTalkToEngineerClicked, trackThreadsTryFromHereClicked, trackWhatsNewClicked, trackWhatsNewSignalViewed, trackWhatsNewViewed } from "./lib/telemetry.mjs";
 import { createFeatureOnboardingPrompt, createOnboardingPrompt, createOnboardingRunId } from "./lib/onboarding-prompt.mjs";
 import { LitElement, css, html, nothing, render, unsafeCSS } from "lit";
 import { marked } from "marked";
@@ -264,7 +267,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 = {
@@ -1263,6 +1265,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();
@@ -1355,6 +1358,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 },
@@ -1431,7 +1435,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       </div>`;
 	}
 	renderTabContent(id) {
-		if (id === "timeline") return html`${this._showEventTimeline ? 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 html`${this._messageRefreshError ? html`<div class="cpk-td__status cpk-td__status--error" role="status">${this._messageRefreshError}</div>` : nothing}${this._showEventTimeline ? 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();
 	}
@@ -1984,10 +1988,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;
     }
@@ -2824,7 +2837,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;
@@ -2892,6 +2905,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;
@@ -2910,7 +2924,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;
 		}
 	}
@@ -2935,19 +2949,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) {
@@ -2974,7 +2992,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 {
@@ -3005,7 +3023,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 {
@@ -3082,6 +3100,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 					toolCallId: tc.id,
 					arguments: args,
 					result: null,
+					hasResult: false,
 					createdAt: ""
 				};
 				toolCallMap.set(tc.id, item);
@@ -3102,18 +3121,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;
@@ -3869,13 +3893,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 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 html`
+          ${renderErrors(-1)}
+          ${items.map((item, index) => 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
@@ -3949,32 +4020,40 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		const expanded = this._expandedTools.has(item.id);
 		return 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 ? html`
-                  <span class="cpk-td__tool-status">Complete</span>
-                ` : html`
-                  <span class="cpk-td__tool-status cpk-td__tool-status--pending">Pending</span>
-                `}
+          ${item.resultUnreadable ? html`
+                  <span class="cpk-td__tool-status cpk-td__tool-status--pending"
+                    >Result unreadable</span
+                  >
+                ` : item.hasResult ? html`
+                    <span class="cpk-td__tool-status">Result received</span>
+                  ` : 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 ? html`
               <div class="cpk-td__tool-body">
                 <div class="cpk-td__tool-section-label">Arguments</div>
                 ${renderHighlightedJsonBlock(item.arguments)}
-                ${item.result ? html`
+                ${item.hasResult ? html`
                       <div
                         class="cpk-td__tool-section-label"
                         style="margin-top:8px"
@@ -5054,11 +5133,13 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			150
 		];
 		this._evtColResize = null;
+		this.notificationContext = { development: false };
+		this.notificationFeed = null;
+		this.notificationState = 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;
@@ -5095,6 +5176,10 @@ var WebInspectorElement = class WebInspectorElement extends 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;
@@ -5383,9 +5468,18 @@ var WebInspectorElement = class WebInspectorElement extends 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" ? trackHudFeatureToggleClicked({
+				feature: row,
+				trigger
+			}) : trackHudFeatureClicked({
+				feature: row,
+				control,
+				trigger
+			}));
 			this.hudLandingMenu = row === "threads" ? "threads" : row === "learning" ? "memories" : "home";
 			this.closeLauncherHud();
 			this.openInspector("floating_button");
@@ -5393,24 +5487,47 @@ var WebInspectorElement = class WebInspectorElement extends 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(() => 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(() => 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(() => trackHudHideClicked({ trigger }));
 			this.dismissInspectorFor("day");
 		};
 		this.handleSidebarToggle = () => {
@@ -6061,6 +6178,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 	static {
 		this.properties = {
 			core: { attribute: false },
+			notificationContext: { attribute: false },
 			autoAttachCore: {
 				type: Boolean,
 				attribute: "auto-attach-core"
@@ -6496,6 +6614,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			runtimeLicense = void 0;
 		}
 		this.inspectorMetadataProjection = projectInspectorMetadata(value, runtimeLicense);
+		this.refreshNotifications();
 	}
 	attachToCore(core) {
 		this.runtimeStatus = core.runtimeConnectionStatus;
@@ -7849,158 +7968,7 @@ var WebInspectorElement = class WebInspectorElement extends 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;
-      }
+      ${notificationArticleStyles}
 
       /* ── What's new ──────────────────────────────────────────────── */
       .whats-new {
@@ -9528,6 +9496,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
+		this.notificationState = loadNotificationState();
 		if (typeof window !== "undefined") {
 			this.accountCtaMotionPaused = document.visibilityState !== "visible";
 			this.threadsExampleOverviewVideoReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
@@ -9642,7 +9611,11 @@ var WebInspectorElement = class WebInspectorElement extends 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;
@@ -9652,6 +9625,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.syncThreadsExampleOverviewVideo();
 		this.maybeTrackInspectorMetadataViews();
 		this.maybeTrackNewsSignalViewed();
+		this.maybeTrackHudViews();
 		this.resolvePillDirection();
 		this.maybeTrackErrorSignalViewed();
 		this.maybeCompleteWhatsNewView();
@@ -9893,6 +9867,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			this.resolveLauncherHudSide();
 			this.launcherHudIntro = true;
 			this.launcherHudOpen = true;
+			this.launcherHudTrigger = "intro";
 			this.refreshLearningSnapshot({ preserve: true });
 			this.requestUpdate();
 			this.launcherHudIntroEndTimer = setTimeout(() => {
@@ -9941,6 +9916,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		}
 		if (this.launcherHudOpen) return;
 		this.launcherHudOpen = true;
+		this.launcherHudTrigger = "user";
 		this.refreshLearningSnapshot({ preserve: true });
 		this.requestUpdate();
 	}
@@ -9952,11 +9928,61 @@ var WebInspectorElement = class WebInspectorElement extends 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 === 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 !== 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", () => trackHudViewed({ trigger }));
+		if (hud.querySelector("[data-cpk-hud-news]") && this.announcementId) {
+			const banner_id = this.announcementId;
+			once(`notification:${banner_id}`, () => 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}`, () => trackHudFeatureToggleViewed({
+			feature,
+			trigger
+		}));
+		if (hud.querySelector("[data-cpk-dismiss-inspector=\"day\"]")) once("hide", () => 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;
 	}
@@ -9977,7 +10003,7 @@ var WebInspectorElement = class WebInspectorElement extends 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
@@ -10002,7 +10028,7 @@ var WebInspectorElement = class WebInspectorElement extends 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")}
@@ -10014,7 +10040,7 @@ var WebInspectorElement = class WebInspectorElement extends 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
@@ -10331,6 +10357,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 	}
 	getHomeModel() {
 		const lastRuntimeEvent = this.flattenedEvents[0];
+		const activeNotice = this.notificationFeed?.notifications.find((notice) => notice.id === this.notificationState.activeId);
 		return buildHomeModel({
 			intelligenceConnected: Boolean(this._core?.intelligence),
 			threadsAvailable: this.areThreadEndpointsAvailable(),
@@ -10349,25 +10376,23 @@ var WebInspectorElement = class WebInspectorElement extends 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 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>
     `;
@@ -10389,7 +10414,7 @@ var WebInspectorElement = class WebInspectorElement extends 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">
@@ -10406,47 +10431,89 @@ var WebInspectorElement = class WebInspectorElement extends 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(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 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 ? html`
-                <p class="inspector-whats-new-updated">
-                  Updated
-                  <time datetime=${updatedAt?.toISOString()}
-                    >${updatedLabel}</time
-                  >
-                </p>
-              ` : nothing}
-        </header>
         <section class="inspector-home-news" aria-label="CopilotKit updates">
-          ${news.empty || !news.documentHtml ? 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>
-              ` : html`
+          ${selected ? 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}
                   >
-                    ${unsafeHTML(news.documentHtml)}
+                    ${unsafeHTML(this.notificationDocuments.get(selected.id) ?? "")}
                   </div>
                 </article>
+              ` : html`
+                <header class="inspector-whats-new-header">
+                  <h1 class="inspector-home-title">What's New</h1>
+                </header>
+                ${notices.length ? html`
+                      <ul class="inspector-whats-new-list">
+                        ${notices.map((notice) => {
+			const read = this.notificationState.readIds.includes(notice.id);
+			return 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 ? nothing : 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>
+                    ` : html`<p class="inspector-whats-new-empty" role="status">
+                      ${this.announcementLoaded || !this.notificationContext.development ? "You're all caught up." : "Loading updates…"}
+                    </p>`}
               `}
         </section>
       </div>
@@ -12929,15 +12996,15 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 	}
 	trackWhatsNewClickedOnce(opts) {
 		if (this.runtimeStatus !== 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);
 		trackWhatsNewClicked({
 			banner_id: id,
-			cta: opts.cta,
-			cta_label: this.announcementCtaLabel ?? void 0
+			notification_id: id,
+			cta: opts.cta
 		});
 	}
 	trackThreadsViewStateOnce(state) {
@@ -15449,11 +15516,9 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		else if (!wasArmed) this.requestUpdate();
 	}
 	clearNewsSignal() {
-		if (!this.newsSignalArmed) return;
-		this.newsSignalArmed = false;
-		if (this.announcementTimestamp) saveAnnouncementReadTimestamp(this.announcementTimestamp);
-		this.retireSignal(NEWS_SIGNAL_ID);
-		this.requestUpdate();
+		if (!this.notificationState.activeId) return;
+		this.notificationState = acknowledgeNotification(this.notificationState, this.notificationState.activeId);
+		this.refreshNotifications();
 	}
 	/**
 	* Requests one beat for a signal, running it now or deferring it.
@@ -15486,7 +15551,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.pendingPulseSignal = null;
 		this.pulsingSignal = key;
 		if (isWiringErrorKey(key)) this.errorBeatSpent = true;
-		else if (this.announcementTimestamp && key === NEWS_SIGNAL_ID) saveAnnouncementPulsedTimestamp(this.announcementTimestamp);
+		else if (this.notificationState.activeId && key === NEWS_SIGNAL_ID) saveNotificationPulsedId(this.notificationState.activeId);
 		this.beginGestureTail(key);
 		this.requestUpdate();
 		if (typeof window === "undefined") return;
@@ -15786,14 +15851,14 @@ var WebInspectorElement = class WebInspectorElement extends 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();
 	}
@@ -15811,7 +15876,7 @@ var WebInspectorElement = class WebInspectorElement extends 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
@@ -15830,14 +15895,13 @@ var WebInspectorElement = class WebInspectorElement extends 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;
@@ -15847,12 +15911,13 @@ var WebInspectorElement = class WebInspectorElement extends 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 = [];
@@ -15870,32 +15935,58 @@ var WebInspectorElement = class WebInspectorElement extends 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 && loadAnnouncementReadTimestamp() !== timestamp) this.armNewsSignal({ pulse: loadAnnouncementPulsedTimestamp() !== timestamp });
-			this.requestUpdate();
-		} catch (error) {
-			console.warn("[CopilotKit Inspector] Failed to load announcement", error);
-			this.announcementLoaded = true;
-			this.requestUpdate();
+			const feed = await 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 !== 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 = migrateAnnouncementReadState(this.notificationState, this.notificationFeed);
+		const previousActiveId = this.notificationState.activeId;
+		this.notificationState = reconcileNotifications(this.notificationState, this.notificationFeed, this.getNotificationContext());
+		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(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) && !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 = acknowledgeNotification(this.notificationState, id);
+		this.refreshNotifications();
+		this.handleMenuSelect(WHATS_NEW_MENU_KEY);
 	}
 	async convertMarkdownToHtml(markdown) {
 		const renderer = new marked.Renderer();
@@ -15970,8 +16061,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;
 }