@copilotkit/web-inspector 1.64.1 → 1.64.2-canary.1785366148

package/dist/index.cjs

@@ -15,6 +15,12 @@ let _copilotkit_core = require("@copilotkit/core");
 //#region src/index.ts
 const WEB_INSPECTOR_TAG = "cpk-web-inspector";
 const THREAD_INSPECTOR_TAG = "cpk-thread-inspector";
+/**
+* User-facing label for the memory surface (nav item + view header). The menu
+* KEY stays "memories" for persistence/telemetry stability; only the label
+* changed from "Learning" to "Memory".
+*/
+const MEMORY_VIEW_LABEL = "Memory";
 const EDGE_MARGIN = 16;
 const DRAG_THRESHOLD = 6;
 const MIN_WINDOW_WIDTH = 600;
@@ -37,6 +43,7 @@ const MAX_TOTAL_EVENTS = 500;
 const INTELLIGENCE_SIGNUP_URL = "https://go.copilotkit.ai/intelligence-signup";
 const THREADS_INTELLIGENCE_SIGNIN_URL = "https://dashboard.operations.copilotkit.ai/sign-in";
 const TALK_TO_ENGINEER_URL = "https://www.copilotkit.ai/talk-to-an-engineer";
+const CAPABILITIES_TAB_LABEL = "Capabilities";
 const THREADS_DOCS_URL = "https://docs.copilotkit.ai/threads";
 const SELF_HOSTED_INTELLIGENCE_URL = "https://docs.copilotkit.ai/premium/self-hosting";
 const THREADS_EXAMPLE_OVERVIEW_VIDEO_URL = "https://cdn.copilotkit.ai/corp-site/videos/copilotkit-generative-ui-agentic-frontend-demo.webm";
@@ -67,6 +74,29 @@ const AGENT_EVENT_TYPES = [
 	"ACTIVITY_SNAPSHOT",
 	"ACTIVITY_DELTA"
 ];
