@copilotkit/web-inspector 1.56.4 → 1.56.5-canary.1777664617
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 +2968 -197
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +273 -10
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.mts +273 -10
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +2969 -199
- package/dist/index.mjs.map +1 -1
- package/dist/index.umd.js +3053 -259
- 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 +3 -3
- package/src/__tests__/web-inspector.spec.ts +179 -1
- package/src/index.ts +3681 -277
- 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)}.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 WebInspectorElement 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,8 @@ 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.agentRunThreadId = /* @__PURE__ */ new Map();
|
|
1963
|
+
this.liveMessageVersion = /* @__PURE__ */ new Map();
|
|
203
1964
|
this.agentStates = /* @__PURE__ */ new Map();
|
|
204
1965
|
this.flattenedEvents = [];
|
|
205
1966
|
this.eventCounter = 0;
|
|
@@ -216,6 +1977,17 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
216
1977
|
this.draggedDuringInteraction = false;
|
|
217
1978
|
this.ignoreNextButtonClick = false;
|
|
218
1979
|
this.selectedMenu = "ag-ui-events";
|
|
1980
|
+
this.selectedThreadId = null;
|
|
1981
|
+
this.threadListWidth = 290;
|
|
1982
|
+
this.threadDividerResizing = false;
|
|
1983
|
+
this.threadDividerPointerId = -1;
|
|
1984
|
+
this.threadDividerStartX = 0;
|
|
1985
|
+
this.threadDividerStartWidth = 0;
|
|
1986
|
+
this._threads = [];
|
|
1987
|
+
this._threadStoreSubscriptions = /* @__PURE__ */ new Map();
|
|
1988
|
+
this._threadsByAgent = /* @__PURE__ */ new Map();
|
|
1989
|
+
this._threadsErrorByAgent = /* @__PURE__ */ new Map();
|
|
1990
|
+
this._ownedThreadStores = /* @__PURE__ */ new Map();
|
|
219
1991
|
this.contextMenuOpen = false;
|
|
220
1992
|
this.dockMode = "floating";
|
|
221
1993
|
this.previousBodyMargins = null;
|
|
@@ -228,15 +2000,26 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
228
2000
|
this.toolSignature = "";
|
|
229
2001
|
this.eventFilterText = "";
|
|
230
2002
|
this.eventTypeFilter = "all";
|
|
231
|
-
this.
|
|
2003
|
+
this.evtColWidths = [
|
|
2004
|
+
100,
|
|
2005
|
+
80,
|
|
2006
|
+
150
|
|
2007
|
+
];
|
|
2008
|
+
this._evtColResize = null;
|
|
2009
|
+
this._threadsUnlocked = false;
|
|
2010
|
+
this._threadsUnlocking = false;
|
|
2011
|
+
this._threadsGateError = null;
|
|
2012
|
+
this._threadsGateCodeInvalid = false;
|
|
2013
|
+
this._threadsGateInvalidTimer = null;
|
|
2014
|
+
this._threadsUnlockingTimer = null;
|
|
232
2015
|
this.announcementHtml = null;
|
|
233
2016
|
this.announcementTimestamp = null;
|
|
234
2017
|
this.announcementPreviewText = null;
|
|
235
2018
|
this.hasUnseenAnnouncement = false;
|
|
236
2019
|
this.announcementLoaded = false;
|
|
237
|
-
this.announcementLoadError = null;
|
|
238
2020
|
this.announcementPromise = null;
|
|
239
2021
|
this.showAnnouncementPreview = true;
|
|
2022
|
+
this.announcementExpanded = false;
|
|
240
2023
|
this.contextState = {
|
|
241
2024
|
button: {
|
|
242
2025
|
position: {
|
|
@@ -277,28 +2060,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
277
2060
|
this.resizeStart = null;
|
|
278
2061
|
this.resizeInitialSize = null;
|
|
279
2062
|
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
|
-
];
|
|
2063
|
+
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
2064
|
this.handlePointerDown = (event) => {
|
|
303
2065
|
var _target$setPointerCap;
|
|
304
2066
|
if (this.dockMode !== "floating" && this.isOpen) return;
|
|
@@ -467,6 +2229,26 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
467
2229
|
this.expandedTools = /* @__PURE__ */ new Set();
|
|
468
2230
|
this.expandedContextItems = /* @__PURE__ */ new Set();
|
|
469
2231
|
this.copiedContextItems = /* @__PURE__ */ new Set();
|
|
2232
|
+
this.handleThreadDividerPointerDown = (event) => {
|
|
2233
|
+
this.threadDividerResizing = true;
|
|
2234
|
+
this.threadDividerPointerId = event.pointerId;
|
|
2235
|
+
this.threadDividerStartX = event.clientX;
|
|
2236
|
+
this.threadDividerStartWidth = this.threadListWidth;
|
|
2237
|
+
event.currentTarget.setPointerCapture(event.pointerId);
|
|
2238
|
+
event.preventDefault();
|
|
2239
|
+
};
|
|
2240
|
+
this.handleThreadDividerPointerMove = (event) => {
|
|
2241
|
+
if (!this.threadDividerResizing || this.threadDividerPointerId !== event.pointerId) return;
|
|
2242
|
+
const delta = event.clientX - this.threadDividerStartX;
|
|
2243
|
+
this.threadListWidth = Math.max(180, Math.min(480, this.threadDividerStartWidth + delta));
|
|
2244
|
+
this.requestUpdate();
|
|
2245
|
+
};
|
|
2246
|
+
this.handleThreadDividerPointerUp = (event) => {
|
|
2247
|
+
if (this.threadDividerPointerId !== event.pointerId) return;
|
|
2248
|
+
const target = event.currentTarget;
|
|
2249
|
+
if (target.hasPointerCapture(this.threadDividerPointerId)) target.releasePointerCapture(this.threadDividerPointerId);
|
|
2250
|
+
this.threadDividerResizing = false;
|
|
2251
|
+
};
|
|
470
2252
|
this.handleClearEvents = () => {
|
|
471
2253
|
if (this.selectedContext === "all-agents") {
|
|
472
2254
|
this.agentEvents.clear();
|
|
@@ -504,6 +2286,110 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
504
2286
|
this.requestUpdate("core", oldValue);
|
|
505
2287
|
if (this._core) this.attachToCore(this._core);
|
|
506
2288
|
}
|
|
2289
|
+
get menuItems() {
|
|
2290
|
+
var _this$_core$tools$len, _this$_core;
|
|
2291
|
+
return [
|
|
2292
|
+
{
|
|
2293
|
+
key: "ag-ui-events",
|
|
2294
|
+
label: "AG-UI Events",
|
|
2295
|
+
icon: "Zap"
|
|
2296
|
+
},
|
|
2297
|
+
{
|
|
2298
|
+
key: "agents",
|
|
2299
|
+
label: "Agent",
|
|
2300
|
+
icon: "Bot"
|
|
2301
|
+
},
|
|
2302
|
+
...((_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 ? [{
|
|
2303
|
+
key: "frontend-tools",
|
|
2304
|
+
label: "Frontend Tools",
|
|
2305
|
+
icon: "Hammer"
|
|
2306
|
+
}] : [],
|
|
2307
|
+
{
|
|
2308
|
+
key: "agent-context",
|
|
2309
|
+
label: "Context",
|
|
2310
|
+
icon: "FileText"
|
|
2311
|
+
},
|
|
2312
|
+
{
|
|
2313
|
+
key: "threads",
|
|
2314
|
+
label: "Threads",
|
|
2315
|
+
icon: "MessageSquare"
|
|
2316
|
+
}
|
|
2317
|
+
];
|
|
2318
|
+
}
|
|
2319
|
+
subscribeToThreadStore(agentId, store) {
|
|
2320
|
+
if (this._threadStoreSubscriptions.has(agentId)) return;
|
|
2321
|
+
const threadsSub = store.select(_copilotkit_core.ɵselectThreads).subscribe((threads) => {
|
|
2322
|
+
this._threadsByAgent.set(agentId, threads);
|
|
2323
|
+
this._threads = Array.from(this._threadsByAgent.values()).flat();
|
|
2324
|
+
this.autoSelectLatestThread();
|
|
2325
|
+
this.requestUpdate();
|
|
2326
|
+
});
|
|
2327
|
+
const errorSub = store.select(_copilotkit_core.ɵselectThreadsError).subscribe((error) => {
|
|
2328
|
+
if (error) this._threadsErrorByAgent.set(agentId, error);
|
|
2329
|
+
else this._threadsErrorByAgent.delete(agentId);
|
|
2330
|
+
this.requestUpdate();
|
|
2331
|
+
});
|
|
2332
|
+
this._threadStoreSubscriptions.set(agentId, () => {
|
|
2333
|
+
threadsSub.unsubscribe();
|
|
2334
|
+
errorSub.unsubscribe();
|
|
2335
|
+
});
|
|
2336
|
+
const initialState = store.getState();
|
|
2337
|
+
this._threadsByAgent.set(agentId, (0, _copilotkit_core.ɵselectThreads)(initialState));
|
|
2338
|
+
const initialError = (0, _copilotkit_core.ɵselectThreadsError)(initialState);
|
|
2339
|
+
if (initialError) this._threadsErrorByAgent.set(agentId, initialError);
|
|
2340
|
+
else this._threadsErrorByAgent.delete(agentId);
|
|
2341
|
+
this._threads = Array.from(this._threadsByAgent.values()).flat();
|
|
2342
|
+
this.autoSelectLatestThread();
|
|
2343
|
+
}
|
|
2344
|
+
autoSelectLatestThread() {
|
|
2345
|
+
if (this._threads.length === 0) return;
|
|
2346
|
+
if (!(this.selectedThreadId != null && this._threads.some((t) => t.id === this.selectedThreadId))) this.selectedThreadId = this._threads[0].id;
|
|
2347
|
+
}
|
|
2348
|
+
teardownThreadStoreSubscriptions() {
|
|
2349
|
+
for (const unsub of this._threadStoreSubscriptions.values()) unsub();
|
|
2350
|
+
this._threadStoreSubscriptions.clear();
|
|
2351
|
+
this._threadsByAgent.clear();
|
|
2352
|
+
this._threadsErrorByAgent.clear();
|
|
2353
|
+
this._threads = [];
|
|
2354
|
+
}
|
|
2355
|
+
ensureOwnedThreadStore(agentId) {
|
|
2356
|
+
var _this$core;
|
|
2357
|
+
if (this._ownedThreadStores.has(agentId)) return;
|
|
2358
|
+
if ((_this$core = this.core) === null || _this$core === void 0 ? void 0 : _this$core.getThreadStore(agentId)) return;
|
|
2359
|
+
const core = this.core;
|
|
2360
|
+
if (!(core === null || core === void 0 ? void 0 : core.runtimeUrl)) return;
|
|
2361
|
+
const store = (0, _copilotkit_core.ɵcreateThreadStore)({ fetch: globalThis.fetch });
|
|
2362
|
+
store.start();
|
|
2363
|
+
store.setContext({
|
|
2364
|
+
runtimeUrl: core.runtimeUrl,
|
|
2365
|
+
headers: {},
|
|
2366
|
+
agentId
|
|
2367
|
+
});
|
|
2368
|
+
this._ownedThreadStores.set(agentId, store);
|
|
2369
|
+
this.subscribeToThreadStore(agentId, store);
|
|
2370
|
+
core.registerThreadStore(agentId, store);
|
|
2371
|
+
}
|
|
2372
|
+
refreshOwnedThreadStore(agentId) {
|
|
2373
|
+
const store = this._ownedThreadStores.get(agentId);
|
|
2374
|
+
if (!store) return;
|
|
2375
|
+
store.refresh();
|
|
2376
|
+
}
|
|
2377
|
+
removeOwnedThreadStore(agentId) {
|
|
2378
|
+
var _this$core2;
|
|
2379
|
+
const store = this._ownedThreadStores.get(agentId);
|
|
2380
|
+
if (!store) return;
|
|
2381
|
+
store.stop();
|
|
2382
|
+
(_this$core2 = this.core) === null || _this$core2 === void 0 || _this$core2.unregisterThreadStore(agentId);
|
|
2383
|
+
this._ownedThreadStores.delete(agentId);
|
|
2384
|
+
}
|
|
2385
|
+
teardownOwnedThreadStores() {
|
|
2386
|
+
for (const [agentId, store] of this._ownedThreadStores) {
|
|
2387
|
+
var _this$core3;
|
|
2388
|
+
store.stop();
|
|
2389
|
+
(_this$core3 = this.core) === null || _this$core3 === void 0 || _this$core3.unregisterThreadStore(agentId);
|
|
2390
|
+
}
|
|
2391
|
+
this._ownedThreadStores.clear();
|
|
2392
|
+
}
|
|
507
2393
|
attachToCore(core) {
|
|
508
2394
|
this.runtimeStatus = core.runtimeConnectionStatus;
|
|
509
2395
|
this.coreProperties = core.properties;
|
|
@@ -511,6 +2397,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
511
2397
|
this.coreSubscriber = {
|
|
512
2398
|
onRuntimeConnectionStatusChanged: ({ status }) => {
|
|
513
2399
|
this.runtimeStatus = status;
|
|
2400
|
+
if (status === "connected") for (const agentId of this._ownedThreadStores.keys()) this.refreshOwnedThreadStore(agentId);
|
|
2401
|
+
else {
|
|
2402
|
+
this._threadsByAgent.clear();
|
|
2403
|
+
this._threads = [];
|
|
2404
|
+
}
|
|
514
2405
|
this.requestUpdate();
|
|
515
2406
|
},
|
|
516
2407
|
onPropertiesChanged: ({ properties }) => {
|
|
@@ -527,16 +2418,36 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
527
2418
|
onAgentsChanged: ({ agents }) => {
|
|
528
2419
|
this.processAgentsChanged(agents);
|
|
529
2420
|
},
|
|
530
|
-
onAgentRunStarted: ({ agent }) => {
|
|
531
|
-
if (agent === null || agent === void 0 ? void 0 : agent.agentId) this.subscribeToAgent(agent);
|
|
532
|
-
},
|
|
533
2421
|
onContextChanged: ({ context }) => {
|
|
534
2422
|
this.contextStore = this.normalizeContextStore(context);
|
|
535
2423
|
this.requestUpdate();
|
|
2424
|
+
},
|
|
2425
|
+
onThreadStoreRegistered: ({ agentId, store }) => {
|
|
2426
|
+
this.subscribeToThreadStore(agentId, store);
|
|
2427
|
+
this.requestUpdate();
|
|
2428
|
+
},
|
|
2429
|
+
onThreadStoreUnregistered: ({ agentId }) => {
|
|
2430
|
+
const unsub = this._threadStoreSubscriptions.get(agentId);
|
|
2431
|
+
if (unsub) {
|
|
2432
|
+
unsub();
|
|
2433
|
+
this._threadStoreSubscriptions.delete(agentId);
|
|
2434
|
+
}
|
|
2435
|
+
this._threadsByAgent.delete(agentId);
|
|
2436
|
+
this._threadsErrorByAgent.delete(agentId);
|
|
2437
|
+
this._threads = Array.from(this._threadsByAgent.values()).flat();
|
|
2438
|
+
this.requestUpdate();
|
|
2439
|
+
},
|
|
2440
|
+
onAgentRunStarted: ({ agent }) => {
|
|
2441
|
+
this.subscribeToAgent(agent);
|
|
2442
|
+
const runThreadId = agent.threadId;
|
|
2443
|
+
if (agent.agentId && runThreadId) this.agentRunThreadId.set(agent.agentId, runThreadId);
|
|
2444
|
+
this.requestUpdate();
|
|
536
2445
|
}
|
|
537
2446
|
};
|
|
538
2447
|
this.coreUnsubscribe = core.subscribe(this.coreSubscriber).unsubscribe;
|
|
539
2448
|
this.processAgentsChanged(core.agents);
|
|
2449
|
+
const threadStores = typeof core.getThreadStores === "function" ? core.getThreadStores() : {};
|
|
2450
|
+
for (const [agentId, store] of Object.entries(threadStores)) this.subscribeToThreadStore(agentId, store);
|
|
540
2451
|
if (core.context) this.contextStore = this.normalizeContextStore(core.context);
|
|
541
2452
|
}
|
|
542
2453
|
detachFromCore() {
|
|
@@ -551,6 +2462,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
551
2462
|
this.cachedTools = [];
|
|
552
2463
|
this.toolSignature = "";
|
|
553
2464
|
this.teardownAgentSubscriptions();
|
|
2465
|
+
this.teardownThreadStoreSubscriptions();
|
|
2466
|
+
this.teardownOwnedThreadStores();
|
|
554
2467
|
}
|
|
555
2468
|
teardownAgentSubscriptions() {
|
|
556
2469
|
for (const unsubscribe of this.agentSubscriptions.values()) unsubscribe();
|
|
@@ -567,6 +2480,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
567
2480
|
if (!(agent === null || agent === void 0 ? void 0 : agent.agentId)) continue;
|
|
568
2481
|
seenAgentIds.add(agent.agentId);
|
|
569
2482
|
this.subscribeToAgent(agent);
|
|
2483
|
+
this.ensureOwnedThreadStore(agent.agentId);
|
|
570
2484
|
}
|
|
571
2485
|
for (const agentId of Array.from(this.agentSubscriptions.keys())) if (!seenAgentIds.has(agentId)) {
|
|
572
2486
|
this.unsubscribeFromAgent(agentId);
|
|
@@ -626,6 +2540,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
626
2540
|
event,
|
|
627
2541
|
result
|
|
628
2542
|
});
|
|
2543
|
+
this.refreshOwnedThreadStore(agentId);
|
|
629
2544
|
},
|
|
630
2545
|
onRunErrorEvent: ({ event }) => {
|
|
631
2546
|
this.recordAgentEvent(agentId, "RUN_ERROR", event);
|
|
@@ -713,6 +2628,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
713
2628
|
},
|
|
714
2629
|
onReasoningEncryptedValueEvent: ({ event }) => {
|
|
715
2630
|
this.recordAgentEvent(agentId, "REASONING_ENCRYPTED_VALUE", event);
|
|
2631
|
+
},
|
|
2632
|
+
onActivitySnapshotEvent: ({ event }) => {
|
|
2633
|
+
this.recordAgentEvent(agentId, "ACTIVITY_SNAPSHOT", event);
|
|
2634
|
+
this.syncAgentMessages(agent);
|
|
2635
|
+
},
|
|
2636
|
+
onActivityDeltaEvent: ({ event }) => {
|
|
2637
|
+
this.recordAgentEvent(agentId, "ACTIVITY_DELTA", event);
|
|
2638
|
+
this.syncAgentMessages(agent);
|
|
716
2639
|
}
|
|
717
2640
|
});
|
|
718
2641
|
this.agentSubscriptions.set(agentId, unsubscribe);
|
|
@@ -727,6 +2650,18 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
727
2650
|
this.agentSubscriptions.delete(agentId);
|
|
728
2651
|
}
|
|
729
2652
|
}
|
|
2653
|
+
mapMessagesToConversation(messages) {
|
|
2654
|
+
if (!messages) return null;
|
|
2655
|
+
return messages.filter((m) => m.role === "user" || m.role === "assistant" || m.role === "activity").map((m, i) => {
|
|
2656
|
+
var _m$id, _m$activityType;
|
|
2657
|
+
return {
|
|
2658
|
+
id: (_m$id = m.id) !== null && _m$id !== void 0 ? _m$id : `msg-${i}`,
|
|
2659
|
+
type: m.role === "user" ? "user" : m.role === "activity" ? "generative-ui" : "assistant",
|
|
2660
|
+
content: m.role === "activity" ? (_m$activityType = m.activityType) !== null && _m$activityType !== void 0 ? _m$activityType : "unknown" : m.contentText,
|
|
2661
|
+
createdAt: ""
|
|
2662
|
+
};
|
|
2663
|
+
});
|
|
2664
|
+
}
|
|
730
2665
|
recordAgentEvent(agentId, type, payload) {
|
|
731
2666
|
var _this$agentEvents$get;
|
|
732
2667
|
const eventId = `${agentId}:${++this.eventCounter}`;
|
|
@@ -750,6 +2685,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
750
2685
|
const messages = this.normalizeAgentMessages(agent.messages);
|
|
751
2686
|
if (messages) this.agentMessages.set(agent.agentId, messages);
|
|
752
2687
|
else this.agentMessages.delete(agent.agentId);
|
|
2688
|
+
const runThreadId = this.agentRunThreadId.get(agent.agentId);
|
|
2689
|
+
if (runThreadId) {
|
|
2690
|
+
var _this$liveMessageVers;
|
|
2691
|
+
this.liveMessageVersion.set(runThreadId, ((_this$liveMessageVers = this.liveMessageVersion.get(runThreadId)) !== null && _this$liveMessageVers !== void 0 ? _this$liveMessageVers : 0) + 1);
|
|
2692
|
+
}
|
|
753
2693
|
this.requestUpdate();
|
|
754
2694
|
} catch (error) {
|
|
755
2695
|
console.error(`[CopilotKit Inspector] Failed to sync messages for agent "${agent.agentId}":`, error);
|
|
@@ -780,18 +2720,23 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
780
2720
|
})) this.contextOptions = nextOptions;
|
|
781
2721
|
const pendingContext = this.pendingSelectedContext;
|
|
782
2722
|
if (pendingContext) {
|
|
783
|
-
if (pendingContext === "all-agents" || agentIds.has(pendingContext)) {
|
|
2723
|
+
if ((pendingContext === "all-agents" || agentIds.has(pendingContext)) && (pendingContext === "all-agents" || agentIds.size === 1)) {
|
|
784
2724
|
if (this.selectedContext !== pendingContext) {
|
|
785
2725
|
this.selectedContext = pendingContext;
|
|
786
2726
|
this.expandedRows.clear();
|
|
787
2727
|
}
|
|
788
2728
|
this.pendingSelectedContext = null;
|
|
789
|
-
} else if (agentIds.size > 0)
|
|
2729
|
+
} else if (agentIds.size > 0) {
|
|
2730
|
+
if (this.selectedContext !== "all-agents") {
|
|
2731
|
+
this.selectedContext = "all-agents";
|
|
2732
|
+
this.expandedRows.clear();
|
|
2733
|
+
}
|
|
2734
|
+
this.pendingSelectedContext = null;
|
|
2735
|
+
}
|
|
790
2736
|
}
|
|
791
2737
|
if (!nextOptions.some((option) => option.key === this.selectedContext) && this.pendingSelectedContext === null) {
|
|
792
2738
|
let nextSelected = "all-agents";
|
|
793
|
-
if (agentIds.
|
|
794
|
-
else if (agentIds.size > 0) nextSelected = Array.from(agentIds).sort((a, b) => a.localeCompare(b))[0];
|
|
2739
|
+
if (agentIds.size === 1) nextSelected = Array.from(agentIds)[0];
|
|
795
2740
|
if (this.selectedContext !== nextSelected) {
|
|
796
2741
|
this.selectedContext = nextSelected;
|
|
797
2742
|
this.expandedRows.clear();
|
|
@@ -859,8 +2804,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
859
2804
|
return lit.html`
|
|
860
2805
|
<div class="mt-2 space-y-2">
|
|
861
2806
|
${toolCalls.map((call, index) => {
|
|
862
|
-
var
|
|
863
|
-
const functionName = (
|
|
2807
|
+
var _ref3, _call$function$name, _call$function, _call$function2;
|
|
2808
|
+
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
2809
|
const callId = typeof (call === null || call === void 0 ? void 0 : call.id) === "string" ? call.id : `tool-call-${index + 1}`;
|
|
865
2810
|
const argsString = this.formatToolCallArguments((_call$function2 = call.function) === null || _call$function2 === void 0 ? void 0 : _call$function2.arguments);
|
|
866
2811
|
return lit.html`
|
|
@@ -970,6 +2915,7 @@ ${argsString}</pre
|
|
|
970
2915
|
connectedCallback() {
|
|
971
2916
|
super.connectedCallback();
|
|
972
2917
|
if (typeof window !== "undefined") {
|
|
2918
|
+
this.ensureBrandFonts();
|
|
973
2919
|
window.addEventListener("resize", this.handleResize);
|
|
974
2920
|
window.addEventListener("pointerdown", this.handleGlobalPointerDown);
|
|
975
2921
|
this.hydrateStateFromStorageEarly();
|
|
@@ -977,6 +2923,15 @@ ${argsString}</pre
|
|
|
977
2923
|
this.ensureAnnouncementLoading();
|
|
978
2924
|
}
|
|
979
2925
|
}
|
|
2926
|
+
ensureBrandFonts() {
|
|
2927
|
+
const FONT_LINK_ID = "cpk-inspector-brand-fonts";
|
|
2928
|
+
if (document.getElementById(FONT_LINK_ID)) return;
|
|
2929
|
+
const link = document.createElement("link");
|
|
2930
|
+
link.id = FONT_LINK_ID;
|
|
2931
|
+
link.rel = "stylesheet";
|
|
2932
|
+
link.href = "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600&family=Spline+Sans+Mono:wght@600&display=swap";
|
|
2933
|
+
document.head.appendChild(link);
|
|
2934
|
+
}
|
|
980
2935
|
disconnectedCallback() {
|
|
981
2936
|
super.disconnectedCallback();
|
|
982
2937
|
if (typeof window !== "undefined") {
|
|
@@ -1054,7 +3009,7 @@ ${argsString}</pre
|
|
|
1054
3009
|
"focus-visible:outline",
|
|
1055
3010
|
"focus-visible:outline-2",
|
|
1056
3011
|
"focus-visible:outline-offset-2",
|
|
1057
|
-
"focus-visible:outline-
|
|
3012
|
+
"focus-visible:outline-[#BEC2FF]",
|
|
1058
3013
|
"touch-none",
|
|
1059
3014
|
"select-none",
|
|
1060
3015
|
this.isDragging ? "cursor-grabbing" : "cursor-grab"
|
|
@@ -1154,6 +3109,7 @@ ${argsString}</pre
|
|
|
1154
3109
|
</div>
|
|
1155
3110
|
</div>
|
|
1156
3111
|
</div>
|
|
3112
|
+
${this.renderAnnouncementBanner()}
|
|
1157
3113
|
<div
|
|
1158
3114
|
class="flex flex-wrap items-center gap-2 border-t border-gray-100 px-3 py-2 text-xs"
|
|
1159
3115
|
>
|
|
@@ -1162,14 +3118,12 @@ ${argsString}</pre
|
|
|
1162
3118
|
return lit.html`
|
|
1163
3119
|
<button
|
|
1164
3120
|
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 ? "
|
|
3121
|
+
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
3122
|
aria-pressed=${isSelected}
|
|
1167
3123
|
@click=${() => this.handleMenuSelect(key)}
|
|
1168
3124
|
>
|
|
1169
|
-
<span
|
|
1170
|
-
|
|
1171
|
-
>
|
|
1172
|
-
${this.renderIcon(icon)}
|
|
3125
|
+
<span class="cpk-tab-icon">
|
|
3126
|
+
${key in this.customTabIcons ? (0, lit_directives_unsafe_html_js.unsafeHTML)(this.customTabIcons[key]) : this.renderIcon(icon)}
|
|
1173
3127
|
</span>
|
|
1174
3128
|
<span>${label}</span>
|
|
1175
3129
|
</button>
|
|
@@ -1178,8 +3132,7 @@ ${argsString}</pre
|
|
|
1178
3132
|
</div>
|
|
1179
3133
|
</div>
|
|
1180
3134
|
<div class="flex flex-1 flex-col overflow-hidden">
|
|
1181
|
-
<div class="flex-1 overflow-auto">
|
|
1182
|
-
${this.renderAnnouncementPanel()}
|
|
3135
|
+
<div id="cpk-main-scroll" class="flex-1 overflow-auto">
|
|
1183
3136
|
${this.renderCoreWarningBanner()} ${this.renderMainContent()}
|
|
1184
3137
|
<slot></slot>
|
|
1185
3138
|
</div>
|
|
@@ -1227,6 +3180,7 @@ ${argsString}</pre
|
|
|
1227
3180
|
}
|
|
1228
3181
|
hydrateStateFromStorageEarly() {
|
|
1229
3182
|
if (typeof document === "undefined" || typeof window === "undefined") return;
|
|
3183
|
+
if (document.cookie.includes("cpk_threads_access=1")) this._threadsUnlocked = true;
|
|
1230
3184
|
const persisted = loadInspectorState(INSPECTOR_STORAGE_KEY);
|
|
1231
3185
|
if (!persisted) return;
|
|
1232
3186
|
if (typeof persisted.isOpen === "boolean") this.isOpen = persisted.isOpen;
|
|
@@ -1625,7 +3579,8 @@ ${argsString}</pre
|
|
|
1625
3579
|
role,
|
|
1626
3580
|
contentText,
|
|
1627
3581
|
contentRaw: raw.content !== void 0 ? this.sanitizeForLogging(raw.content) : void 0,
|
|
1628
|
-
toolCalls
|
|
3582
|
+
toolCalls,
|
|
3583
|
+
activityType: typeof raw.activityType === "string" ? raw.activityType : void 0
|
|
1629
3584
|
};
|
|
1630
3585
|
}
|
|
1631
3586
|
normalizeAgentMessages(messages) {
|
|
@@ -1644,88 +3599,518 @@ ${argsString}</pre
|
|
|
1644
3599
|
} else normalized[key] = { value: entry };
|
|
1645
3600
|
return normalized;
|
|
1646
3601
|
}
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
return
|
|
3602
|
+
renderCoreWarningBanner() {
|
|
3603
|
+
if (this._core) return lit.nothing;
|
|
3604
|
+
return lit.html`
|
|
3605
|
+
<div
|
|
3606
|
+
class="mx-4 my-3 flex items-start gap-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800"
|
|
3607
|
+
>
|
|
3608
|
+
<span class="mt-0.5 shrink-0 text-amber-600"
|
|
3609
|
+
>${this.renderIcon("AlertTriangle")}</span
|
|
3610
|
+
>
|
|
3611
|
+
<div class="space-y-1">
|
|
3612
|
+
<div class="font-semibold text-amber-900">
|
|
3613
|
+
CopilotKit core not attached
|
|
3614
|
+
</div>
|
|
3615
|
+
<p class="text-[11px] leading-snug text-amber-800">
|
|
3616
|
+
Pass a live <code>CopilotKitCore</code> instance to
|
|
3617
|
+
<code><cpk-web-inspector></code> or expose it on
|
|
3618
|
+
<code>window.__COPILOTKIT_CORE__</code> for auto-attach.
|
|
3619
|
+
</p>
|
|
3620
|
+
</div>
|
|
3621
|
+
</div>
|
|
3622
|
+
`;
|
|
3623
|
+
}
|
|
3624
|
+
getCoreStatusSummary() {
|
|
3625
|
+
var _this$runtimeStatus, _this$lastCoreError;
|
|
3626
|
+
if (!this._core) return {
|
|
3627
|
+
label: "Core not attached",
|
|
3628
|
+
tone: "border border-amber-200 bg-amber-50 text-amber-800",
|
|
3629
|
+
description: "Pass a CopilotKitCore instance to <cpk-web-inspector> or enable auto-attach."
|
|
3630
|
+
};
|
|
3631
|
+
const status = (_this$runtimeStatus = this.runtimeStatus) !== null && _this$runtimeStatus !== void 0 ? _this$runtimeStatus : _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Disconnected;
|
|
3632
|
+
const lastErrorMessage = (_this$lastCoreError = this.lastCoreError) === null || _this$lastCoreError === void 0 ? void 0 : _this$lastCoreError.message;
|
|
3633
|
+
if (status === _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Error) return {
|
|
3634
|
+
label: "Runtime error",
|
|
3635
|
+
tone: "border border-rose-200 bg-rose-50 text-rose-700",
|
|
3636
|
+
description: lastErrorMessage !== null && lastErrorMessage !== void 0 ? lastErrorMessage : "CopilotKit runtime reported an error."
|
|
3637
|
+
};
|
|
3638
|
+
if (status === _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Connecting) return {
|
|
3639
|
+
label: "Connecting",
|
|
3640
|
+
tone: "border border-amber-200 bg-amber-50 text-amber-800",
|
|
3641
|
+
description: "Waiting for CopilotKit runtime to finish connecting."
|
|
3642
|
+
};
|
|
3643
|
+
if (status === _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Connected) return {
|
|
3644
|
+
label: "Connected",
|
|
3645
|
+
tone: "border border-emerald-200 bg-emerald-50 text-emerald-700",
|
|
3646
|
+
description: "Live runtime connection established."
|
|
3647
|
+
};
|
|
3648
|
+
return {
|
|
3649
|
+
label: "Disconnected",
|
|
3650
|
+
tone: "border border-gray-200 bg-gray-50 text-gray-700",
|
|
3651
|
+
description: lastErrorMessage !== null && lastErrorMessage !== void 0 ? lastErrorMessage : "Waiting for CopilotKit runtime to connect."
|
|
3652
|
+
};
|
|
3653
|
+
}
|
|
3654
|
+
renderMainContent() {
|
|
3655
|
+
if (this.selectedMenu === "ag-ui-events") return this.renderEventsTable();
|
|
3656
|
+
if (this.selectedMenu === "agents") return this.renderAgentsView();
|
|
3657
|
+
if (this.selectedMenu === "frontend-tools") return this.renderToolsView();
|
|
3658
|
+
if (this.selectedMenu === "agent-context") return this.renderContextView();
|
|
3659
|
+
if (this.selectedMenu === "threads") return this.renderThreadsView();
|
|
3660
|
+
return lit.nothing;
|
|
3661
|
+
}
|
|
3662
|
+
renderThreadsGate() {
|
|
3663
|
+
return lit.html`
|
|
3664
|
+
<div style="
|
|
3665
|
+
position:relative;
|
|
3666
|
+
display:flex;
|
|
3667
|
+
flex-direction:column;
|
|
3668
|
+
align-items:center;
|
|
3669
|
+
justify-content:center;
|
|
3670
|
+
padding:40px 24px;
|
|
3671
|
+
min-height:100%;
|
|
3672
|
+
text-align:center;
|
|
3673
|
+
background:linear-gradient(135deg,#f5f4ff 0%,#ede9fe 100%);
|
|
3674
|
+
overflow:hidden;
|
|
3675
|
+
">
|
|
3676
|
+
<!-- Blurred ellipses from Figma/storybook -->
|
|
3677
|
+
<div style="position:absolute;width:570px;height:570px;border-radius:50%;top:-80px;left:-120px;opacity:0.25;background:#757CF2;filter:blur(120px);pointer-events:none;"></div>
|
|
3678
|
+
<div style="position:absolute;width:570px;height:570px;border-radius:50%;bottom:-100px;right:-80px;opacity:0.2;background:#FFAC4D;filter:blur(120px);pointer-events:none;"></div>
|
|
3679
|
+
<div style="position:absolute;width:400px;height:400px;border-radius:50%;bottom:20px;left:-60px;opacity:0.15;background:#FFAC4D;filter:blur(100px);pointer-events:none;"></div>
|
|
3680
|
+
|
|
3681
|
+
${this._threadsUnlocking ? this._renderUnlockingCard() : this._renderEarlyAccessCard()}
|
|
3682
|
+
</div>
|
|
3683
|
+
`;
|
|
3684
|
+
}
|
|
3685
|
+
_renderEarlyAccessCard() {
|
|
3686
|
+
const invalid = this._threadsGateCodeInvalid;
|
|
3687
|
+
return lit.html`
|
|
3688
|
+
<div
|
|
3689
|
+
style="
|
|
3690
|
+
position:relative;
|
|
3691
|
+
z-index:1;
|
|
3692
|
+
background:#ffffff;
|
|
3693
|
+
border:1px solid #E5E5EA;
|
|
3694
|
+
border-radius:20px;
|
|
3695
|
+
box-shadow:0 16px 48px rgba(1,5,7,0.12),0 2px 6px rgba(1,5,7,0.05);
|
|
3696
|
+
padding:28px;
|
|
3697
|
+
width:400px;
|
|
3698
|
+
max-width:100%;
|
|
3699
|
+
display:flex;
|
|
3700
|
+
flex-direction:column;
|
|
3701
|
+
gap:18px;
|
|
3702
|
+
text-align:left;
|
|
3703
|
+
font-family:'Plus Jakarta Sans', system-ui, sans-serif;
|
|
3704
|
+
"
|
|
3705
|
+
>
|
|
3706
|
+
<!-- Kicker pill -->
|
|
3707
|
+
<div>
|
|
3708
|
+
<span
|
|
3709
|
+
style="
|
|
3710
|
+
display:inline-flex;
|
|
3711
|
+
align-items:center;
|
|
3712
|
+
gap:4px;
|
|
3713
|
+
padding:4px 10px;
|
|
3714
|
+
border-radius:999px;
|
|
3715
|
+
background:#F3F3FC;
|
|
3716
|
+
color:#757CF2;
|
|
3717
|
+
font-family:'Spline Sans Mono', ui-monospace, monospace;
|
|
3718
|
+
font-size:10px;
|
|
3719
|
+
font-weight:500;
|
|
3720
|
+
letter-spacing:0.08em;
|
|
3721
|
+
text-transform:uppercase;
|
|
3722
|
+
"
|
|
3723
|
+
>Early Access</span
|
|
3724
|
+
>
|
|
3725
|
+
</div>
|
|
3726
|
+
|
|
3727
|
+
<!-- Title + description -->
|
|
3728
|
+
<div style="display:flex;flex-direction:column;gap:8px;">
|
|
3729
|
+
<h2
|
|
3730
|
+
style="
|
|
3731
|
+
font-family:'Plus Jakarta Sans', system-ui, sans-serif;
|
|
3732
|
+
font-size:24px;
|
|
3733
|
+
font-weight:700;
|
|
3734
|
+
color:#010507;
|
|
3735
|
+
line-height:1.2;
|
|
3736
|
+
letter-spacing:-0.015em;
|
|
3737
|
+
margin:0;
|
|
3738
|
+
"
|
|
3739
|
+
>
|
|
3740
|
+
<span
|
|
3741
|
+
style="
|
|
3742
|
+
background:linear-gradient(90deg, #757CF2 0%, #5AE4BB 100%);
|
|
3743
|
+
-webkit-background-clip:text;
|
|
3744
|
+
background-clip:text;
|
|
3745
|
+
color:transparent;
|
|
3746
|
+
-webkit-text-fill-color:transparent;
|
|
3747
|
+
"
|
|
3748
|
+
>Threads</span
|
|
3749
|
+
>
|
|
3750
|
+
are in private beta
|
|
3751
|
+
</h2>
|
|
3752
|
+
<p
|
|
3753
|
+
style="
|
|
3754
|
+
font-size:14px;
|
|
3755
|
+
font-weight:500;
|
|
3756
|
+
color:#5C5C66;
|
|
3757
|
+
line-height:1.55;
|
|
3758
|
+
margin:0;
|
|
3759
|
+
"
|
|
3760
|
+
>
|
|
3761
|
+
Spin up separate conversations with your agent, one per task, bug,
|
|
3762
|
+
or feature, and jump back into any of them without losing context.
|
|
3763
|
+
</p>
|
|
3764
|
+
</div>
|
|
3765
|
+
|
|
3766
|
+
<!-- Bullets -->
|
|
3767
|
+
<div
|
|
3768
|
+
style="display:flex;flex-direction:column;gap:8px;padding:4px 0;"
|
|
3769
|
+
>
|
|
3770
|
+
${[
|
|
3771
|
+
"One agent, many conversations",
|
|
3772
|
+
"Persistent history across sessions",
|
|
3773
|
+
"Jump between threads in a click"
|
|
3774
|
+
].map((label) => lit.html`
|
|
3775
|
+
<div style="display:flex;align-items:center;gap:10px;">
|
|
3776
|
+
<svg
|
|
3777
|
+
width="14"
|
|
3778
|
+
height="14"
|
|
3779
|
+
viewBox="0 0 24 24"
|
|
3780
|
+
fill="none"
|
|
3781
|
+
stroke="#010507"
|
|
3782
|
+
stroke-width="2.5"
|
|
3783
|
+
stroke-linecap="round"
|
|
3784
|
+
stroke-linejoin="round"
|
|
3785
|
+
style="flex-shrink:0;"
|
|
3786
|
+
>
|
|
3787
|
+
<polyline points="20 6 9 17 4 12"></polyline>
|
|
3788
|
+
</svg>
|
|
3789
|
+
<span style="font-size:13px;font-weight:500;color:#010507;"
|
|
3790
|
+
>${label}</span
|
|
3791
|
+
>
|
|
3792
|
+
</div>
|
|
3793
|
+
`)}
|
|
3794
|
+
</div>
|
|
3795
|
+
|
|
3796
|
+
<!-- Primary CTA: dark MonoPillButton with adjacent arrow circle -->
|
|
3797
|
+
<div>
|
|
3798
|
+
<a
|
|
3799
|
+
href=${WebInspectorElement.THREADS_REQUEST_URL}
|
|
3800
|
+
target="_blank"
|
|
3801
|
+
rel="noopener noreferrer"
|
|
3802
|
+
style="
|
|
3803
|
+
display:inline-flex;
|
|
3804
|
+
align-items:center;
|
|
3805
|
+
gap:8px;
|
|
3806
|
+
text-decoration:none;
|
|
3807
|
+
cursor:pointer;
|
|
3808
|
+
"
|
|
3809
|
+
>
|
|
3810
|
+
<span
|
|
3811
|
+
style="
|
|
3812
|
+
display:inline-flex;
|
|
3813
|
+
align-items:center;
|
|
3814
|
+
justify-content:center;
|
|
3815
|
+
background:#010507;
|
|
3816
|
+
color:#ffffff;
|
|
3817
|
+
font-family:'Spline Sans Mono', ui-monospace, monospace;
|
|
3818
|
+
font-size:13px;
|
|
3819
|
+
font-weight:500;
|
|
3820
|
+
letter-spacing:0.06em;
|
|
3821
|
+
text-transform:uppercase;
|
|
3822
|
+
padding:14px 22px;
|
|
3823
|
+
border-radius:999px;
|
|
3824
|
+
box-shadow:0 4px 12px rgba(1,5,7,0.18);
|
|
3825
|
+
"
|
|
3826
|
+
>Request Early Access</span
|
|
3827
|
+
>
|
|
3828
|
+
<span
|
|
3829
|
+
style="
|
|
3830
|
+
display:inline-flex;
|
|
3831
|
+
align-items:center;
|
|
3832
|
+
justify-content:center;
|
|
3833
|
+
width:36px;
|
|
3834
|
+
height:36px;
|
|
3835
|
+
border-radius:999px;
|
|
3836
|
+
background:#010507;
|
|
3837
|
+
color:#ffffff;
|
|
3838
|
+
box-shadow:0 4px 12px rgba(1,5,7,0.18);
|
|
3839
|
+
"
|
|
3840
|
+
>
|
|
3841
|
+
<svg
|
|
3842
|
+
width="14"
|
|
3843
|
+
height="14"
|
|
3844
|
+
viewBox="0 0 24 24"
|
|
3845
|
+
fill="none"
|
|
3846
|
+
stroke="currentColor"
|
|
3847
|
+
stroke-width="2"
|
|
3848
|
+
stroke-linecap="round"
|
|
3849
|
+
stroke-linejoin="round"
|
|
3850
|
+
>
|
|
3851
|
+
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
3852
|
+
<polyline points="12 5 19 12 12 19"></polyline>
|
|
3853
|
+
</svg>
|
|
3854
|
+
</span>
|
|
3855
|
+
</a>
|
|
3856
|
+
</div>
|
|
3857
|
+
|
|
3858
|
+
<!-- Divider + invite-code section -->
|
|
3859
|
+
<div
|
|
3860
|
+
style="
|
|
3861
|
+
display:flex;
|
|
3862
|
+
flex-direction:column;
|
|
3863
|
+
gap:8px;
|
|
3864
|
+
padding-top:14px;
|
|
3865
|
+
border-top:1px dashed #E5E5EA;
|
|
3866
|
+
"
|
|
3867
|
+
>
|
|
3868
|
+
<span style="font-size:12px;font-weight:500;color:#8A8A94;"
|
|
3869
|
+
>Have an invite code?</span
|
|
3870
|
+
>
|
|
3871
|
+
<div style="display:flex;gap:8px;">
|
|
3872
|
+
<div
|
|
3873
|
+
style="
|
|
3874
|
+
flex:1;
|
|
3875
|
+
background:#ffffff;
|
|
3876
|
+
border:1px solid ${invalid ? "#FA5F67" : "#E5E5EA"};
|
|
3877
|
+
border-radius:10px;
|
|
3878
|
+
padding:2px 4px 2px 12px;
|
|
3879
|
+
transition:border-color 150ms ease;
|
|
3880
|
+
"
|
|
3881
|
+
>
|
|
3882
|
+
<input
|
|
3883
|
+
id="cpk-gate-input"
|
|
3884
|
+
type="text"
|
|
3885
|
+
placeholder="Enter access code"
|
|
3886
|
+
style="
|
|
3887
|
+
width:100%;
|
|
3888
|
+
padding:10px 0;
|
|
3889
|
+
font-family:'Plus Jakarta Sans', system-ui, sans-serif;
|
|
3890
|
+
font-size:13px;
|
|
3891
|
+
font-weight:500;
|
|
3892
|
+
color:#010507;
|
|
3893
|
+
background:transparent;
|
|
3894
|
+
border:none;
|
|
3895
|
+
outline:none;
|
|
3896
|
+
"
|
|
3897
|
+
@keydown=${(e) => {
|
|
3898
|
+
if (e.key === "Enter") this._submitThreadsCode(e.currentTarget.value);
|
|
3899
|
+
}}
|
|
3900
|
+
/>
|
|
3901
|
+
</div>
|
|
3902
|
+
<button
|
|
3903
|
+
style="
|
|
3904
|
+
background:#010507;
|
|
3905
|
+
color:#ffffff;
|
|
3906
|
+
border:none;
|
|
3907
|
+
border-radius:10px;
|
|
3908
|
+
padding:0 16px;
|
|
3909
|
+
font-family:'Spline Sans Mono', ui-monospace, monospace;
|
|
3910
|
+
font-size:11px;
|
|
3911
|
+
font-weight:500;
|
|
3912
|
+
letter-spacing:0.06em;
|
|
3913
|
+
text-transform:uppercase;
|
|
3914
|
+
cursor:pointer;
|
|
3915
|
+
white-space:nowrap;
|
|
3916
|
+
"
|
|
3917
|
+
@click=${() => {
|
|
3918
|
+
var _this$shadowRoot;
|
|
3919
|
+
const input = (_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 ? void 0 : _this$shadowRoot.getElementById("cpk-gate-input");
|
|
3920
|
+
if (input) this._submitThreadsCode(input.value);
|
|
3921
|
+
}}
|
|
3922
|
+
>
|
|
3923
|
+
Unlock
|
|
3924
|
+
</button>
|
|
3925
|
+
</div>
|
|
3926
|
+
${invalid ? lit.html`
|
|
3927
|
+
<div style="font-size: 11px; font-weight: 500; color: #fa5f67">
|
|
3928
|
+
That code isn't valid. Double-check your invite email.
|
|
3929
|
+
</div>
|
|
3930
|
+
` : lit.nothing}
|
|
3931
|
+
</div>
|
|
3932
|
+
</div>
|
|
3933
|
+
`;
|
|
3934
|
+
}
|
|
3935
|
+
_renderUnlockingCard() {
|
|
3936
|
+
return lit.html`
|
|
3937
|
+
<div
|
|
3938
|
+
style="
|
|
3939
|
+
position: relative;
|
|
3940
|
+
z-index: 1;
|
|
3941
|
+
background: #ffffff;
|
|
3942
|
+
border: 1px solid #e5e5ea;
|
|
3943
|
+
border-radius: 20px;
|
|
3944
|
+
box-shadow:
|
|
3945
|
+
0 16px 48px rgba(1, 5, 7, 0.12),
|
|
3946
|
+
0 2px 6px rgba(1, 5, 7, 0.05);
|
|
3947
|
+
padding: 32px;
|
|
3948
|
+
width: 340px;
|
|
3949
|
+
max-width: 100%;
|
|
3950
|
+
display: flex;
|
|
3951
|
+
flex-direction: column;
|
|
3952
|
+
align-items: center;
|
|
3953
|
+
gap: 16px;
|
|
3954
|
+
text-align: center;
|
|
3955
|
+
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
|
|
3956
|
+
"
|
|
3957
|
+
>
|
|
3958
|
+
<div
|
|
3959
|
+
style="
|
|
3960
|
+
width: 56px;
|
|
3961
|
+
height: 56px;
|
|
3962
|
+
border-radius: 999px;
|
|
3963
|
+
background: linear-gradient(135deg, #bec2ff 0%, #85ecce 100%);
|
|
3964
|
+
display: flex;
|
|
3965
|
+
align-items: center;
|
|
3966
|
+
justify-content: center;
|
|
3967
|
+
"
|
|
3968
|
+
>
|
|
3969
|
+
<svg
|
|
3970
|
+
width="24"
|
|
3971
|
+
height="24"
|
|
3972
|
+
viewBox="0 0 24 24"
|
|
3973
|
+
fill="none"
|
|
3974
|
+
stroke="#010507"
|
|
3975
|
+
stroke-width="2.5"
|
|
3976
|
+
stroke-linecap="round"
|
|
3977
|
+
stroke-linejoin="round"
|
|
3978
|
+
>
|
|
3979
|
+
<polyline points="20 6 9 17 4 12"></polyline>
|
|
3980
|
+
</svg>
|
|
3981
|
+
</div>
|
|
3982
|
+
<div style="font-size: 18px; font-weight: 700; color: #010507">
|
|
3983
|
+
Welcome to Threads
|
|
3984
|
+
</div>
|
|
3985
|
+
<div style="font-size: 13px; color: #5c5c66; line-height: 1.5">
|
|
3986
|
+
Loading your conversations…
|
|
3987
|
+
</div>
|
|
3988
|
+
</div>
|
|
3989
|
+
`;
|
|
3990
|
+
}
|
|
3991
|
+
_submitThreadsCode(value) {
|
|
3992
|
+
if (value.trim().toLowerCase() === "earlyaccess") {
|
|
3993
|
+
document.cookie = "cpk_threads_access=1; path=/; max-age=31536000; SameSite=Lax";
|
|
3994
|
+
this._threadsGateError = null;
|
|
3995
|
+
this._threadsGateCodeInvalid = false;
|
|
3996
|
+
this._threadsUnlocking = true;
|
|
3997
|
+
if (this._threadsUnlockingTimer !== null) clearTimeout(this._threadsUnlockingTimer);
|
|
3998
|
+
this._threadsUnlockingTimer = setTimeout(() => {
|
|
3999
|
+
this._threadsUnlocking = false;
|
|
4000
|
+
this._threadsUnlocked = true;
|
|
4001
|
+
this._threadsUnlockingTimer = null;
|
|
4002
|
+
this.requestUpdate();
|
|
4003
|
+
}, 2e3);
|
|
4004
|
+
} else {
|
|
4005
|
+
this._threadsGateCodeInvalid = true;
|
|
4006
|
+
this._threadsGateError = null;
|
|
4007
|
+
if (this._threadsGateInvalidTimer !== null) clearTimeout(this._threadsGateInvalidTimer);
|
|
4008
|
+
this._threadsGateInvalidTimer = setTimeout(() => {
|
|
4009
|
+
this._threadsGateCodeInvalid = false;
|
|
4010
|
+
this._threadsGateInvalidTimer = null;
|
|
4011
|
+
this.requestUpdate();
|
|
4012
|
+
}, 1600);
|
|
4013
|
+
}
|
|
4014
|
+
this.requestUpdate();
|
|
1650
4015
|
}
|
|
1651
|
-
|
|
1652
|
-
|
|
4016
|
+
renderThreadsView() {
|
|
4017
|
+
var _this$_threadsByAgent, _displayThreads$find, _this$_core$runtimeUr, _this$_core2, _this$_core$headers, _this$_core3, _this$liveMessageVers2, _this$agentEvents$get6;
|
|
4018
|
+
if (!this._threadsUnlocked) return this.renderThreadsGate();
|
|
4019
|
+
const displayThreads = this.selectedContext === "all-agents" ? this._threads : (_this$_threadsByAgent = this._threadsByAgent.get(this.selectedContext)) !== null && _this$_threadsByAgent !== void 0 ? _this$_threadsByAgent : [];
|
|
4020
|
+
let threadsErrorMessage = null;
|
|
4021
|
+
if (this.selectedContext === "all-agents") {
|
|
4022
|
+
var _firstError$message;
|
|
4023
|
+
const firstError = this._threadsErrorByAgent.values().next().value;
|
|
4024
|
+
threadsErrorMessage = (_firstError$message = firstError === null || firstError === void 0 ? void 0 : firstError.message) !== null && _firstError$message !== void 0 ? _firstError$message : null;
|
|
4025
|
+
} else {
|
|
4026
|
+
var _this$_threadsErrorBy, _this$_threadsErrorBy2;
|
|
4027
|
+
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;
|
|
4028
|
+
}
|
|
4029
|
+
const selectedThread = this.selectedThreadId != null ? (_displayThreads$find = displayThreads.find((t) => t.id === this.selectedThreadId)) !== null && _displayThreads$find !== void 0 ? _displayThreads$find : null : null;
|
|
1653
4030
|
return lit.html`
|
|
1654
|
-
<div
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
>${this.renderIcon("AlertTriangle")}</span
|
|
4031
|
+
<div style="display:flex;height:100%;overflow:hidden;">
|
|
4032
|
+
<!-- Left sidebar: thread list -->
|
|
4033
|
+
<div
|
|
4034
|
+
style="width:${this.threadListWidth}px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;border-right:1px solid #DBDBE5;"
|
|
1659
4035
|
>
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
|
|
4036
|
+
<cpk-thread-list
|
|
4037
|
+
style="height:100%;"
|
|
4038
|
+
.threads=${displayThreads}
|
|
4039
|
+
.selectedThreadId=${this.selectedThreadId}
|
|
4040
|
+
.errorMessage=${threadsErrorMessage}
|
|
4041
|
+
@threadSelected=${(e) => {
|
|
4042
|
+
this.selectedThreadId = e.detail;
|
|
4043
|
+
this.requestUpdate();
|
|
4044
|
+
}}
|
|
4045
|
+
></cpk-thread-list>
|
|
4046
|
+
</div>
|
|
4047
|
+
|
|
4048
|
+
<!-- Resize divider -->
|
|
4049
|
+
<div
|
|
4050
|
+
style="width:4px;flex-shrink:0;cursor:col-resize;background:transparent;position:relative;z-index:1;"
|
|
4051
|
+
@pointerdown=${this.handleThreadDividerPointerDown}
|
|
4052
|
+
@pointermove=${this.handleThreadDividerPointerMove}
|
|
4053
|
+
@pointerup=${this.handleThreadDividerPointerUp}
|
|
4054
|
+
@pointercancel=${this.handleThreadDividerPointerUp}
|
|
4055
|
+
></div>
|
|
4056
|
+
|
|
4057
|
+
<!-- Center + right: thread details or empty state -->
|
|
4058
|
+
<div style="flex:1;min-width:0;overflow:hidden;display:flex;">
|
|
4059
|
+
${this.selectedThreadId ? lit.html`<cpk-thread-details
|
|
4060
|
+
style="flex:1;min-width:0;"
|
|
4061
|
+
.threadId=${this.selectedThreadId}
|
|
4062
|
+
.thread=${selectedThread}
|
|
4063
|
+
.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 : ""}
|
|
4064
|
+
.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 : {}}
|
|
4065
|
+
.liveMessageVersion=${this.selectedThreadId ? (_this$liveMessageVers2 = this.liveMessageVersion.get(this.selectedThreadId)) !== null && _this$liveMessageVers2 !== void 0 ? _this$liveMessageVers2 : 0 : 0}
|
|
4066
|
+
.agentStateInput=${selectedThread ? this.getLatestStateForAgent(selectedThread.agentId) : null}
|
|
4067
|
+
.agentEventsInput=${selectedThread ? (_this$agentEvents$get6 = this.agentEvents.get(selectedThread.agentId)) !== null && _this$agentEvents$get6 !== void 0 ? _this$agentEvents$get6 : [] : []}
|
|
4068
|
+
></cpk-thread-details>` : lit.html`
|
|
4069
|
+
<div
|
|
4070
|
+
style="
|
|
4071
|
+
flex: 1;
|
|
4072
|
+
display: flex;
|
|
4073
|
+
flex-direction: column;
|
|
4074
|
+
align-items: center;
|
|
4075
|
+
justify-content: center;
|
|
4076
|
+
gap: 8px;
|
|
4077
|
+
color: #838389;
|
|
4078
|
+
"
|
|
4079
|
+
>
|
|
4080
|
+
<svg
|
|
4081
|
+
width="32"
|
|
4082
|
+
height="32"
|
|
4083
|
+
viewBox="0 0 24 24"
|
|
4084
|
+
fill="none"
|
|
4085
|
+
stroke="#c0c0c8"
|
|
4086
|
+
stroke-width="1.5"
|
|
4087
|
+
stroke-linecap="round"
|
|
4088
|
+
stroke-linejoin="round"
|
|
4089
|
+
>
|
|
4090
|
+
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
|
4091
|
+
</svg>
|
|
4092
|
+
<span style="font-size: 13px">${displayThreads.length === 0 ? "No threads yet" : "Select a thread to inspect"}</span>
|
|
4093
|
+
</div>
|
|
4094
|
+
`}
|
|
1669
4095
|
</div>
|
|
1670
4096
|
</div>
|
|
1671
4097
|
`;
|
|
1672
4098
|
}
|
|
1673
|
-
getCoreStatusSummary() {
|
|
1674
|
-
var _this$runtimeStatus, _this$lastCoreError;
|
|
1675
|
-
if (!this._core) return {
|
|
1676
|
-
label: "Core not attached",
|
|
1677
|
-
tone: "border border-amber-200 bg-amber-50 text-amber-800",
|
|
1678
|
-
description: "Pass a CopilotKitCore instance to <cpk-web-inspector> or enable auto-attach."
|
|
1679
|
-
};
|
|
1680
|
-
const status = (_this$runtimeStatus = this.runtimeStatus) !== null && _this$runtimeStatus !== void 0 ? _this$runtimeStatus : _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Disconnected;
|
|
1681
|
-
const lastErrorMessage = (_this$lastCoreError = this.lastCoreError) === null || _this$lastCoreError === void 0 ? void 0 : _this$lastCoreError.message;
|
|
1682
|
-
if (status === _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Error) return {
|
|
1683
|
-
label: "Runtime error",
|
|
1684
|
-
tone: "border border-rose-200 bg-rose-50 text-rose-700",
|
|
1685
|
-
description: lastErrorMessage !== null && lastErrorMessage !== void 0 ? lastErrorMessage : "CopilotKit runtime reported an error."
|
|
1686
|
-
};
|
|
1687
|
-
if (status === _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Connecting) return {
|
|
1688
|
-
label: "Connecting",
|
|
1689
|
-
tone: "border border-amber-200 bg-amber-50 text-amber-800",
|
|
1690
|
-
description: "Waiting for CopilotKit runtime to finish connecting."
|
|
1691
|
-
};
|
|
1692
|
-
if (status === _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Connected) return {
|
|
1693
|
-
label: "Connected",
|
|
1694
|
-
tone: "border border-emerald-200 bg-emerald-50 text-emerald-700",
|
|
1695
|
-
description: "Live runtime connection established."
|
|
1696
|
-
};
|
|
1697
|
-
return {
|
|
1698
|
-
label: "Disconnected",
|
|
1699
|
-
tone: "border border-gray-200 bg-gray-50 text-gray-700",
|
|
1700
|
-
description: lastErrorMessage !== null && lastErrorMessage !== void 0 ? lastErrorMessage : "Waiting for CopilotKit runtime to connect."
|
|
1701
|
-
};
|
|
1702
|
-
}
|
|
1703
|
-
renderMainContent() {
|
|
1704
|
-
if (this.selectedMenu === "ag-ui-events") return this.renderEventsTable();
|
|
1705
|
-
if (this.selectedMenu === "agents") return this.renderAgentsView();
|
|
1706
|
-
if (this.selectedMenu === "frontend-tools") return this.renderToolsView();
|
|
1707
|
-
if (this.selectedMenu === "agent-context") return this.renderContextView();
|
|
1708
|
-
return lit.nothing;
|
|
1709
|
-
}
|
|
1710
4099
|
renderEventsTable() {
|
|
1711
4100
|
const events = this.getEventsForSelectedContext();
|
|
1712
4101
|
const filteredEvents = this.filterEvents(events);
|
|
1713
4102
|
const selectedLabel = this.selectedContext === "all-agents" ? "all agents" : `agent ${this.selectedContext}`;
|
|
1714
4103
|
if (events.length === 0) return lit.html`
|
|
1715
4104
|
<div
|
|
1716
|
-
class="flex h-full items-center justify-center px-4 py-
|
|
4105
|
+
class="flex h-full flex-col items-center justify-center gap-2 px-4 py-10 text-center"
|
|
1717
4106
|
>
|
|
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>
|
|
4107
|
+
<div class="text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8">
|
|
4108
|
+
${this.renderIcon("Zap")}
|
|
1728
4109
|
</div>
|
|
4110
|
+
<span class="text-sm text-gray-600">No events yet</span>
|
|
4111
|
+
<span class="max-w-[240px] text-xs leading-snug text-gray-400"
|
|
4112
|
+
>Events are recorded live. Run the agent to see them here.</span
|
|
4113
|
+
>
|
|
1729
4114
|
</div>
|
|
1730
4115
|
`;
|
|
1731
4116
|
if (filteredEvents.length === 0) return lit.html`
|
|
@@ -1822,23 +4207,32 @@ ${argsString}</pre
|
|
|
1822
4207
|
</div>
|
|
1823
4208
|
<div class="relative h-full w-full overflow-y-auto overflow-x-hidden">
|
|
1824
4209
|
<table class="w-full table-fixed border-collapse text-xs box-border">
|
|
4210
|
+
<colgroup>
|
|
4211
|
+
<col style="width:${this.evtColWidths[0]}px">
|
|
4212
|
+
<col style="width:${this.evtColWidths[1]}px">
|
|
4213
|
+
<col style="width:${this.evtColWidths[2]}px">
|
|
4214
|
+
<col>
|
|
4215
|
+
</colgroup>
|
|
1825
4216
|
<thead class="sticky top-0 z-10">
|
|
1826
4217
|
<tr class="bg-white">
|
|
4218
|
+
${[
|
|
4219
|
+
"Agent",
|
|
4220
|
+
"Time",
|
|
4221
|
+
"Event Type"
|
|
4222
|
+
].map((label, col) => lit.html`
|
|
1827
4223
|
<th
|
|
1828
4224
|
class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900"
|
|
4225
|
+
style="position:relative;overflow:hidden;"
|
|
1829
4226
|
>
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
>
|
|
1840
|
-
Event Type
|
|
1841
|
-
</th>
|
|
4227
|
+
${label}
|
|
4228
|
+
<div
|
|
4229
|
+
style="position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;user-select:none;background:transparent;"
|
|
4230
|
+
@pointerdown=${(e) => this._onEvtColResizeStart(e, col)}
|
|
4231
|
+
@pointermove=${(e) => this._onEvtColResizeMove(e)}
|
|
4232
|
+
@pointerup=${() => this._onEvtColResizeEnd()}
|
|
4233
|
+
@pointercancel=${() => this._onEvtColResizeEnd()}
|
|
4234
|
+
></div>
|
|
4235
|
+
</th>`)}
|
|
1842
4236
|
<th
|
|
1843
4237
|
class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900"
|
|
1844
4238
|
>
|
|
@@ -1929,6 +4323,26 @@ ${prettyEvent}</pre
|
|
|
1929
4323
|
this.eventTypeFilter = "all";
|
|
1930
4324
|
this.requestUpdate();
|
|
1931
4325
|
}
|
|
4326
|
+
_onEvtColResizeStart(e, col) {
|
|
4327
|
+
var _this$evtColWidths$co;
|
|
4328
|
+
e.preventDefault();
|
|
4329
|
+
e.stopPropagation();
|
|
4330
|
+
e.currentTarget.setPointerCapture(e.pointerId);
|
|
4331
|
+
this._evtColResize = {
|
|
4332
|
+
col,
|
|
4333
|
+
startX: e.clientX,
|
|
4334
|
+
startW: (_this$evtColWidths$co = this.evtColWidths[col]) !== null && _this$evtColWidths$co !== void 0 ? _this$evtColWidths$co : 0
|
|
4335
|
+
};
|
|
4336
|
+
}
|
|
4337
|
+
_onEvtColResizeMove(e) {
|
|
4338
|
+
if (!this._evtColResize) return;
|
|
4339
|
+
const { col, startX, startW } = this._evtColResize;
|
|
4340
|
+
this.evtColWidths = this.evtColWidths.map((w, i) => i === col ? Math.max(40, startW + (e.clientX - startX)) : w);
|
|
4341
|
+
this.requestUpdate();
|
|
4342
|
+
}
|
|
4343
|
+
_onEvtColResizeEnd() {
|
|
4344
|
+
this._evtColResize = null;
|
|
4345
|
+
}
|
|
1932
4346
|
exportEvents(events) {
|
|
1933
4347
|
try {
|
|
1934
4348
|
const payload = JSON.stringify(events, null, 2);
|
|
@@ -1973,7 +4387,7 @@ ${prettyEvent}</pre
|
|
|
1973
4387
|
<div class="flex items-start justify-between mb-4">
|
|
1974
4388
|
<div class="flex items-center gap-3">
|
|
1975
4389
|
<div
|
|
1976
|
-
class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600"
|
|
4390
|
+
class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600 cpk-agent-icon"
|
|
1977
4391
|
>
|
|
1978
4392
|
${this.renderIcon("Bot")}
|
|
1979
4393
|
</div>
|
|
@@ -2001,7 +4415,7 @@ ${prettyEvent}</pre
|
|
|
2001
4415
|
<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
|
|
2002
4416
|
<button
|
|
2003
4417
|
type="button"
|
|
2004
|
-
class="rounded-md bg-gray-50 px-3 py-2 text-left transition hover:bg-gray-100 cursor-pointer overflow-hidden"
|
|
4418
|
+
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
4419
|
@click=${() => this.handleMenuSelect("ag-ui-events")}
|
|
2006
4420
|
title="View all events in AG-UI Events"
|
|
2007
4421
|
>
|
|
@@ -2012,7 +4426,9 @@ ${prettyEvent}</pre
|
|
|
2012
4426
|
${stats.totalEvents}
|
|
2013
4427
|
</div>
|
|
2014
4428
|
</button>
|
|
2015
|
-
<div
|
|
4429
|
+
<div
|
|
4430
|
+
class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden cpk-stat-card"
|
|
4431
|
+
>
|
|
2016
4432
|
<div class="truncate whitespace-nowrap text-xs text-gray-600">
|
|
2017
4433
|
Messages
|
|
2018
4434
|
</div>
|
|
@@ -2020,7 +4436,9 @@ ${prettyEvent}</pre
|
|
|
2020
4436
|
${stats.messages}
|
|
2021
4437
|
</div>
|
|
2022
4438
|
</div>
|
|
2023
|
-
<div
|
|
4439
|
+
<div
|
|
4440
|
+
class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden cpk-stat-card"
|
|
4441
|
+
>
|
|
2024
4442
|
<div class="truncate whitespace-nowrap text-xs text-gray-600">
|
|
2025
4443
|
Tool Calls
|
|
2026
4444
|
</div>
|
|
@@ -2028,7 +4446,9 @@ ${prettyEvent}</pre
|
|
|
2028
4446
|
${stats.toolCalls}
|
|
2029
4447
|
</div>
|
|
2030
4448
|
</div>
|
|
2031
|
-
<div
|
|
4449
|
+
<div
|
|
4450
|
+
class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden cpk-stat-card"
|
|
4451
|
+
>
|
|
2032
4452
|
<div class="truncate whitespace-nowrap text-xs text-gray-600">
|
|
2033
4453
|
Errors
|
|
2034
4454
|
</div>
|
|
@@ -2040,9 +4460,9 @@ ${prettyEvent}</pre
|
|
|
2040
4460
|
</div>
|
|
2041
4461
|
|
|
2042
4462
|
<!-- Current State Section -->
|
|
2043
|
-
<div class="
|
|
2044
|
-
<div class="
|
|
2045
|
-
<h4
|
|
4463
|
+
<div class="cpk-section-card">
|
|
4464
|
+
<div class="cpk-section-header">
|
|
4465
|
+
<h4>Current State</h4>
|
|
2046
4466
|
</div>
|
|
2047
4467
|
<div class="overflow-auto p-4">
|
|
2048
4468
|
${this.hasRenderableState(state) ? lit.html`
|
|
@@ -2051,7 +4471,7 @@ ${prettyEvent}</pre
|
|
|
2051
4471
|
><code>${this.formatStateForDisplay(state)}</code></pre>
|
|
2052
4472
|
` : lit.html`
|
|
2053
4473
|
<div
|
|
2054
|
-
class="flex h-
|
|
4474
|
+
class="flex h-12 items-center justify-center text-xs text-gray-500"
|
|
2055
4475
|
>
|
|
2056
4476
|
<div class="flex items-center gap-2 text-gray-500">
|
|
2057
4477
|
<span class="text-lg text-gray-400"
|
|
@@ -2065,32 +4485,20 @@ ${prettyEvent}</pre
|
|
|
2065
4485
|
</div>
|
|
2066
4486
|
|
|
2067
4487
|
<!-- Current Messages Section -->
|
|
2068
|
-
<div class="
|
|
2069
|
-
<div class="
|
|
2070
|
-
<h4
|
|
2071
|
-
Current Messages
|
|
2072
|
-
</h4>
|
|
4488
|
+
<div class="cpk-section-card">
|
|
4489
|
+
<div class="cpk-section-header">
|
|
4490
|
+
<h4>Current Messages</h4>
|
|
2073
4491
|
</div>
|
|
2074
4492
|
<div class="overflow-auto">
|
|
2075
4493
|
${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">
|
|
4494
|
+
<div class="w-full text-xs">
|
|
4495
|
+
<div class="flex bg-gray-50">
|
|
4496
|
+
<div class="w-40 shrink-0 px-4 py-2 font-medium text-gray-700">Role</div>
|
|
4497
|
+
<div class="flex-1 px-4 py-2 font-medium text-gray-700">Content</div>
|
|
4498
|
+
</div>
|
|
4499
|
+
<div class="divide-y divide-gray-200">
|
|
2092
4500
|
${messages.map((msg) => {
|
|
2093
|
-
var _msg$contentText, _msg$
|
|
4501
|
+
var _msg$contentText, _msg$toolCalls2;
|
|
2094
4502
|
const role = msg.role || "unknown";
|
|
2095
4503
|
const roleColors = {
|
|
2096
4504
|
user: "bg-blue-100 text-blue-800",
|
|
@@ -2100,38 +4508,36 @@ ${prettyEvent}</pre
|
|
|
2100
4508
|
unknown: "bg-gray-100 text-gray-600"
|
|
2101
4509
|
};
|
|
2102
4510
|
const rawContent = (_msg$contentText = msg.contentText) !== null && _msg$contentText !== void 0 ? _msg$contentText : "";
|
|
2103
|
-
const toolCalls = (_msg$
|
|
4511
|
+
const toolCalls = (_msg$toolCalls2 = msg.toolCalls) !== null && _msg$toolCalls2 !== void 0 ? _msg$toolCalls2 : [];
|
|
2104
4512
|
const hasContent = rawContent.trim().length > 0;
|
|
2105
4513
|
const contentFallback = toolCalls.length > 0 ? "Invoked tool call" : "—";
|
|
2106
4514
|
return lit.html`
|
|
2107
|
-
<
|
|
2108
|
-
<
|
|
4515
|
+
<div class="flex items-start">
|
|
4516
|
+
<div class="w-40 shrink-0 px-4 py-2">
|
|
2109
4517
|
<span
|
|
2110
4518
|
class="inline-flex rounded px-2 py-0.5 text-[10px] font-medium ${roleColors[role] || roleColors.unknown}"
|
|
2111
4519
|
>
|
|
2112
4520
|
${role}
|
|
2113
4521
|
</span>
|
|
2114
|
-
</
|
|
2115
|
-
<
|
|
4522
|
+
</div>
|
|
4523
|
+
<div class="flex-1 px-4 py-2">
|
|
2116
4524
|
${hasContent ? lit.html`<div
|
|
2117
|
-
class="
|
|
4525
|
+
class="whitespace-pre-line break-words text-gray-700"
|
|
2118
4526
|
>
|
|
2119
4527
|
${rawContent}
|
|
2120
|
-
</div>` : lit.html`<div
|
|
2121
|
-
class="text-xs italic text-gray-400"
|
|
2122
|
-
>
|
|
4528
|
+
</div>` : lit.html`<div class="italic text-gray-400">
|
|
2123
4529
|
${contentFallback}
|
|
2124
4530
|
</div>`}
|
|
2125
4531
|
${role === "assistant" && toolCalls.length > 0 ? this.renderToolCallDetails(toolCalls) : lit.nothing}
|
|
2126
|
-
</
|
|
2127
|
-
</
|
|
4532
|
+
</div>
|
|
4533
|
+
</div>
|
|
2128
4534
|
`;
|
|
2129
4535
|
})}
|
|
2130
|
-
</
|
|
2131
|
-
</
|
|
4536
|
+
</div>
|
|
4537
|
+
</div>
|
|
2132
4538
|
` : lit.html`
|
|
2133
4539
|
<div
|
|
2134
|
-
class="flex h-
|
|
4540
|
+
class="flex h-12 items-center justify-center text-xs text-gray-500"
|
|
2135
4541
|
>
|
|
2136
4542
|
<div class="flex items-center gap-2 text-gray-500">
|
|
2137
4543
|
<span class="text-lg text-gray-400"
|
|
@@ -2193,14 +4599,31 @@ ${prettyEvent}</pre
|
|
|
2193
4599
|
}
|
|
2194
4600
|
handleMenuSelect(key) {
|
|
2195
4601
|
if (!this.menuItems.some((item) => item.key === key)) return;
|
|
4602
|
+
const previousMenu = this.selectedMenu;
|
|
2196
4603
|
this.selectedMenu = key;
|
|
2197
4604
|
if (key === "agents" && this.selectedContext === "all-agents") {
|
|
2198
4605
|
const agentOptions = this.contextOptions.filter((opt) => opt.key !== "all-agents");
|
|
2199
4606
|
if (agentOptions.length > 0) {
|
|
2200
|
-
const
|
|
2201
|
-
|
|
4607
|
+
const mostRecent = agentOptions.reduce((best, opt) => {
|
|
4608
|
+
var _this$getAgentStats$l;
|
|
4609
|
+
const ts = (_this$getAgentStats$l = this.getAgentStats(opt.key).lastActivity) !== null && _this$getAgentStats$l !== void 0 ? _this$getAgentStats$l : -1;
|
|
4610
|
+
return best === null || ts > best.ts ? {
|
|
4611
|
+
key: opt.key,
|
|
4612
|
+
ts
|
|
4613
|
+
} : best;
|
|
4614
|
+
}, null);
|
|
4615
|
+
this.selectedContext = mostRecent ? mostRecent.key : agentOptions[0].key;
|
|
2202
4616
|
}
|
|
2203
4617
|
}
|
|
4618
|
+
if (previousMenu === "agents" && key !== "agents") {
|
|
4619
|
+
if (this.contextOptions.filter((opt) => opt.key !== "all-agents").length > 1) this.selectedContext = "all-agents";
|
|
4620
|
+
}
|
|
4621
|
+
if (key === "threads") this.autoSelectLatestThread();
|
|
4622
|
+
if (key === "ag-ui-events" || key === "agents") requestAnimationFrame(() => {
|
|
4623
|
+
var _this$shadowRoot2;
|
|
4624
|
+
const scroller = (_this$shadowRoot2 = this.shadowRoot) === null || _this$shadowRoot2 === void 0 ? void 0 : _this$shadowRoot2.getElementById("cpk-main-scroll");
|
|
4625
|
+
if (scroller) scroller.scrollTop = 0;
|
|
4626
|
+
});
|
|
2204
4627
|
this.contextMenuOpen = false;
|
|
2205
4628
|
this.persistState();
|
|
2206
4629
|
this.requestUpdate();
|
|
@@ -2498,9 +4921,9 @@ ${prettyEvent}</pre
|
|
|
2498
4921
|
let currentSchema = schema;
|
|
2499
4922
|
let def = currentSchema._def;
|
|
2500
4923
|
while (def.typeName === "ZodOptional" || def.typeName === "ZodNullable" || def.typeName === "ZodDefault") {
|
|
2501
|
-
var
|
|
4924
|
+
var _ref4;
|
|
2502
4925
|
if (def.typeName === "ZodDefault" && def.defaultValue !== void 0) info.defaultValue = typeof def.defaultValue === "function" ? def.defaultValue() : def.defaultValue;
|
|
2503
|
-
currentSchema = (
|
|
4926
|
+
currentSchema = (_ref4 = def.innerType) !== null && _ref4 !== void 0 ? _ref4 : currentSchema;
|
|
2504
4927
|
if (!(currentSchema === null || currentSchema === void 0 ? void 0 : currentSchema._def)) break;
|
|
2505
4928
|
def = currentSchema._def;
|
|
2506
4929
|
}
|
|
@@ -2596,9 +5019,19 @@ ${prettyEvent}</pre
|
|
|
2596
5019
|
<div class="mb-3">
|
|
2597
5020
|
<h5 class="mb-1 text-xs font-semibold text-gray-700">ID</h5>
|
|
2598
5021
|
<code
|
|
2599
|
-
class="
|
|
5022
|
+
class="font-mono text-xs font-medium text-gray-800 flex-1 truncate min-w-0"
|
|
2600
5023
|
>${id}</code
|
|
2601
5024
|
>
|
|
5025
|
+
<button
|
|
5026
|
+
type="button"
|
|
5027
|
+
class="cpk-copy-btn"
|
|
5028
|
+
@click=${(e) => {
|
|
5029
|
+
e.stopPropagation();
|
|
5030
|
+
this.copyContextValue(id, `${id}:id`);
|
|
5031
|
+
}}
|
|
5032
|
+
>
|
|
5033
|
+
${this.copiedContextItems.has(`${id}:id`) ? "✓" : "Copy"}
|
|
5034
|
+
</button>
|
|
2602
5035
|
</div>
|
|
2603
5036
|
${hasValue ? lit.html`
|
|
2604
5037
|
<div class="mb-2 flex items-center justify-between gap-2">
|
|
@@ -2606,8 +5039,8 @@ ${prettyEvent}</pre
|
|
|
2606
5039
|
Value
|
|
2607
5040
|
</h5>
|
|
2608
5041
|
<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
5042
|
type="button"
|
|
5043
|
+
class="cpk-copy-btn"
|
|
2611
5044
|
@click=${(e) => {
|
|
2612
5045
|
e.stopPropagation();
|
|
2613
5046
|
this.copyContextValue(context.value, id);
|
|
@@ -2616,13 +5049,6 @@ ${prettyEvent}</pre
|
|
|
2616
5049
|
${this.copiedContextItems.has(id) ? "Copied" : "Copy JSON"}
|
|
2617
5050
|
</button>
|
|
2618
5051
|
</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
5052
|
` : lit.html`
|
|
2627
5053
|
<div class="flex items-center justify-center py-4 text-xs text-gray-500">
|
|
2628
5054
|
<span>No value available</span>
|
|
@@ -2635,7 +5061,7 @@ ${prettyEvent}</pre
|
|
|
2635
5061
|
}
|
|
2636
5062
|
getContextValuePreview(value) {
|
|
2637
5063
|
if (value === void 0 || value === null) return "—";
|
|
2638
|
-
if (typeof value === "string") return value.length > 50 ? `${value.
|
|
5064
|
+
if (typeof value === "string") return value.length > 50 ? `${value.slice(0, 50)}...` : value;
|
|
2639
5065
|
if (typeof value === "number" || typeof value === "boolean") return String(value);
|
|
2640
5066
|
if (Array.isArray(value)) return `Array(${value.length})`;
|
|
2641
5067
|
if (typeof value === "object") {
|
|
@@ -2686,50 +5112,25 @@ ${prettyEvent}</pre
|
|
|
2686
5112
|
else this.expandedRows.add(eventId);
|
|
2687
5113
|
this.requestUpdate();
|
|
2688
5114
|
}
|
|
2689
|
-
|
|
2690
|
-
if (!this.isOpen) return lit.nothing;
|
|
2691
|
-
this.ensureAnnouncementLoading();
|
|
5115
|
+
renderAnnouncementBanner() {
|
|
2692
5116
|
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)]"
|
|
5117
|
+
if (!this.announcementLoaded && !this.announcementHtml) return lit.html`<div
|
|
5118
|
+
class="flex items-center gap-2 px-4 py-3 text-sm font-semibold text-slate-800"
|
|
2707
5119
|
>
|
|
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>
|
|
5120
|
+
<span
|
|
5121
|
+
class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-slate-900 text-white shadow-sm"
|
|
5122
|
+
>
|
|
5123
|
+
${this.renderIcon("Megaphone")}
|
|
5124
|
+
</span>
|
|
5125
|
+
<span>Loading latest announcement…</span>
|
|
2720
5126
|
</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
|
-
>
|
|
5127
|
+
if (!this.announcementHtml) return lit.nothing;
|
|
5128
|
+
return lit.html`<div class="mx-4 mb-3 rounded-xl border border-slate-200 bg-white px-4 py-3">
|
|
2728
5129
|
<div
|
|
2729
|
-
class="mb-
|
|
5130
|
+
class="mb-2 flex items-center gap-2 text-xs font-semibold text-slate-900"
|
|
2730
5131
|
>
|
|
2731
5132
|
<span
|
|
2732
|
-
class="inline-flex h-
|
|
5133
|
+
class="inline-flex h-5 w-5 items-center justify-center rounded-md bg-slate-900 text-white shadow-sm"
|
|
2733
5134
|
>
|
|
2734
5135
|
${this.renderIcon("Megaphone")}
|
|
2735
5136
|
</span>
|
|
@@ -2740,12 +5141,27 @@ ${this.announcementMarkdown}</pre
|
|
|
2740
5141
|
@click=${this.handleDismissAnnouncement}
|
|
2741
5142
|
aria-label="Dismiss announcement"
|
|
2742
5143
|
>
|
|
2743
|
-
|
|
5144
|
+
${this.renderIcon("X")}
|
|
2744
5145
|
</button>
|
|
2745
5146
|
</div>
|
|
2746
|
-
<div class="announcement-
|
|
2747
|
-
|
|
5147
|
+
<div class="announcement-body ${this.announcementExpanded ? "announcement-body--expanded" : "announcement-body--collapsed"}">
|
|
5148
|
+
<div class="announcement-content">
|
|
5149
|
+
${(0, lit_directives_unsafe_html_js.unsafeHTML)(this.announcementHtml)}
|
|
5150
|
+
</div>
|
|
5151
|
+
${!this.announcementExpanded ? lit.html`
|
|
5152
|
+
<div class="announcement-fade"></div>
|
|
5153
|
+
` : lit.nothing}
|
|
2748
5154
|
</div>
|
|
5155
|
+
<button
|
|
5156
|
+
class="announcement-toggle"
|
|
5157
|
+
type="button"
|
|
5158
|
+
@click=${() => {
|
|
5159
|
+
this.announcementExpanded = !this.announcementExpanded;
|
|
5160
|
+
this.requestUpdate();
|
|
5161
|
+
}}
|
|
5162
|
+
>
|
|
5163
|
+
${this.announcementExpanded ? "Show less ↑" : "Show more ↓"}
|
|
5164
|
+
</button>
|
|
2749
5165
|
</div>`;
|
|
2750
5166
|
}
|
|
2751
5167
|
ensureAnnouncementLoading() {
|
|
@@ -2780,14 +5196,13 @@ ${this.announcementMarkdown}</pre
|
|
|
2780
5196
|
const storedTimestamp = this.loadStoredAnnouncementTimestamp();
|
|
2781
5197
|
this.announcementTimestamp = timestamp;
|
|
2782
5198
|
this.announcementPreviewText = previewText !== null && previewText !== void 0 ? previewText : "";
|
|
2783
|
-
this.announcementMarkdown = markdown;
|
|
2784
5199
|
this.hasUnseenAnnouncement = (!storedTimestamp || storedTimestamp !== timestamp) && !!this.announcementPreviewText;
|
|
2785
5200
|
this.showAnnouncementPreview = this.hasUnseenAnnouncement;
|
|
2786
5201
|
this.announcementHtml = await this.convertMarkdownToHtml(markdown);
|
|
2787
5202
|
this.announcementLoaded = true;
|
|
2788
5203
|
this.requestUpdate();
|
|
2789
5204
|
} catch (error) {
|
|
2790
|
-
|
|
5205
|
+
console.warn("[CopilotKit Inspector] Failed to load announcement", error);
|
|
2791
5206
|
this.announcementLoaded = true;
|
|
2792
5207
|
this.requestUpdate();
|
|
2793
5208
|
}
|
|
@@ -2856,6 +5271,7 @@ ${this.announcementMarkdown}</pre
|
|
|
2856
5271
|
z-index: 2147483646;
|
|
2857
5272
|
display: block;
|
|
2858
5273
|
will-change: transform;
|
|
5274
|
+
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
|
|
2859
5275
|
}
|
|
2860
5276
|
|
|
2861
5277
|
:host([data-transitioning="true"]) {
|
|
@@ -2911,13 +5327,14 @@ ${this.announcementMarkdown}</pre
|
|
|
2911
5327
|
left: 50%;
|
|
2912
5328
|
transform: translateX(-50%) translateY(-4px);
|
|
2913
5329
|
white-space: nowrap;
|
|
2914
|
-
background: rgba(
|
|
5330
|
+
background: rgba(1, 5, 7, 0.95);
|
|
2915
5331
|
color: white;
|
|
2916
5332
|
padding: 4px 8px;
|
|
2917
5333
|
border-radius: 6px;
|
|
2918
5334
|
font-size: 10px;
|
|
5335
|
+
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
|
|
2919
5336
|
line-height: 1.2;
|
|
2920
|
-
box-shadow: 0 4px 10px rgba(
|
|
5337
|
+
box-shadow: 0 4px 10px rgba(1, 5, 7, 0.18);
|
|
2921
5338
|
opacity: 0;
|
|
2922
5339
|
pointer-events: none;
|
|
2923
5340
|
transition:
|
|
@@ -2938,18 +5355,19 @@ ${this.announcementMarkdown}</pre
|
|
|
2938
5355
|
min-width: 300px;
|
|
2939
5356
|
max-width: 300px;
|
|
2940
5357
|
background: white;
|
|
2941
|
-
color: #
|
|
5358
|
+
color: #010507;
|
|
2942
5359
|
font-size: 13px;
|
|
5360
|
+
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
|
|
2943
5361
|
line-height: 1.4;
|
|
2944
5362
|
border-radius: 12px;
|
|
2945
|
-
box-shadow: 0 12px 28px rgba(
|
|
5363
|
+
box-shadow: 0 12px 28px rgba(1, 5, 7, 0.12);
|
|
2946
5364
|
padding: 10px 12px;
|
|
2947
5365
|
display: inline-flex;
|
|
2948
5366
|
align-items: flex-start;
|
|
2949
5367
|
gap: 8px;
|
|
2950
5368
|
z-index: 4500;
|
|
2951
5369
|
animation: fade-slide-in 160ms ease;
|
|
2952
|
-
border: 1px solid rgba(
|
|
5370
|
+
border: 1px solid rgba(219, 219, 229, 0.4);
|
|
2953
5371
|
white-space: normal;
|
|
2954
5372
|
word-break: break-word;
|
|
2955
5373
|
text-align: left;
|
|
@@ -2970,7 +5388,7 @@ ${this.announcementMarkdown}</pre
|
|
|
2970
5388
|
width: 10px;
|
|
2971
5389
|
height: 10px;
|
|
2972
5390
|
background: white;
|
|
2973
|
-
border: 1px solid rgba(
|
|
5391
|
+
border: 1px solid rgba(219, 219, 229, 0.4);
|
|
2974
5392
|
transform: rotate(45deg);
|
|
2975
5393
|
top: 50%;
|
|
2976
5394
|
margin-top: -5px;
|
|
@@ -2979,35 +5397,130 @@ ${this.announcementMarkdown}</pre
|
|
|
2979
5397
|
|
|
2980
5398
|
.announcement-preview[data-side="left"] .announcement-preview__arrow {
|
|
2981
5399
|
right: -5px;
|
|
2982
|
-
box-shadow: 6px -6px 10px rgba(
|
|
5400
|
+
box-shadow: 6px -6px 10px rgba(1, 5, 7, 0.08);
|
|
2983
5401
|
}
|
|
2984
5402
|
|
|
2985
5403
|
.announcement-preview[data-side="right"] .announcement-preview__arrow {
|
|
2986
5404
|
left: -5px;
|
|
2987
|
-
box-shadow: -6px 6px 10px rgba(
|
|
5405
|
+
box-shadow: -6px 6px 10px rgba(1, 5, 7, 0.08);
|
|
2988
5406
|
}
|
|
2989
5407
|
|
|
2990
5408
|
.announcement-dismiss {
|
|
2991
|
-
|
|
2992
|
-
|
|
2993
|
-
|
|
2994
|
-
|
|
2995
|
-
|
|
2996
|
-
|
|
5409
|
+
background: none;
|
|
5410
|
+
border: none;
|
|
5411
|
+
cursor: pointer;
|
|
5412
|
+
color: #838389;
|
|
5413
|
+
width: 28px;
|
|
5414
|
+
height: 28px;
|
|
5415
|
+
display: flex;
|
|
5416
|
+
align-items: center;
|
|
5417
|
+
justify-content: center;
|
|
5418
|
+
border-radius: 6px;
|
|
5419
|
+
padding: 0;
|
|
2997
5420
|
transition:
|
|
2998
5421
|
background 120ms ease,
|
|
2999
5422
|
color 120ms ease;
|
|
3000
5423
|
}
|
|
3001
5424
|
|
|
3002
5425
|
.announcement-dismiss:hover {
|
|
3003
|
-
background: rgba(
|
|
3004
|
-
color: #
|
|
5426
|
+
background: rgba(0, 0, 0, 0.06);
|
|
5427
|
+
color: #010507;
|
|
5428
|
+
}
|
|
5429
|
+
|
|
5430
|
+
/* ── Agent tab section cards ─────────────────────────────────────── */
|
|
5431
|
+
.cpk-section-card {
|
|
5432
|
+
border-radius: 8px;
|
|
5433
|
+
background: #ffffff;
|
|
5434
|
+
overflow: hidden;
|
|
5435
|
+
}
|
|
5436
|
+
|
|
5437
|
+
/* ── Agent icon bubble ───────────────────────────────────────────── */
|
|
5438
|
+
.cpk-agent-icon {
|
|
5439
|
+
background-color: #f0f0f4 !important;
|
|
5440
|
+
color: #57575b !important;
|
|
5441
|
+
}
|
|
5442
|
+
|
|
5443
|
+
/* ── Agent stat cards ────────────────────────────────────────────── */
|
|
5444
|
+
.cpk-stat-card {
|
|
5445
|
+
background-color: #ffffff !important;
|
|
5446
|
+
border: 1px solid #dbdbe5 !important;
|
|
5447
|
+
}
|
|
5448
|
+
button.cpk-stat-card:hover {
|
|
5449
|
+
background-color: #f7f7f9 !important;
|
|
5450
|
+
}
|
|
5451
|
+
|
|
5452
|
+
/* ── Circle chevron (Frontend Tools + Context) ──────────────────── */
|
|
5453
|
+
.cpk-chevron-circle {
|
|
5454
|
+
display: inline-flex;
|
|
5455
|
+
align-items: center;
|
|
5456
|
+
justify-content: center;
|
|
5457
|
+
width: 24px;
|
|
5458
|
+
height: 24px;
|
|
5459
|
+
border-radius: 50%;
|
|
5460
|
+
background-color: #f0f0f4;
|
|
5461
|
+
color: #838389;
|
|
5462
|
+
flex-shrink: 0;
|
|
5463
|
+
transition: transform 0.2s;
|
|
5464
|
+
}
|
|
5465
|
+
.cpk-chevron-circle svg {
|
|
5466
|
+
width: 14px !important;
|
|
5467
|
+
height: 14px !important;
|
|
5468
|
+
}
|
|
5469
|
+
.cpk-chevron-circle--open {
|
|
5470
|
+
transform: rotate(180deg);
|
|
5471
|
+
}
|
|
5472
|
+
|
|
5473
|
+
/* ── Inline copy button ─────────────────────────────────────────── */
|
|
5474
|
+
.cpk-copy-btn {
|
|
5475
|
+
font-size: 10px;
|
|
5476
|
+
font-weight: 500;
|
|
5477
|
+
color: #57575b;
|
|
5478
|
+
background: #ffffff;
|
|
5479
|
+
border: 1px solid #dbdbe5;
|
|
5480
|
+
cursor: pointer;
|
|
5481
|
+
padding: 2px 8px;
|
|
5482
|
+
border-radius: 4px;
|
|
5483
|
+
flex-shrink: 0;
|
|
5484
|
+
transition:
|
|
5485
|
+
background-color 0.15s,
|
|
5486
|
+
border-color 0.15s;
|
|
5487
|
+
}
|
|
5488
|
+
.cpk-copy-btn:hover {
|
|
5489
|
+
background-color: #f0f0f4;
|
|
5490
|
+
border-color: #afafb7;
|
|
5491
|
+
}
|
|
5492
|
+
|
|
5493
|
+
.cpk-section-header {
|
|
5494
|
+
background: #e8edf5;
|
|
5495
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|
5496
|
+
padding: 10px 16px;
|
|
5497
|
+
}
|
|
5498
|
+
.cpk-section-header h4 {
|
|
5499
|
+
font-size: 11px;
|
|
5500
|
+
font-weight: 600;
|
|
5501
|
+
color: #181c1f;
|
|
5502
|
+
margin: 0;
|
|
5503
|
+
}
|
|
5504
|
+
|
|
5505
|
+
/* Inputs/selects inside the lavender header need an explicit white bg */
|
|
5506
|
+
.cpk-section-header input,
|
|
5507
|
+
.cpk-section-header select {
|
|
5508
|
+
background-color: #ffffff !important;
|
|
5509
|
+
box-shadow: none !important;
|
|
5510
|
+
}
|
|
5511
|
+
.cpk-section-header select {
|
|
5512
|
+
padding-right: 24px !important;
|
|
5513
|
+
}
|
|
5514
|
+
/* Events table column headers */
|
|
5515
|
+
table thead th {
|
|
5516
|
+
font-weight: 600 !important;
|
|
3005
5517
|
}
|
|
3006
5518
|
|
|
3007
5519
|
.announcement-content {
|
|
3008
|
-
color: #
|
|
3009
|
-
font-size:
|
|
3010
|
-
|
|
5520
|
+
color: #010507;
|
|
5521
|
+
font-size: 12px;
|
|
5522
|
+
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
|
|
5523
|
+
line-height: 1.5;
|
|
3011
5524
|
}
|
|
3012
5525
|
|
|
3013
5526
|
.announcement-content h1,
|
|
@@ -3018,38 +5531,318 @@ ${this.announcementMarkdown}</pre
|
|
|
3018
5531
|
}
|
|
3019
5532
|
|
|
3020
5533
|
.announcement-content h1 {
|
|
3021
|
-
font-size:
|
|
5534
|
+
font-size: 0.75rem;
|
|
3022
5535
|
}
|
|
3023
|
-
|
|
3024
5536
|
.announcement-content h2 {
|
|
3025
|
-
font-size:
|
|
5537
|
+
font-size: 0.8rem;
|
|
3026
5538
|
}
|
|
3027
|
-
|
|
3028
5539
|
.announcement-content h3 {
|
|
3029
|
-
font-size: 0.
|
|
5540
|
+
font-size: 0.75rem;
|
|
3030
5541
|
}
|
|
3031
5542
|
|
|
3032
5543
|
.announcement-content p {
|
|
3033
|
-
margin: 0.
|
|
5544
|
+
margin: 0.2rem 0;
|
|
3034
5545
|
}
|
|
3035
5546
|
|
|
3036
5547
|
.announcement-content ul {
|
|
3037
5548
|
list-style: disc;
|
|
3038
5549
|
padding-left: 1.25rem;
|
|
3039
|
-
margin: 0.
|
|
5550
|
+
margin: 0.2rem 0;
|
|
3040
5551
|
}
|
|
3041
5552
|
|
|
3042
5553
|
.announcement-content ol {
|
|
3043
5554
|
list-style: decimal;
|
|
3044
5555
|
padding-left: 1.25rem;
|
|
3045
|
-
margin: 0.
|
|
5556
|
+
margin: 0.2rem 0;
|
|
3046
5557
|
}
|
|
3047
5558
|
|
|
3048
5559
|
.announcement-content a {
|
|
3049
|
-
color: #
|
|
5560
|
+
color: #757cf2;
|
|
3050
5561
|
text-decoration: underline;
|
|
3051
5562
|
}
|
|
5563
|
+
|
|
5564
|
+
.announcement-body {
|
|
5565
|
+
position: relative;
|
|
5566
|
+
overflow: hidden;
|
|
5567
|
+
transition: max-height 0.25s ease;
|
|
5568
|
+
}
|
|
5569
|
+
.announcement-body--collapsed {
|
|
5570
|
+
max-height: 72px;
|
|
5571
|
+
}
|
|
5572
|
+
.announcement-body--expanded {
|
|
5573
|
+
max-height: 2000px;
|
|
5574
|
+
}
|
|
5575
|
+
.announcement-fade {
|
|
5576
|
+
position: absolute;
|
|
5577
|
+
bottom: 0;
|
|
5578
|
+
left: 0;
|
|
5579
|
+
right: 0;
|
|
5580
|
+
height: 48px;
|
|
5581
|
+
background: linear-gradient(to bottom, transparent, #ffffff);
|
|
5582
|
+
pointer-events: none;
|
|
5583
|
+
}
|
|
5584
|
+
.announcement-toggle {
|
|
5585
|
+
display: block;
|
|
5586
|
+
width: 100%;
|
|
5587
|
+
margin-top: 6px;
|
|
5588
|
+
padding: 0;
|
|
5589
|
+
background: none;
|
|
5590
|
+
border: none;
|
|
5591
|
+
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
|
|
5592
|
+
font-size: 12px;
|
|
5593
|
+
font-weight: 500;
|
|
5594
|
+
color: #757cf2;
|
|
5595
|
+
cursor: pointer;
|
|
5596
|
+
text-align: center;
|
|
5597
|
+
}
|
|
5598
|
+
.announcement-toggle:hover {
|
|
5599
|
+
color: #6430ab;
|
|
5600
|
+
}
|
|
5601
|
+
|
|
5602
|
+
/* ── Brand typography ────────────────────────────────────────── */
|
|
5603
|
+
/* Override Tailwind font-mono stack → Spline Sans Mono */
|
|
5604
|
+
.font-mono,
|
|
5605
|
+
pre,
|
|
5606
|
+
code {
|
|
5607
|
+
font-family: "Spline Sans Mono", ui-monospace, "Cascadia Code", monospace;
|
|
5608
|
+
}
|
|
5609
|
+
|
|
5610
|
+
/* ── Floating button ─────────────────────────────────────────── */
|
|
5611
|
+
.console-button {
|
|
5612
|
+
background-color: rgba(1, 5, 7, 0.95) !important;
|
|
5613
|
+
border-color: rgba(190, 194, 255, 0.25) !important;
|
|
5614
|
+
box-shadow:
|
|
5615
|
+
0 0 0 1px rgba(190, 194, 255, 0.15),
|
|
5616
|
+
0 4px 14px rgba(1, 5, 7, 0.28) !important;
|
|
5617
|
+
}
|
|
5618
|
+
.console-button:hover {
|
|
5619
|
+
background-color: rgba(1, 5, 7, 1) !important;
|
|
5620
|
+
border-color: rgba(190, 194, 255, 0.45) !important;
|
|
5621
|
+
}
|
|
5622
|
+
.console-button:focus-visible {
|
|
5623
|
+
outline-color: #bec2ff !important;
|
|
5624
|
+
}
|
|
5625
|
+
|
|
5626
|
+
/* ── Inspector window ────────────────────────────────────────── */
|
|
5627
|
+
.inspector-window {
|
|
5628
|
+
border-color: #dbdbe5 !important;
|
|
5629
|
+
box-shadow:
|
|
5630
|
+
0 8px 32px rgba(1, 5, 7, 0.1),
|
|
5631
|
+
0 2px 8px rgba(1, 5, 7, 0.06) !important;
|
|
5632
|
+
}
|
|
5633
|
+
|
|
5634
|
+
/* ── Header drag area ────────────────────────────────────────── */
|
|
5635
|
+
.drag-handle {
|
|
5636
|
+
border-bottom-color: #dbdbe5 !important;
|
|
5637
|
+
/* Subtle pale lavender gradient — brand "light, spacious" surface */
|
|
5638
|
+
background: linear-gradient(180deg, #f4f4fd 0%, #ffffff 100%) !important;
|
|
5639
|
+
}
|
|
5640
|
+
|
|
5641
|
+
/* Tab strip row: soft off-white, separated from content */
|
|
5642
|
+
.drag-handle > div:last-child {
|
|
5643
|
+
border-top-color: #e2e2ea !important;
|
|
5644
|
+
background-color: #fafafc !important;
|
|
5645
|
+
}
|
|
5646
|
+
|
|
5647
|
+
/* ── Tab buttons ─────────────────────────────────────────────── */
|
|
5648
|
+
/*
|
|
5649
|
+
* Named classes owned by this component — no Tailwind conflict.
|
|
5650
|
+
* Active: brand surface/surfaceContainerActive (lilac tint) +
|
|
5651
|
+
* border/borderActionEnabled underline.
|
|
5652
|
+
* Dark fill is for primary action buttons only, not nav tabs.
|
|
5653
|
+
*/
|
|
5654
|
+
.cpk-tab-active {
|
|
5655
|
+
background-color: rgba(190, 194, 255, 0.18);
|
|
5656
|
+
color: #010507;
|
|
5657
|
+
font-weight: 600;
|
|
5658
|
+
}
|
|
5659
|
+
.cpk-tab-active .cpk-tab-icon {
|
|
5660
|
+
color: #757cf2;
|
|
5661
|
+
}
|
|
5662
|
+
.cpk-tab-inactive {
|
|
5663
|
+
background-color: transparent;
|
|
5664
|
+
color: #2b2b2b;
|
|
5665
|
+
}
|
|
5666
|
+
.cpk-tab-inactive .cpk-tab-icon {
|
|
5667
|
+
color: #838389;
|
|
5668
|
+
}
|
|
5669
|
+
.cpk-tab-inactive:hover {
|
|
5670
|
+
background-color: rgba(190, 194, 255, 0.08);
|
|
5671
|
+
color: #010507;
|
|
5672
|
+
cursor: pointer;
|
|
5673
|
+
}
|
|
5674
|
+
.cpk-tab-active {
|
|
5675
|
+
cursor: pointer;
|
|
5676
|
+
}
|
|
5677
|
+
|
|
5678
|
+
/* ── Header control buttons (dock, close) — first row only ───── */
|
|
5679
|
+
.drag-handle > div:first-child button {
|
|
5680
|
+
color: #838389 !important;
|
|
5681
|
+
}
|
|
5682
|
+
.drag-handle > div:first-child button:hover {
|
|
5683
|
+
background-color: #f0f0f4 !important;
|
|
5684
|
+
color: #57575b !important;
|
|
5685
|
+
}
|
|
5686
|
+
.drag-handle > div:first-child button:focus-visible {
|
|
5687
|
+
outline-color: #bec2ff !important;
|
|
5688
|
+
}
|
|
5689
|
+
|
|
5690
|
+
/* ── Agent/context dropdown ──────────────────────────────────── */
|
|
5691
|
+
[data-context-dropdown-root="true"] > button {
|
|
5692
|
+
border-color: #dbdbe5 !important;
|
|
5693
|
+
color: #010507 !important;
|
|
5694
|
+
}
|
|
5695
|
+
[data-context-dropdown-root="true"] > button:hover {
|
|
5696
|
+
border-color: #bec2ff !important;
|
|
5697
|
+
background-color: #f7f7f9 !important;
|
|
5698
|
+
}
|
|
5699
|
+
[data-context-dropdown-root="true"] > button > span:last-child {
|
|
5700
|
+
color: #838389 !important;
|
|
5701
|
+
}
|
|
5702
|
+
[data-context-dropdown-root="true"] > div {
|
|
5703
|
+
border-color: #dbdbe5 !important;
|
|
5704
|
+
box-shadow: 0 4px 12px rgba(1, 5, 7, 0.08) !important;
|
|
5705
|
+
}
|
|
5706
|
+
[data-context-dropdown-root="true"] > div button:hover,
|
|
5707
|
+
[data-context-dropdown-root="true"] > div button:focus {
|
|
5708
|
+
background-color: #f7f7f9 !important;
|
|
5709
|
+
}
|
|
5710
|
+
|
|
5711
|
+
/* ── Status bar (bottom chrome) ──────────────────────────────── */
|
|
5712
|
+
.inspector-window > div > div:last-child {
|
|
5713
|
+
border-top-color: #dbdbe5 !important;
|
|
5714
|
+
background-color: #f7f7f9 !important;
|
|
5715
|
+
}
|
|
5716
|
+
|
|
5717
|
+
/* ── Resize handle ───────────────────────────────────────────── */
|
|
5718
|
+
.resize-handle {
|
|
5719
|
+
color: #838389 !important;
|
|
5720
|
+
}
|
|
5721
|
+
.resize-handle:hover {
|
|
5722
|
+
color: #57575b !important;
|
|
5723
|
+
}
|
|
5724
|
+
|
|
5725
|
+
/* ── AG-UI Events tab ────────────────────────────────────────── */
|
|
5726
|
+
/* Row hover: replace blue tint with brand lilac */
|
|
5727
|
+
tr:hover td {
|
|
5728
|
+
background-color: rgba(190, 194, 255, 0.08) !important;
|
|
5729
|
+
}
|
|
5730
|
+
/* Reset/dark action button */
|
|
5731
|
+
button[class*="bg-gray-900"] {
|
|
5732
|
+
background-color: #010507 !important;
|
|
5733
|
+
}
|
|
5734
|
+
button[class*="bg-gray-800"] {
|
|
5735
|
+
background-color: #2b2b2b !important;
|
|
5736
|
+
}
|
|
5737
|
+
/* Copy "copied" state: generic green → brand mint */
|
|
5738
|
+
button[class*="bg-green-100"] {
|
|
5739
|
+
background-color: rgba(133, 236, 206, 0.2) !important;
|
|
5740
|
+
color: #189370 !important;
|
|
5741
|
+
}
|
|
5742
|
+
|
|
5743
|
+
/* ── Agents tab ──────────────────────────────────────────────── */
|
|
5744
|
+
/* Agent icon bubble: blue → lilac */
|
|
5745
|
+
span[class*="bg-blue-100"]:not([class*="text-blue-800"]) {
|
|
5746
|
+
background-color: rgba(190, 194, 255, 0.15) !important;
|
|
5747
|
+
}
|
|
5748
|
+
span[class*="text-blue-600"] {
|
|
5749
|
+
color: #757cf2 !important;
|
|
5750
|
+
}
|
|
5751
|
+
/* Running badge: emerald → mint */
|
|
5752
|
+
span[class*="bg-emerald-50"] {
|
|
5753
|
+
background-color: rgba(133, 236, 206, 0.15) !important;
|
|
5754
|
+
}
|
|
5755
|
+
span[class*="text-emerald-700"] {
|
|
5756
|
+
color: #189370 !important;
|
|
5757
|
+
}
|
|
5758
|
+
/* Running status dot */
|
|
5759
|
+
span[class*="bg-emerald-500"] {
|
|
5760
|
+
background-color: #85ecce !important;
|
|
5761
|
+
}
|
|
5762
|
+
/* Idle dot */
|
|
5763
|
+
span[class*="bg-gray-400"] {
|
|
5764
|
+
background-color: #afafb7 !important;
|
|
5765
|
+
}
|
|
5766
|
+
/* User role badge (blue → lilac) */
|
|
5767
|
+
span[class*="bg-blue-100"][class*="text-blue-800"] {
|
|
5768
|
+
background-color: rgba(190, 194, 255, 0.22) !important;
|
|
5769
|
+
border: 1px solid rgba(190, 194, 255, 0.45) !important;
|
|
5770
|
+
color: #57575b !important;
|
|
5771
|
+
}
|
|
5772
|
+
/* Assistant role badge (green → mint) */
|
|
5773
|
+
span[class*="bg-green-100"][class*="text-green-800"] {
|
|
5774
|
+
background-color: rgba(133, 236, 206, 0.18) !important;
|
|
5775
|
+
border: 1px solid rgba(133, 236, 206, 0.4) !important;
|
|
5776
|
+
color: #189370 !important;
|
|
5777
|
+
}
|
|
5778
|
+
/* Tool role badge (amber → orange brand) */
|
|
5779
|
+
span[class*="bg-amber-100"][class*="text-amber-800"] {
|
|
5780
|
+
background-color: rgba(255, 172, 77, 0.15) !important;
|
|
5781
|
+
color: #57575b !important;
|
|
5782
|
+
}
|
|
5783
|
+
|
|
5784
|
+
/* ── Frontend Tools tab ──────────────────────────────────────── */
|
|
5785
|
+
/* Handler badge (blue → lilac) */
|
|
5786
|
+
span[class*="bg-blue-50"][class*="text-blue-700"] {
|
|
5787
|
+
background-color: rgba(190, 194, 255, 0.12) !important;
|
|
5788
|
+
border-color: rgba(190, 194, 255, 0.3) !important;
|
|
5789
|
+
color: #010507 !important;
|
|
5790
|
+
}
|
|
5791
|
+
/* Renderer badge (purple → lilac-adjacent) */
|
|
5792
|
+
span[class*="bg-purple-50"][class*="text-purple-700"] {
|
|
5793
|
+
background-color: rgba(190, 194, 255, 0.12) !important;
|
|
5794
|
+
border-color: rgba(190, 194, 255, 0.3) !important;
|
|
5795
|
+
color: #57575b !important;
|
|
5796
|
+
}
|
|
5797
|
+
/* Required badge (rose → brand red) */
|
|
5798
|
+
span[class*="bg-rose-50"][class*="text-rose-700"] {
|
|
5799
|
+
background-color: rgba(250, 95, 103, 0.1) !important;
|
|
5800
|
+
border-color: rgba(250, 95, 103, 0.25) !important;
|
|
5801
|
+
color: #fa5f67 !important;
|
|
5802
|
+
}
|
|
5803
|
+
/* Code/default value blocks */
|
|
5804
|
+
code[class*="bg-gray-100"],
|
|
5805
|
+
span[class*="bg-gray-100"] {
|
|
5806
|
+
background-color: #f0f0f4 !important;
|
|
5807
|
+
}
|
|
5808
|
+
|
|
5809
|
+
/* ── Connected status bar: match threads header mint (#5BE4BB) ──── */
|
|
5810
|
+
/* Outer strip bg + top border + text when connected badge is present */
|
|
5811
|
+
.inspector-window
|
|
5812
|
+
> div
|
|
5813
|
+
> div:last-child
|
|
5814
|
+
> div:last-child:has(div[class*="bg-emerald-50"]) {
|
|
5815
|
+
background-color: rgba(91, 228, 187, 0.08) !important;
|
|
5816
|
+
border-top-color: rgba(91, 228, 187, 0.3) !important;
|
|
5817
|
+
color: #189370 !important;
|
|
5818
|
+
}
|
|
5819
|
+
/* Inner badge — slightly more opaque on the mint bg */
|
|
5820
|
+
div[class*="bg-emerald-50"][class*="border-emerald-200"] {
|
|
5821
|
+
background-color: rgba(91, 228, 187, 0.12) !important;
|
|
5822
|
+
border-color: rgba(91, 228, 187, 0.4) !important;
|
|
5823
|
+
color: #189370 !important;
|
|
5824
|
+
}
|
|
5825
|
+
/* Icon bubble inside connected badge → mint tint */
|
|
5826
|
+
div[class*="bg-emerald-50"] span[class*="bg-white"] {
|
|
5827
|
+
background-color: rgba(91, 228, 187, 0.3) !important;
|
|
5828
|
+
}
|
|
5829
|
+
|
|
5830
|
+
/* ── Announcement panel ──────────────────────────────────────── */
|
|
5831
|
+
div[class*="border-slate-200"][class*="bg-white"] {
|
|
5832
|
+
border-color: #dbdbe5 !important;
|
|
5833
|
+
}
|
|
5834
|
+
/* Announcement icon bubble: black → brand light lavender + lilac icon */
|
|
5835
|
+
span[class*="bg-slate-900"],
|
|
5836
|
+
div[class*="bg-slate-900"] {
|
|
5837
|
+
background-color: #eee6fe !important;
|
|
5838
|
+
color: #757cf2 !important;
|
|
5839
|
+
}
|
|
5840
|
+
span[class*="text-slate-800"],
|
|
5841
|
+
div[class*="text-slate-800"] {
|
|
5842
|
+
color: #010507 !important;
|
|
5843
|
+
}
|
|
3052
5844
|
`];
|
|
5845
|
+
WebInspectorElement.THREADS_REQUEST_URL = "https://r3x69.share-na2.hsforms.com/2uiZg8EkiT7a_KykeXV1ajQ";
|
|
3053
5846
|
function defineWebInspector() {
|
|
3054
5847
|
if (!customElements.get(WEB_INSPECTOR_TAG)) customElements.define(WEB_INSPECTOR_TAG, WebInspectorElement);
|
|
3055
5848
|
}
|
|
@@ -3059,5 +5852,6 @@ ${this.announcementMarkdown}</pre
|
|
|
3059
5852
|
exports.WEB_INSPECTOR_TAG = WEB_INSPECTOR_TAG;
|
|
3060
5853
|
exports.WebInspectorElement = WebInspectorElement;
|
|
3061
5854
|
exports.defineWebInspector = defineWebInspector;
|
|
5855
|
+
exports.ɵCpkThreadDetails = ɵCpkThreadDetails;
|
|
3062
5856
|
});
|
|
3063
5857
|
//# sourceMappingURL=index.umd.js.map
|