@copilotkit/web-inspector 1.79.2-canary.1792172552 → 1.81.0

package/dist/index.cjs

@@ -10,6 +10,8 @@ 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_json_block = require('./lib/json-block.cjs');
+require('./components/generative-ui-view.cjs');
 const require_context_helpers = require('./lib/context-helpers.cjs');
 const require_learning_setup = require('./lib/learning-setup.cjs');
 const require_inspector_learning = require('./lib/inspector-learning.cjs');
@@ -801,132 +803,6 @@ function getExampleTourTelemetryPair(index) {
 function getMetadataActionPlacement(placement) {
 	return placement === "threads-footer" ? "threads_footer" : "threads_locked";
 }
-function escapeHtml(s) {
-	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-const highlightedJsonCache = /* @__PURE__ */ new WeakMap();
-function highlightedJson(obj) {
-	if (typeof obj === "object" && obj !== null) {
-		const cached = highlightedJsonCache.get(obj);
-		if (cached !== void 0) return cached;
-	}
-	const json = JSON.stringify(obj, null, 2);
-	if (!json) return "";
-	const parts = [];
-	let lastIndex = 0;
-	const re = /("(?:\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*"(?:\s*:)?|\b(?:true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g;
-	let match;
-	while ((match = re.exec(json)) !== null) {
-		parts.push(escapeHtml(json.slice(lastIndex, match.index)));
-		const m = match[0];
-		let token = "num";
-		if (m.startsWith("\"")) token = m.trimEnd().endsWith(":") ? "key" : "str";
-		else if (m === "true" || m === "false") token = "bool";
-		else if (m === "null") token = "nil";
-		parts.push(`<span class="cpk-json-token cpk-json-token--${token}">${escapeHtml(m)}</span>`);
-		lastIndex = match.index + m.length;
-	}
-	parts.push(escapeHtml(json.slice(lastIndex)));
-	const result = parts.join("");
-	if (typeof obj === "object" && obj !== null) highlightedJsonCache.set(obj, result);
-	return result;
-}
-function coerceJsonValue(value) {
-	if (typeof value !== "string") return value;
-	const trimmed = value.trim();
-	if (trimmed.length === 0) return value;
-	if (!(trimmed.startsWith("{") && trimmed.endsWith("}") || trimmed.startsWith("[") && trimmed.endsWith("]"))) return value;
-	try {
-		return JSON.parse(trimmed);
-	} catch {
-		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
-  >`;
-}
 function humanizeEventType(type) {
 	const words = type.trim().split(/[_\s]+/).filter(Boolean).map((word) => word.toLowerCase());
 	if (words.length === 0) return "Event";
@@ -4058,7 +3934,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
               <span>${detailsExpanded ? "Hide details" : "Show details"}</span>
             </button>` : lit.nothing}
         ${item.body ? lit.html`<div class="cpk-td__timeline-body">${item.body}</div>` : lit.nothing}
-        ${item.details && detailsExpanded ? renderHighlightedJsonBlock(item.details) : lit.nothing}
+        ${item.details && detailsExpanded ? require_json_block.renderHighlightedJsonBlock(item.details) : lit.nothing}
       </div>
     `;
 	}
@@ -4267,12 +4143,12 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
                 <div class="cpk-td__tool-data">
                   <section>
                     <div class="cpk-td__tool-section-label">Arguments</div>
-                    ${renderHighlightedJsonBlock(item.arguments)}
+                    ${require_json_block.renderHighlightedJsonBlock(item.arguments)}
                   </section>
                   ${item.hasResult ? lit.html`
                     <section class="cpk-td__tool-result">
                       <div class="cpk-td__tool-section-label">Result</div>
-                      ${renderHighlightedJsonBlock(item.result)}
+                      ${require_json_block.renderHighlightedJsonBlock(item.result)}
                     </section>` : lit.nothing}
                 </div>
               </div>
@@ -4357,7 +4233,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       `;
 		const stateValue = this.activeState;
 		return this.cachedPanelTpl("state", [stateValue], () => {
-			return renderHighlightedJsonBlock(stateValue);
+			return require_json_block.renderHighlightedJsonBlock(stateValue);
 		});
 	}
 	renderEvents() {
@@ -4435,7 +4311,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
                     >${detailsExpanded ? "Hide details" : "Show details"}</span
                   >
                 </button>
-                ${detailsExpanded ? renderHighlightedJsonBlock(event.rawEvent ?? event) : lit.nothing}
+                ${detailsExpanded ? require_json_block.renderHighlightedJsonBlock(event.rawEvent ?? event) : lit.nothing}
               </div>
             `;
 			})}`;
@@ -5205,6 +5081,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		this._memoriesAvailable = true;
 		this._memoriesRealtimeStatus = "connecting";
 		this._memoryUnsub = null;
+		this._generativeUIUnsub = null;
 		this._memorySubscribed = false;
 		this._memoryStoreUnsupported = false;
 		this.learningSnapshot = null;
@@ -5539,14 +5416,9 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 				}
 			} catch (error) {
 				if (generation !== this.learningRequestGeneration || controller.signal.aborted) return;
-				if (error instanceof require_inspector_learning.InspectorLearningUnsupportedError) {
-					loadOutcome = "unsupported";
-					this.learningSupported = false;
-					this.learningSnapshot = null;
-				} else {
-					this.learningError = error instanceof Error ? error.message : "Learning data is unavailable.";
-					this.learningPollFailureCount += 1;
-				}
+				if (error instanceof require_inspector_learning.InspectorLearningUnsupportedError) loadOutcome = "unsupported";
+				this.learningError = "Learning status unavailable";
+				this.learningPollFailureCount += 1;
 			} finally {
 				if (generation === this.learningRequestGeneration) {
 					this.learningLoading = false;
@@ -5751,6 +5623,13 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			this.queueHudTelemetry(() => require_telemetry.trackHudHideClicked({ trigger }));
 			this.dismissInspectorFor("day");
 		};
+		this.retryLearningStatus = (event) => {
+			event.stopPropagation();
+			this.refreshLearningSnapshot().catch(() => {
+				this.learningError = "Learning status unavailable";
+				this.requestUpdate();
+			});
+		};
 		this.handleSidebarToggle = () => {
 			this.sidebarRailTooltip = null;
 			this.sidebarCollapsed = !this.sidebarCollapsed;
@@ -6472,6 +6351,11 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 				label: "Context",
 				icon: "FileText"
 			},
+			...this._core?.ɵgenerativeUIDebugSource ? [{
+				key: "generative-ui",
+				label: "Generative UI",
+				icon: "LayoutTemplate"
+			}] : [],
 			{
 				key: "threads",
 				label: "Rich Threads",
@@ -6939,6 +6823,10 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			}
 		};
 		this.coreUnsubscribe = core.subscribe(this.coreSubscriber).unsubscribe;
+		this._generativeUIUnsub = core.ɵsubscribeToGenerativeUIDebugSource?.(() => {
+			this.reconcileSelectedMenuVisibility();
+			this.requestUpdate();
+		}) ?? null;
 		this.processAgentsChanged(core.agents);
 		if (core.runtimeConnectionStatus === "connected") {
 			if (!core.telemetryDisabled) {
@@ -7132,6 +7020,8 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		}
 		this._memoryUnsub?.();
 		this._memoryUnsub = null;
+		this._generativeUIUnsub?.();
+		this._generativeUIUnsub = null;
 		this._memories = [];
 		this._memoriesLoading = false;
 		this._memoriesError = null;
@@ -7563,7 +7453,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
                     ${toolError.message}
                   </p>` : lit.nothing}
               ${argsString ? lit.html`<div class="mt-2">
-                    ${renderHighlightedJsonBlock(coerceJsonValue(call.function?.arguments))}
+                    ${require_json_block.renderHighlightedJsonBlock(require_json_block.coerceJsonValue(call.function?.arguments))}
                   </div>` : lit.nothing}
             </div>
           `;
@@ -10213,8 +10103,22 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		const titleCharacters = Array.from(title);
 		return titleCharacters.length > HUD_ANNOUNCEMENT_TITLE_LIMIT ? `${titleCharacters.slice(0, HUD_ANNOUNCEMENT_TITLE_LIMIT).join("").trimEnd()}...` : title;
 	}
+	/** A failed or pending read must never imply that Learning is disabled. */
+	getLearningStatus() {
+		if (this.learningError) return "unavailable";
+		if (this.learningSupported && !this.learningSnapshot) return "checking";
+		return this.learningSnapshot?.configuration.state === "configured" ? "configured" : "not_configured";
+	}
 	renderHudRow(args) {
 		if (args.connected) return lit.nothing;
+		const learningStatus = args.id === "learning" ? this.getLearningStatus() : null;
+		if (learningStatus === "unavailable" || learningStatus === "checking") return lit.html`
+        <li class="cpk-launcher-hud__row" data-cpk-hud-row="learning">
+          <span class="cpk-launcher-hud__label" role="status">${learningStatus === "unavailable" ? "Learning status unavailable" : "Checking Learning status"}</span>
+          <button type="button" class="cpk-launcher-hud__action" aria-label="Retry Learning status"
+            ?disabled=${this.learningLoading || this.learningRefreshing}
+            @click=${this.retryLearningStatus}>Retry</button>
+        </li>`;
 		const detailId = `cpk-hud-detail-${args.id}`;
 		const { label, description } = this.hudContent[args.id];
 		return lit.html`
@@ -11045,17 +10949,26 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 	}
 	renderHomeFeatures(model) {
 		const enabledServices = model.services.filter((service) => service.enabled);
-		const disabledServices = model.services.filter((service) => !service.enabled);
+		const learningStatus = this.getLearningStatus();
+		const unavailableServices = model.services.filter((service) => service.id === "memory" && (learningStatus === "unavailable" || learningStatus === "checking"));
+		const disabledServices = model.services.filter((service) => !service.enabled && !unavailableServices.includes(service));
 		const renderService = (service) => {
 			const copyState = this.homeFeaturePromptCopyState?.serviceId === service.id ? this.homeFeaturePromptCopyState.state : "idle";
-			const stateDescription = `${service.label} is ${service.enabled ? "enabled in your runtime" : "not enabled in your runtime"}`;
+			const learningStatus = service.id === "memory" ? this.getLearningStatus() : null;
+			const learningUnavailable = learningStatus === "unavailable" || learningStatus === "checking";
+			const stateDescription = learningStatus ? {
+				configured: "Learning configured",
+				not_configured: "Learning not configured",
+				unavailable: "Learning status unavailable",
+				checking: "Checking Learning status"
+			}[learningStatus] : `${service.label} is ${service.enabled ? "enabled in your runtime" : "not enabled in your runtime"}`;
 			const copyLabel = copyState === "copied" ? "Copied" : copyState === "error" ? "Copy failed" : "Copy prompt";
 			const copyTitle = copyLabel;
 			return lit.html`
       <div
         class="inspector-home-feature"
         data-inspector-service=${service.id}
-        data-state=${service.enabled ? "on" : "off"}
+        data-state=${learningUnavailable ? "unavailable" : service.enabled ? "on" : "off"}
         role="listitem"
       >
         <span
@@ -11074,13 +10987,16 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
           rel="noopener noreferrer"
           aria-label="Open ${service.label} documentation in a new tab"
         >
-          <span>${service.label}</span>
+          <span>${learningStatus ? stateDescription : service.label}</span>
           <span class="inspector-home-feature-label-icon" aria-hidden="true"
             >${this.renderIcon("ArrowUpRight")}</span
           >
         </a>
         <span class="inspector-home-feature-actions">
-          ${service.enabled ? lit.nothing : lit.html`
+          ${learningUnavailable ? lit.html`<button type="button" class="inspector-home-feature-action" aria-label="Retry Learning status"
+            ?disabled=${this.learningLoading || this.learningRefreshing}
+            @click=${this.retryLearningStatus}>Retry</button>` : lit.nothing}
+          ${service.enabled || learningUnavailable ? lit.nothing : lit.html`
                   <button
                     type="button"
                     class="inspector-home-feature-action inspector-system-health-url"
@@ -11124,6 +11040,10 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
                 </p>
               ` : lit.html`
               <div class="inspector-home-feature-groups">
+                ${unavailableServices.length ? lit.html`
+                  <section class="inspector-home-feature-group" data-feature-state-group="unavailable" aria-label="Feature status unavailable">
+                    <div class="inspector-home-feature-list" role="list">${unavailableServices.map(renderService)}</div>
+                  </section>` : lit.nothing}
                 <section
                   class="inspector-home-feature-group"
                   data-feature-state-group="active"
@@ -12709,6 +12629,10 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		if (this.selectedMenu === "frontend-tools") return this.renderToolsView();
 		if (this.selectedMenu === "capabilities") return this.renderCapabilitiesView();
 		if (this.selectedMenu === "agent-context") return this.renderContextView();
+		if (this.selectedMenu === "generative-ui") return lit.html`<cpk-generative-ui-view
+        data-color-scheme=${this.colorScheme}
+        .source=${this._core?.ɵgenerativeUIDebugSource}
+      ></cpk-generative-ui-view>`;
 		if (this.selectedMenu === "threads") return this.renderThreadsView();
 		if (this.selectedMenu === "memories") return this.renderMemoriesView();
 		return lit.nothing;
@@ -14560,7 +14484,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
                     >
                       ${isExpanded ? lit.html`
                             <div class="group relative">
-                              ${renderHighlightedJsonBlock(extractedEvent)}
+                              ${require_json_block.renderHighlightedJsonBlock(extractedEvent)}
                               <button
                                 class="absolute right-0 top-0 cursor-pointer rounded px-2 py-1 text-[10px] opacity-0 transition group-hover:opacity-100 ${this.copiedEvents.has(event.id) ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900"}"
                                 @click=${(e) => {
@@ -14759,7 +14683,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
             <h4>Current State</h4>
           </div>
           <div class="overflow-auto p-4">
-            ${this.hasRenderableState(state) ? renderHighlightedJsonBlock(state, { maxHeight: "16rem" }) : lit.html`
+            ${this.hasRenderableState(state) ? require_json_block.renderHighlightedJsonBlock(state, { maxHeight: "16rem" }) : lit.html`
                   <div
                     class="flex h-12 items-center justify-center text-xs text-gray-500"
                   >
@@ -15585,7 +15509,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
                           ${this.copiedContextItems.has(id) ? "Copied" : "Copy JSON"}
                         </button>
                       </div>
-                      ${renderHighlightedJsonBlock(context.value, { maxHeight: "180px" })}
+                      ${require_json_block.renderHighlightedJsonBlock(context.value, { maxHeight: "180px" })}
                     ` : lit.html`
                         <div class="flex items-center justify-center py-4 text-xs text-gray-500">
                           <span>No value available</span>
@@ -15597,7 +15521,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
     `;
 	}
 	getContextValuePreview(value) {
-		const parsed = coerceJsonValue(value);
+		const parsed = require_json_block.coerceJsonValue(value);
 		if (parsed === void 0 || parsed === null) return "—";
 		if (typeof parsed === "string") return parsed.length > 50 ? `${parsed.slice(0, 50)}...` : parsed;
 		if (typeof parsed === "number" || typeof parsed === "boolean") return String(parsed);
@@ -15643,7 +15567,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		if (value === void 0) return "undefined";
 		if (value === null) return "null";
 		if (typeof value === "function") return value.toString();
-		const pretty = this.formatStateForDisplay(coerceJsonValue(value));
+		const pretty = this.formatStateForDisplay(require_json_block.coerceJsonValue(value));
 		return pretty.length > 0 ? pretty : String(value);
 	}
 	async copyContextValue(value, contextId, event) {
@@ -16269,10 +16193,10 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		renderer.link = (href, title, text) => {
 			return `<a href="${this.escapeHtmlAttr(this.isSafeAnnouncementHref(href ?? "") ? this.appendRefParam(href ?? "") : "#")}" target="_blank" rel="noopener"${title ? ` title="${this.escapeHtmlAttr(title)}"` : ""}>${text}</a>`;
 		};
-		renderer.html = (html) => escapeHtml(html);
+		renderer.html = (html) => require_json_block.escapeHtml(html);
 		renderer.code = (code, lang) => {
 			const safeLang = (lang ?? "").replace(/[^a-z0-9-]/gi, "");
-			return `<div class="announcement-code"><pre><code${safeLang ? ` class="language-${safeLang}"` : ""}>${escapeHtml(code)}</code></pre><div class="announcement-code__copy-shield"><button type="button" class="announcement-code__copy" data-copy="${this.encodeBase64(code)}" aria-label="Copy code">Copy</button></div></div>`;
+			return `<div class="announcement-code"><pre><code${safeLang ? ` class="language-${safeLang}"` : ""}>${require_json_block.escapeHtml(code)}</code></pre><div class="announcement-code__copy-shield"><button type="button" class="announcement-code__copy" data-copy="${this.encodeBase64(code)}" aria-label="Copy code">Copy</button></div></div>`;
 		};
 		return marked.marked.parse(markdown, {
 			renderer,
@@ -16321,7 +16245,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		return hostname === "copilotkit.ai" || hostname.endsWith(".copilotkit.ai");
 	}
 	escapeHtmlAttr(value) {
-		return escapeHtml(value).replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+		return require_json_block.escapeHtml(value).replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 	}
 };
 function defineWebInspector(registry = globalThis.customElements) {
@@ -16330,7 +16254,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, require_json_block.JSON_BLOCK_TAG, require_json_block.CpkJsonBlock);
 	defineElementOnce(registry, WEB_INSPECTOR_TAG, WebInspectorElement);
 }
 /**
@@ -16353,7 +16277,7 @@ exports.WEB_INSPECTOR_TAG = WEB_INSPECTOR_TAG;
 exports.WebInspectorElement = WebInspectorElement;
 exports.configureWebInspectorElement = configureWebInspectorElement;
 exports.defineWebInspector = defineWebInspector;
-exports.setInspectorJsonRenderer = setInspectorJsonRenderer;
+exports.setInspectorJsonRenderer = require_json_block.setInspectorJsonRenderer;
 exports.ɵCpkThreadDetails = ɵCpkThreadDetails;
 exports.ɵbuildCapabilityRows = buildCapabilityRows;
 exports.ɵmaxRecallScore = maxRecallScore;