@copilotkit/web-inspector 1.80.0 → 1.81.0

package/dist/index.umd.js

@@ -2518,6 +2518,1127 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
   `;
 	if (!customElements.get("cpk-learning-view")) customElements.define("cpk-learning-view", CpkLearningView);
 
+//#endregion
+//#region \0@oxc-project+runtime@0.112.0/helpers/checkPrivateRedeclaration.js
+	function _checkPrivateRedeclaration(e, t) {
+		if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object");
+	}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.112.0/helpers/classPrivateMethodInitSpec.js
+	function _classPrivateMethodInitSpec(e, a) {
+		_checkPrivateRedeclaration(e, a), a.add(e);
+	}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.112.0/helpers/classPrivateFieldInitSpec.js
+	function _classPrivateFieldInitSpec(e, t, a) {
+		_checkPrivateRedeclaration(e, t), t.set(e, a);
+	}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.112.0/helpers/assertClassBrand.js
+	function _assertClassBrand(e, t, n) {
+		if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;
+		throw new TypeError("Private element is not present on this object");
+	}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.112.0/helpers/classPrivateFieldGet2.js
+	function _classPrivateFieldGet2(s, a) {
+		return s.get(_assertClassBrand(s, a));
+	}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.112.0/helpers/classPrivateFieldSet2.js
+	function _classPrivateFieldSet2(s, a, r) {
+		return s.set(_assertClassBrand(s, a), r), r;
+	}
+
+//#endregion
+//#region src/lib/json-block.ts
+	var _globalThis$HTMLEleme;
+	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 (_unused) {
+			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;
+	}
+	var _value = /* @__PURE__ */ new WeakMap();
+	var _hasValue = /* @__PURE__ */ new WeakMap();
+	var _cleanup = /* @__PURE__ */ new WeakMap();
+	var _container = /* @__PURE__ */ new WeakMap();
+	var _CpkJsonBlock_brand = /* @__PURE__ */ new WeakSet();
+	/**
+	* 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$HTMLEleme = globalThis.HTMLElement) !== null && _globalThis$HTMLEleme !== void 0 ? _globalThis$HTMLEleme : class {}) {
+		constructor(..._args) {
+			super(..._args);
+			_classPrivateMethodInitSpec(this, _CpkJsonBlock_brand);
+			_classPrivateFieldInitSpec(this, _value, void 0);
+			_classPrivateFieldInitSpec(this, _hasValue, false);
+			_classPrivateFieldInitSpec(this, _cleanup, void 0);
+			_classPrivateFieldInitSpec(this, _container, void 0);
+		}
+		get value() {
+			return _classPrivateFieldGet2(_value, this);
+		}
+		set value(next) {
+			if (_classPrivateFieldGet2(_hasValue, this) && Object.is(next, _classPrivateFieldGet2(_value, this))) return;
+			_classPrivateFieldSet2(_value, this, next);
+			_classPrivateFieldSet2(_hasValue, this, true);
+			if (this.isConnected) _assertClassBrand(_CpkJsonBlock_brand, this, _render).call(this);
+		}
+		connectedCallback() {
+			this.style.display = "block";
+			_assertClassBrand(_CpkJsonBlock_brand, this, _render).call(this);
+		}
+		disconnectedCallback() {
+			_assertClassBrand(_CpkJsonBlock_brand, this, _teardown).call(this);
+		}
+	};
+	function _render() {
+		_assertClassBrand(_CpkJsonBlock_brand, this, _teardown).call(this);
+		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);
+		_classPrivateFieldSet2(_container, this, container);
+		const cleanup = renderer(container, _classPrivateFieldGet2(_value, this));
+		_classPrivateFieldSet2(_cleanup, this, typeof cleanup === "function" ? cleanup : void 0);
+	}
+	function _teardown() {
+		var _classPrivateFieldGet2$1;
+		const cleanup = _classPrivateFieldGet2(_cleanup, this);
+		_classPrivateFieldSet2(_cleanup, this, void 0);
+		cleanup === null || cleanup === void 0 || cleanup();
+		(_classPrivateFieldGet2$1 = _classPrivateFieldGet2(_container, this)) === null || _classPrivateFieldGet2$1 === void 0 || _classPrivateFieldGet2$1.remove();
+		_classPrivateFieldSet2(_container, this, 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
+  >`;
+	}
+
+//#endregion
+//#region src/components/generative-ui-view.ts
+	const TABS = [
+		{
+			key: "surfaces",
+			label: "Surfaces"
+		},
+		{
+			key: "catalog",
+			label: "Catalog"
+		},
+		{
+			key: "prompt",
+			label: "Prompt"
+		}
+	];
+	const PROMPT_SOURCE_NOTES = {
+		runtime: "The runtime adds this text as a context entry, with the render_ui tool.",
+		context: "The provider sends this text as a context entry.",
+		backend: "sendContext is false. Your backend builds the prompt, usually from this text."
+	};
+	/** A rough token count: about 4 characters for each token. */
+	function estimateTokens(text) {
+		return Math.ceil(text.length / 4);
+	}
+	function formatTokens(text) {
+		return `~${estimateTokens(text).toLocaleString()} tokens`;
+	}
+	function json(value) {
+		var _JSON$stringify;
+		return (_JSON$stringify = JSON.stringify(value, null, 2)) !== null && _JSON$stringify !== void 0 ? _JSON$stringify : "undefined";
+	}
+	/** The kind of an A2UI operation, for example `updateComponents`. */
+	function operationKind(operation) {
+		var _Object$keys$find;
+		if (typeof operation !== "object" || operation === null) return "unknown";
+		return (_Object$keys$find = Object.keys(operation).find((key) => key !== "version")) !== null && _Object$keys$find !== void 0 ? _Object$keys$find : "unknown";
+	}
+	/**
+	* The component tree of a surface, from its root. Later operations replace
+	* components with the same id. Skipped operations (rejected by the browser)
+	* are left out. A slot id with no component yet is left out too.
+	*/
+	function componentTree(operations, skip, catalog) {
+		const byId = /* @__PURE__ */ new Map();
+		operations.forEach((operation, index) => {
+			if (skip.has(index)) return;
+			const components = "createSurface" in operation ? operation.createSurface.components : "updateComponents" in operation ? operation.updateComponents.components : void 0;
+			for (const node of components !== null && components !== void 0 ? components : []) byId.set(node.id, node);
+		});
+		const seen = /* @__PURE__ */ new Set();
+		const build = (id, repeat) => {
+			var _manifest$slots;
+			const node = typeof id === "string" ? byId.get(id) : void 0;
+			if (!node || seen.has(node.id)) return [];
+			seen.add(node.id);
+			const { id: _id, component, ...rest } = node;
+			const manifest = catalog[component];
+			const refs = manifest ? (0, _copilotkit_shared.collectChildRefs)(manifest.props) : [];
+			const childKeys = new Set([...Object.keys((_manifest$slots = manifest === null || manifest === void 0 ? void 0 : manifest.slots) !== null && _manifest$slots !== void 0 ? _manifest$slots : {}), ...refs.filter((ref) => ref.path.length === 1).map((ref) => ref.path[0])]);
+			const nested = refs.filter((ref) => ref.path.length > 1);
+			const props = {};
+			const children = [];
+			for (const [name, value] of Object.entries(rest)) if (!childKeys.has(name)) props[name] = value;
+			else if (Array.isArray(value)) for (const child of value) children.push(...build(child));
+			else if (typeof value === "object" && value !== null) {
+				const template = value;
+				children.push(...build(template.componentId, template.path));
+			} else children.push(...build(value));
+			for (const child of (0, _copilotkit_shared.childIdsAtRefs)(rest, nested)) children.push(...build(child));
+			return [{
+				id: node.id,
+				component,
+				props,
+				...repeat ? { repeat } : {},
+				children
+			}];
+		};
+		return build(_copilotkit_shared.GENERATIVE_UI_ROOT_ID)[0];
+	}
+	/** The first element of the page whose `attribute` is `value`. */
+	function findOnPage(attribute, value) {
+		return [...document.querySelectorAll(`[${attribute}]`)].find((element) => element.getAttribute(attribute) === value);
+	}
+	/**
+	* The function problem that the inspector shows. A function goes to the
+	* model only with exactly one mounted handler.
+	*/
+	/**
+	* Splits components by the catalog that declared them: the catalog of the
+	* provider first, then each base in the order of `extends`.
+	*/
+	function groupByCatalog(components, snapshot) {
+		const groups = new Map([[snapshot.catalogId, []]]);
+		for (const entry of components) {
+			var _snapshot$componentCa, _groups$get;
+			const id = (_snapshot$componentCa = snapshot.componentCatalogs[entry[0]]) !== null && _snapshot$componentCa !== void 0 ? _snapshot$componentCa : snapshot.catalogId;
+			groups.set(id, [...(_groups$get = groups.get(id)) !== null && _groups$get !== void 0 ? _groups$get : [], entry]);
+		}
+		return [...groups].filter(([, group]) => group.length > 0);
+	}
+	function functionHandlerProblem(handlers) {
+		if (handlers === 1) return void 0;
+		if (handlers === 0) return "No useGenerativeUIFunction handler is mounted, so the model does not get this function.";
+		return `${handlers} handlers are mounted. Mount exactly one, or the model does not get this function.`;
+	}
+	/**
+	* The Generative UI pane: the catalog, the targets and surfaces on the page,
+	* and what a run adds to the prompt of the model.
+	*/
+	var CpkGenerativeUIView = class extends lit.LitElement {
+		constructor(..._args) {
+			super(..._args);
+			this.tab = "surfaces";
+			this.run = "last";
+			this.filter = "";
+			this.expanded = /* @__PURE__ */ new Set();
+			this.copied = null;
+			this.unsubscribe = null;
+			this.outlined = null;
+		}
+		disconnectedCallback() {
+			var _this$unsubscribe;
+			super.disconnectedCallback();
+			this.unhighlight();
+			(_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
+			this.unsubscribe = null;
+			this.subscribedSource = void 0;
+		}
+		willUpdate() {
+			var _this$unsubscribe2, _this$source$subscrib, _this$source;
+			if (this.source === this.subscribedSource && this.unsubscribe) return;
+			(_this$unsubscribe2 = this.unsubscribe) === null || _this$unsubscribe2 === void 0 || _this$unsubscribe2.call(this);
+			this.subscribedSource = this.source;
+			this.unsubscribe = (_this$source$subscrib = (_this$source = this.source) === null || _this$source === void 0 ? void 0 : _this$source.subscribe(() => this.requestUpdate())) !== null && _this$source$subscrib !== void 0 ? _this$source$subscrib : null;
+		}
+		toggle(key) {
+			if (this.expanded.has(key)) this.expanded.delete(key);
+			else this.expanded.add(key);
+			this.requestUpdate();
+		}
+		async copy(key, text) {
+			try {
+				await navigator.clipboard.writeText(text);
+				this.copied = key;
+			} catch (_unused) {
+				this.copied = null;
+			}
+			this.requestUpdate();
+			setTimeout(() => {
+				if (this.copied !== key) return;
+				this.copied = null;
+				this.requestUpdate();
+			}, 1500);
+		}
+		/**
+		* Outlines an element of the page and scrolls it into view, until
+		* `unhighlight`. Hover and keyboard focus call these two.
+		*/
+		highlight(element) {
+			this.unhighlight();
+			if (!element) return;
+			const { outline, outlineOffset } = element.style;
+			this.outlined = {
+				element,
+				outline,
+				outlineOffset
+			};
+			element.style.outline = "2px solid #7567ff";
+			element.style.outlineOffset = "4px";
+			element.scrollIntoView({
+				behavior: "smooth",
+				block: "nearest"
+			});
+		}
+		unhighlight() {
+			if (!this.outlined) return;
+			const { element, outline, outlineOffset } = this.outlined;
+			element.style.outline = outline;
+			element.style.outlineOffset = outlineOffset;
+			this.outlined = null;
+		}
+		render() {
+			if (!this.source) return lit.html`
+        <div class="empty">
+          <p class="strong">No generative UI</p>
+          <p>
+            Pass <code>generativeUI</code> to <code>CopilotKitProvider</code>, and this
+            pane shows its catalog, surfaces, and prompt.
+          </p>
+        </div>
+      `;
+			const snapshot = this.source.getSnapshot();
+			return lit.html`
+      <header class="header">
+        <div class="title-row">
+          <h2>Generative UI</h2>
+          <span class="chip">${snapshot.transport} transport</span>
+          <code class="muted">${snapshot.catalogId}</code>
+        </div>
+        <p class="muted small">
+          ${snapshot.agentIds ? `For agents: ${snapshot.agentIds.join(", ")}` : "For every agent"}
+          · ${Object.keys(snapshot.components).length} components ·
+          ${Object.keys(snapshot.functions).length} functions ·
+          ${snapshot.surfaces.length} surfaces
+        </p>
+        <nav class="tabs" role="tablist">
+          ${TABS.map((tab) => lit.html`<button
+                type="button"
+                role="tab"
+                aria-selected=${this.tab === tab.key}
+                class="tab ${this.tab === tab.key ? "active" : ""}"
+                @click=${() => {
+				this.tab = tab.key;
+				this.requestUpdate();
+			}}
+              >
+                ${tab.label}
+              </button>`)}
+        </nav>
+      </header>
+      <div class="body">
+        ${this.tab === "surfaces" ? this.renderSurfaces(snapshot) : this.tab === "catalog" ? this.renderCatalog(snapshot) : this.renderPrompt(snapshot)}
+      </div>
+    `;
+		}
+		renderSurfaces(snapshot) {
+			const stateKeys = Object.keys(snapshot.state);
+			const active = snapshot.surfaces.filter((surface) => surface.threadId === snapshot.activeThreadId);
+			const other = snapshot.surfaces.filter((surface) => surface.threadId !== snapshot.activeThreadId);
+			return lit.html`
+      <section>
+        <h3>Targets</h3>
+        <p class="muted small">
+          Where the model can render. The model sees each description.
+        </p>
+        ${snapshot.targets.map((target) => {
+				const show = () => this.highlight(findOnPage("data-generative-ui-surface", target.id));
+				return lit.html`<div
+            class="row"
+            @mouseenter=${show}
+            @mouseleave=${this.unhighlight}
+          >
+            <div class="row-main">
+              <div class="row-title">
+                <code>${target.id}</code>
+                <span class="chip">${target.kind}</span>
+                ${target.components ? lit.html`<span class="chip"
+                      >${target.components.length} components only</span
+                    >` : lit.nothing}
+              </div>
+              ${target.description ? lit.html`<p class="small">${target.description}</p>` : target.kind === "inline" ? lit.html`
+                        <p class="small warn">
+                          No description. Give the surface a description, so the model knows what to put
+                          in it.
+                        </p>
+                      ` : lit.nothing}
+              ${target.components ? lit.html`<p class="muted small">
+                    ${target.components.join(", ") || "No components"}
+                  </p>` : lit.nothing}
+            </div>
+          </div>`;
+			})}
+      </section>
+      <section>
+        <h3>Surfaces in this thread</h3>
+        ${active.length === 0 ? lit.html`
+                <p class="muted small">No surfaces yet. Ask the chat for something visual.</p>
+              ` : active.map((surface) => this.renderSurface(surface, snapshot.components))}
+        ${other.length > 0 ? lit.html`<h4>Other threads</h4>
+              ${other.map((surface) => this.renderSurface(surface, snapshot.components))}` : lit.nothing}
+      </section>
+      <section>
+        <h3>App state</h3>
+        <p class="muted small">
+          Bound props read these values. The model does not see them.
+        </p>
+        ${stateKeys.length === 0 ? lit.html`
+                <p class="muted small">No state is set.</p>
+              ` : renderHighlightedJsonBlock(snapshot.state)}
+      </section>
+    `;
+		}
+		renderComponent(node, key) {
+			const nodeKey = `${key}:component:${node.id}`;
+			const propCount = Object.keys(node.props).length;
+			return lit.html`<li>
+      <button
+        type="button"
+        class="op-toggle"
+        aria-expanded=${this.expanded.has(nodeKey)}
+        @click=${() => this.toggle(nodeKey)}
+      >
+        <code>${node.component}</code>
+        <span class="muted small">${node.id}</span>
+        ${node.repeat ? lit.html`<span class="chip">each item of ${node.repeat}</span>` : lit.nothing}
+        <span class="muted small">${propCount} props</span>
+      </button>
+      ${this.expanded.has(nodeKey) ? renderHighlightedJsonBlock(node.props) : lit.nothing}
+      ${node.children.length > 0 ? lit.html`<ul class="tree">
+            ${node.children.map((child) => this.renderComponent(child, key))}
+          </ul>` : lit.nothing}
+    </li>`;
+		}
+		renderSurface(surface, catalog) {
+			const key = `surface:${surface.threadId}:${surface.surfaceId}`;
+			const isOpen = this.expanded.has(key);
+			const userPaths = Object.keys(surface.userValues);
+			const browserRejected = new Set(surface.rejected.filter((rejection) => rejection.source === "browser").map((rejection) => rejection.index));
+			const tree = isOpen ? componentTree(surface.operations, browserRejected, catalog) : void 0;
+			const show = () => {
+				var _findOnPage;
+				return this.highlight((_findOnPage = findOnPage("data-generative-ui-root", surface.surfaceId)) === null || _findOnPage === void 0 ? void 0 : _findOnPage.closest("[data-generative-ui-surface]"));
+			};
+			return lit.html`<div
+      class="card"
+      @mouseenter=${show}
+      @mouseleave=${this.unhighlight}
+      @focusin=${show}
+      @focusout=${this.unhighlight}
+    >
+      <div class="card-head">
+        <button
+          type="button"
+          class="card-toggle"
+          aria-expanded=${isOpen}
+          @click=${() => this.toggle(key)}
+        >
+          <span class="row-title">
+            <code>${surface.surfaceId}</code>
+            <span class="chip status-${surface.status}">${surface.status}</span>
+            <span class="muted small">in ${surface.target}</span>
+          </span>
+          <span class="muted small">
+            ${surface.operations.length} operations
+            ${surface.rejected.length > 0 ? lit.html`·
+                  <span class="danger"
+                    >${surface.rejected.length} rejected</span
+                  >` : lit.nothing}
+            ${userPaths.length > 0 ? lit.html`· ${userPaths.length} user values` : lit.nothing}
+          </span>
+        </button>
+      </div>
+      ${isOpen ? lit.html`<div class="card-body">
+            ${surface.rejected.length > 0 ? lit.html`<h4>Rejected operations</h4>
+                  <p class="muted small">
+                    These were dropped. The model gets them on its next run, so
+                    it can fix them.
+                  </p>
+                  <ul class="list">
+                    ${surface.rejected.map((rejection) => lit.html`<li class="danger">
+                          <span class="chip">${rejection.source}</span>
+                          operation ${rejection.index}: ${rejection.reason}
+                        </li>`)}
+                  </ul>` : lit.nothing}
+            ${userPaths.length > 0 ? lit.html`<h4>User values</h4>
+                  <p class="muted small">
+                    The user wrote these paths. Agent writes to them are
+                    ignored.
+                  </p>
+                  ${renderHighlightedJsonBlock(surface.userValues)}` : lit.nothing}
+            <h4>Components</h4>
+            ${tree ? lit.html`<ul class="tree root">
+                  ${this.renderComponent(tree, key)}
+                </ul>` : lit.html`
+                    <p class="muted small">No root component yet.</p>
+                  `}
+            <h4>Data model</h4>
+            ${renderHighlightedJsonBlock(surface.dataModel)}
+            <h4>Operations</h4>
+            <ol class="ops">
+              ${surface.operations.map((operation, index) => {
+				const opKey = `${key}:op:${index}`;
+				const rejected = browserRejected.has(index);
+				return lit.html`<li class=${rejected ? "danger" : ""}>
+                  <button
+                    type="button"
+                    class="op-toggle"
+                    aria-expanded=${this.expanded.has(opKey)}
+                    @click=${() => this.toggle(opKey)}
+                  >
+                    <span class="muted">${index}</span>
+                    <code>${operationKind(operation)}</code>
+                    ${rejected ? lit.html`
+                            <span class="chip">rejected</span>
+                          ` : lit.nothing}
+                  </button>
+                  ${this.expanded.has(opKey) ? renderHighlightedJsonBlock(operation) : lit.nothing}
+                </li>`;
+			})}
+            </ol>
+            <p class="muted small">Thread <code>${surface.threadId}</code></p>
+          </div>` : lit.nothing}
+    </div>`;
+		}
+		renderCatalogComponent(name, component) {
+			var _component$events, _component$slots;
+			const key = `component:${name}`;
+			const isOpen = this.expanded.has(key);
+			const events = Object.keys((_component$events = component.events) !== null && _component$events !== void 0 ? _component$events : {});
+			return lit.html`<div class="card">
+      <button
+        type="button"
+        class="card-toggle"
+        aria-expanded=${isOpen}
+        @click=${() => this.toggle(key)}
+      >
+        <span class="row-title">
+          <code>${name}</code>
+          ${[...Object.entries((_component$slots = component.slots) !== null && _component$slots !== void 0 ? _component$slots : {}), ...(0, _copilotkit_shared.collectChildRefs)(component.props).map((ref) => [ref.path.join("."), ref.kind])].map(([slot, kind]) => lit.html`<span class="chip">${slot}: ${kind}</span>`)}
+          ${events.map((event) => lit.html`<span class="chip event">${event}</span>`)}
+        </span>
+        ${component.description ? lit.html`<span class="small">${component.description}</span>` : lit.html`
+                <span class="small warn">No description</span>
+              `}
+      </button>
+      ${isOpen ? lit.html`<div class="card-body">
+            <h4>Props (JSON Schema)</h4>
+            ${renderHighlightedJsonBlock(component.props)}
+            ${component.events ? lit.html`<h4>Events</h4>
+                  ${renderHighlightedJsonBlock(component.events)}` : lit.nothing}
+          </div>` : lit.nothing}
+    </div>`;
+		}
+		renderCatalog(snapshot) {
+			const query = this.filter.trim().toLowerCase();
+			const matches = ([name, entry]) => {
+				var _entry$description;
+				return !query || name.toLowerCase().includes(query) || ((_entry$description = entry.description) === null || _entry$description === void 0 ? void 0 : _entry$description.toLowerCase().includes(query));
+			};
+			const components = Object.entries(snapshot.components).filter(matches);
+			const functions = Object.entries(snapshot.functions).filter(matches);
+			return lit.html`
+      <section>
+        <div class="section-head">
+          <h3>Components</h3>
+          <input
+            class="filter"
+            type="search"
+            placeholder="Search"
+            aria-label="Search components and functions"
+            .value=${this.filter}
+            @input=${(event) => {
+				this.filter = event.target.value;
+				this.requestUpdate();
+			}}
+          />
+        </div>
+        <p class="muted small">
+          ${Object.keys(snapshot.components).length} components ·
+          ${formatTokens(JSON.stringify(snapshot.components))} in the envelope
+        </p>
+        ${groupByCatalog(components, snapshot).map(([catalogId, group]) => {
+				const key = `catalog:${catalogId}`;
+				const isOwn = catalogId === snapshot.catalogId;
+				const toggled = this.expanded.has(key);
+				const isOpen = query !== "" || (isOwn ? !toggled : toggled);
+				return lit.html`<h4>
+              <button
+                type="button"
+                class="op-toggle catalog-toggle"
+                aria-expanded=${isOpen}
+                @click=${() => this.toggle(key)}
+              >
+                <code>${catalogId}</code>
+                ${isOwn ? lit.nothing : lit.html`
+                        <span class="chip">extended</span>
+                      `}
+                <span class="muted small">${group.length} components</span>
+              </button>
+            </h4>
+            ${isOpen ? group.map(([name, component]) => this.renderCatalogComponent(name, component)) : lit.nothing}`;
+			})}
+        ${query && components.length === 0 ? lit.html`
+                <p class="muted small">No component matches.</p>
+              ` : lit.nothing}
+      </section>
+      <section>
+        <h3>Functions</h3>
+        ${functions.length === 0 ? lit.html`<p class="muted small">
+              ${query ? "No function matches." : "No functions are declared."}
+            </p>` : functions.map(([name, fn]) => {
+				const problem = functionHandlerProblem(fn.handlers);
+				return lit.html`<div class="card">
+                <div class="card-body">
+                  <div class="row-title">
+                    <code>${name}</code>
+                    <span
+                      class="chip ${problem ? "status-error" : "status-ready"}"
+                      >${fn.handlers}
+                      handler${fn.handlers === 1 ? "" : "s"}</span
+                    >
+                  </div>
+                  ${fn.description ? lit.html`<p class="small">${fn.description}</p>` : lit.nothing}
+                  ${problem ? lit.html`<p class="small warn">${problem}</p>` : lit.nothing}
+                  ${renderHighlightedJsonBlock(fn.parameters)}
+                </div>
+              </div>`;
+			})}
+      </section>
+    `;
+		}
+		/**
+		* The prompt text and the envelope are large (about 90,000 characters
+		* each in the shop), and the next run changes with each surface change.
+		* So they are drawn only when open.
+		*/
+		renderShowButton(key) {
+			const open = this.expanded.has(key);
+			return lit.html`<button
+      type="button"
+      class="button"
+      aria-expanded=${open}
+      @click=${() => this.toggle(key)}
+    >
+      ${open ? "Hide" : "Show"}
+    </button>`;
+		}
+		renderPrompt(snapshot) {
+			var _run$agentId;
+			const showing = this.run === "last" && snapshot.lastRun ? "last" : "next";
+			const run = showing === "last" && snapshot.lastRun ? snapshot.lastRun : snapshot.nextRun;
+			const isLast = showing === "last";
+			const envelope = json(run.envelope);
+			return lit.html`
+      <div class="segmented" role="radiogroup">
+        ${["last", "next"].map((option) => lit.html`<button
+              type="button"
+              role="radio"
+              aria-checked=${showing === option}
+              class="tab ${showing === option ? "active" : ""}"
+              ?disabled=${option === "last" && !snapshot.lastRun}
+              @click=${() => {
+				this.run = option;
+				this.requestUpdate();
+			}}
+            >
+              ${option === "last" ? "Last run" : "Next run"}
+            </button>`)}
+      </div>
+      <p class="muted small">
+        ${isLast ? lit.html`What the last run of
+              <code>${(_run$agentId = run.agentId) !== null && _run$agentId !== void 0 ? _run$agentId : "the agent"}</code> sent${run.startedAt ? `, at ${new Date(run.startedAt).toLocaleTimeString()}` : ""}.` : lit.html`
+                What the next run will send, from the page as it is now.
+              `}
+        Your own system prompt and tools are not shown.
+      </p>
+      ${run.prompt.map((section, index) => {
+				const key = `prompt:${index}`;
+				return lit.html`<section>
+          <div class="section-head">
+            <h3>${section.title}</h3>
+            <span class="muted small">${formatTokens(section.text)}</span>
+            ${this.renderShowButton(key)}
+            <button
+              type="button"
+              class="button"
+              @click=${() => void this.copy(key, section.text)}
+            >
+              ${this.copied === key ? "Copied" : "Copy"}
+            </button>
+          </div>
+          <p class="muted small">${PROMPT_SOURCE_NOTES[section.source]}</p>
+          ${this.expanded.has(key) ? lit.html`<pre class="prompt">${section.text || "(empty)"}</pre>` : lit.nothing}
+        </section>`;
+			})}
+      <section>
+        <div class="section-head">
+          <h3>Envelope</h3>
+          <span class="muted small">${formatTokens(envelope)}</span>
+          ${this.renderShowButton("envelope")}
+          <button
+            type="button"
+            class="button"
+            @click=${() => void this.copy("envelope", envelope)}
+          >
+            ${this.copied === "envelope" ? "Copied" : "Copy"}
+          </button>
+        </div>
+        <p class="muted small">
+          The run sends this as <code>forwardedProps.copilotkit.ui</code>.
+        </p>
+        ${this.expanded.has("envelope") ? renderHighlightedJsonBlock(run.envelope) : lit.nothing}
+      </section>
+    `;
+		}
+	};
+	CpkGenerativeUIView.properties = { source: { attribute: false } };
+	CpkGenerativeUIView.styles = lit.css`
+    :host {
+      --gui-ink: #202127;
+      --gui-muted: #64656f;
+      --gui-line: #dcdce4;
+      --gui-soft: #f7f7fa;
+      --gui-canvas: #fff;
+      --gui-accent: #7567ff;
+      --gui-accent-soft: #f0edff;
+      --gui-green: #168b69;
+      --gui-green-soft: #eaf6f1;
+      --gui-amber: #8a5a00;
+      --gui-amber-soft: #fff6e0;
+      --gui-danger: #a12f2f;
+      --gui-danger-soft: #fff4f4;
+      --cpk-json-key: #3d408f;
+      --cpk-json-str: #0b6b4c;
+      --cpk-json-num: #8a5900;
+      --cpk-json-bool: #c0333a;
+      --cpk-json-nil: #57575b;
+      display: block;
+      height: 100%;
+      overflow: auto;
+      color: var(--gui-ink);
+      background: var(--gui-canvas);
+      font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+      font-size: 12px;
+    }
+    :host([data-color-scheme="dark"]) {
+      color-scheme: dark;
+      --gui-ink: #f3f4f8;
+      --gui-muted: #b0b3be;
+      --gui-line: #3a3e4b;
+      --gui-soft: #20232d;
+      --gui-canvas: #15171e;
+      --gui-accent: #a296ff;
+      --gui-accent-soft: #2a2940;
+      --gui-green: #4dc69d;
+      --gui-green-soft: #172923;
+      --gui-amber: #f2c46d;
+      --gui-amber-soft: #2f2716;
+      --gui-danger: #ffabab;
+      --gui-danger-soft: #321f25;
+      --cpk-json-key: #bec2ff;
+      --cpk-json-str: #85ecce;
+      --cpk-json-num: #ffac4d;
+      --cpk-json-bool: #fa5f67;
+      --cpk-json-nil: #afafb7;
+    }
+    .header {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      padding: 12px 16px 0;
+      background: var(--gui-canvas);
+      border-bottom: 1px solid var(--gui-line);
+    }
+    .title-row,
+    .row-title,
+    .section-head {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 6px;
+    }
+    .title-row,
+    .row-title {
+      align-items: baseline;
+    }
+    .section-head h3 {
+      margin-right: auto;
+    }
+    h2 {
+      margin: 0;
+      font-size: 13px;
+      font-weight: 600;
+    }
+    h3 {
+      margin: 0 0 4px;
+      font-size: 12px;
+      font-weight: 600;
+    }
+    h4 {
+      margin: 12px 0 4px;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--gui-muted);
+    }
+    p {
+      margin: 2px 0 6px;
+    }
+    code {
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 11px;
+    }
+    .body {
+      padding: 12px 16px 24px;
+    }
+    section {
+      margin-bottom: 20px;
+    }
+    .muted {
+      color: var(--gui-muted);
+    }
+    .small {
+      font-size: 11px;
+    }
+    .strong {
+      font-weight: 600;
+      color: var(--gui-ink);
+    }
+    .warn {
+      color: var(--gui-amber);
+    }
+    .danger {
+      color: var(--gui-danger);
+    }
+    .tabs,
+    .segmented {
+      display: flex;
+      gap: 4px;
+      margin-top: 8px;
+    }
+    .segmented {
+      margin: 0 0 8px;
+    }
+    .tab {
+      border: 0;
+      border-bottom: 2px solid transparent;
+      background: none;
+      color: var(--gui-muted);
+      font: inherit;
+      font-weight: 500;
+      padding: 6px 8px;
+      cursor: pointer;
+    }
+    .segmented .tab {
+      border: 1px solid var(--gui-line);
+      border-radius: 6px;
+    }
+    .tab.active {
+      color: var(--gui-ink);
+      border-bottom-color: var(--gui-accent);
+    }
+    .segmented .tab.active {
+      border-color: var(--gui-accent);
+      background: var(--gui-accent-soft);
+    }
+    .tab:disabled {
+      opacity: 0.5;
+      cursor: default;
+    }
+    .chip {
+      display: inline-block;
+      border: 1px solid var(--gui-line);
+      border-radius: 999px;
+      padding: 0 6px;
+      font-size: 10px;
+      line-height: 16px;
+      color: var(--gui-muted);
+      background: var(--gui-soft);
+    }
+    .chip.event {
+      color: var(--gui-accent);
+      background: var(--gui-accent-soft);
+    }
+    .status-ready {
+      color: var(--gui-green);
+      background: var(--gui-green-soft);
+    }
+    .status-streaming {
+      color: var(--gui-accent);
+      background: var(--gui-accent-soft);
+    }
+    .status-error {
+      color: var(--gui-danger);
+      background: var(--gui-danger-soft);
+    }
+    .row {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 8px 0;
+      border-bottom: 1px solid var(--gui-line);
+    }
+    .row-main {
+      flex: 1;
+      min-width: 0;
+    }
+    .card {
+      border: 1px solid var(--gui-line);
+      border-radius: 8px;
+      margin-bottom: 6px;
+      overflow: hidden;
+    }
+    .card-head {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding-right: 8px;
+    }
+    .cpk-json-block {
+      margin: 4px 0 0;
+      max-height: 320px;
+      overflow: auto;
+      border: 1px solid var(--gui-line);
+      border-radius: 6px;
+      padding: 8px 10px;
+      background: var(--gui-soft);
+      color: var(--gui-ink);
+      font-family: "Spline Sans Mono", ui-monospace, monospace;
+      font-size: 11px;
+      line-height: 1.6;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+    }
+    .cpk-json-token--key {
+      color: var(--cpk-json-key);
+    }
+    .cpk-json-token--str {
+      color: var(--cpk-json-str);
+    }
+    .cpk-json-token--num {
+      color: var(--cpk-json-num);
+    }
+    .cpk-json-token--bool {
+      color: var(--cpk-json-bool);
+    }
+    .cpk-json-token--nil {
+      color: var(--cpk-json-nil);
+    }
+    .card-toggle {
+      display: flex;
+      flex: 1;
+      box-sizing: border-box;
+      width: 100%;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 2px;
+      min-width: 0;
+      border: 0;
+      background: none;
+      color: inherit;
+      font: inherit;
+      text-align: left;
+      padding: 8px 10px;
+      cursor: pointer;
+    }
+    .card-toggle:hover {
+      background: var(--gui-soft);
+    }
+    .card-body {
+      padding: 8px 10px;
+      border-top: 1px solid var(--gui-line);
+    }
+    .card > .card-body:first-child {
+      border-top: 0;
+    }
+    .button {
+      flex-shrink: 0;
+      border: 1px solid var(--gui-line);
+      border-radius: 6px;
+      background: var(--gui-canvas);
+      color: var(--gui-ink);
+      font: inherit;
+      font-size: 11px;
+      padding: 2px 8px;
+      cursor: pointer;
+    }
+    .button:hover {
+      border-color: var(--gui-accent);
+    }
+    .section-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+    }
+    .filter {
+      width: 160px;
+      box-sizing: border-box;
+      border: 1px solid var(--gui-line);
+      border-radius: 6px;
+      background: var(--gui-canvas);
+      color: var(--gui-ink);
+      font: inherit;
+      font-size: 11px;
+      padding: 3px 6px;
+    }
+    .catalog-toggle::before {
+      content: "▸";
+      display: inline-block;
+      width: 10px;
+      color: var(--gui-muted);
+      transition: transform 0.1s;
+    }
+    .catalog-toggle[aria-expanded="true"]::before {
+      transform: rotate(90deg);
+    }
+    pre {
+      margin: 4px 0 0;
+      max-height: 320px;
+      overflow: auto;
+      border-radius: 6px;
+      background: var(--gui-soft);
+      padding: 8px;
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 11px;
+      line-height: 1.45;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    pre.prompt {
+      max-height: 480px;
+    }
+    .list,
+    .ops {
+      margin: 0;
+      padding-left: 18px;
+    }
+    .list li {
+      margin-bottom: 4px;
+    }
+    .ops {
+      list-style: none;
+      padding: 0;
+    }
+    .tree {
+      list-style: none;
+      margin: 0;
+      padding-left: 14px;
+      border-left: 1px solid var(--gui-line);
+    }
+    .tree.root {
+      padding-left: 0;
+      border-left: 0;
+    }
+    .op-toggle {
+      display: flex;
+      align-items: baseline;
+      gap: 6px;
+      border: 0;
+      background: none;
+      color: inherit;
+      font: inherit;
+      padding: 2px 0;
+      cursor: pointer;
+    }
+    .empty {
+      padding: 48px 24px;
+      text-align: center;
+      color: var(--gui-muted);
+    }
+  `;
+	if (!customElements.get("cpk-generative-ui-view")) customElements.define("cpk-generative-ui-view", CpkGenerativeUIView);
+
 //#endregion
 //#region src/lib/context-helpers.ts
 	function updateSizeFromElement(state, element, fallback) {
@@ -3129,7 +4250,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			"ag-ui-events",
 			"frontend-tools",
 			"capabilities",
-			"agent-context"
+			"agent-context",
+			"generative-ui"
 		]
 	};
 	const INSPECTOR_MENU_KEYS = [
@@ -3202,7 +4324,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 //#endregion
 //#region package.json
-	var version = "1.80.0";
+	var version = "1.81.0";
 
 //#endregion
 //#region src/lib/telemetry.ts
@@ -3770,47 +4892,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		return FEATURE_ONBOARDING_PROMPT_TEMPLATE.replace(RUN_ID_PLACEHOLDER, runId).replace(INTENT_PLACEHOLDER, FEATURE_ONBOARDING_INTENT[serviceId]);
 	}
 
