@copilotkitnext/web-inspector 0.0.13 → 0.0.14

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { LitElement, css, html, nothing, unsafeCSS } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
 
 // src/styles/generated.css
-var generated_default = '/*! tailwindcss v4.1.11 | 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-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking: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-200:oklch(92.4% .12 95.746);--color-amber-700:oklch(55.5% .163 48.998);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-200:oklch(90.5% .093 164.15);--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-200:oklch(88.2% .059 254.128);--color-blue-700:oklch(48.8% .243 264.376);--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-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-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;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--font-weight-medium:500;--font-weight-semibold:600;--tracking-wider:.05em;--leading-tight:1.25;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--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}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.static{position:static}.right-1{right:calc(var(--spacing)*1)}.bottom-1{bottom:calc(var(--spacing)*1)}.left-0{left:calc(var(--spacing)*0)}.z-50{z-index:50}.m-0{margin:calc(var(--spacing)*0)}.mt-1\\.5{margin-top:calc(var(--spacing)*1.5)}.flex{display:flex}.inline-flex{display:inline-flex}.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-12{height:calc(var(--spacing)*12)}.h-20{height:calc(var(--spacing)*20)}.h-24{height:calc(var(--spacing)*24)}.h-full{height:100%}.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-12{width:calc(var(--spacing)*12)}.w-40{width:calc(var(--spacing)*40)}.w-56{width:calc(var(--spacing)*56)}.w-full{width:100%}.w-px{width:1px}.max-w-xs{max-width:var(--container-xs)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.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}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0\\.5{gap:calc(var(--spacing)*.5)}.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)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow: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-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-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-gray-200{border-color:var(--color-gray-200)}.border-rose-200{border-color:var(--color-rose-200)}.border-sky-200{border-color:var(--color-sky-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-blue-50{background-color:var(--color-blue-50)}.bg-emerald-50{background-color:var(--color-emerald-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-200{background-color:var(--color-gray-200)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-rose-50{background-color:var(--color-rose-50)}.bg-sky-50{background-color:var(--color-sky-50)}.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)}.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-3{padding-block:calc(var(--spacing)*3)}.py-8{padding-block:calc(var(--spacing)*8)}.pt-2{padding-top:calc(var(--spacing)*2)}.pt-3{padding-top:calc(var(--spacing)*3)}.pr-3{padding-right:calc(var(--spacing)*3)}.pb-3{padding-bottom:calc(var(--spacing)*3)}.pl-1{padding-left:calc(var(--spacing)*1)}.pl-2{padding-left:calc(var(--spacing)*2)}.pl-3{padding-left:calc(var(--spacing)*3)}.text-left{text-align:left}.font-mono{font-family:var(--font-mono)}.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-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.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)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.whitespace-pre-wrap{white-space:pre-wrap}.text-amber-700{color:var(--color-amber-700)}.text-blue-700{color:var(--color-blue-700)}.text-emerald-700{color:var(--color-emerald-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-rose-700{color:var(--color-rose-700)}.text-sky-700{color:var(--color-sky-700)}.text-violet-700{color:var(--color-violet-700)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.opacity-60{opacity:.6}.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)}.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-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,)}.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,visibility,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))}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\\:border-gray-300:is(:where(.group):hover *){border-color:var(--color-gray-300)}.group-hover\\:text-gray-700:is(:where(.group):hover *){color:var(--color-gray-700)}.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-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-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\\:bg-gray-50:focus{background-color:var(--color-gray-50)}.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)}.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-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-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{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}';
+var generated_default = '/*! tailwindcss v4.1.11 | 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-border-spacing-x:0;--tw-border-spacing-y:0;--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-tracking: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-duration: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-200:oklch(92.4% .12 95.746);--color-amber-700:oklch(55.5% .163 48.998);--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-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-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;--tracking-wider:.05em;--leading-tight:1.25;--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-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}.pointer-events-none{pointer-events:none}.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-50{z-index:50}.m-0{margin:calc(var(--spacing)*0)}.mx-3{margin-inline:calc(var(--spacing)*3)}.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-2{margin-left:calc(var(--spacing)*2)}.block{display:block}.flex{display:flex}.grid{display:grid}.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-20{height:calc(var(--spacing)*20)}.h-24{height:calc(var(--spacing)*24)}.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-16{width:calc(var(--spacing)*16)}.w-40{width:calc(var(--spacing)*40)}.w-56{width:calc(var(--spacing)*56)}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.max-w-\\[150px\\]{max-width:150px}.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)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-separate{border-collapse:separate}.border-spacing-0{--tw-border-spacing-x:calc(var(--spacing)*0);--tw-border-spacing-y:calc(var(--spacing)*0);border-spacing:var(--tw-border-spacing-x)var(--tw-border-spacing-y)}.-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-0\\.5{gap:calc(var(--spacing)*.5)}.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-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-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-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-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-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-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-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-200{background-color:var(--color-gray-200)}.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-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)}.p-1{padding:calc(var(--spacing)*1)}.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-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-8{padding-block:calc(var(--spacing)*8)}.pt-2{padding-top:calc(var(--spacing)*2)}.pt-3{padding-top:calc(var(--spacing)*3)}.pb-3{padding-bottom:calc(var(--spacing)*3)}.pl-1{padding-left:calc(var(--spacing)*1)}.pl-2{padding-left:calc(var(--spacing)*2)}.text-center{text-align:center}.text-left{text-align:left}.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-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.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)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-amber-700{color:var(--color-amber-700)}.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-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-violet-700{color:var(--color-violet-700)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.opacity-0{opacity:0}.opacity-60{opacity:.6}.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)}.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-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,)}.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,visibility,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))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\\:border-gray-300:is(:where(.group):hover *){border-color:var(--color-gray-300)}.group-hover\\:text-gray-700:is(:where(.group):hover *){color:var(--color-gray-700)}.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-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-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\\:bg-gray-50:focus{background-color:var(--color-gray-50)}.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)}@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-border-spacing-x{syntax:"<length>";inherits:false;initial-value:0}@property --tw-border-spacing-y{syntax:"<length>";inherits:false;initial-value:0}@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-tracking{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-duration{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}}';
 
 // src/assets/logo-mark.svg
 var logo_mark_default = 'data:image/svg+xml,<?xml version="1.0" encoding="utf-8"?>%0A<svg xmlns="http://www.w3.org/2000/svg" width="55" height="60" viewBox="0 0 55 60" fill="none">%0A  <g stroke="%23FFFFFF" stroke-width="3.3125" stroke-linejoin="round">%0A    <path d="M0 21.9336L16.5449 0C40.8483 5.37332 53 8.05998 53 8.05998L43.123 56L0 21.9336Z" />%0A    <line x1="16.5828" y1="0" x2="43.2454" y2="56" />%0A    <line x1="0" y1="21.9336" x2="53" y2="8.48421" />%0A  </g>%0A</svg>%0A';
