@copilotkit/web-inspector 1.62.1 → 1.62.2

package/dist/index.umd.js

@@ -191,7 +191,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 //#endregion
 //#region package.json
-	var version = "1.62.1";
+	var version = "1.62.2";
 
 //#endregion
 //#region src/lib/telemetry.ts
@@ -772,6 +772,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			this._stateError = null;
 			this._expandedTools = /* @__PURE__ */ new Set();
 			this._expandedMessages = /* @__PURE__ */ new Set();
+			this._expandedTimelineDetails = /* @__PURE__ */ new Set();
+			this._expandedRawEvents = /* @__PURE__ */ new Set();
 			this._showDetailPanel = false;
 			this._detailPanelWidth = 250;
 			this._eventsNotAvailable = false;
@@ -920,6 +922,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			this._liveEventsWithSourceIndexCache = null;
 			this._expandedTools = /* @__PURE__ */ new Set();
 			this._expandedMessages = /* @__PURE__ */ new Set();
+			this._expandedTimelineDetails = /* @__PURE__ */ new Set();
+			this._expandedRawEvents = /* @__PURE__ */ new Set();
 			(_this$_metadataAbort = this._metadataAbort) === null || _this$_metadataAbort === void 0 || _this$_metadataAbort.abort();
 			this._metadataAbort = null;
 			(_this$_messagesAbort2 = this._messagesAbort) === null || _this$_messagesAbort2 === void 0 || _this$_messagesAbort2.abort();
@@ -1474,10 +1478,42 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			else next.add(id);
 			this._expandedMessages = next;
 		}
+		toggleTimelineDetails(id) {
+			const next = new Set(this._expandedTimelineDetails);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			this._expandedTimelineDetails = next;
+		}
+		expandTimelineDetails(ids) {
+			this._expandedTimelineDetails = new Set([...this._expandedTimelineDetails, ...ids]);
+		}
+		collapseTimelineDetails(ids) {
+			const next = new Set(this._expandedTimelineDetails);
+			for (const id of ids) next.delete(id);
+			this._expandedTimelineDetails = next;
+		}
+		toggleRawEventDetails(id) {
+			const next = new Set(this._expandedRawEvents);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			this._expandedRawEvents = next;
+		}
+		expandRawEventDetails(ids) {
+			this._expandedRawEvents = new Set([...this._expandedRawEvents, ...ids]);
+		}
+		collapseRawEventDetails(ids) {
+			const next = new Set(this._expandedRawEvents);
+			for (const id of ids) next.delete(id);
+			this._expandedRawEvents = next;
+		}
+		rawEventId(event) {
+			var _ref, _event$sourceIndex2;
+			return `raw-event-${(_ref = (_event$sourceIndex2 = event.sourceIndex) !== null && _event$sourceIndex2 !== void 0 ? _event$sourceIndex2 : event.timestamp) !== null && _ref !== void 0 ? _ref : event.type}`;
+		}
 		get activeEvents() {
-			var _ref, _this$_fetchedEvents, _this$_liveEventsWith;
+			var _ref2, _this$_fetchedEvents, _this$_liveEventsWith;
 			if (this._eventsNotAvailable) return [];
-			const events = (_ref = (_this$_fetchedEvents = this._fetchedEvents) !== null && _this$_fetchedEvents !== void 0 ? _this$_fetchedEvents : this.agentEventsInput) !== null && _ref !== void 0 ? _ref : [];
+			const events = (_ref2 = (_this$_fetchedEvents = this._fetchedEvents) !== null && _this$_fetchedEvents !== void 0 ? _this$_fetchedEvents : this.agentEventsInput) !== null && _ref2 !== void 0 ? _ref2 : [];
 			if (events.every((event) => event.sourceIndex != null)) return events;
 			if (((_this$_liveEventsWith = this._liveEventsWithSourceIndexCache) === null || _this$_liveEventsWith === void 0 ? void 0 : _this$_liveEventsWith.events) === events) return this._liveEventsWithSourceIndexCache.indexedEvents;
 			const indexedEvents = events.map((event, index) => event.sourceIndex == null ? {
@@ -1491,9 +1527,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			return indexedEvents;
 		}
 		get activeState() {
-			var _ref2, _this$_fetchedState;
+			var _ref3, _this$_fetchedState;
 			if (this._stateNotAvailable) return null;
-			return (_ref2 = (_this$_fetchedState = this._fetchedState) !== null && _this$_fetchedState !== void 0 ? _this$_fetchedState : this.agentStateInput) !== null && _ref2 !== void 0 ? _ref2 : null;
+			return (_ref3 = (_this$_fetchedState = this._fetchedState) !== null && _this$_fetchedState !== void 0 ? _this$_fetchedState : this.agentStateInput) !== null && _ref3 !== void 0 ? _ref3 : null;
 		}
 		hasRenderableState() {
 			const s = this.activeState;
@@ -1504,8 +1540,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			return id.length > 20 ? id.slice(0, 8) + "…" : id;
 		}
 		get metadata() {
-			var _ref3, _this$_fetchedMetadat;
-			return (_ref3 = (_this$_fetchedMetadat = this._fetchedMetadata) !== null && _this$_fetchedMetadat !== void 0 ? _this$_fetchedMetadat : this.thread) !== null && _ref3 !== void 0 ? _ref3 : null;
+			var _ref4, _this$_fetchedMetadat;
+			return (_ref4 = (_this$_fetchedMetadat = this._fetchedMetadata) !== null && _this$_fetchedMetadat !== void 0 ? _this$_fetchedMetadat : this.thread) !== null && _ref4 !== void 0 ? _ref4 : null;
 		}
 		fmtTime(dateStr) {
 			if (!dateStr) return "—";
@@ -1601,22 +1637,73 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 					value: metadata === null || metadata === void 0 ? void 0 : metadata.status
 				}
 			].filter((pill) => pill.value != null && pill.value !== "");
-			if (pills.length === 0) return lit.nothing;
+			const bulkControls = this.renderActiveBulkControls();
+			if (pills.length === 0 && bulkControls === lit.nothing) return lit.nothing;
 			return lit.html`
       <div class="cpk-td__metadata-strip" aria-label="Thread metadata">
-        ${pills.map((pill) => {
+        <div class="cpk-td__metadata-pills">
+          ${pills.map((pill) => {
 				var _pill$value;
 				return lit.html`
-            <span class="cpk-td__metadata-pill" title=${(_pill$value = pill.value) !== null && _pill$value !== void 0 ? _pill$value : ""}>
-              <span class="cpk-td__metadata-label">${pill.label}</span>
-              <span class="cpk-td__metadata-value"
-                >${this.shortId(pill.value)}</span
-              >
-            </span>
-          `;
+              <span class="cpk-td__metadata-pill" title=${(_pill$value = pill.value) !== null && _pill$value !== void 0 ? _pill$value : ""}>
+                <span class="cpk-td__metadata-label">${pill.label}</span>
+                <span class="cpk-td__metadata-value"
+                  >${this.shortId(pill.value)}</span
+                >
+              </span>
+            `;
 			})}
