@copilotkit/web-inspector 1.69.1 → 1.69.2

package/dist/index.mjs

@@ -8,14 +8,13 @@ import { projectInspectorMetadata } from "./lib/inspector-metadata.mjs";
 import { buildHomeModel, runtimeConnectionNeedsAttention } from "./lib/home-briefing.mjs";
 import { INSPECTOR_GROUPS, INSPECTOR_NAV_SECTIONS, getGroupForMenu, isInspectorMenuKey, shouldUseIconRail } from "./lib/inspector-nav.mjs";
 import { selectVisibleRealThreadId } from "./lib/thread-selection.mjs";
-import { ACTIVITY_STARTERS, compileActivityRecipe, compileChatSnippet, compileFromActivityMessage, compileReasoningRecipe, compileTextRecipe, compileToolCallRecipe, createSnippetId, deleteEventSnippet, editorStateFromSnippet, expandSnippetEventsForRun, exportEventSnippetsJson, groupEventSnippets, importEventSnippets, loadEventSnippets, parseSnippetEvents, recipeIconName, recipeIconWrapClass, recipeLabel, snippetContainsToolCall, snippetJsonIsRunnable, upsertEventSnippet } from "./lib/event-snippets.mjs";
-import { TELEMETRY_DOCS_URL, ensureTelemetryDistinctId, getRuntimeUrlType, getTelemetryDistinctIdForUrl, maybeShowDisclosure, trackErrorSignalViewed, trackEventSnippetsRun, trackEventSnippetsSaved, trackHomeCtaClicked, trackHomeViewed, trackInspectorOpened, trackMemoriesTabClicked, trackMetadataActionClicked, trackMetadataModuleViewed, trackTalkToEngineerClicked, trackThreadsEmptyEnabledViewed, trackThreadsEnabledViewed, trackThreadsExampleSelected, trackThreadsExampleTourCompleted, trackThreadsExampleTourDismissed, trackThreadsExampleTourReopened, trackThreadsExampleTourStarted, trackThreadsExampleTourStepViewed, trackThreadsExampleViewed, trackThreadsIntelligenceSignupClicked, trackThreadsLockedViewed, trackThreadsTabClicked, trackThreadsTalkToEngineerClicked, trackWhatsNewClicked, trackWhatsNewSignalViewed, trackWhatsNewViewed } from "./lib/telemetry.mjs";
+import { TELEMETRY_DOCS_URL, ensureTelemetryDistinctId, getRuntimeUrlType, getTelemetryDistinctIdForUrl, maybeShowDisclosure, trackErrorSignalViewed, trackHomeCtaClicked, trackHomeViewed, trackInspectorOpened, trackMemoriesTabClicked, trackMetadataActionClicked, trackMetadataModuleViewed, trackTalkToEngineerClicked, trackThreadsEmptyEnabledViewed, trackThreadsEnabledViewed, trackThreadsExampleSelected, trackThreadsExampleTourCompleted, trackThreadsExampleTourDismissed, trackThreadsExampleTourReopened, trackThreadsExampleTourStarted, trackThreadsExampleTourStepViewed, trackThreadsExampleViewed, trackThreadsIntelligenceSignupClicked, trackThreadsLockedViewed, trackThreadsTabClicked, trackThreadsTalkToEngineerClicked, trackWhatsNewClicked, trackWhatsNewSignalViewed, trackWhatsNewViewed } from "./lib/telemetry.mjs";
 import { LitElement, css, html, nothing, render, unsafeCSS } from "lit";
 import { marked } from "marked";
 import { styleMap } from "lit/directives/style-map.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { icons } from "lucide";
-import { CopilotKitCoreErrorCode, CopilotKitCoreRuntimeConnectionStatus, createInspectorThreadRequestId, emitInspectorStopViewing, emitInspectorViewThread, isInspectorThreadBridgeEnabled, onInspectorActiveThread, onInspectorViewThreadResult, ɵcreateThreadStore, ɵinjectInspectorEvents, ɵresetInspectorInject, ɵselectMemories, ɵselectMemoriesAvailable, ɵselectMemoriesError, ɵselectMemoriesIsLoading, ɵselectMemoriesRealtimeStatus, ɵselectThreads, ɵselectThreadsError, ɵselectThreadsIsLoading } from "@copilotkit/core";
+import { CopilotKitCoreErrorCode, CopilotKitCoreRuntimeConnectionStatus, createInspectorThreadRequestId, emitInspectorStopViewing, emitInspectorViewThread, isInspectorThreadBridgeEnabled, onInspectorActiveThread, onInspectorViewThreadResult, ɵcreateThreadStore, ɵselectMemories, ɵselectMemoriesAvailable, ɵselectMemoriesError, ɵselectMemoriesIsLoading, ɵselectMemoriesRealtimeStatus, ɵselectThreads, ɵselectThreadsError, ɵselectThreadsIsLoading } from "@copilotkit/core";
 
 //#region src/index.ts
 const WEB_INSPECTOR_TAG = "cpk-web-inspector";