-//#endregion
-//#region \0@oxc-project+runtime@0.112.0/helpers/checkPrivateRedeclaration.js
-	function _checkPrivateRedeclaration(e, t) {
-		if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object");
-	}
-
-//#endregion
-//#region \0@oxc-project+runtime@0.112.0/helpers/classPrivateMethodInitSpec.js
-	function _classPrivateMethodInitSpec(e, a) {
-		_checkPrivateRedeclaration(e, a), a.add(e);
-	}
-
-//#endregion
-//#region \0@oxc-project+runtime@0.112.0/helpers/classPrivateFieldInitSpec.js
-	function _classPrivateFieldInitSpec(e, t, a) {
-		_checkPrivateRedeclaration(e, t), t.set(e, a);
-	}
-
-//#endregion
-//#region \0@oxc-project+runtime@0.112.0/helpers/assertClassBrand.js
-	function _assertClassBrand(e, t, n) {
-		if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;
-		throw new TypeError("Private element is not present on this object");
-	}
-
-//#endregion
-//#region \0@oxc-project+runtime@0.112.0/helpers/classPrivateFieldGet2.js
-	function _classPrivateFieldGet2(s, a) {
-		return s.get(_assertClassBrand(s, a));
-	}
-
-//#endregion
-//#region \0@oxc-project+runtime@0.112.0/helpers/classPrivateFieldSet2.js
-	function _classPrivateFieldSet2(s, a, r) {
-		return s.set(_assertClassBrand(s, a), r), r;
-	}
-
 //#endregion
 //#region src/index.ts
