@copilotkit/web-inspector 1.55.0-next.8 → 1.55.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/dist/index.cjs +48 -29
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -0
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.mts +1 -0
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +48 -29
- package/dist/index.mjs.map +1 -1
- package/dist/index.umd.js +48 -29
- package/dist/index.umd.js.map +1 -1
- package/package.json +7 -10
- package/src/__tests__/web-inspector.spec.ts +19 -1
- package/src/index.ts +231 -151
- package/eslint.config.mjs +0 -3
package/src/index.ts
CHANGED
|
@@ -194,6 +194,8 @@ export class WebInspectorElement extends LitElement {
|
|
|
194
194
|
private dockMode: DockMode = "floating";
|
|
195
195
|
private previousBodyMargins: { left: string; bottom: string } | null = null;
|
|
196
196
|
private transitionTimeoutId: ReturnType<typeof setTimeout> | null = null;
|
|
197
|
+
private bodyTransitionTimeoutIds: Set<ReturnType<typeof setTimeout>> =
|
|
198
|
+
new Set();
|
|
197
199
|
private pendingSelectedContext: string | null = null;
|
|
198
200
|
private autoAttachCore = true;
|
|
199
201
|
private attemptedAutoAttach = false;
|
|
@@ -800,13 +802,15 @@ export class WebInspectorElement extends LitElement {
|
|
|
800
802
|
<span>${functionName}</span>
|
|
801
803
|
<span class="text-[10px] text-gray-500">ID: ${callId}</span>
|
|
802
804
|
</div>
|
|
803
|
-
${
|
|
804
|
-
|
|
805
|
+
${
|
|
806
|
+
argsString
|
|
807
|
+
? html`<pre
|
|
805
808
|
class="mt-2 overflow-auto rounded bg-white p-2 text-[11px] leading-relaxed text-gray-800"
|
|
806
809
|
>
|
|
807
810
|
${argsString}</pre
|
|
808
811
|
>`
|
|
809
|
-
|
|
812
|
+
: nothing
|
|
813
|
+
}
|
|
810
814
|
</div>
|
|
811
815
|
`;
|
|
812
816
|
})}
|
|
@@ -1195,7 +1199,16 @@ ${argsString}</pre
|
|
|
1195
1199
|
this.handleGlobalPointerDown as EventListener,
|
|
1196
1200
|
);
|
|
1197
1201
|
}
|
|
1198
|
-
|
|
1202
|
+
// Clear pending body-transition timers to prevent post-teardown errors
|
|
1203
|
+
for (const id of this.bodyTransitionTimeoutIds) {
|
|
1204
|
+
clearTimeout(id);
|
|
1205
|
+
}
|
|
1206
|
+
this.bodyTransitionTimeoutIds.clear();
|
|
1207
|
+
if (this.transitionTimeoutId !== null) {
|
|
1208
|
+
clearTimeout(this.transitionTimeoutId);
|
|
1209
|
+
this.transitionTimeoutId = null;
|
|
1210
|
+
}
|
|
1211
|
+
this.removeDockStyles(true); // Clean up any docking styles, skip transition
|
|
1199
1212
|
this.detachFromCore();
|
|
1200
1213
|
}
|
|
1201
1214
|
|
|
@@ -1283,9 +1296,9 @@ ${argsString}</pre
|
|
|
1283
1296
|
type="button"
|
|
1284
1297
|
aria-label="Web Inspector"
|
|
1285
1298
|
data-drag-context="button"
|
|
1286
|
-
data-dragging=${
|
|
1287
|
-
? "true"
|
|
1288
|
-
|
|
1299
|
+
data-dragging=${
|
|
1300
|
+
this.isDragging && this.pointerContext === "button" ? "true" : "false"
|
|
1301
|
+
}
|
|
1289
1302
|
@pointerdown=${this.handlePointerDown}
|
|
1290
1303
|
@pointermove=${this.handlePointerMove}
|
|
1291
1304
|
@pointerup=${this.handlePointerUp}
|
|
@@ -1340,8 +1353,9 @@ ${argsString}</pre
|
|
|
1340
1353
|
data-docked=${isDocked}
|
|
1341
1354
|
data-transitioning=${isTransitioning}
|
|
1342
1355
|
>
|
|
1343
|
-
${
|
|
1344
|
-
|
|
1356
|
+
${
|
|
1357
|
+
isDocked
|
|
1358
|
+
? html`
|
|
1345
1359
|
<div
|
|
1346
1360
|
class="dock-resize-handle pointer-events-auto"
|
|
1347
1361
|
role="presentation"
|
|
@@ -1352,16 +1366,19 @@ ${argsString}</pre
|
|
|
1352
1366
|
@pointercancel=${this.handleResizePointerCancel}
|
|
1353
1367
|
></div>
|
|
1354
1368
|
`
|
|
1355
|
-
|
|
1369
|
+
: nothing
|
|
1370
|
+
}
|
|
1356
1371
|
<div
|
|
1357
1372
|
class="flex flex-1 flex-col overflow-hidden bg-white text-gray-800"
|
|
1358
1373
|
>
|
|
1359
1374
|
<div
|
|
1360
|
-
class="drag-handle relative z-30 flex flex-col border-b border-gray-200 bg-white/95 backdrop-blur-sm ${
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1375
|
+
class="drag-handle relative z-30 flex flex-col border-b border-gray-200 bg-white/95 backdrop-blur-sm ${
|
|
1376
|
+
isDocked
|
|
1377
|
+
? ""
|
|
1378
|
+
: this.isDragging && this.pointerContext === "window"
|
|
1379
|
+
? "cursor-grabbing"
|
|
1380
|
+
: "cursor-grab"
|
|
1381
|
+
}"
|
|
1365
1382
|
data-drag-context="window"
|
|
1366
1383
|
@pointerdown=${isDocked ? undefined : this.handlePointerDown}
|
|
1367
1384
|
@pointermove=${isDocked ? undefined : this.handlePointerMove}
|
|
@@ -2032,21 +2049,23 @@ ${argsString}</pre
|
|
|
2032
2049
|
|
|
2033
2050
|
// Remove transition after animation completes
|
|
2034
2051
|
if (!this.isResizing && !skipTransition) {
|
|
2035
|
-
setTimeout(() => {
|
|
2036
|
-
|
|
2052
|
+
const id = setTimeout(() => {
|
|
2053
|
+
this.bodyTransitionTimeoutIds.delete(id);
|
|
2054
|
+
if (typeof document !== "undefined" && document.body) {
|
|
2037
2055
|
document.body.style.transition = "";
|
|
2038
2056
|
}
|
|
2039
2057
|
}, 300);
|
|
2058
|
+
this.bodyTransitionTimeoutIds.add(id);
|
|
2040
2059
|
}
|
|
2041
2060
|
}
|
|
2042
2061
|
|
|
2043
|
-
private removeDockStyles(): void {
|
|
2062
|
+
private removeDockStyles(skipTransition = false): void {
|
|
2044
2063
|
if (typeof document === "undefined" || !document.body) {
|
|
2045
2064
|
return;
|
|
2046
2065
|
}
|
|
2047
2066
|
|
|
2048
|
-
// Only add transition if not resizing
|
|
2049
|
-
if (!this.isResizing) {
|
|
2067
|
+
// Only add transition if not resizing and not skipping
|
|
2068
|
+
if (!this.isResizing && !skipTransition) {
|
|
2050
2069
|
document.body.style.transition = "margin 300ms ease";
|
|
2051
2070
|
}
|
|
2052
2071
|
|
|
@@ -2062,11 +2081,17 @@ ${argsString}</pre
|
|
|
2062
2081
|
}
|
|
2063
2082
|
|
|
2064
2083
|
// Clean up transition after animation completes
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2084
|
+
if (!skipTransition) {
|
|
2085
|
+
const id = setTimeout(() => {
|
|
2086
|
+
this.bodyTransitionTimeoutIds.delete(id);
|
|
2087
|
+
if (typeof document !== "undefined" && document.body) {
|
|
2088
|
+
document.body.style.transition = "";
|
|
2089
|
+
}
|
|
2090
|
+
}, 300);
|
|
2091
|
+
this.bodyTransitionTimeoutIds.add(id);
|
|
2092
|
+
} else {
|
|
2093
|
+
document.body.style.transition = "";
|
|
2094
|
+
}
|
|
2070
2095
|
}
|
|
2071
2096
|
|
|
2072
2097
|
private updateHostTransform(context: ContextKey = this.activeContext): void {
|
|
@@ -2732,8 +2757,9 @@ ${argsString}</pre
|
|
|
2732
2757
|
data-tooltip="Reset filters"
|
|
2733
2758
|
aria-label="Reset filters"
|
|
2734
2759
|
@click=${this.resetEventFilters}
|
|
2735
|
-
?disabled=${
|
|
2736
|
-
|
|
2760
|
+
?disabled=${
|
|
2761
|
+
!this.eventFilterText && this.eventTypeFilter === "all"
|
|
2762
|
+
}
|
|
2737
2763
|
>
|
|
2738
2764
|
${this.renderIcon("RotateCw")}
|
|
2739
2765
|
</button>
|
|
@@ -2763,9 +2789,11 @@ ${argsString}</pre
|
|
|
2763
2789
|
</div>
|
|
2764
2790
|
<div class="text-[11px] text-gray-500">
|
|
2765
2791
|
Showing ${filteredEvents.length} of
|
|
2766
|
-
${events.length}${
|
|
2767
|
-
|
|
2768
|
-
|
|
2792
|
+
${events.length}${
|
|
2793
|
+
this.selectedContext === "all-agents"
|
|
2794
|
+
? ""
|
|
2795
|
+
: ` for ${selectedLabel}`
|
|
2796
|
+
}
|
|
2769
2797
|
</div>
|
|
2770
2798
|
</div>
|
|
2771
2799
|
<div class="relative h-full w-full overflow-y-auto overflow-x-hidden">
|
|
@@ -2830,12 +2858,13 @@ ${argsString}</pre
|
|
|
2830
2858
|
<span class=${badgeClasses}>${event.type}</span>
|
|
2831
2859
|
</td>
|
|
2832
2860
|
<td
|
|
2833
|
-
class="border-r border-b border-gray-200 px-3 py-2 font-mono text-[10px] text-gray-600 ${
|
|
2834
|
-
? ""
|
|
2835
|
-
|
|
2861
|
+
class="border-r border-b border-gray-200 px-3 py-2 font-mono text-[10px] text-gray-600 ${
|
|
2862
|
+
isExpanded ? "" : "truncate max-w-xs"
|
|
2863
|
+
}"
|
|
2836
2864
|
>
|
|
2837
|
-
${
|
|
2838
|
-
|
|
2865
|
+
${
|
|
2866
|
+
isExpanded
|
|
2867
|
+
? html`
|
|
2839
2868
|
<div class="group relative">
|
|
2840
2869
|
<pre
|
|
2841
2870
|
class="m-0 whitespace-pre-wrap break-words text-[10px] font-mono text-gray-600"
|
|
@@ -2843,23 +2872,30 @@ ${argsString}</pre
|
|
|
2843
2872
|
${prettyEvent}</pre
|
|
2844
2873
|
>
|
|
2845
2874
|
<button
|
|
2846
|
-
class="absolute right-0 top-0 cursor-pointer rounded px-2 py-1 text-[10px] opacity-0 transition group-hover:opacity-100 ${
|
|
2847
|
-
event.id
|
|
2848
|
-
|
|
2849
|
-
|
|
2850
|
-
|
|
2875
|
+
class="absolute right-0 top-0 cursor-pointer rounded px-2 py-1 text-[10px] opacity-0 transition group-hover:opacity-100 ${
|
|
2876
|
+
this.copiedEvents.has(event.id)
|
|
2877
|
+
? "bg-green-100 text-green-700"
|
|
2878
|
+
: "bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900"
|
|
2879
|
+
}"
|
|
2851
2880
|
@click=${(e: Event) => {
|
|
2852
2881
|
e.stopPropagation();
|
|
2853
2882
|
this.copyToClipboard(prettyEvent, event.id);
|
|
2854
2883
|
}}
|
|
2855
2884
|
>
|
|
2856
|
-
${
|
|
2857
|
-
|
|
2858
|
-
|
|
2885
|
+
${
|
|
2886
|
+
this.copiedEvents.has(event.id)
|
|
2887
|
+
? html`
|
|
2888
|
+
<span>✓ Copied</span>
|
|
2889
|
+
`
|
|
2890
|
+
: html`
|
|
2891
|
+
<span>Copy</span>
|
|
2892
|
+
`
|
|
2893
|
+
}
|
|
2859
2894
|
</button>
|
|
2860
2895
|
</div>
|
|
2861
2896
|
`
|
|
2862
|
-
|
|
2897
|
+
: inlineEvent
|
|
2898
|
+
}
|
|
2863
2899
|
</td>
|
|
2864
2900
|
</tr>
|
|
2865
2901
|
`;
|
|
@@ -2972,27 +3008,31 @@ ${prettyEvent}</pre
|
|
|
2972
3008
|
<div>
|
|
2973
3009
|
<h3 class="font-semibold text-sm text-gray-900">${agentId}</h3>
|
|
2974
3010
|
<span
|
|
2975
|
-
class="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium ${
|
|
2976
|
-
status
|
|
2977
|
-
|
|
3011
|
+
class="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium ${
|
|
3012
|
+
statusColors[status]
|
|
3013
|
+
} relative -translate-y-[2px]"
|
|
2978
3014
|
>
|
|
2979
3015
|
<span
|
|
2980
|
-
class="h-1.5 w-1.5 rounded-full ${
|
|
2981
|
-
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
|
|
3016
|
+
class="h-1.5 w-1.5 rounded-full ${
|
|
3017
|
+
status === "running"
|
|
3018
|
+
? "bg-emerald-500 animate-pulse"
|
|
3019
|
+
: status === "error"
|
|
3020
|
+
? "bg-rose-500"
|
|
3021
|
+
: "bg-gray-400"
|
|
3022
|
+
}"
|
|
2985
3023
|
></span>
|
|
2986
3024
|
${status.charAt(0).toUpperCase() + status.slice(1)}
|
|
2987
3025
|
</span>
|
|
2988
3026
|
</div>
|
|
2989
3027
|
</div>
|
|
2990
|
-
${
|
|
2991
|
-
|
|
3028
|
+
${
|
|
3029
|
+
stats.lastActivity
|
|
3030
|
+
? html`<span class="text-xs text-gray-500"
|
|
2992
3031
|
>Last activity:
|
|
2993
3032
|
${new Date(stats.lastActivity).toLocaleTimeString()}</span
|
|
2994
3033
|
>`
|
|
2995
|
-
|
|
3034
|
+
: nothing
|
|
3035
|
+
}
|
|
2996
3036
|
</div>
|
|
2997
3037
|
<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
|
|
2998
3038
|
<button
|
|
@@ -3041,13 +3081,14 @@ ${prettyEvent}</pre
|
|
|
3041
3081
|
<h4 class="text-sm font-semibold text-gray-900">Current State</h4>
|
|
3042
3082
|
</div>
|
|
3043
3083
|
<div class="overflow-auto p-4">
|
|
3044
|
-
${
|
|
3045
|
-
|
|
3084
|
+
${
|
|
3085
|
+
this.hasRenderableState(state)
|
|
3086
|
+
? html`
|
|
3046
3087
|
<pre
|
|
3047
3088
|
class="overflow-auto rounded-md bg-gray-50 p-3 text-xs text-gray-800 max-h-64"
|
|
3048
3089
|
><code>${this.formatStateForDisplay(state)}</code></pre>
|
|
3049
3090
|
`
|
|
3050
|
-
|
|
3091
|
+
: html`
|
|
3051
3092
|
<div
|
|
3052
3093
|
class="flex h-40 items-center justify-center text-xs text-gray-500"
|
|
3053
3094
|
>
|
|
@@ -3058,7 +3099,8 @@ ${prettyEvent}</pre
|
|
|
3058
3099
|
<span>State is empty</span>
|
|
3059
3100
|
</div>
|
|
3060
3101
|
</div>
|
|
3061
|
-
`
|
|
3102
|
+
`
|
|
3103
|
+
}
|
|
3062
3104
|
</div>
|
|
3063
3105
|
</div>
|
|
3064
3106
|
|
|
@@ -3070,8 +3112,9 @@ ${prettyEvent}</pre
|
|
|
3070
3112
|
</h4>
|
|
3071
3113
|
</div>
|
|
3072
3114
|
<div class="overflow-auto">
|
|
3073
|
-
${
|
|
3074
|
-
|
|
3115
|
+
${
|
|
3116
|
+
messages && messages.length > 0
|
|
3117
|
+
? html`
|
|
3075
3118
|
<table class="w-full text-xs">
|
|
3076
3119
|
<thead class="bg-gray-50">
|
|
3077
3120
|
<tr>
|
|
@@ -3108,28 +3151,32 @@ ${prettyEvent}</pre
|
|
|
3108
3151
|
<tr>
|
|
3109
3152
|
<td class="px-4 py-2 align-top">
|
|
3110
3153
|
<span
|
|
3111
|
-
class="inline-flex rounded px-2 py-0.5 text-[10px] font-medium ${
|
|
3112
|
-
role
|
|
3113
|
-
|
|
3154
|
+
class="inline-flex rounded px-2 py-0.5 text-[10px] font-medium ${
|
|
3155
|
+
roleColors[role] || roleColors.unknown
|
|
3156
|
+
}"
|
|
3114
3157
|
>
|
|
3115
3158
|
${role}
|
|
3116
3159
|
</span>
|
|
3117
3160
|
</td>
|
|
3118
3161
|
<td class="px-4 py-2">
|
|
3119
|
-
${
|
|
3120
|
-
|
|
3162
|
+
${
|
|
3163
|
+
hasContent
|
|
3164
|
+
? html`<div
|
|
3121
3165
|
class="max-w-2xl whitespace-pre-wrap break-words text-gray-700"
|
|
3122
3166
|
>
|
|
3123
3167
|
${rawContent}
|
|
3124
3168
|
</div>`
|
|
3125
|
-
|
|
3169
|
+
: html`<div
|
|
3126
3170
|
class="text-xs italic text-gray-400"
|
|
3127
3171
|
>
|
|
3128
3172
|
${contentFallback}
|
|
3129
|
-
</div>`
|
|
3130
|
-
|
|
3131
|
-
|
|
3132
|
-
|
|
3173
|
+
</div>`
|
|
3174
|
+
}
|
|
3175
|
+
${
|
|
3176
|
+
role === "assistant" && toolCalls.length > 0
|
|
3177
|
+
? this.renderToolCallDetails(toolCalls)
|
|
3178
|
+
: nothing
|
|
3179
|
+
}
|
|
3133
3180
|
</td>
|
|
3134
3181
|
</tr>
|
|
3135
3182
|
`;
|
|
@@ -3137,7 +3184,7 @@ ${prettyEvent}</pre
|
|
|
3137
3184
|
</tbody>
|
|
3138
3185
|
</table>
|
|
3139
3186
|
`
|
|
3140
|
-
|
|
3187
|
+
: html`
|
|
3141
3188
|
<div
|
|
3142
3189
|
class="flex h-40 items-center justify-center text-xs text-gray-500"
|
|
3143
3190
|
>
|
|
@@ -3148,7 +3195,8 @@ ${prettyEvent}</pre
|
|
|
3148
3195
|
<span>No messages available</span>
|
|
3149
3196
|
</div>
|
|
3150
3197
|
</div>
|
|
3151
|
-
`
|
|
3198
|
+
`
|
|
3199
|
+
}
|
|
3152
3200
|
</div>
|
|
3153
3201
|
</div>
|
|
3154
3202
|
</div>
|
|
@@ -3181,8 +3229,9 @@ ${prettyEvent}</pre
|
|
|
3181
3229
|
>${this.renderIcon("ChevronDown")}</span
|
|
3182
3230
|
>
|
|
3183
3231
|
</button>
|
|
3184
|
-
${
|
|
3185
|
-
|
|
3232
|
+
${
|
|
3233
|
+
this.contextMenuOpen
|
|
3234
|
+
? html`
|
|
3186
3235
|
<div
|
|
3187
3236
|
class="absolute left-0 z-50 mt-1.5 w-40 rounded-md border border-gray-200 bg-white py-1 shadow-md ring-1 ring-black/5"
|
|
3188
3237
|
data-context-dropdown-root="true"
|
|
@@ -3196,22 +3245,27 @@ ${prettyEvent}</pre
|
|
|
3196
3245
|
@click=${() => this.handleContextOptionSelect(option.key)}
|
|
3197
3246
|
>
|
|
3198
3247
|
<span
|
|
3199
|
-
class="truncate ${
|
|
3200
|
-
|
|
3201
|
-
|
|
3248
|
+
class="truncate ${
|
|
3249
|
+
option.key === this.selectedContext
|
|
3250
|
+
? "text-gray-900 font-medium"
|
|
3251
|
+
: "text-gray-600"
|
|
3252
|
+
}"
|
|
3202
3253
|
>${option.label}</span
|
|
3203
3254
|
>
|
|
3204
|
-
${
|
|
3205
|
-
|
|
3255
|
+
${
|
|
3256
|
+
option.key === this.selectedContext
|
|
3257
|
+
? html`<span class="text-gray-500"
|
|
3206
3258
|
>${this.renderIcon("Check")}</span
|
|
3207
3259
|
>`
|
|
3208
|
-
|
|
3260
|
+
: nothing
|
|
3261
|
+
}
|
|
3209
3262
|
</button>
|
|
3210
3263
|
`,
|
|
3211
3264
|
)}
|
|
3212
3265
|
</div>
|
|
3213
3266
|
`
|
|
3214
|
-
|
|
3267
|
+
: nothing
|
|
3268
|
+
}
|
|
3215
3269
|
</div>
|
|
3216
3270
|
`;
|
|
3217
3271
|
}
|
|
@@ -3427,9 +3481,9 @@ ${prettyEvent}</pre
|
|
|
3427
3481
|
>${tool.name}</span
|
|
3428
3482
|
>
|
|
3429
3483
|
<span
|
|
3430
|
-
class="inline-flex items-center rounded-sm border px-1.5 py-0.5 text-[10px] font-medium ${
|
|
3431
|
-
tool.type
|
|
3432
|
-
|
|
3484
|
+
class="inline-flex items-center rounded-sm border px-1.5 py-0.5 text-[10px] font-medium ${
|
|
3485
|
+
typeColors[tool.type]
|
|
3486
|
+
}"
|
|
3433
3487
|
>
|
|
3434
3488
|
${tool.type}
|
|
3435
3489
|
</span>
|
|
@@ -3439,39 +3493,45 @@ ${prettyEvent}</pre
|
|
|
3439
3493
|
${this.renderIcon("Bot")}
|
|
3440
3494
|
<span class="font-mono">${tool.agentId}</span>
|
|
3441
3495
|
</span>
|
|
3442
|
-
${
|
|
3443
|
-
|
|
3496
|
+
${
|
|
3497
|
+
schema.properties.length > 0
|
|
3498
|
+
? html`
|
|
3444
3499
|
<span class="text-gray-300">•</span>
|
|
3445
3500
|
<span
|
|
3446
3501
|
>${schema.properties.length}
|
|
3447
|
-
parameter${
|
|
3448
|
-
? "s"
|
|
3449
|
-
|
|
3502
|
+
parameter${
|
|
3503
|
+
schema.properties.length !== 1 ? "s" : ""
|
|
3504
|
+
}</span
|
|
3450
3505
|
>
|
|
3451
3506
|
`
|
|
3452
|
-
|
|
3507
|
+
: nothing
|
|
3508
|
+
}
|
|
3453
3509
|
</div>
|
|
3454
|
-
${
|
|
3455
|
-
|
|
3510
|
+
${
|
|
3511
|
+
tool.description
|
|
3512
|
+
? html`<p class="mt-2 text-xs text-gray-600">
|
|
3456
3513
|
${tool.description}
|
|
3457
3514
|
</p>`
|
|
3458
|
-
|
|
3515
|
+
: nothing
|
|
3516
|
+
}
|
|
3459
3517
|
</div>
|
|
3460
3518
|
<span
|
|
3461
|
-
class="shrink-0 text-gray-400 transition ${
|
|
3462
|
-
? "rotate-180"
|
|
3463
|
-
|
|
3519
|
+
class="shrink-0 text-gray-400 transition ${
|
|
3520
|
+
isExpanded ? "rotate-180" : ""
|
|
3521
|
+
}"
|
|
3464
3522
|
>
|
|
3465
3523
|
${this.renderIcon("ChevronDown")}
|
|
3466
3524
|
</span>
|
|
3467
3525
|
</div>
|
|
3468
3526
|
</button>
|
|
3469
3527
|
|
|
3470
|
-
${
|
|
3471
|
-
|
|
3528
|
+
${
|
|
3529
|
+
isExpanded
|
|
3530
|
+
? html`
|
|
3472
3531
|
<div class="border-t border-gray-200 bg-gray-50/50 px-4 py-3">
|
|
3473
|
-
${
|
|
3474
|
-
|
|
3532
|
+
${
|
|
3533
|
+
schema.properties.length > 0
|
|
3534
|
+
? html`
|
|
3475
3535
|
<h5 class="mb-3 text-xs font-semibold text-gray-700">
|
|
3476
3536
|
Parameters
|
|
3477
3537
|
</h5>
|
|
@@ -3489,30 +3549,41 @@ ${prettyEvent}</pre
|
|
|
3489
3549
|
>${prop.name}</span
|
|
3490
3550
|
>
|
|
3491
3551
|
<div class="flex items-center gap-1.5 shrink-0">
|
|
3492
|
-
${
|
|
3493
|
-
|
|
3494
|
-
|
|
3495
|
-
|
|
3496
|
-
|
|
3497
|
-
|
|
3498
|
-
|
|
3499
|
-
|
|
3500
|
-
|
|
3501
|
-
|
|
3502
|
-
|
|
3552
|
+
${
|
|
3553
|
+
prop.required
|
|
3554
|
+
? html`
|
|
3555
|
+
<span
|
|
3556
|
+
class="text-[9px] rounded border border-rose-200 bg-rose-50 px-1 py-0.5 font-medium text-rose-700"
|
|
3557
|
+
>required</span
|
|
3558
|
+
>
|
|
3559
|
+
`
|
|
3560
|
+
: html`
|
|
3561
|
+
<span
|
|
3562
|
+
class="text-[9px] rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-medium text-gray-600"
|
|
3563
|
+
>optional</span
|
|
3564
|
+
>
|
|
3565
|
+
`
|
|
3566
|
+
}
|
|
3567
|
+
${
|
|
3568
|
+
prop.type
|
|
3569
|
+
? html`<span
|
|
3503
3570
|
class="text-[9px] rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-mono text-gray-600"
|
|
3504
3571
|
>${prop.type}</span
|
|
3505
3572
|
>`
|
|
3506
|
-
|
|
3573
|
+
: nothing
|
|
3574
|
+
}
|
|
3507
3575
|
</div>
|
|
3508
3576
|
</div>
|
|
3509
|
-
${
|
|
3510
|
-
|
|
3577
|
+
${
|
|
3578
|
+
prop.description
|
|
3579
|
+
? html`<p class="mt-1 text-xs text-gray-600">
|
|
3511
3580
|
${prop.description}
|
|
3512
3581
|
</p>`
|
|
3513
|
-
|
|
3514
|
-
|
|
3515
|
-
|
|
3582
|
+
: nothing
|
|
3583
|
+
}
|
|
3584
|
+
${
|
|
3585
|
+
prop.defaultValue !== undefined
|
|
3586
|
+
? html`
|
|
3516
3587
|
<div
|
|
3517
3588
|
class="mt-2 flex items-center gap-1.5 text-[10px] text-gray-500"
|
|
3518
3589
|
>
|
|
@@ -3525,9 +3596,11 @@ ${prettyEvent}</pre
|
|
|
3525
3596
|
>
|
|
3526
3597
|
</div>
|
|
3527
3598
|
`
|
|
3528
|
-
|
|
3529
|
-
|
|
3530
|
-
|
|
3599
|
+
: nothing
|
|
3600
|
+
}
|
|
3601
|
+
${
|
|
3602
|
+
prop.enum && prop.enum.length > 0
|
|
3603
|
+
? html`
|
|
3531
3604
|
<div class="mt-2">
|
|
3532
3605
|
<span class="text-[10px] text-gray-500"
|
|
3533
3606
|
>Allowed values:</span
|
|
@@ -3544,22 +3617,23 @@ ${prettyEvent}</pre
|
|
|
3544
3617
|
</div>
|
|
3545
3618
|
</div>
|
|
3546
3619
|
`
|
|
3547
|
-
|
|
3620
|
+
: nothing
|
|
3621
|
+
}
|
|
3548
3622
|
</div>
|
|
3549
3623
|
`,
|
|
3550
3624
|
)}
|
|
3551
3625
|
</div>
|
|
3552
3626
|
`
|
|
3553
|
-
|
|
3554
|
-
|
|
3555
|
-
|
|
3556
|
-
|
|
3557
|
-
|
|
3558
|
-
|
|
3559
|
-
`}
|
|
3627
|
+
: html`
|
|
3628
|
+
<div class="flex items-center justify-center py-4 text-xs text-gray-500">
|
|
3629
|
+
<span>No parameters defined</span>
|
|
3630
|
+
</div>
|
|
3631
|
+
`
|
|
3632
|
+
}
|
|
3560
3633
|
</div>
|
|
3561
3634
|
`
|
|
3562
|
-
|
|
3635
|
+
: nothing
|
|
3636
|
+
}
|
|
3563
3637
|
</div>
|
|
3564
3638
|
`;
|
|
3565
3639
|
}
|
|
@@ -3822,26 +3896,29 @@ ${prettyEvent}</pre
|
|
|
3822
3896
|
style="max-width: 180px;"
|
|
3823
3897
|
>${id}</span
|
|
3824
3898
|
>
|
|
3825
|
-
${
|
|
3826
|
-
|
|
3899
|
+
${
|
|
3900
|
+
hasValue
|
|
3901
|
+
? html`
|
|
3827
3902
|
<span class="text-gray-300">•</span>
|
|
3828
3903
|
<span class="truncate">${valuePreview}</span>
|
|
3829
3904
|
`
|
|
3830
|
-
|
|
3905
|
+
: nothing
|
|
3906
|
+
}
|
|
3831
3907
|
</div>
|
|
3832
3908
|
</div>
|
|
3833
3909
|
<span
|
|
3834
|
-
class="shrink-0 text-gray-400 transition ${
|
|
3835
|
-
? "rotate-180"
|
|
3836
|
-
|
|
3910
|
+
class="shrink-0 text-gray-400 transition ${
|
|
3911
|
+
isExpanded ? "rotate-180" : ""
|
|
3912
|
+
}"
|
|
3837
3913
|
>
|
|
3838
3914
|
${this.renderIcon("ChevronDown")}
|
|
3839
3915
|
</span>
|
|
3840
3916
|
</div>
|
|
3841
3917
|
</button>
|
|
3842
3918
|
|
|
3843
|
-
${
|
|
3844
|
-
|
|
3919
|
+
${
|
|
3920
|
+
isExpanded
|
|
3921
|
+
? html`
|
|
3845
3922
|
<div class="border-t border-gray-200 bg-gray-50/50 px-4 py-3">
|
|
3846
3923
|
<div class="mb-3">
|
|
3847
3924
|
<h5 class="mb-1 text-xs font-semibold text-gray-700">ID</h5>
|
|
@@ -3850,8 +3927,9 @@ ${prettyEvent}</pre
|
|
|
3850
3927
|
>${id}</code
|
|
3851
3928
|
>
|
|
3852
3929
|
</div>
|
|
3853
|
-
${
|
|
3854
|
-
|
|
3930
|
+
${
|
|
3931
|
+
hasValue
|
|
3932
|
+
? html`
|
|
3855
3933
|
<div class="mb-2 flex items-center justify-between gap-2">
|
|
3856
3934
|
<h5 class="text-xs font-semibold text-gray-700">
|
|
3857
3935
|
Value
|
|
@@ -3864,9 +3942,11 @@ ${prettyEvent}</pre
|
|
|
3864
3942
|
void this.copyContextValue(context.value, id);
|
|
3865
3943
|
}}
|
|
3866
3944
|
>
|
|
3867
|
-
${
|
|
3868
|
-
|
|
3869
|
-
|
|
3945
|
+
${
|
|
3946
|
+
this.copiedContextItems.has(id)
|
|
3947
|
+
? "Copied"
|
|
3948
|
+
: "Copy JSON"
|
|
3949
|
+
}
|
|
3870
3950
|
</button>
|
|
3871
3951
|
</div>
|
|
3872
3952
|
<div
|
|
@@ -3879,16 +3959,16 @@ ${prettyEvent}</pre
|
|
|
3879
3959
|
)}</code></pre>
|
|
3880
3960
|
</div>
|
|
3881
3961
|
`
|
|
3882
|
-
|
|
3883
|
-
|
|
3884
|
-
|
|
3885
|
-
|
|
3886
|
-
|
|
3887
|
-
|
|
3888
|
-
`}
|
|
3962
|
+
: html`
|
|
3963
|
+
<div class="flex items-center justify-center py-4 text-xs text-gray-500">
|
|
3964
|
+
<span>No value available</span>
|
|
3965
|
+
</div>
|
|
3966
|
+
`
|
|
3967
|
+
}
|
|
3889
3968
|
</div>
|
|
3890
3969
|
`
|
|
3891
|
-
|
|
3970
|
+
: nothing
|
|
3971
|
+
}
|
|
3892
3972
|
</div>
|
|
3893
3973
|
`;
|
|
3894
3974
|
}
|