+        </div>
+        ${bulkControls}
       </div>
     `;
+		}
+		renderActiveBulkControls() {
+			if (this._eventsNotAvailable) return lit.nothing;
+			if (this._tab === "raw-events") return this.renderRawEventBulkControls();
+			if (this._tab !== "timeline") return lit.nothing;
+			const detailIds = this.timelineItemsForEvents(this.activeEvents).filter((item) => item.details).map((item) => item.id);
+			if (detailIds.length <= 1) return lit.nothing;
+			return lit.html`<div class="cpk-td__timeline-toolbar">
+      <button
+        type="button"
+        class="cpk-td__timeline-bulk-toggle"
+        ?disabled=${detailIds.every((id) => this._expandedTimelineDetails.has(id))}
+        @click=${() => this.expandTimelineDetails(detailIds)}
+      >
+        Expand all
+      </button>
+      <button
+        type="button"
+        class="cpk-td__timeline-bulk-toggle"
+        ?disabled=${detailIds.every((id) => !this._expandedTimelineDetails.has(id))}
+        @click=${() => this.collapseTimelineDetails(detailIds)}
+      >
+        Collapse all
+      </button>
+    </div>`;
+		}
+		renderRawEventBulkControls() {
+			const eventIds = this.activeEvents.map((event) => this.rawEventId(event));
+			if (eventIds.length <= 1) return lit.nothing;
+			return lit.html`<div class="cpk-td__timeline-toolbar">
+      <button
+        type="button"
+        class="cpk-td__timeline-bulk-toggle"
+        ?disabled=${eventIds.every((id) => this._expandedRawEvents.has(id))}
+        @click=${() => this.expandRawEventDetails(eventIds)}
+      >
+        Expand all
+      </button>
+      <button
+        type="button"
+        class="cpk-td__timeline-bulk-toggle"
+        ?disabled=${eventIds.every((id) => !this._expandedRawEvents.has(id))}
+        @click=${() => this.collapseRawEventDetails(eventIds)}
+      >
+        Collapse all
+      </button>
+    </div>`;
 		}
 		revealSourceEvent(sourceIndex) {
 			this._activatedTabs = new Set([...this._activatedTabs, "raw-events"]);
@@ -1649,7 +1736,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
       `;
 			}
 			const events = this.activeEvents;