-	var _globalThis$HTMLEleme;
-	/**
+/**
 	* Resolve the attached core's request headers at send time. A core released
 	* before `resolveHeaders()` existed has only the static `headers` map, so an
 	* inspector attached to it falls back to a copy of that map.
@@ -4587,142 +5671,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	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 (_unused) {
-			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;
-	}
-	var _value = /* @__PURE__ */ new WeakMap();
-	var _hasValue = /* @__PURE__ */ new WeakMap();
-	var _cleanup = /* @__PURE__ */ new WeakMap();
-	var _container = /* @__PURE__ */ new WeakMap();
-	var _CpkJsonBlock_brand = /* @__PURE__ */ new WeakSet();
-	/**
-	* 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$HTMLEleme = globalThis.HTMLElement) !== null && _globalThis$HTMLEleme !== void 0 ? _globalThis$HTMLEleme : class {}) {
-		constructor(..._args) {
-			super(..._args);
-			_classPrivateMethodInitSpec(this, _CpkJsonBlock_brand);
-			_classPrivateFieldInitSpec(this, _value, void 0);
-			_classPrivateFieldInitSpec(this, _hasValue, false);
-			_classPrivateFieldInitSpec(this, _cleanup, void 0);
-			_classPrivateFieldInitSpec(this, _container, void 0);
-		}
-		get value() {
-			return _classPrivateFieldGet2(_value, this);
-		}
-		set value(next) {
-			if (_classPrivateFieldGet2(_hasValue, this) && Object.is(next, _classPrivateFieldGet2(_value, this))) return;
-			_classPrivateFieldSet2(_value, this, next);
-			_classPrivateFieldSet2(_hasValue, this, true);
-			if (this.isConnected) _assertClassBrand(_CpkJsonBlock_brand, this, _render).call(this);
-		}
-		connectedCallback() {
-			this.style.display = "block";
-			_assertClassBrand(_CpkJsonBlock_brand, this, _render).call(this);
-		}
-		disconnectedCallback() {
-			_assertClassBrand(_CpkJsonBlock_brand, this, _teardown).call(this);
-		}
-	};
-	function _render() {
-		_assertClassBrand(_CpkJsonBlock_brand, this, _teardown).call(this);
-		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);
-		_classPrivateFieldSet2(_container, this, container);
-		const cleanup = renderer(container, _classPrivateFieldGet2(_value, this));
-		_classPrivateFieldSet2(_cleanup, this, typeof cleanup === "function" ? cleanup : void 0);
-	}
-	function _teardown() {
-		var _classPrivateFieldGet2$1;
-		const cleanup = _classPrivateFieldGet2(_cleanup, this);
-		_classPrivateFieldSet2(_cleanup, this, void 0);
-		cleanup === null || cleanup === void 0 || cleanup();
-		(_classPrivateFieldGet2$1 = _classPrivateFieldGet2(_container, this)) === null || _classPrivateFieldGet2$1 === void 0 || _classPrivateFieldGet2$1.remove();
-		_classPrivateFieldSet2(_container, this, 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";
@@ -4779,8 +5727,8 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 		}
 	};
 	var CpkThreadList = class extends PortableLitElement {
-		constructor(..._args2) {
-			super(..._args2);
+		constructor(..._args) {
+			super(..._args);
 			this.threads = [];
 			this.selectedThreadId = null;
 			this.inAppThreadId = null;
@@ -5134,8 +6082,8 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
     }
   `;
 	var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
-		constructor(..._args3) {
-			super(..._args3);
+		constructor(..._args2) {
+			super(..._args2);
 			this.showThreadTitle = true;
 			this.threadId = null;
 			this.provider = null;
@@ -5985,7 +6933,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 					const item = ensureTool(event);
 					if (item.rawArgs) try {
 						JSON.parse(item.rawArgs);
-					} catch (_unused2) {
+					} catch (_unused) {
 						appendWarning(event, "Could not decode tool call arguments", item.rawArgs);
 					}
 					continue;
@@ -6001,7 +6949,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 						item.body = item.body ? `${item.body}\nResult: ${result}` : `Result: ${result}`;
 						try {
 							JSON.parse(result);
-						} catch (_unused3) {
+						} catch (_unused2) {
 							appendWarning(event, "Could not decode tool result", result);
 						}
 					}
@@ -8406,8 +9354,8 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 		return Math.max(6, Math.min(100, Math.round(relevance * 100)));
 	}
 	var CpkMemoryList = class extends PortableLitElement {
-		constructor(..._args4) {
-			super(..._args4);
+		constructor(..._args3) {
+			super(..._args3);
 			this.memories = [];
 			this.recallResults = null;
 			this.recallLoading = false;
@@ -9019,8 +9967,8 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 		if (!registry.get(tag)) registry.define(tag, ctor);
 	}
 	var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
-		constructor(..._args5) {
-			super(..._args5);
+		constructor(..._args4) {
+			super(..._args4);
 			this._core = null;
 			this.resolveCoreHeaders = () => this._core ? resolveAttachedCoreHeaders(this._core) : {};
 			this.coreSubscriber = null;
@@ -9031,6 +9979,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			this._memoriesAvailable = true;
 			this._memoriesRealtimeStatus = "connecting";
 			this._memoryUnsub = null;
+			this._generativeUIUnsub = null;
 			this._memorySubscribed = false;
 			this._memoryStoreUnsupported = false;
 			this.learningSnapshot = null;
@@ -9367,14 +10316,9 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 					}
 				} catch (error) {
 					if (generation !== this.learningRequestGeneration || controller.signal.aborted) return;
-					if (error instanceof 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 InspectorLearningUnsupportedError) loadOutcome = "unsupported";
+					this.learningError = "Learning status unavailable";
+					this.learningPollFailureCount += 1;
 				} finally {
 					if (generation === this.learningRequestGeneration) {
 						this.learningLoading = false;
@@ -9404,7 +10348,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 				try {
 					await clipboard.writeText(createFeatureOnboardingPrompt(service.id, onboardingRunId));
 					return true;
-				} catch (_unused4) {
+				} catch (_unused3) {
 					return false;
 				}
 			};
@@ -9583,6 +10527,13 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 				this.queueHudTelemetry(() => 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;
@@ -9652,7 +10603,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 				if (clipboard === null || clipboard === void 0 ? void 0 : clipboard.writeText) try {
 					await clipboard.writeText(createOnboardingPrompt(runId));
 					outcome = "copied";
-				} catch (_unused5) {
+				} catch (_unused4) {
 					outcome = "failed";
 				}
 				if (!this.isConnected) return;
@@ -10042,7 +10993,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 						...this.getMetadataTelemetryContext(),
 						action_placement: getMetadataActionPlacement(placement)
 					});
-				} catch (_unused6) {}
+				} catch (_unused5) {}
 			};
 			this.handleTalkToEngineerClick = () => {
 				var _this$core8;
@@ -10120,7 +11071,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 					this.invalidateThreadsExampleOverviewVideoPlay();
 					try {
 						video.pause();
-					} catch (_unused7) {}
+					} catch (_unused6) {}
 					this.threadsExampleOverviewVideoState = "ready";
 					this.requestUpdate();
 					return;
@@ -10267,7 +11218,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			if (this._core) this.attachToCore(this._core);
 		}
 		get menuItems() {
-			var _this$_core$tools$len, _this$_core, _this$_core$catalogCo, _this$_core2;
+			var _this$_core$tools$len, _this$_core, _this$_core$catalogCo, _this$_core2, _this$_core3;
 			const hasFrontendTools = ((_this$_core$tools$len = (_this$_core = this._core) === null || _this$_core === void 0 || (_this$_core = _this$_core.tools) === null || _this$_core === void 0 ? void 0 : _this$_core.length) !== null && _this$_core$tools$len !== void 0 ? _this$_core$tools$len : 0) > 0;
 			const hasCapabilities = ((_this$_core$catalogCo = (_this$_core2 = this._core) === null || _this$_core2 === void 0 || (_this$_core2 = _this$_core2.catalogComponents) === null || _this$_core2 === void 0 ? void 0 : _this$_core2.length) !== null && _this$_core$catalogCo !== void 0 ? _this$_core$catalogCo : 0) > 0;
 			return [
@@ -10316,6 +11267,11 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 					label: "Context",
 					icon: "FileText"
 				},
+				...((_this$_core3 = this._core) === null || _this$_core3 === void 0 ? void 0 : _this$_core3.ɵgenerativeUIDebugSource) ? [{
+					key: "generative-ui",
+					label: "Generative UI",
+					icon: "LayoutTemplate"
+				}] : [],
 				{
 					key: "threads",
 					label: "Rich Threads",
@@ -10370,8 +11326,8 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			return ((_this$_core$threadEnd = this._core.threadEndpoints) === null || _this$_core$threadEnd === void 0 ? void 0 : _this$_core$threadEnd.list) === false ? "unavailable" : "available";
 		}
 		areThreadEndpointsAvailable() {
-			var _this$_core3;
-			const endpoints = (_this$_core3 = this._core) === null || _this$_core3 === void 0 ? void 0 : _this$_core3.threadEndpoints;
+			var _this$_core4;
+			const endpoints = (_this$_core4 = this._core) === null || _this$_core4 === void 0 ? void 0 : _this$_core4.threadEndpoints;
 			return endpoints !== null && typeof endpoints === "object" && endpoints.list !== false;
 		}
 		synchronizeThreadCapability() {
@@ -10683,7 +11639,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 		coreSupportsInspectorMetadata(core) {
 			try {
 				return "inspectorMetadata" in core;
-			} catch (_unused8) {
+			} catch (_unused7) {
 				return false;
 			}
 		}
@@ -10691,7 +11647,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			if (!this.coreSupportsInspectorMetadata(core)) return;
 			try {
 				return core.inspectorMetadata;
-			} catch (_unused9) {
+			} catch (_unused8) {
 				return;
 			}
 		}
@@ -10699,16 +11655,16 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			this.inspectorMetadataValue = value;
 			let runtimeLicense;
 			try {
-				var _this$_core4;
-				runtimeLicense = (_this$_core4 = this._core) === null || _this$_core4 === void 0 ? void 0 : _this$_core4.licenseStatus;
-			} catch (_unused10) {
+				var _this$_core5;
+				runtimeLicense = (_this$_core5 = this._core) === null || _this$_core5 === void 0 ? void 0 : _this$_core5.licenseStatus;
+			} catch (_unused9) {
 				runtimeLicense = void 0;
 			}
 			this.inspectorMetadataProjection = projectInspectorMetadata(value, runtimeLicense);
 			this.refreshNotifications();
 		}
 		attachToCore(core) {
-			var _this$inspectorMetada2;
+			var _this$inspectorMetada2, _core$ɵsubscribeToGe, _core$ɵsubscribeToGe2;
 			this.runtimeStatus = core.runtimeConnectionStatus;
 			this.coreProperties = core.properties;
 			this.lastCoreError = null;
@@ -10809,6 +11765,10 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 				}
 			};
 			this.coreUnsubscribe = core.subscribe(this.coreSubscriber).unsubscribe;
+			this._generativeUIUnsub = (_core$ɵsubscribeToGe = (_core$ɵsubscribeToGe2 = core.ɵsubscribeToGenerativeUIDebugSource) === null || _core$ɵsubscribeToGe2 === void 0 ? void 0 : _core$ɵsubscribeToGe2.call(core, () => {
+				this.reconcileSelectedMenuVisibility();
+				this.requestUpdate();
+			})) !== null && _core$ɵsubscribeToGe !== void 0 ? _core$ɵsubscribeToGe : null;
 			this.processAgentsChanged(core.agents);
 			if (core.runtimeConnectionStatus === "connected") {
 				if (!core.telemetryDisabled) {
@@ -10883,10 +11843,10 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 		* reachable from the Intelligence-gated memory view, so it inherits the gate.
 		*/
 		runRecall(query) {
-			var _this$_core5, _this$_core5$getMemor;
+			var _this$_core6, _this$_core6$getMemor;
 			const trimmed = query.trim();
 			if (trimmed.length === 0) return;
-			const store = (_this$_core5 = this._core) === null || _this$_core5 === void 0 || (_this$_core5$getMemor = _this$_core5.getMemoryStore) === null || _this$_core5$getMemor === void 0 ? void 0 : _this$_core5$getMemor.call(_this$_core5);
+			const store = (_this$_core6 = this._core) === null || _this$_core6 === void 0 || (_this$_core6$getMemor = _this$_core6.getMemoryStore) === null || _this$_core6$getMemor === void 0 ? void 0 : _this$_core6$getMemor.call(_this$_core6);
 			if (!store || typeof store.recall !== "function") {
 				this._recallResults = [];
 				this._recallError = "Recall is not supported by this SDK version.";
@@ -10994,7 +11954,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			}
 		}
 		detachFromCore() {
-			var _this$_memoryUnsub;
+			var _this$_memoryUnsub, _this$_generativeUIUn;
 			this.threadCapabilityGeneration += 1;
 			this.threadCapabilityEnabled = null;
 			if (this.selectedThreadId !== this.selectedLocalExampleThreadId) {
@@ -11008,6 +11968,8 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			}
 			(_this$_memoryUnsub = this._memoryUnsub) === null || _this$_memoryUnsub === void 0 || _this$_memoryUnsub.call(this);
 			this._memoryUnsub = null;
+			(_this$_generativeUIUn = this._generativeUIUnsub) === null || _this$_generativeUIUn === void 0 || _this$_generativeUIUn.call(this);
+			this._generativeUIUnsub = null;
 			this._memories = [];
 			this._memoriesLoading = false;
 			this._memoriesError = null;
@@ -11475,12 +12437,12 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			if (typeof args === "string") try {
 				const parsed = JSON.parse(args);
 				return JSON.stringify(parsed, null, 2);
-			} catch (_unused11) {
+			} catch (_unused10) {
 				return args;
 			}
 			if (typeof args === "object") try {
 				return JSON.stringify(args, null, 2);
-			} catch (_unused12) {
+			} catch (_unused11) {
 				return String(args);
 			}
 			return String(args);
@@ -11503,13 +12465,13 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 				try {
 					const parsed = JSON.parse(trimmed);
 					return JSON.stringify(parsed, null, 2);
-				} catch (_unused13) {
+				} catch (_unused12) {
 					return state;
 				}
 			}
 			if (typeof state === "object") try {
 				return JSON.stringify(state, null, 2);
-			} catch (_unused14) {
+			} catch (_unused13) {
 				return String(state);
 			}
 			return String(state);
