@copilotkit/web-inspector 1.55.0-next.9 → 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/src/index.ts CHANGED
@@ -802,13 +802,15 @@ export class WebInspectorElement extends LitElement {
802
802
  <span>${functionName}</span>
803
803
  <span class="text-[10px] text-gray-500">ID: ${callId}</span>
804
804
  </div>
805
- ${argsString
806
- ? html`<pre
805
+ ${
806
+ argsString
807
+ ? html`<pre
807
808
  class="mt-2 overflow-auto rounded bg-white p-2 text-[11px] leading-relaxed text-gray-800"
808
809
  >
809
810
  ${argsString}</pre
810
811
  >`
811
- : nothing}
812
+ : nothing
813
+ }
812
814
  </div>
813
815
  `;
814
816
  })}
@@ -1294,9 +1296,9 @@ ${argsString}</pre
1294
1296
  type="button"
1295
1297
  aria-label="Web Inspector"
1296
1298
  data-drag-context="button"
1297
- data-dragging=${this.isDragging && this.pointerContext === "button"
1298
- ? "true"
1299
- : "false"}
1299
+ data-dragging=${
1300
+ this.isDragging && this.pointerContext === "button" ? "true" : "false"
1301
+ }
1300
1302
  @pointerdown=${this.handlePointerDown}
1301
1303
  @pointermove=${this.handlePointerMove}
1302
1304
  @pointerup=${this.handlePointerUp}
@@ -1351,8 +1353,9 @@ ${argsString}</pre
1351
1353
  data-docked=${isDocked}
1352
1354
  data-transitioning=${isTransitioning}
1353
1355
  >
1354
- ${isDocked
1355
- ? html`
1356
+ ${
1357
+ isDocked
1358
+ ? html`
1356
1359
  <div
1357
1360
  class="dock-resize-handle pointer-events-auto"
1358
1361
  role="presentation"
@@ -1363,16 +1366,19 @@ ${argsString}</pre
1363
1366
  @pointercancel=${this.handleResizePointerCancel}
1364
1367
  ></div>
1365
1368
  `
1366
- : nothing}
1369
+ : nothing
1370
+ }
1367
1371
  <div
1368
1372
  class="flex flex-1 flex-col overflow-hidden bg-white text-gray-800"
1369
1373
  >
1370
1374
  <div
1371
- class="drag-handle relative z-30 flex flex-col border-b border-gray-200 bg-white/95 backdrop-blur-sm ${isDocked
1372
- ? ""
1373
- : this.isDragging && this.pointerContext === "window"
1374
- ? "cursor-grabbing"
1375
- : "cursor-grab"}"
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
+ }"
1376
1382
  data-drag-context="window"
1377
1383
  @pointerdown=${isDocked ? undefined : this.handlePointerDown}
1378
1384
  @pointermove=${isDocked ? undefined : this.handlePointerMove}
@@ -2751,8 +2757,9 @@ ${argsString}</pre
2751
2757
  data-tooltip="Reset filters"
2752
2758
  aria-label="Reset filters"
2753
2759
  @click=${this.resetEventFilters}
2754
- ?disabled=${!this.eventFilterText &&
2755
- this.eventTypeFilter === "all"}
2760
+ ?disabled=${
2761
+ !this.eventFilterText && this.eventTypeFilter === "all"
2762
+ }
2756
2763
  >
2757
2764
  ${this.renderIcon("RotateCw")}
2758
2765
  </button>
@@ -2782,9 +2789,11 @@ ${argsString}</pre
2782
2789
  </div>
2783
2790
  <div class="text-[11px] text-gray-500">
2784
2791
  Showing ${filteredEvents.length} of
2785
- ${events.length}${this.selectedContext === "all-agents"
2786
- ? ""
2787
- : ` for ${selectedLabel}`}
2792
+ ${events.length}${
2793
+ this.selectedContext === "all-agents"
2794
+ ? ""
2795
+ : ` for ${selectedLabel}`
2796
+ }
2788
2797
  </div>
2789
2798
  </div>
2790
2799
  <div class="relative h-full w-full overflow-y-auto overflow-x-hidden">
@@ -2849,12 +2858,13 @@ ${argsString}</pre
2849
2858
  <span class=${badgeClasses}>${event.type}</span>
2850
2859
  </td>
2851
2860
  <td
2852
- class="border-r border-b border-gray-200 px-3 py-2 font-mono text-[10px] text-gray-600 ${isExpanded
2853
- ? ""
2854
- : "truncate max-w-xs"}"
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
+ }"
2855
2864
  >
2856
- ${isExpanded
2857
- ? html`
2865
+ ${
2866
+ isExpanded
2867
+ ? html`
2858
2868
  <div class="group relative">
2859
2869
  <pre
2860
2870
  class="m-0 whitespace-pre-wrap break-words text-[10px] font-mono text-gray-600"
@@ -2862,23 +2872,30 @@ ${argsString}</pre
2862
2872
  ${prettyEvent}</pre
2863
2873
  >
2864
2874
  <button
2865
- class="absolute right-0 top-0 cursor-pointer rounded px-2 py-1 text-[10px] opacity-0 transition group-hover:opacity-100 ${this.copiedEvents.has(
2866
- event.id,
2867
- )
2868
- ? "bg-green-100 text-green-700"
2869
- : "bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900"}"
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
+ }"
2870
2880
  @click=${(e: Event) => {
2871
2881
  e.stopPropagation();
2872
2882
  this.copyToClipboard(prettyEvent, event.id);
2873
2883
  }}
2874
2884
  >
2875
- ${this.copiedEvents.has(event.id)
2876
- ? html`<span>✓ Copied</span>`
2877
- : html`<span>Copy</span>`}
2885
+ ${
2886
+ this.copiedEvents.has(event.id)
2887
+ ? html`
2888
+ <span>✓ Copied</span>
2889
+ `
2890
+ : html`
2891
+ <span>Copy</span>
2892
+ `
2893
+ }
2878
2894
  </button>
2879
2895
  </div>
2880
2896
  `
2881
- : inlineEvent}
2897
+ : inlineEvent
2898
+ }
2882
2899
  </td>
