@copilotkit/web-inspector 1.76.0 → 1.77.0

package/dist/index.cjs

@@ -126,8 +126,10 @@ const HUD_LEARNING_LABEL = "Automatic Learning";
 const HUD_LEARN_MORE_LABEL = "Click to learn more";
 const INSPECTOR_DISMISSAL_MS = {
 	day: 1440 * 60 * 1e3,
-	week: require_persistence.INSPECTOR_DISMISSAL_MAX_DURATION_MS
+	week: 10080 * 60 * 1e3,
+	forever: require_persistence.INSPECTOR_DISMISSAL_MAX_DURATION_MS
 };
+const MAX_TIMER_DELAY_MS = 2 ** 31 - 1;
 const LAUNCHER_SIGNALS = {
 	"whats-new": {
 		tone: "news",
@@ -1866,6 +1868,13 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       flex-direction: column;
       gap: 12px;
     }
+    .cpk-td__panel--conversation {
+      width: 100%;
+      max-width: 800px;
+      min-width: 0;
+      margin-inline: auto;
+    }
+
     .cpk-td__panel > * {
       flex-shrink: 0;
     }
@@ -1984,123 +1993,148 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       border: 0;
     }
 
-    /* ── Tool call blocks ────────────────────────────────────────────── */
+    /* Tool activity stays compact in the conversation; raw data is opt-in. */
     .cpk-td__tool-block {
-      border: 1px solid #e9e9ef;
-      border-radius: 12px;
+      min-width: 0;
+    }
+    .cpk-td__tool-block:has(> .cpk-td__tool-header[aria-expanded="true"]) {
+      border-radius: 10px;
       overflow: hidden;
+      background: #ffffff;
+      box-shadow: 0 0 0 1px oklch(0 0 0 / 0.08);
     }
-
     .cpk-td__tool-header {
       display: flex;
       align-items: center;
-      gap: 6px;
-      padding: 12px;
-      background: #ffffff;
-      color: #71717a;
+      gap: 10px;
+      padding: 10px 12px;
+      background: transparent;
+      color: #68686e;
       cursor: pointer;
       width: 100%;
       border: 0;
       font-family: inherit;
       text-align: left;
-      font-size: 11px;
-      user-select: none;
+      font-size: 12px;
+    }
+    .cpk-td__tool-header > svg {
+      flex-shrink: 0;
     }