@@ -4405,26 +4404,6 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			inspect: "ag-ui-events"
 		};
 		this.lastScrolledAgentNavigationLayout = null;
-		this.eventSnippets = [];
-		this.selectedSnippetId = null;
-		this.snippetRecipe = "tool-call";
-		this.snippetName = "";
-		this.snippetJson = "[]";
-		this.snippetToolName = "";
-		this.snippetToolArgs = "{}";
-		this.snippetReasoningText = "";
-		this.snippetTextContent = "";
-		this.snippetActivityType = "a2ui-surface";
-		this.snippetActivityContent = "{}";
-		this.snippetError = null;
-		this.snippetBanner = null;
-		this.snippetConfirmOpen = false;
-		this.lastInject = null;
-		this.snippetListWidth = 200;
-		this.snippetDividerResizing = false;
-		this.snippetDividerPointerId = -1;
-		this.snippetDividerStartX = 0;
-		this.snippetDividerStartWidth = 0;
 		this.selectedThreadId = null;
 		this.inAppThreadId = null;
 		this.inAppAgentId = null;
@@ -5025,19 +5004,6 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.handlePlaygroundStop = () => {
 			this.playgroundAgent?.abortRun();
 		};
-		this.handleSnippetImportChange = async (event) => {
-			const input = event.target;
-			const file = input.files?.[0];
-			input.value = "";
-			if (!file) return;
-			try {
-				this.eventSnippets = importEventSnippets(await file.text());
-				this.snippetError = null;
-			} catch (error) {
-				this.snippetError = error instanceof Error ? error.message : "Import failed.";
-			}
-			this.requestUpdate();
-		};
 		this.handleInspectorMetadataActionClick = (action, placement) => {
 			if (!this.isOpen || this.runtimeStatus !== CopilotKitCoreRuntimeConnectionStatus.Connected || this.core?.telemetryDisabled) return;
 			if (action.kind === "enable_intelligence") {
@@ -5065,26 +5031,6 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			if (this.core?.telemetryDisabled) return;
 			trackThreadsTalkToEngineerClicked(this.getThreadsCtaTelemetryProps("talk_to_engineer", "threads_locked"));
 		};
-		this.handleSnippetListDividerPointerDown = (event) => {
-			this.snippetDividerResizing = true;
-			this.snippetDividerPointerId = event.pointerId;
-			this.snippetDividerStartX = event.clientX;
-			this.snippetDividerStartWidth = this.snippetListWidth;
-			event.currentTarget.setPointerCapture(event.pointerId);
-			event.preventDefault();
-		};
-		this.handleSnippetListDividerPointerMove = (event) => {
-			if (!this.snippetDividerResizing || this.snippetDividerPointerId !== event.pointerId) return;
-			const delta = event.clientX - this.snippetDividerStartX;
-			this.snippetListWidth = Math.max(160, Math.min(360, this.snippetDividerStartWidth + delta));
-			this.requestUpdate();
-		};
-		this.handleSnippetListDividerPointerUp = (event) => {
-			if (this.snippetDividerPointerId !== event.pointerId) return;
-			const target = event.currentTarget;
-			if (target.hasPointerCapture(this.snippetDividerPointerId)) target.releasePointerCapture(this.snippetDividerPointerId);
-			this.snippetDividerResizing = false;
-		};
 		this.handleThreadDividerPointerDown = (event) => {
 			this.threadDividerResizing = true;
 			this.threadDividerPointerId = event.pointerId;
@@ -5341,11 +5287,6 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 				label: "AG-UI Events",
 				icon: "Zap"
 			},
-			{
-				key: "event-snippets",
-				label: "Event Snippets",
-				icon: "Code"
-			},
 			{
 				key: "agents",
 				label: "Agent",
@@ -6276,19 +6217,6 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.persistState();
 		this.requestUpdate();
 	}
-	focusEventSnippets(options) {
-		this.pendingPersistedMenu = null;
-		this.selectedMenu = "event-snippets";
-		this.settingsOpen = false;
-		this.lastSelectedMenuByGroup.inspect = "event-snippets";
-		this.contextMenuOpen = false;
-		this.layoutMenuOpen = false;
-		this.reloadEventSnippets();
-		if (options.snippetId) this.selectEventSnippet(options.snippetId);
-		if (options.agentId && this.contextOptions.some((option) => option.key === options.agentId)) this.selectedContext = options.agentId;
-		this.persistState();
-		this.requestUpdate();
-	}
 	filterEvents(events) {
 		const query = this.eventFilterText.trim().toLowerCase();
 		return events.filter((event) => {
@@ -6511,8 +6439,8 @@ ${argsString}</pre
            the two cannot drift apart. A dark grey rather than near-black: the
            launcher sits on a customer's page, and 1,5,7 against white is a
            harder edge than this surface needs. */
-        --cpk-launcher-face: rgba(28, 31, 36, 0.95);
-        --cpk-launcher-face-solid: rgb(28, 31, 36);
+        --cpk-launcher-face: rgba(24, 28, 31, 0.95);
+        --cpk-launcher-face-solid: rgb(24, 28, 31);
         --cpk-launcher-edge: rgba(190, 194, 255, 0.25);
         /* The launcher's own size, exposed so the signal dot can be placed
            against the OUTER rim with a length rather than a percentage.
@@ -6932,9 +6860,24 @@ ${argsString}</pre
       .console-button {
         background-color: var(--cpk-launcher-face) !important;
         border-color: var(--cpk-launcher-edge) !important;
+        /* One hairline, not two. The border above is it; a second ring used to
+           sit 1px outside as a box-shadow and hardcoded the lilac instead of
+           reading the --cpk-launcher-edge token, so it could not follow it.
+           What replaces it is a one-pixel light edge along the top, which is
+           what keeps the face from reading flat without drawing a frame.
+
+           The border is not decoration: the face is #181C1F, which against a
+           dark host page (GitHub dark 1.10:1, Tailwind slate-900 1.04:1) is
+           indistinguishable from the page. It is the only thing that gives the
+           launcher an outline there, so it stays. */
         box-shadow:
-          0 0 0 1px rgba(190, 194, 255, 0.15),
+          inset 0 1px 0 rgba(255, 255, 255, 0.07),
           0 4px 14px rgba(1, 5, 7, 0.28) !important;
+        /* Promotes the launcher to its own compositing layer, which the
+           backdrop-filter this replaces used to do as a side effect. Without
+           a layer the hover scale re-rasterises the mark every frame and it
+           visibly jitters; with one, the compositor scales it as a texture. */
+        will-change: transform;
       }
       .console-button:hover {
         background-color: var(--cpk-launcher-face-solid) !important;
@@ -7060,8 +7003,23 @@ ${argsString}</pre
         width: 19%;
         height: 19%;
         border-radius: 50%;
-        background: var(--cpk-launcher-signal);
-        box-shadow: 0 0 0 1.5px var(--cpk-launcher-face);
+        /* Lit from the upper left and shaded at the lower right, so the dot
+           reads as a lens rather than a flat disc. Both stops are derived from
+           the signal colour, so a new tone needs no new values. */
+        background: radial-gradient(
+          circle at 32% 28%,
+          color-mix(in srgb, var(--cpk-launcher-signal), white 40%) 0%,
+          var(--cpk-launcher-signal) 60%,
+          color-mix(in srgb, var(--cpk-launcher-signal), black 20%) 100%
+        );
+        /* Replaces an opaque 1.5px collar in the launcher's own face. That
+           collar was 21% of the dot's footprint, and because the dot's centre
+           sits *on* the rim, its outer half painted a hard dark crescent onto
+           the host page rather than onto the launcher. A hairline plus a soft
+           drop does the same separating job without the hard edge. */
+        box-shadow:
+          0 0 0 0.5px rgba(1, 5, 7, 0.4),
+          0 1px 2.5px rgba(1, 5, 7, 0.5);
       }
 
       /* ── Launcher pill: the launcher opens sideways and says what ─── */
@@ -7962,17 +7920,10 @@ ${argsString}</pre
 			"justify-center",
 			"rounded-full",
 			"border",
-			"border-white/20",
-			"bg-slate-950/95",
 			"text-xs",
 			"font-medium",
 			"text-white",
-			"ring-1",
-			"ring-white/10",
-			"backdrop-blur-md",
 			"transition",
-			"hover:border-white/30",
-			"hover:bg-slate-900/95",
 			"hover:scale-105",
 			"focus-visible:outline",
 			"focus-visible:outline-2",
@@ -9533,8 +9484,7 @@ ${argsString}</pre
 		this.draggedDuringInteraction = false;
 	}
 	openInspector(source, options = {}) {
-		if (options.snippetId || options.menu === "event-snippets") this.focusEventSnippets(options);
-		else if (options.threadId) this.focusThread(options);
+		if (options.threadId) this.focusThread(options);
 		if (this.isPoppedOut) return;
 		if (this.isOpen) return;
 		const hadUnseenAnnouncement = this.newsSignalArmed;
@@ -9999,549 +9949,6 @@ ${argsString}</pre
           AI can make mistakes. Please verify important information.
         </p>
       </form>
-    `;
-	}
-	reloadEventSnippets() {
-		this.eventSnippets = loadEventSnippets();
-	}
-	renderSnippetImportControl() {
-		return html`
-      <label
-        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"
-        data-testid="cpk-snippet-import"
-      >
-        Import
-        <input
-          type="file"
-          accept="application/json"
-          class="hidden"
-          @change=${this.handleSnippetImportChange}
-        />
-      </label>
-    `;
-	}
-	selectEventSnippet(id) {
-		const snippet = this.eventSnippets.find((item) => item.id === id);
-		this.selectedSnippetId = id;
-		if (!snippet) {
-			this.requestUpdate();
-			return;
-		}
-		const editor = editorStateFromSnippet(snippet);
-		this.snippetRecipe = editor.recipe;
-		this.snippetName = editor.name;
-		this.snippetJson = editor.json;
-		this.snippetToolName = editor.draft.toolName;
-		this.snippetToolArgs = editor.draft.toolArgs;
-		this.snippetReasoningText = editor.draft.reasoningText;
-		this.snippetTextContent = editor.draft.textContent;
-		this.snippetActivityType = editor.draft.activityType;
-		this.snippetActivityContent = editor.draft.activityContent;
-		this.snippetError = null;
-		this.requestUpdate();
-	}
-	compileSnippetDraft() {
-		switch (this.snippetRecipe) {
-			case "tool-call": return compileToolCallRecipe({
-				toolName: this.snippetToolName,
-				argsJson: this.snippetToolArgs,
-				threadId: this.getSnippetThreadId(),
-				runId: this.getSnippetRunId()
-			});
-			case "reasoning": return compileReasoningRecipe({
-				text: this.snippetReasoningText,
-				threadId: this.getSnippetThreadId(),
-				runId: this.getSnippetRunId()
-			});
-			case "text": return compileTextRecipe({
-				text: this.snippetTextContent,
-				threadId: this.getSnippetThreadId(),
-				runId: this.getSnippetRunId()
-			});
-			case "activity": return compileActivityRecipe({
-				activityType: this.snippetActivityType,
-				contentJson: this.snippetActivityContent,
-				threadId: this.getSnippetThreadId(),
-				runId: this.getSnippetRunId()
-			});
-			case "raw": return parseSnippetEvents(this.snippetJson);
-		}
-	}
-	getSnippetThreadId() {
-		return this.selectedThreadId ?? "inspector-snippet";
-	}
-	getSnippetRunId() {
-		return `inspector-snippet-${Date.now()}`;
-	}
-	getSnippetTargetAgent() {
-		const core = this._core;
-		if (!core) return null;
-		const selected = this.selectedContext !== "all-agents" ? this.selectedContext : null;
-		if (selected) return core.getAgent(selected) ?? null;
-		const first = this.contextOptions.find((option) => option.key !== "all-agents");
-		return first ? core.getAgent(first.key) ?? null : null;
-	}
-	applyRecipeToEditor() {
-		try {
-			const events = this.compileSnippetDraft();
-			this.snippetJson = JSON.stringify(events, null, 2);
-			this.snippetError = null;
-		} catch (error) {
-			this.snippetError = error instanceof Error ? error.message : "Could not compile recipe.";
-		}
-		this.requestUpdate();
-	}
-	handleSnippetRecipeChange(event) {
-		const value = event.target.value;
-		if (value === "tool-call" || value === "reasoning" || value === "text" || value === "activity" || value === "raw") {
-			this.snippetRecipe = value;
-			if (value !== "raw") this.applyRecipeToEditor();
-			else this.requestUpdate();
-		}
-	}
-	saveCurrentSnippet(source) {
-		try {
-			const events = parseSnippetEvents(this.snippetJson);
-			const now = (/* @__PURE__ */ new Date()).toISOString();
-			const snippet = {
-				id: this.selectedSnippetId ?? createSnippetId(),
-				name: this.snippetName.trim() || recipeLabel(this.snippetRecipe),
-				recipe: this.snippetRecipe,
-				events,
-				createdAt: this.eventSnippets.find((item) => item.id === this.selectedSnippetId)?.createdAt ?? now,
-				updatedAt: now
-			};
-			this.eventSnippets = upsertEventSnippet(snippet);
-			this.selectedSnippetId = snippet.id;
-			this.snippetBanner = "Snippet saved.";
-			this.snippetError = null;
-			if (!this.core?.telemetryDisabled) trackEventSnippetsSaved({
-				recipe: this.snippetRecipe,
-				source,
-				success: true
-			});
-		} catch (error) {
-			this.snippetError = error instanceof Error ? error.message : "Could not save snippet.";
-			if (!this.core?.telemetryDisabled) trackEventSnippetsSaved({
-				recipe: this.snippetRecipe,
-				source,
-				success: false
-			});
-		}
-		this.requestUpdate();
-	}
-	async runCurrentSnippet() {
-		this.snippetError = null;
-		this.snippetBanner = null;
-		let events;
-		try {
-			events = expandSnippetEventsForRun(parseSnippetEvents(this.snippetJson));
-		} catch (error) {
-			this.snippetError = error instanceof Error ? error.message : "Snippet JSON is invalid.";
-			this.requestUpdate();
-			return;
-		}
-		if (snippetContainsToolCall(events) && !this.snippetConfirmOpen) {
-			this.snippetConfirmOpen = true;
-			this.requestUpdate();
-			return;
-		}
-		this.snippetConfirmOpen = false;
-		const core = this._core;
-		const agent = this.getSnippetTargetAgent();
-		if (!core || !agent) {
-			this.snippetError = "No agent is available to inject into.";
-			this.requestUpdate();
-			return;
-		}
-		if (agent.isRunning) {
-			this.snippetError = "The agent is running. Wait for the current run to end.";
-			this.requestUpdate();
-			return;
-		}
-		try {
-			const result = await ɵinjectInspectorEvents({
-				core,
-				agent,
-				events
-			});
-			this.lastInject = {
-				snippetId: this.selectedSnippetId ?? "unsaved",
-				agentId: agent.agentId ?? "default",
-				runId: this.getSnippetRunId(),
-				messageIds: result.messageIds
-			};
-			this.snippetBanner = "Inspector injected these events into the live thread.";
-			if (!this.core?.telemetryDisabled) trackEventSnippetsRun({
-				recipe: this.snippetRecipe,
-				source: "pane",
-				success: true
-			});
-		} catch (error) {
-			this.snippetError = error instanceof Error ? error.message : "Could not run snippet.";
-			if (!this.core?.telemetryDisabled) trackEventSnippetsRun({
-				recipe: this.snippetRecipe,
-				source: "pane",
-				success: false
-			});
-		}
-		this.requestUpdate();
-	}
-	resetLastSnippetRun() {
-		const last = this.lastInject;
-		const core = this._core;
-		if (!last || !core) return;
-		const agent = core.getAgent(last.agentId);
-		if (!agent) {
-			this.snippetError = "The injected agent is no longer available.";
-			this.requestUpdate();
-			return;
-		}
-		ɵresetInspectorInject({
-			agent,
-			messageIds: last.messageIds
-		});
-		this.lastInject = null;
-		this.snippetBanner = "Last inject was removed from the thread. App state from a tool handler was not undone.";
-		this.requestUpdate();
-	}
-	renderEventSnippetsView() {
-		if (this.eventSnippets.length === 0 && this.selectedSnippetId === null) this.reloadEventSnippets();
-		const agent = this.getSnippetTargetAgent();
-		const runBlocked = agent?.isRunning === true;
-		const canRunJson = snippetJsonIsRunnable(this.snippetJson);
-		const canRun = canRunJson && !!agent && !runBlocked;
-		const canSave = canRunJson;
-		const canDelete = this.selectedSnippetId !== null;
-		const canExport = this.eventSnippets.length > 0;
-		const canReset = this.lastInject !== null;
-		const snippetGroups = groupEventSnippets(this.eventSnippets);
-		const tools = this._core?.tools ?? [];
-		return html`
-      <div class="flex h-full min-h-0 flex-col bg-white">
-        <div
-          class="flex items-center justify-between gap-4 border-b border-gray-200 px-4 py-3"
-        >
-          <div class="min-w-0">
-            <h2 class="text-sm font-semibold text-gray-900">Event Snippets</h2>
-            <p class="mt-1 text-[11px] text-gray-500">
-              Compile AG-UI events, run them on the live agent, and save them
-              for later. Tool-call runs use the real frontend-tool handler.
-            </p>
-          </div>
-          ${this.renderSnippetImportControl()}
-        </div>
-        ${this.snippetBanner ? html`<div
-                class="border-b border-emerald-200 bg-emerald-50 px-4 py-2 text-[11px] text-emerald-800"
-                role="status"
-              >
-                ${this.snippetBanner}
-              </div>` : nothing}
-        ${this.snippetError ? html`<div
-                class="border-b border-rose-200 bg-rose-50 px-4 py-2 text-[11px] text-rose-800"
-                role="alert"
-              >
-                ${this.snippetError}
-              </div>` : nothing}
-        ${this.snippetConfirmOpen ? html`<div
-                class="border-b border-amber-200 bg-amber-50 px-4 py-2 text-[11px] text-amber-900"
-                role="alertdialog"
-                aria-label="Confirm tool-call run"
-              >
-                <p>
-                  This snippet contains a tool call. Run will execute the real
-                  handler on the live thread.
-                </p>
-                <div class="mt-2 flex gap-2">
-                  <button
-                    type="button"
-                    class="rounded-md bg-gray-900 px-2 py-1 text-[11px] text-white"
-                    data-testid="cpk-snippet-run-handler"
-                    @click=${() => {
-			this.snippetConfirmOpen = true;
-			this.runCurrentSnippet();
-		}}
-                  >
-                    Run handler
-                  </button>
-                  <button
-                    type="button"
-                    class="rounded-md border border-gray-300 bg-white px-2 py-1 text-[11px]"
-                    @click=${() => {
-			this.snippetConfirmOpen = false;
-			this.requestUpdate();
-		}}
-                  >
-                    Cancel
-                  </button>
-                </div>
-              </div>` : nothing}
-        <div class="flex min-h-0 flex-1">
-          <div
-            class="inspector-snippet-sidebar shrink-0"
-            style="width:${this.snippetListWidth}px"
-            data-testid="cpk-snippet-list"
-          >
-            ${snippetGroups.length === 0 ? html`
-                    <p class="px-2 py-2 text-[11px] text-gray-500">No saved snippets yet.</p>
-                  ` : html`
-                    <nav class="inspector-sidebar-nav" aria-label="Saved snippets">
-                      ${snippetGroups.map((group) => html`
-                          <div class="inspector-sidebar-section">
-                            <div
-                              class="inspector-sidebar-label"
-                              data-testid="cpk-snippet-category"
-                              data-recipe=${group.recipe}
-                            >
-                              ${group.label}
-                            </div>
-                            ${group.snippets.map((snippet) => {
-			const isSelected = snippet.id === this.selectedSnippetId;
-			return html`
-                                <button
-                                  type="button"
-                                  class="inspector-nav-control inspector-sidebar-control ${isSelected ? "inspector-nav-control-active" : ""}"
-                                  data-testid="cpk-snippet-item"
-                                  data-recipe=${snippet.recipe}
-                                  aria-current=${isSelected ? "page" : nothing}
-                                  aria-label="${recipeLabel(snippet.recipe)}: ${snippet.name}"
-                                  style=${INTERACTIVE_FOCUS_BASE_STYLE}
-                                  @click=${() => this.selectEventSnippet(snippet.id)}
-                                >
-                                  <span
-                                    class="inspector-nav-icon"
-                                    aria-hidden="true"
-                                  >
-                                    <span
-                                      class="flex h-6 w-6 items-center justify-center rounded-md ${recipeIconWrapClass(snippet.recipe)}"
-                                    >
-                                      ${this.renderIcon(recipeIconName(snippet.recipe))}
-                                    </span>
-                                  </span>
-                                  <span class="inspector-nav-label"
-                                    >${snippet.name}</span
-                                  >
-                                </button>
-                              `;
-		})}
-                          </div>
-                        `)}
-                    </nav>
-                  `}
-          </div>
-          <div
-            class="w-1.5 shrink-0 cursor-col-resize bg-gray-200 hover:bg-gray-400"
-            role="separator"
-            aria-orientation="vertical"
-            aria-label="Resize snippet list"
-            title="Drag to resize"
-            data-testid="cpk-snippet-list-resize"
-            style="touch-action:none"
-            @pointerdown=${this.handleSnippetListDividerPointerDown}
-            @pointermove=${this.handleSnippetListDividerPointerMove}
-            @pointerup=${this.handleSnippetListDividerPointerUp}
-            @pointercancel=${this.handleSnippetListDividerPointerUp}
-          ></div>
-          <div class="flex min-h-0 min-w-0 flex-1 flex-col gap-2 overflow-auto p-4">
-            <label class="text-[11px] text-gray-600">
-              Name
-              <input
-                class="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
-                data-testid="cpk-snippet-name"
-                .value=${this.snippetName}
-                @input=${(event) => {
-			this.snippetName = event.target.value;
-		}}
-              />
-            </label>
-            <label class="text-[11px] text-gray-600">
-              Recipe
-              <select
-                class="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
-                data-testid="cpk-snippet-recipe"
-                .value=${this.snippetRecipe}
-                @change=${this.handleSnippetRecipeChange}
-              >
-                ${[
-			"tool-call",
-			"reasoning",
-			"text",
-			"activity",
-			"raw"
-		].map((recipe) => html`<option
-                    value=${recipe}
-                    ?selected=${recipe === this.snippetRecipe}
-                  >
-                    ${recipeLabel(recipe)}
-                  </option>`)}
-              </select>
-            </label>
-            ${this.snippetRecipe === "tool-call" ? html`
-                    <label class="text-[11px] text-gray-600">
-                      Tool
-                      <input
-                        list="cpk-snippet-tools"
-                        class="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
-                        data-testid="cpk-snippet-tool-name"
-                        .value=${this.snippetToolName}
-                        @input=${(event) => {
-			this.snippetToolName = event.target.value;
-			this.applyRecipeToEditor();
-		}}
-                      />
-                      <datalist id="cpk-snippet-tools">
-                        ${tools.map((tool) => html`<option value=${tool.name}></option>`)}
-                      </datalist>
-                    </label>
-                    <label class="text-[11px] text-gray-600">
-                      Args JSON
-                      <textarea
-                        class="mt-1 h-20 w-full rounded-md border border-gray-200 px-2 py-1 font-mono text-[11px]"
-                        data-testid="cpk-snippet-tool-args"
-                        .value=${this.snippetToolArgs}
-                        @input=${(event) => {
-			this.snippetToolArgs = event.target.value;
-			this.applyRecipeToEditor();
-		}}
-                      ></textarea>
-                    </label>
-                  ` : nothing}
-            ${this.snippetRecipe === "reasoning" ? html`<label class="text-[11px] text-gray-600">
-                    Reasoning
-                    <textarea
-                      class="mt-1 h-20 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
-                      data-testid="cpk-snippet-reasoning"
-                      .value=${this.snippetReasoningText}
-                      @input=${(event) => {
-			this.snippetReasoningText = event.target.value;
-			this.applyRecipeToEditor();
-		}}
-                    ></textarea>
-                  </label>` : nothing}
-            ${this.snippetRecipe === "text" ? html`<label class="text-[11px] text-gray-600">
-                    Assistant text
-                    <textarea
-                      class="mt-1 h-20 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
-                      data-testid="cpk-snippet-text"
-                      .value=${this.snippetTextContent}
-                      @input=${(event) => {
-			this.snippetTextContent = event.target.value;
-			this.applyRecipeToEditor();
-		}}
-                    ></textarea>
-                  </label>` : nothing}
-            ${this.snippetRecipe === "activity" ? html`
-                    <label class="text-[11px] text-gray-600">
-                      Activity type
-                      <input
-                        list="cpk-snippet-activity"
-                        class="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-[11px]"
-                        data-testid="cpk-snippet-activity-type"
-                        .value=${this.snippetActivityType}
-                        @input=${(event) => {
-			this.snippetActivityType = event.target.value;
-			this.applyRecipeToEditor();
-		}}
-                      />
-                      <datalist id="cpk-snippet-activity">
-                        ${ACTIVITY_STARTERS.map((type) => html`<option value=${type}></option>`)}
-                      </datalist>
-                    </label>
-                    <label class="text-[11px] text-gray-600">
-                      Content JSON
-                      <textarea
-                        class="mt-1 h-24 w-full rounded-md border border-gray-200 px-2 py-1 font-mono text-[11px]"
-                        data-testid="cpk-snippet-activity-content"
-                        .value=${this.snippetActivityContent}
-                        @input=${(event) => {
-			this.snippetActivityContent = event.target.value;
-			this.applyRecipeToEditor();
-		}}
-                      ></textarea>
-                    </label>
-                  ` : nothing}
-            <label class="text-[11px] text-gray-600">
-              Events JSON
-              <textarea
-                class="mt-1 h-40 w-full rounded-md border border-gray-200 px-2 py-1 font-mono text-[11px]"
-                data-testid="cpk-snippet-json"
-                .value=${this.snippetJson}
-                @input=${(event) => {
-			this.snippetJson = event.target.value;
-			this.requestUpdate();
-		}}
-              ></textarea>
-            </label>
-            <div class="flex flex-wrap gap-2">
-              <button
-                type="button"
-                class="rounded-md bg-gray-900 px-3 py-1.5 text-[11px] text-white disabled:opacity-50"
-                data-testid="cpk-snippet-run"
-                ?disabled=${!canRun}
-                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"}
-                @click=${() => void this.runCurrentSnippet()}
-              >
-                ${runBlocked ? "Agent running" : "Run"}
-              </button>
-              <button
-                type="button"
-                class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-[11px] disabled:opacity-50"
-                data-testid="cpk-snippet-save"
-                ?disabled=${!canSave}
-                title=${canSave ? "Save snippet" : "Events JSON must be a non-empty event array."}
-                @click=${() => this.saveCurrentSnippet("pane")}
-              >
-                Save
-              </button>
-              <button
-                type="button"
-                class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-[11px] disabled:opacity-50"
-                data-testid="cpk-snippet-reset"
-                ?disabled=${!canReset}
-                title=${canReset ? "Remove the last inject from the thread" : "No Inspector inject to reset."}
-                @click=${() => this.resetLastSnippetRun()}
-              >
-                Reset last run
-              </button>
-              <button
-                type="button"
-                class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-[11px] disabled:opacity-50"
-                data-testid="cpk-snippet-delete"
-                ?disabled=${!canDelete}
-                title=${canDelete ? "Delete this snippet" : "Select a snippet to delete."}
-                @click=${() => {
-			if (!this.selectedSnippetId) return;
-			if (!window.confirm("Delete this snippet?")) return;
-			this.eventSnippets = deleteEventSnippet(this.selectedSnippetId);
-			this.selectedSnippetId = null;
-			this.requestUpdate();
-		}}
-              >
-                Delete
-              </button>
-              <button
-                type="button"
-                class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-[11px] disabled:opacity-50"
-                data-testid="cpk-snippet-export"
-                ?disabled=${!canExport}
-                title=${canExport ? "Export snippets" : "Save a snippet before you export."}
-                @click=${() => {
-			if (!canExport) return;
-			const blob = new Blob([exportEventSnippetsJson(this.eventSnippets)], { type: "application/json" });
-			const url = URL.createObjectURL(blob);
-			const link = document.createElement("a");
-			link.href = url;
-			link.download = "event-snippets.json";
-			link.click();
-			URL.revokeObjectURL(url);
-		}}
-              >
-                Export
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
     `;
 	}
 	renderMainContent() {
@@ -10557,7 +9964,6 @@ ${argsString}</pre
         </div>
       `;
 		if (this.selectedMenu === "playground") return this.renderPlaygroundView();
-		if (this.selectedMenu === "event-snippets") return this.renderEventSnippetsView();
 		if (this.selectedMenu === "agents") return this.renderAgentsView();
 		if (this.selectedMenu === "frontend-tools") return this.renderToolsView();
 		if (this.selectedMenu === "capabilities") return this.renderCapabilitiesView();
@@ -12764,7 +12170,6 @@ ${prettyEvent}</pre
 			if (previousMenu !== "memories" && !this.core?.telemetryDisabled) trackMemoriesTabClicked(this.getMemoriesTelemetryProps());
 		}
 		if (key === "home" && previousMenu !== "home") this.homeViewedThisOpen = false;
-		if (key === "event-snippets") this.reloadEventSnippets();
 		if (key === "ag-ui-events" || key === "agents") {
 			if (!(this.pendingScrollToEventId !== null || this.pendingScrollToToolCallId !== null)) requestAnimationFrame(() => {
 				const scroller = this.activeRoot.querySelector("#cpk-main-scroll");
@@ -14025,5 +13430,5 @@ function defineWebInspector(registry = globalThis.customElements) {
 defineWebInspector();
 
 //#endregion
-export { CpkThreadInspector, THREAD_INSPECTOR_TAG, WEB_INSPECTOR_TAG, WebInspectorElement, compileChatSnippet, compileFromActivityMessage, defineWebInspector, upsertEventSnippet, ɵCpkThreadDetails, buildCapabilityRows as ɵbuildCapabilityRows, maxRecallScore as ɵmaxRecallScore, normalizeRelevance as ɵnormalizeRelevance, relevanceBarWidth as ɵrelevanceBarWidth };
+export { CpkThreadInspector, THREAD_INSPECTOR_TAG, WEB_INSPECTOR_TAG, WebInspectorElement, defineWebInspector, ɵCpkThreadDetails, buildCapabilityRows as ɵbuildCapabilityRows, maxRecallScore as ɵmaxRecallScore, normalizeRelevance as ɵnormalizeRelevance, relevanceBarWidth as ɵrelevanceBarWidth };
 //# sourceMappingURL=index.mjs.map