@copilotkit/web-inspector 1.73.3 → 1.75.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 = {
@@ -5132,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;
@@ -5173,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;
@@ -5461,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");
@@ -5471,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 = () => {
@@ -6139,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"
@@ -6574,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;
@@ -7927,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 {
@@ -9606,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;
@@ -9720,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;
@@ -9730,6 +9626,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		this.syncThreadsExampleOverviewVideo();
 		this.maybeTrackInspectorMetadataViews();
 		this.maybeTrackNewsSignalViewed();
+		this.maybeTrackHudViews();
 		this.resolvePillDirection();
 		this.maybeTrackErrorSignalViewed();
 		this.maybeCompleteWhatsNewView();
@@ -9971,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(() => {
@@ -10019,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();
 	}
@@ -10030,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;
 	}
@@ -10055,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
@@ -10080,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")}
@@ -10092,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
@@ -10409,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(),
@@ -10427,9 +10377,9 @@ 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()
 		});
 	}
@@ -10465,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">
@@ -10482,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>
@@ -13005,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) {
@@ -15525,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.
@@ -15562,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;
@@ -15862,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();
 	}
@@ -15887,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
@@ -15906,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;
@@ -15923,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 = [];
@@ -15946,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();
@@ -16046,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;
 }