-
     .cpk-td__tool-header:focus-visible {
       outline: 2px solid var(--cpk-primary-color, #7076b3);
       outline-offset: -2px;
     }
-
     .cpk-td__tool-header:hover {
-      background: #fafafa;
+      background: #f7f7f9;
+      border-radius: 8px;
+    }
+    .cpk-td__tool-block:has(> .cpk-td__tool-header[aria-expanded="true"])
+      .cpk-td__tool-header:hover {
+      border-radius: 0;
+    }
+    .cpk-td__tool-copy {
+      flex: 1;
+      min-width: 0;
+    }
+    .cpk-td__tool-title {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: baseline;
+      min-width: 0;
     }
-
     .cpk-td__tool-name {
       font-size: 13px;
       font-weight: 500;
-      color: #18181b;
+      line-height: 1.6;
+      color: #57575b;
       overflow-wrap: anywhere;
-      min-width: 0;
-      flex: 1;
     }
-
     .cpk-td__tool-status {
-      font-size: 10px;
-      font-weight: 500;
-      padding: 3px 7px;
-      border-radius: 999px;
-      background: #d1fae5;
-      color: #065f46;
+      display: block;
+      font-size: 11px;
+      line-height: 1.6;
+      color: #68686e;
     }
-
     .cpk-td__tool-status--pending {
-      background: #fef3c7;
       color: #8a5900;
     }
-
     .cpk-td__tool-chevron {
-      color: #68686e;
-      font-size: 10px;
+      flex-shrink: 0;
+      transition: transform 150ms;
+    }
+    .cpk-td__tool-header[aria-expanded="true"] .cpk-td__tool-chevron {
+      transform: rotate(90deg);
+    }
+    .cpk-td__tool-name--streaming {
+      width: fit-content;
+      background: linear-gradient(100deg, #68686e 35%, #c9c9d5 50%, #68686e 65%);
+      background-size: 250% 100%;
+      background-clip: text;
+      -webkit-background-clip: text;
+      color: transparent;
+      animation: cpk-tool-shimmer 2s linear infinite;
+    }
+    @keyframes cpk-tool-shimmer {
+      from {
+        background-position: 150% 0;
+      }
+      to {
+        background-position: -100% 0;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .cpk-td__tool-name--streaming {
+        animation: none;
+        background: none;
+        color: inherit;
+      }
+      .cpk-td__tool-chevron {
+        transition: none;
+      }
     }
-
     .cpk-td__tool-body {
-      padding: 8px 10px;
+      min-width: 0;
+      padding-top: 4px;
       border-top: 1px solid #e9e9ef;
-      background: #ffffff;
     }
-
-    .cpk-td__tool-section-label {
-      font-family: "Spline Sans Mono", monospace;
-      font-size: 9px;
-      font-weight: 500;
+    .cpk-td__tool-identifier {
+      margin-left: 0.35em;
       color: #68686e;
-      text-transform: uppercase;
-      margin-bottom: 4px;
-      letter-spacing: 0.3px;
+      font:
+        11px/1.6 "Spline Sans Mono",
+        monospace;
+      overflow-wrap: anywhere;
     }
-
-    .cpk-td__tool-pre {
+    .cpk-td__tool-data {
+      display: grid;
+      gap: 0;
+    }
+    .cpk-td__tool-section-label {
+      font-family: "Plus Jakarta Sans", sans-serif;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 1.65;
+      color: #68686e;
       margin: 0;
-      font-family: "Spline Sans Mono", monospace;
+      padding: 8px 12px;
+    }
+    .cpk-td__tool-body .cpk-json-block {
       font-size: 12px;
-      background: #f7f7f9;
-      padding: 10px 12px;
-      border-radius: 6px;
-      overflow-x: auto;
-      white-space: pre-wrap;
-      overflow-wrap: anywhere;
-      word-break: normal;
-      color: #010507;
       line-height: 1.65;
     }
-
-    /* ── Tool call group ─────────────────────────────────────────────── */
+    .cpk-td__tool-result {
+      border-top: 1px solid #e9e9ef;
+    }
     .cpk-td__tool-group {
-      border: 1px solid #e9e9ef;
-      border-radius: 7px;
-      overflow: hidden;
+      min-width: 0;
     }
-
     .cpk-td__tool-group-header {
-      padding: 5px 10px;
-      background: rgba(133, 236, 206, 0.15);
-      font-family: "Spline Sans Mono", monospace;
-      font-size: 10px;
-      color: #087653;
-      text-transform: uppercase;
-      font-weight: 500;
-      border-bottom: 1px solid #e9e9ef;
+      padding: 4px 12px;
+      font-size: 11px;
+      color: #68686e;
     }
-
     .cpk-td__tool-group .cpk-td__tool-block {
-      border: none;
-      border-bottom: 1px solid #e9e9ef;
-      border-radius: 0;
-    }
-
-    .cpk-td__tool-group .cpk-td__tool-block:last-child {
-      border-bottom: none;
+      margin-left: 12px;
     }
 
     /* ── Inline chips (reasoning / state update) ─────────────────────── */
@@ -2386,17 +2420,24 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
     }
 
     :host([data-color-scheme="dark"]) .cpk-td__tool-header {
+      background: transparent;
+    }
+    :host([data-color-scheme="dark"])
+      .cpk-td__tool-block:has(> .cpk-td__tool-header[aria-expanded="true"]) {
       background: #191c24;
+      box-shadow: 0 0 0 1px oklch(1 0 0 / 0.12);
+    }
+    :host([data-color-scheme="dark"]) .cpk-td__tool-body,
+    :host([data-color-scheme="dark"]) .cpk-td__tool-result {
+      border-top-color: #343742;
     }
     :host([data-color-scheme="dark"]) .cpk-td__tool-name {
       color: #f4f4f5;
     }
     :host([data-color-scheme="dark"]) .cpk-td__tool-status {
-      background: #17392e;
-      color: #6ee7b7;
+      color: #a1a1aa;
     }
     :host([data-color-scheme="dark"]) .cpk-td__tool-status--pending {
-      background: #3d3019;
       color: #fbbf24;
     }
 
@@ -2619,9 +2660,6 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
     :host([data-color-scheme="dark"]) .cpk-td__metadata-strip,
     :host([data-color-scheme="dark"]) .cpk-td__metadata-pill,
     :host([data-color-scheme="dark"]) .cpk-td__try-from-here,
-    :host([data-color-scheme="dark"]) .cpk-td__tool-block,
-    :host([data-color-scheme="dark"]) .cpk-td__tool-header,
-    :host([data-color-scheme="dark"]) .cpk-td__tool-body,
     :host([data-color-scheme="dark"]) .cpk-td__event,
     :host([data-color-scheme="dark"]) .cpk-td__event-payload,
     :host([data-color-scheme="dark"]) .cpk-td__timeline-item,
@@ -2637,7 +2675,6 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 
     :host([data-color-scheme="dark"]) .cpk-td__metadata-pill,
     :host([data-color-scheme="dark"]) .cpk-td__try-from-here,
-    :host([data-color-scheme="dark"]) .cpk-td__tool-block,
     :host([data-color-scheme="dark"]) .cpk-td__event,
     :host([data-color-scheme="dark"]) .cpk-td__genui-card,
     :host([data-color-scheme="dark"]) .cpk-td__timeline-item,
@@ -2647,16 +2684,10 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       background: #191c24;
     }
 
-    :host([data-color-scheme="dark"]) .cpk-td__timeline-header,
-    :host([data-color-scheme="dark"]) .cpk-td__tool-body {
+    :host([data-color-scheme="dark"]) .cpk-td__timeline-header {
       background: #171a22;
     }
 
-    :host([data-color-scheme="dark"]) .cpk-td__tool-pre {
-      background: #111319;
-      color: #f3f4f8;
-    }
-
     :host([data-color-scheme="dark"]) .cpk-td__panel-toggle:hover,
     :host([data-color-scheme="dark"]) .cpk-td__tool-header:hover,
     :host([data-color-scheme="dark"]) .cpk-td__timeline-bulk-toggle:hover,
@@ -2790,7 +2821,6 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
     :host([data-color-scheme="dark"]) .cpk-td__tab--active,
     :host([data-color-scheme="dark"]) .cpk-td__metadata-value,
     :host([data-color-scheme="dark"]) .cpk-td__tool-name,
-    :host([data-color-scheme="dark"]) .cpk-td__tool-pre,
     :host([data-color-scheme="dark"]) .cpk-td__timeline-title,
     :host([data-color-scheme="dark"]) .cpk-td__timeline-bulk-toggle,
     :host([data-color-scheme="dark"]) .cpk-td__timeline-details-toggle,
@@ -2799,6 +2829,28 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       color: #f3f4f8;
     }
 
+    :host([data-color-scheme="dark"]) .cpk-td__tool-status,
+    :host([data-color-scheme="dark"]) .cpk-td__tool-section-label,
+    :host([data-color-scheme="dark"]) .cpk-td__tool-identifier,
+    :host([data-color-scheme="dark"]) .cpk-td__tool-group-header {
+      color: #aeb1bd;
+    }
+    :host([data-color-scheme="dark"]) .cpk-td__tool-name--streaming {
+      color: transparent;
+      background-image: linear-gradient(
+        100deg,
+        #aeb1bd 35%,
+        #ffffff 50%,
+        #aeb1bd 65%
+      );
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :host([data-color-scheme="dark"]) .cpk-td__tool-name--streaming {
+        background: none;
+        color: #f3f4f8;
+      }
+    }
+
     :host([data-color-scheme="dark"]) .cpk-td__event-payload,
     :host([data-color-scheme="dark"]) .cpk-td__json-block,
     :host([data-color-scheme="dark"]) .cpk-json-block {
@@ -3632,7 +3684,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
                   ` : lit.nothing}
             ${CpkThreadInspector.TAB_LIST.map((tab) => this._activatedTabs.has(tab.id) ? lit.html`<div
                     id=${this.panelDomId(tab.id)}
-                    class="cpk-td__panel"
+                    class="cpk-td__panel ${tab.id === "timeline" && !this._showEventTimeline && this._conversation.length > 0 ? "cpk-td__panel--conversation" : ""}"
                     role="tabpanel"
                     aria-labelledby=${this.tabDomId(tab.id)}
                     ?hidden=${this._tab !== tab.id || this._panelInitializing}
@@ -3906,11 +3958,13 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       `;
 		const items = this.renderItems;
 		const errors = this.conversationRunErrors(items);
+		const streamingTools = this.streamingToolCallIds();
 		return this.cachedPanelTpl("timeline-fallback", [
 			this._conversation,
 			this._expandedTools,
 			this._expandedMessages,
 			JSON.stringify(errors),
+			JSON.stringify([...streamingTools]),
 			this._expandedTimelineDetails
 		], () => {
 			const errorsAfter = /* @__PURE__ */ new Map();
@@ -3922,10 +3976,29 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			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)}`)}
+          ${items.map((item, index) => lit.html`${this.renderRenderItem(item, streamingTools)}${renderErrors(index)}`)}
         `;
 		});
 	}
+	streamingToolCallIds() {
+		const streaming = /* @__PURE__ */ new Set();
+		let currentThread = false;
+		for (let i = this.agentEventsInput.length - 1; i >= 0; i--) {
+			const event = this.agentEventsInput[i];
+			const payload = event.payload.event && typeof event.payload.event === "object" ? event.payload.event : event.payload;
+			if (event.type === "RUN_STARTED") {
+				streaming.clear();
+				currentThread = payload.threadId === this.threadId;
+			} else if (event.type === "RUN_FINISHED" || event.type === "RUN_ERROR") {
+				streaming.clear();
+				currentThread = false;
+			} else if (currentThread && typeof payload.toolCallId === "string") {
+				if (event.type === "TOOL_CALL_START") streaming.add(payload.toolCallId);
+				if (event.type === "TOOL_CALL_END" || event.type === "TOOL_CALL_RESULT") streaming.delete(payload.toolCallId);
+			}
+		}
+		return streaming;
+	}
 	conversationRunErrors(items) {
 		const positions = /* @__PURE__ */ new Map();
 		items.forEach((item, index) => {
@@ -3983,12 +4056,12 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		if (cached && cached.key.length === key.length && cached.key.every((v, i) => v === key[i])) return cached.tpl;
 		return null;
 	}
-	renderRenderItem(item) {
+	renderRenderItem(item, streamingTools) {
 		switch (item.type) {
 			case "user":
 			case "assistant": return this.renderBubble(item);
-			case "tool_call": return this.renderToolBlock(item);
-			case "tool_call_group": return this.renderToolGroup(item);
+			case "tool_call": return this.renderToolBlock(item, streamingTools.has(item.toolCallId));
+			case "tool_call_group": return this.renderToolGroup(item, streamingTools);
 			case "reasoning": return lit.html`<div class="cpk-td__inline-chip">
           <span>Reasoned for ${item.duration}</span>
         </div>`;
@@ -4027,7 +4100,10 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       </div>
     `;
 	}
-	renderToolBlock(item) {
+	renderToolBlock(item, streaming = false) {
+		streaming = streaming && !item.hasResult;
+		const label = item.toolName.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ");
+		const readableName = label.charAt(0).toUpperCase() + label.slice(1);
 		const expanded = this._expandedTools.has(item.id);
 		return lit.html`
       <div class="cpk-td__tool-block">
@@ -4046,45 +4122,41 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
               stroke-linejoin="round"
             />
           </svg>
-          <span class="cpk-td__tool-name">${item.toolName}</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>
+          <span class="cpk-td__tool-copy">
+            <span class="cpk-td__tool-title">
+              <span class="cpk-td__tool-name ${streaming ? "cpk-td__tool-name--streaming" : ""}">${readableName}</span><code class="cpk-td__tool-identifier">(${item.toolName})</code>
+            </span>
+            <span class="cpk-td__tool-status ${item.resultUnreadable || !item.hasResult && !streaming ? "cpk-td__tool-status--pending" : ""}">${streaming ? "Receiving arguments" : item.resultUnreadable ? "Result unreadable" : item.hasResult ? "Result received" : "No result recorded"}</span>
+          </span>
+          <svg class="cpk-td__tool-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+            <path d="m9 6 6 6-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
         </button>
         ${expanded ? lit.html`
               <div class="cpk-td__tool-body">
-                <div class="cpk-td__tool-section-label">Arguments</div>
-                ${renderHighlightedJsonBlock(item.arguments)}
-                ${item.hasResult ? lit.html`
-                      <div
-                        class="cpk-td__tool-section-label"
-                        style="margin-top:8px"
-                      >
-                        Result
-                      </div>
+                <div class="cpk-td__tool-data">
+                  <section>
+                    <div class="cpk-td__tool-section-label">Arguments</div>
+                    ${renderHighlightedJsonBlock(item.arguments)}
+                  </section>
+                  ${item.hasResult ? lit.html`
+                    <section class="cpk-td__tool-result">
+                      <div class="cpk-td__tool-section-label">Result</div>
                       ${renderHighlightedJsonBlock(item.result)}
-                    ` : lit.nothing}
+                    </section>` : lit.nothing}
+                </div>
               </div>
             ` : lit.nothing}
       </div>
     `;
 	}
-	renderToolGroup(group) {
+	renderToolGroup(group, streamingTools) {
 		return lit.html`
       <div class="cpk-td__tool-group">
         <div class="cpk-td__tool-group-header">
           ${group.items.length} tool call${group.items.length !== 1 ? "s" : ""}
         </div>
-        ${group.items.map((tc) => this.renderToolBlock(tc))}
+        ${group.items.map((tc) => this.renderToolBlock(tc, streamingTools.has(tc.toolCallId)))}
       </div>
     `;
 	}
@@ -5379,9 +5451,13 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			const service = this.getHomeFeaturePromptTarget("memory");
 			if (!service || !this.core?.runtimeUrl) return;
 			const request = ++this.learningSetupCopyRequest;
-			const copied = await this.copyFeaturePromptToClipboard(service, event, this.getOnboardingRunId());
+			const runId = this.getOnboardingRunId();
+			const copied = await this.copyFeaturePromptToClipboard(service, event, runId);
 			if (request !== this.learningSetupCopyRequest) return;
-			if (!this.core.telemetryDisabled) require_telemetry.trackLearningSetupPromptClicked({ outcome: copied ? "success" : "failure" });
+			if (!this.core.telemetryDisabled) require_telemetry.trackLearningSetupPromptClicked({
+				outcome: copied ? "success" : "failure",
+				onboarding_run_id: runId
+			});
 			if (!copied) {
 				if (recopy) {
 					this.cancelLearningPromptRecopyReset();
@@ -9813,7 +9889,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 	scheduleInspectorDismissalExpiry() {
 		this.clearInspectorDismissalTimer();
 		if (this.inspectorDismissedUntil === null) return;
-		const delay = Math.max(0, this.inspectorDismissedUntil - Date.now() + 25);
+		const delay = Math.min(MAX_TIMER_DELAY_MS, Math.max(0, this.inspectorDismissedUntil - Date.now() + 25));
 		this.inspectorDismissalTimer = setTimeout(() => {
 			this.inspectorDismissalTimer = null;
 			this.refreshInspectorDismissalState();
@@ -9846,7 +9922,8 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 	dismissInspectorFor(duration) {
 		const now = Date.now();
 		const until = now + INSPECTOR_DISMISSAL_MS[duration];
-		require_persistence.saveInspectorDismissedUntil(until, now);
+		if (duration === "forever") require_persistence.saveInspectorDismissedForever(now);
+		else require_persistence.saveInspectorDismissedUntil(until, now);
 		this.inspectorDismissedUntil = until;
 		this.scheduleInspectorDismissalExpiry();
 		this.settingsOpen = false;
@@ -12893,7 +12970,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
             </span>
             <div>
               <h2 id="inspector-settings-visibility-title">Visibility</h2>
-              <p>Temporarily hide the Inspector on this domain.</p>
+              <p>Hide the Inspector on this domain.</p>
             </div>
           </div>
 
@@ -12915,6 +12992,27 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
               Hide Inspector for one week
             </button>
           </div>
+
+          <div class="inspector-settings-visibility">
+            <div>
+              <h3>Hide the Inspector indefinitely</h3>
+              <p>
+                Keep the Inspector hidden on this domain until you bring it
+                back. To restore it, delete the
+                <code>cpk_inspector_dismissed_until</code> cookie and the
+                <code>cpk:inspector:dismissed_until</code> localStorage entry.
+              </p>
+            </div>
+            <button
+              type="button"
+              class="inspector-settings-dismiss"
+              data-cpk-dismiss-inspector="forever"
+              @click=${() => this.dismissInspectorFor("forever")}
+            >
+              <span aria-hidden="true">${this.renderIcon("EyeOff")}</span>
+              Always hide Inspector
+            </button>
+          </div>
         </section>
       </div>
     `;