@copilotkit/web-inspector 1.73.2 → 1.73.3

package/dist/index.cjs

@@ -1264,6 +1264,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		this._loadingEvents = false;
 		this._loadingState = false;
 		this._messagesError = null;
+		this._messageRefreshError = null;
 		this._eventsError = null;
 		this._stateError = null;
 		this._expandedTools = /* @__PURE__ */ new Set();
@@ -1356,6 +1357,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			_loadingEvents: { state: true },
 			_loadingState: { state: true },
 			_messagesError: { state: true },
+			_messageRefreshError: { state: true },
 			_eventsError: { state: true },
 			_stateError: { state: true },
 			_expandedTools: { state: true },
@@ -1432,7 +1434,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       </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();
 	}
@@ -1985,10 +1987,19 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       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;
     }
@@ -2825,7 +2836,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 	}
 	scrollToFocusedMessage() {
 		if (!this.focusMessageId) return;
-		const message = Array.from(this.shadowRoot?.querySelectorAll("[data-message-id]") ?? []).find((candidate) => candidate.dataset.messageId === this.focusMessageId);
+		const message = Array.from(this.shadowRoot?.querySelectorAll(`#${this.panelDomId(this._tab)}:not([hidden]) [data-message-id]`) ?? []).find((candidate) => candidate.dataset.messageId === this.focusMessageId);
 		if (!message) return;
 		message.scrollIntoView?.({ block: "center" });
 		this._scrolledFocusRequestId = this.focusRequestId;
@@ -2893,6 +2904,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		this._loadingEvents = false;
 		this._loadingState = false;
 		this._messagesError = null;
+		this._messageRefreshError = null;
 		this._eventsError = null;
 		this._stateError = null;
 		this._fetchedMetadata = null;
@@ -2911,7 +2923,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			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;
 		}
 	}
@@ -2936,19 +2948,23 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		if (!silent) {
 			this._loadingMessages = true;
 			this._messagesError = null;
+			this._messageRefreshError = null;
 		}
 		try {
 			const messages = this.provider?.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) {
@@ -2975,7 +2991,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			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 {
@@ -3006,7 +3022,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			this._fetchedState = 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 {
@@ -3083,6 +3099,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 					toolCallId: tc.id,
 					arguments: args,
 					result: null,
+					hasResult: false,
 					createdAt: ""
 				};
 				toolCallMap.set(tc.id, item);
@@ -3103,18 +3120,23 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		});
 		else if (msg.role === "tool" && msg.toolCallId) {
 			const tc = toolCallMap.get(msg.toolCallId);
-			if (tc) try {
-				tc.result = this.parseToolCallContent(msg.content);
-			} catch (err) {
-				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 ?? null
-				};
+			if (tc) {
+				tc.hasResult = true;
+				tc.resultUnreadable = false;
+				try {
+					tc.result = this.parseToolCallContent(msg.content);
+				} catch (err) {
+					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 ?? null
+					};
+				}
 			}
 		}
 		return items;
@@ -3870,13 +3892,60 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
           <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) {
+				const group = errorsAfter.get(after) ?? [];
+				group.push(item);
+				errorsAfter.set(after, group);
+			}
+			const renderErrors = (after) => errorsAfter.get(after)?.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
@@ -3950,32 +4019,40 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		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"
@@ -10358,17 +10435,15 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 	}
 	renderHomeView() {
 		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?.projectName ?? "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>
     `;