@@ -12071,8 +13033,23 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			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() {
+			var _this$learningSnapsho7;
+			if (this.learningError) return "unavailable";
+			if (this.learningSupported && !this.learningSnapshot) return "checking";
+			return ((_this$learningSnapsho7 = this.learningSnapshot) === null || _this$learningSnapsho7 === void 0 ? void 0 : _this$learningSnapsho7.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`
@@ -12442,14 +13419,14 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
     `;
 		}
 		getHomeModel() {
-			var _this$notificationFee2, _this$_core6, _this$_core7, _this$learningSnapsho7, _this$_core8, _this$_core9, _this$_core10, _this$_core11, _this$_core12;
+			var _this$notificationFee2, _this$_core7, _this$_core8, _this$learningSnapsho8, _this$_core9, _this$_core10, _this$_core11, _this$_core12, _this$_core13;
 			const lastRuntimeEvent = this.flattenedEvents[0];
 			const activeNotice = (_this$notificationFee2 = this.notificationFeed) === null || _this$notificationFee2 === void 0 ? void 0 : _this$notificationFee2.notifications.find((notice) => notice.id === this.notificationState.activeId);
 			return buildHomeModel({
-				intelligenceConnected: Boolean((_this$_core6 = this._core) === null || _this$_core6 === void 0 ? void 0 : _this$_core6.intelligence),
+				intelligenceConnected: Boolean((_this$_core7 = this._core) === null || _this$_core7 === void 0 ? void 0 : _this$_core7.intelligence),
 				threadsAvailable: this.areThreadEndpointsAvailable(),
 				metadata: this.inspectorMetadataProjection,
-				runtimeUrl: (_this$_core7 = this._core) === null || _this$_core7 === void 0 ? void 0 : _this$_core7.runtimeUrl,
+				runtimeUrl: (_this$_core8 = this._core) === null || _this$_core8 === void 0 ? void 0 : _this$_core8.runtimeUrl,
 				runtimeConnectionState: this.getCoreStatusSummary().state,
 				lastRuntimeEvent: lastRuntimeEvent ? {
 					id: lastRuntimeEvent.id,
@@ -12457,12 +13434,12 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 					type: lastRuntimeEvent.type,
 					timestamp: lastRuntimeEvent.timestamp
 				} : void 0,
-				learningOn: this.learningSupported && this.learningError === null && ((_this$learningSnapsho7 = this.learningSnapshot) === null || _this$learningSnapsho7 === void 0 ? void 0 : _this$learningSnapsho7.configuration.state) === "configured",
-				a2uiOn: ((_this$_core8 = this._core) === null || _this$_core8 === void 0 ? void 0 : _this$_core8.a2uiEnabled) === true,
-				openGenUiOn: ((_this$_core9 = this._core) === null || _this$_core9 === void 0 ? void 0 : _this$_core9.openGenerativeUIEnabled) === true,
-				suggestionsOn: ((_this$_core10 = this._core) === null || _this$_core10 === void 0 ? void 0 : _this$_core10.suggestions) === true,
-				audioOn: ((_this$_core11 = this._core) === null || _this$_core11 === void 0 ? void 0 : _this$_core11.audioFileTranscriptionEnabled) === true,
-				websocketUrl: (_this$_core12 = this._core) === null || _this$_core12 === void 0 || (_this$_core12 = _this$_core12.intelligence) === null || _this$_core12 === void 0 ? void 0 : _this$_core12.wsUrl,
+				learningOn: this.learningSupported && this.learningError === null && ((_this$learningSnapsho8 = this.learningSnapshot) === null || _this$learningSnapsho8 === void 0 ? void 0 : _this$learningSnapsho8.configuration.state) === "configured",
+				a2uiOn: ((_this$_core9 = this._core) === null || _this$_core9 === void 0 ? void 0 : _this$_core9.a2uiEnabled) === true,
+				openGenUiOn: ((_this$_core10 = this._core) === null || _this$_core10 === void 0 ? void 0 : _this$_core10.openGenerativeUIEnabled) === true,
+				suggestionsOn: ((_this$_core11 = this._core) === null || _this$_core11 === void 0 ? void 0 : _this$_core11.suggestions) === true,
+				audioOn: ((_this$_core12 = this._core) === null || _this$_core12 === void 0 ? void 0 : _this$_core12.audioFileTranscriptionEnabled) === true,
+				websocketUrl: (_this$_core13 = this._core) === null || _this$_core13 === void 0 || (_this$_core13 = _this$_core13.intelligence) === null || _this$_core13 === void 0 ? void 0 : _this$_core13.wsUrl,
 				announcementPreviewText: activeNotice === null || activeNotice === void 0 ? void 0 : activeNotice.title,
 				announcementMarkdown: activeNotice === null || activeNotice === void 0 ? void 0 : activeNotice.body,
 				announcementHtml: activeNotice ? this.notificationDocuments.get(activeNotice.id) : void 0,
@@ -12914,18 +13891,27 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 		}
 		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) => {
 				var _this$homeFeatureProm;
 				const copyState = ((_this$homeFeatureProm = this.homeFeaturePromptCopyState) === null || _this$homeFeatureProm === void 0 ? void 0 : _this$homeFeatureProm.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
@@ -12944,13 +13930,16 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
           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"
@@ -12994,6 +13983,10 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
                 </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"
@@ -13407,8 +14400,8 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 		* would be holding a repeating timer behind a closed panel.
 		*/
 		syncIntelligenceStory() {
-			var _this$_core13;
-			if (!(this.isOpen && !this.settingsOpen && this.selectedMenu === "home" && !((_this$_core13 = this._core) === null || _this$_core13 === void 0 ? void 0 : _this$_core13.intelligence) && typeof document !== "undefined" && document.visibilityState !== "hidden")) {
+			var _this$_core14;
+			if (!(this.isOpen && !this.settingsOpen && this.selectedMenu === "home" && !((_this$_core14 = this._core) === null || _this$_core14 === void 0 ? void 0 : _this$_core14.intelligence) && typeof document !== "undefined" && document.visibilityState !== "hidden")) {
 				this.intelStoryUserPinned = false;
 				this.stopIntelligenceStory();
 				return;
@@ -13841,7 +14834,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 		unbindPopOutPointerDown(win) {
 			try {
 				win.removeEventListener("pointerdown", this.handleGlobalPointerDown);
-			} catch (_unused15) {}
+			} catch (_unused14) {}
 		}
 		closePopOut() {
 			const handle = this.popOut;
@@ -14289,7 +15282,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			if (content === null || content === void 0) return "";
 			if (typeof content === "object") try {
 				return JSON.stringify(this.sanitizeForLogging(content));
-			} catch (_unused16) {
+			} catch (_unused15) {
 				return "";
 			}
 			return String(content);
@@ -14399,8 +15392,8 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			};
 		}
 		resolvePlaygroundAgentId(preferredAgentId) {
-			var _this$_core$agents, _this$_core14, _Object$keys$;
-			const agents = (_this$_core$agents = (_this$_core14 = this._core) === null || _this$_core14 === void 0 ? void 0 : _this$_core14.agents) !== null && _this$_core$agents !== void 0 ? _this$_core$agents : {};
+			var _this$_core$agents, _this$_core15, _Object$keys$;
+			const agents = (_this$_core$agents = (_this$_core15 = this._core) === null || _this$_core15 === void 0 ? void 0 : _this$_core15.agents) !== null && _this$_core$agents !== void 0 ? _this$_core$agents : {};
 			if (preferredAgentId && preferredAgentId !== "all-agents" && agents[preferredAgentId]) return preferredAgentId;
 			return (_Object$keys$ = Object.keys(agents)[0]) !== null && _Object$keys$ !== void 0 ? _Object$keys$ : null;
 		}
@@ -14429,13 +15422,13 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			});
 		}
 		startPlaygroundSession(showEphemeralNotice, seedMessages = [], seedState = {}, preferredAgentId) {
-			var _this$_core15, _this$_core16, _this$_core17;
+			var _this$_core16, _this$_core17, _this$_core18;
 			const agentId = this.resolvePlaygroundAgentId(preferredAgentId !== null && preferredAgentId !== void 0 ? preferredAgentId : this.selectedContext);
-			const sourceAgent = agentId ? typeof ((_this$_core15 = this._core) === null || _this$_core15 === void 0 ? void 0 : _this$_core15.getAgent) === "function" ? this._core.getAgent(agentId) : (_this$_core16 = this._core) === null || _this$_core16 === void 0 ? void 0 : _this$_core16.agents[agentId] : void 0;
+			const sourceAgent = agentId ? typeof ((_this$_core16 = this._core) === null || _this$_core16 === void 0 ? void 0 : _this$_core16.getAgent) === "function" ? this._core.getAgent(agentId) : (_this$_core17 = this._core) === null || _this$_core17 === void 0 ? void 0 : _this$_core17.agents[agentId] : void 0;
 			this.teardownPlaygroundAgent();
 			this.playgroundError = null;
 			this.playgroundSourceThreadId = null;
-			this.playgroundShowEphemeralNotice = showEphemeralNotice && ((_this$_core17 = this._core) === null || _this$_core17 === void 0 ? void 0 : _this$_core17.runtimeMode) !== "intelligence";
+			this.playgroundShowEphemeralNotice = showEphemeralNotice && ((_this$_core18 = this._core) === null || _this$_core18 === void 0 ? void 0 : _this$_core18.runtimeMode) !== "intelligence";
 			if (!agentId || !sourceAgent) {
 				this.requestUpdate();
 				return;
@@ -14613,18 +15606,25 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			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") {
+				var _this$_core19;
+				return lit.html`<cpk-generative-ui-view
+        data-color-scheme=${this.colorScheme}
+        .source=${(_this$_core19 = this._core) === null || _this$_core19 === void 0 ? void 0 : _this$_core19.ɵgenerativeUIDebugSource}
+      ></cpk-generative-ui-view>`;
+			}
 			if (this.selectedMenu === "threads") return this.renderThreadsView();
 			if (this.selectedMenu === "memories") return this.renderMemoriesView();
 			return lit.nothing;
 		}
 		renderPlaygroundView() {
-			var _this$playgroundAgent4, _this$playgroundAgent5, _this$_core$runtimeMo, _this$_core18, _this$_core$runtimeUr, _this$_core19, _this$playgroundSourc;
+			var _this$playgroundAgent4, _this$playgroundAgent5, _this$_core$runtimeMo, _this$_core20, _this$_core$runtimeUr, _this$_core21, _this$playgroundSourc;
 			const agentId = this.resolvePlaygroundAgentId(this.selectedContext);
 			const sourceThreads = this._threads.filter((thread) => !agentId || thread.agentId === agentId);
 			const visibleMessages = this.playgroundMessages.filter((message) => message.role === "user" || message.role === "assistant" || message.role === "reasoning" || message.role === "activity");
 			const hasRetry = (_this$playgroundAgent4 = (_this$playgroundAgent5 = this.playgroundAgent) === null || _this$playgroundAgent5 === void 0 ? void 0 : _this$playgroundAgent5.messages.some((message) => message.role === "user")) !== null && _this$playgroundAgent4 !== void 0 ? _this$playgroundAgent4 : false;
-			const runtimeMode = (_this$_core$runtimeMo = (_this$_core18 = this._core) === null || _this$_core18 === void 0 ? void 0 : _this$_core18.runtimeMode) !== null && _this$_core$runtimeMo !== void 0 ? _this$_core$runtimeMo : "sse";
-			const runtimeLabel = (_this$_core$runtimeUr = (_this$_core19 = this._core) === null || _this$_core19 === void 0 ? void 0 : _this$_core19.runtimeUrl) !== null && _this$_core$runtimeUr !== void 0 ? _this$_core$runtimeUr : "Self-managed agent";
+			const runtimeMode = (_this$_core$runtimeMo = (_this$_core20 = this._core) === null || _this$_core20 === void 0 ? void 0 : _this$_core20.runtimeMode) !== null && _this$_core$runtimeMo !== void 0 ? _this$_core$runtimeMo : "sse";
+			const runtimeLabel = (_this$_core$runtimeUr = (_this$_core21 = this._core) === null || _this$_core21 === void 0 ? void 0 : _this$_core21.runtimeUrl) !== null && _this$_core$runtimeUr !== void 0 ? _this$_core$runtimeUr : "Self-managed agent";
 			const busy = this.playgroundIsRunning || this.playgroundIsLoadingThread;
 			const suggestions = agentId && this._core ? this._core.getSuggestions(agentId).suggestions : [];
 			const lastAssistantIndex = visibleMessages.reduce((last, message, index) => message.role === "assistant" ? index : last, -1);
@@ -15112,7 +16112,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			this.metadataTelemetryFingerprints.set(props.module, fingerprint);
 			try {
 				trackMetadataModuleViewed(props);
-			} catch (_unused17) {}
+			} catch (_unused16) {}
 		}
 		maybeTrackInspectorMetadataViews() {
 			var _this$core32, _telemetryContext$gro, _telemetryContext$lea;
@@ -15408,7 +16408,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 				const raw = window.localStorage.getItem(THREADS_EXAMPLE_TOUR_STORAGE_KEY);
 				if (!raw) return false;
 				return JSON.parse(raw).dismissed === true;
-			} catch (_unused18) {
+			} catch (_unused17) {
 				return false;
 			}
 		}
