@copilotkit/web-inspector 1.73.2 → 1.73.3

package/dist/index.umd.js

@@ -2404,7 +2404,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 //#endregion
 //#region package.json
-	var version = "1.73.2";
+	var version = "1.73.3";
 
 //#endregion
 //#region src/lib/telemetry.ts
@@ -2851,12 +2851,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	* The CLI resolves `onboard start` against a prompt graph, so the two surfaces
 	* must not drift — if the CLI's entry point changes, both change together.
 	*
-	* Two lines, and deliberately nothing else. It used to open by telling the
-	* agent to identify itself and pass the slug as a flag -- two sentences of
-	* instruction to a machine, in the one piece of text a human reads, decides on
-	* and pastes. The graph asks for the slug itself now, with `onboard identify`,
-	* which is the surface that talks to the agent for the rest of the run
-	* (Intelligence OSS-1157).
+	* One sentence, and deliberately nothing else. It used to carry the `npx`
+	* command itself, which put a command line and a telemetry id in the one piece
+	* of text a human reads, decides on and pastes. The command now lives in the
+	* document the URL serves, with the run id already written into it
+	* (PE-216/PE-217).
 	*
 	* This one stays generic, and so do the docs and Intelligence web-app copies
 	* of it (OSS-1150). Those three are entry points for a developer with no
@@ -2867,9 +2866,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	* `FEATURE_ONBOARDING_PROMPT_TEMPLATE` below.
 	*/
 	const RUN_ID_PLACEHOLDER = "<run-id>";
-	const ONBOARDING_PROMPT_TEMPLATE = `Help me get started with CopilotKit. Run this command and follow the instructions:
-
-npx --yes copilotkit@latest onboard start --run ${RUN_ID_PLACEHOLDER}`;
+	const ONBOARDING_PROMPT_ORIGIN = "https://copilotkit.ai";
+	const ONBOARDING_PROMPT_TEMPLATE = `Read ${ONBOARDING_PROMPT_ORIGIN}/onboarding-prompts/${RUN_ID_PLACEHOLDER} and help me get set up.`;
 	/** Length and alphabet are the CLI's, so a run id copied here resolves there. */
 	const RUN_ID_LENGTH = 12;
 	/**
@@ -2930,15 +2928,11 @@ npx --yes copilotkit@latest onboard start --run ${RUN_ID_PLACEHOLDER}`;
 	* here would duplicate all of that and then drift from it the next time the
 	* underlying API changes.
 	*
-	* What is left is the caller's own business: identify yourself, run this
-	* command, and the standing permission for the session check that the
-	* developer granted by copying the prompt.
+	* The session-check permission the developer granted by copying this, and the
+	* credentials warning beside it, moved with the command into the document the
+	* URL serves. They are not dropped.
 	*/