2883
2900
  </tr>
2884
2901
  `;
@@ -2991,27 +3008,31 @@ ${prettyEvent}</pre
2991
3008
  <div>
2992
3009
  <h3 class="font-semibold text-sm text-gray-900">${agentId}</h3>
2993
3010
  <span
2994
- class="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium ${statusColors[
2995
- status
2996
- ]} relative -translate-y-[2px]"
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]"
2997
3014
  >
2998
3015
  <span
2999
- class="h-1.5 w-1.5 rounded-full ${status === "running"
3000
- ? "bg-emerald-500 animate-pulse"
3001
- : status === "error"
3002
- ? "bg-rose-500"
3003
- : "bg-gray-400"}"
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
+ }"
3004
3023
  ></span>
3005
3024
  ${status.charAt(0).toUpperCase() + status.slice(1)}
3006
3025
  </span>
3007
3026
  </div>
3008
3027
  </div>
3009
- ${stats.lastActivity
3010
- ? html`<span class="text-xs text-gray-500"
3028
+ ${
3029
+ stats.lastActivity
3030
+ ? html`<span class="text-xs text-gray-500"
3011
3031
  >Last activity:
3012
3032
  ${new Date(stats.lastActivity).toLocaleTimeString()}</span
3013
3033
  >`
3014
- : nothing}
3034
+ : nothing
3035
+ }
3015
3036
  </div>
3016
3037
  <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
3017
3038
  <button
@@ -3060,13 +3081,14 @@ ${prettyEvent}</pre
3060
3081
  <h4 class="text-sm font-semibold text-gray-900">Current State</h4>
3061
3082
  </div>
3062
3083
  <div class="overflow-auto p-4">
