@copilotkit/web-inspector 1.73.3 → 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 = {
@@ -5131,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;
@@ -5172,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;
@@ -5460,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");
@@ -5470,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 = () => {
@@ -6138,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"
@@ -6573,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;
@@ -7926,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 {
@@ -9605,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;
@@ -9719,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;
@@ -9729,6 +9625,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.syncThreadsExampleOverviewVideo();
 		this.maybeTrackInspectorMetadataViews();
 		this.maybeTrackNewsSignalViewed();
+		this.maybeTrackHudViews();
 		this.resolvePillDirection();
 		this.maybeTrackErrorSignalViewed();
 		this.maybeCompleteWhatsNewView();
@@ -9970,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(() => {
@@ -10018,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();
 	}
@@ -10029,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;
 	}
@@ -10054,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
@@ -10079,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")}
@@ -10091,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
@@ -10408,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(),
@@ -10426,9 +10376,9 @@ 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()
 		});
 	}
@@ -10464,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">
@@ -10481,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>
@@ -13004,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) {
@@ -15524,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.
@@ -15561,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;
@@ -15861,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();
 	}
@@ -15886,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
@@ -15905,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;
@@ -15922,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 = [];
@@ -15945,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();
@@ -16045,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;
 }