-	const FEATURE_ONBOARDING_PROMPT_TEMPLATE = `Help me set this up in my CopilotKit app. Run this command and follow the instructions:
-
-npx --yes copilotkit@latest onboard start --run ${RUN_ID_PLACEHOLDER} --intent ${INTENT_PLACEHOLDER}
-
-If it requires a CopilotKit CLI session check, you have permission to run it. Never reveal credentials.`;
+	const FEATURE_ONBOARDING_PROMPT_TEMPLATE = `Read ${ONBOARDING_PROMPT_ORIGIN}/onboarding-prompts/${RUN_ID_PLACEHOLDER}?intent=${INTENT_PLACEHOLDER} and help me set this up.`;
 	/** Bind one run id and one tile's feature outcome into the copied prompt. */
 	function createFeatureOnboardingPrompt(serviceId, runId) {
 		return FEATURE_ONBOARDING_PROMPT_TEMPLATE.replace(RUN_ID_PLACEHOLDER, runId).replace(INTENT_PLACEHOLDER, FEATURE_ONBOARDING_INTENT[serviceId]);
@@ -4195,6 +4189,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			this._loadingEvents = false;
 			this._loadingState = false;
 			this._messagesError = null;
+			this._messageRefreshError = null;
 			this._eventsError = null;
 			this._stateError = null;
 			this._expandedTools = /* @__PURE__ */ new Set();
@@ -4289,7 +4284,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
       </div>`;
 		}
 		renderTabContent(id) {
-			if (id === "timeline") return lit.html`${this._showEventTimeline ? lit.html`<div class="cpk-td__timeline-toolbar">${this.renderTimelineBulkButtons()}</div>${this.renderTimeline()}` : this._conversation.length || this._loadingMessages || this._messagesError ? this.renderConversation() : this.renderTimeline()}`;
+			if (id === "timeline") return lit.html`${this._messageRefreshError ? lit.html`<div class="cpk-td__status cpk-td__status--error" role="status">${this._messageRefreshError}</div>` : lit.nothing}${this._showEventTimeline ? lit.html`<div class="cpk-td__timeline-toolbar">${this.renderTimelineBulkButtons()}</div>${this.renderTimeline()}` : this._conversation.length || this._loadingMessages || this._messagesError ? this.renderConversation() : this.renderTimeline()}`;
 			if (id === "state") return this.renderState();
 			return this.renderEvents();
 		}
@@ -4382,7 +4377,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 		scrollToFocusedMessage() {
 			var _this$shadowRoot$quer, _this$shadowRoot3, _message$scrollIntoVi;
 			if (!this.focusMessageId) return;
-			const message = Array.from((_this$shadowRoot$quer = (_this$shadowRoot3 = this.shadowRoot) === null || _this$shadowRoot3 === void 0 ? void 0 : _this$shadowRoot3.querySelectorAll("[data-message-id]")) !== null && _this$shadowRoot$quer !== void 0 ? _this$shadowRoot$quer : []).find((candidate) => candidate.dataset.messageId === this.focusMessageId);
+			const message = Array.from((_this$shadowRoot$quer = (_this$shadowRoot3 = this.shadowRoot) === null || _this$shadowRoot3 === void 0 ? void 0 : _this$shadowRoot3.querySelectorAll(`#${this.panelDomId(this._tab)}:not([hidden]) [data-message-id]`)) !== null && _this$shadowRoot$quer !== void 0 ? _this$shadowRoot$quer : []).find((candidate) => candidate.dataset.messageId === this.focusMessageId);
 			if (!message) return;
 			(_message$scrollIntoVi = message.scrollIntoView) === null || _message$scrollIntoVi === void 0 || _message$scrollIntoVi.call(message, { block: "center" });
 			this._scrolledFocusRequestId = this.focusRequestId;
@@ -4455,6 +4450,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			this._loadingEvents = false;
 			this._loadingState = false;
 			this._messagesError = null;
+			this._messageRefreshError = null;
 			this._eventsError = null;
 			this._stateError = null;
 			this._fetchedMetadata = null;
@@ -4474,7 +4470,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 				this._fetchedMetadata = metadata;
 			} catch (err) {
 				if (err instanceof Error && err.name === "AbortError") return;
-				if (this.threadId !== threadId) return;
+				if (controller.signal.aborted || this.threadId !== threadId) return;
 				this._fetchedMetadata = null;
 			}
 		}
@@ -4500,20 +4496,24 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			if (!silent) {
 				this._loadingMessages = true;
 				this._messagesError = null;
+				this._messageRefreshError = null;
 			}
 			try {
 				var _this$provider5;
 				const messages = ((_this$provider5 = this.provider) === null || _this$provider5 === void 0 ? void 0 : _this$provider5.getMessages) ? await this.provider.getMessages(threadId, { signal: controller.signal }) : await this.fetchRuntimeMessages(threadId, controller.signal);
 				if (controller.signal.aborted || this.threadId !== threadId) return;
 				this._conversation = this.mapMessages(messages);
+				this._messagesError = null;
+				this._messageRefreshError = null;
 			} catch (err) {
+				if (controller.signal.aborted || this.threadId !== threadId) return;
 				if (err instanceof Error && err.name === "AbortError") return;
-				if (!silent) {
+				if (!silent || this._conversation.length === 0) {
 					this._messagesError = err instanceof Error ? err.message : "Failed to load messages";
 					this._conversation = [];
-				}
+				} else this._messageRefreshError = "Could not refresh messages. Showing the last loaded conversation.";
 			} finally {
-				if (!silent && !controller.signal.aborted) this._loadingMessages = false;
+				if (!controller.signal.aborted && this.threadId === threadId) this._loadingMessages = false;
 			}
 		}
 		async fetchEvents(threadId) {
@@ -4542,7 +4542,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 				this._fetchedEvents = this.mapApiEvents(result.events);
 			} catch (err) {
 				if (err instanceof Error && err.name === "AbortError") return;
-				if (this.threadId !== threadId) return;
+				if (controller.signal.aborted || this.threadId !== threadId) return;
 				this._eventsError = err instanceof Error ? err.message : "Failed to load events";
 				this._fetchedEvents = [];
 			} finally {
@@ -4575,7 +4575,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 				this._fetchedState = (_result$state = result.state) !== null && _result$state !== void 0 ? _result$state : null;
 			} catch (err) {
 				if (err instanceof Error && err.name === "AbortError") return;
-				if (this.threadId !== threadId) return;
+				if (controller.signal.aborted || this.threadId !== threadId) return;
 				this._stateError = err instanceof Error ? err.message : "Failed to load state";
 				this._fetchedState = null;
 			} finally {
@@ -4654,6 +4654,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 						toolCallId: tc.id,
 						arguments: args,
 						result: null,
+						hasResult: false,
 						createdAt: ""
 					};
 					toolCallMap.set(tc.id, item);