@@ -15416,7 +16416,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			if (typeof window === "undefined") return;
 			try {
 				window.localStorage.setItem(THREADS_EXAMPLE_TOUR_STORAGE_KEY, JSON.stringify({ dismissed: true }));
-			} catch (_unused19) {}
+			} catch (_unused18) {}
 		}
 		/** Cancels the one deferred gate without disturbing a newer lifecycle. */
 		cancelThreadsExampleOverviewVideoGate() {
@@ -15454,7 +16454,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 					this.threadsExampleOverviewVideoState = "playing";
 					this.requestUpdate();
 				}
-			} catch (_unused20) {
+			} catch (_unused19) {
 				if (this.isCurrentThreadsExampleOverviewVideo(video, lifecycleGeneration) && this.threadsExampleOverviewVideoPlayAttemptGeneration === playAttemptGeneration) this.failThreadsExampleOverviewVideo(video, lifecycleGeneration);
 			} finally {
 				if (this.threadsExampleOverviewVideoPlayAttemptGeneration === playAttemptGeneration) this.threadsExampleOverviewVideoPlayPromise = null;
@@ -15468,7 +16468,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			try {
 				const playback = Promise.resolve(video.play());
 				this.threadsExampleOverviewVideoPlayPromise = this.settleThreadsExampleOverviewVideoPlay(video, lifecycleGeneration, playAttemptGeneration, playback);
-			} catch (_unused21) {
+			} catch (_unused20) {
 				this.failThreadsExampleOverviewVideo(video, lifecycleGeneration);
 			}
 		}