-			const cachedTimeline = this.getCachedPanelTpl("timeline", [events]);
+			const cachedTimeline = this.getCachedPanelTpl("timeline", [events, this._expandedTimelineDetails]);
 			if (cachedTimeline) return cachedTimeline;
 			const timelineItems = this.timelineItemsForEvents(events);
 			if (timelineItems.length === 0) {
@@ -1665,14 +1752,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
         </div>
       `;
 			}
-			return this.cachedPanelTpl("timeline", [events], () => {
-				return lit.html`${timelineItems.map((item) => this.renderTimelineItem(item))}`;
-			});
+			return this.cachedPanelTpl("timeline", [events, this._expandedTimelineDetails], () => lit.html`${timelineItems.map((item) => this.renderTimelineItem(item))}`);
 		}
 		renderTimelineItem(item) {
+			const isWarning = item.kind === "warning";
+			const detailsExpanded = this._expandedTimelineDetails.has(item.id);
 			return lit.html`
       <div
-        class="cpk-td__timeline-item ${item.kind === "warning" ? "cpk-td__timeline-item--warning" : ""}"
+        class="cpk-td__timeline-item ${isWarning ? "cpk-td__timeline-item--warning" : ""}"
       >
         <div class="cpk-td__timeline-header">
           <span class="cpk-td__timeline-kind"
@@ -1690,9 +1777,39 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
             >${formatTimestamp(item.timestamp)}</span
           >
         </div>
-        ${item.body ? lit.html`<div class="cpk-td__timeline-body">${item.body}</div>` : item.details ? lit.html`<pre class="cpk-td__timeline-body">
-${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(item.details))}</pre
-              >` : lit.nothing}
+        ${item.details ? lit.html`<button
+                type="button"
+                class="cpk-td__timeline-details-toggle"
+                aria-expanded=${detailsExpanded ? "true" : "false"}
+                @click=${() => this.toggleTimelineDetails(item.id)}
+              >
+                ${detailsExpanded ? lit.html`
+                        <svg
+                          aria-hidden="true"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        >
+                          <path d="m6 9 6 6 6-6" />
+                        </svg>
+                      ` : lit.html`
+                        <svg
+                          aria-hidden="true"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        >
+                          <path d="m9 18 6-6-6-6" />
+                        </svg>
+                      `}
+                <span>${detailsExpanded ? "Hide details" : "Show details"}</span>
+              </button>` : lit.nothing}
+        ${item.body ? lit.html`<div class="cpk-td__timeline-body">${item.body}</div>` : lit.nothing}
+        ${item.details && detailsExpanded ? lit.html`<pre class="cpk-td__timeline-body">${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(item.details))}</pre>` : lit.nothing}
       </div>
     `;
 		}
@@ -1949,10 +2066,12 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
           >
         </div>
       `;
-			return this.cachedPanelTpl("raw-events", [events], () => {
+			return this.cachedPanelTpl("raw-events", [events, this._expandedRawEvents], () => {
 				return lit.html`${events.map((event) => {
 					var _event$rawEvent;
 					const { bg, fg } = eventColors(event.type);
+					const eventId = this.rawEventId(event);
+					const detailsExpanded = this._expandedRawEvents.has(eventId);
 					return lit.html`
           <div class="cpk-td__event" data-source-index=${event.sourceIndex}>
             <div class="cpk-td__event-header" style="background:${bg}">
@@ -1963,9 +2082,38 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
                 >${formatTimestamp(event.timestamp)}</span
               >
             </div>
-            <pre class="cpk-td__event-payload">
-${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent = event.rawEvent) !== null && _event$rawEvent !== void 0 ? _event$rawEvent : event))}</pre
+            <button
+              type="button"
+              class="cpk-td__timeline-details-toggle"
+              aria-expanded=${detailsExpanded ? "true" : "false"}
+              @click=${() => this.toggleRawEventDetails(eventId)}
             >
+              ${detailsExpanded ? lit.html`
+                      <svg
+                        aria-hidden="true"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <path d="m6 9 6 6 6-6" />
+                      </svg>
+                    ` : lit.html`
+                      <svg
+                        aria-hidden="true"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <path d="m9 18 6-6-6-6" />
+                      </svg>
+                    `}
+              <span>${detailsExpanded ? "Hide details" : "Show details"}</span>
+            </button>
+            ${detailsExpanded ? lit.html`<pre class="cpk-td__event-payload">${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent = event.rawEvent) !== null && _event$rawEvent !== void 0 ? _event$rawEvent : event))}</pre>` : lit.nothing}
           </div>
         `;
 				})}`;
@@ -2098,6 +2246,8 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent
 		_stateError: { state: true },
 		_expandedTools: { state: true },
 		_expandedMessages: { state: true },
+		_expandedTimelineDetails: { state: true },
+		_expandedRawEvents: { state: true },
 		_showDetailPanel: { state: true },
 		_detailPanelWidth: { state: true },
 		_eventsNotAvailable: { state: true },
@@ -2250,6 +2400,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent
 
     .cpk-td__metadata-strip {
       display: flex;
+      align-items: center;
       gap: 6px;
       flex-wrap: wrap;
       padding: 10px 16px;
@@ -2258,6 +2409,14 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent
       flex-shrink: 0;
     }
 
+    .cpk-td__metadata-pills {
+      display: flex;
+      gap: 6px;
+      flex: 1;
+      flex-wrap: wrap;
+      min-width: 0;
+    }
+
     .cpk-td__metadata-pill {
       display: inline-flex;
       align-items: center;
@@ -2552,13 +2711,44 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent
     }
 
     .cpk-td__timeline-body {
-      padding: 9px 10px;
+      margin: 0;
+      padding: 0 10px 9px;
       font-size: 12px;
       line-height: 1.55;
       color: #57575b;
       white-space: pre-wrap;
       word-break: break-word;
-      border-top: 1px solid #e9e9ef;
+    }
+
+    .cpk-td__timeline-toolbar {
+      display: flex;
+      gap: 6px;
+      margin-left: auto;
+    }
+
+    .cpk-td__timeline-bulk-toggle {
+      margin: 0;
+      padding: 4px 8px;
+      border: 1px solid #dcdce8;
+      border-radius: 6px;
+      background: #ffffff;
+      color: #36363a;
+      cursor: pointer;
+      font-family: "Inter", sans-serif;
+      font-size: 11px;
+      font-weight: 600;
+      line-height: 1.2;
+    }
+
+    .cpk-td__timeline-bulk-toggle:hover {
+      border-color: rgba(85, 88, 178, 0.38);
+      background: #f7f7ff;
+      color: #010507;
+    }
+
+    .cpk-td__timeline-bulk-toggle:disabled {
+      cursor: not-allowed;
+      opacity: 0.45;
     }
 
     .cpk-td__source-link {
@@ -2579,6 +2769,34 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent
       color: #010507;
     }
 
+    .cpk-td__timeline-details-toggle {
+      margin: 0;
+      padding: 5px 10px;
+      border: none;
+      background: #ffffff;
+      color: #5558b2;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      font-family: "Inter", sans-serif;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 1.2;
+      width: 100%;
+    }
+
+    .cpk-td__timeline-details-toggle:hover {
+      background: #f7f7ff;
+      color: #010507;
+    }
+
+    .cpk-td__timeline-details-toggle svg {
+      width: 12px;
+      height: 12px;
+      stroke-width: 2;
+    }
+
     /* ── Generative UI ──────────────────────────────────────────────── */
     @keyframes cpk-genui-enter {
       from {
@@ -3765,8 +3983,8 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson((_event$rawEvent
 			return lit.html`
       <div class="mt-2 space-y-2">
         ${toolCalls.map((call, index) => {
-				var _ref4, _call$function$name, _call$function, _call$function2;
-				const functionName = (_ref4 = (_call$function$name = (_call$function = call.function) === null || _call$function === void 0 ? void 0 : _call$function.name) !== null && _call$function$name !== void 0 ? _call$function$name : call.toolName) !== null && _ref4 !== void 0 ? _ref4 : "Unknown function";
+				var _ref5, _call$function$name, _call$function, _call$function2;
+				const functionName = (_ref5 = (_call$function$name = (_call$function = call.function) === null || _call$function === void 0 ? void 0 : _call$function.name) !== null && _call$function$name !== void 0 ? _call$function$name : call.toolName) !== null && _ref5 !== void 0 ? _ref5 : "Unknown function";
 				const callId = typeof (call === null || call === void 0 ? void 0 : call.id) === "string" ? call.id : `tool-call-${index + 1}`;
 				const argsString = this.formatToolCallArguments((_call$function2 = call.function) === null || _call$function2 === void 0 ? void 0 : _call$function2.arguments);
 				return lit.html`
@@ -5918,9 +6136,9 @@ ${prettyEvent}</pre
 			let currentSchema = schema;
 			let def = currentSchema._def;
 			while (def.typeName === "ZodOptional" || def.typeName === "ZodNullable" || def.typeName === "ZodDefault") {
-				var _ref5;
+				var _ref6;
 				if (def.typeName === "ZodDefault" && def.defaultValue !== void 0) info.defaultValue = typeof def.defaultValue === "function" ? def.defaultValue() : def.defaultValue;
-				currentSchema = (_ref5 = def.innerType) !== null && _ref5 !== void 0 ? _ref5 : currentSchema;
+				currentSchema = (_ref6 = def.innerType) !== null && _ref6 !== void 0 ? _ref6 : currentSchema;
 				if (!(currentSchema === null || currentSchema === void 0 ? void 0 : currentSchema._def)) break;
 				def = currentSchema._def;
 			}