+/**
+* Map core.tools (the registry INCLUDING disabled tools) into Capabilities-tab
+* frontend-tool rows. Pure: no DOM, no `this`. Reads current on/off state from
+* core.isToolEnabled(name, agentId?) per the A1 contract.
+*/
+function buildCapabilityRows(core) {
+	const rows = [];
+	for (const tool of core.tools ?? []) {
+		const key = `${tool.agentId ?? ""}:${tool.name}`;
+		rows.push({
+			key,
+			name: tool.name,
+			description: tool.description,
+			agentId: tool.agentId,
+			enabled: core.isToolEnabled(tool.name, tool.agentId)
+		});
+	}
+	return rows.sort((a, b) => {
+		const agentCompare = (a.agentId ?? "").localeCompare(b.agentId ?? "");
+		if (agentCompare !== 0) return agentCompare;
+		return a.name.localeCompare(b.name);
+	});
+}
 const THREADS_EXAMPLE_THREADS = [
 	{
 		id: "example-realtime-sync",
@@ -2845,10 +2875,45 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
     `;
 	}
 };
+/**
+* Normalizes a memory's raw recall score to a 0..1 relevance ratio relative to
+* the strongest result in the same result set. Recall scores are RRF scores
+* (relative), so a bar is only meaningful against the set max. Returns
+* `undefined` when no meaningful ranking exists (empty set, non-positive max,
+* missing score) so the caller renders no bar.
+*/
+function normalizeRelevance(score, maxScore) {
+	if (maxScore <= 0) return void 0;
+	if (score === void 0 || !Number.isFinite(score)) return void 0;
+	const ratio = score / maxScore;
+	if (ratio <= 0) return 0;
+	return ratio > 1 ? 1 : ratio;
+}
+/** Largest finite `score` across a result set, or 0 when none present. */
+function maxRecallScore(memories) {
+	let max = 0;
+	for (const m of memories) {
+		const s = m.score;
+		if (typeof s === "number" && Number.isFinite(s) && s > max) max = s;
+	}
+	return max;
+}
+/**
+* Percent width for a relevance bar. Mirrors the banking reference
+* (`max(6, round(rel*100))%`) so a matched-but-weak result still shows a sliver.
+* Returns a whole number in [6, 100].
+*/
+function relevanceBarWidth(relevance) {
+	return Math.max(6, Math.min(100, Math.round(relevance * 100)));
+}
 var CpkMemoryList = class extends lit.LitElement {
 	constructor(..._args3) {
 		super(..._args3);
 		this.memories = [];
+		this.recallResults = null;
+		this.recallLoading = false;
+		this.recallError = null;
+		this.recallQueryText = "";
 		this.search = "";
 		this.kind = "all";
 		this.onSearchInput = (event) => {
@@ -2859,10 +2924,39 @@ var CpkMemoryList = class extends lit.LitElement {
 			if (!seg) return;
 			this.kind = seg.dataset["kind"];
 		};
+		this.onRecallInput = (event) => {
+			const value = event.target.value;
+			this.recallQueryText = value;
+			this.dispatchEvent(new CustomEvent("recallQueryChanged", {
+				detail: value,
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this.onRecallSubmit = (event) => {
+			event.preventDefault();
+			const query = this.recallQueryText.trim();
+			if (query.length === 0 || this.recallLoading) return;
+			this.dispatchEvent(new CustomEvent("recallSubmitted", {
+				detail: query,
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this.onRecallClear = () => {
+			this.dispatchEvent(new CustomEvent("recallCleared", {
+				bubbles: true,
+				composed: true
+			}));
+		};
 	}
 	static {
 		this.properties = {
 			memories: { attribute: false },
+			recallResults: { attribute: false },
+			recallLoading: { attribute: false },
+			recallError: { attribute: false },
+			recallQueryText: { attribute: false },
 			search: { state: true },
 			kind: { state: true }
 		};
@@ -3066,6 +3160,117 @@ var CpkMemoryList = class extends lit.LitElement {
     .cpk-ml__empty-icon {
       color: #c0c0c8;
     }
+
+    /* ── Recall ── */
+    .cpk-ml__recall {
+      display: flex;
+      gap: 6px;
+      padding: 10px 12px;
+      border-bottom: 1px solid #dbdbe5;
+      flex-shrink: 0;
+    }
+    .cpk-ml__recall-input {
+      flex: 1;
+      box-sizing: border-box;
+      font-family: "Plus Jakarta Sans", sans-serif;
+      font-size: 12px;
+      padding: 7px 10px;
+      border-radius: 6px;
+      border: 1px solid #dbdbe5;
+      background: #fff;
+      color: #010507;
+      outline: none;
+      transition: border-color 0.15s;
+    }
+    .cpk-ml__recall-input:focus {
+      border-color: #bec2ff;
+    }
+    .cpk-ml__recall-btn {
+      font-family: "Plus Jakarta Sans", sans-serif;
+      font-size: 12px;
+      font-weight: 500;
+      padding: 7px 12px;
+      border-radius: 6px;
+      border: 1px solid #dbdbe5;
+      background: #fff;
+      color: #010507;
+      cursor: pointer;
+      transition: background 0.1s;
+    }
+    .cpk-ml__recall-btn:hover:not(:disabled) {
+      background: #f0f0f5;
+    }
+    .cpk-ml__recall-btn:disabled {
+      opacity: 0.4;
+      cursor: default;
+    }
+    .cpk-ml__recall-section {
+      flex-shrink: 0;
+      max-height: 45%;
+      overflow-y: auto;
+      padding: 8px 12px;
+      border-bottom: 1px solid #dbdbe5;
+      background: #fbfbfd;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .cpk-ml__recall-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+    }
+    .cpk-ml__recall-title {
+      font-family: "Plus Jakarta Sans", sans-serif;
+      font-size: 12px;
+      font-weight: 600;
+      color: #010507;
+    }
+    .cpk-ml__recall-clear {
+      font-family: "Plus Jakarta Sans", sans-serif;
+      font-size: 10px;
+      color: #838389;
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 0;
+    }
+    .cpk-ml__recall-clear:hover {
+      color: #010507;
+    }
+    .cpk-ml__recall-msg {
+      font-size: 11px;
+      color: #838389;
+      line-height: 1.45;
+    }
+    .cpk-ml__recall-msg--error {
+      color: #c0333a;
+    }
+
+    /* ── Relevance bar ── */
+    .cpk-ml__relevance {
+      height: 4px;
+      width: 100%;
+      overflow: hidden;
+      border-radius: 9999px;
+      background: #f0f0f5;
+    }
+    .cpk-ml__relevance-fill {
+      height: 100%;
+      border-radius: 9999px;
+      background: #6366f1;
+    }
+
+    /* ── Scope badge variants ── */
+    .cpk-ml__scope-badge--user {
+      background: #f0f0f5;
+      color: #838389;
+    }
+    .cpk-ml__scope-badge--project {
+      background: #fef3c7;
+      color: #92660c;
+    }
   `;
 	}
 	/** Memories that pass the current text search (before kind filter). */
@@ -3093,6 +3298,86 @@ var CpkMemoryList = class extends lit.LitElement {
 		return lit.html`<span class="cpk-ml__kind-badge cpk-ml__kind-badge--${kind}"
       >${kind}</span
     >`;
+	}
+	renderScopeBadge(scope) {
+		return lit.html`<span
+      class="cpk-ml__scope-badge cpk-ml__scope-badge--${scope === "project" ? "project" : "user"}"
+      >${scope}</span
+    >`;
+	}
+	/**
+	* Renders one memory card. `relevance` (0..1) is supplied only for recall
+	* results — when present a relevance bar is drawn; the full list omits it.
+	*/
+	renderCard(m, relevance) {
+		const threads = m.sourceThreadIds.length;
+		return lit.html`
+      <div class="cpk-ml__card">
+        <div class="cpk-ml__card-badges">
+          ${this.renderKindBadge(m.kind)}${this.renderScopeBadge(m.scope)}
+        </div>
+        <div class="cpk-ml__content">${m.content}</div>
+        ${relevance !== void 0 ? lit.html`<div class="cpk-ml__relevance">
+              <div
+                class="cpk-ml__relevance-fill"
+                style="width:${relevanceBarWidth(relevance)}%;"
+              ></div>
+            </div>` : lit.nothing}
+        <div class="cpk-ml__footer">
+          <span class="cpk-ml__footer-threads"
+            >${threads} source thread${threads === 1 ? "" : "s"}</span
+          >
+          <span class="cpk-ml__footer-id">${this.shortId(m.id)}</span>
+        </div>
+      </div>
+    `;
+	}
+	renderRecallForm() {
+		const disabled = this.recallLoading || this.recallQueryText.trim().length === 0;
+		return lit.html`
+      <form class="cpk-ml__recall" @submit=${this.onRecallSubmit}>
+        <input
+          type="text"
+          placeholder="Recall by meaning…"
+          aria-label="Recall memories by meaning"
+          class="cpk-ml__recall-input"
+          .value=${this.recallQueryText}
+          @input=${this.onRecallInput}
+        />
+        <button type="submit" class="cpk-ml__recall-btn" ?disabled=${disabled}>
+          ${this.recallLoading ? "…" : "Recall"}
+        </button>
+      </form>
+    `;
+	}
+	renderRecallSection() {
+		const results = this.recallResults;
+		if (results === null) return lit.html``;
+		const max = maxRecallScore(results);
+		return lit.html`
+      <section
+        class="cpk-ml__recall-section"
+        aria-label="Semantic recall results"
+      >
+        <div class="cpk-ml__recall-header">
+          <span class="cpk-ml__recall-title"
+            >Semantic recall (${results.length})</span
+          >
+          <button
+            type="button"
+            class="cpk-ml__recall-clear"
+            @click=${this.onRecallClear}
+          >
+            Clear
+          </button>
+        </div>
+        ${this.recallError ? lit.html`<p class="cpk-ml__recall-msg cpk-ml__recall-msg--error">
+              Recall failed: ${this.recallError}
+            </p>` : results.length === 0 ? lit.html`
+                  <p class="cpk-ml__recall-msg">No memories matched that query.</p>
+                ` : results.map((m) => this.renderCard(m, normalizeRelevance(m.score, max)))}
+      </section>
+    `;
 	}
 	renderEmpty() {
 		const q = this.search.trim();
@@ -3129,6 +3414,9 @@ var CpkMemoryList = class extends lit.LitElement {
 		const filtered = this.filtered;
 		return lit.html`
       <div class="cpk-ml">
+        <!-- Semantic recall -->
+        ${this.renderRecallForm()} ${this.renderRecallSection()}
+
         <!-- Search -->
         <div class="cpk-ml__search">
           <input
@@ -3164,21 +3452,7 @@ var CpkMemoryList = class extends lit.LitElement {
 
         <!-- Memory list -->
         <div class="cpk-ml__list">
-          ${filtered.map((m) => lit.html`
-              <div class="cpk-ml__card">
-                <div class="cpk-ml__card-badges">
-                  ${this.renderKindBadge(m.kind)}
-                  <span class="cpk-ml__scope-badge">${m.scope}</span>
-                </div>
-                <div class="cpk-ml__content">${m.content}</div>
-                <div class="cpk-ml__footer">
-                  <span class="cpk-ml__footer-threads"
-                    >${m.sourceThreadIds.length} source thread${m.sourceThreadIds.length === 1 ? "" : "s"}</span
-                  >
-                  <span class="cpk-ml__footer-id">${this.shortId(m.id)}</span>
-                </div>
-              </div>
-            `)}
+          ${filtered.map((m) => this.renderCard(m))}
           ${filtered.length === 0 ? this.renderEmpty() : lit.nothing}
         </div>
       </div>
@@ -3204,6 +3478,11 @@ var WebInspectorElement = class extends lit.LitElement {
 		this._memoryUnsub = null;
 		this._memorySubscribed = false;
 		this._memoryStoreUnsupported = false;
+		this._recallResults = null;
+		this._recallLoading = false;
+		this._recallError = null;
+		this._recallQuery = "";
+		this._recallSeq = 0;
 		this.runtimeStatus = null;
 		this.coreProperties = {};
 		this.lastCoreError = null;
@@ -3248,6 +3527,7 @@ var WebInspectorElement = class extends lit.LitElement {
 		this.attemptedAutoAttach = false;
 		this.cachedTools = [];
 		this.toolSignature = "";
+		this._capabilitiesVersion = 0;
 		this.eventFilterText = "";
 		this.eventTypeFilter = "all";
 		this.evtColWidths = [
@@ -3595,7 +3875,8 @@ var WebInspectorElement = class extends lit.LitElement {
 			autoAttachCore: {
 				type: Boolean,
 				attribute: "auto-attach-core"
-			}
+			},
+			_capabilitiesVersion: { state: true }
 		};
 	}
 	get core() {
@@ -3610,6 +3891,9 @@ var WebInspectorElement = class extends lit.LitElement {
 		if (this._core) this.attachToCore(this._core);
 	}
 	get menuItems() {
+		const hasFrontendTools = (this._core?.tools?.length ?? 0) > 0;
+		const hasCatalog = (this._core?.catalogComponents?.length ?? 0) > 0;
+		const hasCapabilities = hasFrontendTools || hasCatalog;
 		return [
 			{
 				key: "ag-ui-events",
@@ -3621,11 +3905,16 @@ var WebInspectorElement = class extends lit.LitElement {
 				label: "Agent",
 				icon: "Bot"
 			},
-			...(this._core?.tools?.length ?? 0) > 0 ? [{
+			...hasFrontendTools ? [{
 				key: "frontend-tools",
 				label: "Frontend Tools",
 				icon: "Hammer"
 			}] : [],
+			...hasCapabilities ? [{
+				key: "capabilities",
+				label: CAPABILITIES_TAB_LABEL,
+				icon: "SlidersHorizontal"
+			}] : [],
 			{
 				key: "agent-context",
 				label: "Context",
@@ -3638,7 +3927,7 @@ var WebInspectorElement = class extends lit.LitElement {
 			},
 			{
 				key: "memories",
-				label: "Learning",
+				label: MEMORY_VIEW_LABEL,
 				icon: "Brain"
 			}
 		];
@@ -3913,6 +4202,50 @@ var WebInspectorElement = class extends lit.LitElement {
 		this._memoryUnsub = () => memSubs.forEach((s) => s.unsubscribe());
 		this.requestUpdate();
 	}
+	/**
+	* Runs a semantic recall via the memory store (`core.getMemoryStore().recall`,
+	* from B2) and stores ranked results. Guarded by a monotonic sequence token
+	* so a stale request cannot overwrite a newer result / Clear / detach. Only
+	* reachable from the Intelligence-gated memory view, so it inherits the gate.
+	*/
+	runRecall(query) {
+		const trimmed = query.trim();
+		if (trimmed.length === 0) return;
+		const store = this._core?.getMemoryStore?.();
+		if (!store || typeof store.recall !== "function") {
+			this._recallResults = [];
+			this._recallError = "Recall is not supported by this SDK version.";
+			this._recallLoading = false;
+			this.requestUpdate();
+			return;
+		}
+		const seq = ++this._recallSeq;
+		this._recallLoading = true;
+		this._recallError = null;
+		this.requestUpdate();
+		store.recall(trimmed).then((results) => {
+			if (seq !== this._recallSeq) return;
+			this._recallResults = results;
+			this._recallError = null;
+			this._recallLoading = false;
+			this.requestUpdate();
+		}).catch((error) => {
+			if (seq !== this._recallSeq) return;
+			this._recallResults = [];
+			this._recallError = error instanceof Error ? error.message : "unknown error";
+			this._recallLoading = false;
+			this.requestUpdate();
+		});
+	}
+	/** Clears recall results/section and cancels any in-flight recall. */
+	clearRecall() {
+		this._recallSeq += 1;
+		this._recallResults = null;
+		this._recallError = null;
+		this._recallLoading = false;
+		this._recallQuery = "";
+		this.requestUpdate();
+	}
 	detachFromCore() {
 		if (this.coreUnsubscribe) {
 			this.coreUnsubscribe();
@@ -3927,6 +4260,11 @@ var WebInspectorElement = class extends lit.LitElement {
 		this._memoriesRealtimeStatus = "connecting";
 		this._memorySubscribed = false;
 		this._memoryStoreUnsupported = false;
+		this._recallSeq += 1;
+		this._recallResults = null;
+		this._recallLoading = false;
+		this._recallError = null;
+		this._recallQuery = "";
 		this.coreSubscriber = null;
 		this.runtimeStatus = null;
 		this.lastCoreError = null;
@@ -5892,6 +6230,7 @@ ${argsString}</pre
 		if (this.selectedMenu === "ag-ui-events") return this.renderEventsTable();
 		if (this.selectedMenu === "agents") return this.renderAgentsView();
 		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 === "threads") return this.renderThreadsView();
 		if (this.selectedMenu === "memories") return this.renderMemoriesView();
@@ -6836,7 +7175,7 @@ ${argsString}</pre
 		return lit.html`
       <div style="display:flex;height:100%;overflow:hidden;flex-direction:column;">
         <div class="cpk-section-header" style="display:flex;align-items:center;justify-content:space-between;">
-          <h4>Learning</h4>
+          <h4>${MEMORY_VIEW_LABEL}</h4>
           <div style="display:flex;align-items:center;gap:6px;">
             ${this.renderMemoryRealtimeIndicator()}
             <span
@@ -6891,6 +7230,19 @@ ${argsString}</pre
           <cpk-memory-list
             style="height:100%;"
             .memories=${this._memories}
+            .recallResults=${this._recallResults}
+            .recallLoading=${this._recallLoading}
+            .recallError=${this._recallError}
+            .recallQueryText=${this._recallQuery}
+            @recallQueryChanged=${(e) => {
+			this._recallQuery = e.detail;
+		}}
+            @recallSubmitted=${(e) => {
+			this.runRecall(e.detail);
+		}}
+            @recallCleared=${() => {
+			this.clearRecall();
+		}}
           ></cpk-memory-list>
         </div>
       </div>
@@ -7530,6 +7882,112 @@ ${prettyEvent}</pre
 		this.persistState();
 		this.requestUpdate();
 	}
+	renderCapabilitiesView() {
+		if (!this._core) return lit.html`
+        <div
+          class="flex h-full items-center justify-center px-4 py-8 text-xs text-gray-500"
+        >
+          No core instance available
+        </div>
+      `;
+		const toolRows = buildCapabilityRows(this._core);
+		const catalog = this._core.catalogComponents ?? [];
+		const hasCatalog = catalog.length > 0;
+		if (toolRows.length === 0 && !hasCatalog) return lit.html`
+        <div class="flex h-full items-center justify-center px-4 py-8 text-center">
+          <div class="max-w-md">
+            <div class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8">
+              ${this.renderIcon("SlidersHorizontal")}
+            </div>
+            <p class="text-sm text-gray-600">No capabilities registered</p>
+            <p class="mt-2 text-xs text-gray-500">
+              Frontend tools and A2UI catalog components will appear here once
+              they are registered on the CopilotKit core.
+            </p>
+          </div>
+        </div>
+      `;
+		return lit.html`
+      <div class="flex h-full flex-col overflow-hidden">
+        <div class="overflow-auto p-4">
+          <div class="space-y-3">
+            <p class="text-xs text-gray-500">
+              Toggle a capability off to omit it from what the agent sees. This
+              is a client-side experimentation surface and takes effect
+              immediately.
+            </p>
+          </div>
+
+          ${toolRows.length > 0 ? lit.html`
+                <div class="mt-4 space-y-2">
+                  <h3 class="text-sm text-slate-500">Frontend tools</h3>
+                  <div class="space-y-2">
+                    ${toolRows.map((row) => this.renderCapabilityRow(row))}
+                  </div>
+                </div>
+              ` : lit.nothing}
+
+          ${hasCatalog ? lit.html`
+                <div class="mt-6 space-y-2">
+                  <h3 class="text-sm text-slate-500">A2UI catalog components</h3>
+                  <div class="space-y-2">
+                    ${catalog.map((component) => this.renderCapabilityRow({
+			key: component.name,
+			name: component.name,
+			description: component.description,
+			enabled: this._core.isCatalogComponentEnabled(component.name)
+		}))}
+                  </div>
+                </div>
+              ` : lit.nothing}
+        </div>
+      </div>
+    `;
+	}
+	renderCapabilityRow(row) {
+		const isTool = row.key.includes(":");
+		return lit.html`
+      <div class="flex items-center justify-between gap-3 rounded-lg border border-gray-200 bg-white px-4 py-3">
+        <div class="min-w-0 flex-1">
+          <div class="flex items-center gap-2">
+            <span class="font-mono text-sm font-semibold text-gray-900">${row.name}</span>
+            ${row.agentId ? lit.html`<span class="inline-flex items-center gap-1 text-xs text-gray-500">
+                    ${this.renderIcon("Bot")}<span class="font-mono">${row.agentId}</span>
+                  </span>` : lit.nothing}
+          </div>
+          ${row.description ? lit.html`<p class="mt-1 text-xs text-gray-600">${row.description}</p>` : lit.nothing}
+        </div>
+        ${this.renderCapabilitySwitch(row.enabled, () => isTool ? this.handleToggleTool(row) : this.handleToggleCatalogComponent(row.name))}
+      </div>
+    `;
+	}
+	renderCapabilitySwitch(enabled, onToggle) {
+		return lit.html`
+      <button
+        type="button"
+        role="switch"
+        aria-checked=${enabled ? "true" : "false"}
+        class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300 ${enabled ? "bg-emerald-500" : "bg-gray-300"}"
+        @click=${onToggle}
+      >
+        <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${enabled ? "translate-x-4" : "translate-x-0.5"}"></span>
+      </button>
+    `;
+	}
+	handleToggleTool(row) {
+		if (!this._core) return;
+		const next = !row.enabled;
+		this._core.setToolEnabled(row.name, next, row.agentId);
+		this._capabilitiesVersion += 1;
+		this.requestUpdate();
+	}
+	handleToggleCatalogComponent(name) {
+		if (!this._core) return;
+		const next = !this._core.isCatalogComponentEnabled(name);
+		this._core.setCatalogComponentEnabled(name, next);
+		this._capabilitiesVersion += 1;
+		this.requestUpdate();
+	}
 	renderToolsView() {
 		if (!this._core) return lit.html`
         <div
@@ -8235,4 +8693,8 @@ exports.WEB_INSPECTOR_TAG = WEB_INSPECTOR_TAG;
 exports.WebInspectorElement = WebInspectorElement;
 exports.defineWebInspector = defineWebInspector;
 exports.ɵCpkThreadDetails = ɵCpkThreadDetails;
+exports.ɵbuildCapabilityRows = buildCapabilityRows;
+exports.ɵmaxRecallScore = maxRecallScore;
+exports.ɵnormalizeRelevance = normalizeRelevance;
+exports.ɵrelevanceBarWidth = relevanceBarWidth;
 //# sourceMappingURL=index.cjs.map