@copilotkit/web-inspector 1.56.5 → 1.57.0-canary.1778078321
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/dist/index.cjs +2756 -199
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +264 -10
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.mts +264 -10
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +2757 -201
- package/dist/index.mjs.map +1 -1
- package/dist/index.umd.js +2794 -211
- package/dist/index.umd.js.map +1 -1
- package/dist/styles/generated.cjs +1 -1
- package/dist/styles/generated.cjs.map +1 -1
- package/dist/styles/generated.mjs +1 -1
- package/dist/styles/generated.mjs.map +1 -1
- package/package.json +2 -2
- package/src/__tests__/web-inspector.spec.ts +179 -1
- package/src/index.ts +3456 -300
- package/src/styles/generated.css +1 -1
package/dist/index.umd.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
(function(global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lit'), require('lit/directives/style-map.js'), require('lit/directives/unsafe-html.js'), require('
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', 'lit', 'lit/directives/style-map.js', 'lit/directives/unsafe-html.js', '
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitWebInspector = {}), global.Lit,global.
|
|
5
|
-
})(this, function(exports, lit, lit_directives_style_map_js, lit_directives_unsafe_html_js,
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lit'), require('marked'), require('lit/directives/style-map.js'), require('lit/directives/unsafe-html.js'), require('lucide'), require('@copilotkit/core')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', 'lit', 'marked', 'lit/directives/style-map.js', 'lit/directives/unsafe-html.js', 'lucide', '@copilotkit/core'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitWebInspector = {}), global.Lit,global.marked,global.LitDirectivesStyleMap,global.LitDirectivesUnsafeHtml,global.lucide,global.CopilotKitCore));
|
|
5
|
+
})(this, function(exports, lit, marked, lit_directives_style_map_js, lit_directives_unsafe_html_js, lucide, _copilotkit_core) {
|
|
6
6
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
7
7
|
|
|
8
8
|
//#region src/styles/generated.css
|
|
9
|
-
var generated_default = "/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--color-amber-50:oklch(98.7% .022 95.277);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-700:oklch(55.5% .163 48.998);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-900:oklch(41.4% .112 45.904);--color-green-100:oklch(96.2% .044 156.743);--color-green-700:oklch(52.7% .154 150.069);--color-green-800:oklch(44.8% .119 151.328);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-700:oklch(50.8% .118 165.612);--color-sky-50:oklch(97.7% .013 236.62);--color-sky-200:oklch(90.1% .058 230.902);--color-sky-700:oklch(50% .134 242.749);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-violet-50:oklch(96.9% .016 293.756);--color-violet-200:oklch(89.4% .057 293.283);--color-violet-700:oklch(49.1% .27 292.581);--color-purple-50:oklch(97.7% .014 308.299);--color-purple-200:oklch(90.2% .063 306.703);--color-purple-700:oklch(49.6% .265 301.924);--color-fuchsia-50:oklch(97.7% .017 320.058);--color-fuchsia-200:oklch(90.3% .076 319.62);--color-fuchsia-700:oklch(51.8% .253 323.949);--color-rose-50:oklch(96.9% .015 12.422);--color-rose-200:oklch(89.2% .058 10.001);--color-rose-500:oklch(64.5% .246 16.439);--color-rose-600:oklch(58.6% .253 17.585);--color-rose-700:oklch(51.4% .222 16.935);--color-rose-800:oklch(45.5% .188 13.697);--color-rose-900:oklch(41% .159 10.272);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-slate-950:oklch(12.9% .042 264.695);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-md:28rem;--container-2xl:42rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-medium:500;--font-weight-semibold:600;--leading-snug:1.375;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--blur-sm:8px;--blur-md:12px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:host{font-family:var(--font-sans);color:var(--color-slate-900);background-color:#0000;display:block}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-0{top:calc(var(--spacing)*0)}.right-0{right:calc(var(--spacing)*0)}.right-1{right:calc(var(--spacing)*1)}.bottom-1{bottom:calc(var(--spacing)*1)}.left-0{left:calc(var(--spacing)*0)}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:calc(var(--spacing)*0)}.mx-4{margin-inline:calc(var(--spacing)*4)}.my-1{margin-block:calc(var(--spacing)*1)}.my-3{margin-block:calc(var(--spacing)*3)}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-1\\.5{margin-top:calc(var(--spacing)*1.5)}.mt-2{margin-top:calc(var(--spacing)*2)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.ml-auto{margin-left:auto}.box-border{box-sizing:border-box}.block{display:block}.flex{display:flex}.grid{display:grid}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-1\\.5{height:calc(var(--spacing)*1.5)}.h-3{height:calc(var(--spacing)*3)}.h-3\\.5{height:calc(var(--spacing)*3.5)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-7{height:calc(var(--spacing)*7)}.h-8{height:calc(var(--spacing)*8)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-40{height:calc(var(--spacing)*40)}.h-full{height:100%}.max-h-64{max-height:calc(var(--spacing)*64)}.max-h-96{max-height:calc(var(--spacing)*96)}.w-1\\.5{width:calc(var(--spacing)*1.5)}.w-3{width:calc(var(--spacing)*3)}.w-3\\.5{width:calc(var(--spacing)*3.5)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-7{width:calc(var(--spacing)*7)}.w-8{width:calc(var(--spacing)*8)}.w-10{width:calc(var(--spacing)*10)}.w-12{width:calc(var(--spacing)*12)}.w-40{width:calc(var(--spacing)*40)}.w-auto{width:auto}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-\\[240px\\]{max-width:240px}.max-w-md{max-width:var(--container-md)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\\[160px\\]{min-width:160px}.min-w-\\[200px\\]{min-width:200px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.table-fixed{table-layout:fixed}.border-collapse{border-collapse:collapse}.-translate-y-\\[2px\\]{--tw-translate-y:calc(2px*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.cursor-grab{cursor:grab}.cursor-grabbing{cursor:grabbing}.cursor-nwse-resize{cursor:nwse-resize}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-gray-200>:not(:last-child)){border-color:var(--color-gray-200)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-amber-200{border-color:var(--color-amber-200)}.border-blue-200{border-color:var(--color-blue-200)}.border-emerald-200{border-color:var(--color-emerald-200)}.border-fuchsia-200{border-color:var(--color-fuchsia-200)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-purple-200{border-color:var(--color-purple-200)}.border-rose-200{border-color:var(--color-rose-200)}.border-sky-200{border-color:var(--color-sky-200)}.border-slate-200{border-color:var(--color-slate-200)}.border-violet-200{border-color:var(--color-violet-200)}.border-white\\/20{border-color:#fff3}@supports (color:color-mix(in lab, red, red)){.border-white\\/20{border-color:color-mix(in oklab,var(--color-white)20%,transparent)}}.bg-amber-50{background-color:var(--color-amber-50)}.bg-amber-100{background-color:var(--color-amber-100)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-emerald-50{background-color:var(--color-emerald-50)}.bg-emerald-500{background-color:var(--color-emerald-500)}.bg-fuchsia-50{background-color:var(--color-fuchsia-50)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-50\\/50{background-color:#f9fafb80}@supports (color:color-mix(in lab, red, red)){.bg-gray-50\\/50{background-color:color-mix(in oklab,var(--color-gray-50)50%,transparent)}}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-400{background-color:var(--color-gray-400)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-100{background-color:var(--color-green-100)}.bg-purple-50{background-color:var(--color-purple-50)}.bg-rose-50{background-color:var(--color-rose-50)}.bg-rose-500{background-color:var(--color-rose-500)}.bg-rose-600{background-color:var(--color-rose-600)}.bg-sky-50{background-color:var(--color-sky-50)}.bg-slate-900{background-color:var(--color-slate-900)}.bg-slate-950\\/95{background-color:#020618f2}@supports (color:color-mix(in lab, red, red)){.bg-slate-950\\/95{background-color:color-mix(in oklab,var(--color-slate-950)95%,transparent)}}.bg-violet-50{background-color:var(--color-violet-50)}.bg-white{background-color:var(--color-white)}.bg-white\\/60{background-color:#fff9}@supports (color:color-mix(in lab, red, red)){.bg-white\\/60{background-color:color-mix(in oklab,var(--color-white)60%,transparent)}}.bg-white\\/95{background-color:#fffffff2}@supports (color:color-mix(in lab, red, red)){.bg-white\\/95{background-color:color-mix(in oklab,var(--color-white)95%,transparent)}}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-1\\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-0\\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-8{padding-block:calc(var(--spacing)*8)}.text-center{text-align:center}.text-left{text-align:left}.align-middle{vertical-align:middle}.align-top{vertical-align:top}.font-mono{font-family:var(--font-mono)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[9px\\]{font-size:9px}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-amber-600{color:var(--color-amber-600)}.text-amber-700{color:var(--color-amber-700)}.text-amber-800{color:var(--color-amber-800)}.text-amber-900{color:var(--color-amber-900)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-emerald-700{color:var(--color-emerald-700)}.text-fuchsia-700{color:var(--color-fuchsia-700)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-green-700{color:var(--color-green-700)}.text-green-800{color:var(--color-green-800)}.text-purple-700{color:var(--color-purple-700)}.text-rose-700{color:var(--color-rose-700)}.text-rose-800{color:var(--color-rose-800)}.text-rose-900{color:var(--color-rose-900)}.text-sky-700{color:var(--color-sky-700)}.text-slate-800{color:var(--color-slate-800)}.text-slate-900{color:var(--color-slate-900)}.text-violet-700{color:var(--color-violet-700)}.text-white{color:var(--color-white)}.italic{font-style:italic}.opacity-0{opacity:0}.opacity-80{opacity:.8}.shadow-\\[0_12px_30px_rgba\\(15\\,23\\,42\\,0\\.12\\)\\]{--tw-shadow:0 12px 30px var(--tw-shadow-color,#0f172a1f);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-black\\/5{--tw-ring-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.ring-black\\/5{--tw-ring-color:color-mix(in oklab,var(--color-black)5%,transparent)}}.ring-transparent{--tw-ring-color:transparent}.ring-white\\/10{--tw-ring-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.ring-white\\/10{--tw-ring-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\\:opacity-100:is(:where(.group):hover *){opacity:1}.hover\\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\\:border-gray-300:hover{border-color:var(--color-gray-300)}.hover\\:border-white\\/30:hover{border-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.hover\\:border-white\\/30:hover{border-color:color-mix(in oklab,var(--color-white)30%,transparent)}}.hover\\:bg-blue-50\\/50:hover{background-color:#eff6ff80}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-blue-50\\/50:hover{background-color:color-mix(in oklab,var(--color-blue-50)50%,transparent)}}.hover\\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\\:bg-gray-800:hover{background-color:var(--color-gray-800)}.hover\\:bg-slate-900\\/95:hover{background-color:#0f172bf2}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-slate-900\\/95:hover{background-color:color-mix(in oklab,var(--color-slate-900)95%,transparent)}}.hover\\:text-gray-600:hover{color:var(--color-gray-600)}.hover\\:text-gray-900:hover{color:var(--color-gray-900)}}.focus\\:border-gray-300:focus{border-color:var(--color-gray-300)}.focus\\:bg-gray-50:focus{background-color:var(--color-gray-50)}.focus\\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\\:ring-gray-200:focus{--tw-ring-color:var(--color-gray-200)}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\\:outline-gray-300:focus-visible{outline-color:var(--color-gray-300)}.focus-visible\\:outline-gray-400:focus-visible{outline-color:var(--color-gray-400)}.focus-visible\\:outline-rose-500:focus-visible{outline-color:var(--color-rose-500)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}@media (min-width:48rem){.md\\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.\\[\\&\\>svg\\]\\:\\!h-8>svg{height:calc(var(--spacing)*8)!important}.\\[\\&\\>svg\\]\\:\\!w-8>svg{width:calc(var(--spacing)*8)!important}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-space-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-backdrop-blur{syntax:\"*\";inherits:false}@property --tw-backdrop-brightness{syntax:\"*\";inherits:false}@property --tw-backdrop-contrast{syntax:\"*\";inherits:false}@property --tw-backdrop-grayscale{syntax:\"*\";inherits:false}@property --tw-backdrop-hue-rotate{syntax:\"*\";inherits:false}@property --tw-backdrop-invert{syntax:\"*\";inherits:false}@property --tw-backdrop-opacity{syntax:\"*\";inherits:false}@property --tw-backdrop-saturate{syntax:\"*\";inherits:false}@property --tw-backdrop-sepia{syntax:\"*\";inherits:false}@property --tw-scale-x{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-y{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-z{syntax:\"*\";inherits:false;initial-value:1}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@keyframes pulse{50%{opacity:.5}}";
|
|
9
|
+
var generated_default = "/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--color-amber-50:oklch(98.7% .022 95.277);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-700:oklch(55.5% .163 48.998);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-900:oklch(41.4% .112 45.904);--color-green-100:oklch(96.2% .044 156.743);--color-green-700:oklch(52.7% .154 150.069);--color-green-800:oklch(44.8% .119 151.328);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-700:oklch(50.8% .118 165.612);--color-sky-50:oklch(97.7% .013 236.62);--color-sky-200:oklch(90.1% .058 230.902);--color-sky-700:oklch(50% .134 242.749);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-violet-50:oklch(96.9% .016 293.756);--color-violet-200:oklch(89.4% .057 293.283);--color-violet-700:oklch(49.1% .27 292.581);--color-purple-50:oklch(97.7% .014 308.299);--color-purple-200:oklch(90.2% .063 306.703);--color-purple-700:oklch(49.6% .265 301.924);--color-fuchsia-50:oklch(97.7% .017 320.058);--color-fuchsia-200:oklch(90.3% .076 319.62);--color-fuchsia-700:oklch(51.8% .253 323.949);--color-rose-50:oklch(96.9% .015 12.422);--color-rose-200:oklch(89.2% .058 10.001);--color-rose-500:oklch(64.5% .246 16.439);--color-rose-700:oklch(51.4% .222 16.935);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-slate-950:oklch(12.9% .042 264.695);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-md:28rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-medium:500;--font-weight-semibold:600;--leading-snug:1.375;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--blur-sm:8px;--blur-md:12px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:host{font-family:var(--font-sans);color:var(--color-slate-900);background-color:#0000;display:block}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-0{top:calc(var(--spacing)*0)}.right-0{right:calc(var(--spacing)*0)}.right-1{right:calc(var(--spacing)*1)}.bottom-1{bottom:calc(var(--spacing)*1)}.left-0{left:calc(var(--spacing)*0)}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:calc(var(--spacing)*0)}.mx-4{margin-inline:calc(var(--spacing)*4)}.my-1{margin-block:calc(var(--spacing)*1)}.my-3{margin-block:calc(var(--spacing)*3)}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-1\\.5{margin-top:calc(var(--spacing)*1.5)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.ml-auto{margin-left:auto}.box-border{box-sizing:border-box}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-1\\.5{height:calc(var(--spacing)*1.5)}.h-3{height:calc(var(--spacing)*3)}.h-3\\.5{height:calc(var(--spacing)*3.5)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-full{height:100%}.max-h-64{max-height:calc(var(--spacing)*64)}.w-1\\.5{width:calc(var(--spacing)*1.5)}.w-3{width:calc(var(--spacing)*3)}.w-3\\.5{width:calc(var(--spacing)*3.5)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-10{width:calc(var(--spacing)*10)}.w-12{width:calc(var(--spacing)*12)}.w-40{width:calc(var(--spacing)*40)}.w-auto{width:auto}.w-full{width:100%}.max-w-\\[240px\\]{max-width:240px}.max-w-md{max-width:var(--container-md)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\\[160px\\]{min-width:160px}.min-w-\\[200px\\]{min-width:200px}.flex-1{flex:1}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.table-fixed{table-layout:fixed}.border-collapse{border-collapse:collapse}.-translate-y-\\[2px\\]{--tw-translate-y:calc(2px*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.cursor-grab{cursor:grab}.cursor-grabbing{cursor:grabbing}.cursor-nwse-resize{cursor:nwse-resize}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-gray-200>:not(:last-child)){border-color:var(--color-gray-200)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-amber-200{border-color:var(--color-amber-200)}.border-blue-200{border-color:var(--color-blue-200)}.border-emerald-200{border-color:var(--color-emerald-200)}.border-fuchsia-200{border-color:var(--color-fuchsia-200)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-purple-200{border-color:var(--color-purple-200)}.border-rose-200{border-color:var(--color-rose-200)}.border-sky-200{border-color:var(--color-sky-200)}.border-slate-200{border-color:var(--color-slate-200)}.border-violet-200{border-color:var(--color-violet-200)}.border-white\\/20{border-color:#fff3}@supports (color:color-mix(in lab, red, red)){.border-white\\/20{border-color:color-mix(in oklab,var(--color-white)20%,transparent)}}.bg-amber-50{background-color:var(--color-amber-50)}.bg-amber-100{background-color:var(--color-amber-100)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-emerald-50{background-color:var(--color-emerald-50)}.bg-emerald-500{background-color:var(--color-emerald-500)}.bg-fuchsia-50{background-color:var(--color-fuchsia-50)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-50\\/50{background-color:#f9fafb80}@supports (color:color-mix(in lab, red, red)){.bg-gray-50\\/50{background-color:color-mix(in oklab,var(--color-gray-50)50%,transparent)}}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-400{background-color:var(--color-gray-400)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-100{background-color:var(--color-green-100)}.bg-purple-50{background-color:var(--color-purple-50)}.bg-rose-50{background-color:var(--color-rose-50)}.bg-rose-500{background-color:var(--color-rose-500)}.bg-sky-50{background-color:var(--color-sky-50)}.bg-slate-900{background-color:var(--color-slate-900)}.bg-slate-950\\/95{background-color:#020618f2}@supports (color:color-mix(in lab, red, red)){.bg-slate-950\\/95{background-color:color-mix(in oklab,var(--color-slate-950)95%,transparent)}}.bg-violet-50{background-color:var(--color-violet-50)}.bg-white{background-color:var(--color-white)}.bg-white\\/60{background-color:#fff9}@supports (color:color-mix(in lab, red, red)){.bg-white\\/60{background-color:color-mix(in oklab,var(--color-white)60%,transparent)}}.bg-white\\/95{background-color:#fffffff2}@supports (color:color-mix(in lab, red, red)){.bg-white\\/95{background-color:color-mix(in oklab,var(--color-white)95%,transparent)}}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-1\\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-0\\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-8{padding-block:calc(var(--spacing)*8)}.py-10{padding-block:calc(var(--spacing)*10)}.text-center{text-align:center}.text-left{text-align:left}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-mono)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[9px\\]{font-size:9px}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.whitespace-pre-wrap{white-space:pre-wrap}.text-amber-600{color:var(--color-amber-600)}.text-amber-700{color:var(--color-amber-700)}.text-amber-800{color:var(--color-amber-800)}.text-amber-900{color:var(--color-amber-900)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-emerald-700{color:var(--color-emerald-700)}.text-fuchsia-700{color:var(--color-fuchsia-700)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-green-700{color:var(--color-green-700)}.text-green-800{color:var(--color-green-800)}.text-purple-700{color:var(--color-purple-700)}.text-rose-700{color:var(--color-rose-700)}.text-sky-700{color:var(--color-sky-700)}.text-slate-800{color:var(--color-slate-800)}.text-slate-900{color:var(--color-slate-900)}.text-violet-700{color:var(--color-violet-700)}.text-white{color:var(--color-white)}.italic{font-style:italic}.opacity-0{opacity:0}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-black\\/5{--tw-ring-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.ring-black\\/5{--tw-ring-color:color-mix(in oklab,var(--color-black)5%,transparent)}}.ring-transparent{--tw-ring-color:transparent}.ring-white\\/10{--tw-ring-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.ring-white\\/10{--tw-ring-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\\:opacity-100:is(:where(.group):hover *){opacity:1}.hover\\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\\:border-gray-300:hover{border-color:var(--color-gray-300)}.hover\\:border-white\\/30:hover{border-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.hover\\:border-white\\/30:hover{border-color:color-mix(in oklab,var(--color-white)30%,transparent)}}.hover\\:bg-blue-50\\/50:hover{background-color:#eff6ff80}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-blue-50\\/50:hover{background-color:color-mix(in oklab,var(--color-blue-50)50%,transparent)}}.hover\\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\\:bg-gray-800:hover{background-color:var(--color-gray-800)}.hover\\:bg-slate-900\\/95:hover{background-color:#0f172bf2}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-slate-900\\/95:hover{background-color:color-mix(in oklab,var(--color-slate-900)95%,transparent)}}.hover\\:text-gray-600:hover{color:var(--color-gray-600)}.hover\\:text-gray-900:hover{color:var(--color-gray-900)}}.focus\\:border-gray-300:focus{border-color:var(--color-gray-300)}.focus\\:bg-gray-50:focus{background-color:var(--color-gray-50)}.focus\\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\\:ring-gray-200:focus{--tw-ring-color:var(--color-gray-200)}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\\:outline-\\[\\#BEC2FF\\]:focus-visible{outline-color:#bec2ff}.focus-visible\\:outline-gray-300:focus-visible{outline-color:var(--color-gray-300)}.focus-visible\\:outline-gray-400:focus-visible{outline-color:var(--color-gray-400)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}@media (min-width:48rem){.md\\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.\\[\\&\\>svg\\]\\:\\!h-8>svg{height:calc(var(--spacing)*8)!important}.\\[\\&\\>svg\\]\\:\\!w-8>svg{width:calc(var(--spacing)*8)!important}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-space-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-blur{syntax:\"*\";inherits:false}@property --tw-brightness{syntax:\"*\";inherits:false}@property --tw-contrast{syntax:\"*\";inherits:false}@property --tw-grayscale{syntax:\"*\";inherits:false}@property --tw-hue-rotate{syntax:\"*\";inherits:false}@property --tw-invert{syntax:\"*\";inherits:false}@property --tw-opacity{syntax:\"*\";inherits:false}@property --tw-saturate{syntax:\"*\";inherits:false}@property --tw-sepia{syntax:\"*\";inherits:false}@property --tw-drop-shadow{syntax:\"*\";inherits:false}@property --tw-drop-shadow-color{syntax:\"*\";inherits:false}@property --tw-drop-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:\"*\";inherits:false}@property --tw-backdrop-blur{syntax:\"*\";inherits:false}@property --tw-backdrop-brightness{syntax:\"*\";inherits:false}@property --tw-backdrop-contrast{syntax:\"*\";inherits:false}@property --tw-backdrop-grayscale{syntax:\"*\";inherits:false}@property --tw-backdrop-hue-rotate{syntax:\"*\";inherits:false}@property --tw-backdrop-invert{syntax:\"*\";inherits:false}@property --tw-backdrop-opacity{syntax:\"*\";inherits:false}@property --tw-backdrop-saturate{syntax:\"*\";inherits:false}@property --tw-backdrop-sepia{syntax:\"*\";inherits:false}@property --tw-scale-x{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-y{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-z{syntax:\"*\";inherits:false;initial-value:1}@keyframes pulse{50%{opacity:.5}}";
|
|
10
10
|
|
|
11
11
|
//#endregion
|
|
12
12
|
//#region src/assets/inspector-logo.svg
|
|
@@ -160,7 +160,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
160
160
|
};
|
|
161
161
|
const DEFAULT_WINDOW_SIZE = {
|
|
162
162
|
width: 840,
|
|
163
|
-
height:
|
|
163
|
+
height: 700
|
|
164
164
|
};
|
|
165
165
|
const DOCKED_LEFT_WIDTH = 500;
|
|
166
166
|
const MAX_AGENT_EVENTS = 200;
|
|
@@ -186,11 +186,1770 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
186
186
|
"REASONING_MESSAGE_CONTENT",
|
|
187
187
|
"REASONING_MESSAGE_END",
|
|
188
188
|
"REASONING_END",
|
|
189
|
-
"REASONING_ENCRYPTED_VALUE"
|
|
189
|
+
"REASONING_ENCRYPTED_VALUE",
|
|
190
|
+
"ACTIVITY_SNAPSHOT",
|
|
191
|
+
"ACTIVITY_DELTA"
|
|
190
192
|
];
|
|
191
|
-
|
|
193
|
+
function escapeHtml(s) {
|
|
194
|
+
return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
|
|
195
|
+
}
|
|
196
|
+
const highlightedJsonCache = /* @__PURE__ */ new WeakMap();
|
|
197
|
+
function highlightedJson(obj) {
|
|
198
|
+
if (typeof obj === "object" && obj !== null) {
|
|
199
|
+
const cached = highlightedJsonCache.get(obj);
|
|
200
|
+
if (cached !== void 0) return cached;
|
|
201
|
+
}
|
|
202
|
+
const colors = {
|
|
203
|
+
key: "#5558B2",
|
|
204
|
+
str: "#189370",
|
|
205
|
+
num: "#996300",
|
|
206
|
+
bool: "#c0333a",
|
|
207
|
+
nil: "#838389"
|
|
208
|
+
};
|
|
209
|
+
const json = JSON.stringify(obj, null, 2);
|
|
210
|
+
if (!json) return "";
|
|
211
|
+
const parts = [];
|
|
212
|
+
let lastIndex = 0;
|
|
213
|
+
const re = /("(?:\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*"(?:\s*:)?|\b(?:true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g;
|
|
214
|
+
let match;
|
|
215
|
+
while ((match = re.exec(json)) !== null) {
|
|
216
|
+
parts.push(escapeHtml(json.slice(lastIndex, match.index)));
|
|
217
|
+
const m = match[0];
|
|
218
|
+
let color = colors.num;
|
|
219
|
+
if (m.startsWith("\"")) color = m.trimEnd().endsWith(":") ? colors.key : colors.str;
|
|
220
|
+
else if (m === "true" || m === "false") color = colors.bool;
|
|
221
|
+
else if (m === "null") color = colors.nil;
|
|
222
|
+
parts.push(`<span style="color:${color}">${escapeHtml(m)}</span>`);
|
|
223
|
+
lastIndex = match.index + m.length;
|
|
224
|
+
}
|
|
225
|
+
parts.push(escapeHtml(json.slice(lastIndex)));
|
|
226
|
+
const result = parts.join("");
|
|
227
|
+
if (typeof obj === "object" && obj !== null) highlightedJsonCache.set(obj, result);
|
|
228
|
+
return result;
|
|
229
|
+
}
|
|
230
|
+
function eventColors(type) {
|
|
231
|
+
if (type.startsWith("TEXT_MESSAGE")) return {
|
|
232
|
+
bg: "#EEE6FE",
|
|
233
|
+
fg: "#57575B"
|
|
234
|
+
};
|
|
235
|
+
if (type.startsWith("TOOL_CALL")) return {
|
|
236
|
+
bg: "rgba(133,236,206,0.15)",
|
|
237
|
+
fg: "#189370"
|
|
238
|
+
};
|
|
239
|
+
if (type.startsWith("STATE")) return {
|
|
240
|
+
bg: "rgba(190,194,255,0.102)",
|
|
241
|
+
fg: "#5558B2"
|
|
242
|
+
};
|
|
243
|
+
if (type.startsWith("RUN_") || type.startsWith("STEP_")) return {
|
|
244
|
+
bg: "rgba(255,172,77,0.2)",
|
|
245
|
+
fg: "#996300"
|
|
246
|
+
};
|
|
247
|
+
if (type === "ERROR") return {
|
|
248
|
+
bg: "rgba(250,95,103,0.13)",
|
|
249
|
+
fg: "#c0333a"
|
|
250
|
+
};
|
|
251
|
+
return {
|
|
252
|
+
bg: "#F7F7F9",
|
|
253
|
+
fg: "#838389"
|
|
254
|
+
};
|
|
255
|
+
}
|
|
256
|
+
function formatTimestamp(ts) {
|
|
257
|
+
const date = typeof ts === "number" ? new Date(ts) : new Date(ts);
|
|
258
|
+
if (Number.isNaN(date.getTime())) return "";
|
|
259
|
+
const ms = date.getMilliseconds().toString().padStart(3, "0");
|
|
260
|
+
return date.toLocaleTimeString("en-US", {
|
|
261
|
+
hour: "2-digit",
|
|
262
|
+
minute: "2-digit",
|
|
263
|
+
second: "2-digit",
|
|
264
|
+
hour12: false
|
|
265
|
+
}) + "." + ms;
|
|
266
|
+
}
|
|
267
|
+
var CpkThreadList = class extends lit.LitElement {
|
|
192
268
|
constructor(..._args) {
|
|
193
269
|
super(..._args);
|
|
270
|
+
this.threads = [];
|
|
271
|
+
this.selectedThreadId = null;
|
|
272
|
+
this.errorMessage = null;
|
|
273
|
+
this._query = "";
|
|
274
|
+
this.onSearchInput = (event) => {
|
|
275
|
+
this._query = event.target.value;
|
|
276
|
+
};
|
|
277
|
+
}
|
|
278
|
+
relativeTime(dateStr) {
|
|
279
|
+
const date = new Date(dateStr);
|
|
280
|
+
const diffMs = Date.now() - date.getTime();
|
|
281
|
+
const diffSec = Math.floor(diffMs / 1e3);
|
|
282
|
+
if (diffSec < 60) return `${diffSec}s ago`;
|
|
283
|
+
const diffMin = Math.floor(diffSec / 60);
|
|
284
|
+
if (diffMin < 60) return `${diffMin}m ago`;
|
|
285
|
+
const diffH = Math.floor(diffMin / 60);
|
|
286
|
+
if (diffH < 24) return `${diffH}h ago`;
|
|
287
|
+
return `${Math.floor(diffH / 24)}d ago`;
|
|
288
|
+
}
|
|
289
|
+
get filtered() {
|
|
290
|
+
const q = this._query.toLowerCase();
|
|
291
|
+
if (!q) return this.threads;
|
|
292
|
+
return this.threads.filter((t) => {
|
|
293
|
+
var _t$name$toLowerCase$i, _t$name;
|
|
294
|
+
return ((_t$name$toLowerCase$i = (_t$name = t.name) === null || _t$name === void 0 ? void 0 : _t$name.toLowerCase().includes(q)) !== null && _t$name$toLowerCase$i !== void 0 ? _t$name$toLowerCase$i : false) || t.agentId.toLowerCase().includes(q) || t.id.toLowerCase().includes(q);
|
|
295
|
+
});
|
|
296
|
+
}
|
|
297
|
+
onThreadClick(threadId) {
|
|
298
|
+
this.dispatchEvent(new CustomEvent("threadSelected", {
|
|
299
|
+
detail: threadId,
|
|
300
|
+
bubbles: true,
|
|
301
|
+
composed: true
|
|
302
|
+
}));
|
|
303
|
+
}
|
|
304
|
+
render() {
|
|
305
|
+
const filtered = this.filtered;
|
|
306
|
+
return lit.html`
|
|
307
|
+
<div class="cpk-tl">
|
|
308
|
+
<!-- Search -->
|
|
309
|
+
<div class="cpk-tl__search">
|
|
310
|
+
<input
|
|
311
|
+
type="text"
|
|
312
|
+
placeholder="Search threads…"
|
|
313
|
+
.value=${this._query}
|
|
314
|
+
@input=${this.onSearchInput}
|
|
315
|
+
class="cpk-tl__search-input"
|
|
316
|
+
/>
|
|
317
|
+
</div>
|
|
318
|
+
|
|
319
|
+
<!-- Thread list -->
|
|
320
|
+
<div class="cpk-tl__list">
|
|
321
|
+
${filtered.map((thread) => {
|
|
322
|
+
var _thread$name;
|
|
323
|
+
return lit.html`
|
|
324
|
+
<div
|
|
325
|
+
class="cpk-tl__item ${this.selectedThreadId === thread.id ? "cpk-tl__item--active" : ""}"
|
|
326
|
+
@click=${() => this.onThreadClick(thread.id)}
|
|
327
|
+
>
|
|
328
|
+
<div class="cpk-tl__row1">
|
|
329
|
+
<span
|
|
330
|
+
class="cpk-tl__name ${!thread.name ? "cpk-tl__name--unnamed" : ""}"
|
|
331
|
+
>${(_thread$name = thread.name) !== null && _thread$name !== void 0 ? _thread$name : "Untitled"}</span
|
|
332
|
+
>
|
|
333
|
+
<span class="cpk-tl__time"
|
|
334
|
+
>${this.relativeTime(thread.updatedAt)}</span
|
|
335
|
+
>
|
|
336
|
+
</div>
|
|
337
|
+
<div class="cpk-tl__meta">
|
|
338
|
+
<span class="cpk-tl__pill">${thread.agentId}</span>
|
|
339
|
+
</div>
|
|
340
|
+
</div>
|
|
341
|
+
`;
|
|
342
|
+
})}
|
|
343
|
+
${filtered.length === 0 ? lit.html`
|
|
344
|
+
<div class="cpk-tl__empty">
|
|
345
|
+
${this.errorMessage ? lit.html`
|
|
346
|
+
<svg
|
|
347
|
+
width="24"
|
|
348
|
+
height="24"
|
|
349
|
+
viewBox="0 0 24 24"
|
|
350
|
+
fill="none"
|
|
351
|
+
stroke="currentColor"
|
|
352
|
+
stroke-width="1.5"
|
|
353
|
+
stroke-linecap="round"
|
|
354
|
+
stroke-linejoin="round"
|
|
355
|
+
class="cpk-tl__empty-icon"
|
|
356
|
+
>
|
|
357
|
+
<circle cx="12" cy="12" r="10" />
|
|
358
|
+
<line x1="12" y1="8" x2="12" y2="12" />
|
|
359
|
+
<line x1="12" y1="16" x2="12.01" y2="16" />
|
|
360
|
+
</svg>
|
|
361
|
+
<div>
|
|
362
|
+
Failed to load threads
|
|
363
|
+
<div style="font-size:11px;margin-top:4px;color:#c0333a;">
|
|
364
|
+
${this.errorMessage}
|
|
365
|
+
</div>
|
|
366
|
+
</div>
|
|
367
|
+
` : this.threads.length === 0 ? lit.html`
|
|
368
|
+
<svg
|
|
369
|
+
width="24"
|
|
370
|
+
height="24"
|
|
371
|
+
viewBox="0 0 24 24"
|
|
372
|
+
fill="none"
|
|
373
|
+
stroke="currentColor"
|
|
374
|
+
stroke-width="1.5"
|
|
375
|
+
stroke-linecap="round"
|
|
376
|
+
stroke-linejoin="round"
|
|
377
|
+
class="cpk-tl__empty-icon"
|
|
378
|
+
>
|
|
379
|
+
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
|
380
|
+
</svg>
|
|
381
|
+
No threads yet
|
|
382
|
+
` : lit.html`
|
|
383
|
+
No threads match your search.
|
|
384
|
+
`}
|
|
385
|
+
</div>
|
|
386
|
+
` : lit.nothing}
|
|
387
|
+
</div>
|
|
388
|
+
</div>
|
|
389
|
+
`;
|
|
390
|
+
}
|
|
391
|
+
};
|
|
392
|
+
CpkThreadList.properties = {
|
|
393
|
+
threads: { attribute: false },
|
|
394
|
+
selectedThreadId: { attribute: false },
|
|
395
|
+
errorMessage: { attribute: false },
|
|
396
|
+
_query: { state: true }
|
|
397
|
+
};
|
|
398
|
+
CpkThreadList.styles = lit.css`
|
|
399
|
+
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&family=Spline+Sans+Mono:wght@400;500&display=swap");
|
|
400
|
+
|
|
401
|
+
:host {
|
|
402
|
+
display: flex;
|
|
403
|
+
flex-direction: column;
|
|
404
|
+
height: 100%;
|
|
405
|
+
overflow: hidden;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
.cpk-tl {
|
|
409
|
+
font-family: "Plus Jakarta Sans", sans-serif;
|
|
410
|
+
display: flex;
|
|
411
|
+
flex-direction: column;
|
|
412
|
+
height: 100%;
|
|
413
|
+
overflow: hidden;
|
|
414
|
+
background: #f7f7f9;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
/* ── Search ── */
|
|
418
|
+
.cpk-tl__search {
|
|
419
|
+
padding: 10px 12px;
|
|
420
|
+
border-bottom: 1px solid #dbdbe5;
|
|
421
|
+
flex-shrink: 0;
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
.cpk-tl__search-input {
|
|
425
|
+
width: 100%;
|
|
426
|
+
box-sizing: border-box;
|
|
427
|
+
font-family: "Plus Jakarta Sans", sans-serif;
|
|
428
|
+
font-size: 12px;
|
|
429
|
+
padding: 7px 10px;
|
|
430
|
+
border-radius: 6px;
|
|
431
|
+
border: 1px solid #dbdbe5;
|
|
432
|
+
background: #ffffff;
|
|
433
|
+
color: #010507;
|
|
434
|
+
outline: none;
|
|
435
|
+
transition: border-color 0.15s;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
.cpk-tl__search-input:focus {
|
|
439
|
+
border-color: #bec2ff;
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
/* ── List ── */
|
|
443
|
+
.cpk-tl__list {
|
|
444
|
+
flex: 1;
|
|
445
|
+
overflow-y: auto;
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
/* ── Thread item ── */
|
|
449
|
+
.cpk-tl__item {
|
|
450
|
+
padding: 11px 13px;
|
|
451
|
+
cursor: pointer;
|
|
452
|
+
border-bottom: 1px solid #e9e9ef;
|
|
453
|
+
border-left: 3px solid transparent;
|
|
454
|
+
transition: background 0.1s;
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
.cpk-tl__item:hover {
|
|
458
|
+
background: #ffffff;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
.cpk-tl__item--active {
|
|
462
|
+
background: #bec2ff1a;
|
|
463
|
+
border-left-color: #bec2ff;
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
.cpk-tl__item--active:hover {
|
|
467
|
+
background: #bec2ff33;
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
.cpk-tl__row1 {
|
|
471
|
+
display: flex;
|
|
472
|
+
align-items: center;
|
|
473
|
+
gap: 8px;
|
|
474
|
+
margin-bottom: 3px;
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
.cpk-tl__name {
|
|
478
|
+
font-size: 12px;
|
|
479
|
+
font-weight: 500;
|
|
480
|
+
color: #010507;
|
|
481
|
+
flex: 1;
|
|
482
|
+
overflow: hidden;
|
|
483
|
+
text-overflow: ellipsis;
|
|
484
|
+
white-space: nowrap;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
.cpk-tl__name--unnamed {
|
|
488
|
+
color: #838389;
|
|
489
|
+
font-style: italic;
|
|
490
|
+
font-weight: 400;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.cpk-tl__time {
|
|
494
|
+
font-family: "Spline Sans Mono", monospace;
|
|
495
|
+
font-size: 10px;
|
|
496
|
+
color: #838389;
|
|
497
|
+
flex-shrink: 0;
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
.cpk-tl__meta {
|
|
501
|
+
display: flex;
|
|
502
|
+
gap: 6px;
|
|
503
|
+
align-items: center;
|
|
504
|
+
flex-wrap: wrap;
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
.cpk-tl__pill {
|
|
508
|
+
font-family: "Spline Sans Mono", monospace;
|
|
509
|
+
font-size: 9px;
|
|
510
|
+
padding: 1px 7px;
|
|
511
|
+
border-radius: 4px;
|
|
512
|
+
text-transform: uppercase;
|
|
513
|
+
font-weight: 500;
|
|
514
|
+
white-space: nowrap;
|
|
515
|
+
background: #eee6fe;
|
|
516
|
+
color: #57575b;
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
/* ── Empty state ── */
|
|
520
|
+
.cpk-tl__empty {
|
|
521
|
+
padding: 32px 16px;
|
|
522
|
+
text-align: center;
|
|
523
|
+
color: #838389;
|
|
524
|
+
font-size: 12px;
|
|
525
|
+
display: flex;
|
|
526
|
+
flex-direction: column;
|
|
527
|
+
align-items: center;
|
|
528
|
+
gap: 8px;
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
.cpk-tl__empty-icon {
|
|
532
|
+
color: #c0c0c8;
|
|
533
|
+
}
|
|
534
|
+
`;
|
|
535
|
+
var ɵCpkThreadDetails = class ɵCpkThreadDetails extends lit.LitElement {
|
|
536
|
+
constructor(..._args2) {
|
|
537
|
+
super(..._args2);
|
|
538
|
+
this.threadId = null;
|
|
539
|
+
this.thread = null;
|
|
540
|
+
this.runtimeUrl = "";
|
|
541
|
+
this.headers = {};
|
|
542
|
+
this.agentStateInput = null;
|
|
543
|
+
this.agentEventsInput = [];
|
|
544
|
+
this.liveMessageVersion = 0;
|
|
545
|
+
this._tab = "conversation";
|
|
546
|
+
this._conversation = [];
|
|
547
|
+
this._fetchedEvents = null;
|
|
548
|
+
this._fetchedState = null;
|
|
549
|
+
this._loadingMessages = false;
|
|
550
|
+
this._loadingEvents = false;
|
|
551
|
+
this._loadingState = false;
|
|
552
|
+
this._messagesError = null;
|
|
553
|
+
this._eventsError = null;
|
|
554
|
+
this._stateError = null;
|
|
555
|
+
this._expandedTools = /* @__PURE__ */ new Set();
|
|
556
|
+
this._expandedMessages = /* @__PURE__ */ new Set();
|
|
557
|
+
this._showDetailPanel = false;
|
|
558
|
+
this._detailPanelWidth = 250;
|
|
559
|
+
this._eventsNotAvailable = false;
|
|
560
|
+
this._stateNotAvailable = false;
|
|
561
|
+
this._panelInitializing = false;
|
|
562
|
+
this._activatedTabs = new Set(["conversation"]);
|
|
563
|
+
this._panelTplCache = /* @__PURE__ */ new Map();
|
|
564
|
+
this._eventsFetched = false;
|
|
565
|
+
this._stateFetched = false;
|
|
566
|
+
this._lastFetchedThreadId = null;
|
|
567
|
+
this._lastSeenLiveMessageVersion = 0;
|
|
568
|
+
this._messagesAbort = null;
|
|
569
|
+
this._eventsAbort = null;
|
|
570
|
+
this._stateAbort = null;
|
|
571
|
+
this._dividerResizing = false;
|
|
572
|
+
this._dividerPointerId = -1;
|
|
573
|
+
this._dividerStartX = 0;
|
|
574
|
+
this._dividerStartWidth = 0;
|
|
575
|
+
this.onDetailDividerDown = (event) => {
|
|
576
|
+
this._dividerResizing = true;
|
|
577
|
+
this._dividerPointerId = event.pointerId;
|
|
578
|
+
this._dividerStartX = event.clientX;
|
|
579
|
+
this._dividerStartWidth = this._detailPanelWidth;
|
|
580
|
+
event.currentTarget.setPointerCapture(event.pointerId);
|
|
581
|
+
event.preventDefault();
|
|
582
|
+
};
|
|
583
|
+
this.onDetailDividerMove = (event) => {
|
|
584
|
+
if (!this._dividerResizing || this._dividerPointerId !== event.pointerId) return;
|
|
585
|
+
const delta = this._dividerStartX - event.clientX;
|
|
586
|
+
this._detailPanelWidth = Math.max(160, Math.min(400, this._dividerStartWidth + delta));
|
|
587
|
+
};
|
|
588
|
+
this.onDetailDividerUp = (event) => {
|
|
589
|
+
if (this._dividerPointerId !== event.pointerId) return;
|
|
590
|
+
const target = event.currentTarget;
|
|
591
|
+
if (target.hasPointerCapture(this._dividerPointerId)) target.releasePointerCapture(this._dividerPointerId);
|
|
592
|
+
this._dividerResizing = false;
|
|
593
|
+
};
|
|
594
|
+
}
|
|
595
|
+
renderTabContent(id) {
|
|
596
|
+
if (id === "conversation") return this.renderConversation();
|
|
597
|
+
if (id === "agent-state") return this.renderState();
|
|
598
|
+
return this.renderEvents();
|
|
599
|
+
}
|
|
600
|
+
activateTab(id) {
|
|
601
|
+
if (this._tab === id) return;
|
|
602
|
+
const isFirstActivation = !this._activatedTabs.has(id);
|
|
603
|
+
this._tab = id;
|
|
604
|
+
if (isFirstActivation) {
|
|
605
|
+
this._panelInitializing = true;
|
|
606
|
+
requestAnimationFrame(() => {
|
|
607
|
+
this._activatedTabs = new Set([...this._activatedTabs, id]);
|
|
608
|
+
this._panelInitializing = false;
|
|
609
|
+
});
|
|
610
|
+
}
|
|
611
|
+
this.maybeFetchTabData(id);
|
|
612
|
+
}
|
|
613
|
+
maybeFetchTabData(id) {
|
|
614
|
+
if (!this.threadId) return;
|
|
615
|
+
if (id === "ag-ui-events" && !this._eventsFetched) {
|
|
616
|
+
this._eventsFetched = true;
|
|
617
|
+
this.fetchEvents(this.threadId);
|
|
618
|
+
} else if (id === "agent-state" && !this._stateFetched) {
|
|
619
|
+
this._stateFetched = true;
|
|
620
|
+
this.fetchState(this.threadId);
|
|
621
|
+
}
|
|
622
|
+
}
|
|
623
|
+
updated(_changed) {
|
|
624
|
+
if (this.threadId !== this._lastFetchedThreadId) {
|
|
625
|
+
var _this$_messagesAbort, _this$_eventsAbort, _this$_stateAbort;
|
|
626
|
+
this._lastFetchedThreadId = this.threadId;
|
|
627
|
+
this._lastSeenLiveMessageVersion = this.liveMessageVersion;
|
|
628
|
+
this._tab = "conversation";
|
|
629
|
+
this._activatedTabs = new Set(["conversation"]);
|
|
630
|
+
this._panelTplCache = /* @__PURE__ */ new Map();
|
|
631
|
+
this._expandedTools = /* @__PURE__ */ new Set();
|
|
632
|
+
this._expandedMessages = /* @__PURE__ */ new Set();
|
|
633
|
+
(_this$_messagesAbort = this._messagesAbort) === null || _this$_messagesAbort === void 0 || _this$_messagesAbort.abort();
|
|
634
|
+
this._messagesAbort = null;
|
|
635
|
+
(_this$_eventsAbort = this._eventsAbort) === null || _this$_eventsAbort === void 0 || _this$_eventsAbort.abort();
|
|
636
|
+
this._eventsAbort = null;
|
|
637
|
+
(_this$_stateAbort = this._stateAbort) === null || _this$_stateAbort === void 0 || _this$_stateAbort.abort();
|
|
638
|
+
this._stateAbort = null;
|
|
639
|
+
this._eventsFetched = false;
|
|
640
|
+
this._stateFetched = false;
|
|
641
|
+
this._fetchedEvents = null;
|
|
642
|
+
this._fetchedState = null;
|
|
643
|
+
if (this.threadId) this.fetchMessages(this.threadId);
|
|
644
|
+
else this._conversation = [];
|
|
645
|
+
} else if (this.threadId && this.liveMessageVersion !== this._lastSeenLiveMessageVersion) {
|
|
646
|
+
var _this$_messagesAbort2;
|
|
647
|
+
this._lastSeenLiveMessageVersion = this.liveMessageVersion;
|
|
648
|
+
(_this$_messagesAbort2 = this._messagesAbort) === null || _this$_messagesAbort2 === void 0 || _this$_messagesAbort2.abort();
|
|
649
|
+
this._messagesAbort = null;
|
|
650
|
+
this.fetchMessages(this.threadId, true);
|
|
651
|
+
}
|
|
652
|
+
}
|
|
653
|
+
/**
|
|
654
|
+
* Fetch the canonical conversation for `threadId` from the runtime.
|
|
655
|
+
*
|
|
656
|
+
* `silent` is true for live re-fetches triggered by `liveMessageVersion`
|
|
657
|
+
* bumps during streaming. In that mode we never toggle the loading state
|
|
658
|
+
* (which would flash "Loading messages…" between every message) and we
|
|
659
|
+
* keep the previous conversation on transient errors instead of blanking
|
|
660
|
+
* it. Initial threadId-change fetches use the default (`silent=false`)
|
|
661
|
+
* so users see an explicit loading indicator on first load.
|
|
662
|
+
*/
|
|
663
|
+
async fetchMessages(threadId, silent = false) {
|
|
664
|
+
if (!this.runtimeUrl) {
|
|
665
|
+
if (!silent) this._conversation = [];
|
|
666
|
+
return;
|
|
667
|
+
}
|
|
668
|
+
const controller = new AbortController();
|
|
669
|
+
this._messagesAbort = controller;
|
|
670
|
+
if (!silent) {
|
|
671
|
+
this._loadingMessages = true;
|
|
672
|
+
this._messagesError = null;
|
|
673
|
+
}
|
|
674
|
+
try {
|
|
675
|
+
const res = await fetch(`${this.runtimeUrl}/threads/${encodeURIComponent(threadId)}/messages`, {
|
|
676
|
+
headers: { ...this.headers },
|
|
677
|
+
signal: controller.signal
|
|
678
|
+
});
|
|
679
|
+
if (controller.signal.aborted || this.threadId !== threadId) return;
|
|
680
|
+
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
681
|
+
const data = await res.json();
|
|
682
|
+
if (controller.signal.aborted || this.threadId !== threadId) return;
|
|
683
|
+
this._conversation = this.mapMessages(data.messages);
|
|
684
|
+
} catch (err) {
|
|
685
|
+
if (err instanceof Error && err.name === "AbortError") return;
|
|
686
|
+
if (!silent) {
|
|
687
|
+
this._messagesError = err instanceof Error ? err.message : "Failed to load messages";
|
|
688
|
+
this._conversation = [];
|
|
689
|
+
}
|
|
690
|
+
} finally {
|
|
691
|
+
if (!silent && !controller.signal.aborted) this._loadingMessages = false;
|
|
692
|
+
}
|
|
693
|
+
}
|
|
694
|
+
async fetchEvents(threadId) {
|
|
695
|
+
this._eventsNotAvailable = false;
|
|
696
|
+
if (!this.runtimeUrl) {
|
|
697
|
+
this._fetchedEvents = null;
|
|
698
|
+
return;
|
|
699
|
+
}
|
|
700
|
+
const controller = new AbortController();
|
|
701
|
+
this._eventsAbort = controller;
|
|
702
|
+
this._loadingEvents = true;
|
|
703
|
+
this._eventsError = null;
|
|
704
|
+
try {
|
|
705
|
+
const res = await fetch(`${this.runtimeUrl}/threads/${encodeURIComponent(threadId)}/events`, {
|
|
706
|
+
headers: { ...this.headers },
|
|
707
|
+
signal: controller.signal
|
|
708
|
+
});
|
|
709
|
+
if (controller.signal.aborted || this.threadId !== threadId) return;
|
|
710
|
+
if (res.status === 501) {
|
|
711
|
+
this._eventsNotAvailable = true;
|
|
712
|
+
this._fetchedEvents = null;
|
|
713
|
+
return;
|
|
714
|
+
}
|
|
715
|
+
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
716
|
+
const data = await res.json();
|
|
717
|
+
if (controller.signal.aborted || this.threadId !== threadId) return;
|
|
718
|
+
this._fetchedEvents = this.mapApiEvents(data.events);
|
|
719
|
+
} catch (err) {
|
|
720
|
+
if (err instanceof Error && err.name === "AbortError") return;
|
|
721
|
+
if (this.threadId !== threadId) return;
|
|
722
|
+
this._eventsError = err instanceof Error ? err.message : "Failed to load events";
|
|
723
|
+
this._fetchedEvents = [];
|
|
724
|
+
} finally {
|
|
725
|
+
if (!controller.signal.aborted && this.threadId === threadId) this._loadingEvents = false;
|
|
726
|
+
}
|
|
727
|
+
}
|
|
728
|
+
async fetchState(threadId) {
|
|
729
|
+
this._stateNotAvailable = false;
|
|
730
|
+
if (!this.runtimeUrl) {
|
|
731
|
+
this._fetchedState = null;
|
|
732
|
+
return;
|
|
733
|
+
}
|
|
734
|
+
const controller = new AbortController();
|
|
735
|
+
this._stateAbort = controller;
|
|
736
|
+
this._loadingState = true;
|
|
737
|
+
this._stateError = null;
|
|
738
|
+
try {
|
|
739
|
+
var _data$state;
|
|
740
|
+
const res = await fetch(`${this.runtimeUrl}/threads/${encodeURIComponent(threadId)}/state`, {
|
|
741
|
+
headers: { ...this.headers },
|
|
742
|
+
signal: controller.signal
|
|
743
|
+
});
|
|
744
|
+
if (controller.signal.aborted || this.threadId !== threadId) return;
|
|
745
|
+
if (res.status === 501) {
|
|
746
|
+
this._stateNotAvailable = true;
|
|
747
|
+
this._fetchedState = null;
|
|
748
|
+
return;
|
|
749
|
+
}
|
|
750
|
+
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
751
|
+
const data = await res.json();
|
|
752
|
+
if (controller.signal.aborted || this.threadId !== threadId) return;
|
|
753
|
+
this._fetchedState = (_data$state = data.state) !== null && _data$state !== void 0 ? _data$state : null;
|
|
754
|
+
} catch (err) {
|
|
755
|
+
if (err instanceof Error && err.name === "AbortError") return;
|
|
756
|
+
if (this.threadId !== threadId) return;
|
|
757
|
+
this._stateError = err instanceof Error ? err.message : "Failed to load state";
|
|
758
|
+
this._fetchedState = null;
|
|
759
|
+
} finally {
|
|
760
|
+
if (!controller.signal.aborted && this.threadId === threadId) this._loadingState = false;
|
|
761
|
+
}
|
|
762
|
+
}
|
|
763
|
+
mapMessages(messages) {
|
|
764
|
+
const items = [];
|
|
765
|
+
const toolCallMap = /* @__PURE__ */ new Map();
|
|
766
|
+
for (const msg of messages) if (msg.role === "user" && msg.content) items.push({
|
|
767
|
+
id: msg.id,
|
|
768
|
+
type: "user",
|
|
769
|
+
content: msg.content,
|
|
770
|
+
createdAt: ""
|
|
771
|
+
});
|
|
772
|
+
else if (msg.role === "assistant") {
|
|
773
|
+
var _msg$toolCalls;
|
|
774
|
+
if ((_msg$toolCalls = msg.toolCalls) === null || _msg$toolCalls === void 0 ? void 0 : _msg$toolCalls.length) for (const tc of msg.toolCalls) {
|
|
775
|
+
let args = {};
|
|
776
|
+
try {
|
|
777
|
+
args = JSON.parse(tc.args);
|
|
778
|
+
} catch (err) {
|
|
779
|
+
console.error("[CopilotKit Inspector] Failed to parse tool-call arguments", {
|
|
780
|
+
toolCallId: tc.id,
|
|
781
|
+
raw: tc.args,
|
|
782
|
+
error: err
|
|
783
|
+
});
|
|
784
|
+
args = {
|
|
785
|
+
__parseError: true,
|
|
786
|
+
__raw: tc.args
|
|
787
|
+
};
|
|
788
|
+
}
|
|
789
|
+
const item = {
|
|
790
|
+
id: tc.id,
|
|
791
|
+
type: "tool_call",
|
|
792
|
+
toolName: tc.name,
|
|
793
|
+
toolCallId: tc.id,
|
|
794
|
+
arguments: args,
|
|
795
|
+
result: null,
|
|
796
|
+
createdAt: ""
|
|
797
|
+
};
|
|
798
|
+
toolCallMap.set(tc.id, item);
|
|
799
|
+
items.push(item);
|
|
800
|
+
}
|
|
801
|
+
if (msg.content) items.push({
|
|
802
|
+
id: msg.id,
|
|
803
|
+
type: "assistant",
|
|
804
|
+
content: msg.content,
|
|
805
|
+
createdAt: ""
|
|
806
|
+
});
|
|
807
|
+
} else if (msg.role === "activity") {
|
|
808
|
+
var _msg$activityType;
|
|
809
|
+
items.push({
|
|
810
|
+
id: msg.id,
|
|
811
|
+
type: "generative-ui",
|
|
812
|
+
activityType: (_msg$activityType = msg.activityType) !== null && _msg$activityType !== void 0 ? _msg$activityType : "unknown",
|
|
813
|
+
createdAt: ""
|
|
814
|
+
});
|
|
815
|
+
} else if (msg.role === "tool" && msg.toolCallId) {
|
|
816
|
+
const tc = toolCallMap.get(msg.toolCallId);
|
|
817
|
+
if (tc) try {
|
|
818
|
+
var _msg$content;
|
|
819
|
+
tc.result = JSON.parse((_msg$content = msg.content) !== null && _msg$content !== void 0 ? _msg$content : "{}");
|
|
820
|
+
} catch (err) {
|
|
821
|
+
var _msg$content2;
|
|
822
|
+
console.error("[CopilotKit Inspector] Failed to parse tool-call result content", {
|
|
823
|
+
toolCallId: msg.toolCallId,
|
|
824
|
+
raw: msg.content,
|
|
825
|
+
error: err
|
|
826
|
+
});
|
|
827
|
+
tc.result = {
|
|
828
|
+
__parseError: true,
|
|
829
|
+
__raw: (_msg$content2 = msg.content) !== null && _msg$content2 !== void 0 ? _msg$content2 : null
|
|
830
|
+
};
|
|
831
|
+
}
|
|
832
|
+
}
|
|
833
|
+
return items;
|
|
834
|
+
}
|
|
835
|
+
mapApiEvents(events) {
|
|
836
|
+
return events.map((event) => {
|
|
837
|
+
const { type, timestamp, ...rest } = event;
|
|
838
|
+
return {
|
|
839
|
+
type: typeof type === "string" ? type : "UNKNOWN",
|
|
840
|
+
timestamp: typeof timestamp === "string" || typeof timestamp === "number" ? timestamp : Date.now(),
|
|
841
|
+
payload: rest
|
|
842
|
+
};
|
|
843
|
+
});
|
|
844
|
+
}
|
|
845
|
+
get renderItems() {
|
|
846
|
+
const items = this._conversation;
|
|
847
|
+
const result = [];
|
|
848
|
+
const seen = /* @__PURE__ */ new Set();
|
|
849
|
+
for (const item of items) {
|
|
850
|
+
if (item.type === "agent_responded") continue;
|
|
851
|
+
if (item.type !== "tool_call" || !item.groupId) {
|
|
852
|
+
result.push(item);
|
|
853
|
+
continue;
|
|
854
|
+
}
|
|
855
|
+
if (seen.has(item.groupId)) continue;
|
|
856
|
+
seen.add(item.groupId);
|
|
857
|
+
const group = {
|
|
858
|
+
type: "tool_call_group",
|
|
859
|
+
id: item.groupId,
|
|
860
|
+
items: items.filter((i) => i.type === "tool_call" && i.groupId === item.groupId)
|
|
861
|
+
};
|
|
862
|
+
result.push(group);
|
|
863
|
+
}
|
|
864
|
+
return result;
|
|
865
|
+
}
|
|
866
|
+
get activityCounts() {
|
|
867
|
+
let messages = 0;
|
|
868
|
+
let toolCalls = 0;
|
|
869
|
+
let generativeUi = 0;
|
|
870
|
+
for (const item of this._conversation) {
|
|
871
|
+
if (item.type === "user" || item.type === "assistant") messages++;
|
|
872
|
+
if (item.type === "tool_call") toolCalls++;
|
|
873
|
+
if (item.type === "generative-ui") generativeUi++;
|
|
874
|
+
}
|
|
875
|
+
return {
|
|
876
|
+
messages,
|
|
877
|
+
toolCalls,
|
|
878
|
+
generativeUi
|
|
879
|
+
};
|
|
880
|
+
}
|
|
881
|
+
get duration() {
|
|
882
|
+
const t = this.thread;
|
|
883
|
+
if (!(t === null || t === void 0 ? void 0 : t.createdAt) || !(t === null || t === void 0 ? void 0 : t.updatedAt)) return "—";
|
|
884
|
+
const ms = new Date(t.updatedAt).getTime() - new Date(t.createdAt).getTime();
|
|
885
|
+
if (ms < 0) return "—";
|
|
886
|
+
if (ms < 1e3) return `${ms}ms`;
|
|
887
|
+
const s = Math.floor(ms / 1e3);
|
|
888
|
+
if (s < 60) return `${s}s`;
|
|
889
|
+
return `${Math.floor(s / 60)}m ${s % 60}s`;
|
|
890
|
+
}
|
|
891
|
+
toggleToolExpand(id) {
|
|
892
|
+
const next = new Set(this._expandedTools);
|
|
893
|
+
if (next.has(id)) next.delete(id);
|
|
894
|
+
else next.add(id);
|
|
895
|
+
this._expandedTools = next;
|
|
896
|
+
}
|
|
897
|
+
toggleMessageExpand(id) {
|
|
898
|
+
const next = new Set(this._expandedMessages);
|
|
899
|
+
if (next.has(id)) next.delete(id);
|
|
900
|
+
else next.add(id);
|
|
901
|
+
this._expandedMessages = next;
|
|
902
|
+
}
|
|
903
|
+
get activeEvents() {
|
|
904
|
+
var _ref, _this$_fetchedEvents;
|
|
905
|
+
if (this._eventsNotAvailable) return [];
|
|
906
|
+
return (_ref = (_this$_fetchedEvents = this._fetchedEvents) !== null && _this$_fetchedEvents !== void 0 ? _this$_fetchedEvents : this.agentEventsInput) !== null && _ref !== void 0 ? _ref : [];
|
|
907
|
+
}
|
|
908
|
+
get activeState() {
|
|
909
|
+
var _ref2, _this$_fetchedState;
|
|
910
|
+
if (this._stateNotAvailable) return null;
|
|
911
|
+
return (_ref2 = (_this$_fetchedState = this._fetchedState) !== null && _this$_fetchedState !== void 0 ? _this$_fetchedState : this.agentStateInput) !== null && _ref2 !== void 0 ? _ref2 : null;
|
|
912
|
+
}
|
|
913
|
+
hasRenderableState() {
|
|
914
|
+
const s = this.activeState;
|
|
915
|
+
return !!s && typeof s === "object" && Object.keys(s).length > 0;
|
|
916
|
+
}
|
|
917
|
+
shortId(id) {
|
|
918
|
+
if (!id) return "—";
|
|
919
|
+
return id.length > 20 ? id.slice(0, 8) + "…" : id;
|
|
920
|
+
}
|
|
921
|
+
fmtTime(dateStr) {
|
|
922
|
+
if (!dateStr) return "—";
|
|
923
|
+
const d = new Date(dateStr);
|
|
924
|
+
if (Number.isNaN(d.getTime())) return "—";
|
|
925
|
+
return d.toLocaleTimeString("en-US", {
|
|
926
|
+
hour: "2-digit",
|
|
927
|
+
minute: "2-digit",
|
|
928
|
+
second: "2-digit",
|
|
929
|
+
hour12: false
|
|
930
|
+
});
|
|
931
|
+
}
|
|
932
|
+
render() {
|
|
933
|
+
return lit.html`
|
|
934
|
+
<div class="cpk-td">
|
|
935
|
+
<!-- ── Left area: tabs + content ─────────────────────────────────── -->
|
|
936
|
+
<div class="cpk-td__left">
|
|
937
|
+
<!-- Tab bar -->
|
|
938
|
+
<div class="cpk-td__tabs-header">
|
|
939
|
+
<div class="cpk-td__tab-group" role="tablist">
|
|
940
|
+
${ɵCpkThreadDetails.TAB_LIST.map((tab) => lit.html`
|
|
941
|
+
<button
|
|
942
|
+
role="tab"
|
|
943
|
+
class="cpk-td__tab ${this._tab === tab.id ? "cpk-td__tab--active" : ""}"
|
|
944
|
+
@click=${() => this.activateTab(tab.id)}
|
|
945
|
+
>
|
|
946
|
+
${tab.label}
|
|
947
|
+
</button>
|
|
948
|
+
`)}
|
|
949
|
+
</div>
|
|
950
|
+
${this.renderPanelToggle()}
|
|
951
|
+
</div>
|
|
952
|
+
|
|
953
|
+
<!-- Scrollable content -->
|
|
954
|
+
<div class="cpk-td__content">
|
|
955
|
+
${this._panelInitializing ? lit.html`
|
|
956
|
+
<div class="cpk-td__status">Loading…</div>
|
|
957
|
+
` : lit.nothing}
|
|
958
|
+
${ɵCpkThreadDetails.TAB_LIST.map((tab) => this._activatedTabs.has(tab.id) ? lit.html`<div
|
|
959
|
+
class="cpk-td__panel"
|
|
960
|
+
style=${this._tab === tab.id && !this._panelInitializing ? "" : "display:none"}
|
|
961
|
+
>
|
|
962
|
+
${this.renderTabContent(tab.id)}
|
|
963
|
+
</div>` : lit.nothing)}
|
|
964
|
+
</div>
|
|
965
|
+
</div>
|
|
966
|
+
|
|
967
|
+
<!--
|
|
968
|
+
Drawer always rendered so width animates between 0 and its
|
|
969
|
+
target. Divider lives INSIDE the drawer and is absolutely
|
|
970
|
+
positioned over its left edge so the toggle (rightmost of the
|
|
971
|
+
tab row) and the drawer touch with no flex-gap between them.
|
|
972
|
+
-->
|
|
973
|
+
<div
|
|
974
|
+
class="cpk-td__detail"
|
|
975
|
+
data-open=${this._showDetailPanel ? "true" : "false"}
|
|
976
|
+
style="width:${this._showDetailPanel ? this._detailPanelWidth : 0}px"
|
|
977
|
+
aria-hidden=${this._showDetailPanel ? "false" : "true"}
|
|
978
|
+
>
|
|
979
|
+
${this._showDetailPanel ? lit.html`
|
|
980
|
+
<div
|
|
981
|
+
class="cpk-td__detail-divider"
|
|
982
|
+
@pointerdown=${this.onDetailDividerDown}
|
|
983
|
+
@pointermove=${this.onDetailDividerMove}
|
|
984
|
+
@pointerup=${this.onDetailDividerUp}
|
|
985
|
+
@pointercancel=${this.onDetailDividerUp}
|
|
986
|
+
></div>
|
|
987
|
+
` : lit.nothing}
|
|
988
|
+
${this.renderDetailPanel()}
|
|
989
|
+
</div>
|
|
990
|
+
</div>
|
|
991
|
+
`;
|
|
992
|
+
}
|
|
993
|
+
renderConversation() {
|
|
994
|
+
if (this._loadingMessages) return lit.html`
|
|
995
|
+
<div class="cpk-td__status">Loading messages…</div>
|
|
996
|
+
`;
|
|
997
|
+
if (this._messagesError) return lit.html`<div class="cpk-td__status cpk-td__status--error">
|
|
998
|
+
${this._messagesError}
|
|
999
|
+
</div>`;
|
|
1000
|
+
if (this._conversation.length === 0) return lit.html`
|
|
1001
|
+
<div class="cpk-td__empty-state">
|
|
1002
|
+
<svg
|
|
1003
|
+
width="28"
|
|
1004
|
+
height="28"
|
|
1005
|
+
viewBox="0 0 24 24"
|
|
1006
|
+
fill="none"
|
|
1007
|
+
stroke="currentColor"
|
|
1008
|
+
stroke-width="1.5"
|
|
1009
|
+
stroke-linecap="round"
|
|
1010
|
+
stroke-linejoin="round"
|
|
1011
|
+
>
|
|
1012
|
+
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
|
1013
|
+
</svg>
|
|
1014
|
+
<span>No messages yet</span>
|
|
1015
|
+
</div>
|
|
1016
|
+
`;
|
|
1017
|
+
return this.cachedPanelTpl("conversation", [
|
|
1018
|
+
this._conversation,
|
|
1019
|
+
this._expandedTools,
|
|
1020
|
+
this._expandedMessages
|
|
1021
|
+
], () => {
|
|
1022
|
+
return lit.html`${this.renderItems.map((item) => this.renderRenderItem(item))}`;
|
|
1023
|
+
});
|
|
1024
|
+
}
|
|
1025
|
+
/**
|
|
1026
|
+
* Memoize the rendered TemplateResult for `slot` keyed by tuple
|
|
1027
|
+
* element-wise reference equality. The hot path for tab switches: when
|
|
1028
|
+
* the underlying data hasn't changed, return the previously built
|
|
1029
|
+
* TemplateResult so Lit's diff short-circuits. Each panel's `key` is
|
|
1030
|
+
* the tuple of inputs the template reads — pass everything the template
|
|
1031
|
+
* depends on, or the cache will return stale output when those inputs
|
|
1032
|
+
* change without the listed key flipping.
|
|
1033
|
+
*/
|
|
1034
|
+
cachedPanelTpl(slot, key, build) {
|
|
1035
|
+
const cached = this._panelTplCache.get(slot);
|
|
1036
|
+
if (cached && cached.key.length === key.length && cached.key.every((v, i) => v === key[i])) return cached.tpl;
|
|
1037
|
+
const tpl = build();
|
|
1038
|
+
this._panelTplCache.set(slot, {
|
|
1039
|
+
key,
|
|
1040
|
+
tpl
|
|
1041
|
+
});
|
|
1042
|
+
return tpl;
|
|
1043
|
+
}
|
|
1044
|
+
renderRenderItem(item) {
|
|
1045
|
+
switch (item.type) {
|
|
1046
|
+
case "user":
|
|
1047
|
+
case "assistant": return this.renderBubble(item);
|
|
1048
|
+
case "tool_call": return this.renderToolBlock(item);
|
|
1049
|
+
case "tool_call_group": return this.renderToolGroup(item);
|
|
1050
|
+
case "reasoning": return lit.html`<div class="cpk-td__inline-chip">
|
|
1051
|
+
<span>Reasoned for ${item.duration}</span>
|
|
1052
|
+
</div>`;
|
|
1053
|
+
case "state_update": return lit.html`
|
|
1054
|
+
<div class="cpk-td__inline-chip">
|
|
1055
|
+
<span>Updated agent state</span>
|
|
1056
|
+
</div>
|
|
1057
|
+
`;
|
|
1058
|
+
case "generative-ui": return this.renderGenerativeUI(item);
|
|
1059
|
+
case "agent_responded": return lit.nothing;
|
|
1060
|
+
}
|
|
1061
|
+
}
|
|
1062
|
+
renderBubble(item) {
|
|
1063
|
+
const isUser = item.type === "user";
|
|
1064
|
+
const threshold = ɵCpkThreadDetails.COLLAPSE_THRESHOLD;
|
|
1065
|
+
const expanded = this._expandedMessages.has(item.id);
|
|
1066
|
+
const tooLong = item.content.length > threshold;
|
|
1067
|
+
const shown = tooLong && !expanded ? item.content.slice(0, threshold) + "…" : item.content;
|
|
1068
|
+
return lit.html`
|
|
1069
|
+
<div
|
|
1070
|
+
class="cpk-td__bubble ${isUser ? "cpk-td__bubble--user" : "cpk-td__bubble--assistant"}"
|
|
1071
|
+
>
|
|
1072
|
+
<div
|
|
1073
|
+
class="cpk-td__bubble-inner ${isUser ? "cpk-td__bubble-inner--user" : "cpk-td__bubble-inner--assistant"}"
|
|
1074
|
+
>
|
|
1075
|
+
${shown}
|
|
1076
|
+
${tooLong ? lit.html`<span
|
|
1077
|
+
class="cpk-td__show-more"
|
|
1078
|
+
@click=${() => this.toggleMessageExpand(item.id)}
|
|
1079
|
+
>${expanded ? "Show less" : "Show more"}</span
|
|
1080
|
+
>` : lit.nothing}
|
|
1081
|
+
</div>
|
|
1082
|
+
</div>
|
|
1083
|
+
`;
|
|
1084
|
+
}
|
|
1085
|
+
renderToolBlock(item) {
|
|
1086
|
+
const expanded = this._expandedTools.has(item.id);
|
|
1087
|
+
return lit.html`
|
|
1088
|
+
<div class="cpk-td__tool-block">
|
|
1089
|
+
<div
|
|
1090
|
+
class="cpk-td__tool-header"
|
|
1091
|
+
@click=${() => this.toggleToolExpand(item.id)}
|
|
1092
|
+
>
|
|
1093
|
+
<svg width="10" height="10" viewBox="0 0 10 10" fill="none">
|
|
1094
|
+
<path
|
|
1095
|
+
d="M1 9C1 9 2 7 5 7C8 7 9 9 9 9M5 1C5 1 7 2.5 7 4.5C7 6.5 5 7 5 7C5 7 3 6.5 3 4.5C3 2.5 5 1 5 1Z"
|
|
1096
|
+
stroke="#189370"
|
|
1097
|
+
stroke-width="1.2"
|
|
1098
|
+
stroke-linecap="round"
|
|
1099
|
+
stroke-linejoin="round"
|
|
1100
|
+
/>
|
|
1101
|
+
</svg>
|
|
1102
|
+
<span class="cpk-td__tool-name">${item.toolName}</span>
|
|
1103
|
+
${item.result || Object.keys(item.arguments).length > 0 ? lit.html`
|
|
1104
|
+
<span class="cpk-td__tool-status">DONE</span>
|
|
1105
|
+
` : lit.html`
|
|
1106
|
+
<span class="cpk-td__tool-status cpk-td__tool-status--pending">PENDING</span>
|
|
1107
|
+
`}
|
|
1108
|
+
<span class="cpk-td__tool-chevron">${expanded ? "▾" : "▸"}</span>
|
|
1109
|
+
</div>
|
|
1110
|
+
${expanded ? lit.html`
|
|
1111
|
+
<div class="cpk-td__tool-body">
|
|
1112
|
+
<div class="cpk-td__tool-section-label">Arguments</div>
|
|
1113
|
+
<pre class="cpk-td__tool-pre">
|
|
1114
|
+
${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(item.arguments))}</pre
|
|
1115
|
+
>
|
|
1116
|
+
${item.result ? lit.html`
|
|
1117
|
+
<div
|
|
1118
|
+
class="cpk-td__tool-section-label"
|
|
1119
|
+
style="margin-top:8px"
|
|
1120
|
+
>
|
|
1121
|
+
Result
|
|
1122
|
+
</div>
|
|
1123
|
+
<pre class="cpk-td__tool-pre">
|
|
1124
|
+
${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(item.result))}</pre
|
|
1125
|
+
>
|
|
1126
|
+
` : lit.nothing}
|
|
1127
|
+
</div>
|
|
1128
|
+
` : lit.nothing}
|
|
1129
|
+
</div>
|
|
1130
|
+
`;
|
|
1131
|
+
}
|
|
1132
|
+
renderToolGroup(group) {
|
|
1133
|
+
return lit.html`
|
|
1134
|
+
<div class="cpk-td__tool-group">
|
|
1135
|
+
<div class="cpk-td__tool-group-header">
|
|
1136
|
+
${group.items.length} tool call${group.items.length !== 1 ? "s" : ""}
|
|
1137
|
+
</div>
|
|
1138
|
+
${group.items.map((tc) => this.renderToolBlock(tc))}
|
|
1139
|
+
</div>
|
|
1140
|
+
`;
|
|
1141
|
+
}
|
|
1142
|
+
renderGenerativeUI(item) {
|
|
1143
|
+
return lit.html`
|
|
1144
|
+
<div class="cpk-td__genui">
|
|
1145
|
+
<div class="cpk-td__genui-badge">
|
|
1146
|
+
<svg width="9" height="9" viewBox="0 0 24 24" fill="currentColor">
|
|
1147
|
+
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
|
|
1148
|
+
</svg>
|
|
1149
|
+
Generative UI
|
|
1150
|
+
</div>
|
|
1151
|
+
<div class="cpk-td__genui-placeholder">
|
|
1152
|
+
${item.activityType} — rendered in chat
|
|
1153
|
+
</div>
|
|
1154
|
+
</div>
|
|
1155
|
+
`;
|
|
1156
|
+
}
|
|
1157
|
+
renderState() {
|
|
1158
|
+
if (this._loadingState) return lit.html`
|
|
1159
|
+
<div class="cpk-td__status">Loading state…</div>
|
|
1160
|
+
`;
|
|
1161
|
+
if (this._stateError) return lit.html`<div class="cpk-td__status cpk-td__status--error">
|
|
1162
|
+
${this._stateError}
|
|
1163
|
+
</div>`;
|
|
1164
|
+
if (this._stateNotAvailable) return lit.html`
|
|
1165
|
+
<div class="cpk-td__empty-state">
|
|
1166
|
+
<svg
|
|
1167
|
+
width="28"
|
|
1168
|
+
height="28"
|
|
1169
|
+
viewBox="0 0 24 24"
|
|
1170
|
+
fill="none"
|
|
1171
|
+
stroke="currentColor"
|
|
1172
|
+
stroke-width="1.5"
|
|
1173
|
+
stroke-linecap="round"
|
|
1174
|
+
stroke-linejoin="round"
|
|
1175
|
+
>
|
|
1176
|
+
<ellipse cx="12" cy="5" rx="9" ry="3" />
|
|
1177
|
+
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
|
|
1178
|
+
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
|
|
1179
|
+
</svg>
|
|
1180
|
+
<span>State history not available</span>
|
|
1181
|
+
<span class="cpk-td__empty-hint"
|
|
1182
|
+
>This runtime doesn't yet expose per-thread agent state. Available when
|
|
1183
|
+
running against the in-memory runner.</span
|
|
1184
|
+
>
|
|
1185
|
+
</div>
|
|
1186
|
+
`;
|
|
1187
|
+
if (!this.hasRenderableState()) return lit.html`
|
|
1188
|
+
<div class="cpk-td__empty-state">
|
|
1189
|
+
<svg
|
|
1190
|
+
width="28"
|
|
1191
|
+
height="28"
|
|
1192
|
+
viewBox="0 0 24 24"
|
|
1193
|
+
fill="none"
|
|
1194
|
+
stroke="currentColor"
|
|
1195
|
+
stroke-width="1.5"
|
|
1196
|
+
stroke-linecap="round"
|
|
1197
|
+
stroke-linejoin="round"
|
|
1198
|
+
>
|
|
1199
|
+
<ellipse cx="12" cy="5" rx="9" ry="3" />
|
|
1200
|
+
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
|
|
1201
|
+
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
|
|
1202
|
+
</svg>
|
|
1203
|
+
<span>No state captured</span>
|
|
1204
|
+
<span class="cpk-td__empty-hint"
|
|
1205
|
+
>Emitted live from STATE_SNAPSHOT events.</span
|
|
1206
|
+
>
|
|
1207
|
+
</div>
|
|
1208
|
+
`;
|
|
1209
|
+
const stateValue = this.activeState;
|
|
1210
|
+
return this.cachedPanelTpl("agent-state", [stateValue], () => {
|
|
1211
|
+
return lit.html`<pre class="cpk-td__json-block">
|
|
1212
|
+
${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</pre
|
|
1213
|
+
>`;
|
|
1214
|
+
});
|
|
1215
|
+
}
|
|
1216
|
+
renderEvents() {
|
|
1217
|
+
if (this._loadingEvents) return lit.html`
|
|
1218
|
+
<div class="cpk-td__status">Loading events…</div>
|
|
1219
|
+
`;
|
|
1220
|
+
if (this._eventsError) return lit.html`<div class="cpk-td__status cpk-td__status--error">
|
|
1221
|
+
${this._eventsError}
|
|
1222
|
+
</div>`;
|
|
1223
|
+
if (this._eventsNotAvailable) return lit.html`
|
|
1224
|
+
<div class="cpk-td__empty-state">
|
|
1225
|
+
<span>Event history not available</span>
|
|
1226
|
+
<span class="cpk-td__empty-hint"
|
|
1227
|
+
>This runtime doesn't yet expose per-thread AG-UI events. Available when
|
|
1228
|
+
running against the in-memory runner.</span
|
|
1229
|
+
>
|
|
1230
|
+
</div>
|
|
1231
|
+
`;
|
|
1232
|
+
const events = this.activeEvents;
|
|
1233
|
+
if (events.length === 0) return lit.html`
|
|
1234
|
+
<div class="cpk-td__empty-state">
|
|
1235
|
+
<span>No events captured</span>
|
|
1236
|
+
<span class="cpk-td__empty-hint"
|
|
1237
|
+
>Events are recorded live. Run the agent to see them here.</span
|
|
1238
|
+
>
|
|
1239
|
+
</div>
|
|
1240
|
+
`;
|
|
1241
|
+
return this.cachedPanelTpl("ag-ui-events", [events], () => {
|
|
1242
|
+
return lit.html`${events.map((event) => {
|
|
1243
|
+
const { bg, fg } = eventColors(event.type);
|
|
1244
|
+
return lit.html`
|
|
1245
|
+
<div class="cpk-td__event">
|
|
1246
|
+
<div class="cpk-td__event-header" style="background:${bg}">
|
|
1247
|
+
<span class="cpk-td__event-type" style="color:${fg}"
|
|
1248
|
+
>${event.type}</span
|
|
1249
|
+
>
|
|
1250
|
+
<span class="cpk-td__event-time"
|
|
1251
|
+
>${formatTimestamp(event.timestamp)}</span
|
|
1252
|
+
>
|
|
1253
|
+
</div>
|
|
1254
|
+
<pre class="cpk-td__event-payload">
|
|
1255
|
+
${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}</pre
|
|
1256
|
+
>
|
|
1257
|
+
</div>
|
|
1258
|
+
`;
|
|
1259
|
+
})}`;
|
|
1260
|
+
});
|
|
1261
|
+
}
|
|
1262
|
+
renderPanelToggle() {
|
|
1263
|
+
return lit.html`
|
|
1264
|
+
<button
|
|
1265
|
+
class="cpk-td__panel-toggle ${this._showDetailPanel ? "cpk-td__panel-toggle--active" : ""}"
|
|
1266
|
+
@click=${() => {
|
|
1267
|
+
this._showDetailPanel = !this._showDetailPanel;
|
|
1268
|
+
}}
|
|
1269
|
+
title="Toggle thread details"
|
|
1270
|
+
type="button"
|
|
1271
|
+
>
|
|
1272
|
+
<svg
|
|
1273
|
+
width="14"
|
|
1274
|
+
height="14"
|
|
1275
|
+
viewBox="0 0 24 24"
|
|
1276
|
+
fill="none"
|
|
1277
|
+
stroke="currentColor"
|
|
1278
|
+
stroke-width="2"
|
|
1279
|
+
stroke-linecap="round"
|
|
1280
|
+
stroke-linejoin="round"
|
|
1281
|
+
>
|
|
1282
|
+
<rect x="3" y="3" width="18" height="18" rx="2" />
|
|
1283
|
+
<line x1="15" y1="3" x2="15" y2="21" />
|
|
1284
|
+
</svg>
|
|
1285
|
+
</button>
|
|
1286
|
+
`;
|
|
1287
|
+
}
|
|
1288
|
+
renderDetailPanel() {
|
|
1289
|
+
var _this$thread, _this$thread$name, _this$thread2, _this$thread$agentId, _this$thread3, _this$thread$createdB, _this$thread4, _this$thread5, _this$thread6;
|
|
1290
|
+
const counts = this.activityCounts;
|
|
1291
|
+
return lit.html`
|
|
1292
|
+
<!-- Thread -->
|
|
1293
|
+
<div class="cpk-tdp__section-title">Thread</div>
|
|
1294
|
+
<div class="cpk-tdp__row">
|
|
1295
|
+
<span class="cpk-tdp__label">ID</span>
|
|
1296
|
+
<span class="cpk-tdp__value cpk-tdp__value--wrap"
|
|
1297
|
+
>${this.shortId((_this$thread = this.thread) === null || _this$thread === void 0 ? void 0 : _this$thread.id)}</span
|
|
1298
|
+
>
|
|
1299
|
+
</div>
|
|
1300
|
+
<div class="cpk-tdp__row">
|
|
1301
|
+
<span class="cpk-tdp__label">Name</span>
|
|
1302
|
+
<span class="cpk-tdp__value">${(_this$thread$name = (_this$thread2 = this.thread) === null || _this$thread2 === void 0 ? void 0 : _this$thread2.name) !== null && _this$thread$name !== void 0 ? _this$thread$name : "—"}</span>
|
|
1303
|
+
</div>
|
|
1304
|
+
<div class="cpk-tdp__row">
|
|
1305
|
+
<span class="cpk-tdp__label">Agent</span>
|
|
1306
|
+
<span class="cpk-tdp__value cpk-tdp__value--truncate"
|
|
1307
|
+
>${(_this$thread$agentId = (_this$thread3 = this.thread) === null || _this$thread3 === void 0 ? void 0 : _this$thread3.agentId) !== null && _this$thread$agentId !== void 0 ? _this$thread$agentId : "—"}</span
|
|
1308
|
+
>
|
|
1309
|
+
</div>
|
|
1310
|
+
<div class="cpk-tdp__row">
|
|
1311
|
+
<span class="cpk-tdp__label">Created by</span>
|
|
1312
|
+
<span class="cpk-tdp__value cpk-tdp__value--truncate"
|
|
1313
|
+
>${(_this$thread$createdB = (_this$thread4 = this.thread) === null || _this$thread4 === void 0 ? void 0 : _this$thread4.createdById) !== null && _this$thread$createdB !== void 0 ? _this$thread$createdB : "—"}</span
|
|
1314
|
+
>
|
|
1315
|
+
</div>
|
|
1316
|
+
|
|
1317
|
+
<div class="cpk-tdp__divider"></div>
|
|
1318
|
+
|
|
1319
|
+
<!-- Timestamps -->
|
|
1320
|
+
<div class="cpk-tdp__section-title">Timestamps</div>
|
|
1321
|
+
<div class="cpk-tdp__row">
|
|
1322
|
+
<span class="cpk-tdp__label">Created</span>
|
|
1323
|
+
<span class="cpk-tdp__value">${this.fmtTime((_this$thread5 = this.thread) === null || _this$thread5 === void 0 ? void 0 : _this$thread5.createdAt)}</span>
|
|
1324
|
+
</div>
|
|
1325
|
+
<div class="cpk-tdp__row">
|
|
1326
|
+
<span class="cpk-tdp__label">Updated</span>
|
|
1327
|
+
<span class="cpk-tdp__value">${this.fmtTime((_this$thread6 = this.thread) === null || _this$thread6 === void 0 ? void 0 : _this$thread6.updatedAt)}</span>
|
|
1328
|
+
</div>
|
|
1329
|
+
<div class="cpk-tdp__row">
|
|
1330
|
+
<span class="cpk-tdp__label">Duration</span>
|
|
1331
|
+
<span class="cpk-tdp__value">${this.duration}</span>
|
|
1332
|
+
</div>
|
|
1333
|
+
|
|
1334
|
+
<div class="cpk-tdp__divider"></div>
|
|
1335
|
+
|
|
1336
|
+
<!-- Activity -->
|
|
1337
|
+
<div class="cpk-tdp__section-title">Activity</div>
|
|
1338
|
+
<div class="cpk-tdp__row">
|
|
1339
|
+
<span class="cpk-tdp__label">Messages</span>
|
|
1340
|
+
<span class="cpk-tdp__value">${counts.messages}</span>
|
|
1341
|
+
</div>
|
|
1342
|
+
<div class="cpk-tdp__row">
|
|
1343
|
+
<span class="cpk-tdp__label">Tool calls</span>
|
|
1344
|
+
<span class="cpk-tdp__value">${counts.toolCalls}</span>
|
|
1345
|
+
</div>
|
|
1346
|
+
<div class="cpk-tdp__row">
|
|
1347
|
+
<span class="cpk-tdp__label">AG-UI events</span>
|
|
1348
|
+
<span class="cpk-tdp__value">${this.activeEvents.length}</span>
|
|
1349
|
+
</div>
|
|
1350
|
+
`;
|
|
1351
|
+
}
|
|
1352
|
+
};
|
|
1353
|
+
ɵCpkThreadDetails.properties = {
|
|
1354
|
+
threadId: { attribute: false },
|
|
1355
|
+
thread: { attribute: false },
|
|
1356
|
+
runtimeUrl: { attribute: false },
|
|
1357
|
+
headers: { attribute: false },
|
|
1358
|
+
agentStateInput: { attribute: false },
|
|
1359
|
+
agentEventsInput: { attribute: false },
|
|
1360
|
+
liveMessageVersion: { attribute: false },
|
|
1361
|
+
_tab: { state: true },
|
|
1362
|
+
_conversation: { state: true },
|
|
1363
|
+
_fetchedEvents: { state: true },
|
|
1364
|
+
_fetchedState: { state: true },
|
|
1365
|
+
_loadingMessages: { state: true },
|
|
1366
|
+
_loadingEvents: { state: true },
|
|
1367
|
+
_loadingState: { state: true },
|
|
1368
|
+
_messagesError: { state: true },
|
|
1369
|
+
_eventsError: { state: true },
|
|
1370
|
+
_stateError: { state: true },
|
|
1371
|
+
_expandedTools: { state: true },
|
|
1372
|
+
_expandedMessages: { state: true },
|
|
1373
|
+
_showDetailPanel: { state: true },
|
|
1374
|
+
_detailPanelWidth: { state: true },
|
|
1375
|
+
_eventsNotAvailable: { state: true },
|
|
1376
|
+
_stateNotAvailable: { state: true },
|
|
1377
|
+
_panelInitializing: { state: true },
|
|
1378
|
+
_activatedTabs: { state: true }
|
|
1379
|
+
};
|
|
1380
|
+
ɵCpkThreadDetails.COLLAPSE_THRESHOLD = 800;
|
|
1381
|
+
ɵCpkThreadDetails.TAB_LIST = [
|
|
1382
|
+
{
|
|
1383
|
+
id: "conversation",
|
|
1384
|
+
label: "Conversation"
|
|
1385
|
+
},
|
|
1386
|
+
{
|
|
1387
|
+
id: "agent-state",
|
|
1388
|
+
label: "Agent State"
|
|
1389
|
+
},
|
|
1390
|
+
{
|
|
1391
|
+
id: "ag-ui-events",
|
|
1392
|
+
label: "AG-UI Events"
|
|
1393
|
+
}
|
|
1394
|
+
];
|
|
1395
|
+
ɵCpkThreadDetails.styles = lit.css`
|
|
1396
|
+
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&family=Spline+Sans+Mono:wght@400;500&display=swap");
|
|
1397
|
+
|
|
1398
|
+
/* ── Root ────────────────────────────────────────────────────────── */
|
|
1399
|
+
:host {
|
|
1400
|
+
display: flex;
|
|
1401
|
+
flex-direction: row;
|
|
1402
|
+
overflow: hidden;
|
|
1403
|
+
}
|
|
1404
|
+
|
|
1405
|
+
.cpk-td {
|
|
1406
|
+
font-family: "Plus Jakarta Sans", sans-serif;
|
|
1407
|
+
font-size: 13px;
|
|
1408
|
+
display: flex;
|
|
1409
|
+
flex-direction: row;
|
|
1410
|
+
width: 100%;
|
|
1411
|
+
height: 100%;
|
|
1412
|
+
overflow: hidden;
|
|
1413
|
+
background: #ffffff;
|
|
1414
|
+
}
|
|
1415
|
+
|
|
1416
|
+
/* ── Left area ───────────────────────────────────────────────────── */
|
|
1417
|
+
.cpk-td__left {
|
|
1418
|
+
flex: 1;
|
|
1419
|
+
min-width: 0;
|
|
1420
|
+
display: flex;
|
|
1421
|
+
flex-direction: column;
|
|
1422
|
+
overflow: hidden;
|
|
1423
|
+
}
|
|
1424
|
+
|
|
1425
|
+
/* ── Tab bar header ──────────────────────────────────────────────── */
|
|
1426
|
+
.cpk-td__tabs-header {
|
|
1427
|
+
/* No top/right padding so tabs and toggle sit flush against the
|
|
1428
|
+
top and right edges of the inspector. */
|
|
1429
|
+
padding: 0 0 0 12px;
|
|
1430
|
+
border-bottom: 1px solid #dbdbe5;
|
|
1431
|
+
flex-shrink: 0;
|
|
1432
|
+
display: flex;
|
|
1433
|
+
align-items: stretch;
|
|
1434
|
+
}
|
|
1435
|
+
|
|
1436
|
+
.cpk-td__tab-group {
|
|
1437
|
+
display: flex;
|
|
1438
|
+
gap: 0;
|
|
1439
|
+
margin-bottom: -1px;
|
|
1440
|
+
/* Allow the tab list to shrink rather than pushing the panel-toggle
|
|
1441
|
+
button past the right edge of the inspector when horizontal space
|
|
1442
|
+
gets tight (the drawer being open eats noticeably into width). */
|
|
1443
|
+
min-width: 0;
|
|
1444
|
+
flex-shrink: 1;
|
|
1445
|
+
overflow: hidden;
|
|
1446
|
+
}
|
|
1447
|
+
|
|
1448
|
+
.cpk-td__tab {
|
|
1449
|
+
font-family: "Plus Jakarta Sans", sans-serif;
|
|
1450
|
+
font-size: 11px;
|
|
1451
|
+
font-weight: 500;
|
|
1452
|
+
padding: 10px 12px;
|
|
1453
|
+
border: none;
|
|
1454
|
+
border-bottom: 2px solid transparent;
|
|
1455
|
+
cursor: pointer;
|
|
1456
|
+
background: transparent;
|
|
1457
|
+
color: #838389;
|
|
1458
|
+
transition:
|
|
1459
|
+
color 0.12s,
|
|
1460
|
+
border-color 0.12s;
|
|
1461
|
+
white-space: nowrap;
|
|
1462
|
+
}
|
|
1463
|
+
|
|
1464
|
+
.cpk-td__tab:hover {
|
|
1465
|
+
color: #010507;
|
|
1466
|
+
}
|
|
1467
|
+
|
|
1468
|
+
.cpk-td__tab--active {
|
|
1469
|
+
color: #010507;
|
|
1470
|
+
border-bottom-color: #bec2ff;
|
|
1471
|
+
}
|
|
1472
|
+
|
|
1473
|
+
/* Toggle is a separate control, not a tab — so it does NOT use the
|
|
1474
|
+
tabs' bottom-border active indicator. Instead, a subtle filled
|
|
1475
|
+
state communicates "the drawer is open," and a vertical separator
|
|
1476
|
+
on the left visually divorces it from the tab group. */
|
|
1477
|
+
.cpk-td__panel-toggle {
|
|
1478
|
+
margin-left: auto;
|
|
1479
|
+
align-self: stretch;
|
|
1480
|
+
display: flex;
|
|
1481
|
+
align-items: center;
|
|
1482
|
+
justify-content: center;
|
|
1483
|
+
padding: 0 12px;
|
|
1484
|
+
border: none;
|
|
1485
|
+
border-left: 1px solid #dbdbe5;
|
|
1486
|
+
background: transparent;
|
|
1487
|
+
color: #838389;
|
|
1488
|
+
cursor: pointer;
|
|
1489
|
+
flex-shrink: 0;
|
|
1490
|
+
transition:
|
|
1491
|
+
color 0.12s,
|
|
1492
|
+
background 0.12s;
|
|
1493
|
+
}
|
|
1494
|
+
.cpk-td__panel-toggle:hover {
|
|
1495
|
+
color: #010507;
|
|
1496
|
+
background: #f4f4f9;
|
|
1497
|
+
}
|
|
1498
|
+
.cpk-td__panel-toggle--active {
|
|
1499
|
+
color: #5558b2;
|
|
1500
|
+
background: #eee6fe;
|
|
1501
|
+
}
|
|
1502
|
+
.cpk-td__panel-toggle--active:hover {
|
|
1503
|
+
background: #e4d8fc;
|
|
1504
|
+
}
|
|
1505
|
+
|
|
1506
|
+
/* ── Scrollable content ──────────────────────────────────────────── */
|
|
1507
|
+
.cpk-td__content {
|
|
1508
|
+
flex: 1;
|
|
1509
|
+
overflow-y: auto;
|
|
1510
|
+
padding: 16px;
|
|
1511
|
+
display: flex;
|
|
1512
|
+
flex-direction: column;
|
|
1513
|
+
gap: 8px;
|
|
1514
|
+
}
|
|
1515
|
+
|
|
1516
|
+
/* Pin direct children so expanded tool bodies don't get flex-shrunk. */
|
|
1517
|
+
.cpk-td__content > * {
|
|
1518
|
+
flex-shrink: 0;
|
|
1519
|
+
}
|
|
1520
|
+
|
|
1521
|
+
/*
|
|
1522
|
+
* Each tab's content is wrapped in this panel so the keep-mounted
|
|
1523
|
+
* inactive panels can be hidden via display:none without disturbing
|
|
1524
|
+
* the gap between visible siblings. The flex column + gap gives each
|
|
1525
|
+
* conversation item / event row breathing room (the cpk-td__content
|
|
1526
|
+
* rule above no longer reaches them now that they are nested inside
|
|
1527
|
+
* the per-panel wrapper).
|
|
1528
|
+
*/
|
|
1529
|
+
.cpk-td__panel {
|
|
1530
|
+
display: flex;
|
|
1531
|
+
flex-direction: column;
|
|
1532
|
+
gap: 12px;
|
|
1533
|
+
}
|
|
1534
|
+
.cpk-td__panel > * {
|
|
1535
|
+
flex-shrink: 0;
|
|
1536
|
+
}
|
|
1537
|
+
|
|
1538
|
+
/* ── Empty state ─────────────────────────────────────────────────── */
|
|
1539
|
+
.cpk-td__empty-state {
|
|
1540
|
+
flex: 1;
|
|
1541
|
+
display: flex;
|
|
1542
|
+
flex-direction: column;
|
|
1543
|
+
align-items: center;
|
|
1544
|
+
justify-content: center;
|
|
1545
|
+
gap: 8px;
|
|
1546
|
+
color: #838389;
|
|
1547
|
+
font-size: 13px;
|
|
1548
|
+
padding: 40px 0;
|
|
1549
|
+
}
|
|
1550
|
+
|
|
1551
|
+
.cpk-td__empty-hint {
|
|
1552
|
+
font-size: 11px;
|
|
1553
|
+
color: #838389;
|
|
1554
|
+
text-align: center;
|
|
1555
|
+
max-width: 220px;
|
|
1556
|
+
line-height: 1.5;
|
|
1557
|
+
}
|
|
1558
|
+
|
|
1559
|
+
/* ── Status messages ─────────────────────────────────────────────── */
|
|
1560
|
+
.cpk-td__status {
|
|
1561
|
+
padding: 16px;
|
|
1562
|
+
font-size: 12px;
|
|
1563
|
+
color: #838389;
|
|
1564
|
+
text-align: center;
|
|
1565
|
+
}
|
|
1566
|
+
|
|
1567
|
+
.cpk-td__status--error {
|
|
1568
|
+
color: #c0333a;
|
|
1569
|
+
}
|
|
1570
|
+
|
|
1571
|
+
/* ── Conversation bubbles ────────────────────────────────────────── */
|
|
1572
|
+
.cpk-td__bubble {
|
|
1573
|
+
display: flex;
|
|
1574
|
+
margin-bottom: 2px;
|
|
1575
|
+
}
|
|
1576
|
+
|
|
1577
|
+
.cpk-td__bubble--user {
|
|
1578
|
+
justify-content: flex-end;
|
|
1579
|
+
}
|
|
1580
|
+
|
|
1581
|
+
.cpk-td__bubble--assistant {
|
|
1582
|
+
justify-content: flex-start;
|
|
1583
|
+
}
|
|
1584
|
+
|
|
1585
|
+
.cpk-td__bubble-inner {
|
|
1586
|
+
padding: 9px 14px;
|
|
1587
|
+
max-width: 75%;
|
|
1588
|
+
font-size: 13px;
|
|
1589
|
+
line-height: 1.55;
|
|
1590
|
+
}
|
|
1591
|
+
|
|
1592
|
+
.cpk-td__bubble-inner--user {
|
|
1593
|
+
background: #eee6fe;
|
|
1594
|
+
color: #57575b;
|
|
1595
|
+
border-radius: 10px 10px 3px 10px;
|
|
1596
|
+
}
|
|
1597
|
+
|
|
1598
|
+
.cpk-td__show-more {
|
|
1599
|
+
display: inline-block;
|
|
1600
|
+
margin-top: 4px;
|
|
1601
|
+
font-size: 11px;
|
|
1602
|
+
font-weight: 500;
|
|
1603
|
+
color: #57575b;
|
|
1604
|
+
cursor: pointer;
|
|
1605
|
+
text-decoration: underline;
|
|
1606
|
+
text-underline-offset: 2px;
|
|
1607
|
+
}
|
|
1608
|
+
|
|
1609
|
+
.cpk-td__bubble-inner--assistant {
|
|
1610
|
+
background: #f7f7f9;
|
|
1611
|
+
color: #010507;
|
|
1612
|
+
border-radius: 10px 10px 10px 3px;
|
|
1613
|
+
border: 1px solid #e9e9ef;
|
|
1614
|
+
}
|
|
1615
|
+
|
|
1616
|
+
/* ── Tool call blocks ────────────────────────────────────────────── */
|
|
1617
|
+
.cpk-td__tool-block {
|
|
1618
|
+
border: 1px solid #e9e9ef;
|
|
1619
|
+
border-radius: 6px;
|
|
1620
|
+
overflow: hidden;
|
|
1621
|
+
}
|
|
1622
|
+
|
|
1623
|
+
.cpk-td__tool-header {
|
|
1624
|
+
display: flex;
|
|
1625
|
+
align-items: center;
|
|
1626
|
+
gap: 6px;
|
|
1627
|
+
padding: 6px 10px;
|
|
1628
|
+
background: rgba(133, 236, 206, 0.15);
|
|
1629
|
+
cursor: pointer;
|
|
1630
|
+
font-size: 11px;
|
|
1631
|
+
user-select: none;
|
|
1632
|
+
}
|
|
1633
|
+
|
|
1634
|
+
.cpk-td__tool-header:hover {
|
|
1635
|
+
background: rgba(133, 236, 206, 0.22);
|
|
1636
|
+
}
|
|
1637
|
+
|
|
1638
|
+
.cpk-td__tool-name {
|
|
1639
|
+
font-family: "Spline Sans Mono", monospace;
|
|
1640
|
+
font-size: 10px;
|
|
1641
|
+
font-weight: 500;
|
|
1642
|
+
color: #189370;
|
|
1643
|
+
text-transform: uppercase;
|
|
1644
|
+
flex: 1;
|
|
1645
|
+
}
|
|
1646
|
+
|
|
1647
|
+
.cpk-td__tool-status {
|
|
1648
|
+
font-family: "Spline Sans Mono", monospace;
|
|
1649
|
+
font-size: 9px;
|
|
1650
|
+
text-transform: uppercase;
|
|
1651
|
+
color: #189370;
|
|
1652
|
+
}
|
|
1653
|
+
|
|
1654
|
+
.cpk-td__tool-status--pending {
|
|
1655
|
+
color: #996300;
|
|
1656
|
+
}
|
|
1657
|
+
|
|
1658
|
+
.cpk-td__tool-chevron {
|
|
1659
|
+
color: #838389;
|
|
1660
|
+
font-size: 10px;
|
|
1661
|
+
}
|
|
1662
|
+
|
|
1663
|
+
.cpk-td__tool-body {
|
|
1664
|
+
padding: 8px 10px;
|
|
1665
|
+
border-top: 1px solid #e9e9ef;
|
|
1666
|
+
background: #ffffff;
|
|
1667
|
+
}
|
|
1668
|
+
|
|
1669
|
+
.cpk-td__tool-section-label {
|
|
1670
|
+
font-family: "Spline Sans Mono", monospace;
|
|
1671
|
+
font-size: 9px;
|
|
1672
|
+
font-weight: 500;
|
|
1673
|
+
color: #838389;
|
|
1674
|
+
text-transform: uppercase;
|
|
1675
|
+
margin-bottom: 4px;
|
|
1676
|
+
letter-spacing: 0.3px;
|
|
1677
|
+
}
|
|
1678
|
+
|
|
1679
|
+
.cpk-td__tool-pre {
|
|
1680
|
+
margin: 0;
|
|
1681
|
+
font-family: "Spline Sans Mono", monospace;
|
|
1682
|
+
font-size: 10px;
|
|
1683
|
+
background: #f7f7f9;
|
|
1684
|
+
padding: 6px 8px;
|
|
1685
|
+
border-radius: 4px;
|
|
1686
|
+
overflow-x: auto;
|
|
1687
|
+
white-space: pre-wrap;
|
|
1688
|
+
word-break: break-all;
|
|
1689
|
+
color: #010507;
|
|
1690
|
+
line-height: 1.6;
|
|
1691
|
+
}
|
|
1692
|
+
|
|
1693
|
+
/* ── Tool call group ─────────────────────────────────────────────── */
|
|
1694
|
+
.cpk-td__tool-group {
|
|
1695
|
+
border: 1px solid #e9e9ef;
|
|
1696
|
+
border-radius: 6px;
|
|
1697
|
+
overflow: hidden;
|
|
1698
|
+
}
|
|
1699
|
+
|
|
1700
|
+
.cpk-td__tool-group-header {
|
|
1701
|
+
padding: 5px 10px;
|
|
1702
|
+
background: rgba(133, 236, 206, 0.15);
|
|
1703
|
+
font-family: "Spline Sans Mono", monospace;
|
|
1704
|
+
font-size: 10px;
|
|
1705
|
+
color: #189370;
|
|
1706
|
+
text-transform: uppercase;
|
|
1707
|
+
font-weight: 500;
|
|
1708
|
+
border-bottom: 1px solid #e9e9ef;
|
|
1709
|
+
}
|
|
1710
|
+
|
|
1711
|
+
.cpk-td__tool-group .cpk-td__tool-block {
|
|
1712
|
+
border: none;
|
|
1713
|
+
border-bottom: 1px solid #e9e9ef;
|
|
1714
|
+
border-radius: 0;
|
|
1715
|
+
}
|
|
1716
|
+
|
|
1717
|
+
.cpk-td__tool-group .cpk-td__tool-block:last-child {
|
|
1718
|
+
border-bottom: none;
|
|
1719
|
+
}
|
|
1720
|
+
|
|
1721
|
+
/* ── Inline chips (reasoning / state update) ─────────────────────── */
|
|
1722
|
+
.cpk-td__inline-chip {
|
|
1723
|
+
display: flex;
|
|
1724
|
+
align-items: center;
|
|
1725
|
+
gap: 8px;
|
|
1726
|
+
padding: 5px 0;
|
|
1727
|
+
color: #838389;
|
|
1728
|
+
font-family: "Spline Sans Mono", monospace;
|
|
1729
|
+
font-size: 9px;
|
|
1730
|
+
text-transform: uppercase;
|
|
1731
|
+
}
|
|
1732
|
+
|
|
1733
|
+
.cpk-td__inline-chip::before,
|
|
1734
|
+
.cpk-td__inline-chip::after {
|
|
1735
|
+
content: "";
|
|
1736
|
+
flex: 1;
|
|
1737
|
+
height: 1px;
|
|
1738
|
+
background: #e9e9ef;
|
|
1739
|
+
}
|
|
1740
|
+
|
|
1741
|
+
/* ── Generative UI ──────────────────────────────────────────────── */
|
|
1742
|
+
@keyframes cpk-genui-enter {
|
|
1743
|
+
from {
|
|
1744
|
+
opacity: 0;
|
|
1745
|
+
transform: translateY(8px);
|
|
1746
|
+
}
|
|
1747
|
+
to {
|
|
1748
|
+
opacity: 1;
|
|
1749
|
+
transform: translateY(0);
|
|
1750
|
+
}
|
|
1751
|
+
}
|
|
1752
|
+
|
|
1753
|
+
.cpk-td__genui {
|
|
1754
|
+
display: flex;
|
|
1755
|
+
flex-direction: column;
|
|
1756
|
+
gap: 6px;
|
|
1757
|
+
padding: 4px 16px 8px;
|
|
1758
|
+
animation: cpk-genui-enter 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
1759
|
+
}
|
|
1760
|
+
|
|
1761
|
+
.cpk-td__genui-badge {
|
|
1762
|
+
display: inline-flex;
|
|
1763
|
+
align-items: center;
|
|
1764
|
+
gap: 4px;
|
|
1765
|
+
padding: 2px 8px;
|
|
1766
|
+
border-radius: 4px;
|
|
1767
|
+
background: #eee6fe;
|
|
1768
|
+
color: #57575b;
|
|
1769
|
+
font-size: 10px;
|
|
1770
|
+
font-weight: 600;
|
|
1771
|
+
align-self: flex-start;
|
|
1772
|
+
}
|
|
1773
|
+
|
|
1774
|
+
.cpk-td__genui-card {
|
|
1775
|
+
overflow: hidden;
|
|
1776
|
+
border-radius: 12px;
|
|
1777
|
+
border: 1px solid #e2e8f0;
|
|
1778
|
+
background: #fff;
|
|
1779
|
+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
|
|
1780
|
+
}
|
|
1781
|
+
|
|
1782
|
+
.cpk-td__genui-placeholder {
|
|
1783
|
+
padding: 8px 12px;
|
|
1784
|
+
border-radius: 8px;
|
|
1785
|
+
border: 1px solid #ede9fe;
|
|
1786
|
+
background: #f5f3ff;
|
|
1787
|
+
color: #7c3aed;
|
|
1788
|
+
font-size: 11px;
|
|
1789
|
+
}
|
|
1790
|
+
|
|
1791
|
+
/* ── AG-UI Events ────────────────────────────────────────────────── */
|
|
1792
|
+
.cpk-td__event {
|
|
1793
|
+
flex-shrink: 0;
|
|
1794
|
+
border: 1px solid #e9e9ef;
|
|
1795
|
+
border-radius: 6px;
|
|
1796
|
+
overflow: hidden;
|
|
1797
|
+
/*
|
|
1798
|
+
* content-visibility: auto lets the browser skip layout + paint for
|
|
1799
|
+
* off-screen events while keeping them in the DOM (so scroll size
|
|
1800
|
+
* stays correct). Without this, switching back to AG-UI Events on a
|
|
1801
|
+
* thread with hundreds of events triggers a full layout pass over
|
|
1802
|
+
* every event row, which on Martha's intelligence-backed example
|
|
1803
|
+
* shows up as a multi-second freeze each time the panel becomes
|
|
1804
|
+
* visible. The intrinsic-size hint avoids the visible jump as the
|
|
1805
|
+
* browser swaps in real heights when items scroll into view.
|
|
1806
|
+
*/
|
|
1807
|
+
content-visibility: auto;
|
|
1808
|
+
contain-intrinsic-size: 0 80px;
|
|
1809
|
+
}
|
|
1810
|
+
|
|
1811
|
+
.cpk-td__event-header {
|
|
1812
|
+
display: flex;
|
|
1813
|
+
justify-content: space-between;
|
|
1814
|
+
align-items: center;
|
|
1815
|
+
padding: 5px 10px;
|
|
1816
|
+
}
|
|
1817
|
+
|
|
1818
|
+
.cpk-td__event-type {
|
|
1819
|
+
font-family: "Spline Sans Mono", monospace;
|
|
1820
|
+
font-size: 9px;
|
|
1821
|
+
font-weight: 500;
|
|
1822
|
+
text-transform: uppercase;
|
|
1823
|
+
}
|
|
1824
|
+
|
|
1825
|
+
.cpk-td__event-time {
|
|
1826
|
+
font-family: "Spline Sans Mono", monospace;
|
|
1827
|
+
font-size: 9px;
|
|
1828
|
+
color: #838389;
|
|
1829
|
+
}
|
|
1830
|
+
|
|
1831
|
+
.cpk-td__event-payload {
|
|
1832
|
+
margin: 0;
|
|
1833
|
+
font-family: "Spline Sans Mono", monospace;
|
|
1834
|
+
font-size: 10px;
|
|
1835
|
+
line-height: 1.6;
|
|
1836
|
+
white-space: pre-wrap;
|
|
1837
|
+
word-break: break-all;
|
|
1838
|
+
color: #57575b;
|
|
1839
|
+
padding: 8px 10px;
|
|
1840
|
+
border-top: 1px solid #e9e9ef;
|
|
1841
|
+
}
|
|
1842
|
+
|
|
1843
|
+
/* ── JSON block (agent state) ────────────────────────────────────── */
|
|
1844
|
+
.cpk-td__json-block {
|
|
1845
|
+
margin: 0;
|
|
1846
|
+
font-family: "Spline Sans Mono", monospace;
|
|
1847
|
+
font-size: 11px;
|
|
1848
|
+
line-height: 1.8;
|
|
1849
|
+
white-space: pre-wrap;
|
|
1850
|
+
word-break: break-all;
|
|
1851
|
+
color: #57575b;
|
|
1852
|
+
}
|
|
1853
|
+
|
|
1854
|
+
/* ── Resize divider ──────────────────────────────────────────────── */
|
|
1855
|
+
/* Floats over the drawer's left edge so the toggle and the drawer
|
|
1856
|
+
touch directly without a 4px flex-gap between them. The hit zone
|
|
1857
|
+
is wider than its visual hint to make it easy to grab. */
|
|
1858
|
+
.cpk-td__detail-divider {
|
|
1859
|
+
position: absolute;
|
|
1860
|
+
top: 0;
|
|
1861
|
+
bottom: 0;
|
|
1862
|
+
left: -3px;
|
|
1863
|
+
width: 7px;
|
|
1864
|
+
cursor: col-resize;
|
|
1865
|
+
background: transparent;
|
|
1866
|
+
z-index: 5;
|
|
1867
|
+
}
|
|
1868
|
+
|
|
1869
|
+
.cpk-td__detail-divider:hover {
|
|
1870
|
+
background: rgba(190, 194, 255, 0.3);
|
|
1871
|
+
}
|
|
1872
|
+
|
|
1873
|
+
/* ── Right detail panel ──────────────────────────────────────────── */
|
|
1874
|
+
.cpk-td__detail {
|
|
1875
|
+
flex-shrink: 0;
|
|
1876
|
+
overflow: hidden;
|
|
1877
|
+
background: #f7f7f9;
|
|
1878
|
+
display: flex;
|
|
1879
|
+
flex-direction: column;
|
|
1880
|
+
gap: 0;
|
|
1881
|
+
padding: 0;
|
|
1882
|
+
box-sizing: border-box;
|
|
1883
|
+
position: relative;
|
|
1884
|
+
/* Slide open/closed via width + padding transition. When closed,
|
|
1885
|
+
width and padding are 0 so the drawer fully collapses. */
|
|
1886
|
+
transition:
|
|
1887
|
+
width 220ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
1888
|
+
padding 220ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
1889
|
+
}
|
|
1890
|
+
|
|
1891
|
+
.cpk-td__detail[data-open="true"] {
|
|
1892
|
+
overflow-y: auto;
|
|
1893
|
+
padding: 16px;
|
|
1894
|
+
}
|
|
1895
|
+
|
|
1896
|
+
.cpk-tdp__section-title {
|
|
1897
|
+
font-family: "Spline Sans Mono", monospace;
|
|
1898
|
+
font-size: 10px;
|
|
1899
|
+
font-weight: 500;
|
|
1900
|
+
color: #838389;
|
|
1901
|
+
text-transform: uppercase;
|
|
1902
|
+
letter-spacing: 0.6px;
|
|
1903
|
+
margin-bottom: 8px;
|
|
1904
|
+
}
|
|
1905
|
+
|
|
1906
|
+
.cpk-tdp__divider {
|
|
1907
|
+
height: 1px;
|
|
1908
|
+
background: #dbdbe5;
|
|
1909
|
+
margin: 14px 0;
|
|
1910
|
+
}
|
|
1911
|
+
|
|
1912
|
+
.cpk-tdp__row {
|
|
1913
|
+
display: flex;
|
|
1914
|
+
justify-content: space-between;
|
|
1915
|
+
align-items: flex-start;
|
|
1916
|
+
padding: 3px 0;
|
|
1917
|
+
gap: 8px;
|
|
1918
|
+
}
|
|
1919
|
+
|
|
1920
|
+
.cpk-tdp__label {
|
|
1921
|
+
color: #838389;
|
|
1922
|
+
font-size: 11px;
|
|
1923
|
+
white-space: nowrap;
|
|
1924
|
+
flex-shrink: 0;
|
|
1925
|
+
}
|
|
1926
|
+
|
|
1927
|
+
.cpk-tdp__value {
|
|
1928
|
+
color: #010507;
|
|
1929
|
+
font-family: "Spline Sans Mono", monospace;
|
|
1930
|
+
font-size: 11px;
|
|
1931
|
+
text-align: right;
|
|
1932
|
+
min-width: 0;
|
|
1933
|
+
}
|
|
1934
|
+
|
|
1935
|
+
.cpk-tdp__value--truncate {
|
|
1936
|
+
overflow: hidden;
|
|
1937
|
+
text-overflow: ellipsis;
|
|
1938
|
+
white-space: nowrap;
|
|
1939
|
+
max-width: 130px;
|
|
1940
|
+
}
|
|
1941
|
+
|
|
1942
|
+
.cpk-tdp__value--wrap {
|
|
1943
|
+
white-space: normal;
|
|
1944
|
+
word-break: break-all;
|
|
1945
|
+
text-align: right;
|
|
1946
|
+
}
|
|
1947
|
+
`;
|
|
1948
|
+
if (!customElements.get("cpk-thread-list")) customElements.define("cpk-thread-list", CpkThreadList);
|
|
1949
|
+
if (!customElements.get("cpk-thread-details")) customElements.define("cpk-thread-details", ɵCpkThreadDetails);
|
|
1950
|
+
var WebInspectorElement = class extends lit.LitElement {
|
|
1951
|
+
constructor(..._args3) {
|
|
1952
|
+
super(..._args3);
|
|
194
1953
|
this._core = null;
|
|
195
1954
|
this.coreSubscriber = null;
|
|
196
1955
|
this.coreUnsubscribe = null;
|
|
@@ -200,6 +1959,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
200
1959
|
this.agentSubscriptions = /* @__PURE__ */ new Map();
|
|
201
1960
|
this.agentEvents = /* @__PURE__ */ new Map();
|
|
202
1961
|
this.agentMessages = /* @__PURE__ */ new Map();
|
|
1962
|
+
this.liveMessageVersion = /* @__PURE__ */ new Map();
|
|
203
1963
|
this.agentStates = /* @__PURE__ */ new Map();
|
|
204
1964
|
this.flattenedEvents = [];
|
|
205
1965
|
this.eventCounter = 0;
|
|
@@ -216,6 +1976,17 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
216
1976
|
this.draggedDuringInteraction = false;
|
|
217
1977
|
this.ignoreNextButtonClick = false;
|
|
218
1978
|
this.selectedMenu = "ag-ui-events";
|
|
1979
|
+
this.selectedThreadId = null;
|
|
1980
|
+
this.threadListWidth = 290;
|
|
1981
|
+
this.threadDividerResizing = false;
|
|
1982
|
+
this.threadDividerPointerId = -1;
|
|
1983
|
+
this.threadDividerStartX = 0;
|
|
1984
|
+
this.threadDividerStartWidth = 0;
|
|
1985
|
+
this._threads = [];
|
|
1986
|
+
this._threadStoreSubscriptions = /* @__PURE__ */ new Map();
|
|
1987
|
+
this._threadsByAgent = /* @__PURE__ */ new Map();
|
|
1988
|
+
this._threadsErrorByAgent = /* @__PURE__ */ new Map();
|
|
1989
|
+
this._ownedThreadStores = /* @__PURE__ */ new Map();
|
|
219
1990
|
this.contextMenuOpen = false;
|
|
220
1991
|
this.dockMode = "floating";
|
|
221
1992
|
this.previousBodyMargins = null;
|
|
@@ -228,15 +1999,20 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
228
1999
|
this.toolSignature = "";
|
|
229
2000
|
this.eventFilterText = "";
|
|
230
2001
|
this.eventTypeFilter = "all";
|
|
231
|
-
this.
|
|
2002
|
+
this.evtColWidths = [
|
|
2003
|
+
100,
|
|
2004
|
+
80,
|
|
2005
|
+
150
|
|
2006
|
+
];
|
|
2007
|
+
this._evtColResize = null;
|
|
232
2008
|
this.announcementHtml = null;
|
|
233
2009
|
this.announcementTimestamp = null;
|
|
234
2010
|
this.announcementPreviewText = null;
|
|
235
2011
|
this.hasUnseenAnnouncement = false;
|
|
236
2012
|
this.announcementLoaded = false;
|
|
237
|
-
this.announcementLoadError = null;
|
|
238
2013
|
this.announcementPromise = null;
|
|
239
2014
|
this.showAnnouncementPreview = true;
|
|
2015
|
+
this.announcementExpanded = false;
|
|
240
2016
|
this.contextState = {
|
|
241
2017
|
button: {
|
|
242
2018
|
position: {
|
|
@@ -277,28 +2053,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
277
2053
|
this.resizeStart = null;
|
|
278
2054
|
this.resizeInitialSize = null;
|
|
279
2055
|
this.isResizing = false;
|
|
280
|
-
this.
|
|
281
|
-
{
|
|
282
|
-
key: "ag-ui-events",
|
|
283
|
-
label: "AG-UI Events",
|
|
284
|
-
icon: "Zap"
|
|
285
|
-
},
|
|
286
|
-
{
|
|
287
|
-
key: "agents",
|
|
288
|
-
label: "Agent",
|
|
289
|
-
icon: "Bot"
|
|
290
|
-
},
|
|
291
|
-
{
|
|
292
|
-
key: "frontend-tools",
|
|
293
|
-
label: "Frontend Tools",
|
|
294
|
-
icon: "Hammer"
|
|
295
|
-
},
|
|
296
|
-
{
|
|
297
|
-
key: "agent-context",
|
|
298
|
-
label: "Context",
|
|
299
|
-
icon: "FileText"
|
|
300
|
-
}
|
|
301
|
-
];
|
|
2056
|
+
this.customTabIcons = { threads: `<svg class="h-3.5 w-3.5" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.04167 15C8.29167 15 7.65972 14.7431 7.14583 14.2292C6.63194 13.7153 6.375 13.0972 6.375 12.375C6.375 11.3194 6.80208 10.3646 7.65625 9.51042C8.51042 8.65625 9.57639 8.125 10.8542 7.91667C10.8125 7.41667 10.6875 7.03819 10.4792 6.78125C10.2708 6.52431 9.98611 6.39583 9.625 6.39583C9.20833 6.39583 8.75694 6.56944 8.27083 6.91667C7.78472 7.26389 7.20833 7.83333 6.54167 8.625C5.45833 9.91667 4.66319 10.7569 4.15625 11.1458C3.64931 11.5347 3.10417 11.7292 2.52083 11.7292C1.8125 11.7292 1.21528 11.4653 0.729167 10.9375C0.243056 10.4097 0 9.77083 0 9.02083C0 8.27083 0.163194 7.50347 0.489583 6.71875C0.815972 5.93403 1.36806 4.99306 2.14583 3.89583C2.40972 3.53472 2.60417 3.22917 2.72917 2.97917C2.85417 2.72917 2.91667 2.52778 2.91667 2.375C2.91667 2.27778 2.89931 2.20486 2.86458 2.15625C2.82986 2.10764 2.77778 2.08333 2.70833 2.08333C2.56944 2.08333 2.39583 2.17014 2.1875 2.34375C1.97917 2.51736 1.73611 2.78472 1.45833 3.14583L0 1.66667C0.444444 1.125 0.895833 0.711806 1.35417 0.427083C1.8125 0.142361 2.26389 0 2.70833 0C3.34722 0 3.88889 0.222222 4.33333 0.666667C4.77778 1.11111 5 1.66667 5 2.33333C5 2.73611 4.89583 3.18056 4.6875 3.66667C4.47917 4.15278 4.13194 4.73611 3.64583 5.41667C3.11806 6.16667 2.72569 6.82639 2.46875 7.39583C2.21181 7.96528 2.08333 8.46528 2.08333 8.89583C2.08333 9.13194 2.12153 9.31597 2.19792 9.44792C2.27431 9.57986 2.38194 9.64583 2.52083 9.64583C2.65972 9.64583 2.78125 9.60764 2.88542 9.53125C2.98958 9.45486 3.18056 9.27083 3.45833 8.97917C3.63889 8.78472 3.85417 8.54514 4.10417 8.26042C4.35417 7.97569 4.65972 7.625 5.02083 7.20833C5.89583 6.16667 6.6875 5.42361 7.39583 4.97917C8.10417 4.53472 8.84722 4.3125 9.625 4.3125C10.5556 4.3125 11.3194 4.625 11.9167 5.25C12.5139 5.875 12.8542 6.72917 12.9375 7.8125H15V9.89583H12.9375C12.8264 11.4514 12.4201 12.691 11.7188 13.6146C11.0174 14.5382 10.125 15 9.04167 15ZM9.08333 12.9167C9.52778 12.9167 9.90278 12.6632 10.2083 12.1562C10.5139 11.6493 10.7222 10.9444 10.8333 10.0417C10.1944 10.1944 9.63889 10.4965 9.16667 10.9479C8.69444 11.3993 8.45833 11.8472 8.45833 12.2917C8.45833 12.4861 8.51389 12.6389 8.625 12.75C8.73611 12.8611 8.88889 12.9167 9.08333 12.9167Z" fill="currentColor"/></svg>` };
|
|
302
2057
|
this.handlePointerDown = (event) => {
|
|
303
2058
|
var _target$setPointerCap;
|
|
304
2059
|
if (this.dockMode !== "floating" && this.isOpen) return;
|
|
@@ -467,6 +2222,26 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
467
2222
|
this.expandedTools = /* @__PURE__ */ new Set();
|
|
468
2223
|
this.expandedContextItems = /* @__PURE__ */ new Set();
|
|
469
2224
|
this.copiedContextItems = /* @__PURE__ */ new Set();
|
|
2225
|
+
this.handleThreadDividerPointerDown = (event) => {
|
|
2226
|
+
this.threadDividerResizing = true;
|
|
2227
|
+
this.threadDividerPointerId = event.pointerId;
|
|
2228
|
+
this.threadDividerStartX = event.clientX;
|
|
2229
|
+
this.threadDividerStartWidth = this.threadListWidth;
|
|
2230
|
+
event.currentTarget.setPointerCapture(event.pointerId);
|
|
2231
|
+
event.preventDefault();
|
|
2232
|
+
};
|
|
2233
|
+
this.handleThreadDividerPointerMove = (event) => {
|
|
2234
|
+
if (!this.threadDividerResizing || this.threadDividerPointerId !== event.pointerId) return;
|
|
2235
|
+
const delta = event.clientX - this.threadDividerStartX;
|
|
2236
|
+
this.threadListWidth = Math.max(180, Math.min(480, this.threadDividerStartWidth + delta));
|
|
2237
|
+
this.requestUpdate();
|
|
2238
|
+
};
|
|
2239
|
+
this.handleThreadDividerPointerUp = (event) => {
|
|
2240
|
+
if (this.threadDividerPointerId !== event.pointerId) return;
|
|
2241
|
+
const target = event.currentTarget;
|
|
2242
|
+
if (target.hasPointerCapture(this.threadDividerPointerId)) target.releasePointerCapture(this.threadDividerPointerId);
|
|
2243
|
+
this.threadDividerResizing = false;
|
|
2244
|
+
};
|
|
470
2245
|
this.handleClearEvents = () => {
|
|
471
2246
|
if (this.selectedContext === "all-agents") {
|
|
472
2247
|
this.agentEvents.clear();
|
|
@@ -492,6 +2267,33 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
492
2267
|
this.handleDismissAnnouncement = () => {
|
|
493
2268
|
this.markAnnouncementSeen();
|
|
494
2269
|
};
|
|
2270
|
+
this.copyResetTimeouts = /* @__PURE__ */ new WeakMap();
|
|
2271
|
+
this.handleAnnouncementContentClick = (event) => {
|
|
2272
|
+
var _button$getAttribute, _navigator$clipboard;
|
|
2273
|
+
const target = event.target instanceof HTMLElement ? event.target : null;
|
|
2274
|
+
const button = target === null || target === void 0 ? void 0 : target.closest(".announcement-code__copy");
|
|
2275
|
+
if (!(button instanceof HTMLButtonElement)) return;
|
|
2276
|
+
event.preventDefault();
|
|
2277
|
+
event.stopPropagation();
|
|
2278
|
+
const encoded = (_button$getAttribute = button.getAttribute("data-copy")) !== null && _button$getAttribute !== void 0 ? _button$getAttribute : "";
|
|
2279
|
+
const code = this.decodeBase64(encoded);
|
|
2280
|
+
if (!code) return;
|
|
2281
|
+
const showCopied = () => {
|
|
2282
|
+
const existing = this.copyResetTimeouts.get(button);
|
|
2283
|
+
if (existing !== void 0) window.clearTimeout(existing);
|
|
2284
|
+
button.setAttribute("data-copied", "true");
|
|
2285
|
+
button.setAttribute("aria-label", "Code copied");
|
|
2286
|
+
button.textContent = "Copied";
|
|
2287
|
+
const id = window.setTimeout(() => {
|
|
2288
|
+
button.removeAttribute("data-copied");
|
|
2289
|
+
button.setAttribute("aria-label", "Copy code");
|
|
2290
|
+
button.textContent = "Copy";
|
|
2291
|
+
this.copyResetTimeouts.delete(button);
|
|
2292
|
+
}, 1500);
|
|
2293
|
+
this.copyResetTimeouts.set(button, id);
|
|
2294
|
+
};
|
|
2295
|
+
if (typeof navigator !== "undefined" && ((_navigator$clipboard = navigator.clipboard) === null || _navigator$clipboard === void 0 ? void 0 : _navigator$clipboard.writeText)) navigator.clipboard.writeText(code).then(showCopied, () => {});
|
|
2296
|
+
};
|
|
495
2297
|
}
|
|
496
2298
|
get core() {
|
|
497
2299
|
return this._core;
|
|
@@ -504,6 +2306,110 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
504
2306
|
this.requestUpdate("core", oldValue);
|
|
505
2307
|
if (this._core) this.attachToCore(this._core);
|
|
506
2308
|
}
|
|
2309
|
+
get menuItems() {
|
|
2310
|
+
var _this$_core$tools$len, _this$_core;
|
|
2311
|
+
return [
|
|
2312
|
+
{
|
|
2313
|
+
key: "ag-ui-events",
|
|
2314
|
+
label: "AG-UI Events",
|
|
2315
|
+
icon: "Zap"
|
|
2316
|
+
},
|
|
2317
|
+
{
|
|
2318
|
+
key: "agents",
|
|
2319
|
+
label: "Agent",
|
|
2320
|
+
icon: "Bot"
|
|
2321
|
+
},
|
|
2322
|
+
...((_this$_core$tools$len = (_this$_core = this._core) === null || _this$_core === void 0 || (_this$_core = _this$_core.tools) === null || _this$_core === void 0 ? void 0 : _this$_core.length) !== null && _this$_core$tools$len !== void 0 ? _this$_core$tools$len : 0) > 0 ? [{
|
|
2323
|
+
key: "frontend-tools",
|
|
2324
|
+
label: "Frontend Tools",
|
|
2325
|
+
icon: "Hammer"
|
|
2326
|
+
}] : [],
|
|
2327
|
+
{
|
|
2328
|
+
key: "agent-context",
|
|
2329
|
+
label: "Context",
|
|
2330
|
+
icon: "FileText"
|
|
2331
|
+
},
|
|
2332
|
+
{
|
|
2333
|
+
key: "threads",
|
|
2334
|
+
label: "Threads",
|
|
2335
|
+
icon: "MessageSquare"
|
|
2336
|
+
}
|
|
2337
|
+
];
|
|
2338
|
+
}
|
|
2339
|
+
subscribeToThreadStore(agentId, store) {
|
|
2340
|
+
if (this._threadStoreSubscriptions.has(agentId)) return;
|
|
2341
|
+
const threadsSub = store.select(_copilotkit_core.ɵselectThreads).subscribe((threads) => {
|
|
2342
|
+
this._threadsByAgent.set(agentId, threads);
|
|
2343
|
+
this._threads = Array.from(this._threadsByAgent.values()).flat();
|
|
2344
|
+
this.autoSelectLatestThread();
|
|
2345
|
+
this.requestUpdate();
|
|
2346
|
+
});
|
|
2347
|
+
const errorSub = store.select(_copilotkit_core.ɵselectThreadsError).subscribe((error) => {
|
|
2348
|
+
if (error) this._threadsErrorByAgent.set(agentId, error);
|
|
2349
|
+
else this._threadsErrorByAgent.delete(agentId);
|
|
2350
|
+
this.requestUpdate();
|
|
2351
|
+
});
|
|
2352
|
+
this._threadStoreSubscriptions.set(agentId, () => {
|
|
2353
|
+
threadsSub.unsubscribe();
|
|
2354
|
+
errorSub.unsubscribe();
|
|
2355
|
+
});
|
|
2356
|
+
const initialState = store.getState();
|
|
2357
|
+
this._threadsByAgent.set(agentId, (0, _copilotkit_core.ɵselectThreads)(initialState));
|
|
2358
|
+
const initialError = (0, _copilotkit_core.ɵselectThreadsError)(initialState);
|
|
2359
|
+
if (initialError) this._threadsErrorByAgent.set(agentId, initialError);
|
|
2360
|
+
else this._threadsErrorByAgent.delete(agentId);
|
|
2361
|
+
this._threads = Array.from(this._threadsByAgent.values()).flat();
|
|
2362
|
+
this.autoSelectLatestThread();
|
|
2363
|
+
}
|
|
2364
|
+
autoSelectLatestThread() {
|
|
2365
|
+
if (this._threads.length === 0) return;
|
|
2366
|
+
if (!(this.selectedThreadId != null && this._threads.some((t) => t.id === this.selectedThreadId))) this.selectedThreadId = this._threads[0].id;
|
|
2367
|
+
}
|
|
2368
|
+
teardownThreadStoreSubscriptions() {
|
|
2369
|
+
for (const unsub of this._threadStoreSubscriptions.values()) unsub();
|
|
2370
|
+
this._threadStoreSubscriptions.clear();
|
|
2371
|
+
this._threadsByAgent.clear();
|
|
2372
|
+
this._threadsErrorByAgent.clear();
|
|
2373
|
+
this._threads = [];
|
|
2374
|
+
}
|
|
2375
|
+
ensureOwnedThreadStore(agentId) {
|
|
2376
|
+
var _this$core;
|
|
2377
|
+
if (this._ownedThreadStores.has(agentId)) return;
|
|
2378
|
+
if ((_this$core = this.core) === null || _this$core === void 0 ? void 0 : _this$core.getThreadStore(agentId)) return;
|
|
2379
|
+
const core = this.core;
|
|
2380
|
+
if (!(core === null || core === void 0 ? void 0 : core.runtimeUrl)) return;
|
|
2381
|
+
const store = (0, _copilotkit_core.ɵcreateThreadStore)({ fetch: globalThis.fetch });
|
|
2382
|
+
store.start();
|
|
2383
|
+
store.setContext({
|
|
2384
|
+
runtimeUrl: core.runtimeUrl,
|
|
2385
|
+
headers: {},
|
|
2386
|
+
agentId
|
|
2387
|
+
});
|
|
2388
|
+
this._ownedThreadStores.set(agentId, store);
|
|
2389
|
+
this.subscribeToThreadStore(agentId, store);
|
|
2390
|
+
core.registerThreadStore(agentId, store);
|
|
2391
|
+
}
|
|
2392
|
+
refreshOwnedThreadStore(agentId) {
|
|
2393
|
+
const store = this._ownedThreadStores.get(agentId);
|
|
2394
|
+
if (!store) return;
|
|
2395
|
+
store.refresh();
|
|
2396
|
+
}
|
|
2397
|
+
removeOwnedThreadStore(agentId) {
|
|
2398
|
+
var _this$core2;
|
|
2399
|
+
const store = this._ownedThreadStores.get(agentId);
|
|
2400
|
+
if (!store) return;
|
|
2401
|
+
store.stop();
|
|
2402
|
+
(_this$core2 = this.core) === null || _this$core2 === void 0 || _this$core2.unregisterThreadStore(agentId);
|
|
2403
|
+
this._ownedThreadStores.delete(agentId);
|
|
2404
|
+
}
|
|
2405
|
+
teardownOwnedThreadStores() {
|
|
2406
|
+
for (const [agentId, store] of this._ownedThreadStores) {
|
|
2407
|
+
var _this$core3;
|
|
2408
|
+
store.stop();
|
|
2409
|
+
(_this$core3 = this.core) === null || _this$core3 === void 0 || _this$core3.unregisterThreadStore(agentId);
|
|
2410
|
+
}
|
|
2411
|
+
this._ownedThreadStores.clear();
|
|
2412
|
+
}
|
|
507
2413
|
attachToCore(core) {
|
|
508
2414
|
this.runtimeStatus = core.runtimeConnectionStatus;
|
|
509
2415
|
this.coreProperties = core.properties;
|
|
@@ -511,6 +2417,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
511
2417
|
this.coreSubscriber = {
|
|
512
2418
|
onRuntimeConnectionStatusChanged: ({ status }) => {
|
|
513
2419
|
this.runtimeStatus = status;
|
|
2420
|
+
if (status === "connected") for (const agentId of this._ownedThreadStores.keys()) this.refreshOwnedThreadStore(agentId);
|
|
2421
|
+
else {
|
|
2422
|
+
this._threadsByAgent.clear();
|
|
2423
|
+
this._threads = [];
|
|
2424
|
+
}
|
|
514
2425
|
this.requestUpdate();
|
|
515
2426
|
},
|
|
516
2427
|
onPropertiesChanged: ({ properties }) => {
|
|
@@ -527,16 +2438,30 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
527
2438
|
onAgentsChanged: ({ agents }) => {
|
|
528
2439
|
this.processAgentsChanged(agents);
|
|
529
2440
|
},
|
|
530
|
-
onAgentRunStarted: ({ agent }) => {
|
|
531
|
-
if (agent === null || agent === void 0 ? void 0 : agent.agentId) this.subscribeToAgent(agent);
|
|
532
|
-
},
|
|
533
2441
|
onContextChanged: ({ context }) => {
|
|
534
2442
|
this.contextStore = this.normalizeContextStore(context);
|
|
535
2443
|
this.requestUpdate();
|
|
2444
|
+
},
|
|
2445
|
+
onThreadStoreRegistered: ({ agentId, store }) => {
|
|
2446
|
+
this.subscribeToThreadStore(agentId, store);
|
|
2447
|
+
this.requestUpdate();
|
|
2448
|
+
},
|
|
2449
|
+
onThreadStoreUnregistered: ({ agentId }) => {
|
|
2450
|
+
const unsub = this._threadStoreSubscriptions.get(agentId);
|
|
2451
|
+
if (unsub) {
|
|
2452
|
+
unsub();
|
|
2453
|
+
this._threadStoreSubscriptions.delete(agentId);
|
|
2454
|
+
}
|
|
2455
|
+
this._threadsByAgent.delete(agentId);
|
|
2456
|
+
this._threadsErrorByAgent.delete(agentId);
|
|
2457
|
+
this._threads = Array.from(this._threadsByAgent.values()).flat();
|
|
2458
|
+
this.requestUpdate();
|
|
536
2459
|
}
|
|
537
2460
|
};
|
|
538
2461
|
this.coreUnsubscribe = core.subscribe(this.coreSubscriber).unsubscribe;
|
|
539
2462
|
this.processAgentsChanged(core.agents);
|
|
2463
|
+
const threadStores = typeof core.getThreadStores === "function" ? core.getThreadStores() : {};
|
|
2464
|
+
for (const [agentId, store] of Object.entries(threadStores)) this.subscribeToThreadStore(agentId, store);
|
|
540
2465
|
if (core.context) this.contextStore = this.normalizeContextStore(core.context);
|
|
541
2466
|
}
|
|
542
2467
|
detachFromCore() {
|
|
@@ -551,6 +2476,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
551
2476
|
this.cachedTools = [];
|
|
552
2477
|
this.toolSignature = "";
|
|
553
2478
|
this.teardownAgentSubscriptions();
|
|
2479
|
+
this.teardownThreadStoreSubscriptions();
|
|
2480
|
+
this.teardownOwnedThreadStores();
|
|
554
2481
|
}
|
|
555
2482
|
teardownAgentSubscriptions() {
|
|
556
2483
|
for (const unsubscribe of this.agentSubscriptions.values()) unsubscribe();
|
|
@@ -567,6 +2494,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
567
2494
|
if (!(agent === null || agent === void 0 ? void 0 : agent.agentId)) continue;
|
|
568
2495
|
seenAgentIds.add(agent.agentId);
|
|
569
2496
|
this.subscribeToAgent(agent);
|
|
2497
|
+
this.ensureOwnedThreadStore(agent.agentId);
|
|
570
2498
|
}
|
|
571
2499
|
for (const agentId of Array.from(this.agentSubscriptions.keys())) if (!seenAgentIds.has(agentId)) {
|
|
572
2500
|
this.unsubscribeFromAgent(agentId);
|
|
@@ -626,6 +2554,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
626
2554
|
event,
|
|
627
2555
|
result
|
|
628
2556
|
});
|
|
2557
|
+
this.refreshOwnedThreadStore(agentId);
|
|
629
2558
|
},
|
|
630
2559
|
onRunErrorEvent: ({ event }) => {
|
|
631
2560
|
this.recordAgentEvent(agentId, "RUN_ERROR", event);
|
|
@@ -713,6 +2642,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
713
2642
|
},
|
|
714
2643
|
onReasoningEncryptedValueEvent: ({ event }) => {
|
|
715
2644
|
this.recordAgentEvent(agentId, "REASONING_ENCRYPTED_VALUE", event);
|
|
2645
|
+
},
|
|
2646
|
+
onActivitySnapshotEvent: ({ event }) => {
|
|
2647
|
+
this.recordAgentEvent(agentId, "ACTIVITY_SNAPSHOT", event);
|
|
2648
|
+
this.syncAgentMessages(agent);
|
|
2649
|
+
},
|
|
2650
|
+
onActivityDeltaEvent: ({ event }) => {
|
|
2651
|
+
this.recordAgentEvent(agentId, "ACTIVITY_DELTA", event);
|
|
2652
|
+
this.syncAgentMessages(agent);
|
|
716
2653
|
}
|
|
717
2654
|
});
|
|
718
2655
|
this.agentSubscriptions.set(agentId, unsubscribe);
|
|
@@ -727,6 +2664,18 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
727
2664
|
this.agentSubscriptions.delete(agentId);
|
|
728
2665
|
}
|
|
729
2666
|
}
|
|
2667
|
+
mapMessagesToConversation(messages) {
|
|
2668
|
+
if (!messages) return null;
|
|
2669
|
+
return messages.filter((m) => m.role === "user" || m.role === "assistant" || m.role === "activity").map((m, i) => {
|
|
2670
|
+
var _m$id, _m$activityType;
|
|
2671
|
+
return {
|
|
2672
|
+
id: (_m$id = m.id) !== null && _m$id !== void 0 ? _m$id : `msg-${i}`,
|
|
2673
|
+
type: m.role === "user" ? "user" : m.role === "activity" ? "generative-ui" : "assistant",
|
|
2674
|
+
content: m.role === "activity" ? (_m$activityType = m.activityType) !== null && _m$activityType !== void 0 ? _m$activityType : "unknown" : m.contentText,
|
|
2675
|
+
createdAt: ""
|
|
2676
|
+
};
|
|
2677
|
+
});
|
|
2678
|
+
}
|
|
730
2679
|
recordAgentEvent(agentId, type, payload) {
|
|
731
2680
|
var _this$agentEvents$get;
|
|
732
2681
|
const eventId = `${agentId}:${++this.eventCounter}`;
|
|
@@ -750,6 +2699,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
750
2699
|
const messages = this.normalizeAgentMessages(agent.messages);
|
|
751
2700
|
if (messages) this.agentMessages.set(agent.agentId, messages);
|
|
752
2701
|
else this.agentMessages.delete(agent.agentId);
|
|
2702
|
+
const runThreadId = agent.threadId;
|
|
2703
|
+
if (runThreadId) {
|
|
2704
|
+
var _this$liveMessageVers;
|
|
2705
|
+
this.liveMessageVersion.set(runThreadId, ((_this$liveMessageVers = this.liveMessageVersion.get(runThreadId)) !== null && _this$liveMessageVers !== void 0 ? _this$liveMessageVers : 0) + 1);
|
|
2706
|
+
}
|
|
753
2707
|
this.requestUpdate();
|
|
754
2708
|
} catch (error) {
|
|
755
2709
|
console.error(`[CopilotKit Inspector] Failed to sync messages for agent "${agent.agentId}":`, error);
|
|
@@ -780,18 +2734,23 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
780
2734
|
})) this.contextOptions = nextOptions;
|
|
781
2735
|
const pendingContext = this.pendingSelectedContext;
|
|
782
2736
|
if (pendingContext) {
|
|
783
|
-
if (pendingContext === "all-agents" || agentIds.has(pendingContext)) {
|
|
2737
|
+
if ((pendingContext === "all-agents" || agentIds.has(pendingContext)) && (pendingContext === "all-agents" || agentIds.size === 1)) {
|
|
784
2738
|
if (this.selectedContext !== pendingContext) {
|
|
785
2739
|
this.selectedContext = pendingContext;
|
|
786
2740
|
this.expandedRows.clear();
|
|
787
2741
|
}
|
|
788
2742
|
this.pendingSelectedContext = null;
|
|
789
|
-
} else if (agentIds.size > 0)
|
|
2743
|
+
} else if (agentIds.size > 0) {
|
|
2744
|
+
if (this.selectedContext !== "all-agents") {
|
|
2745
|
+
this.selectedContext = "all-agents";
|
|
2746
|
+
this.expandedRows.clear();
|
|
2747
|
+
}
|
|
2748
|
+
this.pendingSelectedContext = null;
|
|
2749
|
+
}
|
|
790
2750
|
}
|
|
791
2751
|
if (!nextOptions.some((option) => option.key === this.selectedContext) && this.pendingSelectedContext === null) {
|
|
792
2752
|
let nextSelected = "all-agents";
|
|
793
|
-
if (agentIds.
|
|
794
|
-
else if (agentIds.size > 0) nextSelected = Array.from(agentIds).sort((a, b) => a.localeCompare(b))[0];
|
|
2753
|
+
if (agentIds.size === 1) nextSelected = Array.from(agentIds)[0];
|
|
795
2754
|
if (this.selectedContext !== nextSelected) {
|
|
796
2755
|
this.selectedContext = nextSelected;
|
|
797
2756
|
this.expandedRows.clear();
|
|
@@ -859,8 +2818,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
859
2818
|
return lit.html`
|
|
860
2819
|
<div class="mt-2 space-y-2">
|
|
861
2820
|
${toolCalls.map((call, index) => {
|
|
862
|
-
var
|
|
863
|
-
const functionName = (
|
|
2821
|
+
var _ref3, _call$function$name, _call$function, _call$function2;
|
|
2822
|
+
const functionName = (_ref3 = (_call$function$name = (_call$function = call.function) === null || _call$function === void 0 ? void 0 : _call$function.name) !== null && _call$function$name !== void 0 ? _call$function$name : call.toolName) !== null && _ref3 !== void 0 ? _ref3 : "Unknown function";
|
|
864
2823
|
const callId = typeof (call === null || call === void 0 ? void 0 : call.id) === "string" ? call.id : `tool-call-${index + 1}`;
|
|
865
2824
|
const argsString = this.formatToolCallArguments((_call$function2 = call.function) === null || _call$function2 === void 0 ? void 0 : _call$function2.arguments);
|
|
866
2825
|
return lit.html`
|
|
@@ -970,6 +2929,7 @@ ${argsString}</pre
|
|
|
970
2929
|
connectedCallback() {
|
|
971
2930
|
super.connectedCallback();
|
|
972
2931
|
if (typeof window !== "undefined") {
|
|
2932
|
+
this.ensureBrandFonts();
|
|
973
2933
|
window.addEventListener("resize", this.handleResize);
|
|
974
2934
|
window.addEventListener("pointerdown", this.handleGlobalPointerDown);
|
|
975
2935
|
this.hydrateStateFromStorageEarly();
|
|
@@ -977,6 +2937,15 @@ ${argsString}</pre
|
|
|
977
2937
|
this.ensureAnnouncementLoading();
|
|
978
2938
|
}
|
|
979
2939
|
}
|
|
2940
|
+
ensureBrandFonts() {
|
|
2941
|
+
const FONT_LINK_ID = "cpk-inspector-brand-fonts";
|
|
2942
|
+
if (document.getElementById(FONT_LINK_ID)) return;
|
|
2943
|
+
const link = document.createElement("link");
|
|
2944
|
+
link.id = FONT_LINK_ID;
|
|
2945
|
+
link.rel = "stylesheet";
|
|
2946
|
+
link.href = "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600&family=Spline+Sans+Mono:wght@600&display=swap";
|
|
2947
|
+
document.head.appendChild(link);
|
|
2948
|
+
}
|
|
980
2949
|
disconnectedCallback() {
|
|
981
2950
|
super.disconnectedCallback();
|
|
982
2951
|
if (typeof window !== "undefined") {
|
|
@@ -1054,7 +3023,7 @@ ${argsString}</pre
|
|
|
1054
3023
|
"focus-visible:outline",
|
|
1055
3024
|
"focus-visible:outline-2",
|
|
1056
3025
|
"focus-visible:outline-offset-2",
|
|
1057
|
-
"focus-visible:outline-
|
|
3026
|
+
"focus-visible:outline-[#BEC2FF]",
|
|
1058
3027
|
"touch-none",
|
|
1059
3028
|
"select-none",
|
|
1060
3029
|
this.isDragging ? "cursor-grabbing" : "cursor-grab"
|
|
@@ -1162,14 +3131,12 @@ ${argsString}</pre
|
|
|
1162
3131
|
return lit.html`
|
|
1163
3132
|
<button
|
|
1164
3133
|
type="button"
|
|
1165
|
-
class=${["inline-flex items-center gap-2 rounded-md px-3 py-2 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300", isSelected ? "
|
|
3134
|
+
class=${["inline-flex items-center gap-2 rounded-md px-3 py-2 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300", isSelected ? "cpk-tab-active" : "cpk-tab-inactive"].join(" ")}
|
|
1166
3135
|
aria-pressed=${isSelected}
|
|
1167
3136
|
@click=${() => this.handleMenuSelect(key)}
|
|
1168
3137
|
>
|
|
1169
|
-
<span
|
|
1170
|
-
|
|
1171
|
-
>
|
|
1172
|
-
${this.renderIcon(icon)}
|
|
3138
|
+
<span class="cpk-tab-icon">
|
|
3139
|
+
${key in this.customTabIcons ? (0, lit_directives_unsafe_html_js.unsafeHTML)(this.customTabIcons[key]) : this.renderIcon(icon)}
|
|
1173
3140
|
</span>
|
|
1174
3141
|
<span>${label}</span>
|
|
1175
3142
|
</button>
|
|
@@ -1178,8 +3145,8 @@ ${argsString}</pre
|
|
|
1178
3145
|
</div>
|
|
1179
3146
|
</div>
|
|
1180
3147
|
<div class="flex flex-1 flex-col overflow-hidden">
|
|
1181
|
-
<div class="flex-1 overflow-auto">
|
|
1182
|
-
${this.
|
|
3148
|
+
<div id="cpk-main-scroll" class="flex-1 overflow-auto">
|
|
3149
|
+
${this.renderAnnouncementBanner()}
|
|
1183
3150
|
${this.renderCoreWarningBanner()} ${this.renderMainContent()}
|
|
1184
3151
|
<slot></slot>
|
|
1185
3152
|
</div>
|
|
@@ -1625,7 +3592,8 @@ ${argsString}</pre
|
|
|
1625
3592
|
role,
|
|
1626
3593
|
contentText,
|
|
1627
3594
|
contentRaw: raw.content !== void 0 ? this.sanitizeForLogging(raw.content) : void 0,
|
|
1628
|
-
toolCalls
|
|
3595
|
+
toolCalls,
|
|
3596
|
+
activityType: typeof raw.activityType === "string" ? raw.activityType : void 0
|
|
1629
3597
|
};
|
|
1630
3598
|
}
|
|
1631
3599
|
normalizeAgentMessages(messages) {
|
|
@@ -1644,10 +3612,6 @@ ${argsString}</pre
|
|
|
1644
3612
|
} else normalized[key] = { value: entry };
|
|
1645
3613
|
return normalized;
|
|
1646
3614
|
}
|
|
1647
|
-
getSelectedMenu() {
|
|
1648
|
-
const found = this.menuItems.find((item) => item.key === this.selectedMenu);
|
|
1649
|
-
return found !== null && found !== void 0 ? found : this.menuItems[0];
|
|
1650
|
-
}
|
|
1651
3615
|
renderCoreWarningBanner() {
|
|
1652
3616
|
if (this._core) return lit.nothing;
|
|
1653
3617
|
return lit.html`
|
|
@@ -1705,27 +3669,106 @@ ${argsString}</pre
|
|
|
1705
3669
|
if (this.selectedMenu === "agents") return this.renderAgentsView();
|
|
1706
3670
|
if (this.selectedMenu === "frontend-tools") return this.renderToolsView();
|
|
1707
3671
|
if (this.selectedMenu === "agent-context") return this.renderContextView();
|
|
3672
|
+
if (this.selectedMenu === "threads") return this.renderThreadsView();
|
|
1708
3673
|
return lit.nothing;
|
|
1709
3674
|
}
|
|
3675
|
+
renderThreadsView() {
|
|
3676
|
+
var _this$_threadsByAgent, _displayThreads$find, _this$_core$runtimeUr, _this$_core2, _this$_core$headers, _this$_core3, _this$liveMessageVers2, _this$agentEvents$get6;
|
|
3677
|
+
const displayThreads = this.selectedContext === "all-agents" ? this._threads : (_this$_threadsByAgent = this._threadsByAgent.get(this.selectedContext)) !== null && _this$_threadsByAgent !== void 0 ? _this$_threadsByAgent : [];
|
|
3678
|
+
let threadsErrorMessage = null;
|
|
3679
|
+
if (this.selectedContext === "all-agents") {
|
|
3680
|
+
var _firstError$message;
|
|
3681
|
+
const firstError = this._threadsErrorByAgent.values().next().value;
|
|
3682
|
+
threadsErrorMessage = (_firstError$message = firstError === null || firstError === void 0 ? void 0 : firstError.message) !== null && _firstError$message !== void 0 ? _firstError$message : null;
|
|
3683
|
+
} else {
|
|
3684
|
+
var _this$_threadsErrorBy, _this$_threadsErrorBy2;
|
|
3685
|
+
threadsErrorMessage = (_this$_threadsErrorBy = (_this$_threadsErrorBy2 = this._threadsErrorByAgent.get(this.selectedContext)) === null || _this$_threadsErrorBy2 === void 0 ? void 0 : _this$_threadsErrorBy2.message) !== null && _this$_threadsErrorBy !== void 0 ? _this$_threadsErrorBy : null;
|
|
3686
|
+
}
|
|
3687
|
+
const selectedThread = this.selectedThreadId != null ? (_displayThreads$find = displayThreads.find((t) => t.id === this.selectedThreadId)) !== null && _displayThreads$find !== void 0 ? _displayThreads$find : null : null;
|
|
3688
|
+
return lit.html`
|
|
3689
|
+
<div style="display:flex;height:100%;overflow:hidden;">
|
|
3690
|
+
<!-- Left sidebar: thread list -->
|
|
3691
|
+
<div
|
|
3692
|
+
style="width:${this.threadListWidth}px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;border-right:1px solid #DBDBE5;"
|
|
3693
|
+
>
|
|
3694
|
+
<cpk-thread-list
|
|
3695
|
+
style="height:100%;"
|
|
3696
|
+
.threads=${displayThreads}
|
|
3697
|
+
.selectedThreadId=${this.selectedThreadId}
|
|
3698
|
+
.errorMessage=${threadsErrorMessage}
|
|
3699
|
+
@threadSelected=${(e) => {
|
|
3700
|
+
this.selectedThreadId = e.detail;
|
|
3701
|
+
this.requestUpdate();
|
|
3702
|
+
}}
|
|
3703
|
+
></cpk-thread-list>
|
|
3704
|
+
</div>
|
|
3705
|
+
|
|
3706
|
+
<!-- Resize divider -->
|
|
3707
|
+
<div
|
|
3708
|
+
style="width:4px;flex-shrink:0;cursor:col-resize;background:transparent;position:relative;z-index:1;"
|
|
3709
|
+
@pointerdown=${this.handleThreadDividerPointerDown}
|
|
3710
|
+
@pointermove=${this.handleThreadDividerPointerMove}
|
|
3711
|
+
@pointerup=${this.handleThreadDividerPointerUp}
|
|
3712
|
+
@pointercancel=${this.handleThreadDividerPointerUp}
|
|
3713
|
+
></div>
|
|
3714
|
+
|
|
3715
|
+
<!-- Center + right: thread details or empty state -->
|
|
3716
|
+
<div style="flex:1;min-width:0;overflow:hidden;display:flex;">
|
|
3717
|
+
${this.selectedThreadId ? lit.html`<cpk-thread-details
|
|
3718
|
+
style="flex:1;min-width:0;"
|
|
3719
|
+
.threadId=${this.selectedThreadId}
|
|
3720
|
+
.thread=${selectedThread}
|
|
3721
|
+
.runtimeUrl=${(_this$_core$runtimeUr = (_this$_core2 = this._core) === null || _this$_core2 === void 0 ? void 0 : _this$_core2.runtimeUrl) !== null && _this$_core$runtimeUr !== void 0 ? _this$_core$runtimeUr : ""}
|
|
3722
|
+
.headers=${(_this$_core$headers = (_this$_core3 = this._core) === null || _this$_core3 === void 0 ? void 0 : _this$_core3.headers) !== null && _this$_core$headers !== void 0 ? _this$_core$headers : {}}
|
|
3723
|
+
.liveMessageVersion=${this.selectedThreadId ? (_this$liveMessageVers2 = this.liveMessageVersion.get(this.selectedThreadId)) !== null && _this$liveMessageVers2 !== void 0 ? _this$liveMessageVers2 : 0 : 0}
|
|
3724
|
+
.agentStateInput=${selectedThread ? this.getLatestStateForAgent(selectedThread.agentId) : null}
|
|
3725
|
+
.agentEventsInput=${selectedThread ? (_this$agentEvents$get6 = this.agentEvents.get(selectedThread.agentId)) !== null && _this$agentEvents$get6 !== void 0 ? _this$agentEvents$get6 : [] : []}
|
|
3726
|
+
></cpk-thread-details>` : lit.html`
|
|
3727
|
+
<div
|
|
3728
|
+
style="
|
|
3729
|
+
flex: 1;
|
|
3730
|
+
display: flex;
|
|
3731
|
+
flex-direction: column;
|
|
3732
|
+
align-items: center;
|
|
3733
|
+
justify-content: center;
|
|
3734
|
+
gap: 8px;
|
|
3735
|
+
color: #838389;
|
|
3736
|
+
"
|
|
3737
|
+
>
|
|
3738
|
+
<svg
|
|
3739
|
+
width="32"
|
|
3740
|
+
height="32"
|
|
3741
|
+
viewBox="0 0 24 24"
|
|
3742
|
+
fill="none"
|
|
3743
|
+
stroke="#c0c0c8"
|
|
3744
|
+
stroke-width="1.5"
|
|
3745
|
+
stroke-linecap="round"
|
|
3746
|
+
stroke-linejoin="round"
|
|
3747
|
+
>
|
|
3748
|
+
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
|
3749
|
+
</svg>
|
|
3750
|
+
<span style="font-size: 13px">${displayThreads.length === 0 ? "No threads yet" : "Select a thread to inspect"}</span>
|
|
3751
|
+
</div>
|
|
3752
|
+
`}
|
|
3753
|
+
</div>
|
|
3754
|
+
</div>
|
|
3755
|
+
`;
|
|
3756
|
+
}
|
|
1710
3757
|
renderEventsTable() {
|
|
1711
3758
|
const events = this.getEventsForSelectedContext();
|
|
1712
3759
|
const filteredEvents = this.filterEvents(events);
|
|
1713
3760
|
const selectedLabel = this.selectedContext === "all-agents" ? "all agents" : `agent ${this.selectedContext}`;
|
|
1714
3761
|
if (events.length === 0) return lit.html`
|
|
1715
3762
|
<div
|
|
1716
|
-
class="flex h-full items-center justify-center px-4 py-
|
|
3763
|
+
class="flex h-full flex-col items-center justify-center gap-2 px-4 py-10 text-center"
|
|
1717
3764
|
>
|
|
1718
|
-
<div class="
|
|
1719
|
-
|
|
1720
|
-
class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8"
|
|
1721
|
-
>
|
|
1722
|
-
${this.renderIcon("Zap")}
|
|
1723
|
-
</div>
|
|
1724
|
-
<p class="text-sm text-gray-600">No events yet</p>
|
|
1725
|
-
<p class="mt-2 text-xs text-gray-500">
|
|
1726
|
-
Trigger an agent run to see live activity.
|
|
1727
|
-
</p>
|
|
3765
|
+
<div class="text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8">
|
|
3766
|
+
${this.renderIcon("Zap")}
|
|
1728
3767
|
</div>
|
|
3768
|
+
<span class="text-sm text-gray-600">No events yet</span>
|
|
3769
|
+
<span class="max-w-[240px] text-xs leading-snug text-gray-400"
|
|
3770
|
+
>Events are recorded live. Run the agent to see them here.</span
|
|
3771
|
+
>
|
|
1729
3772
|
</div>
|
|
1730
3773
|
`;
|
|
1731
3774
|
if (filteredEvents.length === 0) return lit.html`
|
|
@@ -1822,23 +3865,32 @@ ${argsString}</pre
|
|
|
1822
3865
|
</div>
|
|
1823
3866
|
<div class="relative h-full w-full overflow-y-auto overflow-x-hidden">
|
|
1824
3867
|
<table class="w-full table-fixed border-collapse text-xs box-border">
|
|
3868
|
+
<colgroup>
|
|
3869
|
+
<col style="width:${this.evtColWidths[0]}px">
|
|
3870
|
+
<col style="width:${this.evtColWidths[1]}px">
|
|
3871
|
+
<col style="width:${this.evtColWidths[2]}px">
|
|
3872
|
+
<col>
|
|
3873
|
+
</colgroup>
|
|
1825
3874
|
<thead class="sticky top-0 z-10">
|
|
1826
3875
|
<tr class="bg-white">
|
|
3876
|
+
${[
|
|
3877
|
+
"Agent",
|
|
3878
|
+
"Time",
|
|
3879
|
+
"Event Type"
|
|
3880
|
+
].map((label, col) => lit.html`
|
|
1827
3881
|
<th
|
|
1828
3882
|
class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900"
|
|
3883
|
+
style="position:relative;overflow:hidden;"
|
|
1829
3884
|
>
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
>
|
|
1840
|
-
Event Type
|
|
1841
|
-
</th>
|
|
3885
|
+
${label}
|
|
3886
|
+
<div
|
|
3887
|
+
style="position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;user-select:none;background:transparent;"
|
|
3888
|
+
@pointerdown=${(e) => this._onEvtColResizeStart(e, col)}
|
|
3889
|
+
@pointermove=${(e) => this._onEvtColResizeMove(e)}
|
|
3890
|
+
@pointerup=${() => this._onEvtColResizeEnd()}
|
|
3891
|
+
@pointercancel=${() => this._onEvtColResizeEnd()}
|
|
3892
|
+
></div>
|
|
3893
|
+
</th>`)}
|
|
1842
3894
|
<th
|
|
1843
3895
|
class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900"
|
|
1844
3896
|
>
|
|
@@ -1929,6 +3981,26 @@ ${prettyEvent}</pre
|
|
|
1929
3981
|
this.eventTypeFilter = "all";
|
|
1930
3982
|
this.requestUpdate();
|
|
1931
3983
|
}
|
|
3984
|
+
_onEvtColResizeStart(e, col) {
|
|
3985
|
+
var _this$evtColWidths$co;
|
|
3986
|
+
e.preventDefault();
|
|
3987
|
+
e.stopPropagation();
|
|
3988
|
+
e.currentTarget.setPointerCapture(e.pointerId);
|
|
3989
|
+
this._evtColResize = {
|
|
3990
|
+
col,
|
|
3991
|
+
startX: e.clientX,
|
|
3992
|
+
startW: (_this$evtColWidths$co = this.evtColWidths[col]) !== null && _this$evtColWidths$co !== void 0 ? _this$evtColWidths$co : 0
|
|
3993
|
+
};
|
|
3994
|
+
}
|
|
3995
|
+
_onEvtColResizeMove(e) {
|
|
3996
|
+
if (!this._evtColResize) return;
|
|
3997
|
+
const { col, startX, startW } = this._evtColResize;
|
|
3998
|
+
this.evtColWidths = this.evtColWidths.map((w, i) => i === col ? Math.max(40, startW + (e.clientX - startX)) : w);
|
|
3999
|
+
this.requestUpdate();
|
|
4000
|
+
}
|
|
4001
|
+
_onEvtColResizeEnd() {
|
|
4002
|
+
this._evtColResize = null;
|
|
4003
|
+
}
|
|
1932
4004
|
exportEvents(events) {
|
|
1933
4005
|
try {
|
|
1934
4006
|
const payload = JSON.stringify(events, null, 2);
|
|
@@ -1973,7 +4045,7 @@ ${prettyEvent}</pre
|
|
|
1973
4045
|
<div class="flex items-start justify-between mb-4">
|
|
1974
4046
|
<div class="flex items-center gap-3">
|
|
1975
4047
|
<div
|
|
1976
|
-
class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600"
|
|
4048
|
+
class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600 cpk-agent-icon"
|
|
1977
4049
|
>
|
|
1978
4050
|
${this.renderIcon("Bot")}
|
|
1979
4051
|
</div>
|
|
@@ -2001,7 +4073,7 @@ ${prettyEvent}</pre
|
|
|
2001
4073
|
<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
|
|
2002
4074
|
<button
|
|
2003
4075
|
type="button"
|
|
2004
|
-
class="rounded-md bg-gray-50 px-3 py-2 text-left transition hover:bg-gray-100 cursor-pointer overflow-hidden"
|
|
4076
|
+
class="rounded-md bg-gray-50 px-3 py-2 text-left transition hover:bg-gray-100 cursor-pointer overflow-hidden cpk-stat-card"
|
|
2005
4077
|
@click=${() => this.handleMenuSelect("ag-ui-events")}
|
|
2006
4078
|
title="View all events in AG-UI Events"
|
|
2007
4079
|
>
|
|
@@ -2012,7 +4084,9 @@ ${prettyEvent}</pre
|
|
|
2012
4084
|
${stats.totalEvents}
|
|
2013
4085
|
</div>
|
|
2014
4086
|
</button>
|
|
2015
|
-
<div
|
|
4087
|
+
<div
|
|
4088
|
+
class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden cpk-stat-card"
|
|
4089
|
+
>
|
|
2016
4090
|
<div class="truncate whitespace-nowrap text-xs text-gray-600">
|
|
2017
4091
|
Messages
|
|
2018
4092
|
</div>
|
|
@@ -2020,7 +4094,9 @@ ${prettyEvent}</pre
|
|
|
2020
4094
|
${stats.messages}
|
|
2021
4095
|
</div>
|
|
2022
4096
|
</div>
|
|
2023
|
-
<div
|
|
4097
|
+
<div
|
|
4098
|
+
class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden cpk-stat-card"
|
|
4099
|
+
>
|
|
2024
4100
|
<div class="truncate whitespace-nowrap text-xs text-gray-600">
|
|
2025
4101
|
Tool Calls
|
|
2026
4102
|
</div>
|
|
@@ -2028,7 +4104,9 @@ ${prettyEvent}</pre
|
|
|
2028
4104
|
${stats.toolCalls}
|
|
2029
4105
|
</div>
|
|
2030
4106
|
</div>
|
|
2031
|
-
<div
|
|
4107
|
+
<div
|
|
4108
|
+
class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden cpk-stat-card"
|
|
4109
|
+
>
|
|
2032
4110
|
<div class="truncate whitespace-nowrap text-xs text-gray-600">
|
|
2033
4111
|
Errors
|
|
2034
4112
|
</div>
|
|
@@ -2040,9 +4118,9 @@ ${prettyEvent}</pre
|
|
|
2040
4118
|
</div>
|
|
2041
4119
|
|
|
2042
4120
|
<!-- Current State Section -->
|
|
2043
|
-
<div class="
|
|
2044
|
-
<div class="
|
|
2045
|
-
<h4
|
|
4121
|
+
<div class="cpk-section-card">
|
|
4122
|
+
<div class="cpk-section-header">
|
|
4123
|
+
<h4>Current State</h4>
|
|
2046
4124
|
</div>
|
|
2047
4125
|
<div class="overflow-auto p-4">
|
|
2048
4126
|
${this.hasRenderableState(state) ? lit.html`
|
|
@@ -2051,7 +4129,7 @@ ${prettyEvent}</pre
|
|
|
2051
4129
|
><code>${this.formatStateForDisplay(state)}</code></pre>
|
|
2052
4130
|
` : lit.html`
|
|
2053
4131
|
<div
|
|
2054
|
-
class="flex h-
|
|
4132
|
+
class="flex h-12 items-center justify-center text-xs text-gray-500"
|
|
2055
4133
|
>
|
|
2056
4134
|
<div class="flex items-center gap-2 text-gray-500">
|
|
2057
4135
|
<span class="text-lg text-gray-400"
|
|
@@ -2065,32 +4143,20 @@ ${prettyEvent}</pre
|
|
|
2065
4143
|
</div>
|
|
2066
4144
|
|
|
2067
4145
|
<!-- Current Messages Section -->
|
|
2068
|
-
<div class="
|
|
2069
|
-
<div class="
|
|
2070
|
-
<h4
|
|
2071
|
-
Current Messages
|
|
2072
|
-
</h4>
|
|
4146
|
+
<div class="cpk-section-card">
|
|
4147
|
+
<div class="cpk-section-header">
|
|
4148
|
+
<h4>Current Messages</h4>
|
|
2073
4149
|
</div>
|
|
2074
4150
|
<div class="overflow-auto">
|
|
2075
4151
|
${messages && messages.length > 0 ? lit.html`
|
|
2076
|
-
<
|
|
2077
|
-
<
|
|
2078
|
-
<
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
Role
|
|
2083
|
-
</th>
|
|
2084
|
-
<th
|
|
2085
|
-
class="px-4 py-2 text-left font-medium text-gray-700"
|
|
2086
|
-
>
|
|
2087
|
-
Content
|
|
2088
|
-
</th>
|
|
2089
|
-
</tr>
|
|
2090
|
-
</thead>
|
|
2091
|
-
<tbody class="divide-y divide-gray-200">
|
|
4152
|
+
<div class="w-full text-xs">
|
|
4153
|
+
<div class="flex bg-gray-50">
|
|
4154
|
+
<div class="w-40 shrink-0 px-4 py-2 font-medium text-gray-700">Role</div>
|
|
4155
|
+
<div class="flex-1 px-4 py-2 font-medium text-gray-700">Content</div>
|
|
4156
|
+
</div>
|
|
4157
|
+
<div class="divide-y divide-gray-200">
|
|
2092
4158
|
${messages.map((msg) => {
|
|
2093
|
-
var _msg$contentText, _msg$
|
|
4159
|
+
var _msg$contentText, _msg$toolCalls2;
|
|
2094
4160
|
const role = msg.role || "unknown";
|
|
2095
4161
|
const roleColors = {
|
|
2096
4162
|
user: "bg-blue-100 text-blue-800",
|
|
@@ -2100,38 +4166,36 @@ ${prettyEvent}</pre
|
|
|
2100
4166
|
unknown: "bg-gray-100 text-gray-600"
|
|
2101
4167
|
};
|
|
2102
4168
|
const rawContent = (_msg$contentText = msg.contentText) !== null && _msg$contentText !== void 0 ? _msg$contentText : "";
|
|
2103
|
-
const toolCalls = (_msg$
|
|
4169
|
+
const toolCalls = (_msg$toolCalls2 = msg.toolCalls) !== null && _msg$toolCalls2 !== void 0 ? _msg$toolCalls2 : [];
|
|
2104
4170
|
const hasContent = rawContent.trim().length > 0;
|
|
2105
4171
|
const contentFallback = toolCalls.length > 0 ? "Invoked tool call" : "—";
|
|
2106
4172
|
return lit.html`
|
|
2107
|
-
<
|
|
2108
|
-
<
|
|
4173
|
+
<div class="flex items-start">
|
|
4174
|
+
<div class="w-40 shrink-0 px-4 py-2">
|
|
2109
4175
|
<span
|
|
2110
4176
|
class="inline-flex rounded px-2 py-0.5 text-[10px] font-medium ${roleColors[role] || roleColors.unknown}"
|
|
2111
4177
|
>
|
|
2112
4178
|
${role}
|
|
2113
4179
|
</span>
|
|
2114
|
-
</
|
|
2115
|
-
<
|
|
4180
|
+
</div>
|
|
4181
|
+
<div class="flex-1 px-4 py-2">
|
|
2116
4182
|
${hasContent ? lit.html`<div
|
|
2117
|
-
class="
|
|
4183
|
+
class="whitespace-pre-line break-words text-gray-700"
|
|
2118
4184
|
>
|
|
2119
4185
|
${rawContent}
|
|
2120
|
-
</div>` : lit.html`<div
|
|
2121
|
-
class="text-xs italic text-gray-400"
|
|
2122
|
-
>
|
|
4186
|
+
</div>` : lit.html`<div class="italic text-gray-400">
|
|
2123
4187
|
${contentFallback}
|
|
2124
4188
|
</div>`}
|
|
2125
4189
|
${role === "assistant" && toolCalls.length > 0 ? this.renderToolCallDetails(toolCalls) : lit.nothing}
|
|
2126
|
-
</
|
|
2127
|
-
</
|
|
4190
|
+
</div>
|
|
4191
|
+
</div>
|
|
2128
4192
|
`;
|
|
2129
4193
|
})}
|
|
2130
|
-
</
|
|
2131
|
-
</
|
|
4194
|
+
</div>
|
|
4195
|
+
</div>
|
|
2132
4196
|
` : lit.html`
|
|
2133
4197
|
<div
|
|
2134
|
-
class="flex h-
|
|
4198
|
+
class="flex h-12 items-center justify-center text-xs text-gray-500"
|
|
2135
4199
|
>
|
|
2136
4200
|
<div class="flex items-center gap-2 text-gray-500">
|
|
2137
4201
|
<span class="text-lg text-gray-400"
|
|
@@ -2193,14 +4257,31 @@ ${prettyEvent}</pre
|
|
|
2193
4257
|
}
|
|
2194
4258
|
handleMenuSelect(key) {
|
|
2195
4259
|
if (!this.menuItems.some((item) => item.key === key)) return;
|
|
4260
|
+
const previousMenu = this.selectedMenu;
|
|
2196
4261
|
this.selectedMenu = key;
|
|
2197
4262
|
if (key === "agents" && this.selectedContext === "all-agents") {
|
|
2198
4263
|
const agentOptions = this.contextOptions.filter((opt) => opt.key !== "all-agents");
|
|
2199
4264
|
if (agentOptions.length > 0) {
|
|
2200
|
-
const
|
|
2201
|
-
|
|
4265
|
+
const mostRecent = agentOptions.reduce((best, opt) => {
|
|
4266
|
+
var _this$getAgentStats$l;
|
|
4267
|
+
const ts = (_this$getAgentStats$l = this.getAgentStats(opt.key).lastActivity) !== null && _this$getAgentStats$l !== void 0 ? _this$getAgentStats$l : -1;
|
|
4268
|
+
return best === null || ts > best.ts ? {
|
|
4269
|
+
key: opt.key,
|
|
4270
|
+
ts
|
|
4271
|
+
} : best;
|
|
4272
|
+
}, null);
|
|
4273
|
+
this.selectedContext = mostRecent ? mostRecent.key : agentOptions[0].key;
|
|
2202
4274
|
}
|
|
2203
4275
|
}
|
|
4276
|
+
if (previousMenu === "agents" && key !== "agents") {
|
|
4277
|
+
if (this.contextOptions.filter((opt) => opt.key !== "all-agents").length > 1) this.selectedContext = "all-agents";
|
|
4278
|
+
}
|
|
4279
|
+
if (key === "threads") this.autoSelectLatestThread();
|
|
4280
|
+
if (key === "ag-ui-events" || key === "agents") requestAnimationFrame(() => {
|
|
4281
|
+
var _this$shadowRoot;
|
|
4282
|
+
const scroller = (_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 ? void 0 : _this$shadowRoot.getElementById("cpk-main-scroll");
|
|
4283
|
+
if (scroller) scroller.scrollTop = 0;
|
|
4284
|
+
});
|
|
2204
4285
|
this.contextMenuOpen = false;
|
|
2205
4286
|
this.persistState();
|
|
2206
4287
|
this.requestUpdate();
|
|
@@ -2498,9 +4579,9 @@ ${prettyEvent}</pre
|
|
|
2498
4579
|
let currentSchema = schema;
|
|
2499
4580
|
let def = currentSchema._def;
|
|
2500
4581
|
while (def.typeName === "ZodOptional" || def.typeName === "ZodNullable" || def.typeName === "ZodDefault") {
|
|
2501
|
-
var
|
|
4582
|
+
var _ref4;
|
|
2502
4583
|
if (def.typeName === "ZodDefault" && def.defaultValue !== void 0) info.defaultValue = typeof def.defaultValue === "function" ? def.defaultValue() : def.defaultValue;
|
|
2503
|
-
currentSchema = (
|
|
4584
|
+
currentSchema = (_ref4 = def.innerType) !== null && _ref4 !== void 0 ? _ref4 : currentSchema;
|
|
2504
4585
|
if (!(currentSchema === null || currentSchema === void 0 ? void 0 : currentSchema._def)) break;
|
|
2505
4586
|
def = currentSchema._def;
|
|
2506
4587
|
}
|
|
@@ -2596,9 +4677,19 @@ ${prettyEvent}</pre
|
|
|
2596
4677
|
<div class="mb-3">
|
|
2597
4678
|
<h5 class="mb-1 text-xs font-semibold text-gray-700">ID</h5>
|
|
2598
4679
|
<code
|
|
2599
|
-
class="
|
|
4680
|
+
class="font-mono text-xs font-medium text-gray-800 flex-1 truncate min-w-0"
|
|
2600
4681
|
>${id}</code
|
|
2601
4682
|
>
|
|
4683
|
+
<button
|
|
4684
|
+
type="button"
|
|
4685
|
+
class="cpk-copy-btn"
|
|
4686
|
+
@click=${(e) => {
|
|
4687
|
+
e.stopPropagation();
|
|
4688
|
+
this.copyContextValue(id, `${id}:id`);
|
|
4689
|
+
}}
|
|
4690
|
+
>
|
|
4691
|
+
${this.copiedContextItems.has(`${id}:id`) ? "✓" : "Copy"}
|
|
4692
|
+
</button>
|
|
2602
4693
|
</div>
|
|
2603
4694
|
${hasValue ? lit.html`
|
|
2604
4695
|
<div class="mb-2 flex items-center justify-between gap-2">
|
|
@@ -2606,8 +4697,8 @@ ${prettyEvent}</pre
|
|
|
2606
4697
|
Value
|
|
2607
4698
|
</h5>
|
|
2608
4699
|
<button
|
|
2609
|
-
class="flex items-center gap-1 rounded-md border border-gray-200 bg-white px-2 py-1 text-[10px] font-medium text-gray-700 transition hover:bg-gray-50"
|
|
2610
4700
|
type="button"
|
|
4701
|
+
class="cpk-copy-btn"
|
|
2611
4702
|
@click=${(e) => {
|
|
2612
4703
|
e.stopPropagation();
|
|
2613
4704
|
this.copyContextValue(context.value, id);
|
|
@@ -2616,13 +4707,6 @@ ${prettyEvent}</pre
|
|
|
2616
4707
|
${this.copiedContextItems.has(id) ? "Copied" : "Copy JSON"}
|
|
2617
4708
|
</button>
|
|
2618
4709
|
</div>
|
|
2619
|
-
<div
|
|
2620
|
-
class="rounded-md border border-gray-200 bg-white p-3"
|
|
2621
|
-
>
|
|
2622
|
-
<pre
|
|
2623
|
-
class="overflow-auto text-xs text-gray-800 max-h-96"
|
|
2624
|
-
><code>${this.formatContextValue(context.value)}</code></pre>
|
|
2625
|
-
</div>
|
|
2626
4710
|
` : lit.html`
|
|
2627
4711
|
<div class="flex items-center justify-center py-4 text-xs text-gray-500">
|
|
2628
4712
|
<span>No value available</span>
|
|
@@ -2635,7 +4719,7 @@ ${prettyEvent}</pre
|
|
|
2635
4719
|
}
|
|
2636
4720
|
getContextValuePreview(value) {
|
|
2637
4721
|
if (value === void 0 || value === null) return "—";
|
|
2638
|
-
if (typeof value === "string") return value.length > 50 ? `${value.
|
|
4722
|
+
if (typeof value === "string") return value.length > 50 ? `${value.slice(0, 50)}...` : value;
|
|
2639
4723
|
if (typeof value === "number" || typeof value === "boolean") return String(value);
|
|
2640
4724
|
if (Array.isArray(value)) return `Array(${value.length})`;
|
|
2641
4725
|
if (typeof value === "object") {
|
|
@@ -2656,8 +4740,8 @@ ${prettyEvent}</pre
|
|
|
2656
4740
|
}
|
|
2657
4741
|
}
|
|
2658
4742
|
async copyContextValue(value, contextId) {
|
|
2659
|
-
var _navigator$
|
|
2660
|
-
if (typeof navigator === "undefined" || !((_navigator$
|
|
4743
|
+
var _navigator$clipboard2;
|
|
4744
|
+
if (typeof navigator === "undefined" || !((_navigator$clipboard2 = navigator.clipboard) === null || _navigator$clipboard2 === void 0 ? void 0 : _navigator$clipboard2.writeText)) {
|
|
2661
4745
|
console.warn("Clipboard API is not available in this environment.");
|
|
2662
4746
|
return;
|
|
2663
4747
|
}
|
|
@@ -2686,50 +4770,25 @@ ${prettyEvent}</pre
|
|
|
2686
4770
|
else this.expandedRows.add(eventId);
|
|
2687
4771
|
this.requestUpdate();
|
|
2688
4772
|
}
|
|
2689
|
-
|
|
2690
|
-
if (!this.isOpen) return lit.nothing;
|
|
2691
|
-
this.ensureAnnouncementLoading();
|
|
4773
|
+
renderAnnouncementBanner() {
|
|
2692
4774
|
if (!this.hasUnseenAnnouncement) return lit.nothing;
|
|
2693
|
-
if (!this.announcementLoaded && !this.
|
|
2694
|
-
class="
|
|
2695
|
-
>
|
|
2696
|
-
<div class="flex items-center gap-2 font-semibold">
|
|
2697
|
-
<span
|
|
2698
|
-
class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-slate-900 text-white shadow-sm"
|
|
2699
|
-
>
|
|
2700
|
-
${this.renderIcon("Megaphone")}
|
|
2701
|
-
</span>
|
|
2702
|
-
<span>Loading latest announcement…</span>
|
|
2703
|
-
</div>
|
|
2704
|
-
</div>`;
|
|
2705
|
-
if (this.announcementLoadError) return lit.html`<div
|
|
2706
|
-
class="mx-4 my-3 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-900 shadow-[0_12px_30px_rgba(15,23,42,0.12)]"
|
|
4775
|
+
if (!this.announcementLoaded && !this.announcementHtml) return lit.html`<div
|
|
4776
|
+
class="flex items-center gap-2 px-4 py-3 text-sm font-semibold text-slate-800"
|
|
2707
4777
|
>
|
|
2708
|
-
<
|
|
2709
|
-
|
|
2710
|
-
|
|
2711
|
-
|
|
2712
|
-
|
|
2713
|
-
|
|
2714
|
-
<span>Announcement unavailable</span>
|
|
2715
|
-
</div>
|
|
2716
|
-
<p class="mt-2 text-xs text-rose-800">
|
|
2717
|
-
We couldn’t load the latest notice. Please try opening the inspector
|
|
2718
|
-
again.
|
|
2719
|
-
</p>
|
|
4778
|
+
<span
|
|
4779
|
+
class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-slate-900 text-white shadow-sm"
|
|
4780
|
+
>
|
|
4781
|
+
${this.renderIcon("Megaphone")}
|
|
4782
|
+
</span>
|
|
4783
|
+
<span>Loading latest announcement…</span>
|
|
2720
4784
|
</div>`;
|
|
2721
|
-
if (!this.
|
|
2722
|
-
|
|
2723
|
-
${this.announcementMarkdown}</pre
|
|
2724
|
-
>`;
|
|
2725
|
-
return lit.html`<div
|
|
2726
|
-
class="mx-4 my-3 rounded-xl border border-slate-200 bg-white px-4 py-4 shadow-[0_12px_30px_rgba(15,23,42,0.12)]"
|
|
2727
|
-
>
|
|
4785
|
+
if (!this.announcementHtml) return lit.nothing;
|
|
4786
|
+
return lit.html`<div class="mx-4 mt-3 mb-3 rounded-xl border border-slate-200 bg-white px-4 py-3">
|
|
2728
4787
|
<div
|
|
2729
|
-
class="mb-
|
|
4788
|
+
class="mb-2 flex items-center gap-2 text-xs font-semibold text-slate-900"
|
|
2730
4789
|
>
|
|
2731
4790
|
<span
|
|
2732
|
-
class="inline-flex h-
|
|
4791
|
+
class="inline-flex h-5 w-5 items-center justify-center rounded-md bg-slate-900 text-white shadow-sm"
|
|
2733
4792
|
>
|
|
2734
4793
|
${this.renderIcon("Megaphone")}
|
|
2735
4794
|
</span>
|
|
@@ -2740,12 +4799,30 @@ ${this.announcementMarkdown}</pre
|
|
|
2740
4799
|
@click=${this.handleDismissAnnouncement}
|
|
2741
4800
|
aria-label="Dismiss announcement"
|
|
2742
4801
|
>
|
|
2743
|
-
|
|
4802
|
+
${this.renderIcon("X")}
|
|
2744
4803
|
</button>
|
|
2745
4804
|
</div>
|
|
2746
|
-
<div class="announcement-
|
|
2747
|
-
|
|
4805
|
+
<div class="announcement-body ${this.announcementExpanded ? "announcement-body--expanded" : "announcement-body--collapsed"}">
|
|
4806
|
+
<div
|
|
4807
|
+
class="announcement-content"
|
|
4808
|
+
@click=${this.handleAnnouncementContentClick}
|
|
4809
|
+
>
|
|
4810
|
+
${(0, lit_directives_unsafe_html_js.unsafeHTML)(this.announcementHtml)}
|
|
4811
|
+
</div>
|
|
4812
|
+
${!this.announcementExpanded ? lit.html`
|
|
4813
|
+
<div class="announcement-fade"></div>
|
|
4814
|
+
` : lit.nothing}
|
|
2748
4815
|
</div>
|
|
4816
|
+
<button
|
|
4817
|
+
class="announcement-toggle"
|
|
4818
|
+
type="button"
|
|
4819
|
+
@click=${() => {
|
|
4820
|
+
this.announcementExpanded = !this.announcementExpanded;
|
|
4821
|
+
this.requestUpdate();
|
|
4822
|
+
}}
|
|
4823
|
+
>
|
|
4824
|
+
${this.announcementExpanded ? "Show less ↑" : "Show more ↓"}
|
|
4825
|
+
</button>
|
|
2749
4826
|
</div>`;
|
|
2750
4827
|
}
|
|
2751
4828
|
ensureAnnouncementLoading() {
|
|
@@ -2780,14 +4857,13 @@ ${this.announcementMarkdown}</pre
|
|
|
2780
4857
|
const storedTimestamp = this.loadStoredAnnouncementTimestamp();
|
|
2781
4858
|
this.announcementTimestamp = timestamp;
|
|
2782
4859
|
this.announcementPreviewText = previewText !== null && previewText !== void 0 ? previewText : "";
|
|
2783
|
-
this.announcementMarkdown = markdown;
|
|
2784
4860
|
this.hasUnseenAnnouncement = (!storedTimestamp || storedTimestamp !== timestamp) && !!this.announcementPreviewText;
|
|
2785
4861
|
this.showAnnouncementPreview = this.hasUnseenAnnouncement;
|
|
2786
4862
|
this.announcementHtml = await this.convertMarkdownToHtml(markdown);
|
|
2787
4863
|
this.announcementLoaded = true;
|
|
2788
4864
|
this.requestUpdate();
|
|
2789
4865
|
} catch (error) {
|
|
2790
|
-
|
|
4866
|
+
console.warn("[CopilotKit Inspector] Failed to load announcement", error);
|
|
2791
4867
|
this.announcementLoaded = true;
|
|
2792
4868
|
this.requestUpdate();
|
|
2793
4869
|
}
|
|
@@ -2797,7 +4873,28 @@ ${this.announcementMarkdown}</pre
|
|
|
2797
4873
|
renderer.link = (href, title, text) => {
|
|
2798
4874
|
return `<a href="${this.escapeHtmlAttr(this.appendRefParam(href !== null && href !== void 0 ? href : ""))}" target="_blank" rel="noopener"${title ? ` title="${this.escapeHtmlAttr(title)}"` : ""}>${text}</a>`;
|
|
2799
4875
|
};
|
|
2800
|
-
|
|
4876
|
+
renderer.code = (code, lang) => {
|
|
4877
|
+
const safeLang = (lang !== null && lang !== void 0 ? lang : "").replace(/[^a-z0-9-]/gi, "");
|
|
4878
|
+
return `<div class="announcement-code"><pre><code${safeLang ? ` class="language-${safeLang}"` : ""}>${escapeHtml(code)}</code></pre><div class="announcement-code__copy-shield"><button type="button" class="announcement-code__copy" data-copy="${this.encodeBase64(code)}" aria-label="Copy code">Copy</button></div></div>`;
|
|
4879
|
+
};
|
|
4880
|
+
return marked.marked.parse(markdown, {
|
|
4881
|
+
renderer,
|
|
4882
|
+
async: false
|
|
4883
|
+
});
|
|
4884
|
+
}
|
|
4885
|
+
encodeBase64(value) {
|
|
4886
|
+
if (typeof window === "undefined" || typeof window.btoa !== "function") return "";
|
|
4887
|
+
const bytes = new TextEncoder().encode(value);
|
|
4888
|
+
let binary = "";
|
|
4889
|
+
for (const b of bytes) binary += String.fromCharCode(b);
|
|
4890
|
+
return window.btoa(binary);
|
|
4891
|
+
}
|
|
4892
|
+
decodeBase64(value) {
|
|
4893
|
+
if (typeof window === "undefined" || typeof window.atob !== "function") return "";
|
|
4894
|
+
const decoded = window.atob(value);
|
|
4895
|
+
const bytes = new Uint8Array(decoded.length);
|
|
4896
|
+
for (let i = 0; i < decoded.length; i++) bytes[i] = decoded.charCodeAt(i);
|
|
4897
|
+
return new TextDecoder().decode(bytes);
|
|
2801
4898
|
}
|
|
2802
4899
|
appendRefParam(href) {
|
|
2803
4900
|
try {
|
|
@@ -2809,7 +4906,7 @@ ${this.announcementMarkdown}</pre
|
|
|
2809
4906
|
}
|
|
2810
4907
|
}
|
|
2811
4908
|
escapeHtmlAttr(value) {
|
|
2812
|
-
return value
|
|
4909
|
+
return escapeHtml(value).replace(/"/g, """).replace(/'/g, "'");
|
|
2813
4910
|
}
|
|
2814
4911
|
loadStoredAnnouncementTimestamp() {
|
|
2815
4912
|
if (typeof window === "undefined" || !window.localStorage) return null;
|
|
@@ -2856,6 +4953,7 @@ ${this.announcementMarkdown}</pre
|
|
|
2856
4953
|
z-index: 2147483646;
|
|
2857
4954
|
display: block;
|
|
2858
4955
|
will-change: transform;
|
|
4956
|
+
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
|
|
2859
4957
|
}
|
|
2860
4958
|
|
|
2861
4959
|
:host([data-transitioning="true"]) {
|
|
@@ -2911,13 +5009,14 @@ ${this.announcementMarkdown}</pre
|
|
|
2911
5009
|
left: 50%;
|
|
2912
5010
|
transform: translateX(-50%) translateY(-4px);
|
|
2913
5011
|
white-space: nowrap;
|
|
2914
|
-
background: rgba(
|
|
5012
|
+
background: rgba(1, 5, 7, 0.95);
|
|
2915
5013
|
color: white;
|
|
2916
5014
|
padding: 4px 8px;
|
|
2917
5015
|
border-radius: 6px;
|
|
2918
5016
|
font-size: 10px;
|
|
5017
|
+
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
|
|
2919
5018
|
line-height: 1.2;
|
|
2920
|
-
box-shadow: 0 4px 10px rgba(
|
|
5019
|
+
box-shadow: 0 4px 10px rgba(1, 5, 7, 0.18);
|
|
2921
5020
|
opacity: 0;
|
|
2922
5021
|
pointer-events: none;
|
|
2923
5022
|
transition:
|
|
@@ -2938,18 +5037,19 @@ ${this.announcementMarkdown}</pre
|
|
|
2938
5037
|
min-width: 300px;
|
|
2939
5038
|
max-width: 300px;
|
|
2940
5039
|
background: white;
|
|
2941
|
-
color: #
|
|
5040
|
+
color: #010507;
|
|
2942
5041
|
font-size: 13px;
|
|
5042
|
+
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
|
|
2943
5043
|
line-height: 1.4;
|
|
2944
5044
|
border-radius: 12px;
|
|
2945
|
-
box-shadow: 0 12px 28px rgba(
|
|
5045
|
+
box-shadow: 0 12px 28px rgba(1, 5, 7, 0.12);
|
|
2946
5046
|
padding: 10px 12px;
|
|
2947
5047
|
display: inline-flex;
|
|
2948
5048
|
align-items: flex-start;
|
|
2949
5049
|
gap: 8px;
|
|
2950
5050
|
z-index: 4500;
|
|
2951
5051
|
animation: fade-slide-in 160ms ease;
|
|
2952
|
-
border: 1px solid rgba(
|
|
5052
|
+
border: 1px solid rgba(219, 219, 229, 0.4);
|
|
2953
5053
|
white-space: normal;
|
|
2954
5054
|
word-break: break-word;
|
|
2955
5055
|
text-align: left;
|
|
@@ -2970,7 +5070,7 @@ ${this.announcementMarkdown}</pre
|
|
|
2970
5070
|
width: 10px;
|
|
2971
5071
|
height: 10px;
|
|
2972
5072
|
background: white;
|
|
2973
|
-
border: 1px solid rgba(
|
|
5073
|
+
border: 1px solid rgba(219, 219, 229, 0.4);
|
|
2974
5074
|
transform: rotate(45deg);
|
|
2975
5075
|
top: 50%;
|
|
2976
5076
|
margin-top: -5px;
|
|
@@ -2979,76 +5079,558 @@ ${this.announcementMarkdown}</pre
|
|
|
2979
5079
|
|
|
2980
5080
|
.announcement-preview[data-side="left"] .announcement-preview__arrow {
|
|
2981
5081
|
right: -5px;
|
|
2982
|
-
box-shadow: 6px -6px 10px rgba(
|
|
5082
|
+
box-shadow: 6px -6px 10px rgba(1, 5, 7, 0.08);
|
|
2983
5083
|
}
|
|
2984
5084
|
|
|
2985
5085
|
.announcement-preview[data-side="right"] .announcement-preview__arrow {
|
|
2986
5086
|
left: -5px;
|
|
2987
|
-
box-shadow: -6px 6px 10px rgba(
|
|
5087
|
+
box-shadow: -6px 6px 10px rgba(1, 5, 7, 0.08);
|
|
2988
5088
|
}
|
|
2989
5089
|
|
|
2990
5090
|
.announcement-dismiss {
|
|
2991
|
-
|
|
2992
|
-
|
|
2993
|
-
|
|
2994
|
-
|
|
2995
|
-
|
|
2996
|
-
|
|
5091
|
+
background: none;
|
|
5092
|
+
border: none;
|
|
5093
|
+
cursor: pointer;
|
|
5094
|
+
color: #838389;
|
|
5095
|
+
width: 28px;
|
|
5096
|
+
height: 28px;
|
|
5097
|
+
display: flex;
|
|
5098
|
+
align-items: center;
|
|
5099
|
+
justify-content: center;
|
|
5100
|
+
border-radius: 6px;
|
|
5101
|
+
padding: 0;
|
|
2997
5102
|
transition:
|
|
2998
5103
|
background 120ms ease,
|
|
2999
5104
|
color 120ms ease;
|
|
3000
5105
|
}
|
|
3001
5106
|
|
|
3002
5107
|
.announcement-dismiss:hover {
|
|
3003
|
-
background: rgba(
|
|
3004
|
-
color: #
|
|
5108
|
+
background: rgba(0, 0, 0, 0.06);
|
|
5109
|
+
color: #010507;
|
|
5110
|
+
}
|
|
5111
|
+
|
|
5112
|
+
/* ── Agent tab section cards ─────────────────────────────────────── */
|
|
5113
|
+
.cpk-section-card {
|
|
5114
|
+
border-radius: 8px;
|
|
5115
|
+
background: #ffffff;
|
|
5116
|
+
overflow: hidden;
|
|
5117
|
+
}
|
|
5118
|
+
|
|
5119
|
+
/* ── Agent icon bubble ───────────────────────────────────────────── */
|
|
5120
|
+
.cpk-agent-icon {
|
|
5121
|
+
background-color: #f0f0f4 !important;
|
|
5122
|
+
color: #57575b !important;
|
|
5123
|
+
}
|
|
5124
|
+
|
|
5125
|
+
/* ── Agent stat cards ────────────────────────────────────────────── */
|
|
5126
|
+
.cpk-stat-card {
|
|
5127
|
+
background-color: #ffffff !important;
|
|
5128
|
+
border: 1px solid #dbdbe5 !important;
|
|
5129
|
+
}
|
|
5130
|
+
button.cpk-stat-card:hover {
|
|
5131
|
+
background-color: #f7f7f9 !important;
|
|
5132
|
+
}
|
|
5133
|
+
|
|
5134
|
+
/* ── Circle chevron (Frontend Tools + Context) ──────────────────── */
|
|
5135
|
+
.cpk-chevron-circle {
|
|
5136
|
+
display: inline-flex;
|
|
5137
|
+
align-items: center;
|
|
5138
|
+
justify-content: center;
|
|
5139
|
+
width: 24px;
|
|
5140
|
+
height: 24px;
|
|
5141
|
+
border-radius: 50%;
|
|
5142
|
+
background-color: #f0f0f4;
|
|
5143
|
+
color: #838389;
|
|
5144
|
+
flex-shrink: 0;
|
|
5145
|
+
transition: transform 0.2s;
|
|
5146
|
+
}
|
|
5147
|
+
.cpk-chevron-circle svg {
|
|
5148
|
+
width: 14px !important;
|
|
5149
|
+
height: 14px !important;
|
|
5150
|
+
}
|
|
5151
|
+
.cpk-chevron-circle--open {
|
|
5152
|
+
transform: rotate(180deg);
|
|
5153
|
+
}
|
|
5154
|
+
|
|
5155
|
+
/* ── Inline copy button ─────────────────────────────────────────── */
|
|
5156
|
+
.cpk-copy-btn {
|
|
5157
|
+
font-size: 10px;
|
|
5158
|
+
font-weight: 500;
|
|
5159
|
+
color: #57575b;
|
|
5160
|
+
background: #ffffff;
|
|
5161
|
+
border: 1px solid #dbdbe5;
|
|
5162
|
+
cursor: pointer;
|
|
5163
|
+
padding: 2px 8px;
|
|
5164
|
+
border-radius: 4px;
|
|
5165
|
+
flex-shrink: 0;
|
|
5166
|
+
transition:
|
|
5167
|
+
background-color 0.15s,
|
|
5168
|
+
border-color 0.15s;
|
|
5169
|
+
}
|
|
5170
|
+
.cpk-copy-btn:hover {
|
|
5171
|
+
background-color: #f0f0f4;
|
|
5172
|
+
border-color: #afafb7;
|
|
5173
|
+
}
|
|
5174
|
+
|
|
5175
|
+
.cpk-section-header {
|
|
5176
|
+
background: #e8edf5;
|
|
5177
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|
5178
|
+
padding: 10px 16px;
|
|
5179
|
+
}
|
|
5180
|
+
.cpk-section-header h4 {
|
|
5181
|
+
font-size: 11px;
|
|
5182
|
+
font-weight: 600;
|
|
5183
|
+
color: #181c1f;
|
|
5184
|
+
margin: 0;
|
|
5185
|
+
}
|
|
5186
|
+
|
|
5187
|
+
/* Inputs/selects inside the lavender header need an explicit white bg */
|
|
5188
|
+
.cpk-section-header input,
|
|
5189
|
+
.cpk-section-header select {
|
|
5190
|
+
background-color: #ffffff !important;
|
|
5191
|
+
box-shadow: none !important;
|
|
5192
|
+
}
|
|
5193
|
+
.cpk-section-header select {
|
|
5194
|
+
padding-right: 24px !important;
|
|
5195
|
+
}
|
|
5196
|
+
/* Events table column headers */
|
|
5197
|
+
table thead th {
|
|
5198
|
+
font-weight: 600 !important;
|
|
3005
5199
|
}
|
|
3006
5200
|
|
|
3007
5201
|
.announcement-content {
|
|
3008
|
-
color: #
|
|
3009
|
-
font-size:
|
|
3010
|
-
|
|
5202
|
+
color: #1f2230;
|
|
5203
|
+
font-size: 13px;
|
|
5204
|
+
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
|
|
5205
|
+
line-height: 1.55;
|
|
3011
5206
|
}
|
|
3012
5207
|
|
|
3013
5208
|
.announcement-content h1,
|
|
3014
5209
|
.announcement-content h2,
|
|
3015
5210
|
.announcement-content h3 {
|
|
5211
|
+
color: #010507;
|
|
3016
5212
|
font-weight: 700;
|
|
3017
|
-
|
|
5213
|
+
line-height: 1.3;
|
|
5214
|
+
margin: 0.9rem 0 0.4rem;
|
|
5215
|
+
}
|
|
5216
|
+
.announcement-content > h1:first-child,
|
|
5217
|
+
.announcement-content > h2:first-child,
|
|
5218
|
+
.announcement-content > h3:first-child {
|
|
5219
|
+
margin-top: 0;
|
|
3018
5220
|
}
|
|
3019
5221
|
|
|
3020
5222
|
.announcement-content h1 {
|
|
3021
|
-
font-size: 1.
|
|
5223
|
+
font-size: 1.15rem;
|
|
5224
|
+
letter-spacing: -0.01em;
|
|
3022
5225
|
}
|
|
3023
|
-
|
|
3024
5226
|
.announcement-content h2 {
|
|
3025
5227
|
font-size: 1rem;
|
|
3026
5228
|
}
|
|
3027
|
-
|
|
3028
5229
|
.announcement-content h3 {
|
|
3029
|
-
font-size: 0.
|
|
5230
|
+
font-size: 0.9rem;
|
|
5231
|
+
text-transform: none;
|
|
3030
5232
|
}
|
|
3031
5233
|
|
|
3032
5234
|
.announcement-content p {
|
|
3033
|
-
margin: 0.
|
|
5235
|
+
margin: 0.45rem 0;
|
|
5236
|
+
}
|
|
5237
|
+
|
|
5238
|
+
.announcement-content strong {
|
|
5239
|
+
color: #010507;
|
|
5240
|
+
font-weight: 700;
|
|
3034
5241
|
}
|
|
3035
5242
|
|
|
3036
5243
|
.announcement-content ul {
|
|
3037
5244
|
list-style: disc;
|
|
3038
5245
|
padding-left: 1.25rem;
|
|
3039
|
-
margin: 0.
|
|
5246
|
+
margin: 0.45rem 0;
|
|
3040
5247
|
}
|
|
3041
5248
|
|
|
3042
5249
|
.announcement-content ol {
|
|
3043
5250
|
list-style: decimal;
|
|
3044
5251
|
padding-left: 1.25rem;
|
|
3045
|
-
margin: 0.
|
|
5252
|
+
margin: 0.45rem 0;
|
|
5253
|
+
}
|
|
5254
|
+
|
|
5255
|
+
.announcement-content li + li {
|
|
5256
|
+
margin-top: 0.15rem;
|
|
3046
5257
|
}
|
|
3047
5258
|
|
|
3048
5259
|
.announcement-content a {
|
|
3049
|
-
color: #
|
|
5260
|
+
color: #757cf2;
|
|
3050
5261
|
text-decoration: underline;
|
|
3051
5262
|
}
|
|
5263
|
+
|
|
5264
|
+
.announcement-content :not(pre) > code {
|
|
5265
|
+
background: #f3f3f7;
|
|
5266
|
+
border: 1px solid #e4e4ec;
|
|
5267
|
+
border-radius: 4px;
|
|
5268
|
+
padding: 1px 5px;
|
|
5269
|
+
font-size: 0.85em;
|
|
5270
|
+
color: #4a3a8a;
|
|
5271
|
+
}
|
|
5272
|
+
|
|
5273
|
+
.announcement-code {
|
|
5274
|
+
position: relative;
|
|
5275
|
+
margin: 0.6rem 0;
|
|
5276
|
+
}
|
|
5277
|
+
|
|
5278
|
+
.announcement-code pre {
|
|
5279
|
+
background: #0f1117;
|
|
5280
|
+
color: #e6e8f2;
|
|
5281
|
+
border-radius: 8px;
|
|
5282
|
+
padding: 10px 12px;
|
|
5283
|
+
overflow-x: auto;
|
|
5284
|
+
font-size: 12px;
|
|
5285
|
+
line-height: 1.5;
|
|
5286
|
+
white-space: pre;
|
|
5287
|
+
}
|
|
5288
|
+
|
|
5289
|
+
.announcement-code pre code::after {
|
|
5290
|
+
content: "";
|
|
5291
|
+
display: inline-block;
|
|
5292
|
+
width: 80px;
|
|
5293
|
+
}
|
|
5294
|
+
|
|
5295
|
+
.announcement-code__copy-shield {
|
|
5296
|
+
position: absolute;
|
|
5297
|
+
top: 4px;
|
|
5298
|
+
right: 4px;
|
|
5299
|
+
padding: 4px 4px 4px 24px;
|
|
5300
|
+
border-top-right-radius: 8px;
|
|
5301
|
+
background: linear-gradient(
|
|
5302
|
+
to right,
|
|
5303
|
+
rgba(15, 17, 23, 0) 0%,
|
|
5304
|
+
rgba(15, 17, 23, 0.95) 40%,
|
|
5305
|
+
#0f1117 100%
|
|
5306
|
+
);
|
|
5307
|
+
pointer-events: none;
|
|
5308
|
+
}
|
|
5309
|
+
|
|
5310
|
+
.announcement-code pre code {
|
|
5311
|
+
background: transparent;
|
|
5312
|
+
border: none;
|
|
5313
|
+
padding: 0;
|
|
5314
|
+
color: inherit;
|
|
5315
|
+
font-size: inherit;
|
|
5316
|
+
}
|
|
5317
|
+
|
|
5318
|
+
.announcement-code pre::-webkit-scrollbar {
|
|
5319
|
+
height: 6px;
|
|
5320
|
+
}
|
|
5321
|
+
.announcement-code pre::-webkit-scrollbar-track {
|
|
5322
|
+
background: transparent;
|
|
5323
|
+
}
|
|
5324
|
+
.announcement-code pre::-webkit-scrollbar-thumb {
|
|
5325
|
+
background: rgba(255, 255, 255, 0.2);
|
|
5326
|
+
border-radius: 3px;
|
|
5327
|
+
}
|
|
5328
|
+
|
|
5329
|
+
.announcement-code__copy {
|
|
5330
|
+
position: relative;
|
|
5331
|
+
pointer-events: auto;
|
|
5332
|
+
padding: 3px 8px;
|
|
5333
|
+
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
|
|
5334
|
+
font-size: 11px;
|
|
5335
|
+
font-weight: 600;
|
|
5336
|
+
color: #e6e8f2;
|
|
5337
|
+
background: #1f222d;
|
|
5338
|
+
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
5339
|
+
border-radius: 5px;
|
|
5340
|
+
cursor: pointer;
|
|
5341
|
+
transition:
|
|
5342
|
+
background 0.12s ease,
|
|
5343
|
+
color 0.12s ease;
|
|
5344
|
+
}
|
|
5345
|
+
.announcement-code__copy:hover {
|
|
5346
|
+
background: #2a2e3c;
|
|
5347
|
+
}
|
|
5348
|
+
.announcement-code__copy[data-copied="true"] {
|
|
5349
|
+
background: #eee6fe;
|
|
5350
|
+
color: #6430ab;
|
|
5351
|
+
border-color: transparent;
|
|
5352
|
+
}
|
|
5353
|
+
|
|
5354
|
+
.announcement-body {
|
|
5355
|
+
position: relative;
|
|
5356
|
+
overflow: hidden;
|
|
5357
|
+
transition: max-height 0.25s ease;
|
|
5358
|
+
}
|
|
5359
|
+
.announcement-body--collapsed {
|
|
5360
|
+
max-height: 72px;
|
|
5361
|
+
}
|
|
5362
|
+
.announcement-body--expanded {
|
|
5363
|
+
max-height: 2000px;
|
|
5364
|
+
}
|
|
5365
|
+
.announcement-fade {
|
|
5366
|
+
position: absolute;
|
|
5367
|
+
bottom: 0;
|
|
5368
|
+
left: 0;
|
|
5369
|
+
right: 0;
|
|
5370
|
+
height: 48px;
|
|
5371
|
+
background: linear-gradient(to bottom, transparent, #ffffff);
|
|
5372
|
+
pointer-events: none;
|
|
5373
|
+
}
|
|
5374
|
+
.announcement-toggle {
|
|
5375
|
+
display: block;
|
|
5376
|
+
width: 100%;
|
|
5377
|
+
margin-top: 6px;
|
|
5378
|
+
padding: 0;
|
|
5379
|
+
background: none;
|
|
5380
|
+
border: none;
|
|
5381
|
+
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
|
|
5382
|
+
font-size: 12px;
|
|
5383
|
+
font-weight: 500;
|
|
5384
|
+
color: #757cf2;
|
|
5385
|
+
cursor: pointer;
|
|
5386
|
+
text-align: center;
|
|
5387
|
+
}
|
|
5388
|
+
.announcement-toggle:hover {
|
|
5389
|
+
color: #6430ab;
|
|
5390
|
+
}
|
|
5391
|
+
|
|
5392
|
+
/* ── Brand typography ────────────────────────────────────────── */
|
|
5393
|
+
/* Override Tailwind font-mono stack → Spline Sans Mono */
|
|
5394
|
+
.font-mono,
|
|
5395
|
+
pre,
|
|
5396
|
+
code {
|
|
5397
|
+
font-family: "Spline Sans Mono", ui-monospace, "Cascadia Code", monospace;
|
|
5398
|
+
}
|
|
5399
|
+
|
|
5400
|
+
/* ── Floating button ─────────────────────────────────────────── */
|
|
5401
|
+
.console-button {
|
|
5402
|
+
background-color: rgba(1, 5, 7, 0.95) !important;
|
|
5403
|
+
border-color: rgba(190, 194, 255, 0.25) !important;
|
|
5404
|
+
box-shadow:
|
|
5405
|
+
0 0 0 1px rgba(190, 194, 255, 0.15),
|
|
5406
|
+
0 4px 14px rgba(1, 5, 7, 0.28) !important;
|
|
5407
|
+
}
|
|
5408
|
+
.console-button:hover {
|
|
5409
|
+
background-color: rgba(1, 5, 7, 1) !important;
|
|
5410
|
+
border-color: rgba(190, 194, 255, 0.45) !important;
|
|
5411
|
+
}
|
|
5412
|
+
.console-button:focus-visible {
|
|
5413
|
+
outline-color: #bec2ff !important;
|
|
5414
|
+
}
|
|
5415
|
+
|
|
5416
|
+
/* ── Inspector window ────────────────────────────────────────── */
|
|
5417
|
+
.inspector-window {
|
|
5418
|
+
border-color: #dbdbe5 !important;
|
|
5419
|
+
box-shadow:
|
|
5420
|
+
0 8px 32px rgba(1, 5, 7, 0.1),
|
|
5421
|
+
0 2px 8px rgba(1, 5, 7, 0.06) !important;
|
|
5422
|
+
}
|
|
5423
|
+
|
|
5424
|
+
/* ── Header drag area ────────────────────────────────────────── */
|
|
5425
|
+
.drag-handle {
|
|
5426
|
+
border-bottom-color: #dbdbe5 !important;
|
|
5427
|
+
/* Subtle pale lavender gradient — brand "light, spacious" surface */
|
|
5428
|
+
background: linear-gradient(180deg, #f4f4fd 0%, #ffffff 100%) !important;
|
|
5429
|
+
}
|
|
5430
|
+
|
|
5431
|
+
/* Tab strip row: soft off-white, separated from content */
|
|
5432
|
+
.drag-handle > div:last-child {
|
|
5433
|
+
border-top-color: #e2e2ea !important;
|
|
5434
|
+
background-color: #fafafc !important;
|
|
5435
|
+
}
|
|
5436
|
+
|
|
5437
|
+
/* ── Tab buttons ─────────────────────────────────────────────── */
|
|
5438
|
+
/*
|
|
5439
|
+
* Named classes owned by this component — no Tailwind conflict.
|
|
5440
|
+
* Active: brand surface/surfaceContainerActive (lilac tint) +
|
|
5441
|
+
* border/borderActionEnabled underline.
|
|
5442
|
+
* Dark fill is for primary action buttons only, not nav tabs.
|
|
5443
|
+
*/
|
|
5444
|
+
.cpk-tab-active {
|
|
5445
|
+
background-color: rgba(190, 194, 255, 0.18);
|
|
5446
|
+
color: #010507;
|
|
5447
|
+
font-weight: 600;
|
|
5448
|
+
}
|
|
5449
|
+
.cpk-tab-active .cpk-tab-icon {
|
|
5450
|
+
color: #757cf2;
|
|
5451
|
+
}
|
|
5452
|
+
.cpk-tab-inactive {
|
|
5453
|
+
background-color: transparent;
|
|
5454
|
+
color: #2b2b2b;
|
|
5455
|
+
}
|
|
5456
|
+
.cpk-tab-inactive .cpk-tab-icon {
|
|
5457
|
+
color: #838389;
|
|
5458
|
+
}
|
|
5459
|
+
.cpk-tab-inactive:hover {
|
|
5460
|
+
background-color: rgba(190, 194, 255, 0.08);
|
|
5461
|
+
color: #010507;
|
|
5462
|
+
cursor: pointer;
|
|
5463
|
+
}
|
|
5464
|
+
.cpk-tab-active {
|
|
5465
|
+
cursor: pointer;
|
|
5466
|
+
}
|
|
5467
|
+
|
|
5468
|
+
/* ── Header control buttons (dock, close) — first row only ───── */
|
|
5469
|
+
.drag-handle > div:first-child button {
|
|
5470
|
+
color: #838389 !important;
|
|
5471
|
+
}
|
|
5472
|
+
.drag-handle > div:first-child button:hover {
|
|
5473
|
+
background-color: #f0f0f4 !important;
|
|
5474
|
+
color: #57575b !important;
|
|
5475
|
+
}
|
|
5476
|
+
.drag-handle > div:first-child button:focus-visible {
|
|
5477
|
+
outline-color: #bec2ff !important;
|
|
5478
|
+
}
|
|
5479
|
+
|
|
5480
|
+
/* ── Agent/context dropdown ──────────────────────────────────── */
|
|
5481
|
+
[data-context-dropdown-root="true"] > button {
|
|
5482
|
+
border-color: #dbdbe5 !important;
|
|
5483
|
+
color: #010507 !important;
|
|
5484
|
+
}
|
|
5485
|
+
[data-context-dropdown-root="true"] > button:hover {
|
|
5486
|
+
border-color: #bec2ff !important;
|
|
5487
|
+
background-color: #f7f7f9 !important;
|
|
5488
|
+
}
|
|
5489
|
+
[data-context-dropdown-root="true"] > button > span:last-child {
|
|
5490
|
+
color: #838389 !important;
|
|
5491
|
+
}
|
|
5492
|
+
[data-context-dropdown-root="true"] > div {
|
|
5493
|
+
border-color: #dbdbe5 !important;
|
|
5494
|
+
box-shadow: 0 4px 12px rgba(1, 5, 7, 0.08) !important;
|
|
5495
|
+
}
|
|
5496
|
+
[data-context-dropdown-root="true"] > div button:hover,
|
|
5497
|
+
[data-context-dropdown-root="true"] > div button:focus {
|
|
5498
|
+
background-color: #f7f7f9 !important;
|
|
5499
|
+
}
|
|
5500
|
+
|
|
5501
|
+
/* ── Status bar (bottom chrome) ──────────────────────────────── */
|
|
5502
|
+
.inspector-window > div > div:last-child {
|
|
5503
|
+
border-top-color: #dbdbe5 !important;
|
|
5504
|
+
background-color: #f7f7f9 !important;
|
|
5505
|
+
}
|
|
5506
|
+
|
|
5507
|
+
/* ── Resize handle ───────────────────────────────────────────── */
|
|
5508
|
+
.resize-handle {
|
|
5509
|
+
color: #838389 !important;
|
|
5510
|
+
}
|
|
5511
|
+
.resize-handle:hover {
|
|
5512
|
+
color: #57575b !important;
|
|
5513
|
+
}
|
|
5514
|
+
|
|
5515
|
+
/* ── AG-UI Events tab ────────────────────────────────────────── */
|
|
5516
|
+
/* Row hover: replace blue tint with brand lilac */
|
|
5517
|
+
tr:hover td {
|
|
5518
|
+
background-color: rgba(190, 194, 255, 0.08) !important;
|
|
5519
|
+
}
|
|
5520
|
+
/* Reset/dark action button */
|
|
5521
|
+
button[class*="bg-gray-900"] {
|
|
5522
|
+
background-color: #010507 !important;
|
|
5523
|
+
}
|
|
5524
|
+
button[class*="bg-gray-800"] {
|
|
5525
|
+
background-color: #2b2b2b !important;
|
|
5526
|
+
}
|
|
5527
|
+
/* Copy "copied" state: generic green → brand mint */
|
|
5528
|
+
button[class*="bg-green-100"] {
|
|
5529
|
+
background-color: rgba(133, 236, 206, 0.2) !important;
|
|
5530
|
+
color: #189370 !important;
|
|
5531
|
+
}
|
|
5532
|
+
|
|
5533
|
+
/* ── Agents tab ──────────────────────────────────────────────── */
|
|
5534
|
+
/* Agent icon bubble: blue → lilac */
|
|
5535
|
+
span[class*="bg-blue-100"]:not([class*="text-blue-800"]) {
|
|
5536
|
+
background-color: rgba(190, 194, 255, 0.15) !important;
|
|
5537
|
+
}
|
|
5538
|
+
span[class*="text-blue-600"] {
|
|
5539
|
+
color: #757cf2 !important;
|
|
5540
|
+
}
|
|
5541
|
+
/* Running badge: emerald → mint */
|
|
5542
|
+
span[class*="bg-emerald-50"] {
|
|
5543
|
+
background-color: rgba(133, 236, 206, 0.15) !important;
|
|
5544
|
+
}
|
|
5545
|
+
span[class*="text-emerald-700"] {
|
|
5546
|
+
color: #189370 !important;
|
|
5547
|
+
}
|
|
5548
|
+
/* Running status dot */
|
|
5549
|
+
span[class*="bg-emerald-500"] {
|
|
5550
|
+
background-color: #85ecce !important;
|
|
5551
|
+
}
|
|
5552
|
+
/* Idle dot */
|
|
5553
|
+
span[class*="bg-gray-400"] {
|
|
5554
|
+
background-color: #afafb7 !important;
|
|
5555
|
+
}
|
|
5556
|
+
/* User role badge (blue → lilac) */
|
|
5557
|
+
span[class*="bg-blue-100"][class*="text-blue-800"] {
|
|
5558
|
+
background-color: rgba(190, 194, 255, 0.22) !important;
|
|
5559
|
+
border: 1px solid rgba(190, 194, 255, 0.45) !important;
|
|
5560
|
+
color: #57575b !important;
|
|
5561
|
+
}
|
|
5562
|
+
/* Assistant role badge (green → mint) */
|
|
5563
|
+
span[class*="bg-green-100"][class*="text-green-800"] {
|
|
5564
|
+
background-color: rgba(133, 236, 206, 0.18) !important;
|
|
5565
|
+
border: 1px solid rgba(133, 236, 206, 0.4) !important;
|
|
5566
|
+
color: #189370 !important;
|
|
5567
|
+
}
|
|
5568
|
+
/* Tool role badge (amber → orange brand) */
|
|
5569
|
+
span[class*="bg-amber-100"][class*="text-amber-800"] {
|
|
5570
|
+
background-color: rgba(255, 172, 77, 0.15) !important;
|
|
5571
|
+
color: #57575b !important;
|
|
5572
|
+
}
|
|
5573
|
+
|
|
5574
|
+
/* ── Frontend Tools tab ──────────────────────────────────────── */
|
|
5575
|
+
/* Handler badge (blue → lilac) */
|
|
5576
|
+
span[class*="bg-blue-50"][class*="text-blue-700"] {
|
|
5577
|
+
background-color: rgba(190, 194, 255, 0.12) !important;
|
|
5578
|
+
border-color: rgba(190, 194, 255, 0.3) !important;
|
|
5579
|
+
color: #010507 !important;
|
|
5580
|
+
}
|
|
5581
|
+
/* Renderer badge (purple → lilac-adjacent) */
|
|
5582
|
+
span[class*="bg-purple-50"][class*="text-purple-700"] {
|
|
5583
|
+
background-color: rgba(190, 194, 255, 0.12) !important;
|
|
5584
|
+
border-color: rgba(190, 194, 255, 0.3) !important;
|
|
5585
|
+
color: #57575b !important;
|
|
5586
|
+
}
|
|
5587
|
+
/* Required badge (rose → brand red) */
|
|
5588
|
+
span[class*="bg-rose-50"][class*="text-rose-700"] {
|
|
5589
|
+
background-color: rgba(250, 95, 103, 0.1) !important;
|
|
5590
|
+
border-color: rgba(250, 95, 103, 0.25) !important;
|
|
5591
|
+
color: #fa5f67 !important;
|
|
5592
|
+
}
|
|
5593
|
+
/* Code/default value blocks */
|
|
5594
|
+
code[class*="bg-gray-100"],
|
|
5595
|
+
span[class*="bg-gray-100"] {
|
|
5596
|
+
background-color: #f0f0f4 !important;
|
|
5597
|
+
}
|
|
5598
|
+
|
|
5599
|
+
/* ── Connected status bar: match threads header mint (#5BE4BB) ──── */
|
|
5600
|
+
/* Outer strip bg + top border + text when connected badge is present */
|
|
5601
|
+
.inspector-window
|
|
5602
|
+
> div
|
|
5603
|
+
> div:last-child
|
|
5604
|
+
> div:last-child:has(div[class*="bg-emerald-50"]) {
|
|
5605
|
+
background-color: rgba(91, 228, 187, 0.08) !important;
|
|
5606
|
+
border-top-color: rgba(91, 228, 187, 0.3) !important;
|
|
5607
|
+
color: #189370 !important;
|
|
5608
|
+
}
|
|
5609
|
+
/* Inner badge — slightly more opaque on the mint bg */
|
|
5610
|
+
div[class*="bg-emerald-50"][class*="border-emerald-200"] {
|
|
5611
|
+
background-color: rgba(91, 228, 187, 0.12) !important;
|
|
5612
|
+
border-color: rgba(91, 228, 187, 0.4) !important;
|
|
5613
|
+
color: #189370 !important;
|
|
5614
|
+
}
|
|
5615
|
+
/* Icon bubble inside connected badge → mint tint */
|
|
5616
|
+
div[class*="bg-emerald-50"] span[class*="bg-white"] {
|
|
5617
|
+
background-color: rgba(91, 228, 187, 0.3) !important;
|
|
5618
|
+
}
|
|
5619
|
+
|
|
5620
|
+
/* ── Announcement panel ──────────────────────────────────────── */
|
|
5621
|
+
div[class*="border-slate-200"][class*="bg-white"] {
|
|
5622
|
+
border-color: #dbdbe5 !important;
|
|
5623
|
+
}
|
|
5624
|
+
/* Announcement icon bubble: black → brand light lavender + lilac icon */
|
|
5625
|
+
span[class*="bg-slate-900"],
|
|
5626
|
+
div[class*="bg-slate-900"] {
|
|
5627
|
+
background-color: #eee6fe !important;
|
|
5628
|
+
color: #757cf2 !important;
|
|
5629
|
+
}
|
|
5630
|
+
span[class*="text-slate-800"],
|
|
5631
|
+
div[class*="text-slate-800"] {
|
|
5632
|
+
color: #010507 !important;
|
|
5633
|
+
}
|
|
3052
5634
|
`];
|
|
3053
5635
|
function defineWebInspector() {
|
|
3054
5636
|
if (!customElements.get(WEB_INSPECTOR_TAG)) customElements.define(WEB_INSPECTOR_TAG, WebInspectorElement);
|
|
@@ -3059,5 +5641,6 @@ ${this.announcementMarkdown}</pre
|
|
|
3059
5641
|
exports.WEB_INSPECTOR_TAG = WEB_INSPECTOR_TAG;
|
|
3060
5642
|
exports.WebInspectorElement = WebInspectorElement;
|
|
3061
5643
|
exports.defineWebInspector = defineWebInspector;
|
|
5644
|
+
exports.ɵCpkThreadDetails = ɵCpkThreadDetails;
|
|
3062
5645
|
});
|
|
3063
5646
|
//# sourceMappingURL=index.umd.js.map
|