3063
- ${this.hasRenderableState(state)
3064
- ? html`
3084
+ ${
3085
+ this.hasRenderableState(state)
3086
+ ? html`
3065
3087
  <pre
3066
3088
  class="overflow-auto rounded-md bg-gray-50 p-3 text-xs text-gray-800 max-h-64"
3067
3089
  ><code>${this.formatStateForDisplay(state)}</code></pre>
3068
3090
  `
3069
- : html`
3091
+ : html`
3070
3092
  <div
3071
3093
  class="flex h-40 items-center justify-center text-xs text-gray-500"
3072
3094
  >
@@ -3077,7 +3099,8 @@ ${prettyEvent}</pre
3077
3099
  <span>State is empty</span>
3078
3100
  </div>
3079
3101
  </div>
3080
- `}
3102
+ `
3103
+ }
3081
3104
  </div>
3082
3105
  </div>
3083
3106
 
@@ -3089,8 +3112,9 @@ ${prettyEvent}</pre
3089
3112
  </h4>
3090
3113
  </div>
3091
3114
  <div class="overflow-auto">
3092
- ${messages && messages.length > 0
3093
- ? html`
3115
+ ${
3116
+ messages && messages.length > 0
3117
+ ? html`
3094
3118
  <table class="w-full text-xs">
3095
3119
  <thead class="bg-gray-50">
3096
3120
  <tr>
@@ -3127,28 +3151,32 @@ ${prettyEvent}</pre
3127
3151
  <tr>
3128
3152
  <td class="px-4 py-2 align-top">
3129
3153
  <span
3130
- class="inline-flex rounded px-2 py-0.5 text-[10px] font-medium ${roleColors[
3131
- role
3132
- ] || roleColors.unknown}"
3154
+ class="inline-flex rounded px-2 py-0.5 text-[10px] font-medium ${
3155
+ roleColors[role] || roleColors.unknown
3156
+ }"
3133
3157
  >
3134
3158
  ${role}
3135
3159
  </span>
3136
3160
  </td>
3137
3161
  <td class="px-4 py-2">
3138
- ${hasContent
3139
- ? html`<div
3162
+ ${
3163
+ hasContent
3164
+ ? html`<div
3140
3165
  class="max-w-2xl whitespace-pre-wrap break-words text-gray-700"
3141
3166
  >
3142
3167
  ${rawContent}
3143
3168
  </div>`
3144
- : html`<div
3169
+ : html`<div
3145
3170
  class="text-xs italic text-gray-400"
3146
3171
  >
3147
3172
  ${contentFallback}
3148
- </div>`}
3149
- ${role === "assistant" && toolCalls.length > 0
3150
- ? this.renderToolCallDetails(toolCalls)
3151
- : nothing}
3173
+ </div>`
3174
+ }
3175
+ ${
3176
+ role === "assistant" && toolCalls.length > 0
3177
+ ? this.renderToolCallDetails(toolCalls)
3178
+ : nothing
3179
+ }
3152
3180
  </td>
3153
3181
  </tr>
3154
3182
  `;
@@ -3156,7 +3184,7 @@ ${prettyEvent}</pre
3156
3184
  </tbody>
3157
3185
  </table>
3158
3186
  `
3159
- : html`
3187
+ : html`
3160
3188
  <div
3161
3189
  class="flex h-40 items-center justify-center text-xs text-gray-500"
3162
3190
  >
@@ -3167,7 +3195,8 @@ ${prettyEvent}</pre
3167
3195
  <span>No messages available</span>
3168
3196
  </div>
3169
3197
  </div>
3170
- `}
3198
+ `
3199
+ }
3171
3200
  </div>
3172
3201
  </div>
3173
3202
  </div>
@@ -3200,8 +3229,9 @@ ${prettyEvent}</pre
3200
3229
  >${this.renderIcon("ChevronDown")}</span
3201
3230
  >
3202
3231
  </button>
3203
- ${this.contextMenuOpen
3204
- ? html`
3232
+ ${
3233
+ this.contextMenuOpen
3234
+ ? html`
3205
3235
  <div
3206
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"
3207
3237
  data-context-dropdown-root="true"
@@ -3215,22 +3245,27 @@ ${prettyEvent}</pre
3215
3245
  @click=${() => this.handleContextOptionSelect(option.key)}
3216
3246
  >
3217
3247
  <span
3218
- class="truncate ${option.key === this.selectedContext
3219
- ? "text-gray-900 font-medium"
3220
- : "text-gray-600"}"
3248
+ class="truncate ${
3249
+ option.key === this.selectedContext
3250
+ ? "text-gray-900 font-medium"
3251
+ : "text-gray-600"
3252
+ }"
3221
3253
  >${option.label}</span
3222
3254
  >
3223
- ${option.key === this.selectedContext
3224
- ? html`<span class="text-gray-500"
3255
+ ${
3256
+ option.key === this.selectedContext
3257
+ ? html`<span class="text-gray-500"
3225
3258
  >${this.renderIcon("Check")}</span
3226
3259
  >`
3227
- : nothing}
3260
+ : nothing
3261
+ }
3228
3262
  </button>
3229
3263
  `,
3230
3264
  )}
3231
3265
  </div>
3232
3266
  `
3233
- : nothing}
3267
+ : nothing
3268
+ }
3234
3269
  </div>
3235
3270
  `;
3236
3271
  }
@@ -3446,9 +3481,9 @@ ${prettyEvent}</pre
3446
3481
  >${tool.name}</span
