@copilotkit/web-inspector 1.62.0 → 1.62.2

package/dist/package.cjs

@@ -1,6 +1,6 @@
 
 //#region package.json
-var version = "1.62.0";
+var version = "1.62.2";
 
 //#endregion
 Object.defineProperty(exports, 'version', {

package/dist/package.mjs

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "1.62.0";
+var version = "1.62.2";
 
 //#endregion
 export { version };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/web-inspector",
-  "version": "1.62.0",
+  "version": "1.62.2",
   "description": "Lit-based web component for the CopilotKit web inspector",
   "repository": {
     "type": "git",
@@ -27,7 +27,7 @@
     "lit": "^3.2.0",
     "lucide": "^0.525.0",
     "marked": "^12.0.2",
-    "@copilotkit/core": "1.62.0"
+    "@copilotkit/core": "1.62.2"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.11",

package/src/__tests__/web-inspector.spec.ts

@@ -339,6 +339,7 @@ type ThreadDetailsInternals = {
   } | null;
   _expandedTools: Set<string>;
   _expandedMessages: Set<string>;
+  _expandedTimelineDetails: Set<string>;
   _stateNotAvailable: boolean;
   _eventsNotAvailable: boolean;
   _loadingMessages: boolean;
@@ -934,7 +935,22 @@ describe("CpkThreadInspector provider contract", () => {
       ?.click();
     await flushProviderWork(el);
 
+    const rawEvent = el.shadowRoot?.querySelector<HTMLElement>(
+      '.cpk-td__event[data-source-index="1"]',
+    );
+    expect(rawEvent?.textContent ?? "").toContain("Show details");
+    expect(rawEvent?.textContent ?? "").not.toContain("top-level-run");
+    expect(rawEvent?.textContent ?? "").not.toContain("sequence");
+    expect(rawEvent?.textContent ?? "").not.toContain("messageId");
+    expect(rawEvent?.textContent ?? "").not.toContain("hello");
+
+    rawEvent
+      ?.querySelector<HTMLButtonElement>(".cpk-td__timeline-details-toggle")
+      ?.click();
+    await el.updateComplete;
+
     const text = el.shadowRoot?.textContent ?? "";
+    expect(text).toContain("Hide details");
     expect(text).toContain("top-level-run");
     expect(text).toContain("sequence");
     expect(text).toContain("messageId");
@@ -1118,11 +1134,90 @@ describe("CpkThreadInspector provider contract", () => {
 
     expect(internals.activeTimelineItems).toHaveLength(1);
     expect(el.shadowRoot?.textContent ?? "").toContain("THREAD_STATE_WRITTEN");
-    expect(el.shadowRoot?.textContent ?? "").toContain("checkpointId");
+    expect(el.shadowRoot?.textContent ?? "").toContain("Show details");
+    expect(el.shadowRoot?.textContent ?? "").not.toContain("checkpointId");
     expect(el.shadowRoot?.textContent ?? "").toContain("Source event #1");
     expect(el.shadowRoot?.textContent ?? "").not.toContain(
       "No timeline events captured",
     );
+    el.shadowRoot
+      ?.querySelector<HTMLButtonElement>(".cpk-td__timeline-details-toggle")
+      ?.click();
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.textContent ?? "").toContain("checkpointId");
+  });
+
+  it("collapses structured timeline event details by default", async () => {
+    const provider: ThreadDebuggerProvider = {
+      getEvents: vi.fn().mockResolvedValue([
+        {
+          type: "RUN_STARTED",
+          timestamp: "2026-06-25T10:00:00.000Z",
+          payload: {
+            input: {
+              tools: [
+                {
+                  name: "generateSandboxedUi",
+                  description: "very chonky run-started payload",
+                },
+              ],
+            },
+          },
+        },
+      ]),
+    };
+    const { el, internals } = createThreadInspector();
+
+    internals.provider = provider;
+    internals.threadId = "thread-chonky-run-started";
+    await flushProviderWork(el);
+
+    expect(el.shadowRoot?.textContent ?? "").toContain("Run started");
+    expect(el.shadowRoot?.textContent ?? "").toContain("Show details");
+    expect(el.shadowRoot?.textContent ?? "").not.toContain(
+      "very chonky run-started payload",
+    );
+    el.shadowRoot
+      ?.querySelector<HTMLButtonElement>(".cpk-td__timeline-details-toggle")
+      ?.click();
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.textContent ?? "").toContain("Hide details");
+    expect(el.shadowRoot?.textContent ?? "").toContain(
+      "very chonky run-started payload",
+    );
+  });
+
+  it("shows expanded timeline details when an event also has a summary body", async () => {
+    const provider: ThreadDebuggerProvider = {
+      getEvents: vi.fn().mockResolvedValue([
+        {
+          type: "RUN_ERROR",
+          timestamp: "2026-06-25T10:00:00.000Z",
+          payload: {
+            message: "Tool failed",
+            errorCode: "ERR_TOOL_TIMEOUT",
+          },
+        },
+      ]),
+    };
+    const { el, internals } = createThreadInspector();
+
+    internals.provider = provider;
+    internals.threadId = "thread-error-details";
+    await flushProviderWork(el);
+
+    expect(el.shadowRoot?.textContent ?? "").toContain("Tool failed");
+    expect(el.shadowRoot?.textContent ?? "").toContain("Show details");
+    expect(el.shadowRoot?.textContent ?? "").not.toContain("ERR_TOOL_TIMEOUT");
+    el.shadowRoot
+      ?.querySelector<HTMLButtonElement>(".cpk-td__timeline-details-toggle")
+      ?.click();
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.textContent ?? "").toContain("Hide details");
+    expect(el.shadowRoot?.textContent ?? "").toContain("ERR_TOOL_TIMEOUT");
   });
 
   it("keeps the first-visible timeline intentional while provider message fallback is loading", async () => {

package/src/index.ts

@@ -779,6 +779,8 @@ export class CpkThreadInspector extends 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 },
@@ -816,6 +818,8 @@ export class CpkThreadInspector extends LitElement {
   private _stateError: string | null = null;
   private _expandedTools = new Set<string>();
   private _expandedMessages = new Set<string>();
+  private _expandedTimelineDetails = new Set<string>();
+  private _expandedRawEvents = new Set<string>();
   private _showDetailPanel = false;
   private _detailPanelWidth = 250;
   /** True when the /events endpoint returned 501 — don't fall back to live data. */
@@ -1102,6 +1106,7 @@ export class CpkThreadInspector extends LitElement {
 
     .cpk-td__metadata-strip {
       display: flex;
+      align-items: center;
       gap: 6px;
       flex-wrap: wrap;
       padding: 10px 16px;
@@ -1110,6 +1115,14 @@ export class CpkThreadInspector extends 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;
@@ -1404,13 +1417,44 @@ export class CpkThreadInspector extends 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 {
@@ -1431,6 +1475,34 @@ export class CpkThreadInspector extends 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 {
@@ -1720,6 +1792,8 @@ export class CpkThreadInspector extends LitElement {
     this._liveEventsWithSourceIndexCache = null;
     this._expandedTools = new Set();
     this._expandedMessages = new Set();
+    this._expandedTimelineDetails = new Set();
+    this._expandedRawEvents = new Set();
     this._metadataAbort?.abort();
     this._metadataAbort = null;
     this._messagesAbort?.abort();
@@ -2391,6 +2465,47 @@ export class CpkThreadInspector extends LitElement {
     this._expandedMessages = next;
   }
 
+  private toggleTimelineDetails(id: string): void {
+    const next = new Set(this._expandedTimelineDetails);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    this._expandedTimelineDetails = next;
+  }
+
+  private expandTimelineDetails(ids: string[]): void {
+    this._expandedTimelineDetails = new Set([
+      ...this._expandedTimelineDetails,
+      ...ids,
+    ]);
+  }
+
+  private collapseTimelineDetails(ids: string[]): void {
+    const next = new Set(this._expandedTimelineDetails);
+    for (const id of ids) next.delete(id);
+    this._expandedTimelineDetails = next;
+  }
+
+  private toggleRawEventDetails(id: string): void {
+    const next = new Set(this._expandedRawEvents);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    this._expandedRawEvents = next;
+  }
+
+  private expandRawEventDetails(ids: string[]): void {
+    this._expandedRawEvents = new Set([...this._expandedRawEvents, ...ids]);
+  }
+
+  private collapseRawEventDetails(ids: string[]): void {
+    const next = new Set(this._expandedRawEvents);
+    for (const id of ids) next.delete(id);
+    this._expandedRawEvents = next;
+  }
+
+  private rawEventId(event: ApiAgentEvent): string {
+    return `raw-event-${event.sourceIndex ?? event.timestamp ?? event.type}`;
+  }
+
   private get activeEvents(): ApiAgentEvent[] {
     // When the endpoint explicitly returned 501 we report no events rather
     // than leaking the parent's agent-keyed live events across historical
@@ -2562,25 +2677,95 @@ export class CpkThreadInspector extends LitElement {
       },
       { label: "Status", value: metadata?.status },
     ].filter((pill) => pill.value != null && pill.value !== "");
+    const bulkControls = this.renderActiveBulkControls();
 
-    if (pills.length === 0) return nothing;
+    if (pills.length === 0 && bulkControls === nothing) return nothing;
 
     return html`
       <div class="cpk-td__metadata-strip" aria-label="Thread metadata">
-        ${pills.map(
-          (pill) => 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) => 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>
     `;
   }
 
+  private renderActiveBulkControls() {
+    if (this._eventsNotAvailable) return nothing;
+    if (this._tab === "raw-events") return this.renderRawEventBulkControls();
+    if (this._tab !== "timeline") return nothing;
+
+    const detailIds = this.timelineItemsForEvents(this.activeEvents)
+      .filter((item) => item.details)
+      .map((item) => item.id);
+    if (detailIds.length <= 1) return nothing;
+
+    const allExpanded = detailIds.every((id) =>
+      this._expandedTimelineDetails.has(id),
+    );
+    const allCollapsed = detailIds.every(
+      (id) => !this._expandedTimelineDetails.has(id),
+    );
+
+    return html`<div class="cpk-td__timeline-toolbar">
+      <button
+        type="button"
+        class="cpk-td__timeline-bulk-toggle"
+        ?disabled=${allExpanded}
+        @click=${() => this.expandTimelineDetails(detailIds)}
+      >
+        Expand all
+      </button>
+      <button
+        type="button"
+        class="cpk-td__timeline-bulk-toggle"
+        ?disabled=${allCollapsed}
+        @click=${() => this.collapseTimelineDetails(detailIds)}
+      >
+        Collapse all
+      </button>
+    </div>`;
+  }
+
+  private renderRawEventBulkControls() {
+    const eventIds = this.activeEvents.map((event) => this.rawEventId(event));
+    if (eventIds.length <= 1) return nothing;
+
+    const allExpanded = eventIds.every((id) => this._expandedRawEvents.has(id));
+    const allCollapsed = eventIds.every(
+      (id) => !this._expandedRawEvents.has(id),
+    );
+
+    return html`<div class="cpk-td__timeline-toolbar">
+      <button
+        type="button"
+        class="cpk-td__timeline-bulk-toggle"
+        ?disabled=${allExpanded}
+        @click=${() => this.expandRawEventDetails(eventIds)}
+      >
+        Expand all
+      </button>
+      <button
+        type="button"
+        class="cpk-td__timeline-bulk-toggle"
+        ?disabled=${allCollapsed}
+        @click=${() => this.collapseRawEventDetails(eventIds)}
+      >
+        Collapse all
+      </button>
+    </div>`;
+  }
+
   private revealSourceEvent(sourceIndex: number): void {
     this._activatedTabs = new Set([...this._activatedTabs, "raw-events"]);
     this._tab = "raw-events";
@@ -2619,7 +2804,10 @@ export class CpkThreadInspector extends 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);
@@ -2637,13 +2825,16 @@ export class CpkThreadInspector extends LitElement {
       `;
     }
 
-    return this.cachedPanelTpl("timeline", [events], () => {
-      return html`${timelineItems.map((item) => this.renderTimelineItem(item))}`;
-    });
+    return this.cachedPanelTpl(
+      "timeline",
+      [events, this._expandedTimelineDetails],
+      () => html`${timelineItems.map((item) => this.renderTimelineItem(item))}`,
+    );
   }
 
   private renderTimelineItem(item: TimelineItem) {
     const isWarning = item.kind === "warning";
+    const detailsExpanded = this._expandedTimelineDetails.has(item.id);
     return html`
       <div
         class="cpk-td__timeline-item ${
@@ -2666,14 +2857,56 @@ export class CpkThreadInspector extends LitElement {
             >${formatTimestamp(item.timestamp)}</span
           >
         </div>
+        ${
+          item.details
+            ? html`<button
+                type="button"
+                class="cpk-td__timeline-details-toggle"
+                aria-expanded=${detailsExpanded ? "true" : "false"}
+                @click=${() => this.toggleTimelineDetails(item.id)}
+              >
+                ${
+                  detailsExpanded
+                    ? 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>
+                      `
+                    : 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>`
+            : nothing
+        }
         ${
           item.body
             ? html`<div class="cpk-td__timeline-body">${item.body}</div>`
-            : item.details
-              ? html`<pre class="cpk-td__timeline-body">
-${unsafeHTML(highlightedJson(item.details))}</pre
-              >`
-              : nothing
+            : nothing
+        }
+        ${
+          item.details && detailsExpanded
+            ? html`<pre class="cpk-td__timeline-body">${unsafeHTML(
+                highlightedJson(item.details),
+              )}</pre>`
+            : nothing
         }
       </div>
     `;
@@ -3011,10 +3244,15 @@ ${unsafeHTML(highlightedJson(stateValue))}</pre
         </div>
       `;
     }
-    return this.cachedPanelTpl("raw-events", [events], () => {
-      return html`${events.map((event) => {
-        const { bg, fg } = eventColors(event.type);
-        return html`
+    return this.cachedPanelTpl(
+      "raw-events",
+      [events, this._expandedRawEvents],
+      () => {
+        return html`${events.map((event) => {
+          const { bg, fg } = eventColors(event.type);
+          const eventId = this.rawEventId(event);
+          const detailsExpanded = this._expandedRawEvents.has(eventId);
+          return html`
           <div class="cpk-td__event" data-source-index=${event.sourceIndex}>
             <div class="cpk-td__event-header" style="background:${bg}">
               <span class="cpk-td__event-type" style="color:${fg}"
@@ -3024,13 +3262,53 @@ ${unsafeHTML(highlightedJson(stateValue))}</pre
                 >${formatTimestamp(event.timestamp)}</span
               >
             </div>
-            <pre class="cpk-td__event-payload">
-${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
+                  ? 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>
+                    `
+                  : 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
+                ? html`<pre class="cpk-td__event-payload">${unsafeHTML(
+                    highlightedJson(event.rawEvent ?? event),
+                  )}</pre>`
+                : nothing
+            }
           </div>
         `;
-      })}`;
-    });
+        })}`;
+      },
+    );
   }
 
   private renderPanelToggle() {