@@ -15561,11 +16561,11 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			if (video) {
 				try {
 					video.pause();
-				} catch (_unused22) {}
+				} catch (_unused21) {}
 				video.removeAttribute("src");
 				try {
 					video.load();
-				} catch (_unused23) {}
+				} catch (_unused22) {}
 			}
 			this.threadsExampleOverviewVideoLoaded = false;
 			this.threadsExampleOverviewVideoState = "deferred";
@@ -16099,9 +17099,9 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
     `;
 		}
 		renderThreadsView() {
-			var _this$_core20, _visibleThreads$find, _this$_core$runtimeUr2, _this$_core21, _this$_core$ɵheaders, _this$_core22, _this$_core23, _this$liveMessageVers2, _this$agentEvents$get6, _this$_core24;
+			var _this$_core22, _visibleThreads$find, _this$_core$runtimeUr2, _this$_core23, _this$_core$ɵheaders, _this$_core24, _this$_core25, _this$liveMessageVers2, _this$agentEvents$get6, _this$_core26;
 			const { displayThreads, threadsErrorMessage, threadsLoading } = this.getActiveThreadsState();
-			const ephemeral = !((_this$_core20 = this._core) === null || _this$_core20 === void 0 ? void 0 : _this$_core20.intelligence);
+			const ephemeral = !((_this$_core22 = this._core) === null || _this$_core22 === void 0 ? void 0 : _this$_core22.intelligence);
 			const available = this.areThreadEndpointsAvailable();
 			const hasEphemeralThreads = ephemeral && available && displayThreads.length > 0;
 			if (!ephemeral) this.ephemeralThreadsSetupOpen = false;
@@ -16239,10 +17239,10 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
                         .threadId=${selectedThread.id}
                         .thread=${selectedThread}
                         .provider=${selectedThreadIsLocalExample ? this.getExampleThreadProvider(selectedThread.id) : null}
-                        .runtimeUrl=${selectedThreadIsLocalExample ? "" : (_this$_core$runtimeUr2 = (_this$_core21 = this._core) === null || _this$_core21 === void 0 ? void 0 : _this$_core21.runtimeUrl) !== null && _this$_core$runtimeUr2 !== void 0 ? _this$_core$runtimeUr2 : ""}
+                        .runtimeUrl=${selectedThreadIsLocalExample ? "" : (_this$_core$runtimeUr2 = (_this$_core23 = this._core) === null || _this$_core23 === void 0 ? void 0 : _this$_core23.runtimeUrl) !== null && _this$_core$runtimeUr2 !== void 0 ? _this$_core$runtimeUr2 : ""}
                         .resolveHeaders=${this.resolveCoreHeaders}
-                        .headersGeneration=${(_this$_core$ɵheaders = (_this$_core22 = this._core) === null || _this$_core22 === void 0 ? void 0 : _this$_core22.ɵheadersGeneration) !== null && _this$_core$ɵheaders !== void 0 ? _this$_core$ɵheaders : 0}
-                        .threadInspectionAvailable=${selectedThreadIsLocalExample || this.areThreadEndpointsAvailable() && ((_this$_core23 = this._core) === null || _this$_core23 === void 0 || (_this$_core23 = _this$_core23.threadEndpoints) === null || _this$_core23 === void 0 ? void 0 : _this$_core23.inspect) !== false}
+                        .headersGeneration=${(_this$_core$ɵheaders = (_this$_core24 = this._core) === null || _this$_core24 === void 0 ? void 0 : _this$_core24.ɵheadersGeneration) !== null && _this$_core$ɵheaders !== void 0 ? _this$_core$ɵheaders : 0}
+                        .threadInspectionAvailable=${selectedThreadIsLocalExample || this.areThreadEndpointsAvailable() && ((_this$_core25 = this._core) === null || _this$_core25 === void 0 || (_this$_core25 = _this$_core25.threadEndpoints) === null || _this$_core25 === void 0 ? void 0 : _this$_core25.inspect) !== false}
                         .liveMessageVersion=${(_this$liveMessageVers2 = this.liveMessageVersion.get(selectedThread.id)) !== null && _this$liveMessageVers2 !== void 0 ? _this$liveMessageVers2 : 0}
                         .viewInAppMode=${this.getViewInAppMode(selectedThread, selectedThreadIsLocalExample)}
                         .viewInAppError=${this.viewInAppError}
@@ -16253,7 +17253,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
                         .agentStateInput=${this.getLatestStateForAgent(selectedThread.agentId)}
                         .agentEventsInput=${(_this$agentEvents$get6 = this.agentEvents.get(selectedThread.agentId)) !== null && _this$agentEvents$get6 !== void 0 ? _this$agentEvents$get6 : []}
                         .agentMessagesInput=${selectedThreadIsLocalExample ? EMPTY_INSPECTOR_MESSAGES : this.getLiveAgentMessagesForThread(selectedThread)}
-                        .tryFromHereAvailable=${!selectedThreadIsLocalExample && this.areThreadEndpointsAvailable() && ((_this$_core24 = this._core) === null || _this$_core24 === void 0 || (_this$_core24 = _this$_core24.threadEndpoints) === null || _this$_core24 === void 0 ? void 0 : _this$_core24.inspect) !== false}
+                        .tryFromHereAvailable=${!selectedThreadIsLocalExample && this.areThreadEndpointsAvailable() && ((_this$_core26 = this._core) === null || _this$_core26 === void 0 || (_this$_core26 = _this$_core26.threadEndpoints) === null || _this$_core26 === void 0 ? void 0 : _this$_core26.inspect) !== false}
                         .tryFromHereBusy=${this.tryFromHereBusy}
                         .tryFromHereError=${this.tryFromHereError}
                         @tryFromHere=${(event) => {
@@ -18197,7 +19197,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 					this.notificationDocuments = new Map(documents);
 					this.notificationFeed = feed;
 				}
-			} catch (_unused24) {}
+			} catch (_unused23) {}
 			this.announcementLoaded = true;
 			this.refreshNotifications();
 			this.requestUpdate();
@@ -18263,7 +19263,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			try {
 				const url = new URL(href, typeof window !== "undefined" ? window.location.href : "https://copilotkit.ai");
 				return url.protocol === "http:" || url.protocol === "https:" || url.protocol === "mailto:";
-			} catch (_unused25) {
+			} catch (_unused24) {
 				return false;
 			}
 		}
@@ -18293,7 +19293,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 				}
 				if (isRootRelative) return `${url.pathname}${url.search}${url.hash}`;
 				return url.toString();
-			} catch (_unused26) {
+			} catch (_unused25) {
 				return href;
 			}
 		}