3447
3482
  >
3448
3483
  <span
3449
- class="inline-flex items-center rounded-sm border px-1.5 py-0.5 text-[10px] font-medium ${typeColors[
3450
- tool.type
3451
- ]}"
3484
+ class="inline-flex items-center rounded-sm border px-1.5 py-0.5 text-[10px] font-medium ${
3485
+ typeColors[tool.type]
3486
+ }"
3452
3487
  >
3453
3488
  ${tool.type}
3454
3489
  </span>
@@ -3458,39 +3493,45 @@ ${prettyEvent}</pre
3458
3493
  ${this.renderIcon("Bot")}
3459
3494
  <span class="font-mono">${tool.agentId}</span>
3460
3495
  </span>
3461
- ${schema.properties.length > 0
3462
- ? html`
3496
+ ${
3497
+ schema.properties.length > 0
3498
+ ? html`
3463
3499
  <span class="text-gray-300">•</span>
3464
3500
  <span
3465
3501
  >${schema.properties.length}
3466
- parameter${schema.properties.length !== 1
3467
- ? "s"
3468
- : ""}</span
3502
+ parameter${
3503
+ schema.properties.length !== 1 ? "s" : ""
3504
+ }</span
3469
3505
  >
3470
3506
  `
3471
- : nothing}
3507
+ : nothing
3508
+ }
3472
3509
  </div>
3473
- ${tool.description
3474
- ? html`<p class="mt-2 text-xs text-gray-600">
3510
+ ${
3511
+ tool.description
3512
+ ? html`<p class="mt-2 text-xs text-gray-600">
3475
3513
  ${tool.description}
3476
3514
  </p>`
3477
- : nothing}
3515
+ : nothing
3516
+ }
3478
3517
  </div>
3479
3518
  <span
3480
- class="shrink-0 text-gray-400 transition ${isExpanded
3481
- ? "rotate-180"
3482
- : ""}"
3519
+ class="shrink-0 text-gray-400 transition ${
3520
+ isExpanded ? "rotate-180" : ""
3521
+ }"
3483
3522
  >
3484
3523
  ${this.renderIcon("ChevronDown")}
3485
3524
  </span>
3486
3525
  </div>
3487
3526
  </button>
3488
3527
 
3489
- ${isExpanded
3490
- ? html`
3528
+ ${
3529
+ isExpanded
3530
+ ? html`
3491
3531
  <div class="border-t border-gray-200 bg-gray-50/50 px-4 py-3">
3492
- ${schema.properties.length > 0
3493
- ? html`
3532
+ ${
3533
+ schema.properties.length > 0
3534
+ ? html`
3494
3535
  <h5 class="mb-3 text-xs font-semibold text-gray-700">
3495
3536
  Parameters
3496
3537
  </h5>
@@ -3508,30 +3549,41 @@ ${prettyEvent}</pre
3508
3549
  >${prop.name}</span
3509
3550
  >
3510
3551
  <div class="flex items-center gap-1.5 shrink-0">
3511
- ${prop.required
3512
- ? html`<span
3513
- class="text-[9px] rounded border border-rose-200 bg-rose-50 px-1 py-0.5 font-medium text-rose-700"
3514
- >required</span
3515
- >`
3516
- : html`<span
3517
- class="text-[9px] rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-medium text-gray-600"
3518
- >optional</span
3519
- >`}
3520
- ${prop.type
3521
- ? html`<span
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
3522
3570
  class="text-[9px] rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-mono text-gray-600"
3523
3571
  >${prop.type}</span
3524
3572
  >`
3525
- : nothing}
3573
+ : nothing
3574
+ }
3526
3575
  </div>
3527
3576
  </div>
3528
- ${prop.description
3529
- ? html`<p class="mt-1 text-xs text-gray-600">
3577
+ ${
3578
+ prop.description
3579
+ ? html`<p class="mt-1 text-xs text-gray-600">
3530
3580
  ${prop.description}
3531
3581
  </p>`
3532
- : nothing}
3533
- ${prop.defaultValue !== undefined
3534
- ? html`
3582
+ : nothing
3583
+ }
3584
+ ${
3585
+ prop.defaultValue !== undefined
3586
+ ? html`
3535
3587
  <div
3536
3588
  class="mt-2 flex items-center gap-1.5 text-[10px] text-gray-500"
3537
3589
  >
@@ -3544,9 +3596,11 @@ ${prettyEvent}</pre
3544
3596
  >
3545
3597
  </div>
3546
3598
  `
3547
- : nothing}
3548
- ${prop.enum && prop.enum.length > 0
3549
- ? html`
3599
+ : nothing
3600
+ }
3601
+ ${
3602
+ prop.enum && prop.enum.length > 0
3603
+ ? html`
3550
3604
  <div class="mt-2">
3551
3605
  <span class="text-[10px] text-gray-500"
3552
3606
  >Allowed values:</span
@@ -3563,22 +3617,23 @@ ${prettyEvent}</pre
3563
3617
  </div>
3564
3618
  </div>
3565
3619
  `
3566
- : nothing}
3620
+ : nothing
3621
+ }
3567
3622
  </div>
3568
3623
  `,
3569
3624
  )}