@@ -4676,19 +4677,24 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 				});
 			} else if (msg.role === "tool" && msg.toolCallId) {
 				const tc = toolCallMap.get(msg.toolCallId);
-				if (tc) try {
-					tc.result = this.parseToolCallContent(msg.content);
-				} catch (err) {
-					var _msg$content;
-					console.error("[CopilotKit Inspector] Failed to parse tool-call result content", {
-						toolCallId: msg.toolCallId,
-						raw: msg.content,
-						error: err
-					});
-					tc.result = {
-						__parseError: true,
-						__raw: (_msg$content = msg.content) !== null && _msg$content !== void 0 ? _msg$content : null
-					};
+				if (tc) {
+					tc.hasResult = true;
+					tc.resultUnreadable = false;
+					try {
+						tc.result = this.parseToolCallContent(msg.content);
+					} catch (err) {
+						var _msg$content;
+						console.error("[CopilotKit Inspector] Failed to parse tool-call result content", {
+							toolCallId: msg.toolCallId,
+							raw: msg.content,
+							error: err
+						});
+						tc.resultUnreadable = true;
+						tc.result = {
+							__parseError: true,
+							__raw: (_msg$content = msg.content) !== null && _msg$content !== void 0 ? _msg$content : null
+						};
+					}
 				}
 			}
 			return items;
@@ -5468,14 +5474,65 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
           <span>No messages yet</span>
         </div>
       `;
+			const items = this.renderItems;
+			const errors = this.conversationRunErrors(items);
 			return this.cachedPanelTpl("timeline-fallback", [
 				this._conversation,
 				this._expandedTools,
-				this._expandedMessages
+				this._expandedMessages,
+				JSON.stringify(errors),
+				this._expandedTimelineDetails
 			], () => {
-				return lit.html`${this.renderItems.map((item) => this.renderRenderItem(item))}`;
+				const errorsAfter = /* @__PURE__ */ new Map();
+				for (const { after, item } of errors) {
+					var _errorsAfter$get;
+					const group = (_errorsAfter$get = errorsAfter.get(after)) !== null && _errorsAfter$get !== void 0 ? _errorsAfter$get : [];
+					group.push(item);
+					errorsAfter.set(after, group);
+				}
+				const renderErrors = (after) => {
+					var _errorsAfter$get2;
+					return (_errorsAfter$get2 = errorsAfter.get(after)) === null || _errorsAfter$get2 === void 0 ? void 0 : _errorsAfter$get2.map((item) => this.renderTimelineItem(item));
+				};
+				return lit.html`
+          ${renderErrors(-1)}
+          ${items.map((item, index) => lit.html`${this.renderRenderItem(item)}${renderErrors(index)}`)}
+        `;
 			});
 		}
+		conversationRunErrors(items) {
+			const positions = /* @__PURE__ */ new Map();
+			items.forEach((item, index) => {
+				positions.set(item.id, index);
+				if (item.type === "tool_call_group") for (const tool of item.items) positions.set(tool.id, index);
+			});
+			const errors = [];
+			let after = -1;
+			let hasAnchor = false;
+			for (const event of this.activeEvents) {
+				const id = (event.type.startsWith("TOOL_CALL") ? [
+					"toolCallId",
+					"tool_call_id",
+					"callId",
+					"id"
+				] : event.type.startsWith("TEXT_MESSAGE") || event.type.startsWith("ACTIVITY") ? [
+					"messageId",
+					"message_id",
+					"id"
+				] : []).map((key) => event.payload[key]).find((value) => typeof value === "string");
+				const position = id == null ? void 0 : positions.get(id);
+				if (position !== void 0) {
+					after = Math.max(after, position);
+					hasAnchor = true;
+				}
+				if (event.type === "RUN_ERROR" || event.type === "ERROR") for (const item of this.timelineItemsFromEvents([event])) errors.push({
+					after,
+					item
+				});
+			}
+			if (!hasAnchor) for (const error of errors) error.after = items.length - 1;
+			return errors;
+		}
 		/**
 		* Memoize the rendered TemplateResult for `slot` keyed by tuple
 		* element-wise reference equality. The hot path for tab switches: when
@@ -5548,32 +5605,40 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			const expanded = this._expandedTools.has(item.id);
 			return lit.html`
       <div class="cpk-td__tool-block">
-        <div
+        <button
+          type="button"
           class="cpk-td__tool-header"
+          aria-expanded=${expanded}
           @click=${() => this.toggleToolExpand(item.id)}
         >
-          <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
             <path
-              d="M1 9C1 9 2 7 5 7C8 7 9 9 9 9M5 1C5 1 7 2.5 7 4.5C7 6.5 5 7 5 7C5 7 3 6.5 3 4.5C3 2.5 5 1 5 1Z"
+              d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94z"
               stroke="currentColor"
-              stroke-width="1.2"
+              stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round"
             />
           </svg>
           <span class="cpk-td__tool-name">${item.toolName}</span>
-          ${item.result || Object.keys(item.arguments).length > 0 ? lit.html`
-                  <span class="cpk-td__tool-status">Complete</span>
-                ` : lit.html`
-                  <span class="cpk-td__tool-status cpk-td__tool-status--pending">Pending</span>
-                `}
+          ${item.resultUnreadable ? lit.html`
+                  <span class="cpk-td__tool-status cpk-td__tool-status--pending"
+                    >Result unreadable</span
+                  >
+                ` : item.hasResult ? lit.html`
+                    <span class="cpk-td__tool-status">Result received</span>
+                  ` : lit.html`
+                    <span class="cpk-td__tool-status cpk-td__tool-status--pending"
+                      >No result recorded</span
+                    >
+                  `}
           <span class="cpk-td__tool-chevron">${expanded ? "▾" : "▸"}</span>
-        </div>
+        </button>
         ${expanded ? lit.html`
               <div class="cpk-td__tool-body">
                 <div class="cpk-td__tool-section-label">Arguments</div>
                 ${renderHighlightedJsonBlock(item.arguments)}
-                ${item.result ? lit.html`
+                ${item.hasResult ? lit.html`
                       <div
                         class="cpk-td__tool-section-label"
                         style="margin-top:8px"
@@ -5884,6 +5949,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 		_loadingEvents: { state: true },
 		_loadingState: { state: true },
 		_messagesError: { state: true },
+		_messageRefreshError: { state: true },
 		_eventsError: { state: true },
 		_stateError: { state: true },
 		_expandedTools: { state: true },
@@ -6413,10 +6479,19 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
       background: #ffffff;
       color: #71717a;
       cursor: pointer;
+      width: 100%;
+      border: 0;
+      font-family: inherit;
+      text-align: left;
       font-size: 11px;
       user-select: none;
     }
 
+    .cpk-td__tool-header:focus-visible {
+      outline: 2px solid var(--cpk-primary-color, #7076b3);
+      outline-offset: -2px;
+    }
+
     .cpk-td__tool-header:hover {
       background: #fafafa;
     }
@@ -11201,19 +11276,16 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
 			});
 		}
 		renderHomeView() {
-			var _model$project$projec, _model$project3;
 			const model = this.getHomeModel();
-			const connected = model.hero.connection === "connected";
 			return lit.html`
       <div
         class="inspector-home"
         data-inspector-home
-        data-inspector-home-state=${connected ? "connected" : "disconnected"}
+        data-inspector-home-state=${model.hero.connection === "connected" ? "connected" : "disconnected"}
       >
         ${this.renderHomeWhatsNewPreview(model.news)}
-        <header class="inspector-home-heading"><div><h1>${connected ? (_model$project$projec = (_model$project3 = model.project) === null || _model$project3 === void 0 ? void 0 : _model$project3.projectName) !== null && _model$project$projec !== void 0 ? _model$project$projec : "Your agent workspace" : "Welcome to Intelligence"}</h1><p>${connected ? "Inspect conversations and see what your agent is learning." : "Connect your agent. Intelligence learns from experience."}</p></div></header>
-        ${connected ? this.renderHomeSystemHealth(model) : this.renderHomeIntelligenceHud(model)}
-        ${connected ? this.renderHomeIntelligenceHud(model) : this.renderHomeSystemHealth(model)}
+        ${this.renderHomeSystemHealth(model)}
+        ${this.renderHomeIntelligenceHud(model)}
         ${this.renderHomeFeatures(model)}
       </div>
     `;