@copilotkit/web-inspector 1.77.0 → 1.77.2

package/dist/index.cjs

@@ -1,6 +1,9 @@
 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_hud_config = require('./lib/hud-config.cjs');
+const require_hud_loader = require('./lib/hud-loader.cjs');
+const require_hud_defaults = require('./lib/hud-defaults.cjs');
 const require_persistence = require('./lib/persistence.cjs');
 const require_generated = require('./styles/generated.cjs');
 const require_notification_article = require('./styles/notification-article.cjs');
@@ -121,9 +124,6 @@ const EVENT_ERROR_GUIDANCE = {
 const PILL_SUBLINE_LABEL = "Open Inspector for details";
 const HUD_INSPECTOR_LABEL = "CopilotKit Inspector";
 const HUD_ANNOUNCEMENT_TITLE_LIMIT = 80;
-const HUD_THREADS_LABEL = "Rich Threads";
-const HUD_LEARNING_LABEL = "Automatic Learning";
-const HUD_LEARN_MORE_LABEL = "Click to learn more";
 const INSPECTOR_DISMISSAL_MS = {
 	day: 1440 * 60 * 1e3,
 	week: 10080 * 60 * 1e3,
@@ -834,7 +834,86 @@ function coerceJsonValue(value) {
 		return value;
 	}
 }
+let inspectorJsonRenderer = null;
+let inspectorJsonSlotCount = 0;
+const JSON_BLOCK_TAG = "cpk-json-block";
+/**
+* Replaces the inspector's built-in JSON blocks (tool arguments and results,
+* state, events, and context) with a host renderer. Pass `null` to restore the
+* built-in blocks. Set it before the inspector renders: a block that is
+* already on screen changes at the inspector's next render.
+*
+* @example
+* ```ts
+* setInspectorJsonRenderer((container, value) => {
+*   const root = createRoot(container);
+*   root.render(<JsonView value={value} />);
+*   return () => root.unmount();
+* });
+* ```
+*/
+function setInspectorJsonRenderer(renderer) {
+	inspectorJsonRenderer = renderer;
+}
+/**
+* Hosts one value drawn by the host renderer. Inside a shadow root, the
+* container lives in the shadow host's light DOM and shows here through a
+* named slot, so the host page's own styles apply to what the renderer draws.
+*/
+var CpkJsonBlock = class extends (globalThis.HTMLElement ?? class {}) {
+	#value = void 0;
+	#hasValue = false;
+	#cleanup;
+	#container;
+	get value() {
+		return this.#value;
+	}
+	set value(next) {
+		if (this.#hasValue && Object.is(next, this.#value)) return;
+		this.#value = next;
+		this.#hasValue = true;
+		if (this.isConnected) this.#render();
+	}
+	connectedCallback() {
+		this.style.display = "block";
+		this.#render();
+	}
+	disconnectedCallback() {
+		this.#teardown();
+	}
+	#render() {
+		this.#teardown();
+		const renderer = inspectorJsonRenderer;
+		if (!renderer) return;
+		const root = this.getRootNode();
+		const container = this.ownerDocument.createElement("div");
+		if (root.nodeType === Node.DOCUMENT_FRAGMENT_NODE && "host" in root) {
+			inspectorJsonSlotCount += 1;
+			const name = `cpk-json-${inspectorJsonSlotCount}`;
+			const slot = this.ownerDocument.createElement("slot");
+			slot.name = name;
+			this.replaceChildren(slot);
+			container.slot = name;
+			root.host.append(container);
+		} else this.replaceChildren(container);
+		this.#container = container;
+		const cleanup = renderer(container, this.#value);
+		this.#cleanup = typeof cleanup === "function" ? cleanup : void 0;
+	}
+	#teardown() {
+		const cleanup = this.#cleanup;
+		this.#cleanup = void 0;
+		cleanup?.();
+		this.#container?.remove();
+		this.#container = void 0;
+		this.replaceChildren();
+	}
+};
 function renderHighlightedJsonBlock(value, options = {}) {
+	if (inspectorJsonRenderer) return lit.html`<cpk-json-block
+      .value=${value}
+      style=${options.maxHeight ? `overflow:auto;max-height:${options.maxHeight}` : lit.nothing}
+    ></cpk-json-block>`;
 	const parsed = coerceJsonValue(value);
 	return lit.html`<pre class="cpk-json-block" style=${(options.maxHeight ? `max-height:${options.maxHeight}` : void 0) || lit.nothing}>
 ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
@@ -5225,6 +5304,9 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		this.announcementId = null;
 		this.announcementLoaded = false;
 		this.announcementPromise = null;
+		this.hudFeed = null;
+		this.hudFeedPromise = null;
+		this.hudContent = require_hud_defaults.HUD_DEFAULT_CONTENT;
 		this.newsSignalArmed = false;
 		this.pulsingSignal = null;
 		this.pendingPulseSignal = null;
@@ -5567,7 +5649,8 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 				control,
 				trigger
 			}));
-			this.hudLandingMenu = row === "threads" ? "threads" : row === "learning" ? "memories" : "home";
+			const destination = this.hudContent[row].destination;
+			this.hudLandingMenu = require_inspector_nav.isInspectorMenuKey(destination) && this.menuItems.some((item) => item.key === destination) ? destination : row === "threads" ? "threads" : "memories";
 			this.closeLauncherHud();
 			this.openInspector("floating_button");
 		};
@@ -8890,6 +8973,8 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 
       .cpk-launcher-hud__label {
         min-width: 0;
+        /* Remote copy can be one long word; wrap it inside the row. */
+        overflow-wrap: anywhere;
       }
 
       .cpk-launcher-hud__feature-icon {
@@ -9692,7 +9777,8 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
           <div data-inspector-portal-anchor></div>
         ` : this.renderButton();
 	}
-	willUpdate() {
+	willUpdate(changed) {
+		if (changed.has("notificationContext")) this.refreshHudContent();
 		this.evaluateErrorSignals();
 		this.reconcileSelectedMenuVisibility();
 		if (this.isOpen && this.dockMode === "docked-left") this.setAttribute("data-docked", "true");
@@ -10077,6 +10163,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 	renderHudRow(args) {
 		if (args.connected) return lit.nothing;
 		const detailId = `cpk-hud-detail-${args.id}`;
+		const { label, description } = this.hudContent[args.id];
 		return lit.html`
       <li
         class="cpk-launcher-hud__row"
@@ -10090,7 +10177,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
             type="button"
             class="cpk-launcher-hud__action"
             data-cpk-hud-action
-            aria-label=${`Open ${args.label} in Inspector`}
+            aria-label=${`Open ${label} in Inspector`}
             @click=${(event) => this.handleHudActionClick(event, args.id, "action")}
             @pointerdown=${(event) => event.stopPropagation()}
           >
@@ -10100,13 +10187,13 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
               aria-hidden="true"
               >${this.renderIcon(args.icon)}</span
             >
-            <span class="cpk-launcher-hud__label">${args.label}</span>
+            <span class="cpk-launcher-hud__label">${label}</span>
           </button>
           <span
             class="cpk-launcher-hud__tooltip"
             id=${detailId}
             role="tooltip"
-            >${HUD_LEARN_MORE_LABEL}</span
+            >${description}</span
           >
         </span>
         <span class="cpk-launcher-hud__controls">
@@ -10114,7 +10201,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
             type="button"
             class="cpk-launcher-hud__learn-more"
             data-cpk-hud-learn-more=${args.id}
-            aria-label=${`Learn more about ${args.label}`}
+            aria-label=${`Learn more about ${label}`}
             aria-describedby=${detailId}
             @click=${(event) => this.handleHudActionClick(event, args.id, "learn_more")}
             @pointerdown=${(event) => event.stopPropagation()}
@@ -10126,7 +10213,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
             class="cpk-launcher-hud__toggle"
             data-cpk-hud-toggle=${args.id}
             data-enabled=${args.connected ? "true" : "false"}
-            aria-label=${args.connected ? `${args.label} is enabled` : `Open ${args.label} in Inspector`}
+            aria-label=${args.connected ? `${label} is enabled` : `Open ${label} in Inspector`}
             ?disabled=${args.connected}
             @click=${(event) => this.handleHudActionClick(event, args.id, "toggle")}
             @pointerdown=${(event) => event.stopPropagation()}
@@ -10212,14 +10299,12 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
                   >
                     ${this.renderHudRow({
 			id: "threads",
-			label: HUD_THREADS_LABEL,
 			icon: "MessageSquare",
 			connected: threadsOn,
 			introIndex: featureBlockIntroIndex + 1
 		})}
                     ${this.renderHudRow({
 			id: "learning",
-			label: HUD_LEARNING_LABEL,
 			icon: "Brain",
 			connected: learningOn,
 			introIndex: featureBlockIntroIndex + (threadsOn ? 1 : 2)
@@ -16056,9 +16141,23 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			require_telemetry.trackWhatsNewSignalViewed(props);
 		}
 	}
+	/** Start the development-only remote feeds; neither blocks rendering. */
 	ensureAnnouncementLoading() {
-		if (this.isInspectorDismissed || !this.notificationContext.development || !this.isConnected || this.announcementPromise || typeof window === "undefined" || typeof fetch === "undefined") return;
-		this.announcementPromise = this.fetchAnnouncement();
+		if (this.isInspectorDismissed || !this.notificationContext.development || !this.isConnected || typeof window === "undefined" || typeof fetch === "undefined") return;
+		this.announcementPromise ??= this.fetchAnnouncement();
+		this.hudFeedPromise ??= this.fetchHudFeed();
+	}
+	async fetchHudFeed() {
+		this.hudFeed = await require_hud_loader.loadHudFeed();
+		this.refreshHudContent();
+		this.requestUpdate();
+	}
+	/** Overlay the matching feed rule on the built-in HUD content. */
+	refreshHudContent() {
+		this.hudContent = require_hud_config.resolveHudContent(this.hudFeed, this.notificationContext, {
+			defaults: require_hud_defaults.HUD_DEFAULT_CONTENT,
+			supportedDestinations: require_inspector_nav.INSPECTOR_MENU_KEYS
+		});
 	}
 	async fetchAnnouncement() {
 		try {
@@ -16176,6 +16275,7 @@ function defineWebInspector(registry = globalThis.customElements) {
 	defineElementOnce(registry, THREAD_INSPECTOR_TAG, CpkThreadInspector);
 	defineElementOnce(registry, "cpk-thread-details", ɵCpkThreadDetails);
 	defineElementOnce(registry, "cpk-memory-list", CpkMemoryList);
+	defineElementOnce(registry, JSON_BLOCK_TAG, CpkJsonBlock);
 	defineElementOnce(registry, WEB_INSPECTOR_TAG, WebInspectorElement);
 }
 /**
@@ -16198,6 +16298,7 @@ exports.WEB_INSPECTOR_TAG = WEB_INSPECTOR_TAG;
 exports.WebInspectorElement = WebInspectorElement;
 exports.configureWebInspectorElement = configureWebInspectorElement;
 exports.defineWebInspector = defineWebInspector;
+exports.setInspectorJsonRenderer = setInspectorJsonRenderer;
 exports.ɵCpkThreadDetails = ɵCpkThreadDetails;
 exports.ɵbuildCapabilityRows = buildCapabilityRows;
 exports.ɵmaxRecallScore = maxRecallScore;