3570
3625
  </div>
3571
3626
  `
3572
- : html`
3573
- <div
3574
- class="flex items-center justify-center py-4 text-xs text-gray-500"
3575
- >
3576
- <span>No parameters defined</span>
3577
- </div>
3578
- `}
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
+ }
3579
3633
  </div>
3580
3634
  `
3581
- : nothing}
3635
+ : nothing
3636
+ }
3582
3637
  </div>
3583
3638
  `;
3584
3639
  }
@@ -3841,26 +3896,29 @@ ${prettyEvent}</pre
3841
3896
  style="max-width: 180px;"
3842
3897
  >${id}</span
3843
3898
  >
3844
- ${hasValue
3845
- ? html`
3899
+ ${
3900
+ hasValue
3901
+ ? html`
3846
3902
  <span class="text-gray-300">•</span>
3847
3903
  <span class="truncate">${valuePreview}</span>
3848
3904
  `
3849
- : nothing}
3905
+ : nothing
3906
+ }
3850
3907
  </div>
3851
3908
  </div>
3852
3909
  <span
3853
- class="shrink-0 text-gray-400 transition ${isExpanded
3854
- ? "rotate-180"
3855
- : ""}"
3910
+ class="shrink-0 text-gray-400 transition ${
3911
+ isExpanded ? "rotate-180" : ""
3912
+ }"
3856
3913
  >
3857
3914
  ${this.renderIcon("ChevronDown")}
3858
3915
  </span>
3859
3916
  </div>
3860
3917
  </button>
3861
3918
 
3862
- ${isExpanded
3863
- ? html`
3919
+ ${
3920
+ isExpanded
3921
+ ? html`
3864
3922
  <div class="border-t border-gray-200 bg-gray-50/50 px-4 py-3">
3865
3923
  <div class="mb-3">
3866
3924
  <h5 class="mb-1 text-xs font-semibold text-gray-700">ID</h5>
@@ -3869,8 +3927,9 @@ ${prettyEvent}</pre
3869
3927
  >${id}</code
3870
3928
  >
3871
3929
  </div>
3872
- ${hasValue
3873
- ? html`
3930
+ ${
3931
+ hasValue
3932
+ ? html`
3874
3933
  <div class="mb-2 flex items-center justify-between gap-2">
3875
3934
  <h5 class="text-xs font-semibold text-gray-700">
3876
3935
  Value
@@ -3883,9 +3942,11 @@ ${prettyEvent}</pre
3883
3942
  void this.copyContextValue(context.value, id);
3884
3943
  }}
3885
3944
  >
3886
- ${this.copiedContextItems.has(id)
3887
- ? "Copied"
3888
- : "Copy JSON"}
3945
+ ${
3946
+ this.copiedContextItems.has(id)
3947
+ ? "Copied"
3948
+ : "Copy JSON"
3949
+ }
3889
3950
  </button>
3890
3951
  </div>
3891
3952
  <div
@@ -3898,16 +3959,16 @@ ${prettyEvent}</pre
3898
3959
  )}</code></pre>
3899
3960
  </div>
3900
3961
  `
3901
- : html`
3902
- <div
3903
- class="flex items-center justify-center py-4 text-xs text-gray-500"
3904
- >
3905
- <span>No value available</span>
3906
- </div>
3907
- `}
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
+ }
3908
3968
  </div>
3909
3969
  `
3910
- : nothing}
3970
+ : nothing
3971
+ }
3911
3972
  </div>
3912
3973
  `;
3913
3974
  }
package/eslint.config.mjs DELETED
@@ -1,3 +0,0 @@
1
- import { config as baseConfig } from "@copilotkit/eslint-config/base";
2
-
3
- export default [...baseConfig];