@copilotkit/web-inspector 1.62.1 → 1.62.2

package/dist/index.cjs

@@ -428,6 +428,8 @@ var CpkThreadInspector = class CpkThreadInspector extends lit.LitElement {
 		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;
@@ -493,6 +495,8 @@ var CpkThreadInspector = class CpkThreadInspector extends lit.LitElement {
 			_stateError: { state: true },
 			_expandedTools: { state: true },
 			_expandedMessages: { state: true },
+			_expandedTimelineDetails: { state: true },
+			_expandedRawEvents: { state: true },
 			_showDetailPanel: { state: true },
 			_detailPanelWidth: { state: true },
 			_eventsNotAvailable: { state: true },
@@ -707,6 +711,7 @@ var CpkThreadInspector = class CpkThreadInspector extends lit.LitElement {
 
     .cpk-td__metadata-strip {
       display: flex;
+      align-items: center;
       gap: 6px;
       flex-wrap: wrap;
       padding: 10px 16px;
@@ -715,6 +720,14 @@ var CpkThreadInspector = class CpkThreadInspector extends lit.LitElement {
       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;
@@ -1009,13 +1022,44 @@ var CpkThreadInspector = class CpkThreadInspector extends lit.LitElement {
     }
 
     .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 {
@@ -1036,6 +1080,34 @@ var CpkThreadInspector = class CpkThreadInspector extends lit.LitElement {
       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 {
@@ -1293,6 +1365,8 @@ var CpkThreadInspector = class CpkThreadInspector extends lit.LitElement {
 		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?.abort();
 		this._metadataAbort = null;
 		this._messagesAbort?.abort();
@@ -1821,6 +1895,37 @@ var CpkThreadInspector = class CpkThreadInspector extends lit.LitElement {
 		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) {
+		return `raw-event-${event.sourceIndex ?? event.timestamp ?? event.type}`;
+	}
 	get activeEvents() {
 		if (this._eventsNotAvailable) return [];
 		const events = this._fetchedEvents ?? this.agentEventsInput ?? [];
@@ -1944,19 +2049,70 @@ var CpkThreadInspector = class CpkThreadInspector extends lit.LitElement {
 				value: 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) => lit.html`
-            <span class="cpk-td__metadata-pill" title=${pill.value ?? ""}>
-              <span class="cpk-td__metadata-label">${pill.label}</span>
-              <span class="cpk-td__metadata-value"
-                >${this.shortId(pill.value)}</span
-              >
-            </span>
-          `)}
+        <div class="cpk-td__metadata-pills">
+          ${pills.map((pill) => lit.html`
+              <span class="cpk-td__metadata-pill" title=${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"]);
@@ -1987,7 +2143,7 @@ var CpkThreadInspector = class CpkThreadInspector extends lit.LitElement {
       `;
 		}
 		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) {
@@ -2003,14 +2159,14 @@ var CpkThreadInspector = class CpkThreadInspector extends lit.LitElement {
         </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"
@@ -2028,9 +2184,39 @@ var CpkThreadInspector = class CpkThreadInspector extends lit.LitElement {
             >${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>
     `;
 	}
@@ -2287,9 +2473,11 @@ ${(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) => {
 				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}">
@@ -2300,9 +2488,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))}</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))}</pre>` : lit.nothing}
           </div>
         `;
 			})}`;