@@ -131,17 +131,22 @@ function isValidSize(value) {
 function isFiniteNumber(value) {
   return typeof value === "number" && Number.isFinite(value);
 }
+function isValidDockMode(value) {
+  return value === "floating" || value === "docked-left";
+}
 
 // src/index.ts
 var WEB_INSPECTOR_TAG = "web-inspector";
 var EDGE_MARGIN = 16;
 var DRAG_THRESHOLD = 6;
-var MIN_WINDOW_WIDTH = 260;
+var MIN_WINDOW_WIDTH = 600;
+var MIN_WINDOW_WIDTH_DOCKED_LEFT = 420;
 var MIN_WINDOW_HEIGHT = 200;
 var COOKIE_NAME = "copilotkit_inspector_state";
 var COOKIE_MAX_AGE_SECONDS = 60 * 60 * 24 * 30;
 var DEFAULT_BUTTON_SIZE = { width: 48, height: 48 };
-var DEFAULT_WINDOW_SIZE = { width: 320, height: 380 };
+var DEFAULT_WINDOW_SIZE = { width: 840, height: 560 };
+var DOCKED_LEFT_WIDTH = 500;
 var MAX_AGENT_EVENTS = 200;
 var MAX_TOTAL_EVENTS = 500;
 var WebInspectorElement = class extends LitElement {
@@ -152,8 +157,11 @@ var WebInspectorElement = class extends LitElement {
     this.coreUnsubscribe = null;
     this.agentSubscriptions = /* @__PURE__ */ new Map();
     this.agentEvents = /* @__PURE__ */ new Map();
+    this.agentMessages = /* @__PURE__ */ new Map();
+    this.agentStates = /* @__PURE__ */ new Map();
     this.flattenedEvents = [];
     this.eventCounter = 0;
+    this.contextStore = {};
     this.pointerId = null;
     this.dragStart = null;
     this.dragOffset = { x: 0, y: 0 };
@@ -164,6 +172,10 @@ var WebInspectorElement = class extends LitElement {
     this.ignoreNextButtonClick = false;
     this.selectedMenu = "ag-ui-events";
     this.contextMenuOpen = false;
+    this.dockMode = "floating";
+    this.previousBodyMargins = null;
+    this.transitionTimeoutId = null;
+    this.pendingSelectedContext = null;
     this.contextState = {
       button: {
         position: { x: EDGE_MARGIN, y: EDGE_MARGIN },
@@ -193,6 +205,9 @@ var WebInspectorElement = class extends LitElement {
       { key: "agent-context", label: "Agent Context", icon: "FileText" }
     ];
     this.handlePointerDown = (event) => {
+      if (this.dockMode !== "floating" && this.isOpen) {
+        return;
+      }
       const target = event.currentTarget;
       const contextAttr = target?.dataset.dragContext;
       const context = contextAttr === "window" ? "window" : "button";
@@ -242,16 +257,17 @@ var WebInspectorElement = class extends LitElement {
       if (this.isDragging && this.pointerContext) {
         event.preventDefault();
         this.setDragging(false);
-        this.updateAnchorFromPosition(this.pointerContext);
         if (this.pointerContext === "window") {
+          this.updateAnchorFromPosition(this.pointerContext);
           this.hasCustomPosition.window = true;
+          this.applyAnchorPosition(this.pointerContext);
         } else if (this.pointerContext === "button") {
+          this.snapButtonToCorner();
           this.hasCustomPosition.button = true;
           if (this.draggedDuringInteraction) {
             this.ignoreNextButtonClick = true;
           }
         }
-        this.applyAnchorPosition(this.pointerContext);
       } else if (context === "button" && !this.isOpen && !this.draggedDuringInteraction) {
         this.openInspector();
       }
@@ -297,6 +313,9 @@ var WebInspectorElement = class extends LitElement {
       this.resizePointerId = event.pointerId;
       this.resizeStart = { x: event.clientX, y: event.clientY };
       this.resizeInitialSize = { ...this.contextState.window.size };
+      if (document.body && this.dockMode !== "floating") {
+        document.body.style.transition = "";
+      }
       const target = event.currentTarget;
       target?.setPointerCapture?.(event.pointerId);
     };
@@ -308,12 +327,22 @@ var WebInspectorElement = class extends LitElement {
       const deltaX = event.clientX - this.resizeStart.x;
       const deltaY = event.clientY - this.resizeStart.y;
       const state = this.contextState.window;
-      state.size = this.clampWindowSize({
-        width: this.resizeInitialSize.width + deltaX,
-        height: this.resizeInitialSize.height + deltaY
-      });
-      this.keepPositionWithinViewport("window");
-      this.updateAnchorFromPosition("window");
+      if (this.dockMode === "docked-left") {
+        state.size = this.clampWindowSize({
+          width: this.resizeInitialSize.width + deltaX,
+          height: state.size.height
+        });
+        if (document.body) {
+          document.body.style.marginLeft = `${state.size.width}px`;
+        }
+      } else {
+        state.size = this.clampWindowSize({
+          width: this.resizeInitialSize.width + deltaX,
+          height: this.resizeInitialSize.height + deltaY
+        });
+        this.keepPositionWithinViewport("window");
+        this.updateAnchorFromPosition("window");
+      }
       this.requestUpdate();
       this.updateHostTransform("window");
     };
@@ -325,8 +354,11 @@ var WebInspectorElement = class extends LitElement {
       if (target?.hasPointerCapture(this.resizePointerId)) {
         target.releasePointerCapture(this.resizePointerId);
       }
-      this.updateAnchorFromPosition("window");
-      this.applyAnchorPosition("window");
+      if (this.dockMode === "floating") {
+        this.updateAnchorFromPosition("window");
+        this.applyAnchorPosition("window");
+      }
+      this.persistState();
       this.resetResizeTracking();
     };
     this.handleResizePointerCancel = (event) => {
@@ -337,8 +369,11 @@ var WebInspectorElement = class extends LitElement {
       if (target?.hasPointerCapture(this.resizePointerId)) {
         target.releasePointerCapture(this.resizePointerId);
       }
-      this.updateAnchorFromPosition("window");
-      this.applyAnchorPosition("window");
+      if (this.dockMode === "floating") {
+        this.updateAnchorFromPosition("window");
+        this.applyAnchorPosition("window");
+      }
+      this.persistState();
       this.resetResizeTracking();
     };
     this.handleResize = () => {
@@ -357,6 +392,9 @@ var WebInspectorElement = class extends LitElement {
     ];
     this.selectedContext = "all-agents";
     this.expandedRows = /* @__PURE__ */ new Set();
+    this.copiedEvents = /* @__PURE__ */ new Set();
+    this.expandedTools = /* @__PURE__ */ new Set();
+    this.expandedContextItems = /* @__PURE__ */ new Set();
     this.handleGlobalPointerDown = (event) => {
       if (!this.contextMenuOpen) {
         return;
@@ -394,10 +432,17 @@ var WebInspectorElement = class extends LitElement {
     this.coreSubscriber = {
       onAgentsChanged: ({ agents }) => {
         this.processAgentsChanged(agents);
+      },
+      onContextChanged: ({ context }) => {
+        this.contextStore = { ...context };
+        this.requestUpdate();
       }
     };
     this.coreUnsubscribe = core.subscribe(this.coreSubscriber);
     this.processAgentsChanged(core.agents);
+    if (core.context) {
+      this.contextStore = { ...core.context };
+    }
   }
   detachFromCore() {
     if (this.coreUnsubscribe) {
@@ -413,6 +458,8 @@ var WebInspectorElement = class extends LitElement {
     }
     this.agentSubscriptions.clear();
     this.agentEvents.clear();
+    this.agentMessages.clear();
+    this.agentStates.clear();
     this.flattenedEvents = [];
     this.eventCounter = 0;
   }
@@ -429,6 +476,8 @@ var WebInspectorElement = class extends LitElement {
       if (!seenAgentIds.has(agentId)) {
         this.unsubscribeFromAgent(agentId);
         this.agentEvents.delete(agentId);
+        this.agentMessages.delete(agentId);
+        this.agentStates.delete(agentId);
       }
     }
     this.updateContextOptions(seenAgentIds);
@@ -473,12 +522,18 @@ var WebInspectorElement = class extends LitElement {
       },
       onStateSnapshotEvent: ({ event }) => {
         this.recordAgentEvent(agentId, "STATE_SNAPSHOT", event);
+        this.syncAgentState(agent);
       },
       onStateDeltaEvent: ({ event }) => {
         this.recordAgentEvent(agentId, "STATE_DELTA", event);
+        this.syncAgentState(agent);
       },
       onMessagesSnapshotEvent: ({ event }) => {
         this.recordAgentEvent(agentId, "MESSAGES_SNAPSHOT", event);
+        this.syncAgentMessages(agent);
+      },
+      onMessagesChanged: () => {
+        this.syncAgentMessages(agent);
       },
       onRawEvent: ({ event }) => {
         this.recordAgentEvent(agentId, "RAW_EVENT", event);
@@ -489,6 +544,8 @@ var WebInspectorElement = class extends LitElement {
     };
     const { unsubscribe } = agent.subscribe(subscriber);
     this.agentSubscriptions.set(agentId, unsubscribe);
+    this.syncAgentMessages(agent);
+    this.syncAgentState(agent);
     if (!this.agentEvents.has(agentId)) {
       this.agentEvents.set(agentId, []);
     }
@@ -515,6 +572,30 @@ var WebInspectorElement = class extends LitElement {
     this.flattenedEvents = [event, ...this.flattenedEvents].slice(0, MAX_TOTAL_EVENTS);
     this.requestUpdate();
   }
+  syncAgentMessages(agent) {
+    if (!agent?.agentId) {
+      return;
+    }
+    const messages = agent.messages;
+    if (Array.isArray(messages)) {
+      this.agentMessages.set(agent.agentId, messages);
+    } else {
+      this.agentMessages.delete(agent.agentId);
+    }
+    this.requestUpdate();
+  }
+  syncAgentState(agent) {
+    if (!agent?.agentId) {
+      return;
+    }
+    const state = agent.state;
+    if (state === void 0 || state === null) {
+      this.agentStates.delete(agent.agentId);
+    } else {
+      this.agentStates.set(agent.agentId, state);
+    }
+    this.requestUpdate();
+  }
   updateContextOptions(agentIds) {
     const nextOptions = [
       { key: "all-agents", label: "All Agents" },
@@ -524,9 +605,32 @@ var WebInspectorElement = class extends LitElement {
     if (optionsChanged) {
       this.contextOptions = nextOptions;
     }
-    if (!nextOptions.some((option) => option.key === this.selectedContext)) {
-      this.selectedContext = "all-agents";
-      this.expandedRows.clear();
+    const pendingContext = this.pendingSelectedContext;
+    if (pendingContext) {
+      const isPendingAvailable = pendingContext === "all-agents" || agentIds.has(pendingContext);
+      if (isPendingAvailable) {
+        if (this.selectedContext !== pendingContext) {
+          this.selectedContext = pendingContext;
+          this.expandedRows.clear();
+        }
+        this.pendingSelectedContext = null;
+      } else if (agentIds.size > 0) {
+        this.pendingSelectedContext = null;
+      }
+    }
+    const hasSelectedContext = nextOptions.some((option) => option.key === this.selectedContext);
+    if (!hasSelectedContext && this.pendingSelectedContext === null) {
+      let nextSelected = "all-agents";
+      if (agentIds.has("default")) {
+        nextSelected = "default";
+      } else if (agentIds.size > 0) {
+        nextSelected = Array.from(agentIds).sort((a, b) => a.localeCompare(b))[0];
+      }
+      if (this.selectedContext !== nextSelected) {
+        this.selectedContext = nextSelected;
+        this.expandedRows.clear();
+        this.persistState();
+      }
     }
   }
   getEventsForSelectedContext() {
@@ -535,6 +639,146 @@ var WebInspectorElement = class extends LitElement {
     }
     return this.agentEvents.get(this.selectedContext) ?? [];
   }
+  getLatestStateForAgent(agentId) {
+    if (this.agentStates.has(agentId)) {
+      return this.agentStates.get(agentId);
+    }
+    const events = this.agentEvents.get(agentId) ?? [];
+    const stateEvent = events.find((e) => e.type === "STATE_SNAPSHOT");
+    return stateEvent?.payload ?? null;
+  }
+  getLatestMessagesForAgent(agentId) {
+    const messages = this.agentMessages.get(agentId);
+    return messages ?? null;
+  }
+  getAgentStatus(agentId) {
+    const events = this.agentEvents.get(agentId) ?? [];
+    if (events.length === 0) {
+      return "idle";
+    }
+    const runEvent = events.find((e) => e.type === "RUN_STARTED" || e.type === "RUN_FINISHED" || e.type === "RUN_ERROR");
+    if (!runEvent) {
+      return "idle";
+    }
+    if (runEvent.type === "RUN_ERROR") {
+      return "error";
+    }
+    if (runEvent.type === "RUN_STARTED") {
+      const finishedAfter = events.find(
+        (e) => e.type === "RUN_FINISHED" && e.timestamp > runEvent.timestamp
+      );
+      return finishedAfter ? "idle" : "running";
+    }
+    return "idle";
+  }
+  getAgentStats(agentId) {
+    const events = this.agentEvents.get(agentId) ?? [];
+    const messages = this.agentMessages.get(agentId);
+    const toolCallCount = Array.isArray(messages) ? messages.reduce((count, rawMessage) => {
+      if (!rawMessage || typeof rawMessage !== "object") {
+        return count;
+      }
+      const toolCalls = rawMessage.toolCalls;
+      if (!Array.isArray(toolCalls)) {
+        return count;
+      }
+      return count + toolCalls.length;
+    }, 0) : events.filter((e) => e.type === "TOOL_CALL_END").length;
+    const messageCount = Array.isArray(messages) ? messages.length : 0;
+    return {
+      totalEvents: events.length,
+      lastActivity: events[0]?.timestamp ?? null,
+      messages: messageCount,
+      toolCalls: toolCallCount,
+      errors: events.filter((e) => e.type === "RUN_ERROR").length
+    };
+  }
+  renderToolCallDetails(toolCalls) {
+    if (!Array.isArray(toolCalls) || toolCalls.length === 0) {
+      return nothing;
+    }
+    return html`
+      <div class="mt-2 space-y-2">
+        ${toolCalls.map((call, index) => {
+      const toolCall = call;
+      const functionName = typeof toolCall?.function?.name === "string" ? toolCall.function.name : "Unknown function";
+      const callId = typeof toolCall?.id === "string" ? toolCall.id : `tool-call-${index + 1}`;
+      const argsString = this.formatToolCallArguments(toolCall?.function?.arguments);
+      return html`
+            <div class="rounded-md border border-gray-200 bg-gray-50 p-3 text-xs text-gray-700">
+              <div class="flex flex-wrap items-center justify-between gap-1 font-medium text-gray-900">
+                <span>${functionName}</span>
+                <span class="text-[10px] text-gray-500">ID: ${callId}</span>
+              </div>
+              ${argsString ? html`<pre class="mt-2 overflow-auto rounded bg-white p-2 text-[11px] leading-relaxed text-gray-800">${argsString}</pre>` : nothing}
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
+  formatToolCallArguments(args) {
+    if (args === void 0 || args === null || args === "") {
+      return null;
+    }
+    if (typeof args === "string") {
+      try {
+        const parsed = JSON.parse(args);
+        return JSON.stringify(parsed, null, 2);
+      } catch (error) {
+        return args;
+      }
+    }
+    if (typeof args === "object") {
+      try {
+        return JSON.stringify(args, null, 2);
+      } catch (error) {
+        return String(args);
+      }
+    }
+    return String(args);
+  }
+  hasRenderableState(state) {
+    if (state === null || state === void 0) {
+      return false;
+    }
+    if (Array.isArray(state)) {
+      return state.length > 0;
+    }
+    if (typeof state === "object") {
+      return Object.keys(state).length > 0;
+    }
+    if (typeof state === "string") {
+      const trimmed = state.trim();
+      return trimmed.length > 0 && trimmed !== "{}";
+    }
+    return true;
+  }
+  formatStateForDisplay(state) {
+    if (state === null || state === void 0) {
+      return "";
+    }
+    if (typeof state === "string") {
+      const trimmed = state.trim();
+      if (trimmed.length === 0) {
+        return "";
+      }
+      try {
+        const parsed = JSON.parse(trimmed);
+        return JSON.stringify(parsed, null, 2);
+      } catch {
+        return state;
+      }
+    }
+    if (typeof state === "object") {
+      try {
+        return JSON.stringify(state, null, 2);
+      } catch {
+        return String(state);
+      }
+    }
+    return String(state);
+  }
   getEventBadgeClasses(type) {
     const base = "font-mono text-[10px] font-medium inline-flex items-center rounded-sm px-1.5 py-0.5 border";
     if (type.startsWith("RUN_")) {
@@ -571,6 +815,25 @@ var WebInspectorElement = class extends LitElement {
       return String(payload);
     }
   }
+  extractEventFromPayload(payload) {
+    if (payload && typeof payload === "object" && "event" in payload) {
+      return payload.event;
+    }
+    return payload;
+  }
+  async copyToClipboard(text, eventId) {
+    try {
+      await navigator.clipboard.writeText(text);
+      this.copiedEvents.add(eventId);
+      this.requestUpdate();
+      setTimeout(() => {
+        this.copiedEvents.delete(eventId);
+        this.requestUpdate();
+      }, 2e3);
+    } catch (err) {
+      console.error("Failed to copy to clipboard:", err);
+    }
+  }
   static {
     this.styles = [
       unsafeCSS(generated_default),
@@ -584,16 +847,45 @@ var WebInspectorElement = class extends LitElement {
         will-change: transform;
       }
 
+      :host([data-transitioning="true"]) {
+        transition: transform 300ms ease;
+      }
+
       .console-button {
         transition:
-          transform 160ms ease,
+          transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
           opacity 160ms ease;
       }
 
+      .console-button[data-dragging="true"] {
+        transition: opacity 160ms ease;
+      }
+
+      .inspector-window[data-transitioning="true"] {
+        transition: width 300ms ease, height 300ms ease;
+      }
+
+      .inspector-window[data-docked="true"] {
+        border-radius: 0 !important;
+        box-shadow: none !important;
+      }
+
       .resize-handle {
         touch-action: none;
         user-select: none;
       }
+
+      .dock-resize-handle {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 10px;
+        height: 100%;
+        cursor: ew-resize;
+        touch-action: none;
+        z-index: 50;
+        background: transparent;
+      }
     `
     ];
   }
@@ -602,6 +894,7 @@ var WebInspectorElement = class extends LitElement {
     if (typeof window !== "undefined") {
       window.addEventListener("resize", this.handleResize);
       window.addEventListener("pointerdown", this.handleGlobalPointerDown);
+      this.hydrateStateFromCookieEarly();
     }
   }
   disconnectedCallback() {
@@ -610,6 +903,7 @@ var WebInspectorElement = class extends LitElement {
       window.removeEventListener("resize", this.handleResize);
       window.removeEventListener("pointerdown", this.handleGlobalPointerDown);
     }
+    this.removeDockStyles();
     this.detachFromCore();
   }
   firstUpdated() {
@@ -623,13 +917,18 @@ var WebInspectorElement = class extends LitElement {
     this.contextState.window.anchor = { horizontal: "right", vertical: "bottom" };
     this.contextState.window.anchorOffset = { x: EDGE_MARGIN, y: EDGE_MARGIN };
     this.hydrateStateFromCookie();
+    if (this.isOpen && this.dockMode !== "floating") {
+      this.applyDockStyles(true);
+    }
     this.applyAnchorPosition("button");
-    if (this.hasCustomPosition.window) {
-      this.applyAnchorPosition("window");
-    } else {
-      this.centerContext("window");
+    if (this.dockMode === "floating") {
+      if (this.hasCustomPosition.window) {
+        this.applyAnchorPosition("window");
+      } else {
+        this.centerContext("window");
+      }
     }
-    this.updateHostTransform("button");
+    this.updateHostTransform(this.isOpen ? "window" : "button");
   }
   render() {
     return this.isOpen ? this.renderWindow() : this.renderButton();
@@ -672,6 +971,7 @@ var WebInspectorElement = class extends LitElement {
         type="button"
         aria-label="Web Inspector"
         data-drag-context="button"
+        data-dragging=${this.isDragging && this.pointerContext === "button" ? "true" : "false"}
         @pointerdown=${this.handlePointerDown}
         @pointermove=${this.handlePointerMove}
         @pointerup=${this.handlePointerUp}
@@ -684,7 +984,10 @@ var WebInspectorElement = class extends LitElement {
   }
   renderWindow() {
     const windowState = this.contextState.window;
-    const windowStyles = {
+    const isDocked = this.dockMode !== "floating";
+    const isTransitioning = this.hasAttribute("data-transitioning");
+    const isCollapsed = this.dockMode === "docked-left";
+    const windowStyles = isDocked ? this.getDockedWindowStyles() : {
       width: `${Math.round(windowState.size.width)}px`,
       height: `${Math.round(windowState.size.height)}px`,
       minWidth: `${MIN_WINDOW_WIDTH}px`,
@@ -696,39 +999,57 @@ var WebInspectorElement = class extends LitElement {
       <section
         class="inspector-window pointer-events-auto relative flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white text-gray-900 shadow-lg"
         style=${styleMap(windowStyles)}
+        data-docked=${isDocked}
+        data-transitioning=${isTransitioning}
       >
+        ${isDocked ? html`
+              <div
+                class="dock-resize-handle pointer-events-auto"
+                role="presentation"
+                aria-hidden="true"
+                @pointerdown=${this.handleResizePointerDown}
+                @pointermove=${this.handleResizePointerMove}
+                @pointerup=${this.handleResizePointerUp}
+                @pointercancel=${this.handleResizePointerCancel}
+              ></div>
+            ` : nothing}
         <div class="flex flex-1 overflow-hidden bg-white text-gray-800">
           <nav
-            class="flex w-56 shrink-0 flex-col justify-between border-r border-gray-200 bg-gray-50/50 px-3 pb-3 pt-3 text-xs"
+            class="flex ${isCollapsed ? "w-16" : "w-56"} shrink-0 flex-col justify-between border-r border-gray-200 bg-gray-50/50 px-3 pb-3 pt-3 text-xs transition-all duration-300"
             aria-label="Inspector sections"
           >
             <div class="flex flex-col gap-4 overflow-y-auto">
               <div
-                class="flex items-center gap-2 pl-1 touch-none select-none ${this.isDragging && this.pointerContext === "window" ? "cursor-grabbing" : "cursor-grab"}"
+                class="flex items-center ${isCollapsed ? "justify-center" : "gap-2 pl-1"} touch-none select-none ${this.isDragging && this.pointerContext === "window" ? "cursor-grabbing" : "cursor-grab"}"
                 data-drag-context="window"
                 @pointerdown=${this.handlePointerDown}
                 @pointermove=${this.handlePointerMove}
                 @pointerup=${this.handlePointerUp}
                 @pointercancel=${this.handlePointerCancel}
+                title="${isCollapsed ? "Acme Inc - Enterprise" : ""}"
               >
                 <span
                   class="flex h-8 w-8 items-center justify-center rounded-lg bg-gray-900 text-white pointer-events-none"
                 >
                   ${this.renderIcon("Building2")}
                 </span>
-                <div class="flex flex-1 flex-col leading-tight pointer-events-none">
-                  <span class="text-sm font-semibold text-gray-900">Acme Inc</span>
-                  <span class="text-[10px] text-gray-500">Enterprise</span>
-                </div>
+                ${!isCollapsed ? html`
+                    <div class="flex flex-1 flex-col leading-tight pointer-events-none">
+                      <span class="text-sm font-semibold text-gray-900">Acme Inc</span>
+                      <span class="text-[10px] text-gray-500">Enterprise</span>
+                    </div>
+                  ` : nothing}
               </div>
 
               <div class="flex flex-col gap-2 pt-2">
-                <div class="px-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400">Platform</div>
+                ${!isCollapsed ? html`<div class="px-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400">Platform</div>` : nothing}
                 <div class="flex flex-col gap-0.5">
                   ${this.menuItems.map(({ key, label, icon }) => {
       const isSelected = this.selectedMenu === key;
       const buttonClasses = [
-        "group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300",
+        "group flex w-full items-center",
+        isCollapsed ? "justify-center p-2" : "gap-2 px-2 py-1.5",
+        "rounded-md text-left text-xs transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300",
         isSelected ? "bg-gray-900 text-white" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
       ].join(" ");
       const badgeClasses = isSelected ? "bg-gray-800 text-white" : "bg-white border border-gray-200 text-gray-500 group-hover:border-gray-300 group-hover:text-gray-700";
@@ -737,16 +1058,19 @@ var WebInspectorElement = class extends LitElement {
                         type="button"
                         class=${buttonClasses}
                         aria-pressed=${isSelected}
+                        title="${isCollapsed ? label : ""}"
                         @click=${() => this.handleMenuSelect(key)}
                       >
                         <span
-                          class="flex h-6 w-6 items-center justify-center rounded ${badgeClasses}"
+                          class="flex h-6 w-6 items-center justify-center rounded ${isCollapsed && isSelected ? "text-white" : isCollapsed ? "text-gray-600" : badgeClasses}"
                           aria-hidden="true"
                         >
                           ${this.renderIcon(icon)}
                         </span>
-                        <span class="flex-1">${label}</span>
-                        <span class="text-gray-400 opacity-60">${this.renderIcon("ChevronRight")}</span>
+                        ${!isCollapsed ? html`
+                            <span class="flex-1">${label}</span>
+                            <span class="text-gray-400 opacity-60">${this.renderIcon("ChevronRight")}</span>
+                          ` : nothing}
                       </button>
                     `;
     })}
@@ -755,50 +1079,61 @@ var WebInspectorElement = class extends LitElement {
             </div>
 
             <div
-              class="relative flex items-center rounded-lg border border-gray-200 bg-white px-2 py-2 text-left text-xs text-gray-700 cursor-pointer hover:bg-gray-50 transition"
+              class="relative flex items-center ${isCollapsed ? "justify-center p-1" : ""} rounded-lg border border-gray-200 bg-white ${isCollapsed ? "" : "px-2 py-2"} text-left text-xs text-gray-700 cursor-pointer hover:bg-gray-50 transition"
+              title="${isCollapsed ? "John Snow - john@snow.com" : ""}"
             >
               <span
-                class="w-6 h-6 flex items-center justify-center overflow-hidden rounded bg-gray-100 text-[10px] font-semibold text-gray-700"
+                class="${isCollapsed ? "w-8 h-8 shrink-0" : "w-6 h-6"} flex items-center justify-center overflow-hidden rounded bg-gray-100 text-[10px] font-semibold text-gray-700"
               >
                 JS
               </span>
-              <div class="pl-2 flex flex-1 flex-col leading-tight">
-                <span class="font-medium text-gray-900">John Snow</span>
-                <span class="text-[10px] text-gray-500">john@snow.com</span>
-              </div>
-              <span class="text-gray-300">${this.renderIcon("ChevronRight")}</span>
+              ${!isCollapsed ? html`
+                  <div class="pl-2 flex flex-1 flex-col leading-tight">
+                    <span class="font-medium text-gray-900">John Snow</span>
+                    <span class="text-[10px] text-gray-500">john@snow.com</span>
+                  </div>
+                  <span class="text-gray-300">${this.renderIcon("ChevronRight")}</span>
+                ` : nothing}
             </div>
           </nav>
           <div class="relative flex flex-1 flex-col overflow-hidden">
             <div
-              class="drag-handle flex items-center justify-between border-b border-gray-200 px-4 py-3 touch-none select-none ${this.isDragging && this.pointerContext === "window" ? "cursor-grabbing" : "cursor-grab"}"
+              class="drag-handle flex items-center justify-between border-b border-gray-200 px-4 py-3 touch-none select-none ${isDocked ? "" : this.isDragging && this.pointerContext === "window" ? "cursor-grabbing" : "cursor-grab"}"
               data-drag-context="window"
-              @pointerdown=${this.handlePointerDown}
-              @pointermove=${this.handlePointerMove}
-              @pointerup=${this.handlePointerUp}
-              @pointercancel=${this.handlePointerCancel}
+              @pointerdown=${isDocked ? void 0 : this.handlePointerDown}
+              @pointermove=${isDocked ? void 0 : this.handlePointerMove}
+              @pointerup=${isDocked ? void 0 : this.handlePointerUp}
+              @pointercancel=${isDocked ? void 0 : this.handlePointerCancel}
             >
-              <div class="flex items-center gap-2 text-xs text-gray-500">
-                <span class="text-gray-400">
-                  ${this.renderIcon(this.getSelectedMenu().icon)}
-                </span>
-                <div class="flex items-center text-xs text-gray-600">
-                  <span class="pr-3">${this.getSelectedMenu().label}</span>
+              <div class="flex min-w-0 flex-1 items-center gap-2 text-xs text-gray-500">
+                <div class="flex min-w-0 flex-1 items-center text-xs text-gray-600">
+                  <span class="flex shrink-0 items-center gap-1">
+                    <span>🪁</span>
+                    <span class="font-medium whitespace-nowrap">CopilotKit Inspector</span>
+                  </span>
+                  <span class="mx-3 h-3 w-px shrink-0 bg-gray-200"></span>
+                  <span class="shrink-0 text-gray-400">
+                    ${this.renderIcon(this.getSelectedMenu().icon)}
+                  </span>
+                  <span class="ml-2 truncate">${this.getSelectedMenu().label}</span>
                   ${hasContextDropdown ? html`
-                        <span class="h-3 w-px bg-gray-200"></span>
-                        <div class="pl-3">${contextDropdown}</div>
+                        <span class="mx-3 h-3 w-px shrink-0 bg-gray-200"></span>
+                        <div class="min-w-0">${contextDropdown}</div>
                       ` : nothing}
                 </div>
               </div>
-              <button
-                class="flex h-6 w-6 items-center justify-center rounded text-gray-400 transition hover:bg-gray-100 hover:text-gray-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400"
-                type="button"
-                aria-label="Close Web Inspector"
-                @pointerdown=${this.handleClosePointerDown}
-                @click=${this.handleCloseClick}
-              >
-                ${this.renderIcon("X")}
-              </button>
+              <div class="flex items-center gap-1">
+                ${this.renderDockControls()}
+                <button
+                  class="flex h-6 w-6 items-center justify-center rounded text-gray-400 transition hover:bg-gray-100 hover:text-gray-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400"
+                  type="button"
+                  aria-label="Close Web Inspector"
+                  @pointerdown=${this.handleClosePointerDown}
+                  @click=${this.handleCloseClick}
+                >
+                  ${this.renderIcon("X")}
+                </button>
+              </div>
             </div>
             <div class="flex-1 overflow-auto">
               ${this.renderMainContent()}
@@ -830,6 +1165,31 @@ var WebInspectorElement = class extends LitElement {
       </section>
     `;
   }
+  hydrateStateFromCookieEarly() {
+    if (typeof document === "undefined" || typeof window === "undefined") {
+      return;
+    }
+    const persisted = loadInspectorState(COOKIE_NAME);
+    if (!persisted) {
+      return;
+    }
+    if (typeof persisted.isOpen === "boolean") {
+      this.isOpen = persisted.isOpen;
+    }
+    if (isValidDockMode(persisted.dockMode)) {
+      this.dockMode = persisted.dockMode;
+    }
+    if (typeof persisted.selectedMenu === "string") {
+      const validMenu = this.menuItems.find((item) => item.key === persisted.selectedMenu);
+      if (validMenu) {
+        this.selectedMenu = validMenu.key;
+      }
+    }
+    if (typeof persisted.selectedContext === "string") {
+      this.selectedContext = persisted.selectedContext;
+      this.pendingSelectedContext = persisted.selectedContext;
+    }
+  }
   hydrateStateFromCookie() {
     if (typeof document === "undefined" || typeof window === "undefined") {
       return;
@@ -865,6 +1225,10 @@ var WebInspectorElement = class extends LitElement {
         this.hasCustomPosition.window = persistedWindow.hasCustomPosition;
       }
     }
+    if (typeof persisted.selectedContext === "string") {
+      this.selectedContext = persisted.selectedContext;
+      this.pendingSelectedContext = persisted.selectedContext;
+    }
   }
   get activeContext() {
     return this.isOpen ? "window" : "button";
@@ -939,26 +1303,111 @@ var WebInspectorElement = class extends LitElement {
           height: Math.round(this.contextState.window.size.height)
         },
         hasCustomPosition: this.hasCustomPosition.window
-      }
+      },
+      isOpen: this.isOpen,
+      dockMode: this.dockMode,
+      selectedMenu: this.selectedMenu,
+      selectedContext: this.selectedContext
     };
     saveInspectorState(COOKIE_NAME, state, COOKIE_MAX_AGE_SECONDS);
+    this.pendingSelectedContext = state.selectedContext ?? null;
   }
   clampWindowSize(size) {
+    const minWidth = this.dockMode === "docked-left" ? MIN_WINDOW_WIDTH_DOCKED_LEFT : MIN_WINDOW_WIDTH;
     if (typeof window === "undefined") {
       return {
-        width: Math.max(MIN_WINDOW_WIDTH, size.width),
+        width: Math.max(minWidth, size.width),
         height: Math.max(MIN_WINDOW_HEIGHT, size.height)
       };
     }
     const viewport = this.getViewportSize();
-    return clampSize(size, viewport, EDGE_MARGIN, MIN_WINDOW_WIDTH, MIN_WINDOW_HEIGHT);
+    return clampSize(size, viewport, EDGE_MARGIN, minWidth, MIN_WINDOW_HEIGHT);
+  }
+  setDockMode(mode) {
+    if (this.dockMode === mode) {
+      return;
+    }
+    this.startHostTransition();
+    this.removeDockStyles();
+    const previousMode = this.dockMode;
+    this.dockMode = mode;
+    if (mode !== "floating") {
+      if (mode === "docked-left") {
+        this.contextState.window.size.width = DOCKED_LEFT_WIDTH;
+      }
+      this.applyDockStyles();
+    } else {
+      this.contextState.window.size = { ...DEFAULT_WINDOW_SIZE };
+      this.centerContext("window");
+    }
+    this.persistState();
+    this.requestUpdate();
+    this.updateHostTransform("window");
+  }
+  startHostTransition(duration = 300) {
+    this.setAttribute("data-transitioning", "true");
+    if (this.transitionTimeoutId !== null) {
+      clearTimeout(this.transitionTimeoutId);
+    }
+    this.transitionTimeoutId = setTimeout(() => {
+      this.removeAttribute("data-transitioning");
+      this.transitionTimeoutId = null;
+    }, duration);
+  }
+  applyDockStyles(skipTransition = false) {
+    if (typeof document === "undefined" || !document.body) {
+      return;
+    }
+    const computedStyle = window.getComputedStyle(document.body);
+    this.previousBodyMargins = {
+      left: computedStyle.marginLeft,
+      bottom: computedStyle.marginBottom
+    };
+    if (!this.isResizing && !skipTransition) {
+      document.body.style.transition = "margin 300ms ease";
+    }
+    if (this.dockMode === "docked-left") {
+      document.body.style.marginLeft = `${this.contextState.window.size.width}px`;
+    }
+    if (!this.isResizing && !skipTransition) {
+      setTimeout(() => {
+        if (document.body) {
+          document.body.style.transition = "";
+        }
+      }, 300);
+    }
+  }
+  removeDockStyles() {
+    if (typeof document === "undefined" || !document.body) {
+      return;
+    }
+    if (!this.isResizing) {
+      document.body.style.transition = "margin 300ms ease";
+    }
+    if (this.previousBodyMargins) {
+      document.body.style.marginLeft = this.previousBodyMargins.left;
+      document.body.style.marginBottom = this.previousBodyMargins.bottom;
+      this.previousBodyMargins = null;
+    } else {
+      document.body.style.marginLeft = "";
+      document.body.style.marginBottom = "";
+    }
+    setTimeout(() => {
+      if (document.body) {
+        document.body.style.transition = "";
+      }
+    }, 300);
   }
   updateHostTransform(context = this.activeContext) {
     if (context !== this.activeContext) {
       return;
     }
-    const { position } = this.contextState[context];
-    this.style.transform = `translate3d(${position.x}px, ${position.y}px, 0)`;
+    if (this.isOpen && this.dockMode === "docked-left") {
+      this.style.transform = `translate3d(0, 0, 0)`;
+    } else {
+      const { position } = this.contextState[context];
+      this.style.transform = `translate3d(${position.x}px, ${position.y}px, 0)`;
+    }
   }
   setDragging(value) {
     if (this.isDragging !== value) {
@@ -973,6 +1422,21 @@ var WebInspectorElement = class extends LitElement {
     const viewport = this.getViewportSize();
     updateAnchorFromPosition(this.contextState[context], viewport, EDGE_MARGIN);
   }
+  snapButtonToCorner() {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const viewport = this.getViewportSize();
+    const state = this.contextState.button;
+    const centerX = state.position.x + state.size.width / 2;
+    const centerY = state.position.y + state.size.height / 2;
+    const horizontal = centerX < viewport.width / 2 ? "left" : "right";
+    const vertical = centerY < viewport.height / 2 ? "top" : "bottom";
+    state.anchor = { horizontal, vertical };
+    state.anchorOffset = { x: EDGE_MARGIN, y: EDGE_MARGIN };
+    this.startHostTransition();
+    this.applyAnchorPosition("button");
+  }
   applyAnchorPosition(context) {
     if (typeof window === "undefined") {
       return;
@@ -1000,14 +1464,22 @@ var WebInspectorElement = class extends LitElement {
       return;
     }
     this.isOpen = true;
+    this.persistState();
+    if (this.dockMode !== "floating") {
+      this.applyDockStyles();
+    }
     this.ensureWindowPlacement();
     this.requestUpdate();
     void this.updateComplete.then(() => {
       this.measureContext("window");
-      if (this.hasCustomPosition.window) {
-        this.applyAnchorPosition("window");
+      if (this.dockMode === "floating") {
+        if (this.hasCustomPosition.window) {
+          this.applyAnchorPosition("window");
+        } else {
+          this.centerContext("window");
+        }
       } else {
-        this.centerContext("window");
+        this.updateHostTransform("window");
       }
     });
   }
@@ -1016,6 +1488,10 @@ var WebInspectorElement = class extends LitElement {
       return;
     }
     this.isOpen = false;
+    if (this.dockMode !== "floating") {
+      this.removeDockStyles();
+    }
+    this.persistState();
     this.updateHostTransform("button");
     this.requestUpdate();
     void this.updateComplete.then(() => {
@@ -1041,6 +1517,56 @@ var WebInspectorElement = class extends LitElement {
     const svgMarkup = `<svg ${this.serializeAttributes(svgAttrs)}>${iconNode.map(([tag, attrs]) => `<${tag} ${this.serializeAttributes(attrs)} />`).join("")}</svg>`;
     return unsafeHTML(svgMarkup);
   }
+  renderDockControls() {
+    if (this.dockMode === "floating") {
+      return html`
+        <button
+          class="flex h-6 w-6 items-center justify-center rounded text-gray-400 transition hover:bg-gray-100 hover:text-gray-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400"
+          type="button"
+          aria-label="Dock to left"
+          title="Dock Left"
+          @click=${() => this.handleDockClick("docked-left")}
+        >
+          ${this.renderIcon("PanelLeft")}
+        </button>
+      `;
+    } else {
+      return html`
+        <button
+          class="flex h-6 w-6 items-center justify-center rounded text-gray-400 transition hover:bg-gray-100 hover:text-gray-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400"
+          type="button"
+          aria-label="Float window"
+          title="Float"
+          @click=${() => this.handleDockClick("floating")}
+        >
+          ${this.renderIcon("Maximize2")}
+        </button>
+      `;
+    }
+  }
+  getDockedWindowStyles() {
+    if (this.dockMode === "docked-left") {
+      return {
+        position: "fixed",
+        top: "0",
+        left: "0",
+        bottom: "0",
+        width: `${Math.round(this.contextState.window.size.width)}px`,
+        height: "100vh",
+        minWidth: `${MIN_WINDOW_WIDTH_DOCKED_LEFT}px`,
+        borderRadius: "0"
+      };
+    }
+    return {
+      width: `${Math.round(this.contextState.window.size.width)}px`,
+      height: `${Math.round(this.contextState.window.size.height)}px`,
+      minWidth: `${MIN_WINDOW_WIDTH}px`,
+      minHeight: `${MIN_WINDOW_HEIGHT}px`
+    };
+  }
+  handleDockClick(mode) {
+    this.setDockMode(mode);
+  }
   serializeAttributes(attributes) {
     return Object.entries(attributes).filter(([key, value]) => key !== "key" && value !== void 0 && value !== null && value !== "").map(([key, value]) => `${key}="${String(value).replace(/"/g, "&quot;")}"`).join(" ");
   }
@@ -1052,6 +1578,15 @@ var WebInspectorElement = class extends LitElement {
     if (this.selectedMenu === "ag-ui-events") {
       return this.renderEventsTable();
     }
+    if (this.selectedMenu === "agents") {
+      return this.renderAgentsView();
+    }
+    if (this.selectedMenu === "frontend-tools") {
+      return this.renderToolsView();
+    }
+    if (this.selectedMenu === "agent-context") {
+      return this.renderContextView();
+    }
     return html`
       <div class="flex flex-col gap-3 p-4">
         <div class="h-24 rounded-lg bg-gray-50"></div>
@@ -1063,53 +1598,75 @@ var WebInspectorElement = class extends LitElement {
     const events = this.getEventsForSelectedContext();
     if (events.length === 0) {
       return html`
-        <div class="flex h-full items-center justify-center px-4 py-8 text-xs text-gray-500">
-          No events yet. Trigger an agent run to see live activity.
+        <div class="flex h-full items-center justify-center px-4 py-8 text-center">
+          <div class="max-w-md">
+            <div class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8">
+              ${this.renderIcon("Zap")}
+            </div>
+            <p class="text-sm text-gray-600">No events yet</p>
+            <p class="mt-2 text-xs text-gray-500">Trigger an agent run to see live activity.</p>
+          </div>
         </div>
       `;
     }
     return html`
-      <div class="overflow-hidden">
-        <table class="w-full border-collapse text-xs">
-          <thead>
+      <div class="relative h-full overflow-auto">
+        <table class="w-full border-separate border-spacing-0 text-xs">
+          <thead class="sticky top-0 z-10">
             <tr class="bg-white">
-              <th class="border-r border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900">
-                Type
+              <th class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900">
+                Agent
               </th>
-              <th class="border-r border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900">
+              <th class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900">
                 Time
               </th>
               <th class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900">
-                Payload
+                Event Type
+              </th>
+              <th class="border-b border-gray-200 bg-white px-3 py-2 text-left font-medium text-gray-900">
+                AG-UI Event
               </th>
             </tr>
           </thead>
           <tbody>
             ${events.map((event, index) => {
-      const isLastRow = index === events.length - 1;
       const rowBg = index % 2 === 0 ? "bg-white" : "bg-gray-50/50";
       const badgeClasses = this.getEventBadgeClasses(event.type);
-      const inlinePayload = this.stringifyPayload(event.payload, false) || "\u2014";
-      const prettyPayload = this.stringifyPayload(event.payload, true) || inlinePayload;
+      const extractedEvent = this.extractEventFromPayload(event.payload);
+      const inlineEvent = this.stringifyPayload(extractedEvent, false) || "\u2014";
+      const prettyEvent = this.stringifyPayload(extractedEvent, true) || inlineEvent;
       const isExpanded = this.expandedRows.has(event.id);
       return html`
                 <tr
-                  class="${rowBg} transition hover:bg-blue-50/50"
+                  class="${rowBg} cursor-pointer transition hover:bg-blue-50/50"
                   @click=${() => this.toggleRowExpansion(event.id)}
                 >
-                  <td class="border-r ${!isLastRow ? "border-b" : ""} border-gray-200 px-3 py-2">
-                    <div class="flex flex-col gap-1">
-                      <span class=${badgeClasses}>${event.type}</span>
-                      <span class="font-mono text-[10px] text-gray-400">${event.agentId}</span>
-                    </div>
+                  <td class="border-l border-r border-b border-gray-200 px-3 py-2">
+                    <span class="font-mono text-[11px] text-gray-600">${event.agentId}</span>
                   </td>
-                  <td class="border-r ${!isLastRow ? "border-b" : ""} border-gray-200 px-3 py-2 font-mono text-[11px] text-gray-600">
+                  <td class="border-r border-b border-gray-200 px-3 py-2 font-mono text-[11px] text-gray-600">
                     <span title=${new Date(event.timestamp).toLocaleString()}>
                       ${new Date(event.timestamp).toLocaleTimeString()}
                     </span>
                   </td>
-                  <td class="${!isLastRow ? "border-b" : ""} border-gray-200 px-3 py-2 font-mono text-[10px] text-gray-600 ${isExpanded ? "" : "truncate max-w-xs"}">
-                    ${isExpanded ? html`<pre class="m-0 whitespace-pre-wrap text-[10px] font-mono text-gray-600">${prettyPayload}</pre>` : inlinePayload}
+                  <td class="border-r border-b border-gray-200 px-3 py-2">
+                    <span class=${badgeClasses}>${event.type}</span>
+                  </td>
+                  <td class="border-r border-b border-gray-200 px-3 py-2 font-mono text-[10px] text-gray-600 ${isExpanded ? "" : "truncate max-w-xs"}">
+                    ${isExpanded ? html`
+                          <div class="group relative">
+                            <pre class="m-0 whitespace-pre-wrap text-[10px] font-mono text-gray-600">${prettyEvent}</pre>
+                            <button
+                              class="absolute right-0 top-0 cursor-pointer rounded px-2 py-1 text-[10px] opacity-0 transition group-hover:opacity-100 ${this.copiedEvents.has(event.id) ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900"}"
+                              @click=${(e) => {
+        e.stopPropagation();
+        this.copyToClipboard(prettyEvent, event.id);
+      }}
+                            >
+                              ${this.copiedEvents.has(event.id) ? html`<span>✓ Copied</span>` : html`<span>Copy</span>`}
+                            </button>
+                          </div>
+                        ` : inlineEvent}
                   </td>
                 </tr>
               `;
@@ -1119,27 +1676,174 @@ var WebInspectorElement = class extends LitElement {
       </div>
     `;
   }
+  renderAgentsView() {
+    if (this.selectedContext === "all-agents") {
+      return html`
+        <div class="flex h-full items-center justify-center px-4 py-8 text-center">
+          <div class="max-w-md">
+            <div class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8">
+              ${this.renderIcon("Bot")}
+            </div>
+            <p class="text-sm text-gray-600">No agent selected</p>
+            <p class="mt-2 text-xs text-gray-500">Select an agent from the dropdown above to view details.</p>
+          </div>
+        </div>
+      `;
+    }
+    const agentId = this.selectedContext;
+    const status = this.getAgentStatus(agentId);
+    const stats = this.getAgentStats(agentId);
+    const state = this.getLatestStateForAgent(agentId);
+    const messages = this.getLatestMessagesForAgent(agentId);
+    const statusColors = {
+      running: "bg-emerald-50 text-emerald-700",
+      idle: "bg-gray-100 text-gray-600",
+      error: "bg-rose-50 text-rose-700"
+    };
+    return html`
+      <div class="flex flex-col gap-4 p-4 overflow-auto">
+        <!-- Agent Overview Card -->
+        <div class="rounded-lg border border-gray-200 bg-white p-4">
+          <div class="flex items-start justify-between mb-4">
+            <div class="flex items-center gap-3">
+              <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
+                ${this.renderIcon("Bot")}
+              </div>
+              <div>
+                <h3 class="font-semibold text-sm text-gray-900">${agentId}</h3>
+                <span class="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium ${statusColors[status]} relative -translate-y-[2px]">
+                  <span class="h-1.5 w-1.5 rounded-full ${status === "running" ? "bg-emerald-500 animate-pulse" : status === "error" ? "bg-rose-500" : "bg-gray-400"}"></span>
+                  ${status.charAt(0).toUpperCase() + status.slice(1)}
+                </span>
+              </div>
+            </div>
+            ${stats.lastActivity ? html`<span class="text-xs text-gray-500">Last activity: ${new Date(stats.lastActivity).toLocaleTimeString()}</span>` : nothing}
+          </div>
+          <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
+            <button
+              type="button"
+              class="rounded-md bg-gray-50 px-3 py-2 text-left transition hover:bg-gray-100 cursor-pointer overflow-hidden"
+              @click=${() => this.handleMenuSelect("ag-ui-events")}
+              title="View all events in AG-UI Events"
+            >
+              <div class="truncate whitespace-nowrap text-xs text-gray-600">Total Events</div>
+              <div class="text-lg font-semibold text-gray-900">${stats.totalEvents}</div>
+            </button>
+            <div class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden">
+              <div class="truncate whitespace-nowrap text-xs text-gray-600">Messages</div>
+              <div class="text-lg font-semibold text-gray-900">${stats.messages}</div>
+            </div>
+            <div class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden">
+              <div class="truncate whitespace-nowrap text-xs text-gray-600">Tool Calls</div>
+              <div class="text-lg font-semibold text-gray-900">${stats.toolCalls}</div>
+            </div>
+            <div class="rounded-md bg-gray-50 px-3 py-2 overflow-hidden">
+              <div class="truncate whitespace-nowrap text-xs text-gray-600">Errors</div>
+              <div class="text-lg font-semibold text-gray-900">${stats.errors}</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Current State Section -->
+        <div class="rounded-lg border border-gray-200 bg-white">
+          <div class="border-b border-gray-200 px-4 py-3">
+            <h4 class="text-sm font-semibold text-gray-900">Current State</h4>
+          </div>
+          <div class="overflow-auto p-4">
+            ${this.hasRenderableState(state) ? html`
+                  <pre class="overflow-auto rounded-md bg-gray-50 p-3 text-xs text-gray-800 max-h-64"><code>${this.formatStateForDisplay(state)}</code></pre>
+                ` : html`
+                  <div class="flex h-40 items-center justify-center text-xs text-gray-500">
+                    <div class="flex items-center gap-2 text-gray-500">
+                      <span class="text-lg text-gray-400">${this.renderIcon("Database")}</span>
+                      <span>State is empty</span>
+                    </div>
+                  </div>
+                `}
+          </div>
+        </div>
+
+        <!-- Current Messages Section -->
+        <div class="rounded-lg border border-gray-200 bg-white">
+          <div class="border-b border-gray-200 px-4 py-3">
+            <h4 class="text-sm font-semibold text-gray-900">Current Messages</h4>
+          </div>
+          <div class="overflow-auto">
+            ${messages && Array.isArray(messages) && messages.length > 0 ? html`
+                  <table class="w-full text-xs">
+                    <thead class="bg-gray-50">
+                      <tr>
+                        <th class="px-4 py-2 text-left font-medium text-gray-700">Role</th>
+                        <th class="px-4 py-2 text-left font-medium text-gray-700">Content</th>
+                      </tr>
+                    </thead>
+                    <tbody class="divide-y divide-gray-200">
+                      ${messages.map((msg, idx) => {
+      const role = msg?.role ?? "unknown";
+      const roleColors = {
+        user: "bg-blue-100 text-blue-800",
+        assistant: "bg-green-100 text-green-800",
+        system: "bg-gray-100 text-gray-800",
+        unknown: "bg-gray-100 text-gray-600"
+      };
+      const rawContent = typeof msg?.content === "string" ? msg.content : msg?.content != null ? JSON.stringify(msg.content) : "";
+      const toolCalls = Array.isArray(msg?.toolCalls) ? msg.toolCalls : [];
+      const hasContent = rawContent.trim().length > 0;
+      const contentFallback = toolCalls.length > 0 ? "Invoked tool call" : "\u2014";
+      return html`
+                          <tr>
+                            <td class="px-4 py-2 align-top">
+                              <span class="inline-flex rounded px-2 py-0.5 text-[10px] font-medium ${roleColors[role] || roleColors.unknown}">
+                                ${role}
+                              </span>
+                            </td>
+                            <td class="px-4 py-2">
+                              ${hasContent ? html`<div class="max-w-2xl whitespace-pre-wrap break-words text-gray-700">${rawContent}</div>` : html`<div class="text-xs italic text-gray-400">${contentFallback}</div>`}
+                              ${role === "assistant" && toolCalls.length > 0 ? this.renderToolCallDetails(toolCalls) : nothing}
+                            </td>
+                          </tr>
+                        `;
+    })}
+                    </tbody>
+                  </table>
+                ` : html`
+                  <div class="flex h-40 items-center justify-center text-xs text-gray-500">
+                    <div class="flex items-center gap-2 text-gray-500">
+                      <span class="text-lg text-gray-400">${this.renderIcon("MessageSquare")}</span>
+                      <span>No messages available</span>
+                    </div>
+                  </div>
+                `}
+          </div>
+        </div>
+      </div>
+    `;
+  }
   renderContextDropdown() {
-    if (this.selectedMenu !== "ag-ui-events") {
+    if (this.selectedMenu === "agent-context") {
       return nothing;
     }
-    const selectedLabel = this.contextOptions.find((opt) => opt.key === this.selectedContext)?.label ?? "";
+    if (this.selectedMenu !== "ag-ui-events" && this.selectedMenu !== "agents" && this.selectedMenu !== "frontend-tools") {
+      return nothing;
+    }
+    const filteredOptions = this.selectedMenu === "agents" ? this.contextOptions.filter((opt) => opt.key !== "all-agents") : this.contextOptions;
+    const selectedLabel = filteredOptions.find((opt) => opt.key === this.selectedContext)?.label ?? "";
     return html`
-      <div class="relative" data-context-dropdown-root="true">
+      <div class="relative min-w-0 flex-1" data-context-dropdown-root="true">
         <button
           type="button"
-          class="flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium text-gray-600 transition hover:bg-gray-100 hover:text-gray-900"
+          class="flex w-full min-w-0 max-w-[150px] items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium text-gray-600 transition hover:bg-gray-100 hover:text-gray-900"
           @pointerdown=${this.handleContextDropdownToggle}
         >
-          <span>${selectedLabel}</span>
-          <span class="text-gray-400">${this.renderIcon("ChevronDown")}</span>
+          <span class="truncate flex-1 text-left">${selectedLabel}</span>
+          <span class="shrink-0 text-gray-400">${this.renderIcon("ChevronDown")}</span>
         </button>
         ${this.contextMenuOpen ? html`
               <div
                 class="absolute left-0 z-50 mt-1.5 w-40 rounded-md border border-gray-200 bg-white py-1 shadow-md ring-1 ring-black/5"
                 data-context-dropdown-root="true"
               >
-                ${this.contextOptions.map(
+                ${filteredOptions.map(
       (option) => html`
                     <button
                       type="button"
@@ -1147,7 +1851,7 @@ var WebInspectorElement = class extends LitElement {
                       data-context-dropdown-root="true"
                       @click=${() => this.handleContextOptionSelect(option.key)}
                     >
-                      <span class="${option.key === this.selectedContext ? "text-gray-900 font-medium" : "text-gray-600"}">${option.label}</span>
+                      <span class="truncate ${option.key === this.selectedContext ? "text-gray-900 font-medium" : "text-gray-600"}">${option.label}</span>
                       ${option.key === this.selectedContext ? html`<span class="text-gray-500">${this.renderIcon("Check")}</span>` : nothing}
                     </button>
                   `
@@ -1162,7 +1866,15 @@ var WebInspectorElement = class extends LitElement {
       return;
     }
     this.selectedMenu = key;
+    if (key === "agents" && this.selectedContext === "all-agents") {
+      const agentOptions = this.contextOptions.filter((opt) => opt.key !== "all-agents");
+      if (agentOptions.length > 0) {
+        const defaultAgent = agentOptions.find((opt) => opt.key === "default");
+        this.selectedContext = defaultAgent ? defaultAgent.key : agentOptions[0].key;
+      }
+    }
     this.contextMenuOpen = false;
+    this.persistState();
     this.requestUpdate();
   }
   handleContextDropdownToggle(event) {
@@ -1180,9 +1892,397 @@ var WebInspectorElement = class extends LitElement {
       this.expandedRows.clear();
     }
     this.contextMenuOpen = false;
+    this.persistState();
+    this.requestUpdate();
+  }
+  renderToolsView() {
+    if (!this._core) {
+      return html`
+        <div class="flex h-full items-center justify-center px-4 py-8 text-xs text-gray-500">
+          No core instance available
+        </div>
+      `;
+    }
+    const allTools = this.extractToolsFromAgents();
+    if (allTools.length === 0) {
+      return html`
+        <div class="flex h-full items-center justify-center px-4 py-8 text-center">
+          <div class="max-w-md">
+            <div class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8">
+              ${this.renderIcon("Hammer")}
+            </div>
+            <p class="text-sm text-gray-600">No tools available</p>
+            <p class="mt-2 text-xs text-gray-500">Tools will appear here once agents are configured with tool handlers or renderers.</p>
+          </div>
+        </div>
+      `;
+    }
+    const filteredTools = this.selectedContext === "all-agents" ? allTools : allTools.filter((tool) => tool.agentId === this.selectedContext);
+    return html`
+      <div class="flex h-full flex-col overflow-hidden">
+        <div class="overflow-auto p-4">
+          <div class="space-y-3">
+            ${filteredTools.map((tool) => this.renderToolCard(tool))}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  extractToolsFromAgents() {
+    if (!this._core) {
+      return [];
+    }
+    const tools = [];
+    for (const [agentId, agent] of Object.entries(this._core.agents)) {
+      if (!agent) continue;
+      const handlers = agent.toolHandlers;
+      if (handlers && typeof handlers === "object") {
+        for (const [toolName, handler] of Object.entries(handlers)) {
+          if (handler && typeof handler === "object") {
+            const handlerObj = handler;
+            tools.push({
+              agentId,
+              name: toolName,
+              description: handlerObj.description || handlerObj.tool?.description,
+              parameters: handlerObj.parameters || handlerObj.tool?.parameters,
+              type: "handler"
+            });
+          }
+        }
+      }
+      const renderers = agent.toolRenderers;
+      if (renderers && typeof renderers === "object") {
+        for (const [toolName, renderer] of Object.entries(renderers)) {
+          if (!tools.some((t) => t.agentId === agentId && t.name === toolName)) {
+            if (renderer && typeof renderer === "object") {
+              const rendererObj = renderer;
+              tools.push({
+                agentId,
+                name: toolName,
+                description: rendererObj.description || rendererObj.tool?.description,
+                parameters: rendererObj.parameters || rendererObj.tool?.parameters,
+                type: "renderer"
+              });
+            }
+          }
+        }
+      }
+    }
+    return tools.sort((a, b) => {
+      const agentCompare = a.agentId.localeCompare(b.agentId);
+      if (agentCompare !== 0) return agentCompare;
+      return a.name.localeCompare(b.name);
+    });
+  }
+  renderToolCard(tool) {
+    const isExpanded = this.expandedTools.has(`${tool.agentId}:${tool.name}`);
+    const schema = this.extractSchemaInfo(tool.parameters);
+    const typeColors = {
+      handler: "bg-blue-50 text-blue-700 border-blue-200",
+      renderer: "bg-purple-50 text-purple-700 border-purple-200"
+    };
+    return html`
+      <div class="rounded-lg border border-gray-200 bg-white overflow-hidden">
+        <button
+          type="button"
+          class="w-full px-4 py-3 text-left transition hover:bg-gray-50"
+          @click=${() => this.toggleToolExpansion(`${tool.agentId}:${tool.name}`)}
+        >
+          <div class="flex items-start justify-between gap-3">
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-2 mb-1">
+                <span class="font-mono text-sm font-semibold text-gray-900">${tool.name}</span>
+                <span class="inline-flex items-center rounded-sm border px-1.5 py-0.5 text-[10px] font-medium ${typeColors[tool.type]}">
+                  ${tool.type}
+                </span>
+              </div>
+              <div class="flex items-center gap-2 text-xs text-gray-500">
+                <span class="flex items-center gap-1">
+                  ${this.renderIcon("Bot")}
+                  <span class="font-mono">${tool.agentId}</span>
+                </span>
+                ${schema.properties.length > 0 ? html`
+                      <span class="text-gray-300">•</span>
+                      <span>${schema.properties.length} parameter${schema.properties.length !== 1 ? "s" : ""}</span>
+                    ` : nothing}
+              </div>
+              ${tool.description ? html`<p class="mt-2 text-xs text-gray-600">${tool.description}</p>` : nothing}
+            </div>
+            <span class="shrink-0 text-gray-400 transition ${isExpanded ? "rotate-180" : ""}">
+              ${this.renderIcon("ChevronDown")}
+            </span>
+          </div>
+        </button>
+
+        ${isExpanded ? html`
+              <div class="border-t border-gray-200 bg-gray-50/50 px-4 py-3">
+                ${schema.properties.length > 0 ? html`
+                      <h5 class="mb-3 text-xs font-semibold text-gray-700">Parameters</h5>
+                      <div class="space-y-3">
+                        ${schema.properties.map((prop) => html`
+                          <div class="rounded-md border border-gray-200 bg-white p-3">
+                            <div class="flex items-start justify-between gap-2 mb-1">
+                              <span class="font-mono text-xs font-medium text-gray-900">${prop.name}</span>
+                              <div class="flex items-center gap-1.5 shrink-0">
+                                ${prop.required ? html`<span class="text-[9px] rounded border border-rose-200 bg-rose-50 px-1 py-0.5 font-medium text-rose-700">required</span>` : html`<span class="text-[9px] rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-medium text-gray-600">optional</span>`}
+                                ${prop.type ? html`<span class="text-[9px] rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-mono text-gray-600">${prop.type}</span>` : nothing}
+                              </div>
+                            </div>
+                            ${prop.description ? html`<p class="mt-1 text-xs text-gray-600">${prop.description}</p>` : nothing}
+                            ${prop.defaultValue !== void 0 ? html`
+                                  <div class="mt-2 flex items-center gap-1.5 text-[10px] text-gray-500">
+                                    <span>Default:</span>
+                                    <code class="rounded bg-gray-100 px-1 py-0.5 font-mono">${JSON.stringify(prop.defaultValue)}</code>
+                                  </div>
+                                ` : nothing}
+                            ${prop.enum && prop.enum.length > 0 ? html`
+                                  <div class="mt-2">
+                                    <span class="text-[10px] text-gray-500">Allowed values:</span>
+                                    <div class="mt-1 flex flex-wrap gap-1">
+                                      ${prop.enum.map((val) => html`
+                                        <code class="rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 text-[10px] font-mono text-gray-700">${JSON.stringify(val)}</code>
+                                      `)}
+                                    </div>
+                                  </div>
+                                ` : nothing}
+                          </div>
+                        `)}
+                      </div>
+                    ` : html`
+                      <div class="flex items-center justify-center py-4 text-xs text-gray-500">
+                        <span>No parameters defined</span>
+                      </div>
+                    `}
+              </div>
+            ` : nothing}
+      </div>
+    `;
+  }
+  extractSchemaInfo(parameters) {
+    const result = { properties: [] };
+    if (!parameters || typeof parameters !== "object") {
+      return result;
+    }
+    const zodDef = parameters._def;
+    if (zodDef) {
+      if (zodDef.typeName === "ZodObject") {
+        const shape = zodDef.shape?.() || zodDef.shape;
+        const requiredKeys = /* @__PURE__ */ new Set();
+        if (zodDef.unknownKeys === "strict" || !zodDef.catchall) {
+          Object.keys(shape || {}).forEach((key) => {
+            const fieldDef = shape[key]?._def;
+            if (fieldDef && !this.isZodOptional(shape[key])) {
+              requiredKeys.add(key);
+            }
+          });
+        }
+        for (const [key, value] of Object.entries(shape || {})) {
+          const fieldInfo = this.extractZodFieldInfo(value);
+          result.properties.push({
+            name: key,
+            type: fieldInfo.type,
+            description: fieldInfo.description,
+            required: requiredKeys.has(key),
+            defaultValue: fieldInfo.defaultValue,
+            enum: fieldInfo.enum
+          });
+        }
+      }
+    } else if (parameters.type === "object" && parameters.properties) {
+      const props = parameters.properties;
+      const required = new Set(parameters.required || []);
+      for (const [key, value] of Object.entries(props)) {
+        const prop = value;
+        result.properties.push({
+          name: key,
+          type: prop.type,
+          description: prop.description,
+          required: required.has(key),
+          defaultValue: prop.default,
+          enum: prop.enum
+        });
+      }
+    }
+    return result;
+  }
+  isZodOptional(zodSchema) {
+    if (!zodSchema?._def) return false;
+    const def = zodSchema._def;
+    if (def.typeName === "ZodOptional" || def.typeName === "ZodNullable") {
+      return true;
+    }
+    if (def.defaultValue !== void 0) {
+      return true;
+    }
+    return false;
+  }
+  extractZodFieldInfo(zodSchema) {
+    const info = {};
+    if (!zodSchema?._def) return info;
+    let currentSchema = zodSchema;
+    let def = currentSchema._def;
+    while (def.typeName === "ZodOptional" || def.typeName === "ZodNullable" || def.typeName === "ZodDefault") {
+      if (def.typeName === "ZodDefault" && def.defaultValue !== void 0) {
+        info.defaultValue = typeof def.defaultValue === "function" ? def.defaultValue() : def.defaultValue;
+      }
+      currentSchema = def.innerType;
+      if (!currentSchema?._def) break;
+      def = currentSchema._def;
+    }
+    info.description = def.description;
+    const typeMap = {
+      ZodString: "string",
+      ZodNumber: "number",
+      ZodBoolean: "boolean",
+      ZodArray: "array",
+      ZodObject: "object",
+      ZodEnum: "enum",
+      ZodLiteral: "literal",
+      ZodUnion: "union",
+      ZodAny: "any",
+      ZodUnknown: "unknown"
+    };
+    info.type = typeMap[def.typeName] || def.typeName?.replace("Zod", "").toLowerCase();
+    if (def.typeName === "ZodEnum" && Array.isArray(def.values)) {
+      info.enum = def.values;
+    } else if (def.typeName === "ZodLiteral" && def.value !== void 0) {
+      info.enum = [def.value];
+    }
+    return info;
+  }
+  toggleToolExpansion(toolId) {
+    if (this.expandedTools.has(toolId)) {
+      this.expandedTools.delete(toolId);
+    } else {
+      this.expandedTools.add(toolId);
+    }
+    this.requestUpdate();
+  }
+  renderContextView() {
+    const contextEntries = Object.entries(this.contextStore);
+    if (contextEntries.length === 0) {
+      return html`
+        <div class="flex h-full items-center justify-center px-4 py-8 text-center">
+          <div class="max-w-md">
+            <div class="mb-3 flex justify-center text-gray-300 [&>svg]:!h-8 [&>svg]:!w-8">
+              ${this.renderIcon("FileText")}
+            </div>
+            <p class="text-sm text-gray-600">No context available</p>
+            <p class="mt-2 text-xs text-gray-500">Context will appear here once added to CopilotKit.</p>
+          </div>
+        </div>
+      `;
+    }
+    return html`
+      <div class="flex h-full flex-col overflow-hidden">
+        <div class="overflow-auto p-4">
+          <div class="space-y-3">
+            ${contextEntries.map(([id, context]) => this.renderContextCard(id, context))}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  renderContextCard(id, context) {
+    const isExpanded = this.expandedContextItems.has(id);
+    const valuePreview = this.getContextValuePreview(context.value);
+    const hasValue = context.value !== void 0 && context.value !== null;
+    return html`
+      <div class="rounded-lg border border-gray-200 bg-white overflow-hidden">
+        <button
+          type="button"
+          class="w-full px-4 py-3 text-left transition hover:bg-gray-50"
+          @click=${() => this.toggleContextExpansion(id)}
+        >
+          <div class="flex items-start justify-between gap-3">
+            <div class="flex-1 min-w-0">
+              ${context.description ? html`<p class="text-sm font-medium text-gray-900 mb-1">${context.description}</p>` : html`<p class="text-sm font-medium text-gray-500 italic mb-1">No description</p>`}
+              <div class="flex items-center gap-2 text-xs text-gray-500">
+                <span class="font-mono">${id.substring(0, 8)}...</span>
+                ${hasValue ? html`
+                      <span class="text-gray-300">•</span>
+                      <span class="truncate">${valuePreview}</span>
+                    ` : nothing}
+              </div>
+            </div>
+            <span class="shrink-0 text-gray-400 transition ${isExpanded ? "rotate-180" : ""}">
+              ${this.renderIcon("ChevronDown")}
+            </span>
+          </div>
+        </button>
+
+        ${isExpanded ? html`
+              <div class="border-t border-gray-200 bg-gray-50/50 px-4 py-3">
+                <div class="mb-3">
+                  <h5 class="mb-1 text-xs font-semibold text-gray-700">ID</h5>
+                  <code class="block rounded bg-white border border-gray-200 px-2 py-1 text-[10px] font-mono text-gray-600">${id}</code>
+                </div>
+                ${hasValue ? html`
+                      <h5 class="mb-2 text-xs font-semibold text-gray-700">Value</h5>
+                      <div class="rounded-md border border-gray-200 bg-white p-3">
+                        <pre class="overflow-auto text-xs text-gray-800 max-h-96"><code>${this.formatContextValue(context.value)}</code></pre>
+                      </div>
+                    ` : html`
+                      <div class="flex items-center justify-center py-4 text-xs text-gray-500">
+                        <span>No value available</span>
+                      </div>
+                    `}
+              </div>
+            ` : nothing}
+      </div>
+    `;
+  }
+  getContextValuePreview(value) {
+    if (value === void 0 || value === null) {
+      return "\u2014";
+    }
+    if (typeof value === "string") {
+      return value.length > 50 ? `${value.substring(0, 50)}...` : value;
+    }
+    if (typeof value === "number" || typeof value === "boolean") {
+      return String(value);
+    }
+    if (Array.isArray(value)) {
+      return `Array(${value.length})`;
+    }
+    if (typeof value === "object") {
+      const keys = Object.keys(value);
+      return `Object with ${keys.length} key${keys.length !== 1 ? "s" : ""}`;
+    }
+    if (typeof value === "function") {
+      return "Function";
+    }
+    return String(value);
+  }
+  formatContextValue(value) {
+    if (value === void 0) {
+      return "undefined";
+    }
+    if (value === null) {
+      return "null";
+    }
+    if (typeof value === "function") {
+      return value.toString();
+    }
+    try {
+      return JSON.stringify(value, null, 2);
+    } catch (error) {
+      return String(value);
+    }
+  }
+  toggleContextExpansion(contextId) {
+    if (this.expandedContextItems.has(contextId)) {
+      this.expandedContextItems.delete(contextId);
+    } else {
+      this.expandedContextItems.add(contextId);
+    }
     this.requestUpdate();
   }
   toggleRowExpansion(eventId) {
+    const selection = window.getSelection();
+    if (selection && selection.toString().length > 0) {
+      return;
+    }
     if (this.expandedRows.has(eventId)) {
       this.expandedRows.delete(eventId);
     } else {