@copilotkit/web-inspector 1.69.1 → 1.69.2

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.
Files changed (39) hide show
  1. package/dist/index.cjs +36 -634
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +2 -44
  4. package/dist/index.d.cts.map +1 -1
  5. package/dist/index.d.mts +2 -44
  6. package/dist/index.d.mts.map +1 -1
  7. package/dist/index.mjs +39 -634
  8. package/dist/index.mjs.map +1 -1
  9. package/dist/index.umd.js +85 -1253
  10. package/dist/index.umd.js.map +1 -1
  11. package/dist/lib/inspector-nav.cjs +0 -1
  12. package/dist/lib/inspector-nav.cjs.map +1 -1
  13. package/dist/lib/inspector-nav.mjs +0 -1
  14. package/dist/lib/inspector-nav.mjs.map +1 -1
  15. package/dist/lib/telemetry.cjs +1 -19
  16. package/dist/lib/telemetry.cjs.map +1 -1
  17. package/dist/lib/telemetry.d.cts.map +1 -1
  18. package/dist/lib/telemetry.d.mts.map +1 -1
  19. package/dist/lib/telemetry.mjs +2 -18
  20. package/dist/lib/telemetry.mjs.map +1 -1
  21. package/dist/package.cjs +1 -1
  22. package/dist/package.mjs +1 -1
  23. package/dist/styles/generated.cjs +1 -1
  24. package/dist/styles/generated.cjs.map +1 -1
  25. package/dist/styles/generated.mjs +1 -1
  26. package/dist/styles/generated.mjs.map +1 -1
  27. package/package.json +3 -3
  28. package/dist/lib/event-snippets.cjs +0 -559
  29. package/dist/lib/event-snippets.cjs.map +0 -1
  30. package/dist/lib/event-snippets.d.cts +0 -61
  31. package/dist/lib/event-snippets.d.cts.map +0 -1
  32. package/dist/lib/event-snippets.d.mts +0 -61
  33. package/dist/lib/event-snippets.d.mts.map +0 -1
  34. package/dist/lib/event-snippets.mjs +0 -537
  35. package/dist/lib/event-snippets.mjs.map +0 -1
  36. package/dist/lib/inspector-nav.d.cts +0 -11
  37. package/dist/lib/inspector-nav.d.cts.map +0 -1
  38. package/dist/lib/inspector-nav.d.mts +0 -11
  39. package/dist/lib/inspector-nav.d.mts.map +0 -1
package/dist/index.cjs CHANGED
@@ -9,7 +9,6 @@ const require_inspector_metadata = require('./lib/inspector-metadata.cjs');
9
9
  const require_home_briefing = require('./lib/home-briefing.cjs');
10
10
  const require_inspector_nav = require('./lib/inspector-nav.cjs');
11
11
  const require_thread_selection = require('./lib/thread-selection.cjs');
12
- const require_event_snippets = require('./lib/event-snippets.cjs');
13
12
  const require_telemetry = require('./lib/telemetry.cjs');
14
13
  let lit = require("lit");
15
14
  let marked = require("marked");
@@ -4406,26 +4405,6 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
4406
4405
  inspect: "ag-ui-events"
4407
4406
  };
4408
4407
  this.lastScrolledAgentNavigationLayout = null;
4409
- this.eventSnippets = [];
4410
- this.selectedSnippetId = null;
4411
- this.snippetRecipe = "tool-call";
4412
- this.snippetName = "";
4413
- this.snippetJson = "[]";
4414
- this.snippetToolName = "";
4415
- this.snippetToolArgs = "{}";
4416
- this.snippetReasoningText = "";
4417
- this.snippetTextContent = "";
4418
- this.snippetActivityType = "a2ui-surface";
4419
- this.snippetActivityContent = "{}";
4420
- this.snippetError = null;
4421
- this.snippetBanner = null;
4422
- this.snippetConfirmOpen = false;
4423
- this.lastInject = null;
4424
- this.snippetListWidth = 200;
4425
- this.snippetDividerResizing = false;
4426
- this.snippetDividerPointerId = -1;
4427
- this.snippetDividerStartX = 0;
4428
- this.snippetDividerStartWidth = 0;
4429
4408
  this.selectedThreadId = null;
4430
4409
  this.inAppThreadId = null;
4431
4410
  this.inAppAgentId = null;
@@ -5026,19 +5005,6 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
5026
5005
  this.handlePlaygroundStop = () => {
5027
5006
  this.playgroundAgent?.abortRun();
5028
5007
  };
