@copilotkit/web-inspector 1.64.2-canary.1785346263 → 1.64.2-canary.parallel1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -14,6 +14,12 @@ import { CopilotKitCoreRuntimeConnectionStatus, ɵcreateThreadStore, ɵselectMem
14
14
  //#region src/index.ts
15
15
  const WEB_INSPECTOR_TAG = "cpk-web-inspector";
16
16
  const THREAD_INSPECTOR_TAG = "cpk-thread-inspector";
17
+ /**
18
+ * User-facing label for the memory surface (nav item + view header). The menu
19
+ * KEY stays "memories" for persistence/telemetry stability; only the label
20
+ * changed from "Learning" to "Memory".
21
+ */
22
+ const MEMORY_VIEW_LABEL = "Memory";
17
23
  const EDGE_MARGIN = 16;
18
24
  const DRAG_THRESHOLD = 6;
19
25
  const MIN_WINDOW_WIDTH = 600;
@@ -36,6 +42,7 @@ const MAX_TOTAL_EVENTS = 500;
36
42
  const INTELLIGENCE_SIGNUP_URL = "https://go.copilotkit.ai/intelligence-signup";
37
43
  const THREADS_INTELLIGENCE_SIGNIN_URL = "https://dashboard.operations.copilotkit.ai/sign-in";
38
44
  const TALK_TO_ENGINEER_URL = "https://www.copilotkit.ai/talk-to-an-engineer";
45
+ const CAPABILITIES_TAB_LABEL = "Capabilities";
39
46
  const THREADS_DOCS_URL = "https://docs.copilotkit.ai/threads";
40
47
  const SELF_HOSTED_INTELLIGENCE_URL = "https://docs.copilotkit.ai/premium/self-hosting";
41
48
  const THREADS_EXAMPLE_OVERVIEW_VIDEO_URL = "https://cdn.copilotkit.ai/corp-site/videos/copilotkit-generative-ui-agentic-frontend-demo.webm";
@@ -66,6 +73,29 @@ const AGENT_EVENT_TYPES = [
66
73
  "ACTIVITY_SNAPSHOT",
67
74
  "ACTIVITY_DELTA"
68
75
  ];
76
+ /**
77
+ * Map core.tools (the registry INCLUDING disabled tools) into Capabilities-tab
78
+ * frontend-tool rows. Pure: no DOM, no `this`. Reads current on/off state from
79
+ * core.isToolEnabled(name, agentId?) per the A1 contract.
80
+ */
81
+ function buildCapabilityRows(core) {
82
+ const rows = [];
83
+ for (const tool of core.tools ?? []) {
84
+ const key = `${tool.agentId ?? ""}:${tool.name}`;
85
+ rows.push({
86
+ key,
87
+ name: tool.name,
88
+ description: tool.description,
89
+ agentId: tool.agentId,
90
+ enabled: core.isToolEnabled(tool.name, tool.agentId)
91
+ });
92
+ }
93
+ return rows.sort((a, b) => {
94
+ const agentCompare = (a.agentId ?? "").localeCompare(b.agentId ?? "");
95
+ if (agentCompare !== 0) return agentCompare;
96
+ return a.name.localeCompare(b.name);
97
+ });
98
+ }
69
99
  const THREADS_EXAMPLE_THREADS = [
70
100
  {
71
101
  id: "example-realtime-sync",
@@ -2844,10 +2874,45 @@ ${unsafeHTML(highlightedJson(stateValue))}</pre
2844
2874
  `;
2845
2875
  }
2846
2876
  };
2877
+ /**
2878
+ * Normalizes a memory's raw recall score to a 0..1 relevance ratio relative to
2879
+ * the strongest result in the same result set. Recall scores are RRF scores
2880
+ * (relative), so a bar is only meaningful against the set max. Returns
2881
+ * `undefined` when no meaningful ranking exists (empty set, non-positive max,
2882
+ * missing score) so the caller renders no bar.
2883
+ */
2884
+ function normalizeRelevance(score, maxScore) {
2885
+ if (maxScore <= 0) return void 0;
2886
+ if (score === void 0 || !Number.isFinite(score)) return void 0;
2887
+ const ratio = score / maxScore;
2888
+ if (ratio <= 0) return 0;
2889
+ return ratio > 1 ? 1 : ratio;
2890
+ }
2891
+ /** Largest finite `score` across a result set, or 0 when none present. */
2892
+ function maxRecallScore(memories) {
2893
+ let max = 0;
2894
+ for (const m of memories) {
2895
+ const s = m.score;
2896
+ if (typeof s === "number" && Number.isFinite(s) && s > max) max = s;
2897
+ }
2898
+ return max;
2899
+ }
2900
+ /**
2901
+ * Percent width for a relevance bar. Mirrors the banking reference
2902
+ * (`max(6, round(rel*100))%`) so a matched-but-weak result still shows a sliver.
2903
+ * Returns a whole number in [6, 100].
2904
+ */
2905
+ function relevanceBarWidth(relevance) {
2906
+ return Math.max(6, Math.min(100, Math.round(relevance * 100)));
2907
+ }
2847
2908
  var CpkMemoryList = class extends LitElement {
2848
2909
  constructor(..._args3) {
2849
2910
  super(..._args3);
2850
2911
  this.memories = [];
2912
+ this.recallResults = null;
2913
+ this.recallLoading = false;
2914
+ this.recallError = null;
2915
+ this.recallQueryText = "";
2851
2916
  this.search = "";
2852
2917
  this.kind = "all";
2853
2918
  this.onSearchInput = (event) => {
@@ -2858,10 +2923,39 @@ var CpkMemoryList = class extends LitElement {
2858
2923
  if (!seg) return;
2859
2924
  this.kind = seg.dataset["kind"];
2860
2925
  };
2926
+ this.onRecallInput = (event) => {
2927
+ const value = event.target.value;
2928
+ this.recallQueryText = value;
2929
+ this.dispatchEvent(new CustomEvent("recallQueryChanged", {
2930
+ detail: value,
2931
+ bubbles: true,
2932
+ composed: true
2933
+ }));
2934
+ };
2935
+ this.onRecallSubmit = (event) => {
2936
+ event.preventDefault();
2937
+ const query = this.recallQueryText.trim();
2938
+ if (query.length === 0 || this.recallLoading) return;
2939
+ this.dispatchEvent(new CustomEvent("recallSubmitted", {
2940
+ detail: query,
2941
+ bubbles: true,
2942
+ composed: true
2943
+ }));
2944
+ };
2945
+ this.onRecallClear = () => {
2946
+ this.dispatchEvent(new CustomEvent("recallCleared", {
2947
+ bubbles: true,
2948
+ composed: true
2949
+ }));
2950
+ };
2861
2951
  }
2862
2952
  static {
2863
2953
  this.properties = {
2864
2954
  memories: { attribute: false },
2955
+ recallResults: { attribute: false },
2956
+ recallLoading: { attribute: false },
2957
+ recallError: { attribute: false },
2958
+ recallQueryText: { attribute: false },
2865
2959
  search: { state: true },
2866
2960
  kind: { state: true }
2867
2961
  };
@@ -3065,6 +3159,117 @@ var CpkMemoryList = class extends LitElement {
3065
3159
  .cpk-ml__empty-icon {
3066
3160
  color: #c0c0c8;
3067
3161
  }
3162
+
3163
+ /* ── Recall ── */
3164
+ .cpk-ml__recall {
3165
+ display: flex;
3166
+ gap: 6px;
3167
+ padding: 10px 12px;
3168
+ border-bottom: 1px solid #dbdbe5;
3169
+ flex-shrink: 0;
3170
+ }
3171
+ .cpk-ml__recall-input {
3172
+ flex: 1;
3173
+ box-sizing: border-box;
3174
+ font-family: "Plus Jakarta Sans", sans-serif;
3175
+ font-size: 12px;
3176
+ padding: 7px 10px;
3177
+ border-radius: 6px;
3178
+ border: 1px solid #dbdbe5;
3179
+ background: #fff;
3180
+ color: #010507;
3181
+ outline: none;
3182
+ transition: border-color 0.15s;
3183
+ }
3184
+ .cpk-ml__recall-input:focus {
3185
+ border-color: #bec2ff;
3186
+ }
3187
+ .cpk-ml__recall-btn {
3188
+ font-family: "Plus Jakarta Sans", sans-serif;
3189
+ font-size: 12px;
3190
+ font-weight: 500;
3191
+ padding: 7px 12px;
3192
+ border-radius: 6px;
3193
+ border: 1px solid #dbdbe5;
3194
+ background: #fff;
3195
+ color: #010507;
3196
+ cursor: pointer;
3197
+ transition: background 0.1s;
3198
+ }
3199
+ .cpk-ml__recall-btn:hover:not(:disabled) {
3200
+ background: #f0f0f5;
3201
+ }
3202
+ .cpk-ml__recall-btn:disabled {
3203
+ opacity: 0.4;
3204
+ cursor: default;
3205
+ }
3206
+ .cpk-ml__recall-section {
3207
+ flex-shrink: 0;
3208
+ max-height: 45%;
3209
+ overflow-y: auto;
3210
+ padding: 8px 12px;
3211
+ border-bottom: 1px solid #dbdbe5;
3212
+ background: #fbfbfd;
3213
+ display: flex;
3214
+ flex-direction: column;
3215
+ gap: 8px;
3216
+ }
3217
+ .cpk-ml__recall-header {
3218
+ display: flex;
3219
+ align-items: center;
3220
+ justify-content: space-between;
3221
+ gap: 8px;
3222
+ }
3223
+ .cpk-ml__recall-title {
3224
+ font-family: "Plus Jakarta Sans", sans-serif;
3225
+ font-size: 12px;
3226
+ font-weight: 600;
3227
+ color: #010507;
3228
+ }
3229
+ .cpk-ml__recall-clear {
3230
+ font-family: "Plus Jakarta Sans", sans-serif;
3231
+ font-size: 10px;
3232
+ color: #838389;
3233
+ background: none;
3234
+ border: none;
3235
+ cursor: pointer;
3236
+ padding: 0;
3237
+ }
3238
+ .cpk-ml__recall-clear:hover {
3239
+ color: #010507;
3240
+ }
3241
+ .cpk-ml__recall-msg {
3242
+ font-size: 11px;
3243
+ color: #838389;
3244
+ line-height: 1.45;
3245
+ }
3246
+ .cpk-ml__recall-msg--error {
3247
+ color: #c0333a;
3248
+ }
3249
+
3250
+ /* ── Relevance bar ── */
3251
+ .cpk-ml__relevance {
3252
+ height: 4px;
3253
+ width: 100%;
3254
+ overflow: hidden;
3255
+ border-radius: 9999px;
3256
+ background: #f0f0f5;
3257
+ }
3258
+ .cpk-ml__relevance-fill {
3259
+ height: 100%;
3260
+ border-radius: 9999px;
3261
+ background: #6366f1;
3262
+ }
3263
+
3264
+ /* ── Scope badge variants ── */
3265
+ .cpk-ml__scope-badge--user {
3266
+ background: #f0f0f5;
3267
+ color: #838389;
3268
+ }
3269
+ .cpk-ml__scope-badge--project {
3270
+ background: #fef3c7;
3271
+ color: #92660c;
3272
+ }
3068
3273
  `;
3069
3274
  }
3070
3275
  /** Memories that pass the current text search (before kind filter). */
@@ -3092,6 +3297,86 @@ var CpkMemoryList = class extends LitElement {
3092
3297
  return html`<span class="cpk-ml__kind-badge cpk-ml__kind-badge--${kind}"
3093
3298
  >${kind}</span
3094
3299
  >`;
3300
+ }
3301
+ renderScopeBadge(scope) {
3302
+ return html`<span
3303
+ class="cpk-ml__scope-badge cpk-ml__scope-badge--${scope === "project" ? "project" : "user"}"
3304
+ >${scope}</span
3305
+ >`;
3306
+ }
3307
+ /**
3308
+ * Renders one memory card. `relevance` (0..1) is supplied only for recall
3309
+ * results — when present a relevance bar is drawn; the full list omits it.
3310
+ */
3311
+ renderCard(m, relevance) {
3312
+ const threads = m.sourceThreadIds.length;
3313
+ return html`
3314
+ <div class="cpk-ml__card">
3315
+ <div class="cpk-ml__card-badges">
3316
+ ${this.renderKindBadge(m.kind)}${this.renderScopeBadge(m.scope)}
3317
+ </div>
3318
+ <div class="cpk-ml__content">${m.content}</div>
3319
+ ${relevance !== void 0 ? html`<div class="cpk-ml__relevance">
3320
+ <div
3321
+ class="cpk-ml__relevance-fill"
3322
+ style="width:${relevanceBarWidth(relevance)}%;"
3323
+ ></div>
3324
+ </div>` : nothing}
3325
+ <div class="cpk-ml__footer">
3326
+ <span class="cpk-ml__footer-threads"
3327
+ >${threads} source thread${threads === 1 ? "" : "s"}</span
3328
+ >
3329
+ <span class="cpk-ml__footer-id">${this.shortId(m.id)}</span>
3330
+ </div>
3331
+ </div>
3332
+ `;
3333
+ }
3334
+ renderRecallForm() {
3335
+ const disabled = this.recallLoading || this.recallQueryText.trim().length === 0;
3336
+ return html`
3337
+ <form class="cpk-ml__recall" @submit=${this.onRecallSubmit}>
3338
+ <input
3339
+ type="text"
3340
+ placeholder="Recall by meaning…"
3341
+ aria-label="Recall memories by meaning"
3342
+ class="cpk-ml__recall-input"
3343
+ .value=${this.recallQueryText}
3344
+ @input=${this.onRecallInput}
3345
+ />
3346
+ <button type="submit" class="cpk-ml__recall-btn" ?disabled=${disabled}>
3347
+ ${this.recallLoading ? "…" : "Recall"}
3348
+ </button>
3349
+ </form>
3350
+ `;
3351
+ }
3352
+ renderRecallSection() {
3353
+ const results = this.recallResults;
3354
+ if (results === null) return html``;
3355
+ const max = maxRecallScore(results);
3356
+ return html`
3357
+ <section
3358
+ class="cpk-ml__recall-section"
3359
+ aria-label="Semantic recall results"
3360
+ >
3361
+ <div class="cpk-ml__recall-header">
3362
+ <span class="cpk-ml__recall-title"
3363
+ >Semantic recall (${results.length})</span
3364
+ >
3365
+ <button
3366
+ type="button"
3367
+ class="cpk-ml__recall-clear"
3368
+ @click=${this.onRecallClear}
3369
+ >
3370
+ Clear
3371
+ </button>
3372
+ </div>
3373
+ ${this.recallError ? html`<p class="cpk-ml__recall-msg cpk-ml__recall-msg--error">
3374
+ Recall failed: ${this.recallError}
3375
+ </p>` : results.length === 0 ? html`
3376
+ <p class="cpk-ml__recall-msg">No memories matched that query.</p>
3377
+ ` : results.map((m) => this.renderCard(m, normalizeRelevance(m.score, max)))}
3378
+ </section>
3379
+ `;
3095
3380
  }
3096
3381
  renderEmpty() {
3097
3382
  const q = this.search.trim();
@@ -3128,6 +3413,9 @@ var CpkMemoryList = class extends LitElement {
3128
3413
  const filtered = this.filtered;
3129
3414
  return html`
3130
3415
  <div class="cpk-ml">
3416
+ <!-- Semantic recall -->
3417
+ ${this.renderRecallForm()} ${this.renderRecallSection()}
3418
+
3131
3419
  <!-- Search -->
3132
3420
  <div class="cpk-ml__search">
3133
3421
  <input
@@ -3163,21 +3451,7 @@ var CpkMemoryList = class extends LitElement {
3163
3451
 
3164
3452
  <!-- Memory list -->
3165
3453
  <div class="cpk-ml__list">
3166
- ${filtered.map((m) => html`
3167
- <div class="cpk-ml__card">
3168
- <div class="cpk-ml__card-badges">
3169
- ${this.renderKindBadge(m.kind)}
3170
- <span class="cpk-ml__scope-badge">${m.scope}</span>
3171
- </div>
3172
- <div class="cpk-ml__content">${m.content}</div>
3173
- <div class="cpk-ml__footer">
3174
- <span class="cpk-ml__footer-threads"
3175
- >${m.sourceThreadIds.length} source thread${m.sourceThreadIds.length === 1 ? "" : "s"}</span
3176
- >
3177
- <span class="cpk-ml__footer-id">${this.shortId(m.id)}</span>
3178
- </div>
3179
- </div>
3180
- `)}
3454
+ ${filtered.map((m) => this.renderCard(m))}
3181
3455
  ${filtered.length === 0 ? this.renderEmpty() : nothing}
3182
3456
  </div>
3183
3457
  </div>
@@ -3203,6 +3477,11 @@ var WebInspectorElement = class extends LitElement {
3203
3477
  this._memoryUnsub = null;
3204
3478
  this._memorySubscribed = false;
3205
3479
  this._memoryStoreUnsupported = false;
3480
+ this._recallResults = null;
3481
+ this._recallLoading = false;
3482
+ this._recallError = null;
3483
+ this._recallQuery = "";
3484
+ this._recallSeq = 0;
3206
3485
  this.runtimeStatus = null;
3207
3486
  this.coreProperties = {};
3208
3487
  this.lastCoreError = null;
@@ -3247,6 +3526,7 @@ var WebInspectorElement = class extends LitElement {
3247
3526
  this.attemptedAutoAttach = false;
3248
3527
  this.cachedTools = [];
3249
3528
  this.toolSignature = "";
3529
+ this._capabilitiesVersion = 0;
3250
3530
  this.eventFilterText = "";
3251
3531
  this.eventTypeFilter = "all";
3252
3532
  this.evtColWidths = [
@@ -3594,7 +3874,8 @@ var WebInspectorElement = class extends LitElement {
3594
3874
  autoAttachCore: {
3595
3875
  type: Boolean,
3596
3876
  attribute: "auto-attach-core"
3597
- }
3877
+ },
3878
+ _capabilitiesVersion: { state: true }
3598
3879
  };
3599
3880
  }
3600
3881
  get core() {
@@ -3609,6 +3890,9 @@ var WebInspectorElement = class extends LitElement {
3609
3890
  if (this._core) this.attachToCore(this._core);
3610
3891
  }
3611
3892
  get menuItems() {
3893
+ const hasFrontendTools = (this._core?.tools?.length ?? 0) > 0;
3894
+ const hasCatalog = (this._core?.catalogComponents?.length ?? 0) > 0;
3895
+ const hasCapabilities = hasFrontendTools || hasCatalog;
3612
3896
  return [
3613
3897
  {
3614
3898
  key: "ag-ui-events",
@@ -3620,11 +3904,16 @@ var WebInspectorElement = class extends LitElement {
3620
3904
  label: "Agent",
3621
3905
  icon: "Bot"
3622
3906
  },
3623
- ...(this._core?.tools?.length ?? 0) > 0 ? [{
3907
+ ...hasFrontendTools ? [{
3624
3908
  key: "frontend-tools",
3625
3909
  label: "Frontend Tools",
3626
3910
  icon: "Hammer"
3627
3911
  }] : [],
3912
+ ...hasCapabilities ? [{
3913
+ key: "capabilities",
3914
+ label: CAPABILITIES_TAB_LABEL,
3915
+ icon: "SlidersHorizontal"
3916
+ }] : [],
3628
3917
  {
3629
3918
  key: "agent-context",
3630
3919
  label: "Context",
@@ -3637,7 +3926,7 @@ var WebInspectorElement = class extends LitElement {
3637
3926
  },
3638
3927
  {
3639
3928
  key: "memories",
3640
- label: "Learning",
3929
+ label: MEMORY_VIEW_LABEL,
3641
3930
  icon: "Brain"
3642
3931
  }
3643
3932
  ];
@@ -3912,6 +4201,50 @@ var WebInspectorElement = class extends LitElement {
3912
4201
  this._memoryUnsub = () => memSubs.forEach((s) => s.unsubscribe());
3913
4202
  this.requestUpdate();
3914
4203
  }
4204
+ /**
4205
+ * Runs a semantic recall via the memory store (`core.getMemoryStore().recall`,
4206
+ * from B2) and stores ranked results. Guarded by a monotonic sequence token
4207
+ * so a stale request cannot overwrite a newer result / Clear / detach. Only
4208
+ * reachable from the Intelligence-gated memory view, so it inherits the gate.
4209
+ */
4210
+ runRecall(query) {
4211
+ const trimmed = query.trim();
4212
+ if (trimmed.length === 0) return;
4213
+ const store = this._core?.getMemoryStore?.();
4214
+ if (!store || typeof store.recall !== "function") {
4215
+ this._recallResults = [];
4216
+ this._recallError = "Recall is not supported by this SDK version.";
4217
+ this._recallLoading = false;
4218
+ this.requestUpdate();
4219
+ return;
4220
+ }
4221
+ const seq = ++this._recallSeq;
4222
+ this._recallLoading = true;
4223
+ this._recallError = null;
4224
+ this.requestUpdate();
4225
+ store.recall(trimmed).then((results) => {
4226
+ if (seq !== this._recallSeq) return;
4227
+ this._recallResults = results;
4228
+ this._recallError = null;
4229
+ this._recallLoading = false;
4230
+ this.requestUpdate();
4231
+ }).catch((error) => {
4232
+ if (seq !== this._recallSeq) return;
4233
+ this._recallResults = [];
4234
+ this._recallError = error instanceof Error ? error.message : "unknown error";
4235
+ this._recallLoading = false;
4236
+ this.requestUpdate();
4237
+ });
4238
+ }
4239
+ /** Clears recall results/section and cancels any in-flight recall. */
4240
+ clearRecall() {
4241
+ this._recallSeq += 1;
4242
+ this._recallResults = null;
4243
+ this._recallError = null;
4244
+ this._recallLoading = false;
4245
+ this._recallQuery = "";
4246
+ this.requestUpdate();
4247
+ }
3915
4248
  detachFromCore() {
3916
4249
  if (this.coreUnsubscribe) {
3917
4250
  this.coreUnsubscribe();
@@ -3926,6 +4259,11 @@ var WebInspectorElement = class extends LitElement {
3926
4259
  this._memoriesRealtimeStatus = "connecting";
3927
4260
  this._memorySubscribed = false;
3928
4261
  this._memoryStoreUnsupported = false;
4262
+ this._recallSeq += 1;
4263
+ this._recallResults = null;
4264
+ this._recallLoading = false;
4265
+ this._recallError = null;
4266
+ this._recallQuery = "";
3929
4267
  this.coreSubscriber = null;
3930
4268
  this.runtimeStatus = null;
3931
4269
  this.lastCoreError = null;
@@ -5891,6 +6229,7 @@ ${argsString}</pre
5891
6229
  if (this.selectedMenu === "ag-ui-events") return this.renderEventsTable();
5892
6230
  if (this.selectedMenu === "agents") return this.renderAgentsView();
5893
6231
  if (this.selectedMenu === "frontend-tools") return this.renderToolsView();
6232
+ if (this.selectedMenu === "capabilities") return this.renderCapabilitiesView();
5894
6233
  if (this.selectedMenu === "agent-context") return this.renderContextView();
5895
6234
  if (this.selectedMenu === "threads") return this.renderThreadsView();
5896
6235
  if (this.selectedMenu === "memories") return this.renderMemoriesView();
@@ -6835,7 +7174,7 @@ ${argsString}</pre
6835
7174
  return html`
6836
7175
  <div style="display:flex;height:100%;overflow:hidden;flex-direction:column;">
6837
7176
  <div class="cpk-section-header" style="display:flex;align-items:center;justify-content:space-between;">
6838
- <h4>Learning</h4>
7177
+ <h4>${MEMORY_VIEW_LABEL}</h4>
6839
7178
  <div style="display:flex;align-items:center;gap:6px;">
6840
7179
  ${this.renderMemoryRealtimeIndicator()}
6841
7180
  <span
@@ -6890,6 +7229,19 @@ ${argsString}</pre
6890
7229
  <cpk-memory-list
6891
7230
  style="height:100%;"
6892
7231
  .memories=${this._memories}
7232
+ .recallResults=${this._recallResults}
7233
+ .recallLoading=${this._recallLoading}
7234
+ .recallError=${this._recallError}
7235
+ .recallQueryText=${this._recallQuery}
7236
+ @recallQueryChanged=${(e) => {
7237
+ this._recallQuery = e.detail;
7238
+ }}
7239
+ @recallSubmitted=${(e) => {
7240
+ this.runRecall(e.detail);
7241
+ }}
7242
+ @recallCleared=${() => {
7243
+ this.clearRecall();
7244
+ }}
6893
7245
  ></cpk-memory-list>
6894
7246
  </div>
6895
7247
  </div>
@@ -7529,6 +7881,112 @@ ${prettyEvent}</pre
7529
7881
  this.persistState();
7530
7882
  this.requestUpdate();
7531
7883
  }
7884
+ renderCapabilitiesView() {
7885
+ if (!this._core) return html`
7886
+ <div
7887
+ class="flex h-full items-center justify-center px-4 py-8 text-xs text-gray-500"
7888
+ >
7889
+ No core instance available
7890
+ </div>
7891
+ `;
7892
+ const toolRows = buildCapabilityRows(this._core);
7893
+ const catalog = this._core.catalogComponents ?? [];
7894
+ const hasCatalog = catalog.length > 0;
7895
+ if (toolRows.length === 0 && !hasCatalog) return html`
7896
+ <div class="flex h-full items-center justify-center px-4 py-8 text-center">
7897
+ <div class="max-w-md">
7898
+ <div class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8">
7899
+ ${this.renderIcon("SlidersHorizontal")}
7900
+ </div>
7901
+ <p class="text-sm text-gray-600">No capabilities registered</p>
7902
+ <p class="mt-2 text-xs text-gray-500">
7903
+ Frontend tools and A2UI catalog components will appear here once
7904
+ they are registered on the CopilotKit core.
7905
+ </p>
7906
+ </div>
7907
+ </div>
7908
+ `;
7909
+ return html`
7910
+ <div class="flex h-full flex-col overflow-hidden">
7911
+ <div class="overflow-auto p-4">
7912
+ <div class="space-y-3">
7913
+ <p class="text-xs text-gray-500">
7914
+ Toggle a capability off to omit it from what the agent sees. This
7915
+ is a client-side experimentation surface and takes effect
7916
+ immediately.
7917
+ </p>
7918
+ </div>
7919
+
7920
+ ${toolRows.length > 0 ? html`
7921
+ <div class="mt-4 space-y-2">
7922
+ <h3 class="text-sm text-slate-500">Frontend tools</h3>
7923
+ <div class="space-y-2">
7924
+ ${toolRows.map((row) => this.renderCapabilityRow(row))}
7925
+ </div>
7926
+ </div>
7927
+ ` : nothing}
7928
+
7929
+ ${hasCatalog ? html`
7930
+ <div class="mt-6 space-y-2">
7931
+ <h3 class="text-sm text-slate-500">A2UI catalog components</h3>
7932
+ <div class="space-y-2">
7933
+ ${catalog.map((component) => this.renderCapabilityRow({
7934
+ key: component.name,
7935
+ name: component.name,
7936
+ description: component.description,
7937
+ enabled: this._core.isCatalogComponentEnabled(component.name)
7938
+ }))}
7939
+ </div>
7940
+ </div>
7941
+ ` : nothing}
7942
+ </div>
7943
+ </div>
7944
+ `;
7945
+ }
7946
+ renderCapabilityRow(row) {
7947
+ const isTool = row.key.includes(":");
7948
+ return html`
7949
+ <div class="flex items-center justify-between gap-3 rounded-lg border border-gray-200 bg-white px-4 py-3">
7950
+ <div class="min-w-0 flex-1">
7951
+ <div class="flex items-center gap-2">
7952
+ <span class="font-mono text-sm font-semibold text-gray-900">${row.name}</span>
7953
+ ${row.agentId ? html`<span class="inline-flex items-center gap-1 text-xs text-gray-500">
7954
+ ${this.renderIcon("Bot")}<span class="font-mono">${row.agentId}</span>
7955
+ </span>` : nothing}
7956
+ </div>
7957
+ ${row.description ? html`<p class="mt-1 text-xs text-gray-600">${row.description}</p>` : nothing}
7958
+ </div>
7959
+ ${this.renderCapabilitySwitch(row.enabled, () => isTool ? this.handleToggleTool(row) : this.handleToggleCatalogComponent(row.name))}
7960
+ </div>
7961
+ `;
7962
+ }
7963
+ renderCapabilitySwitch(enabled, onToggle) {
7964
+ return html`
7965
+ <button
7966
+ type="button"
7967
+ role="switch"
7968
+ aria-checked=${enabled ? "true" : "false"}
7969
+ 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"}"
7970
+ @click=${onToggle}
7971
+ >
7972
+ <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>
7973
+ </button>
7974
+ `;
7975
+ }
7976
+ handleToggleTool(row) {
7977
+ if (!this._core) return;
7978
+ const next = !row.enabled;
7979
+ this._core.setToolEnabled(row.name, next, row.agentId);
7980
+ this._capabilitiesVersion += 1;
7981
+ this.requestUpdate();
7982
+ }
7983
+ handleToggleCatalogComponent(name) {
7984
+ if (!this._core) return;
7985
+ const next = !this._core.isCatalogComponentEnabled(name);
7986
+ this._core.setCatalogComponentEnabled(name, next);
7987
+ this._capabilitiesVersion += 1;
7988
+ this.requestUpdate();
7989
+ }
7532
7990
  renderToolsView() {
7533
7991
  if (!this._core) return html`
7534
7992
  <div
@@ -8228,5 +8686,5 @@ function defineWebInspector() {
8228
8686
  defineWebInspector();
8229
8687
 
8230
8688
  //#endregion
8231
- export { CpkThreadInspector, THREAD_INSPECTOR_TAG, WEB_INSPECTOR_TAG, WebInspectorElement, defineWebInspector, ɵCpkThreadDetails };
8689
+ export { CpkThreadInspector, THREAD_INSPECTOR_TAG, WEB_INSPECTOR_TAG, WebInspectorElement, defineWebInspector, ɵCpkThreadDetails, buildCapabilityRows as ɵbuildCapabilityRows, maxRecallScore as ɵmaxRecallScore, normalizeRelevance as ɵnormalizeRelevance, relevanceBarWidth as ɵrelevanceBarWidth };
8232
8690
  //# sourceMappingURL=index.mjs.map