@copilotkit/web-inspector 1.64.2-canary.1785346263 → 1.64.2-canary.perfall1
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.cjs +481 -19
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +62 -2
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.mts +62 -2
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +478 -20
- package/dist/index.mjs.map +1 -1
- package/dist/index.umd.js +493 -26
- package/dist/index.umd.js.map +1 -1
- package/dist/package.cjs +1 -1
- package/dist/package.mjs +1 -1
- package/dist/styles/generated.cjs +1 -1
- package/dist/styles/generated.cjs.map +1 -1
- package/dist/styles/generated.mjs +1 -1
- package/dist/styles/generated.mjs.map +1 -1
- package/package.json +2 -2
- package/src/__tests__/memory-recall.spec.ts +76 -0
- package/src/__tests__/web-inspector.spec.ts +194 -4
- package/src/index.ts +620 -19
- package/src/styles/generated.css +1 -1
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) =>
|
|
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
|
-
...
|
|
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:
|
|
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
|
|
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
|