5029
- this.handleSnippetImportChange = async (event) => {
5030
- const input = event.target;
5031
- const file = input.files?.[0];
5032
- input.value = "";
5033
- if (!file) return;
5034
- try {
5035
- this.eventSnippets = require_event_snippets.importEventSnippets(await file.text());
5036
- this.snippetError = null;
5037
- } catch (error) {
5038
- this.snippetError = error instanceof Error ? error.message : "Import failed.";
5039
- }
5040
- this.requestUpdate();
5041
- };
5042
5008
  this.handleInspectorMetadataActionClick = (action, placement) => {
5043
5009
  if (!this.isOpen || this.runtimeStatus !== _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Connected || this.core?.telemetryDisabled) return;
5044
5010
  if (action.kind === "enable_intelligence") {
@@ -5066,26 +5032,6 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
5066
5032
  if (this.core?.telemetryDisabled) return;
5067
5033
  require_telemetry.trackThreadsTalkToEngineerClicked(this.getThreadsCtaTelemetryProps("talk_to_engineer", "threads_locked"));
5068
5034
  };
5069
- this.handleSnippetListDividerPointerDown = (event) => {
5070
- this.snippetDividerResizing = true;
5071
- this.snippetDividerPointerId = event.pointerId;
5072
- this.snippetDividerStartX = event.clientX;
5073
- this.snippetDividerStartWidth = this.snippetListWidth;
5074
- event.currentTarget.setPointerCapture(event.pointerId);
5075
- event.preventDefault();
5076
- };
5077
- this.handleSnippetListDividerPointerMove = (event) => {
5078
- if (!this.snippetDividerResizing || this.snippetDividerPointerId !== event.pointerId) return;
5079
- const delta = event.clientX - this.snippetDividerStartX;
5080
- this.snippetListWidth = Math.max(160, Math.min(360, this.snippetDividerStartWidth + delta));
5081
- this.requestUpdate();
5082
- };
5083
- this.handleSnippetListDividerPointerUp = (event) => {
5084
- if (this.snippetDividerPointerId !== event.pointerId) return;
5085
- const target = event.currentTarget;
5086
- if (target.hasPointerCapture(this.snippetDividerPointerId)) target.releasePointerCapture(this.snippetDividerPointerId);
5087
- this.snippetDividerResizing = false;
5088
- };
5089
5035
  this.handleThreadDividerPointerDown = (event) => {
5090
5036
  this.threadDividerResizing = true;
5091
5037
  this.threadDividerPointerId = event.pointerId;
@@ -5342,11 +5288,6 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
5342
5288
  label: "AG-UI Events",
5343
5289
  icon: "Zap"
5344
5290
  },
5345
- {
5346
- key: "event-snippets",
5347
- label: "Event Snippets",
5348
- icon: "Code"
5349
- },
5350
5291
  {
5351
5292
  key: "agents",
5352
5293
  label: "Agent",
@@ -6277,19 +6218,6 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
6277
6218
  this.persistState();
6278
6219
  this.requestUpdate();
6279
6220
  }
6280
- focusEventSnippets(options) {
6281
- this.pendingPersistedMenu = null;
6282
- this.selectedMenu = "event-snippets";
6283
- this.settingsOpen = false;
6284
- this.lastSelectedMenuByGroup.inspect = "event-snippets";
6285
- this.contextMenuOpen = false;
6286
- this.layoutMenuOpen = false;
6287
- this.reloadEventSnippets();
6288
- if (options.snippetId) this.selectEventSnippet(options.snippetId);
6289
- if (options.agentId && this.contextOptions.some((option) => option.key === options.agentId)) this.selectedContext = options.agentId;
6290
- this.persistState();
6291
- this.requestUpdate();
6292
- }
6293
6221
  filterEvents(events) {
6294
6222
  const query = this.eventFilterText.trim().toLowerCase();
6295
6223
  return events.filter((event) => {
@@ -6512,8 +6440,8 @@ ${argsString}</pre
6512
6440
  the two cannot drift apart. A dark grey rather than near-black: the
6513
6441
  launcher sits on a customer's page, and 1,5,7 against white is a
6514
6442
  harder edge than this surface needs. */
6515
- --cpk-launcher-face: rgba(28, 31, 36, 0.95);
6516
- --cpk-launcher-face-solid: rgb(28, 31, 36);
6443
+ --cpk-launcher-face: rgba(24, 28, 31, 0.95);
6444
+ --cpk-launcher-face-solid: rgb(24, 28, 31);
6517
6445
  --cpk-launcher-edge: rgba(190, 194, 255, 0.25);
6518
6446
  /* The launcher's own size, exposed so the signal dot can be placed
6519
6447
  against the OUTER rim with a length rather than a percentage.
@@ -6933,9 +6861,24 @@ ${argsString}</pre
6933
6861
  .console-button {
6934
6862
  background-color: var(--cpk-launcher-face) !important;
6935
6863
  border-color: var(--cpk-launcher-edge) !important;
6864
+ /* One hairline, not two. The border above is it; a second ring used to
6865
+ sit 1px outside as a box-shadow and hardcoded the lilac instead of
6866
+ reading the --cpk-launcher-edge token, so it could not follow it.
6867
+ What replaces it is a one-pixel light edge along the top, which is
6868
+ what keeps the face from reading flat without drawing a frame.
6869
+
6870
+ The border is not decoration: the face is #181C1F, which against a
6871
+ dark host page (GitHub dark 1.10:1, Tailwind slate-900 1.04:1) is
6872
+ indistinguishable from the page. It is the only thing that gives the
6873
+ launcher an outline there, so it stays. */
6936
6874
  box-shadow:
6937
- 0 0 0 1px rgba(190, 194, 255, 0.15),
6875
+ inset 0 1px 0 rgba(255, 255, 255, 0.07),
6938
6876
  0 4px 14px rgba(1, 5, 7, 0.28) !important;
6877
+ /* Promotes the launcher to its own compositing layer, which the
6878
+ backdrop-filter this replaces used to do as a side effect. Without
6879
+ a layer the hover scale re-rasterises the mark every frame and it
6880
+ visibly jitters; with one, the compositor scales it as a texture. */
6881
+ will-change: transform;
6939
6882
  }
6940
6883
  .console-button:hover {
6941
6884
  background-color: var(--cpk-launcher-face-solid) !important;
@@ -7061,8 +7004,23 @@ ${argsString}</pre
7061
7004
  width: 19%;
7062
7005
  height: 19%;
7063
7006
  border-radius: 50%;
7064
- background: var(--cpk-launcher-signal);
7065
- box-shadow: 0 0 0 1.5px var(--cpk-launcher-face);
7007
+ /* Lit from the upper left and shaded at the lower right, so the dot
7008
+ reads as a lens rather than a flat disc. Both stops are derived from
7009
+ the signal colour, so a new tone needs no new values. */
7010
+ background: radial-gradient(
7011
+ circle at 32% 28%,
7012
+ color-mix(in srgb, var(--cpk-launcher-signal), white 40%) 0%,
7013
+ var(--cpk-launcher-signal) 60%,
7014
+ color-mix(in srgb, var(--cpk-launcher-signal), black 20%) 100%
7015
+ );
7016
+ /* Replaces an opaque 1.5px collar in the launcher's own face. That
7017
+ collar was 21% of the dot's footprint, and because the dot's centre
7018
+ sits *on* the rim, its outer half painted a hard dark crescent onto
7019
+ the host page rather than onto the launcher. A hairline plus a soft
7020
+ drop does the same separating job without the hard edge. */
7021
+ box-shadow:
7022
+ 0 0 0 0.5px rgba(1, 5, 7, 0.4),
7023
+ 0 1px 2.5px rgba(1, 5, 7, 0.5);
7066
7024
  }
7067
7025
 
7068
7026
  /* ── Launcher pill: the launcher opens sideways and says what ─── */
@@ -7963,17 +7921,10 @@ ${argsString}</pre
7963
7921
  "justify-center",
7964
7922
  "rounded-full",
7965
7923
  "border",
7966
- "border-white/20",
7967
- "bg-slate-950/95",
7968
7924
  "text-xs",
7969
7925
  "font-medium",
7970
7926
  "text-white",
7971
- "ring-1",
7972
- "ring-white/10",
7973
- "backdrop-blur-md",
7974
7927
  "transition",
7975
- "hover:border-white/30",
7976
- "hover:bg-slate-900/95",
7977
7928
  "hover:scale-105",
7978
7929
  "focus-visible:outline",
7979
7930
  "focus-visible:outline-2",
@@ -9534,8 +9485,7 @@ ${argsString}</pre
9534
9485
  this.draggedDuringInteraction = false;
9535
9486
  }
9536
9487
  openInspector(source, options = {}) {
9537
- if (options.snippetId || options.menu === "event-snippets") this.focusEventSnippets(options);
9538
- else if (options.threadId) this.focusThread(options);
9488
+ if (options.threadId) this.focusThread(options);
9539
9489
  if (this.isPoppedOut) return;
9540
9490
  if (this.isOpen) return;
9541
9491
  const hadUnseenAnnouncement = this.newsSignalArmed;
@@ -10000,549 +9950,6 @@ ${argsString}</pre
10000
9950
  AI can make mistakes. Please verify important information.
10001
9951
  </p>
10002
9952
  </form>
10003
- `;
10004
- }
10005
- reloadEventSnippets() {
10006
- this.eventSnippets = require_event_snippets.loadEventSnippets();
10007
- }
10008
- renderSnippetImportControl() {
10009
- return lit.html`
10010
- <label
10011
- class="inline-flex shrink-0 cursor-pointer items-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-[11px] text-gray-700"
10012
- data-testid="cpk-snippet-import"
10013
- >
10014
- Import
10015
- <input
10016
- type="file"
10017
- accept="application/json"
10018
- class="hidden"
10019
- @change=${this.handleSnippetImportChange}
10020
- />
10021
- </label>
10022
- `;
10023
- }
10024
- selectEventSnippet(id) {
10025
- const snippet = this.eventSnippets.find((item) => item.id === id);
10026
- this.selectedSnippetId = id;
10027
- if (!snippet) {
10028
- this.requestUpdate();
10029
- return;
10030
- }
10031
- const editor = require_event_snippets.editorStateFromSnippet(snippet);
10032
- this.snippetRecipe = editor.recipe;
10033
- this.snippetName = editor.name;
10034
- this.snippetJson = editor.json;
10035
- this.snippetToolName = editor.draft.toolName;
10036
- this.snippetToolArgs = editor.draft.toolArgs;
10037
- this.snippetReasoningText = editor.draft.reasoningText;
10038
- this.snippetTextContent = editor.draft.textContent;
10039
- this.snippetActivityType = editor.draft.activityType;
10040
- this.snippetActivityContent = editor.draft.activityContent;
10041
- this.snippetError = null;
10042
- this.requestUpdate();
10043
- }
10044
- compileSnippetDraft() {
10045
- switch (this.snippetRecipe) {
10046
- case "tool-call": return require_event_snippets.compileToolCallRecipe({
10047
- toolName: this.snippetToolName,
10048
- argsJson: this.snippetToolArgs,
10049
- threadId: this.getSnippetThreadId(),
10050
- runId: this.getSnippetRunId()
10051
- });
10052
- case "reasoning": return require_event_snippets.compileReasoningRecipe({
10053
- text: this.snippetReasoningText,
10054
- threadId: this.getSnippetThreadId(),
10055
- runId: this.getSnippetRunId()
10056
- });
10057
- case "text": return require_event_snippets.compileTextRecipe({
10058
- text: this.snippetTextContent,
10059
- threadId: this.getSnippetThreadId(),
10060
- runId: this.getSnippetRunId()
10061
- });
10062
- case "activity": return require_event_snippets.compileActivityRecipe({
10063
- activityType: this.snippetActivityType,
10064
- contentJson: this.snippetActivityContent,
10065
- threadId: this.getSnippetThreadId(),
10066
- runId: this.getSnippetRunId()
10067
- });
10068
- case "raw": return require_event_snippets.parseSnippetEvents(this.snippetJson);
10069
- }
10070
- }
10071
- getSnippetThreadId() {
10072
- return this.selectedThreadId ?? "inspector-snippet";
10073
- }
10074
- getSnippetRunId() {
10075
- return `inspector-snippet-${Date.now()}`;
10076
- }
10077
- getSnippetTargetAgent() {
10078
- const core = this._core;
10079
- if (!core) return null;
10080
- const selected = this.selectedContext !== "all-agents" ? this.selectedContext : null;
10081
- if (selected) return core.getAgent(selected) ?? null;
10082
- const first = this.contextOptions.find((option) => option.key !== "all-agents");
10083
- return first ? core.getAgent(first.key) ?? null : null;
10084
- }
10085
- applyRecipeToEditor() {
10086
- try {
10087
- const events = this.compileSnippetDraft();
10088
- this.snippetJson = JSON.stringify(events, null, 2);
10089
- this.snippetError = null;
10090
- } catch (error) {
10091
- this.snippetError = error instanceof Error ? error.message : "Could not compile recipe.";
10092
- }
10093
- this.requestUpdate();
10094
- }
10095
- handleSnippetRecipeChange(event) {
10096
- const value = event.target.value;
10097
- if (value === "tool-call" || value === "reasoning" || value === "text" || value === "activity" || value === "raw") {
10098
- this.snippetRecipe = value;
10099
- if (value !== "raw") this.applyRecipeToEditor();
10100
- else this.requestUpdate();
10101
- }
10102
- }
10103
- saveCurrentSnippet(source) {
10104
- try {
10105
- const events = require_event_snippets.parseSnippetEvents(this.snippetJson);
10106
- const now = (/* @__PURE__ */ new Date()).toISOString();
10107
- const snippet = {
10108
- id: this.selectedSnippetId ?? require_event_snippets.createSnippetId(),
10109
- name: this.snippetName.trim() || require_event_snippets.recipeLabel(this.snippetRecipe),
10110
- recipe: this.snippetRecipe,
10111
- events,
10112
- createdAt: this.eventSnippets.find((item) => item.id === this.selectedSnippetId)?.createdAt ?? now,
10113
- updatedAt: now
10114
- };
10115
- this.eventSnippets = require_event_snippets.upsertEventSnippet(snippet);
10116
- this.selectedSnippetId = snippet.id;
10117
- this.snippetBanner = "Snippet saved.";
10118
- this.snippetError = null;
10119
- if (!this.core?.telemetryDisabled) require_telemetry.trackEventSnippetsSaved({
10120
- recipe: this.snippetRecipe,
10121
- source,
10122
- success: true
10123
- });
10124
- } catch (error) {
10125
- this.snippetError = error instanceof Error ? error.message : "Could not save snippet.";
10126
- if (!this.core?.telemetryDisabled) require_telemetry.trackEventSnippetsSaved({
10127
- recipe: this.snippetRecipe,
10128
- source,
10129
- success: false
10130
- });
10131
- }
10132
- this.requestUpdate();
10133
- }
10134
- async runCurrentSnippet() {
10135
- this.snippetError = null;
10136
- this.snippetBanner = null;
10137
- let events;
10138
- try {
10139
- events = require_event_snippets.expandSnippetEventsForRun(require_event_snippets.parseSnippetEvents(this.snippetJson));
10140
- } catch (error) {
10141
- this.snippetError = error instanceof Error ? error.message : "Snippet JSON is invalid.";
10142
- this.requestUpdate();
10143
- return;
10144
- }
10145
- if (require_event_snippets.snippetContainsToolCall(events) && !this.snippetConfirmOpen) {
10146
- this.snippetConfirmOpen = true;
10147
- this.requestUpdate();
10148
- return;
10149
- }
10150
- this.snippetConfirmOpen = false;
10151
- const core = this._core;
10152
- const agent = this.getSnippetTargetAgent();
10153
- if (!core || !agent) {
10154
- this.snippetError = "No agent is available to inject into.";
10155
- this.requestUpdate();
10156
- return;
10157
- }
10158
- if (agent.isRunning) {
10159
- this.snippetError = "The agent is running. Wait for the current run to end.";
10160
- this.requestUpdate();
10161
- return;
10162
- }
10163
- try {
10164
- const result = await (0, _copilotkit_core.ɵinjectInspectorEvents)({
10165
- core,
10166
- agent,
10167
- events
10168
- });
10169
- this.lastInject = {
10170
- snippetId: this.selectedSnippetId ?? "unsaved",
10171
- agentId: agent.agentId ?? "default",
10172
- runId: this.getSnippetRunId(),
10173
- messageIds: result.messageIds
10174
- };
10175
- this.snippetBanner = "Inspector injected these events into the live thread.";
10176
- if (!this.core?.telemetryDisabled) require_telemetry.trackEventSnippetsRun({
10177
- recipe: this.snippetRecipe,
10178
- source: "pane",
10179
- success: true
10180
- });
10181
- } catch (error) {
10182
- this.snippetError = error instanceof Error ? error.message : "Could not run snippet.";
10183
- if (!this.core?.telemetryDisabled) require_telemetry.trackEventSnippetsRun({
10184
- recipe: this.snippetRecipe,
10185
- source: "pane",
10186
- success: false
10187
- });
10188
- }
10189
- this.requestUpdate();
10190
- }
10191
- resetLastSnippetRun() {
10192
- const last = this.lastInject;
10193
- const core = this._core;
10194
- if (!last || !core) return;
10195
- const agent = core.getAgent(last.agentId);
10196
- if (!agent) {
10197
- this.snippetError = "The injected agent is no longer available.";
10198
- this.requestUpdate();
10199
- return;
10200
- }
10201
- (0, _copilotkit_core.ɵresetInspectorInject)({
10202
- agent,
10203
- messageIds: last.messageIds
10204
- });
10205
- this.lastInject = null;
10206
- this.snippetBanner = "Last inject was removed from the thread. App state from a tool handler was not undone.";
10207
- this.requestUpdate();
10208
- }
10209
- renderEventSnippetsView() {
10210
- if (this.eventSnippets.length === 0 && this.selectedSnippetId === null) this.reloadEventSnippets();
10211
- const agent = this.getSnippetTargetAgent();
10212
- const runBlocked = agent?.isRunning === true;
10213
- const canRunJson = require_event_snippets.snippetJsonIsRunnable(this.snippetJson);
10214
- const canRun = canRunJson && !!agent && !runBlocked;
10215
- const canSave = canRunJson;
10216
- const canDelete = this.selectedSnippetId !== null;
10217
- const canExport = this.eventSnippets.length > 0;
10218
- const canReset = this.lastInject !== null;
10219
- const snippetGroups = require_event_snippets.groupEventSnippets(this.eventSnippets);
10220
- const tools = this._core?.tools ?? [];
10221
- return lit.html`
10222
- <div class="flex h-full min-h-0 flex-col bg-white">
10223
- <div
10224
- class="flex items-center justify-between gap-4 border-b border-gray-200 px-4 py-3"
10225
- >
10226
- <div class="min-w-0">
10227
- <h2 class="text-sm font-semibold text-gray-900">Event Snippets</h2>
10228
- <p class="mt-1 text-[11px] text-gray-500">
10229
- Compile AG-UI events, run them on the live agent, and save them
10230
- for later. Tool-call runs use the real frontend-tool handler.
10231
- </p>
10232
- </div>
10233
- ${this.renderSnippetImportControl()}
10234
- </div>
10235
- ${this.snippetBanner ? lit.html`<div
10236
- class="border-b border-emerald-200 bg-emerald-50 px-4 py-2 text-[11px] text-emerald-800"
10237
- role="status"
10238
- >
10239
- ${this.snippetBanner}
10240
- </div>` : lit.nothing}
10241
- ${this.snippetError ? lit.html`<div
10242
- class="border-b border-rose-200 bg-rose-50 px-4 py-2 text-[11px] text-rose-800"
10243
- role="alert"
10244
- >
10245
- ${this.snippetError}
10246
- </div>` : lit.nothing}
10247
- ${this.snippetConfirmOpen ? lit.html`<div
10248
- class="border-b border-amber-200 bg-amber-50 px-4 py-2 text-[11px] text-amber-900"
10249
- role="alertdialog"
10250
- aria-label="Confirm tool-call run"
10251
- >
10252
- <p>
10253
- This snippet contains a tool call. Run will execute the real
10254
- handler on the live thread.
10255
- </p>
10256
- <div class="mt-2 flex gap-2">
10257
- <button
10258
- type="button"
10259
- class="rounded-md bg-gray-900 px-2 py-1 text-[11px] text-white"
10260
- data-testid="cpk-snippet-run-handler"
10261
- @click=${() => {
10262
- this.snippetConfirmOpen = true;
10263
- this.runCurrentSnippet();
10264
- }}
10265
- >
10266
- Run handler
10267
- </button>
10268
- <button
10269
- type="button"
10270
- class="rounded-md border border-gray-300 bg-white px-2 py-1 text-[11px]"
10271
- @click=${() => {
10272
- this.snippetConfirmOpen = false;
10273
- this.requestUpdate();
10274
- }}
10275
- >
10276
- Cancel
10277
- </button>
10278
- </div>
10279
- </div>` : lit.nothing}
10280
- <div class="flex min-h-0 flex-1">
10281
- <div
10282
- class="inspector-snippet-sidebar shrink-0"
10283
- style="width:${this.snippetListWidth}px"
10284
- data-testid="cpk-snippet-list"
10285
- >
10286
- ${snippetGroups.length === 0 ? lit.html`
10287
- <p class="px-2 py-2 text-[11px] text-gray-500">No saved snippets yet.</p>
10288
- ` : lit.html`
10289
- <nav class="inspector-sidebar-nav" aria-label="Saved snippets">
10290
- ${snippetGroups.map((group) => lit.html`
10291
- <div class="inspector-sidebar-section">
10292
- <div
10293
- class="inspector-sidebar-label"
10294
- data-testid="cpk-snippet-category"
10295
- data-recipe=${group.recipe}
10296
- >
10297
- ${group.label}
10298
- </div>
10299
- ${group.snippets.map((snippet) => {
10300
- const isSelected = snippet.id === this.selectedSnippetId;
10301
- return lit.html`
10302
- <button
10303
- type="button"
10304
- class="inspector-nav-control inspector-sidebar-control ${isSelected ? "inspector-nav-control-active" : ""}"
10305
- data-testid="cpk-snippet-item"
10306
- data-recipe=${snippet.recipe}
10307
- aria-current=${isSelected ? "page" : lit.nothing}
10308
- aria-label="${require_event_snippets.recipeLabel(snippet.recipe)}: ${snippet.name}"
10309
- style=${INTERACTIVE_FOCUS_BASE_STYLE}
10310
- @click=${() => this.selectEventSnippet(snippet.id)}
10311
- >
10312
- <span
10313
- class="inspector-nav-icon"
10314
- aria-hidden="true"
10315
- >
10316
- <span
10317
- class="flex h-6 w-6 items-center justify-center rounded-md ${require_event_snippets.recipeIconWrapClass(snippet.recipe)}"
10318
- >
10319
- ${this.renderIcon(require_event_snippets.recipeIconName(snippet.recipe))}
10320
- </span>
10321
- </span>
10322
- <span class="inspector-nav-label"
10323
- >${snippet.name}</span
10324
- >
10325
- </button>
10326
- `;
10327
- })}
10328
- </div>
10329
- `)}
10330
- </nav>
10331
- `}
10332
- </div>
10333
- <div
10334
- class="w-1.5 shrink-0 cursor-col-resize bg-gray-200 hover:bg-gray-400"
10335
- role="separator"
10336
- aria-orientation="vertical"
10337
- aria-label="Resize snippet list"
10338
- title="Drag to resize"
10339
- data-testid="cpk-snippet-list-resize"
10340
- style="touch-action:none"
10341
- @pointerdown=${this.handleSnippetListDividerPointerDown}
10342
- @pointermove=${this.handleSnippetListDividerPointerMove}
10343
- @pointerup=${this.handleSnippetListDividerPointerUp}
10344
- @pointercancel=${this.handleSnippetListDividerPointerUp}
10345
- ></div>
10346
- <div class="flex min-h-0 min-w-0 flex-1 flex-col gap-2 overflow-auto p-4">
10347
- <label class="text-[11px] text-gray-600">
10348
- Name
10349
- <input
10350
- class="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
10351
- data-testid="cpk-snippet-name"
10352
- .value=${this.snippetName}
10353
- @input=${(event) => {
10354
- this.snippetName = event.target.value;
10355
- }}
10356
- />
10357
- </label>
10358
- <label class="text-[11px] text-gray-600">
10359
- Recipe
10360
- <select
10361
- class="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
10362
- data-testid="cpk-snippet-recipe"
10363
- .value=${this.snippetRecipe}
10364
- @change=${this.handleSnippetRecipeChange}
10365
- >
10366
- ${[
10367
- "tool-call",
10368
- "reasoning",
10369
- "text",
10370
- "activity",
10371
- "raw"
10372
- ].map((recipe) => lit.html`<option
10373
- value=${recipe}
10374
- ?selected=${recipe === this.snippetRecipe}
10375
- >
10376
- ${require_event_snippets.recipeLabel(recipe)}
10377
- </option>`)}
10378
- </select>
10379
- </label>
10380
- ${this.snippetRecipe === "tool-call" ? lit.html`
10381
- <label class="text-[11px] text-gray-600">
10382
- Tool
10383
- <input
10384
- list="cpk-snippet-tools"
10385
- class="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
10386
- data-testid="cpk-snippet-tool-name"
10387
- .value=${this.snippetToolName}
10388
- @input=${(event) => {
10389
- this.snippetToolName = event.target.value;
10390
- this.applyRecipeToEditor();
10391
- }}
10392
- />
10393
- <datalist id="cpk-snippet-tools">
10394
- ${tools.map((tool) => lit.html`<option value=${tool.name}></option>`)}
10395
- </datalist>
10396
- </label>
10397
- <label class="text-[11px] text-gray-600">
10398
- Args JSON
10399
- <textarea
10400
- class="mt-1 h-20 w-full rounded-md border border-gray-200 px-2 py-1 font-mono text-[11px]"
10401
- data-testid="cpk-snippet-tool-args"
10402
- .value=${this.snippetToolArgs}
10403
- @input=${(event) => {
10404
- this.snippetToolArgs = event.target.value;
10405
- this.applyRecipeToEditor();
10406
- }}
10407
- ></textarea>
10408
- </label>
10409
- ` : lit.nothing}
10410
- ${this.snippetRecipe === "reasoning" ? lit.html`<label class="text-[11px] text-gray-600">
10411
- Reasoning
10412
- <textarea
10413
- class="mt-1 h-20 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
10414
- data-testid="cpk-snippet-reasoning"
10415
- .value=${this.snippetReasoningText}
10416
- @input=${(event) => {
10417
- this.snippetReasoningText = event.target.value;
10418
- this.applyRecipeToEditor();
10419
- }}
10420
- ></textarea>
10421
- </label>` : lit.nothing}
10422
- ${this.snippetRecipe === "text" ? lit.html`<label class="text-[11px] text-gray-600">
10423
- Assistant text
10424
- <textarea
10425
- class="mt-1 h-20 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
10426
- data-testid="cpk-snippet-text"
10427
- .value=${this.snippetTextContent}
10428
- @input=${(event) => {
10429
- this.snippetTextContent = event.target.value;
10430
- this.applyRecipeToEditor();
10431
- }}
10432
- ></textarea>
10433
- </label>` : lit.nothing}
10434
- ${this.snippetRecipe === "activity" ? lit.html`
10435
- <label class="text-[11px] text-gray-600">
10436
- Activity type
10437
- <input
10438
- list="cpk-snippet-activity"
10439
- class="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
10440
- data-testid="cpk-snippet-activity-type"
10441
- .value=${this.snippetActivityType}
10442
- @input=${(event) => {
10443
- this.snippetActivityType = event.target.value;
10444
- this.applyRecipeToEditor();
10445
- }}
10446
- />
10447
- <datalist id="cpk-snippet-activity">
10448
- ${require_event_snippets.ACTIVITY_STARTERS.map((type) => lit.html`<option value=${type}></option>`)}
10449
- </datalist>
10450
- </label>
10451
- <label class="text-[11px] text-gray-600">
10452
- Content JSON
10453
- <textarea
10454
- class="mt-1 h-24 w-full rounded-md border border-gray-200 px-2 py-1 font-mono text-[11px]"
10455
- data-testid="cpk-snippet-activity-content"
10456
- .value=${this.snippetActivityContent}
10457
- @input=${(event) => {
10458
- this.snippetActivityContent = event.target.value;
10459
- this.applyRecipeToEditor();
10460
- }}
10461
- ></textarea>
10462
- </label>
10463
- ` : lit.nothing}
10464
- <label class="text-[11px] text-gray-600">
10465
- Events JSON
10466
- <textarea
10467
- class="mt-1 h-40 w-full rounded-md border border-gray-200 px-2 py-1 font-mono text-[11px]"
10468
- data-testid="cpk-snippet-json"
10469
- .value=${this.snippetJson}
10470
- @input=${(event) => {
10471
- this.snippetJson = event.target.value;
10472
- this.requestUpdate();
10473
- }}
10474
- ></textarea>
10475
- </label>
10476
- <div class="flex flex-wrap gap-2">
10477
- <button
10478
- type="button"
10479
- class="rounded-md bg-gray-900 px-3 py-1.5 text-[11px] text-white disabled:opacity-50"
10480
- data-testid="cpk-snippet-run"
10481
- ?disabled=${!canRun}
10482
- title=${runBlocked ? "The agent is running. Wait for the current run to end." : !agent ? "No agent is available to inject into." : !canRunJson ? "Events JSON must be a non-empty event array." : "Run snippet"}
10483
- @click=${() => void this.runCurrentSnippet()}
10484
- >
10485
- ${runBlocked ? "Agent running" : "Run"}
10486
- </button>
10487
- <button
10488
- type="button"
10489
- class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-[11px] disabled:opacity-50"
10490
- data-testid="cpk-snippet-save"
10491
- ?disabled=${!canSave}
10492
- title=${canSave ? "Save snippet" : "Events JSON must be a non-empty event array."}
10493
- @click=${() => this.saveCurrentSnippet("pane")}
10494
- >
10495
- Save
10496
- </button>
10497
- <button
10498
- type="button"
10499
- class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-[11px] disabled:opacity-50"
10500
- data-testid="cpk-snippet-reset"
10501
- ?disabled=${!canReset}
10502
- title=${canReset ? "Remove the last inject from the thread" : "No Inspector inject to reset."}
10503
- @click=${() => this.resetLastSnippetRun()}
10504
- >
10505
- Reset last run
10506
- </button>
10507
- <button
10508
- type="button"
10509
- class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-[11px] disabled:opacity-50"
10510
- data-testid="cpk-snippet-delete"
10511
- ?disabled=${!canDelete}
10512
- title=${canDelete ? "Delete this snippet" : "Select a snippet to delete."}
10513
- @click=${() => {
10514
- if (!this.selectedSnippetId) return;
10515
- if (!window.confirm("Delete this snippet?")) return;
10516
- this.eventSnippets = require_event_snippets.deleteEventSnippet(this.selectedSnippetId);
10517
- this.selectedSnippetId = null;
10518
- this.requestUpdate();
10519
- }}
10520
- >
10521
- Delete
10522
- </button>
10523
- <button
10524
- type="button"
10525
- class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-[11px] disabled:opacity-50"
10526
- data-testid="cpk-snippet-export"
10527
- ?disabled=${!canExport}
10528
- title=${canExport ? "Export snippets" : "Save a snippet before you export."}
10529
- @click=${() => {
10530
- if (!canExport) return;
10531
- const blob = new Blob([require_event_snippets.exportEventSnippetsJson(this.eventSnippets)], { type: "application/json" });
10532
- const url = URL.createObjectURL(blob);
10533
- const link = document.createElement("a");
10534
- link.href = url;
10535
- link.download = "event-snippets.json";
10536
- link.click();
10537
- URL.revokeObjectURL(url);
10538
- }}
10539
- >
10540
- Export
10541
- </button>
10542
- </div>
10543
- </div>
10544
- </div>
10545
- </div>
10546
9953
  `;
10547
9954
  }
10548
9955
  renderMainContent() {
@@ -10558,7 +9965,6 @@ ${argsString}</pre
10558
9965
  </div>
10559
9966
  `;
10560
9967
  if (this.selectedMenu === "playground") return this.renderPlaygroundView();
10561
- if (this.selectedMenu === "event-snippets") return this.renderEventSnippetsView();
10562
9968
  if (this.selectedMenu === "agents") return this.renderAgentsView();
10563
9969
  if (this.selectedMenu === "frontend-tools") return this.renderToolsView();
10564
9970
  if (this.selectedMenu === "capabilities") return this.renderCapabilitiesView();
@@ -12765,7 +12171,6 @@ ${prettyEvent}</pre
12765
12171
  if (previousMenu !== "memories" && !this.core?.telemetryDisabled) require_telemetry.trackMemoriesTabClicked(this.getMemoriesTelemetryProps());
12766
12172
  }
12767
12173
  if (key === "home" && previousMenu !== "home") this.homeViewedThisOpen = false;
12768
- if (key === "event-snippets") this.reloadEventSnippets();
12769
12174
  if (key === "ag-ui-events" || key === "agents") {
12770
12175
  if (!(this.pendingScrollToEventId !== null || this.pendingScrollToToolCallId !== null)) requestAnimationFrame(() => {
12771
12176
  const scroller = this.activeRoot.querySelector("#cpk-main-scroll");
@@ -14030,10 +13435,7 @@ exports.CpkThreadInspector = CpkThreadInspector;
14030
13435
  exports.THREAD_INSPECTOR_TAG = THREAD_INSPECTOR_TAG;
14031
13436
  exports.WEB_INSPECTOR_TAG = WEB_INSPECTOR_TAG;
14032
13437
  exports.WebInspectorElement = WebInspectorElement;
14033
- exports.compileChatSnippet = require_event_snippets.compileChatSnippet;
14034
- exports.compileFromActivityMessage = require_event_snippets.compileFromActivityMessage;
14035
13438
  exports.defineWebInspector = defineWebInspector;
14036
- exports.upsertEventSnippet = require_event_snippets.upsertEventSnippet;
14037
13439
  exports.ɵCpkThreadDetails = ɵCpkThreadDetails;
14038
13440
  exports.ɵbuildCapabilityRows = buildCapabilityRows;
14039
13441
  exports.ɵmaxRecallScore = maxRecallScore;