@copilotkit/web-inspector 1.66.4 → 1.67.1

package/dist/index.umd.js

@@ -1,12 +1,12 @@
 (function(global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('lit'), require('marked'), require('lit/directives/style-map.js'), require('lit/directives/unsafe-html.js'), require('lucide'), require('@copilotkit/core')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'lit', 'marked', 'lit/directives/style-map.js', 'lit/directives/unsafe-html.js', 'lucide', '@copilotkit/core'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitWebInspector = {}), global.Lit,global.marked,global.LitDirectivesStyleMap,global.LitDirectivesUnsafeHtml,global.lucide,global.CopilotKitCore));
-})(this, function(exports, lit, marked, lit_directives_style_map_js, lit_directives_unsafe_html_js, lucide, _copilotkit_core) {
+  typeof exports === 'object' && typeof module !== 'undefined' ?  factory(exports, require('lit'), require('marked'), require('lit/directives/style-map.js'), require('lit/directives/unsafe-html.js'), require('lucide'), require('@copilotkit/core'), require('@copilotkit/shared')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'lit', 'marked', 'lit/directives/style-map.js', 'lit/directives/unsafe-html.js', 'lucide', '@copilotkit/core', '@copilotkit/shared'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitWebInspector = {}), global.Lit,global.marked,global.LitDirectivesStyleMap,global.LitDirectivesUnsafeHtml,global.lucide,global.CopilotKitCore,global.CopilotKitShared));
+})(this, function(exports, lit, marked, lit_directives_style_map_js, lit_directives_unsafe_html_js, lucide, _copilotkit_core, _copilotkit_shared) {
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 //#region src/styles/generated.css
-	var generated_default = "/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--color-amber-50:oklch(98.7% .022 95.277);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-700:oklch(55.5% .163 48.998);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-900:oklch(41.4% .112 45.904);--color-green-100:oklch(96.2% .044 156.743);--color-green-700:oklch(52.7% .154 150.069);--color-green-800:oklch(44.8% .119 151.328);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-700:oklch(50.8% .118 165.612);--color-sky-50:oklch(97.7% .013 236.62);--color-sky-200:oklch(90.1% .058 230.902);--color-sky-700:oklch(50% .134 242.749);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-violet-50:oklch(96.9% .016 293.756);--color-violet-200:oklch(89.4% .057 293.283);--color-violet-700:oklch(49.1% .27 292.581);--color-purple-50:oklch(97.7% .014 308.299);--color-purple-200:oklch(90.2% .063 306.703);--color-purple-700:oklch(49.6% .265 301.924);--color-fuchsia-50:oklch(97.7% .017 320.058);--color-fuchsia-200:oklch(90.3% .076 319.62);--color-fuchsia-700:oklch(51.8% .253 323.949);--color-rose-50:oklch(96.9% .015 12.422);--color-rose-200:oklch(89.2% .058 10.001);--color-rose-500:oklch(64.5% .246 16.439);--color-rose-700:oklch(51.4% .222 16.935);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-slate-950:oklch(12.9% .042 264.695);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-md:28rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-medium:500;--font-weight-semibold:600;--leading-snug:1.375;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--blur-sm:8px;--blur-md:12px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:host{font-family:var(--font-sans);color:var(--color-slate-900);background-color:#0000;display:block}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-0{top:calc(var(--spacing)*0)}.right-0{right:calc(var(--spacing)*0)}.right-1{right:calc(var(--spacing)*1)}.bottom-1{bottom:calc(var(--spacing)*1)}.left-0{left:calc(var(--spacing)*0)}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:calc(var(--spacing)*0)}.mx-4{margin-inline:calc(var(--spacing)*4)}.my-1{margin-block:calc(var(--spacing)*1)}.my-3{margin-block:calc(var(--spacing)*3)}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-1\\.5{margin-top:calc(var(--spacing)*1.5)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.ml-auto{margin-left:auto}.box-border{box-sizing:border-box}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-1\\.5{height:calc(var(--spacing)*1.5)}.h-3{height:calc(var(--spacing)*3)}.h-3\\.5{height:calc(var(--spacing)*3.5)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-full{height:100%}.max-h-64{max-height:calc(var(--spacing)*64)}.w-1\\.5{width:calc(var(--spacing)*1.5)}.w-3{width:calc(var(--spacing)*3)}.w-3\\.5{width:calc(var(--spacing)*3.5)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-9{width:calc(var(--spacing)*9)}.w-10{width:calc(var(--spacing)*10)}.w-12{width:calc(var(--spacing)*12)}.w-40{width:calc(var(--spacing)*40)}.w-auto{width:auto}.w-full{width:100%}.max-w-\\[240px\\]{max-width:240px}.max-w-md{max-width:var(--container-md)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\\[160px\\]{min-width:160px}.min-w-\\[200px\\]{min-width:200px}.flex-1{flex:1}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.table-fixed{table-layout:fixed}.border-collapse{border-collapse:collapse}.translate-x-0\\.5{--tw-translate-x:calc(var(--spacing)*.5);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-4{--tw-translate-x:calc(var(--spacing)*4);translate:var(--tw-translate-x)var(--tw-translate-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-1{gap:calc(var(--spacing)*1)}.gap-1\\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-gray-200>:not(:last-child)){border-color:var(--color-gray-200)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-amber-200{border-color:var(--color-amber-200)}.border-blue-200{border-color:var(--color-blue-200)}.border-emerald-200{border-color:var(--color-emerald-200)}.border-fuchsia-200{border-color:var(--color-fuchsia-200)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-purple-200{border-color:var(--color-purple-200)}.border-rose-200{border-color:var(--color-rose-200)}.border-sky-200{border-color:var(--color-sky-200)}.border-slate-200{border-color:var(--color-slate-200)}.border-violet-200{border-color:var(--color-violet-200)}.border-white\\/20{border-color:#fff3}@supports (color:color-mix(in lab, red, red)){.border-white\\/20{border-color:color-mix(in oklab,var(--color-white)20%,transparent)}}.bg-amber-50{background-color:var(--color-amber-50)}.bg-amber-100{background-color:var(--color-amber-100)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-emerald-50{background-color:var(--color-emerald-50)}.bg-emerald-500{background-color:var(--color-emerald-500)}.bg-fuchsia-50{background-color:var(--color-fuchsia-50)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-50\\/50{background-color:#f9fafb80}@supports (color:color-mix(in lab, red, red)){.bg-gray-50\\/50{background-color:color-mix(in oklab,var(--color-gray-50)50%,transparent)}}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-400{background-color:var(--color-gray-400)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-100{background-color:var(--color-green-100)}.bg-purple-50{background-color:var(--color-purple-50)}.bg-rose-50{background-color:var(--color-rose-50)}.bg-rose-500{background-color:var(--color-rose-500)}.bg-sky-50{background-color:var(--color-sky-50)}.bg-slate-900{background-color:var(--color-slate-900)}.bg-slate-950\\/95{background-color:#020618f2}@supports (color:color-mix(in lab, red, red)){.bg-slate-950\\/95{background-color:color-mix(in oklab,var(--color-slate-950)95%,transparent)}}.bg-violet-50{background-color:var(--color-violet-50)}.bg-white{background-color:var(--color-white)}.bg-white\\/60{background-color:#fff9}@supports (color:color-mix(in lab, red, red)){.bg-white\\/60{background-color:color-mix(in oklab,var(--color-white)60%,transparent)}}.bg-white\\/95{background-color:#fffffff2}@supports (color:color-mix(in lab, red, red)){.bg-white\\/95{background-color:color-mix(in oklab,var(--color-white)95%,transparent)}}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-1\\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-0\\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-8{padding-block:calc(var(--spacing)*8)}.py-10{padding-block:calc(var(--spacing)*10)}.text-center{text-align:center}.text-left{text-align:left}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-mono)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[9px\\]{font-size:9px}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.whitespace-pre-wrap{white-space:pre-wrap}.text-amber-600{color:var(--color-amber-600)}.text-amber-700{color:var(--color-amber-700)}.text-amber-800{color:var(--color-amber-800)}.text-amber-900{color:var(--color-amber-900)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-emerald-700{color:var(--color-emerald-700)}.text-fuchsia-700{color:var(--color-fuchsia-700)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-green-700{color:var(--color-green-700)}.text-green-800{color:var(--color-green-800)}.text-purple-700{color:var(--color-purple-700)}.text-rose-700{color:var(--color-rose-700)}.text-sky-700{color:var(--color-sky-700)}.text-slate-500{color:var(--color-slate-500)}.text-slate-700{color:var(--color-slate-700)}.text-slate-800{color:var(--color-slate-800)}.text-slate-900{color:var(--color-slate-900)}.text-violet-700{color:var(--color-violet-700)}.text-white{color:var(--color-white)}.italic{font-style:italic}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-black\\/5{--tw-ring-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.ring-black\\/5{--tw-ring-color:color-mix(in oklab,var(--color-black)5%,transparent)}}.ring-transparent{--tw-ring-color:transparent}.ring-white\\/10{--tw-ring-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.ring-white\\/10{--tw-ring-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\\:opacity-100:is(:where(.group):hover *){opacity:1}.hover\\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\\:border-gray-300:hover{border-color:var(--color-gray-300)}.hover\\:border-white\\/30:hover{border-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.hover\\:border-white\\/30:hover{border-color:color-mix(in oklab,var(--color-white)30%,transparent)}}.hover\\:bg-blue-50\\/50:hover{background-color:#eff6ff80}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-blue-50\\/50:hover{background-color:color-mix(in oklab,var(--color-blue-50)50%,transparent)}}.hover\\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\\:bg-gray-800:hover{background-color:var(--color-gray-800)}.hover\\:bg-slate-900\\/95:hover{background-color:#0f172bf2}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-slate-900\\/95:hover{background-color:color-mix(in oklab,var(--color-slate-900)95%,transparent)}}.hover\\:text-gray-600:hover{color:var(--color-gray-600)}.hover\\:text-gray-900:hover{color:var(--color-gray-900)}.hover\\:text-slate-900:hover{color:var(--color-slate-900)}}.focus\\:border-gray-300:focus{border-color:var(--color-gray-300)}.focus\\:bg-gray-50:focus{background-color:var(--color-gray-50)}.focus\\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\\:ring-gray-200:focus{--tw-ring-color:var(--color-gray-200)}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\\:outline-\\[\\#BEC2FF\\]:focus-visible{outline-color:#bec2ff}.focus-visible\\:outline-gray-300:focus-visible{outline-color:var(--color-gray-300)}.focus-visible\\:outline-gray-400:focus-visible{outline-color:var(--color-gray-400)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}@media (min-width:48rem){.md\\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.\\[\\&\\>svg\\]\\:\\!h-8>svg{height:calc(var(--spacing)*8)!important}.\\[\\&\\>svg\\]\\:\\!w-8>svg{width:calc(var(--spacing)*8)!important}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-space-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-blur{syntax:\"*\";inherits:false}@property --tw-brightness{syntax:\"*\";inherits:false}@property --tw-contrast{syntax:\"*\";inherits:false}@property --tw-grayscale{syntax:\"*\";inherits:false}@property --tw-hue-rotate{syntax:\"*\";inherits:false}@property --tw-invert{syntax:\"*\";inherits:false}@property --tw-opacity{syntax:\"*\";inherits:false}@property --tw-saturate{syntax:\"*\";inherits:false}@property --tw-sepia{syntax:\"*\";inherits:false}@property --tw-drop-shadow{syntax:\"*\";inherits:false}@property --tw-drop-shadow-color{syntax:\"*\";inherits:false}@property --tw-drop-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:\"*\";inherits:false}@property --tw-backdrop-blur{syntax:\"*\";inherits:false}@property --tw-backdrop-brightness{syntax:\"*\";inherits:false}@property --tw-backdrop-contrast{syntax:\"*\";inherits:false}@property --tw-backdrop-grayscale{syntax:\"*\";inherits:false}@property --tw-backdrop-hue-rotate{syntax:\"*\";inherits:false}@property --tw-backdrop-invert{syntax:\"*\";inherits:false}@property --tw-backdrop-opacity{syntax:\"*\";inherits:false}@property --tw-backdrop-saturate{syntax:\"*\";inherits:false}@property --tw-backdrop-sepia{syntax:\"*\";inherits:false}@property --tw-scale-x{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-y{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-z{syntax:\"*\";inherits:false;initial-value:1}@keyframes pulse{50%{opacity:.5}}";
+	var generated_default = "/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--color-amber-50:oklch(98.7% .022 95.277);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-700:oklch(55.5% .163 48.998);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-900:oklch(41.4% .112 45.904);--color-green-100:oklch(96.2% .044 156.743);--color-green-700:oklch(52.7% .154 150.069);--color-green-800:oklch(44.8% .119 151.328);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-700:oklch(50.8% .118 165.612);--color-sky-50:oklch(97.7% .013 236.62);--color-sky-200:oklch(90.1% .058 230.902);--color-sky-700:oklch(50% .134 242.749);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-violet-50:oklch(96.9% .016 293.756);--color-violet-200:oklch(89.4% .057 293.283);--color-violet-700:oklch(49.1% .27 292.581);--color-purple-50:oklch(97.7% .014 308.299);--color-purple-200:oklch(90.2% .063 306.703);--color-purple-700:oklch(49.6% .265 301.924);--color-fuchsia-50:oklch(97.7% .017 320.058);--color-fuchsia-200:oklch(90.3% .076 319.62);--color-fuchsia-700:oklch(51.8% .253 323.949);--color-rose-50:oklch(96.9% .015 12.422);--color-rose-200:oklch(89.2% .058 10.001);--color-rose-500:oklch(64.5% .246 16.439);--color-rose-700:oklch(51.4% .222 16.935);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-slate-950:oklch(12.9% .042 264.695);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-md:28rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-medium:500;--font-weight-semibold:600;--leading-snug:1.375;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--blur-sm:8px;--blur-md:12px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:host{font-family:var(--font-sans);color:var(--color-slate-900);background-color:#0000;display:block}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-0{top:calc(var(--spacing)*0)}.right-0{right:calc(var(--spacing)*0)}.right-1{right:calc(var(--spacing)*1)}.bottom-1{bottom:calc(var(--spacing)*1)}.left-0{left:calc(var(--spacing)*0)}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:calc(var(--spacing)*0)}.mx-4{margin-inline:calc(var(--spacing)*4)}.my-1{margin-block:calc(var(--spacing)*1)}.my-3{margin-block:calc(var(--spacing)*3)}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-1\\.5{margin-top:calc(var(--spacing)*1.5)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.ml-auto{margin-left:auto}.box-border{box-sizing:border-box}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-1\\.5{height:calc(var(--spacing)*1.5)}.h-3{height:calc(var(--spacing)*3)}.h-3\\.5{height:calc(var(--spacing)*3.5)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-full{height:100%}.max-h-64{max-height:calc(var(--spacing)*64)}.w-1\\.5{width:calc(var(--spacing)*1.5)}.w-3{width:calc(var(--spacing)*3)}.w-3\\.5{width:calc(var(--spacing)*3.5)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-9{width:calc(var(--spacing)*9)}.w-10{width:calc(var(--spacing)*10)}.w-12{width:calc(var(--spacing)*12)}.w-40{width:calc(var(--spacing)*40)}.w-auto{width:auto}.w-full{width:100%}.max-w-\\[240px\\]{max-width:240px}.max-w-md{max-width:var(--container-md)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\\[160px\\]{min-width:160px}.min-w-\\[200px\\]{min-width:200px}.flex-1{flex:1}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.table-fixed{table-layout:fixed}.border-collapse{border-collapse:collapse}.translate-x-0\\.5{--tw-translate-x:calc(var(--spacing)*.5);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-4{--tw-translate-x:calc(var(--spacing)*4);translate:var(--tw-translate-x)var(--tw-translate-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-1{gap:calc(var(--spacing)*1)}.gap-1\\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-gray-200>:not(:last-child)){border-color:var(--color-gray-200)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-amber-200{border-color:var(--color-amber-200)}.border-blue-200{border-color:var(--color-blue-200)}.border-emerald-200{border-color:var(--color-emerald-200)}.border-fuchsia-200{border-color:var(--color-fuchsia-200)}.border-gray-200{border-color:var(--color-gray-200)}.border-purple-200{border-color:var(--color-purple-200)}.border-rose-200{border-color:var(--color-rose-200)}.border-sky-200{border-color:var(--color-sky-200)}.border-slate-200{border-color:var(--color-slate-200)}.border-violet-200{border-color:var(--color-violet-200)}.border-white\\/20{border-color:#fff3}@supports (color:color-mix(in lab, red, red)){.border-white\\/20{border-color:color-mix(in oklab,var(--color-white)20%,transparent)}}.bg-amber-50{background-color:var(--color-amber-50)}.bg-amber-100{background-color:var(--color-amber-100)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-emerald-50{background-color:var(--color-emerald-50)}.bg-emerald-500{background-color:var(--color-emerald-500)}.bg-fuchsia-50{background-color:var(--color-fuchsia-50)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-50\\/50{background-color:#f9fafb80}@supports (color:color-mix(in lab, red, red)){.bg-gray-50\\/50{background-color:color-mix(in oklab,var(--color-gray-50)50%,transparent)}}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-400{background-color:var(--color-gray-400)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-100{background-color:var(--color-green-100)}.bg-purple-50{background-color:var(--color-purple-50)}.bg-rose-50{background-color:var(--color-rose-50)}.bg-rose-500{background-color:var(--color-rose-500)}.bg-sky-50{background-color:var(--color-sky-50)}.bg-slate-900{background-color:var(--color-slate-900)}.bg-slate-950\\/95{background-color:#020618f2}@supports (color:color-mix(in lab, red, red)){.bg-slate-950\\/95{background-color:color-mix(in oklab,var(--color-slate-950)95%,transparent)}}.bg-violet-50{background-color:var(--color-violet-50)}.bg-white{background-color:var(--color-white)}.bg-white\\/60{background-color:#fff9}@supports (color:color-mix(in lab, red, red)){.bg-white\\/60{background-color:color-mix(in oklab,var(--color-white)60%,transparent)}}.bg-white\\/95{background-color:#fffffff2}@supports (color:color-mix(in lab, red, red)){.bg-white\\/95{background-color:color-mix(in oklab,var(--color-white)95%,transparent)}}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-1\\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-0\\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-8{padding-block:calc(var(--spacing)*8)}.py-10{padding-block:calc(var(--spacing)*10)}.text-center{text-align:center}.text-left{text-align:left}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-mono)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[9px\\]{font-size:9px}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.whitespace-pre-wrap{white-space:pre-wrap}.text-amber-600{color:var(--color-amber-600)}.text-amber-700{color:var(--color-amber-700)}.text-amber-800{color:var(--color-amber-800)}.text-amber-900{color:var(--color-amber-900)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-emerald-700{color:var(--color-emerald-700)}.text-fuchsia-700{color:var(--color-fuchsia-700)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-green-700{color:var(--color-green-700)}.text-green-800{color:var(--color-green-800)}.text-purple-700{color:var(--color-purple-700)}.text-rose-700{color:var(--color-rose-700)}.text-sky-700{color:var(--color-sky-700)}.text-slate-500{color:var(--color-slate-500)}.text-slate-700{color:var(--color-slate-700)}.text-slate-800{color:var(--color-slate-800)}.text-slate-900{color:var(--color-slate-900)}.text-violet-700{color:var(--color-violet-700)}.text-white{color:var(--color-white)}.italic{font-style:italic}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-black\\/5{--tw-ring-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.ring-black\\/5{--tw-ring-color:color-mix(in oklab,var(--color-black)5%,transparent)}}.ring-transparent{--tw-ring-color:transparent}.ring-white\\/10{--tw-ring-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.ring-white\\/10{--tw-ring-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\\:opacity-100:is(:where(.group):hover *){opacity:1}.hover\\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\\:border-gray-300:hover{border-color:var(--color-gray-300)}.hover\\:border-white\\/30:hover{border-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.hover\\:border-white\\/30:hover{border-color:color-mix(in oklab,var(--color-white)30%,transparent)}}.hover\\:bg-blue-50\\/50:hover{background-color:#eff6ff80}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-blue-50\\/50:hover{background-color:color-mix(in oklab,var(--color-blue-50)50%,transparent)}}.hover\\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\\:bg-gray-800:hover{background-color:var(--color-gray-800)}.hover\\:bg-slate-900\\/95:hover{background-color:#0f172bf2}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-slate-900\\/95:hover{background-color:color-mix(in oklab,var(--color-slate-900)95%,transparent)}}.hover\\:text-gray-600:hover{color:var(--color-gray-600)}.hover\\:text-gray-900:hover{color:var(--color-gray-900)}.hover\\:text-slate-900:hover{color:var(--color-slate-900)}}.focus\\:border-gray-300:focus{border-color:var(--color-gray-300)}.focus\\:bg-gray-50:focus{background-color:var(--color-gray-50)}.focus\\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\\:ring-gray-200:focus{--tw-ring-color:var(--color-gray-200)}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\\:outline-\\[\\#BEC2FF\\]:focus-visible{outline-color:#bec2ff}.focus-visible\\:outline-gray-300:focus-visible{outline-color:var(--color-gray-300)}.focus-visible\\:outline-gray-400:focus-visible{outline-color:var(--color-gray-400)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}@media (min-width:48rem){.md\\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.\\[\\&\\>svg\\]\\:\\!h-8>svg{height:calc(var(--spacing)*8)!important}.\\[\\&\\>svg\\]\\:\\!w-8>svg{width:calc(var(--spacing)*8)!important}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}.inspector-account-strip{color:#fff;background-color:#010507;width:100%;min-width:0}.inspector-account-logo{filter:brightness(0)invert()}.inspector-agent-placeholder{color:#afafb7;border-color:#ffffff47}.inspector-primary-navigation,.inspector-child-navigation{cursor:default;background-color:#fff;border-bottom:1px solid #dbdbe5;flex:none;align-items:center;gap:4px;width:100%;min-width:0;padding:6px 12px;display:flex}.inspector-primary-navigation{overflow:auto hidden}.inspector-child-navigation{overscroll-behavior-inline:contain;white-space:nowrap;overflow:auto hidden}.inspector-nav-control{color:#57575b;min-height:32px;font:inherit;outline-offset:2px;cursor:pointer;background-color:#0000;border:1px solid #0000;border-radius:4px;outline:2px solid #0000;flex:none;justify-content:center;align-items:center;gap:6px;padding:6px 9px;font-size:12px;font-weight:600;line-height:1.25;display:inline-flex}.inspector-nav-control:hover{color:#010507;background-color:#f0f0f4}.inspector-nav-control-active{color:#3f176f;background-color:#eee6fe;border-color:#bec2ff}.inspector-nav-icon{flex:none;align-items:center;display:inline-flex}.inspector-nav-icon svg{width:15px;height:15px}.inspector-nav-control:focus-visible,.inspector-nav-control:focus,.inspector-account-control:focus-visible,.inspector-account-control:focus,[data-inspector-thread-cta]:focus-visible,[data-inspector-thread-cta]:focus,[data-inspector-action-placement=threads-footer]:focus-visible,[data-inspector-action-placement=threads-footer]:focus{outline-offset:2px;outline:2px solid #6430ab!important}.inspector-account-control{color:#afafb7;outline-offset:2px;cursor:pointer;outline:2px solid #0000}.inspector-account-control:hover,.inspector-account-control-active{color:#fff;background-color:#ffffff1f}[data-inspector-thread-cta]{color:#57575b;white-space:nowrap;outline-offset:2px;cursor:pointer;background-color:#fff;border:1px solid #dbdbe5;border-radius:4px;outline:2px solid #0000;flex:none;justify-content:center;align-items:center;min-height:32px;margin-left:auto;padding:6px 9px;font-size:11px;font-weight:600;line-height:1.25;text-decoration:none;display:inline-flex}[data-inspector-account-strip] button,[data-inspector-account-strip] a{cursor:pointer}[data-inspector-thread-cta]:hover{color:#010507;background-color:#f7f7f9;border-color:#afafb7}[data-inspector-threads-setup-prompt],[data-inspector-threads-setup-link]{min-height:34px;font:inherit;outline-offset:2px;cursor:pointer;border:1px solid #dbdbe5;border-radius:6px;outline:2px solid #0000;justify-content:center;align-items:center;gap:6px;padding:8px 12px;font-size:12px;font-weight:600;line-height:1.25;text-decoration:none;display:inline-flex}[data-inspector-threads-setup-prompt]{color:#fff;background-color:#010507;border-color:#010507}[data-inspector-threads-setup-prompt]:hover{background-color:#2b2b2b;border-color:#2b2b2b}[data-inspector-threads-setup-link]{color:#57575b;background-color:#fff}[data-inspector-threads-setup-link]:hover{color:#010507;background-color:#f7f7f9;border-color:#afafb7}[data-inspector-threads-setup-prompt]:focus-visible,[data-inspector-threads-setup-link]:focus-visible{outline-offset:2px;outline:2px solid #6430ab}.inspector-threads-footer{color:#57575b;background-color:#f7f7f9;border-top:1px solid #dbdbe5;flex:none;gap:10px;padding:12px;font-size:11px;line-height:1.35;display:grid}.inspector-threads-usage{gap:6px;display:grid}[data-inspector-thread-count]{color:#010507;font-weight:600}[data-inspector-thread-expiry]{color:#57575b}.inspector-thread-progress{--inspector-thread-progress-color:#189370;width:100%;height:6px;accent-color:var(--inspector-thread-progress-color);border-radius:999px;overflow:hidden}.inspector-thread-progress[data-inspector-thread-capacity=warning]{--inspector-thread-progress-color:#b45309}.inspector-thread-progress[data-inspector-thread-capacity=critical]{--inspector-thread-progress-color:#be123c}.inspector-thread-progress::-webkit-progress-bar{background-color:#dbdbe5;border-radius:999px}.inspector-thread-progress::-webkit-progress-value{background-color:var(--inspector-thread-progress-color);border-radius:999px}.inspector-thread-progress::-moz-progress-bar{background-color:var(--inspector-thread-progress-color);border-radius:999px}[data-inspector-action-placement=threads-footer]{color:#57575b;outline-offset:2px;cursor:pointer;background-color:#fff;border:1px solid #dbdbe5;border-radius:4px;outline:2px solid #0000;justify-content:center;align-items:center;width:100%;min-height:32px;padding:6px 9px;font-size:11px;font-weight:600;line-height:1.25;text-decoration:none;display:inline-flex}[data-inspector-action-placement=threads-footer][data-inspector-action-intent=upgrade]{color:#fff;background-color:#6430ab;border-color:#6430ab}[data-inspector-action-placement=threads-footer][data-inspector-action-intent=upgrade]:hover{color:#fff;background-color:#3f176f;border-color:#3f176f}[data-inspector-action-placement=threads-footer]:hover{color:#010507;background-color:#fff;border-color:#afafb7}.cpk-threads-overview-video{opacity:0;transition:opacity .22s}.cpk-threads-overview-video[data-loaded=true]{opacity:1}.cpk-threads-overview-video-control{color:#3f176f;min-height:32px;font:inherit;outline-offset:2px;cursor:pointer;background-color:#fff;border:1px solid #dbdbe5;border-radius:4px;outline:2px solid #0000;justify-content:center;align-items:center;margin:0 0 14px;padding:6px 10px;font-size:12px;font-weight:600;line-height:1.25;display:inline-flex}.cpk-threads-overview-video-control:hover{color:#010507;background-color:#f7f7f9;border-color:#afafb7}.cpk-threads-overview-video-control:focus-visible{outline-offset:2px;outline:2px solid #6430ab}.cpk-threads-overview-video-fallback{color:#57575b;max-width:440px;margin:-4px 0 14px;font-size:12px;line-height:1.5}@media (prefers-reduced-motion:reduce){.cpk-threads-overview-video{transition:none}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-space-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-blur{syntax:\"*\";inherits:false}@property --tw-brightness{syntax:\"*\";inherits:false}@property --tw-contrast{syntax:\"*\";inherits:false}@property --tw-grayscale{syntax:\"*\";inherits:false}@property --tw-hue-rotate{syntax:\"*\";inherits:false}@property --tw-invert{syntax:\"*\";inherits:false}@property --tw-opacity{syntax:\"*\";inherits:false}@property --tw-saturate{syntax:\"*\";inherits:false}@property --tw-sepia{syntax:\"*\";inherits:false}@property --tw-drop-shadow{syntax:\"*\";inherits:false}@property --tw-drop-shadow-color{syntax:\"*\";inherits:false}@property --tw-drop-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:\"*\";inherits:false}@property --tw-backdrop-blur{syntax:\"*\";inherits:false}@property --tw-backdrop-brightness{syntax:\"*\";inherits:false}@property --tw-backdrop-contrast{syntax:\"*\";inherits:false}@property --tw-backdrop-grayscale{syntax:\"*\";inherits:false}@property --tw-backdrop-hue-rotate{syntax:\"*\";inherits:false}@property --tw-backdrop-invert{syntax:\"*\";inherits:false}@property --tw-backdrop-opacity{syntax:\"*\";inherits:false}@property --tw-backdrop-saturate{syntax:\"*\";inherits:false}@property --tw-backdrop-sepia{syntax:\"*\";inherits:false}@property --tw-scale-x{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-y{syntax:\"*\";inherits:false;initial-value:1}@property --tw-scale-z{syntax:\"*\";inherits:false;initial-value:1}@keyframes pulse{50%{opacity:.5}}";
 
 //#endregion
 //#region src/assets/inspector-logo.svg
@@ -189,9 +189,100 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		});
 	}
 
+//#endregion
+//#region src/lib/inspector-metadata.ts
+/** Maps the runtime's legacy license status to the inspector's four states. */
+	function normalizeRuntimeLicenseState(status) {
+		switch (status) {
+			case "valid":
+			case "expiring": return "valid";
+			case "none": return "none";
+			case "expired":
+			case "invalid": return "expired";
+			default: return "unknown";
+		}
+	}
+	function projectAction(state, action) {
+		if (state === "valid" && (action === null || action === void 0 ? void 0 : action.kind) === "manage_plan") return { threadsFooterAction: {
+			kind: action.kind,
+			url: action.url,
+			label: "Manage Your Plan"
+		} };
+		if (state === "none" && (action === null || action === void 0 ? void 0 : action.kind) === "enable_intelligence") return { lockedAction: {
+			kind: action.kind,
+			url: action.url,
+			label: "Enable Intelligence"
+		} };
+		if (state === "expired" && (action === null || action === void 0 ? void 0 : action.kind) === "renew") return { lockedAction: {
+			kind: action.kind,
+			url: action.url,
+			label: "Renew"
+		} };
+		if (state === "expired" && (action === null || action === void 0 ? void 0 : action.kind) === "manage_plan") return { lockedAction: {
+			kind: action.kind,
+			url: action.url,
+			label: "Manage Your Plan"
+		} };
+		return {};
+	}
+	/**
+	* Re-parses Core metadata at the UI boundary and exposes independent,
+	* render-safe slots without display math.
+	*/
+	function projectInspectorMetadata(value, runtimeLicenseStatus) {
+		var _metadata$license;
+		const metadata = (0, _copilotkit_shared.parseInspectorMetadataV1)(value);
+		const runtimeState = normalizeRuntimeLicenseState(runtimeLicenseStatus);
+		const metadataState = metadata === null || metadata === void 0 || (_metadata$license = metadata.license) === null || _metadata$license === void 0 ? void 0 : _metadata$license.state;
+		const hasLicenseConflict = metadataState !== void 0 && metadataState !== "unknown" && runtimeState !== "unknown" && metadataState !== runtimeState;
+		const licenseState = hasLicenseConflict ? runtimeState : metadataState !== null && metadataState !== void 0 ? metadataState : runtimeState;
+		return {
+			...(metadata === null || metadata === void 0 ? void 0 : metadata.identity) === void 0 ? {} : { identity: metadata.identity },
+			...(metadata === null || metadata === void 0 ? void 0 : metadata.plan) === void 0 ? {} : { plan: metadata.plan },
+			...(metadata === null || metadata === void 0 ? void 0 : metadata.usage) === void 0 ? {} : { usage: metadata.usage },
+			licenseState,
+			hasLicenseConflict,
+			...hasLicenseConflict ? {} : projectAction(licenseState, metadata === null || metadata === void 0 ? void 0 : metadata.action)
+		};
+	}
+
+//#endregion
+//#region src/lib/thread-selection.ts
+	function parsedTimestamp(value) {
+		if (typeof value !== "string") return null;
+		const timestamp = Date.parse(value);
+		return Number.isFinite(timestamp) ? timestamp : null;
+	}
+	function compareNewestDate(left, right) {
+		const leftTimestamp = parsedTimestamp(left);
+		const rightTimestamp = parsedTimestamp(right);
+		if (leftTimestamp === null) return rightTimestamp === null ? 0 : 1;
+		if (rightTimestamp === null) return -1;
+		if (leftTimestamp === rightTimestamp) return 0;
+		return leftTimestamp > rightTimestamp ? -1 : 1;
+	}
+	function compareVisibleThreads(left, right) {
+		const updatedOrder = compareNewestDate(left.updatedAt, right.updatedAt);
+		if (updatedOrder !== 0) return updatedOrder;
+		const createdOrder = compareNewestDate(left.createdAt, right.createdAt);
+		if (createdOrder !== 0) return createdOrder;
+		if (left.id < right.id) return -1;
+		if (left.id > right.id) return 1;
+		return 0;
+	}
+	/**
+	* Keeps a visible explicit real-Thread selection or returns the deterministic
+	* newest visible real Thread without mutating the candidate list.
+	*/
+	function selectVisibleRealThreadId(input) {
+		var _sort$0$id, _sort$;
+		if (input.selectedThreadId !== null && input.threads.some((thread) => thread.id === input.selectedThreadId)) return input.selectedThreadId;
+		return (_sort$0$id = (_sort$ = [...input.threads].sort(compareVisibleThreads)[0]) === null || _sort$ === void 0 ? void 0 : _sort$.id) !== null && _sort$0$id !== void 0 ? _sort$0$id : null;
+	}
+
 //#endregion
 //#region package.json
-	var version = "1.66.4";
+	var version = "1.67.1";
 
 //#endregion
 //#region src/lib/telemetry.ts
@@ -214,7 +305,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		threadsExampleTourDismissed: "oss.inspector.threads_example_tour_dismissed",
 		threadsExampleTourCompleted: "oss.inspector.threads_example_tour_completed",
 		threadsExampleTourReopened: "oss.inspector.threads_example_tour_reopened",
-		memoriesTabClicked: "oss.inspector.memories_tab_clicked"
+		memoriesTabClicked: "oss.inspector.memories_tab_clicked",
+		metadataModuleViewed: "oss.inspector.metadata_module_viewed",
+		metadataActionClicked: "oss.inspector.metadata_action_clicked"
 	};
 	const TELEMETRY_INGEST_URL = "https://telemetry.copilotkit.ai/ingest";
 	const TELEMETRY_DOCS_URL = "https://docs.copilotkit.ai/telemetry";
@@ -222,7 +315,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	const PACKAGE_VERSION = version;
 	const FETCH_TIMEOUT_MS = 3e3;
 	function isEnrichedTelemetryEvent(event) {
-		return event === TELEMETRY_EVENTS.opened || event === TELEMETRY_EVENTS.threadsTabClicked || event === TELEMETRY_EVENTS.threadsLockedViewed || event === TELEMETRY_EVENTS.threadsIntelligenceSignupClicked || event === TELEMETRY_EVENTS.threadsTalkToEngineerClicked || event === TELEMETRY_EVENTS.talkToEngineerClicked || event === TELEMETRY_EVENTS.threadsEmptyEnabledViewed || event === TELEMETRY_EVENTS.threadsEnabledViewed || event === TELEMETRY_EVENTS.threadsExampleViewed || event === TELEMETRY_EVENTS.threadsExampleSelected || event === TELEMETRY_EVENTS.threadsExampleTourStarted || event === TELEMETRY_EVENTS.threadsExampleTourStepViewed || event === TELEMETRY_EVENTS.threadsExampleTourDismissed || event === TELEMETRY_EVENTS.threadsExampleTourCompleted || event === TELEMETRY_EVENTS.threadsExampleTourReopened || event === TELEMETRY_EVENTS.memoriesTabClicked;
+		return event === TELEMETRY_EVENTS.opened || event === TELEMETRY_EVENTS.threadsTabClicked || event === TELEMETRY_EVENTS.threadsLockedViewed || event === TELEMETRY_EVENTS.threadsIntelligenceSignupClicked || event === TELEMETRY_EVENTS.threadsTalkToEngineerClicked || event === TELEMETRY_EVENTS.talkToEngineerClicked || event === TELEMETRY_EVENTS.threadsEmptyEnabledViewed || event === TELEMETRY_EVENTS.threadsEnabledViewed || event === TELEMETRY_EVENTS.threadsExampleViewed || event === TELEMETRY_EVENTS.threadsExampleSelected || event === TELEMETRY_EVENTS.threadsExampleTourStarted || event === TELEMETRY_EVENTS.threadsExampleTourStepViewed || event === TELEMETRY_EVENTS.threadsExampleTourDismissed || event === TELEMETRY_EVENTS.threadsExampleTourCompleted || event === TELEMETRY_EVENTS.threadsExampleTourReopened || event === TELEMETRY_EVENTS.memoriesTabClicked || event === TELEMETRY_EVENTS.metadataModuleViewed || event === TELEMETRY_EVENTS.metadataActionClicked;
 	}
 	function getRuntimeUrlType(runtimeUrl) {
 		if (!runtimeUrl) return "missing";
@@ -248,15 +341,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	*/
 	function track(event, properties = {}) {
 		if (isTelemetryOptedOut()) return;
-		const distinctId = getOrCreateTelemetryDistinctId();
-		const enrichedProperties = isEnrichedTelemetryEvent(event) ? {
-			package_name: PACKAGE_NAME,
-			package_version: PACKAGE_VERSION,
-			inspector_distinct_id: distinctId
-		} : {};
-		let body;
 		try {
-			body = JSON.stringify({
+			const distinctId = getOrCreateTelemetryDistinctId();
+			const enrichedProperties = isEnrichedTelemetryEvent(event) ? {
+				package_name: PACKAGE_NAME,
+				package_version: PACKAGE_VERSION,
+				inspector_distinct_id: distinctId
+			} : {};
+			postBestEffort(TELEMETRY_INGEST_URL, JSON.stringify({
 				event,
 				properties: {
 					...properties,
@@ -268,11 +360,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 					...isEnrichedTelemetryEvent(event) ? { version: PACKAGE_VERSION } : {}
 				},
 				ts: Math.floor(Date.now() / 1e3)
-			});
-		} catch (_unused2) {
-			return;
-		}
-		postBestEffort(TELEMETRY_INGEST_URL, body, distinctId);
+			}), distinctId);
+		} catch (_unused2) {}
 	}
 	function trackBannerViewed(props) {
 		track(TELEMETRY_EVENTS.bannerViewed, props);
@@ -299,51 +388,135 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	function trackInspectorOpened(props) {
 		track(TELEMETRY_EVENTS.opened, props);
 	}
+	/** Rebuild the common Thread payload from its closed coarse allowlist. */
+	function threadCommonProperties(props) {
+		return {
+			...props.intelligence_status === void 0 ? {} : { intelligence_status: props.intelligence_status },
+			...props.thread_service_status === void 0 ? {} : { thread_service_status: props.thread_service_status },
+			...props.license_status === void 0 ? {} : { license_status: props.license_status },
+			...props.runtime_mode === void 0 ? {} : { runtime_mode: props.runtime_mode },
+			...props.runtime_url_type === void 0 ? {} : { runtime_url_type: props.runtime_url_type },
+			...props.telemetry_disabled === void 0 ? {} : { telemetry_disabled: props.telemetry_disabled },
+			...props.has_threads === void 0 ? {} : { has_threads: props.has_threads },
+			...props.usage_bucket === void 0 ? {} : { usage_bucket: props.usage_bucket },
+			...props.expiry_bucket === void 0 ? {} : { expiry_bucket: props.expiry_bucket },
+			...props.group_key === void 0 ? {} : { group_key: props.group_key },
+			...props.leaf_key === void 0 ? {} : { leaf_key: props.leaf_key }
+		};
+	}
+	/** Add only the fields used by the three Thread CTA funnels. */
+	function threadCtaProperties(props) {
+		return {
+			...threadCommonProperties(props),
+			...props.cta === void 0 ? {} : { cta: props.cta },
+			...props.cta_surface === void 0 ? {} : { cta_surface: props.cta_surface },
+			...props.posthog_distinct_id === void 0 ? {} : { posthog_distinct_id: props.posthog_distinct_id }
+		};
+	}
+	/** Add only the closed example kind used by example impressions/selections. */
+	function threadExampleProperties(props) {
+		return {
+			...threadCommonProperties(props),
+			...props.example_kind === void 0 ? {} : { example_kind: props.example_kind }
+		};
+	}
+	/** Add only a bounded example kind and tour step/tab pair. */
+	function threadTourProperties(props) {
+		return {
+			...threadExampleProperties(props),
+			...props.tour_step === void 0 ? {} : { tour_step: props.tour_step },
+			...props.tour_tab === void 0 ? {} : { tour_tab: props.tour_tab }
+		};
+	}
+	/** Add the bounded dismissal leaf used only by terminal tour events. */
+	function threadTourTerminalProperties(props) {
+		return {
+			...threadTourProperties(props),
+			...props.dismiss_method === void 0 ? {} : { dismiss_method: props.dismiss_method }
+		};
+	}
 	function trackThreadsTabClicked(props = {}) {
-		track(TELEMETRY_EVENTS.threadsTabClicked, props);
+		track(TELEMETRY_EVENTS.threadsTabClicked, threadCommonProperties(props));
 	}
 	function trackThreadsLockedViewed(props) {
-		track(TELEMETRY_EVENTS.threadsLockedViewed, props);
+		track(TELEMETRY_EVENTS.threadsLockedViewed, threadCommonProperties(props));
 	}
 	function trackThreadsIntelligenceSignupClicked(props) {
-		track(TELEMETRY_EVENTS.threadsIntelligenceSignupClicked, props);
+		track(TELEMETRY_EVENTS.threadsIntelligenceSignupClicked, threadCtaProperties(props));
 	}
 	function trackThreadsTalkToEngineerClicked(props) {
-		track(TELEMETRY_EVENTS.threadsTalkToEngineerClicked, props);
+		track(TELEMETRY_EVENTS.threadsTalkToEngineerClicked, threadCtaProperties(props));
 	}
 	function trackTalkToEngineerClicked(props) {
-		track(TELEMETRY_EVENTS.talkToEngineerClicked, props);
+		track(TELEMETRY_EVENTS.talkToEngineerClicked, threadCtaProperties(props));
 	}
 	function trackThreadsEmptyEnabledViewed(props) {
-		track(TELEMETRY_EVENTS.threadsEmptyEnabledViewed, props);
+		track(TELEMETRY_EVENTS.threadsEmptyEnabledViewed, threadCommonProperties(props));
 	}
 	function trackThreadsEnabledViewed(props) {
-		track(TELEMETRY_EVENTS.threadsEnabledViewed, props);
+		track(TELEMETRY_EVENTS.threadsEnabledViewed, threadCommonProperties(props));
 	}
 	function trackThreadsExampleViewed(props) {
-		track(TELEMETRY_EVENTS.threadsExampleViewed, props);
+		track(TELEMETRY_EVENTS.threadsExampleViewed, threadExampleProperties(props));
 	}
 	function trackThreadsExampleSelected(props) {
-		track(TELEMETRY_EVENTS.threadsExampleSelected, props);
+		track(TELEMETRY_EVENTS.threadsExampleSelected, threadExampleProperties(props));
 	}
 	function trackThreadsExampleTourStarted(props) {
-		track(TELEMETRY_EVENTS.threadsExampleTourStarted, props);
+		track(TELEMETRY_EVENTS.threadsExampleTourStarted, threadTourProperties(props));
 	}
 	function trackThreadsExampleTourStepViewed(props) {
-		track(TELEMETRY_EVENTS.threadsExampleTourStepViewed, props);
+		track(TELEMETRY_EVENTS.threadsExampleTourStepViewed, threadTourProperties(props));
 	}
 	function trackThreadsExampleTourDismissed(props) {
-		track(TELEMETRY_EVENTS.threadsExampleTourDismissed, props);
+		track(TELEMETRY_EVENTS.threadsExampleTourDismissed, threadTourTerminalProperties(props));
 	}
 	function trackThreadsExampleTourCompleted(props) {
-		track(TELEMETRY_EVENTS.threadsExampleTourCompleted, props);
+		track(TELEMETRY_EVENTS.threadsExampleTourCompleted, threadTourTerminalProperties(props));
 	}
 	function trackThreadsExampleTourReopened(props) {
-		track(TELEMETRY_EVENTS.threadsExampleTourReopened, props);
+		track(TELEMETRY_EVENTS.threadsExampleTourReopened, threadTourProperties(props));
 	}
 	function trackMemoriesTabClicked(props = {}) {
 		track(TELEMETRY_EVENTS.memoriesTabClicked, props);
 	}
+	function metadataCoarseProperties(props) {
+		const navigation = props.group_key === void 0 || props.leaf_key === void 0 ? {} : {
+			group_key: props.group_key,
+			leaf_key: props.leaf_key
+		};
+		return {
+			license_bucket: props.license_bucket,
+			usage_bucket: props.usage_bucket,
+			expiry_bucket: props.expiry_bucket,
+			...navigation,
+			...props.action_placement === void 0 ? {} : { action_placement: props.action_placement }
+		};
+	}
+	/**
+	* Tracks one visible Inspector metadata module using coarse fields only.
+	* Rebuilding the payload here prevents local labels, IDs, URLs, and usage
+	* values from crossing the telemetry boundary through extra object fields.
+	*/
+	function trackMetadataModuleViewed(props) {
+		track(TELEMETRY_EVENTS.metadataModuleViewed, {
+			module: props.module,
+			...props.action_kind === void 0 ? {} : { action_kind: props.action_kind },
+			...metadataCoarseProperties(props)
+		});
+	}
+	/**
+	* Tracks clicks for managed plan and renewal actions. The existing
+	* Intelligence-enable funnel keeps its original event and never calls this
+	* helper, which prevents a single click from producing two wire events.
+	*/
+	function trackMetadataActionClicked(props) {
+		track(TELEMETRY_EVENTS.metadataActionClicked, {
+			module: "action",
+			action_kind: props.action_kind,
+			...metadataCoarseProperties(props)
+		});
+	}
 	/**
 	* Returns the inspector's anonymous distinct-ID for cross-domain
 	* propagation onto outbound banner-CTA links, or `null` when the user
@@ -389,9 +562,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	}
 	async function postBestEffort(url, body, distinctId) {
 		if (typeof fetch === "undefined") return;
-		const controller = new AbortController();
-		const timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+		let timeoutId;
 		try {
+			const controller = new AbortController();
+			timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
 			await fetch(url, {
 				method: "POST",
 				headers: {
@@ -402,7 +576,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 				signal: controller.signal
 			});
 		} catch (_unused3) {} finally {
-			clearTimeout(timeoutId);
+			if (timeoutId !== void 0) clearTimeout(timeoutId);
 		}
 	}
 
@@ -411,11 +585,47 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	const WEB_INSPECTOR_TAG = "cpk-web-inspector";
 	const THREAD_INSPECTOR_TAG = "cpk-thread-inspector";
 	/**
-	* User-facing label for the memory surface (nav item + view header). The menu
-	* KEY stays "memories" for persistence/telemetry stability; only the label
-	* changed from "Learning" to "Memory".
+	* User-facing label for the memory view header. The legacy menu key stays
+	* "memories" for persistence and telemetry stability.
 	*/
 	const MEMORY_VIEW_LABEL = "Memory";
+	const INSPECTOR_GROUPS = {
+		threads: ["threads"],
+		agents: [
+			"ag-ui-events",
+			"agents",
+			"frontend-tools",
+			"capabilities",
+			"agent-context"
+		],
+		learning: ["memories"]
+	};
+	const INSPECTOR_MENU_KEYS = [
+		...INSPECTOR_GROUPS.threads,
+		...INSPECTOR_GROUPS.agents,
+		...INSPECTOR_GROUPS.learning
+	];
+	/** Return whether persisted state names a legacy Inspector leaf. */
+	function isInspectorMenuKey(value) {
+		return typeof value === "string" && INSPECTOR_MENU_KEYS.some((menuKey) => menuKey === value);
+	}
+	const INSPECTOR_PRIMARY_NAVIGATION = [
+		{
+			key: "threads",
+			label: "Threads",
+			icon: "MessageSquare"
+		},
+		{
+			key: "agents",
+			label: "Agents",
+			icon: "Bot"
+		},
+		{
+			key: "learning",
+			label: "Learning",
+			icon: "Brain"
+		}
+	];
 	const EDGE_MARGIN = 16;
 	const DRAG_THRESHOLD = 6;
 	const MIN_WINDOW_WIDTH = 600;
@@ -434,17 +644,49 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	};
 	const DOCKED_LEFT_WIDTH = 500;
 	const MAX_AGENT_EVENTS = 200;
+	const INTERACTIVE_FOCUS_BASE_STYLE = "outline-style:solid;outline-width:2px;outline-color:transparent;outline-offset:2px;cursor:pointer;";
 	const MAX_PENDING_BANNER_VIEWED = 20;
 	const MAX_TOTAL_EVENTS = 500;
 	const INTELLIGENCE_SIGNUP_URL = "https://go.copilotkit.ai/intelligence-signup";
-	const THREADS_INTELLIGENCE_SIGNIN_URL = "https://dashboard.operations.copilotkit.ai/sign-in";
 	const TALK_TO_ENGINEER_URL = "https://www.copilotkit.ai/talk-to-an-engineer";
 	const CAPABILITIES_TAB_LABEL = "Capabilities";
 	const THREADS_DOCS_URL = "https://docs.copilotkit.ai/threads";
+	const THREADS_RUNTIME_SETUP_DOCS_URL = "https://docs.copilotkit.ai/backend/runtime-endpoints#enable-rich-threads-routes";
+	const THREADS_RUNTIME_SETUP_PROMPT = [
+		`Read ${THREADS_RUNTIME_SETUP_DOCS_URL} and finish setting up Rich Threads in this repository.`,
+		"",
+		"First inspect the repository's agent instructions, installed CopilotKit versions, Runtime adapter, frontend provider, route or proxy setup, and existing authentication. Preserve the current framework and deployment model. Preserve existing authentication middleware and access checks on every Runtime route.",
+		"",
+		"Follow the guide to enable the multi-route Runtime, align the frontend transport, scope identifyUser to the existing server-verified signed-in application user, and expose the full Runtime subtree for GET, POST, PATCH, and DELETE. Never use a fixed demo identity in production. If no trusted user identity exists, stop and ask me which auth source to use.",
+		"",
+		"Start the app and verify GET {basePath}/info reports threadEndpoints.list, inspect, mutations, and realtimeMetadata as true. Run focused tests, lint, and typecheck. Report the files changed, commands run, and verification result. If blocked, explain the missing input; do not invent setup."
+	].join("\n");
 	const SELF_HOSTED_INTELLIGENCE_URL = "https://docs.copilotkit.ai/premium/self-hosting";
 	const THREADS_EXAMPLE_OVERVIEW_VIDEO_URL = "https://cdn.copilotkit.ai/corp-site/videos/copilotkit-generative-ui-agentic-frontend-demo.webm";
+	const THREADS_EXAMPLE_OVERVIEW_VIDEO_FALLBACK = "The demo video is unavailable. Use the example threads to explore Messages, AG-UI Events, and State.";
 	const THREADS_EXAMPLE_TOUR_STORAGE_KEY = "cpk:inspector:threads-example-tour:v1";
 	const THREADS_EXAMPLE_AGENT_ID = "threads-feature";
+	/**
+	* Selects the Thread store status with a stable object identity so loading-only
+	* transitions reach one of the Inspector's two existing store subscriptions.
+	*/
+	function createThreadStoreStatusSelector() {
+		let previousError;
+		let previousIsLoading;
+		let previousStatus;
+		return (state) => {
+			const error = (0, _copilotkit_core.ɵselectThreadsError)(state);
+			const isLoading = (0, _copilotkit_core.ɵselectThreadsIsLoading)(state);
+			if (previousStatus && previousError === error && previousIsLoading === isLoading) return previousStatus;
+			previousError = error;
+			previousIsLoading = isLoading;
+			previousStatus = {
+				error,
+				isLoading
+			};
+			return previousStatus;
+		};
+	}
 	const AGENT_EVENT_TYPES = [
 		"RUN_STARTED",
 		"RUN_FINISHED",
@@ -533,6 +775,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			isExample: true
 		}
 	];
+	/** Map Sam's fixed example IDs to a closed telemetry vocabulary. */
+	function getExampleKind(threadId) {
+		switch (threadId) {
+			case "example-realtime-sync": return "realtime_sync";
+			case "example-manage-history": return "manage_history";
+			case "example-inspect-runs": return "inspect_runs";
+			default: return;
+		}
+	}
 	const THREADS_EXAMPLE_DETAILS = {
 		"example-realtime-sync": {
 			messages: [{
@@ -676,13 +927,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	const THREADS_EXAMPLE_TOUR_STEPS = [
 		{
 			tab: "timeline",
-			label: "Timeline",
+			label: "Messages",
 			title: "Read the run as a story",
 			body: "The timeline turns messages, tool calls, state changes, and run markers into a scannable debugging trail."
 		},
 		{
 			tab: "raw-events",
-			label: "Raw AG-UI Events",
+			label: "AG-UI Events",
 			title: "Drop into the protocol payloads",
 			body: "Raw events show the exact AG-UI stream behind the timeline when you need to verify ordering or payload shape."
 		},
@@ -693,6 +944,28 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			body: "The state tab shows the saved values that make a thread resumable across sessions."
 		}
 	];
+	/** Return only the three supported tour step/tab pairs. */
+	function getExampleTourTelemetryPair(index) {
+		switch (index) {
+			case 0: return {
+				tour_step: 1,
+				tour_tab: "timeline"
+			};
+			case 1: return {
+				tour_step: 2,
+				tour_tab: "raw-events"
+			};
+			case 2: return {
+				tour_step: 3,
+				tour_tab: "state"
+			};
+			default: return;
+		}
+	}
+	/** Convert rendered action placement to its stable telemetry key. */
+	function getMetadataActionPlacement(placement) {
+		return placement === "threads-footer" ? "threads_footer" : "threads_locked";
+	}
 	function escapeHtml(s) {
 		return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 	}
@@ -704,10 +977,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		}
 		const colors = {
 			key: "#5558B2",
-			str: "#189370",
-			num: "#996300",
+			str: "#087653",
+			num: "#8a5900",
 			bool: "#c0333a",
-			nil: "#838389"
+			nil: "#68686e"
 		};
 		const json = JSON.stringify(obj, null, 2);
 		if (!json) return "";
@@ -737,7 +1010,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		};
 		if (type.startsWith("TOOL_CALL")) return {
 			bg: "rgba(133,236,206,0.15)",
-			fg: "#189370"
+			fg: "#087653"
 		};
 		if (type.startsWith("STATE")) return {
 			bg: "rgba(190,194,255,0.102)",
@@ -749,11 +1022,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		};
 		if (type.startsWith("RUN_") || type.startsWith("STEP_")) return {
 			bg: "rgba(255,172,77,0.2)",
-			fg: "#996300"
+			fg: "#8a5900"
 		};
 		return {
 			bg: "#F7F7F9",
-			fg: "#838389"
+			fg: "#68686e"
 		};
 	}
 	function formatTimestamp(ts) {
@@ -773,6 +1046,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			this.threads = [];
 			this.selectedThreadId = null;
 			this.errorMessage = null;
+			this.suppressEmptyState = false;
 			this._query = "";
 			this.onSearchInput = (event) => {
 				this._query = event.target.value;
@@ -824,11 +1098,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
           ${filtered.map((thread) => {
 				var _thread$name;
 				return lit.html`
-              <div
+              <button
+                type="button"
+                aria-current=${this.selectedThreadId === thread.id ? "true" : lit.nothing}
                 class="cpk-tl__item ${this.selectedThreadId === thread.id ? "cpk-tl__item--active" : ""}"
                 @click=${() => this.onThreadClick(thread.id)}
               >
-                <div class="cpk-tl__row1">
+                <span class="cpk-tl__row1">
                   <span
                     class="cpk-tl__name ${!thread.name ? "cpk-tl__name--unnamed" : ""}"
                     >${(_thread$name = thread.name) !== null && _thread$name !== void 0 ? _thread$name : "Untitled"}</span
@@ -836,17 +1112,17 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
                   <span class="cpk-tl__time"
                     >${this.relativeTime(thread.updatedAt)}</span
                   >
-                </div>
-                <div class="cpk-tl__meta">
+                </span>
+                <span class="cpk-tl__meta">
                   <span class="cpk-tl__pill">${thread.agentId}</span>
                   ${thread.isExample ? lit.html`
                           <span class="cpk-tl__pill cpk-tl__pill--example">Example</span>
                         ` : lit.nothing}
-                </div>
-              </div>
+                </span>
+              </button>
             `;
 			})}
-          ${filtered.length === 0 ? lit.html`
+          ${filtered.length === 0 && !this.suppressEmptyState ? lit.html`
                 <div class="cpk-tl__empty">
                   ${this.errorMessage ? lit.html`
                         <svg
@@ -901,6 +1177,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		threads: { attribute: false },
 		selectedThreadId: { attribute: false },
 		errorMessage: { attribute: false },
+		suppressEmptyState: { attribute: false },
 		_query: { state: true }
 	};
 	CpkThreadList.styles = lit.css`
@@ -955,7 +1232,18 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
     /* ── Thread item ── */
     .cpk-tl__item {
+      appearance: none;
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      margin: 0;
+      border: 0;
+      border-radius: 0;
       padding: 11px 13px;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      text-align: left;
       cursor: pointer;
       border-bottom: 1px solid #e9e9ef;
       border-left: 3px solid transparent;
@@ -975,6 +1263,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
       background: #bec2ff33;
     }
 
+    .cpk-tl__item:focus-visible {
+      outline-color: #5558b2;
+      outline-offset: -2px;
+      outline-style: solid;
+      outline-width: 2px;
+    }
+
     .cpk-tl__row1 {
       display: flex;
       align-items: center;
@@ -993,7 +1288,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
     }
 
     .cpk-tl__name--unnamed {
-      color: #838389;
+      color: #68686e;
       font-style: italic;
       font-weight: 400;
     }
@@ -1001,7 +1296,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
     .cpk-tl__time {
       font-family: "Spline Sans Mono", monospace;
       font-size: 10px;
-      color: #838389;
+      color: #68686e;
       flex-shrink: 0;
     }
 
@@ -1026,14 +1321,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
     .cpk-tl__pill--example {
       background: rgba(133, 236, 206, 0.22);
-      color: #189370;
+      color: #087653;
     }
 
     /* ── Empty state ── */
     .cpk-tl__empty {
       padding: 32px 16px;
       text-align: center;
-      color: #838389;
+      color: #68686e;
       font-size: 12px;
       display: flex;
       flex-direction: column;
@@ -1089,10 +1384,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			this._messagesAbort = null;
 			this._eventsAbort = null;
 			this._stateAbort = null;
+			this._hasConnectedOnce = false;
 			this._dividerResizing = false;
 			this._dividerPointerId = -1;
 			this._dividerStartX = 0;
 			this._dividerStartWidth = 0;
+			this.domIdPrefix = `cpk-thread-detail-${CpkThreadInspector.nextDomId++}`;
 			this.onDetailDividerDown = (event) => {
 				this._dividerResizing = true;
 				this._dividerPointerId = event.pointerId;
@@ -1142,6 +1439,31 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			if (id === "state") return this.renderState();
 			return this.renderEvents();
 		}
+		/** Returns the stable DOM ID for one tab in this inspector instance. */
+		tabDomId(id) {
+			return `${this.domIdPrefix}-tab-${id}`;
+		}
+		/** Returns the stable DOM ID for the panel controlled by one tab. */
+		panelDomId(id) {
+			return `${this.domIdPrefix}-panel-${id}`;
+		}
+		/** Selects and focuses the tab targeted by an ARIA tabs navigation key. */
+		handleTabKeyDown(event, currentId) {
+			var _this$shadowRoot;
+			const currentIndex = CpkThreadInspector.TAB_LIST.findIndex((tab) => tab.id === currentId);
+			if (currentIndex < 0) return;
+			let targetIndex = null;
+			if (event.key === "ArrowRight") targetIndex = (currentIndex + 1) % CpkThreadInspector.TAB_LIST.length;
+			else if (event.key === "ArrowLeft") targetIndex = (currentIndex - 1 + CpkThreadInspector.TAB_LIST.length) % CpkThreadInspector.TAB_LIST.length;
+			else if (event.key === "Home") targetIndex = 0;
+			else if (event.key === "End") targetIndex = CpkThreadInspector.TAB_LIST.length - 1;
+			if (targetIndex === null) return;
+			const target = CpkThreadInspector.TAB_LIST[targetIndex];
+			if (!target) return;
+			event.preventDefault();
+			this.activateTab(target.id);
+			(_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 || (_this$shadowRoot = _this$shadowRoot.querySelector(`#${this.tabDomId(target.id)}`)) === null || _this$shadowRoot === void 0 || _this$shadowRoot.focus();
+		}
 		activateTab(id) {
 			if (this._tab === id) return;
 			const isFirstActivation = !this._activatedTabs.has(id);
@@ -1169,6 +1491,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			}
 		}
 		updated(_changed) {
+			if (!this.isConnected) return;
 			const loadKey = this.currentLoadKey();
 			if (loadKey !== this._lastLoadKey) {
 				this._lastLoadKey = loadKey;
@@ -1192,6 +1515,16 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 				this.fetchMessages(this.threadId, true);
 			}
 		}
+		connectedCallback() {
+			super.connectedCallback();
+			if (this._hasConnectedOnce) this.requestUpdate();
+			this._hasConnectedOnce = true;
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this.resetLoadedThreadData();
+			this._lastLoadKey = null;
+		}
 		canFetchMessages() {
 			var _this$provider;
 			return !!((_this$provider = this.provider) === null || _this$provider === void 0 ? void 0 : _this$provider.getMessages) || !!this.runtimeUrl && this.threadInspectionAvailable;
@@ -1866,12 +2199,22 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
         <div class="cpk-td__left">
           <!-- Tab bar -->
           <div class="cpk-td__tabs-header">
-            <div class="cpk-td__tab-group" role="tablist">
+            <div
+              class="cpk-td__tab-group"
+              role="tablist"
+              aria-label="Thread detail views"
+            >
               ${CpkThreadInspector.TAB_LIST.map((tab) => lit.html`
                   <button
+                    id=${this.tabDomId(tab.id)}
+                    type="button"
                     role="tab"
+                    aria-controls=${this.panelDomId(tab.id)}
+                    aria-selected=${this._tab === tab.id ? "true" : "false"}
+                    tabindex=${this._tab === tab.id ? "0" : "-1"}
                     class="cpk-td__tab ${this._tab === tab.id ? "cpk-td__tab--active" : ""}"
                     @click=${() => this.activateTab(tab.id)}
+                    @keydown=${(event) => this.handleTabKeyDown(event, tab.id)}
                   >
                     ${tab.label}
                   </button>
@@ -1887,8 +2230,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
                     <div class="cpk-td__status">Loading…</div>
                   ` : lit.nothing}
             ${CpkThreadInspector.TAB_LIST.map((tab) => this._activatedTabs.has(tab.id) ? lit.html`<div
+                    id=${this.panelDomId(tab.id)}
                     class="cpk-td__panel"
-                    style=${this._tab === tab.id && !this._panelInitializing ? "" : "display:none"}
+                    role="tabpanel"
+                    aria-labelledby=${this.tabDomId(tab.id)}
+                    ?hidden=${this._tab !== tab.id || this._panelInitializing}
                   >
                     ${this.renderTabContent(tab.id)}
                   </div>` : lit.nothing)}
@@ -1922,42 +2268,58 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
     `;
 		}
 		renderMetadataStrip() {
-			var _metadata$id, _metadata$endUserId;
+			var _ref5, _metadata$name, _this$thread, _ref6, _metadata$id;
 			const metadata = this.metadata;
-			const pills = [
-				{
-					label: "Thread",
-					value: (_metadata$id = metadata === null || metadata === void 0 ? void 0 : metadata.id) !== null && _metadata$id !== void 0 ? _metadata$id : this.threadId
-				},
+			const pills = [{
+				label: "Name",
+				value: (_ref5 = (_metadata$name = metadata === null || metadata === void 0 ? void 0 : metadata.name) !== null && _metadata$name !== void 0 ? _metadata$name : (_this$thread = this.thread) === null || _this$thread === void 0 ? void 0 : _this$thread.name) !== null && _ref5 !== void 0 ? _ref5 : "Untitled"
+			}, {
+				label: "ID",
+				value: (_ref6 = (_metadata$id = metadata === null || metadata === void 0 ? void 0 : metadata.id) !== null && _metadata$id !== void 0 ? _metadata$id : this.threadId) !== null && _ref6 !== void 0 ? _ref6 : "—",
+				wrap: true
+			}];
+			for (const fact of [
 				{
 					label: "Agent",
 					value: metadata === null || metadata === void 0 ? void 0 : metadata.agentId
 				},
 				{
-					label: "End user",
-					value: (_metadata$endUserId = metadata === null || metadata === void 0 ? void 0 : metadata.endUserId) !== null && _metadata$endUserId !== void 0 ? _metadata$endUserId : metadata === null || metadata === void 0 ? void 0 : metadata.createdById
+					label: "Created",
+					value: metadata === null || metadata === void 0 ? void 0 : metadata.createdAt
 				},
 				{
-					label: "Status",
-					value: metadata === null || metadata === void 0 ? void 0 : metadata.status
+					label: "Updated",
+					value: metadata === null || metadata === void 0 ? void 0 : metadata.updatedAt
 				}
-			].filter((pill) => pill.value != null && pill.value !== "");
+			]) {
+				if (fact.value == null || fact.value === "") continue;
+				pills.push({
+					label: fact.label,
+					value: fact.label === "Created" || fact.label === "Updated" ? this.fmtTime(fact.value) : fact.value
+				});
+			}
 			const bulkControls = this.renderActiveBulkControls();
-			if (pills.length === 0 && bulkControls === lit.nothing) return lit.nothing;
 			return lit.html`
-      <div class="cpk-td__metadata-strip" aria-label="Thread metadata">
+      <div
+        class="cpk-td__metadata-strip"
+        role="group"
+        aria-label="Thread metadata"
+      >
         <div class="cpk-td__metadata-pills">
-          ${pills.map((pill) => {
-				var _pill$value;
-				return lit.html`
-              <span class="cpk-td__metadata-pill" title=${(_pill$value = pill.value) !== null && _pill$value !== void 0 ? _pill$value : ""}>
+          ${pills.map((pill) => lit.html`
+              <span
+                class="cpk-td__metadata-pill ${pill.wrap ? "cpk-td__metadata-pill--wrap" : ""}"
+                role="group"
+                title=${pill.value}
+                aria-label=${`${pill.label}: ${pill.value}`}
+              >
                 <span class="cpk-td__metadata-label">${pill.label}</span>
-                <span class="cpk-td__metadata-value"
-                  >${this.shortId(pill.value)}</span
+                <span
+                  class="cpk-td__metadata-value ${pill.wrap ? "cpk-td__metadata-value--wrap" : ""}"
+                  >${pill.value}</span
                 >
               </span>
-            `;
-			})}
+            `)}
         </div>
         ${bulkControls}
       </div>
@@ -2015,8 +2377,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			this._tab = "raw-events";
 			this.requestUpdate();
 			requestAnimationFrame(() => {
-				var _this$shadowRoot, _source$scrollIntoVie;
-				const source = (_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 ? void 0 : _this$shadowRoot.querySelector(`[data-source-index="${sourceIndex}"]`);
+				var _this$shadowRoot2, _source$scrollIntoVie;
+				const source = (_this$shadowRoot2 = this.shadowRoot) === null || _this$shadowRoot2 === void 0 ? void 0 : _this$shadowRoot2.querySelector(`[data-source-index="${sourceIndex}"]`);
 				source === null || source === void 0 || (_source$scrollIntoVie = source.scrollIntoView) === null || _source$scrollIntoVie === void 0 || _source$scrollIntoVie.call(source, { block: "center" });
 			});
 		}
@@ -2051,8 +2413,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
         <div class="cpk-td__empty-state">
           <span>No timeline events captured</span>
           <span class="cpk-td__empty-hint"
-            >Timeline rows are normalized from AG-UI events. Open Raw AG-UI Events or
-            State to inspect the available thread data.</span
+            >Timeline rows are normalized from AG-UI events. Open AG-UI Events or State
+            to inspect the available thread data.</span
           >
         </div>
       `;
@@ -2226,7 +2588,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
           <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
             <path
               d="M1 9C1 9 2 7 5 7C8 7 9 9 9 9M5 1C5 1 7 2.5 7 4.5C7 6.5 5 7 5 7C5 7 3 6.5 3 4.5C3 2.5 5 1 5 1Z"
-              stroke="#189370"
+              stroke="#087653"
               stroke-width="1.2"
               stroke-linecap="round"
               stroke-linejoin="round"
@@ -2451,7 +2813,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
     `;
 		}
 		renderDetailPanel() {
-			var _metadata$name, _metadata$agentId, _metadata$endUserId2, _metadata$createdById, _metadata$status;
+			var _ref7, _metadata$id2, _metadata$name2, _metadata$agentId, _metadata$endUserId, _metadata$createdById, _metadata$status;
 			const counts = this.activityCounts;
 			const metadata = this.metadata;
 			return lit.html`
@@ -2460,12 +2822,12 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">ID</span>
         <span class="cpk-tdp__value cpk-tdp__value--wrap"
-          >${this.shortId(metadata === null || metadata === void 0 ? void 0 : metadata.id)}</span
+          >${(_ref7 = (_metadata$id2 = metadata === null || metadata === void 0 ? void 0 : metadata.id) !== null && _metadata$id2 !== void 0 ? _metadata$id2 : this.threadId) !== null && _ref7 !== void 0 ? _ref7 : "—"}</span
         >
       </div>
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">Name</span>
-        <span class="cpk-tdp__value">${(_metadata$name = metadata === null || metadata === void 0 ? void 0 : metadata.name) !== null && _metadata$name !== void 0 ? _metadata$name : "—"}</span>
+        <span class="cpk-tdp__value">${(_metadata$name2 = metadata === null || metadata === void 0 ? void 0 : metadata.name) !== null && _metadata$name2 !== void 0 ? _metadata$name2 : "—"}</span>
       </div>
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">Agent</span>
@@ -2476,7 +2838,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
       <div class="cpk-tdp__row">
         <span class="cpk-tdp__label">End user</span>
         <span class="cpk-tdp__value cpk-tdp__value--truncate"
-          >${(_metadata$endUserId2 = metadata === null || metadata === void 0 ? void 0 : metadata.endUserId) !== null && _metadata$endUserId2 !== void 0 ? _metadata$endUserId2 : "—"}</span
+          >${(_metadata$endUserId = metadata === null || metadata === void 0 ? void 0 : metadata.endUserId) !== null && _metadata$endUserId !== void 0 ? _metadata$endUserId : "—"}</span
         >
       </div>
       <div class="cpk-tdp__row">
@@ -2560,15 +2922,16 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 		_panelInitializing: { state: true },
 		_activatedTabs: { state: true }
 	};
+	CpkThreadInspector.nextDomId = 1;
 	CpkThreadInspector.COLLAPSE_THRESHOLD = 800;
 	CpkThreadInspector.TAB_LIST = [
 		{
 			id: "timeline",
-			label: "Timeline"
+			label: "Messages"
 		},
 		{
 			id: "raw-events",
-			label: "Raw AG-UI Events"
+			label: "AG-UI Events"
 		},
 		{
 			id: "state",
@@ -2639,7 +3002,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
       border-bottom: 2px solid transparent;
       cursor: pointer;
       background: transparent;
-      color: #838389;
+      color: #68686e;
       transition:
         color 0.12s,
         border-color 0.12s;
@@ -2650,6 +3013,12 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
       color: #010507;
     }
 
+    .cpk-td__tab:focus-visible {
+      outline: 2px solid #5558b2;
+      outline-offset: -3px;
+      border-radius: 4px;
+    }
+
     .cpk-td__tab--active {
       color: #010507;
       border-bottom-color: #bec2ff;
@@ -2669,7 +3038,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
       border: none;
       border-left: 1px solid #dbdbe5;
       background: transparent;
-      color: #838389;
+      color: #68686e;
       cursor: pointer;
       flex-shrink: 0;
       transition:
@@ -2738,7 +3107,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
     }
 
     .cpk-td__metadata-label {
-      color: #838389;
+      color: #68686e;
       text-transform: uppercase;
       font-size: 9px;
     }
@@ -2748,6 +3117,18 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
       text-overflow: ellipsis;
     }
 
+    .cpk-td__metadata-pill--wrap {
+      max-width: 100%;
+      white-space: normal;
+    }
+
+    .cpk-td__metadata-value--wrap {
+      overflow: visible;
+      text-overflow: clip;
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
     /*
      * Each tab's content is wrapped in this panel so the keep-mounted
      * inactive panels can be hidden via display:none without disturbing
@@ -2765,6 +3146,10 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
       flex-shrink: 0;
     }
 
+    .cpk-td__panel[hidden] {
+      display: none;
+    }
+
     /* ── Empty state ─────────────────────────────────────────────────── */
     .cpk-td__empty-state {
       flex: 1;
@@ -2773,14 +3158,14 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
       align-items: center;
       justify-content: center;
       gap: 8px;
-      color: #838389;
+      color: #68686e;
       font-size: 13px;
       padding: 40px 0;
     }
 
     .cpk-td__empty-hint {
       font-size: 11px;
-      color: #838389;
+      color: #68686e;
       text-align: center;
       max-width: 220px;
       line-height: 1.5;
@@ -2790,7 +3175,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
     .cpk-td__status {
       padding: 16px;
       font-size: 12px;
-      color: #838389;
+      color: #68686e;
       text-align: center;
     }
 
@@ -2869,7 +3254,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
       font-family: "Spline Sans Mono", monospace;
       font-size: 10px;
       font-weight: 500;
-      color: #189370;
+      color: #087653;
       text-transform: uppercase;
       flex: 1;
     }
@@ -2878,15 +3263,15 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
       font-family: "Spline Sans Mono", monospace;
       font-size: 9px;
       text-transform: uppercase;
-      color: #189370;
+      color: #087653;
     }
 
     .cpk-td__tool-status--pending {
-      color: #996300;
+      color: #8a5900;
     }
 
     .cpk-td__tool-chevron {
-      color: #838389;
+      color: #68686e;
       font-size: 10px;
     }
 
@@ -2900,7 +3285,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
       font-family: "Spline Sans Mono", monospace;
       font-size: 9px;
       font-weight: 500;
-      color: #838389;
+      color: #68686e;
       text-transform: uppercase;
       margin-bottom: 4px;
       letter-spacing: 0.3px;
@@ -2932,7 +3317,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
       background: rgba(133, 236, 206, 0.15);
       font-family: "Spline Sans Mono", monospace;
       font-size: 10px;
-      color: #189370;
+      color: #087653;
       text-transform: uppercase;
       font-weight: 500;
       border-bottom: 1px solid #e9e9ef;
@@ -2954,7 +3339,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
       align-items: center;
       gap: 8px;
       padding: 5px 0;
-      color: #838389;
+      color: #68686e;
       font-family: "Spline Sans Mono", monospace;
       font-size: 9px;
       text-transform: uppercase;
@@ -3011,7 +3396,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
     .cpk-td__timeline-time {
       font-family: "Spline Sans Mono", monospace;
       font-size: 9px;
-      color: #838389;
+      color: #68686e;
       flex-shrink: 0;
     }
 
@@ -3189,7 +3574,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
     .cpk-td__event-time {
       font-family: "Spline Sans Mono", monospace;
       font-size: 9px;
-      color: #838389;
+      color: #68686e;
     }
 
     .cpk-td__event-payload {
@@ -3261,7 +3646,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
       font-family: "Spline Sans Mono", monospace;
       font-size: 10px;
       font-weight: 500;
-      color: #838389;
+      color: #68686e;
       text-transform: uppercase;
       letter-spacing: 0.6px;
       margin-bottom: 8px;
@@ -3282,7 +3667,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
     }
 
     .cpk-tdp__label {
-      color: #838389;
+      color: #68686e;
       font-size: 11px;
       white-space: nowrap;
       flex-shrink: 0;
@@ -3664,7 +4049,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
       font-family: "Spline Sans Mono", monospace;
       font-size: 9px;
       margin-left: 4px;
-      color: #838389;
+      color: #68686e;
     }
 
     /* ── List ── */
@@ -3731,7 +4116,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
       font-weight: 500;
       white-space: nowrap;
       background: #f0f0f5;
-      color: #838389;
+      color: #68686e;
     }
 
     /* Content */
@@ -3753,7 +4138,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 
     .cpk-ml__footer-threads {
       font-size: 10px;
-      color: #838389;
+      color: #68686e;
     }
 
     .cpk-ml__footer-id {
@@ -3766,7 +4151,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
     .cpk-ml__empty {
       padding: 32px 16px;
       text-align: center;
-      color: #838389;
+      color: #68686e;
       font-size: 12px;
       display: flex;
       flex-direction: column;
@@ -3847,7 +4232,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
     .cpk-ml__recall-clear {
       font-family: "Plus Jakarta Sans", sans-serif;
       font-size: 10px;
-      color: #838389;
+      color: #68686e;
       background: none;
       border: none;
       cursor: pointer;
@@ -3858,7 +4243,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
     }
     .cpk-ml__recall-msg {
       font-size: 11px;
-      color: #838389;
+      color: #68686e;
       line-height: 1.45;
     }
     .cpk-ml__recall-msg--error {
@@ -3882,7 +4267,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
     /* ── Scope badge variants ── */
     .cpk-ml__scope-badge--user {
       background: #f0f0f5;
-      color: #838389;
+      color: #68686e;
     }
     .cpk-ml__scope-badge--project {
       background: #fef3c7;
@@ -3914,6 +4299,8 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 			this._recallQuery = "";
 			this._recallSeq = 0;
 			this.runtimeStatus = null;
+			this.inspectorMetadataProjection = projectInspectorMetadata(void 0, void 0);
+			this.metadataTelemetryFingerprints = /* @__PURE__ */ new Map();
 			this.coreProperties = {};
 			this.lastCoreError = null;
 			this.agentSubscriptions = /* @__PURE__ */ new Map();
@@ -3935,8 +4322,19 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 			this.isOpen = false;
 			this.draggedDuringInteraction = false;
 			this.ignoreNextButtonClick = false;
-			this.selectedMenu = "ag-ui-events";
+			this.selectedMenu = "threads";
+			this.pendingPersistedMenu = null;
+			this.hasResolvedCore = false;
+			this.settingsOpen = false;
+			this.lastSelectedMenuByGroup = {
+				threads: "threads",
+				agents: "ag-ui-events",
+				learning: "memories"
+			};
+			this.lastScrolledAgentNavigationLayout = null;
 			this.selectedThreadId = null;
+			this.selectedRealThreadIsExplicit = false;
+			this.selectedLocalExampleThreadId = null;
 			this.threadListWidth = 290;
 			this.threadDividerResizing = false;
 			this.threadDividerPointerId = -1;
@@ -3946,7 +4344,10 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 			this._threadStoreSubscriptions = /* @__PURE__ */ new Map();
 			this._threadsByAgent = /* @__PURE__ */ new Map();
 			this._threadsErrorByAgent = /* @__PURE__ */ new Map();
+			this._threadsLoadingByAgent = /* @__PURE__ */ new Map();
 			this._ownedThreadStores = /* @__PURE__ */ new Map();
+			this.threadCapabilityEnabled = null;
+			this.threadCapabilityGeneration = 0;
 			this.contextMenuOpen = false;
 			this.dockMode = "floating";
 			this.previousBodyMargins = null;
@@ -3979,18 +4380,28 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 			this.pendingBannerViewed = [];
 			this.clickedBannerIds = /* @__PURE__ */ new Set();
 			this.viewedThreadsTelemetryStates = /* @__PURE__ */ new Set();
-			this.viewedExampleThreadIds = /* @__PURE__ */ new Set();
-			this.selectedExampleThreadIds = /* @__PURE__ */ new Set();
+			this.viewedExampleKinds = /* @__PURE__ */ new Set();
+			this.selectedExampleKinds = /* @__PURE__ */ new Set();
 			this.viewedExampleTourSteps = /* @__PURE__ */ new Set();
 			this.exampleThreadProviders = /* @__PURE__ */ new Map();
 			this.exampleTourDismissed = false;
 			this.exampleTourActive = false;
 			this.exampleTourStep = 0;
 			this.exampleTourAutoShown = false;
-			this.threadsExampleOverviewVideoShouldLoad = false;
-			this.threadsExampleOverviewVideoReady = false;
+			this.threadsExampleOverviewVideoState = "deferred";
+			this.threadsExampleOverviewVideoLoaded = false;
+			this.threadsExampleOverviewVideoReducedMotion = false;
 			this.threadsExampleOverviewVideoLoadTimer = null;
 			this.threadsExampleOverviewVideoIdleCallbackId = null;
+			this.threadsExampleOverviewVideoElement = null;
+			this.threadsExampleOverviewVideoListeners = null;
+			this.threadsExampleOverviewVideoLifecycleGeneration = 0;
+			this.threadsExampleOverviewVideoPlayAttemptGeneration = 0;
+			this.threadsExampleOverviewVideoPlayPromise = null;
+			this.threadsExampleOverviewVideoPlayOnNextBind = false;
+			this.threadsSetupPromptCopyState = "idle";
+			this.threadsSetupPromptCopyResetTimeoutId = null;
+			this.threadsSetupPromptCopyGeneration = 0;
 			this.contextState = {
 				button: {
 					position: {
@@ -4038,7 +4449,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 				const target = event.currentTarget;
 				const context = (target === null || target === void 0 ? void 0 : target.dataset.dragContext) === "window" ? "window" : "button";
 				const eventTarget = event.target;
-				if (context === "window" && (eventTarget === null || eventTarget === void 0 ? void 0 : eventTarget.closest("button"))) return;
+				if (context === "window" && (eventTarget === null || eventTarget === void 0 ? void 0 : eventTarget.closest("button, a, nav"))) return;
 				this.pointerContext = context;
 				this.measureContext(context);
 				event.preventDefault();
@@ -4186,8 +4597,10 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 				this.measureContext("button");
 				this.applyAnchorPosition("button");
 				this.measureContext("window");
+				this.contextState.window.size = this.clampWindowSize(this.contextState.window.size);
 				if (this.hasCustomPosition.window) this.applyAnchorPosition("window");
 				else this.centerContext("window");
+				this.requestUpdate();
 				this.updateHostTransform();
 			};
 			this.contextOptions = [{
@@ -4200,29 +4613,36 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 			this.expandedTools = /* @__PURE__ */ new Set();
 			this.expandedContextItems = /* @__PURE__ */ new Set();
 			this.copiedContextItems = /* @__PURE__ */ new Set();
-			this.handleTalkToEngineerClick = () => {
+			this.handleInspectorMetadataActionClick = (action, placement) => {
 				var _this$core;
-				if ((_this$core = this.core) === null || _this$core === void 0 ? void 0 : _this$core.telemetryDisabled) return;
-				trackTalkToEngineerClicked(this.getThreadsTelemetryProps({
-					cta: "talk_to_engineer",
-					cta_surface: "threads_header"
-				}, { includeUrlAttribution: true }));
+				if (!this.isOpen || this.runtimeStatus !== _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Connected || ((_this$core = this.core) === null || _this$core === void 0 ? void 0 : _this$core.telemetryDisabled)) return;
+				if (action.kind === "enable_intelligence") {
+					this.handleThreadsIntelligenceSignupClick();
+					return;
+				}
+				try {
+					trackMetadataActionClicked({
+						action_kind: action.kind,
+						license_bucket: this.inspectorMetadataProjection.licenseState,
+						...this.getMetadataTelemetryContext(),
+						action_placement: getMetadataActionPlacement(placement)
+					});
+				} catch (_unused3) {}
 			};
-			this.handleThreadsIntelligenceSignupClick = () => {
+			this.handleTalkToEngineerClick = () => {
 				var _this$core2;
 				if ((_this$core2 = this.core) === null || _this$core2 === void 0 ? void 0 : _this$core2.telemetryDisabled) return;
-				trackThreadsIntelligenceSignupClicked(this.getThreadsTelemetryProps({
-					cta: "signup",
-					cta_surface: "threads_locked"
-				}, { includeUrlAttribution: true }));
+				trackTalkToEngineerClicked(this.getThreadsCtaTelemetryProps("talk_to_engineer", "threads_header"));
 			};
-			this.handleThreadsTalkToEngineerClick = () => {
+			this.handleThreadsIntelligenceSignupClick = () => {
 				var _this$core3;
 				if ((_this$core3 = this.core) === null || _this$core3 === void 0 ? void 0 : _this$core3.telemetryDisabled) return;
-				trackThreadsTalkToEngineerClicked(this.getThreadsTelemetryProps({
-					cta: "talk_to_engineer",
-					cta_surface: "threads_locked"
-				}, { includeUrlAttribution: true }));
+				trackThreadsIntelligenceSignupClicked(this.getThreadsCtaTelemetryProps("signup", "threads_locked"));
+			};
+			this.handleThreadsTalkToEngineerClick = () => {
+				var _this$core4;
+				if ((_this$core4 = this.core) === null || _this$core4 === void 0 ? void 0 : _this$core4.telemetryDisabled) return;
+				trackThreadsTalkToEngineerClicked(this.getThreadsCtaTelemetryProps("talk_to_engineer", "threads_locked"));
 			};
 			this.handleThreadDividerPointerDown = (event) => {
 				this.threadDividerResizing = true;
@@ -4244,9 +4664,52 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 				if (target.hasPointerCapture(this.threadDividerPointerId)) target.releasePointerCapture(this.threadDividerPointerId);
 				this.threadDividerResizing = false;
 			};
-			this.handleThreadsExampleOverviewVideoLoaded = () => {
-				this.threadsExampleOverviewVideoReady = true;
+			this.handleThreadsExampleOverviewVideoControl = () => {
+				const video = this.threadsExampleOverviewVideoElement;
+				if (!video) return;
+				if (this.threadsExampleOverviewVideoState === "playing") {
+					this.invalidateThreadsExampleOverviewVideoPlay();
+					try {
+						video.pause();
+					} catch (_unused4) {}
+					this.threadsExampleOverviewVideoState = "ready";
+					this.requestUpdate();
+					return;
+				}
+				if (this.threadsExampleOverviewVideoState === "failed") {
+					this.cleanupThreadsExampleOverviewVideo();
+					if (!this.isConnected || !video.isConnected) return;
+					this.threadsExampleOverviewVideoPlayOnNextBind = true;
+					this.requestUpdate();
+					return;
+				}
+				this.cancelThreadsExampleOverviewVideoGate();
+				const lifecycleGeneration = this.threadsExampleOverviewVideoLifecycleGeneration;
+				if (this.threadsExampleOverviewVideoState === "deferred") {
+					this.activateThreadsExampleOverviewVideo(video, lifecycleGeneration, true);
+					return;
+				}
+				this.playThreadsExampleOverviewVideo(video, lifecycleGeneration);
+			};
+			this.handleThreadsSetupPromptCopy = async () => {
+				var _navigator$clipboard;
+				const generation = this.threadsSetupPromptCopyGeneration += 1;
+				if (this.threadsSetupPromptCopyResetTimeoutId !== null) {
+					window.clearTimeout(this.threadsSetupPromptCopyResetTimeoutId);
+					this.threadsSetupPromptCopyResetTimeoutId = null;
+				}
+				this.threadsSetupPromptCopyState = "idle";
 				this.requestUpdate();
+				if (typeof navigator === "undefined" || !((_navigator$clipboard = navigator.clipboard) === null || _navigator$clipboard === void 0 ? void 0 : _navigator$clipboard.writeText)) {
+					this.showThreadsSetupPromptCopyState("error", generation);
+					return;
+				}
+				try {
+					await navigator.clipboard.writeText(THREADS_RUNTIME_SETUP_PROMPT);
+					this.showThreadsSetupPromptCopyState("copied", generation);
+				} catch (_unused5) {
+					this.showThreadsSetupPromptCopyState("error", generation);
+				}
 			};
 			this.handleClearEvents = () => {
 				if (this.selectedContext === "all-agents") {
@@ -4276,7 +4739,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 			};
 			this.copyResetTimeouts = /* @__PURE__ */ new WeakMap();
 			this.handleAnnouncementContentClick = (event) => {
-				var _button$getAttribute, _navigator$clipboard;
+				var _button$getAttribute, _navigator$clipboard2;
 				const target = event.target instanceof HTMLElement ? event.target : null;
 				const button = target === null || target === void 0 ? void 0 : target.closest(".announcement-code__copy");
 				if (!(button instanceof HTMLButtonElement)) {
@@ -4302,7 +4765,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 					}, 1500);
 					this.copyResetTimeouts.set(button, id);
 				};
-				if (typeof navigator !== "undefined" && ((_navigator$clipboard = navigator.clipboard) === null || _navigator$clipboard === void 0 ? void 0 : _navigator$clipboard.writeText)) navigator.clipboard.writeText(code).then(showCopied, () => {});
+				if (typeof navigator !== "undefined" && ((_navigator$clipboard2 = navigator.clipboard) === null || _navigator$clipboard2 === void 0 ? void 0 : _navigator$clipboard2.writeText)) navigator.clipboard.writeText(code).then(showCopied, () => {});
 			};
 		}
 		get core() {
@@ -4312,7 +4775,11 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 			const oldValue = this._core;
 			if (oldValue === value) return;
 			this.detachFromCore();
+			const hadResolvedCore = this.hasResolvedCore;
 			this._core = value !== null && value !== void 0 ? value : null;
+			if (this._core) this.hasResolvedCore = true;
+			if (!hadResolvedCore && this._core) this.resolvePendingPersistedMenu();
+			else if (hadResolvedCore) this.reconcileSelectedMenuVisibility();
 			this.requestUpdate("core", oldValue);
 			if (this._core) this.attachToCore(this._core);
 		}
@@ -4359,6 +4826,46 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 				}
 			];
 		}
+		/** Return the primary navigation group that owns a legacy leaf key. */
+		getGroupForMenu(key) {
+			for (const group of INSPECTOR_PRIMARY_NAVIGATION) if (INSPECTOR_GROUPS[group.key].some((menuKey) => menuKey === key)) return group.key;
+			return "threads";
+		}
+		/** Return the primary group for the current legacy leaf selection. */
+		get selectedGroup() {
+			return this.getGroupForMenu(this.selectedMenu);
+		}
+		/** Return only currently visible legacy leaves owned by a group. */
+		getVisibleMenuItemsForGroup(group) {
+			return this.menuItems.filter((item) => INSPECTOR_GROUPS[group].some((menuKey) => menuKey === item.key));
+		}
+		/** Resolve a group's last visible leaf, falling back to its first leaf. */
+		getMenuForGroup(group) {
+			var _ref8, _visibleItems$find$ke, _visibleItems$find, _visibleItems$;
+			const visibleItems = this.getVisibleMenuItemsForGroup(group);
+			const rememberedMenu = this.lastSelectedMenuByGroup[group];
+			return (_ref8 = (_visibleItems$find$ke = (_visibleItems$find = visibleItems.find((item) => item.key === rememberedMenu)) === null || _visibleItems$find === void 0 ? void 0 : _visibleItems$find.key) !== null && _visibleItems$find$ke !== void 0 ? _visibleItems$find$ke : (_visibleItems$ = visibleItems[0]) === null || _visibleItems$ === void 0 ? void 0 : _visibleItems$.key) !== null && _ref8 !== void 0 ? _ref8 : "threads";
+		}
+		/** Replace a leaf that became hidden with its group's first visible leaf. */
+		reconcileSelectedMenuVisibility() {
+			var _this$getVisibleMenuI;
+			if (this.menuItems.some((item) => item.key === this.selectedMenu)) return;
+			const group = this.getGroupForMenu(this.selectedMenu);
+			const fallbackMenu = (_this$getVisibleMenuI = this.getVisibleMenuItemsForGroup(group)[0]) === null || _this$getVisibleMenuI === void 0 ? void 0 : _this$getVisibleMenuI.key;
+			this.selectedMenu = fallbackMenu !== null && fallbackMenu !== void 0 ? fallbackMenu : "threads";
+			this.lastSelectedMenuByGroup[group] = this.selectedMenu;
+			this.persistState();
+		}
+		/** Open a primary group at its last currently visible legacy leaf. */
+		handleGroupSelect(group) {
+			this.handleMenuSelect(this.getMenuForGroup(group));
+		}
+		/** Toggle Settings without replacing or persisting the active legacy leaf. */
+		handleSettingsToggle() {
+			this.settingsOpen = !this.settingsOpen;
+			this.contextMenuOpen = false;
+			this.requestUpdate();
+		}
 		getThreadServiceStatus() {
 			var _this$_core$threadEnd;
 			if (!this._core) return "unknown";
@@ -4366,10 +4873,34 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 			return ((_this$_core$threadEnd = this._core.threadEndpoints) === null || _this$_core$threadEnd === void 0 ? void 0 : _this$_core$threadEnd.list) === false ? "unavailable" : "available";
 		}
 		areThreadEndpointsAvailable() {
-			return this.getThreadServiceStatus() !== "unavailable";
+			var _this$_core3;
+			const endpoints = (_this$_core3 = this._core) === null || _this$_core3 === void 0 ? void 0 : _this$_core3.threadEndpoints;
+			return endpoints !== null && typeof endpoints === "object" && endpoints.list !== false;
+		}
+		synchronizeThreadCapability() {
+			const enabled = this.areThreadEndpointsAvailable();
+			if (this.threadCapabilityEnabled === enabled) return;
+			this.threadCapabilityEnabled = enabled;
+			this.threadCapabilityGeneration += 1;
+			if (enabled) {
+				const core = this.core;
+				if (!core) return;
+				const threadStores = typeof core.getThreadStores === "function" ? core.getThreadStores() : {};
+				for (const [agentId, store] of Object.entries(threadStores)) this.subscribeToThreadStore(agentId, store);
+				for (const agent of Object.values(core.agents)) if (agent === null || agent === void 0 ? void 0 : agent.agentId) this.ensureOwnedThreadStore(agent.agentId);
+				return;
+			}
+			this.teardownThreadStoreSubscriptions();
+			this.teardownOwnedThreadStores();
+			if (this.selectedThreadId !== this.selectedLocalExampleThreadId) {
+				this.selectedThreadId = null;
+				this.selectedLocalExampleThreadId = null;
+			}
+			this.selectedRealThreadIsExplicit = false;
+			this.requestUpdate();
 		}
 		getActiveThreadsState() {
-			var _this$_threadsByAgent;
+			var _this$_threadsByAgent, _this$_threadsLoading;
 			const displayThreads = this.selectedContext === "all-agents" ? this._threads : (_this$_threadsByAgent = this._threadsByAgent.get(this.selectedContext)) !== null && _this$_threadsByAgent !== void 0 ? _this$_threadsByAgent : [];
 			let threadsErrorMessage = null;
 			if (this.selectedContext === "all-agents") {
@@ -4380,29 +4911,74 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 				var _this$_threadsErrorBy, _this$_threadsErrorBy2;
 				threadsErrorMessage = (_this$_threadsErrorBy = (_this$_threadsErrorBy2 = this._threadsErrorByAgent.get(this.selectedContext)) === null || _this$_threadsErrorBy2 === void 0 ? void 0 : _this$_threadsErrorBy2.message) !== null && _this$_threadsErrorBy !== void 0 ? _this$_threadsErrorBy : null;
 			}
+			const threadsLoading = this.selectedContext === "all-agents" ? Array.from(this._threadsLoadingByAgent.values()).some(Boolean) : (_this$_threadsLoading = this._threadsLoadingByAgent.get(this.selectedContext)) !== null && _this$_threadsLoading !== void 0 ? _this$_threadsLoading : false;
 			return {
 				displayThreads,
-				threadsErrorMessage
+				threadsErrorMessage,
+				threadsLoading
 			};
 		}
-		getThreadsTelemetryProps(extra = {}, options = {}) {
-			var _this$core4, _this$core$licenseSta, _this$core5, _this$core$runtimeMod, _this$core6, _this$core7, _this$core$telemetryD, _this$core8;
-			const distinctId = options.includeUrlAttribution && !((_this$core4 = this.core) === null || _this$core4 === void 0 ? void 0 : _this$core4.telemetryDisabled) ? getTelemetryDistinctIdForUrl() : null;
+		/** Bucket trusted usage without retaining exact counts or limits. */
+		getThreadsUsageBucket() {
+			const usage = this.inspectorMetadataProjection.usage;
+			if (!usage) return "absent";
+			if (usage.used === 0) return "empty";
+			if (usage.limit.kind === "finite") return usage.used < usage.limit.value ? "within_limit" : "at_or_over_limit";
+			if (usage.limit.kind === "unlimited") return "unlimited";
+			return "unknown_limit";
+		}
+		/** Classify finite usage for render-only capacity copy and color. */
+		getThreadsCapacityState() {
+			const usage = this.inspectorMetadataProjection.usage;
+			if (!usage || usage.limit.kind !== "finite") return void 0;
+			if (usage.used >= usage.limit.value) return "critical";
+			const warningThreshold = usage.limit.value - Math.floor(usage.limit.value / 10);
+			return usage.used >= warningThreshold ? "warning" : "normal";
+		}
+		/** Bucket trusted expiry data independently from the usage-limit bucket. */
+		getThreadsExpiryBucket() {
+			const usage = this.inspectorMetadataProjection.usage;
+			if (!usage || !Object.prototype.hasOwnProperty.call(usage, "expiringSoonCount")) return "unavailable";
+			if (usage.expiringSoonCount === 0) return "zero";
+			return typeof usage.expiringSoonCount === "number" && usage.expiringSoonCount > 0 ? "positive" : "unavailable";
+		}
+		/** Report only real rows visible in the active, settled Threads view. */
+		hasActiveVisibleThreads() {
+			if (this.selectedMenu !== "threads" || this.settingsOpen || !this.areThreadEndpointsAvailable()) return false;
+			const { displayThreads, threadsErrorMessage, threadsLoading } = this.getActiveThreadsState();
+			return !threadsErrorMessage && !threadsLoading && displayThreads.length > 0;
+		}
+		/** Build the closed common property set shared by all Thread events. */
+		getThreadsTelemetryProps() {
+			var _this$core$licenseSta, _this$core5, _this$core$runtimeMod, _this$core6, _this$core7;
 			const threadServiceStatus = this.getThreadServiceStatus();
 			return {
-				posthog_distinct_id: distinctId !== null && distinctId !== void 0 ? distinctId : void 0,
 				intelligence_status: threadServiceStatus === "available" ? "intelligence_enabled" : threadServiceStatus === "unavailable" ? "intelligence_not_enabled" : "unknown",
 				thread_service_status: threadServiceStatus,
 				license_status: (_this$core$licenseSta = (_this$core5 = this.core) === null || _this$core5 === void 0 ? void 0 : _this$core5.licenseStatus) !== null && _this$core$licenseSta !== void 0 ? _this$core$licenseSta : void 0,
 				runtime_mode: (_this$core$runtimeMod = (_this$core6 = this.core) === null || _this$core6 === void 0 ? void 0 : _this$core6.runtimeMode) !== null && _this$core$runtimeMod !== void 0 ? _this$core$runtimeMod : void 0,
 				runtime_url_type: getRuntimeUrlType((_this$core7 = this.core) === null || _this$core7 === void 0 ? void 0 : _this$core7.runtimeUrl),
-				telemetry_disabled: (_this$core$telemetryD = (_this$core8 = this.core) === null || _this$core8 === void 0 ? void 0 : _this$core8.telemetryDisabled) !== null && _this$core$telemetryD !== void 0 ? _this$core$telemetryD : false,
-				...extra
+				telemetry_disabled: false,
+				has_threads: this.hasActiveVisibleThreads(),
+				usage_bucket: this.getThreadsUsageBucket(),
+				expiry_bucket: this.getThreadsExpiryBucket(),
+				group_key: "threads",
+				leaf_key: "threads"
+			};
+		}
+		/** Add the frozen CTA leaves and anonymous URL attribution when allowed. */
+		getThreadsCtaTelemetryProps(cta, ctaSurface) {
+			const distinctId = getTelemetryDistinctIdForUrl();
+			return {
+				...this.getThreadsTelemetryProps(),
+				cta,
+				cta_surface: ctaSurface,
+				posthog_distinct_id: distinctId !== null && distinctId !== void 0 ? distinctId : void 0
 			};
 		}
 		getMemoriesTelemetryProps() {
-			var _this$core9;
-			const distinctId = !((_this$core9 = this.core) === null || _this$core9 === void 0 ? void 0 : _this$core9.telemetryDisabled) ? getTelemetryDistinctIdForUrl() : null;
+			var _this$core8;
+			const distinctId = !((_this$core8 = this.core) === null || _this$core8 === void 0 ? void 0 : _this$core8.telemetryDisabled) ? getTelemetryDistinctIdForUrl() : null;
 			return {
 				posthog_distinct_id: distinctId !== null && distinctId !== void 0 ? distinctId : void 0,
 				memory_count: this._memories.length,
@@ -4412,9 +4988,6 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 		getIntelligenceSignupUrl() {
 			return this.appendRefParam(INTELLIGENCE_SIGNUP_URL, "cpk-inspector");
 		}
-		getThreadsIntelligenceSignupUrl() {
-			return this.appendRefParam(THREADS_INTELLIGENCE_SIGNIN_URL, "cpk-inspector");
-		}
 		getTalkToEngineerUrl() {
 			return this.appendRefParam(TALK_TO_ENGINEER_URL, "cpk-inspector-threads");
 		}
@@ -4424,29 +4997,54 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 		getThreadsDocsUrl() {
 			return this.appendRefParam(THREADS_DOCS_URL, "cpk-inspector-threads");
 		}
+		getThreadsRuntimeSetupDocsUrl() {
+			return this.appendRefParam(THREADS_RUNTIME_SETUP_DOCS_URL, "cpk-inspector-threads");
+		}
+		getThreadsIntelligenceSignupUrl() {
+			return this.appendRefParam(INTELLIGENCE_SIGNUP_URL, "cpk-inspector-threads");
+		}
 		getSelfHostedIntelligenceUrl() {
 			return this.appendRefParam(SELF_HOSTED_INTELLIGENCE_URL, "cpk-inspector-threads");
 		}
+		/** Selects the onboarding path for an enabled runtime with no saved Threads. */
+		getThreadsEmptyOnboardingAction() {
+			var _this$inspectorMetada;
+			const planCode = (_this$inspectorMetada = this.inspectorMetadataProjection.plan) === null || _this$inspectorMetada === void 0 ? void 0 : _this$inspectorMetada.code.trim().toLowerCase();
+			if (planCode === "team_self_hosted" || planCode === "team-self-hosted") return {
+				href: this.getSelfHostedIntelligenceUrl(),
+				label: "Explore self-hosted Intelligence"
+			};
+			return {
+				href: this.getThreadsIntelligenceSignupUrl(),
+				label: "Sign up for Intelligence"
+			};
+		}
 		subscribeToThreadStore(agentId, store) {
 			if (!this.areThreadEndpointsAvailable()) return;
 			if (this._threadStoreSubscriptions.has(agentId)) return;
+			const capabilityGeneration = this.threadCapabilityGeneration;
 			const threadsSub = store.select(_copilotkit_core.ɵselectThreads).subscribe((threads) => {
+				if (capabilityGeneration !== this.threadCapabilityGeneration || !this.areThreadEndpointsAvailable()) return;
 				this._threadsByAgent.set(agentId, threads);
 				this._threads = Array.from(this._threadsByAgent.values()).flat();
 				this.autoSelectLatestThread();
 				this.requestUpdate();
 			});
-			const errorSub = store.select(_copilotkit_core.ɵselectThreadsError).subscribe((error) => {
+			const statusSub = store.select(createThreadStoreStatusSelector()).subscribe(({ error, isLoading }) => {
+				if (capabilityGeneration !== this.threadCapabilityGeneration || !this.areThreadEndpointsAvailable()) return;
 				if (error) this._threadsErrorByAgent.set(agentId, error);
 				else this._threadsErrorByAgent.delete(agentId);
+				this._threadsLoadingByAgent.set(agentId, isLoading);
 				this.requestUpdate();
 			});
 			this._threadStoreSubscriptions.set(agentId, () => {
 				threadsSub.unsubscribe();
-				errorSub.unsubscribe();
+				statusSub.unsubscribe();
 			});
+			if (capabilityGeneration !== this.threadCapabilityGeneration || !this.areThreadEndpointsAvailable()) return;
 			const initialState = store.getState();
 			this._threadsByAgent.set(agentId, (0, _copilotkit_core.ɵselectThreads)(initialState));
+			this._threadsLoadingByAgent.set(agentId, (0, _copilotkit_core.ɵselectThreadsIsLoading)(initialState));
 			const initialError = (0, _copilotkit_core.ɵselectThreadsError)(initialState);
 			if (initialError) this._threadsErrorByAgent.set(agentId, initialError);
 			else this._threadsErrorByAgent.delete(agentId);
@@ -4454,23 +5052,38 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 			this.autoSelectLatestThread();
 		}
 		autoSelectLatestThread() {
-			if (this._threads.length === 0) return;
-			if (!(this.selectedThreadId != null && !this.isExampleThreadId(this.selectedThreadId) && this._threads.some((t) => t.id === this.selectedThreadId))) this.selectedThreadId = this._threads[0].id;
+			if (!this.areThreadEndpointsAvailable()) return;
+			const { displayThreads } = this.getActiveThreadsState();
+			const previousSelectedThreadId = this.selectedThreadId;
+			if (this.selectedLocalExampleThreadId !== null && previousSelectedThreadId === this.selectedLocalExampleThreadId && displayThreads.length === 0) {
+				this.selectedRealThreadIsExplicit = false;
+				return;
+			}
+			if (this.selectedLocalExampleThreadId !== null) this.exampleTourActive = false;
+			this.selectedLocalExampleThreadId = null;
+			const explicitSelectedThreadId = this.selectedRealThreadIsExplicit ? previousSelectedThreadId : null;
+			const nextSelectedThreadId = selectVisibleRealThreadId({
+				threads: displayThreads,
+				selectedThreadId: explicitSelectedThreadId
+			});
+			this.selectedThreadId = nextSelectedThreadId;
+			this.selectedRealThreadIsExplicit = explicitSelectedThreadId !== null && nextSelectedThreadId === explicitSelectedThreadId;
 		}
 		teardownThreadStoreSubscriptions() {
 			for (const unsub of this._threadStoreSubscriptions.values()) unsub();
 			this._threadStoreSubscriptions.clear();
 			this._threadsByAgent.clear();
 			this._threadsErrorByAgent.clear();
+			this._threadsLoadingByAgent.clear();
 			this._threads = [];
 		}
 		ensureOwnedThreadStore(agentId) {
-			var _this$core10, _core$intelligence;
+			var _this$core9, _core$intelligence;
+			if (!this.areThreadEndpointsAvailable()) return;
 			if (this._ownedThreadStores.has(agentId)) return;
-			if ((_this$core10 = this.core) === null || _this$core10 === void 0 ? void 0 : _this$core10.getThreadStore(agentId)) return;
+			if ((_this$core9 = this.core) === null || _this$core9 === void 0 ? void 0 : _this$core9.getThreadStore(agentId)) return;
 			const core = this.core;
 			if (!(core === null || core === void 0 ? void 0 : core.runtimeUrl)) return;
-			if (!this.areThreadEndpointsAvailable()) return;
 			const store = (0, _copilotkit_core.ɵcreateThreadStore)({ fetch: globalThis.fetch });
 			store.start();
 			store.setContext({
@@ -4484,11 +5097,13 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 			core.registerThreadStore(agentId, store);
 		}
 		refreshOwnedThreadStore(agentId) {
+			if (!this.areThreadEndpointsAvailable()) return;
 			const store = this._ownedThreadStores.get(agentId);
 			if (!store) return;
 			store.refresh();
 		}
 		updateOwnedThreadStoreHeaders(headers) {
+			if (!this.areThreadEndpointsAvailable()) return;
 			const core = this.core;
 			if (!(core === null || core === void 0 ? void 0 : core.runtimeUrl)) return;
 			for (const [agentId, store] of this._ownedThreadStores) {
@@ -4502,36 +5117,67 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 			}
 		}
 		removeOwnedThreadStore(agentId) {
-			var _this$core11;
+			var _this$core10;
 			const store = this._ownedThreadStores.get(agentId);
 			if (!store) return;
-			store.stop();
-			(_this$core11 = this.core) === null || _this$core11 === void 0 || _this$core11.unregisterThreadStore(agentId);
 			this._ownedThreadStores.delete(agentId);
+			store.stop();
+			if (((_this$core10 = this.core) === null || _this$core10 === void 0 ? void 0 : _this$core10.getThreadStore(agentId)) === store) this.core.unregisterThreadStore(agentId);
 		}
 		teardownOwnedThreadStores() {
-			for (const [agentId, store] of this._ownedThreadStores) {
-				var _this$core12;
+			const ownedThreadStores = Array.from(this._ownedThreadStores);
+			this._ownedThreadStores.clear();
+			for (const [agentId, store] of ownedThreadStores) {
+				var _this$core11;
 				store.stop();
-				(_this$core12 = this.core) === null || _this$core12 === void 0 || _this$core12.unregisterThreadStore(agentId);
+				if (((_this$core11 = this.core) === null || _this$core11 === void 0 ? void 0 : _this$core11.getThreadStore(agentId)) === store) this.core.unregisterThreadStore(agentId);
 			}
-			this._ownedThreadStores.clear();
+		}
+		coreSupportsInspectorMetadata(core) {
+			try {
+				return "inspectorMetadata" in core;
+			} catch (_unused6) {
+				return false;
+			}
+		}
+		readCoreInspectorMetadata(core) {
+			if (!this.coreSupportsInspectorMetadata(core)) return;
+			try {
+				return core.inspectorMetadata;
+			} catch (_unused7) {
+				return;
+			}
+		}
+		updateInspectorMetadataProjection(value) {
+			this.inspectorMetadataValue = value;
+			let runtimeLicense;
+			try {
+				var _this$_core4;
+				runtimeLicense = (_this$_core4 = this._core) === null || _this$_core4 === void 0 ? void 0 : _this$_core4.licenseStatus;
+			} catch (_unused8) {
+				runtimeLicense = void 0;
+			}
+			this.inspectorMetadataProjection = projectInspectorMetadata(value, runtimeLicense);
 		}
 		attachToCore(core) {
 			this.runtimeStatus = core.runtimeConnectionStatus;
 			this.coreProperties = core.properties;
 			this.lastCoreError = null;
+			const supportsInspectorMetadata = this.coreSupportsInspectorMetadata(core);
+			this.updateInspectorMetadataProjection(this.readCoreInspectorMetadata(core));
 			this.coreSubscriber = {
 				onRuntimeConnectionStatusChanged: ({ status }) => {
 					this.runtimeStatus = status;
+					this.updateInspectorMetadataProjection(this.inspectorMetadataValue);
+					const threadCapabilityWasEnabled = this.threadCapabilityEnabled === true;
+					this.synchronizeThreadCapability();
 					if (status === "connected") {
 						if (!core.telemetryDisabled) {
 							ensureTelemetryDistinctId();
 							maybeShowDisclosure();
 						}
 						this.flushPendingBannerViewed();
-						if (this.areThreadEndpointsAvailable()) for (const agentId of this._ownedThreadStores.keys()) this.refreshOwnedThreadStore(agentId);
-						else this.teardownOwnedThreadStores();
+						if (threadCapabilityWasEnabled && this.areThreadEndpointsAvailable()) for (const agentId of this._ownedThreadStores.keys()) this.refreshOwnedThreadStore(agentId);
 					} else {
 						this._threadsByAgent.clear();
 						this._threads = [];
@@ -4546,6 +5192,11 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 					this.updateOwnedThreadStoreHeaders(headers);
 					this.requestUpdate();
 				},
+				...supportsInspectorMetadata ? { onInspectorMetadataChanged: ({ inspectorMetadata }) => {
+					if (this._core !== core) return;
+					this.updateInspectorMetadataProjection(inspectorMetadata);
+					this.requestUpdate();
+				} } : {},
 				onError: ({ code, error }) => {
 					this.lastCoreError = {
 						code,
@@ -4564,18 +5215,25 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 					this.requestUpdate();
 				},
 				onThreadStoreRegistered: ({ agentId, store }) => {
+					if (!this.areThreadEndpointsAvailable()) return;
 					this.subscribeToThreadStore(agentId, store);
 					this.requestUpdate();
 				},
-				onThreadStoreUnregistered: ({ agentId }) => {
+				onThreadStoreUnregistered: ({ agentId, prevStore }) => {
 					const unsub = this._threadStoreSubscriptions.get(agentId);
 					if (unsub) {
 						unsub();
 						this._threadStoreSubscriptions.delete(agentId);
 					}
+					if (this._ownedThreadStores.get(agentId) === prevStore) {
+						this._ownedThreadStores.delete(agentId);
+						prevStore.stop();
+					}
 					this._threadsByAgent.delete(agentId);
 					this._threadsErrorByAgent.delete(agentId);
+					this._threadsLoadingByAgent.delete(agentId);
 					this._threads = Array.from(this._threadsByAgent.values()).flat();
+					this.autoSelectLatestThread();
 					this.requestUpdate();
 				}
 			};
@@ -4589,7 +5247,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 				this.flushPendingBannerViewed();
 			}
 			const threadStores = typeof core.getThreadStores === "function" ? core.getThreadStores() : {};
-			for (const [agentId, store] of Object.entries(threadStores)) this.subscribeToThreadStore(agentId, store);
+			if (this.areThreadEndpointsAvailable()) for (const [agentId, store] of Object.entries(threadStores)) this.subscribeToThreadStore(agentId, store);
 			if (core.context) this.contextStore = this.normalizeContextStore(core.context);
 			if (this.selectedMenu === "memories") this.ensureMemorySubscription();
 		}
@@ -4653,10 +5311,10 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 		* reachable from the Intelligence-gated memory view, so it inherits the gate.
 		*/
 		runRecall(query) {
-			var _this$_core3, _this$_core3$getMemor;
+			var _this$_core5, _this$_core5$getMemor;
 			const trimmed = query.trim();
 			if (trimmed.length === 0) return;
-			const store = (_this$_core3 = this._core) === null || _this$_core3 === void 0 || (_this$_core3$getMemor = _this$_core3.getMemoryStore) === null || _this$_core3$getMemor === void 0 ? void 0 : _this$_core3$getMemor.call(_this$_core3);
+			const store = (_this$_core5 = this._core) === null || _this$_core5 === void 0 || (_this$_core5$getMemor = _this$_core5.getMemoryStore) === null || _this$_core5$getMemor === void 0 ? void 0 : _this$_core5$getMemor.call(_this$_core5);
 			if (!store || typeof store.recall !== "function") {
 				this._recallResults = [];
 				this._recallError = "Recall is not supported by this SDK version.";
@@ -4693,6 +5351,13 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 		}
 		detachFromCore() {
 			var _this$_memoryUnsub;
+			this.threadCapabilityGeneration += 1;
+			this.threadCapabilityEnabled = null;
+			if (this.selectedThreadId !== this.selectedLocalExampleThreadId) {
+				this.selectedThreadId = null;
+				this.selectedLocalExampleThreadId = null;
+			}
+			this.selectedRealThreadIsExplicit = false;
 			if (this.coreUnsubscribe) {
 				this.coreUnsubscribe();
 				this.coreUnsubscribe = null;
@@ -4713,6 +5378,9 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 			this._recallQuery = "";
 			this.coreSubscriber = null;
 			this.runtimeStatus = null;
+			this.inspectorMetadataValue = void 0;
+			this.inspectorMetadataProjection = projectInspectorMetadata(void 0, void 0);
+			this.metadataTelemetryFingerprints.clear();
 			this.lastCoreError = null;
 			this.coreProperties = {};
 			this.cachedTools = [];
@@ -4731,6 +5399,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 			this.eventCounter = 0;
 		}
 		processAgentsChanged(agents) {
+			this.synchronizeThreadCapability();
 			const seenAgentIds = /* @__PURE__ */ new Set();
 			for (const agent of Object.values(agents)) {
 				if (!(agent === null || agent === void 0 ? void 0 : agent.agentId)) continue;
@@ -4796,7 +5465,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 						event: params.event,
 						result: "result" in params ? params.result : void 0
 					});
-					this.refreshOwnedThreadStore(agentId);
+					if (this.areThreadEndpointsAvailable()) this.refreshOwnedThreadStore(agentId);
 				},
 				onRunErrorEvent: ({ event }) => {
 					this.recordAgentEvent(agentId, "RUN_ERROR", event);
@@ -4969,6 +5638,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 			}
 		}
 		updateContextOptions(agentIds) {
+			let selectedContextChanged = false;
 			const nextOptions = [{
 				key: "all-agents",
 				label: "All Agents"
@@ -4985,12 +5655,14 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 				if ((pendingContext === "all-agents" || agentIds.has(pendingContext)) && (pendingContext === "all-agents" || agentIds.size === 1)) {
 					if (this.selectedContext !== pendingContext) {
 						this.selectedContext = pendingContext;
+						selectedContextChanged = true;
 						this.expandedRows.clear();
 					}
 					this.pendingSelectedContext = null;
 				} else if (agentIds.size > 0) {
 					if (this.selectedContext !== "all-agents") {
 						this.selectedContext = "all-agents";
+						selectedContextChanged = true;
 						this.expandedRows.clear();
 					}
 					this.pendingSelectedContext = null;
@@ -5001,10 +5673,12 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 				if (agentIds.size === 1) nextSelected = Array.from(agentIds)[0];
 				if (this.selectedContext !== nextSelected) {
 					this.selectedContext = nextSelected;
+					selectedContextChanged = true;
 					this.expandedRows.clear();
 					this.persistState();
 				}
 			}
+			if (selectedContextChanged) this.autoSelectLatestThread();
 		}
 		getEventsForSelectedContext() {
 			var _this$agentEvents$get2;
@@ -5066,8 +5740,8 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(stateValue))}</p
 			return lit.html`
       <div class="mt-2 space-y-2">
         ${toolCalls.map((call, index) => {
-				var _ref5, _call$function$name, _call$function, _call$function2;
-				const functionName = (_ref5 = (_call$function$name = (_call$function = call.function) === null || _call$function === void 0 ? void 0 : _call$function.name) !== null && _call$function$name !== void 0 ? _call$function$name : call.toolName) !== null && _ref5 !== void 0 ? _ref5 : "Unknown function";
+				var _ref9, _call$function$name, _call$function, _call$function2;
+				const functionName = (_ref9 = (_call$function$name = (_call$function = call.function) === null || _call$function === void 0 ? void 0 : _call$function.name) !== null && _call$function$name !== void 0 ? _call$function$name : call.toolName) !== null && _ref9 !== void 0 ? _ref9 : "Unknown function";
 				const callId = typeof (call === null || call === void 0 ? void 0 : call.id) === "string" ? call.id : `tool-call-${index + 1}`;
 				const argsString = this.formatToolCallArguments((_call$function2 = call.function) === null || _call$function2 === void 0 ? void 0 : _call$function2.arguments);
 				return lit.html`
@@ -5096,12 +5770,12 @@ ${argsString}</pre
 			if (typeof args === "string") try {
 				const parsed = JSON.parse(args);
 				return JSON.stringify(parsed, null, 2);
-			} catch (_unused3) {
+			} catch (_unused9) {
 				return args;
 			}
 			if (typeof args === "object") try {
 				return JSON.stringify(args, null, 2);
-			} catch (_unused4) {
+			} catch (_unused10) {
 				return String(args);
 			}
 			return String(args);
@@ -5124,13 +5798,13 @@ ${argsString}</pre
 				try {
 					const parsed = JSON.parse(trimmed);
 					return JSON.stringify(parsed, null, 2);
-				} catch (_unused5) {
+				} catch (_unused11) {
 					return state;
 				}
 			}
 			if (typeof state === "object") try {
 				return JSON.stringify(state, null, 2);
-			} catch (_unused6) {
+			} catch (_unused12) {
 				return String(state);
 			}
 			return String(state);
@@ -5177,6 +5851,8 @@ ${argsString}</pre
 		connectedCallback() {
 			super.connectedCallback();
 			if (typeof window !== "undefined") {
+				var _window$matchMedia$ma, _window$matchMedia, _window;
+				this.threadsExampleOverviewVideoReducedMotion = (_window$matchMedia$ma = (_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-reduced-motion: reduce)").matches) !== null && _window$matchMedia$ma !== void 0 ? _window$matchMedia$ma : false;
 				this.ensureBrandFonts();
 				window.addEventListener("resize", this.handleResize);
 				window.addEventListener("pointerdown", this.handleGlobalPointerDown);
@@ -5185,6 +5861,7 @@ ${argsString}</pre
 				this.tryAutoAttachCore();
 				this.ensureAnnouncementLoading();
 			}
+			this.requestUpdate();
 		}
 		ensureBrandFonts() {
 			const FONT_LINK_ID = "cpk-inspector-brand-fonts";
@@ -5207,14 +5884,13 @@ ${argsString}</pre
 				clearTimeout(this.transitionTimeoutId);
 				this.transitionTimeoutId = null;
 			}
-			if (this.threadsExampleOverviewVideoLoadTimer !== null) {
-				window.clearTimeout(this.threadsExampleOverviewVideoLoadTimer);
-				this.threadsExampleOverviewVideoLoadTimer = null;
-			}
-			if (this.threadsExampleOverviewVideoIdleCallbackId !== null && typeof window.cancelIdleCallback === "function") {
-				window.cancelIdleCallback(this.threadsExampleOverviewVideoIdleCallbackId);
-				this.threadsExampleOverviewVideoIdleCallbackId = null;
+			this.threadsSetupPromptCopyGeneration += 1;
+			if (this.threadsSetupPromptCopyResetTimeoutId !== null) {
+				window.clearTimeout(this.threadsSetupPromptCopyResetTimeoutId);
+				this.threadsSetupPromptCopyResetTimeoutId = null;
 			}
+			this.threadsSetupPromptCopyState = "idle";
+			this.cleanupThreadsExampleOverviewVideo();
 			this.removeDockStyles(true);
 			this.detachFromCore();
 		}
@@ -5240,6 +5916,7 @@ ${argsString}</pre
 				y: EDGE_MARGIN
 			};
 			this.hydrateStateFromStorage();
+			this.contextState.window.size = this.clampWindowSize(this.contextState.window.size);
 			if (this.selectedMenu === "memories") this.ensureMemorySubscription();
 			if (this.isOpen && this.dockMode !== "floating") this.applyDockStyles(true);
 			this.applyAnchorPosition("button");
@@ -5251,6 +5928,36 @@ ${argsString}</pre
 		render() {
 			return this.isOpen ? this.renderWindow() : this.renderButton();
 		}
+		willUpdate() {
+			this.reconcileSelectedMenuVisibility();
+		}
+		updated() {
+			var _this$shadowRoot3;
+			this.syncThreadsExampleOverviewVideo();
+			this.maybeTrackInspectorMetadataViews();
+			if (!this.isOpen || this.selectedGroup !== "agents") {
+				this.lastScrolledAgentNavigationLayout = null;
+				return;
+			}
+			const navigation = (_this$shadowRoot3 = this.shadowRoot) === null || _this$shadowRoot3 === void 0 ? void 0 : _this$shadowRoot3.querySelector("nav[aria-label=\"Agent navigation\"]");
+			if (!navigation) return;
+			const activeControl = navigation.querySelector("[aria-current=\"page\"]");
+			if (!activeControl) return;
+			const layoutKey = [
+				this.selectedMenu,
+				this.dockMode,
+				Math.round(this.contextState.window.size.width),
+				typeof window === "undefined" ? 0 : window.innerWidth,
+				navigation.clientWidth,
+				navigation.scrollWidth
+			].join(":");
+			if (this.lastScrolledAgentNavigationLayout === layoutKey) return;
+			if (typeof activeControl.scrollIntoView === "function") activeControl.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			});
+			this.lastScrolledAgentNavigationLayout = layoutKey;
+		}
 		renderButton() {
 			return lit.html`
       <div class="console-button-wrapper">
@@ -5306,24 +6013,80 @@ ${argsString}</pre
         </button>
         ${this.renderAnnouncementPreview()}
       </div>
+    `;
+		}
+		/** Render a trusted action with optional context-specific copy. */
+		renderInspectorAction(action, placement, displayLabel = action.label) {
+			const actionIntent = displayLabel === "Upgrade Your Plan" ? "upgrade" : void 0;
+			return lit.html`
+      <a
+        data-inspector-action-placement=${placement}
+        data-inspector-action-intent=${actionIntent !== null && actionIntent !== void 0 ? actionIntent : lit.nothing}
+        href=${action.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="${displayLabel} (opens in a new tab)"
+        style=${placement === "threads-footer" ? "" : "display:inline-flex;min-height:34px;align-items:center;justify-content:center;gap:6px;border:1px solid #dbdbe5;border-radius:6px;background:#ffffff;padding:8px 12px;color:#57575b;font-size:12px;font-weight:600;text-decoration:none;outline-style:solid;outline-width:2px;outline-color:transparent;outline-offset:2px;cursor:pointer;"}
+        @click=${() => this.handleInspectorMetadataActionClick(action, placement)}
+      >
+        ${displayLabel}
+      </a>
+    `;
+		}
+		renderInspectorMetadataHeader() {
+			const { identity, plan } = this.inspectorMetadataProjection;
+			if (!identity && !plan) return lit.nothing;
+			return lit.html`
+      <div
+        style="display:flex;min-width:0;flex:1 1 220px;flex-wrap:wrap;align-items:center;gap:6px 8px;"
+        role="group"
+        aria-label="Inspector account details"
+      >
+        ${identity ? lit.html`
+                <div
+                  data-inspector-metadata="identity"
+                  style="display:flex;min-width:0;max-width:100%;align-items:center;gap:6px;color:#e7e7ec;font-size:11px;line-height:1.3;"
+                  title="${identity.organizationName} / ${identity.projectName}"
+                >
+                  <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
+                    >${identity.organizationName}</span
+                  >
+                  <span aria-hidden="true" style="color:#68686e;">/</span>
+                  <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
+                    >${identity.projectName}</span
+                  >
+                </div>
+              ` : lit.nothing}
+        ${plan ? lit.html`
+                <span
+                  data-inspector-metadata="plan"
+                  style="display:inline-flex;min-height:22px;align-items:center;border:1px solid rgba(133,236,206,0.5);border-radius:4px;background:rgba(133,236,206,0.14);padding:2px 7px;color:#85ecce;font-size:10px;font-weight:600;line-height:1.2;white-space:nowrap;"
+                  >${plan.label}</span
+                >
+              ` : lit.nothing}
+      </div>
     `;
 		}
 		renderWindow() {
 			const windowState = this.contextState.window;
 			const isDocked = this.dockMode !== "floating";
 			const isTransitioning = this.hasAttribute("data-transitioning");
-			const windowStyles = isDocked ? this.getDockedWindowStyles() : {
+			const windowStyles = isDocked ? {
+				...this.getDockedWindowStyles(),
+				overflowX: "hidden"
+			} : {
 				width: `${Math.round(windowState.size.width)}px`,
 				height: `${Math.round(windowState.size.height)}px`,
 				minWidth: `${MIN_WINDOW_WIDTH}px`,
-				minHeight: `${MIN_WINDOW_HEIGHT}px`
+				minHeight: `${MIN_WINDOW_HEIGHT}px`,
+				overflowX: "hidden"
 			};
-			const hasContextDropdown = this.contextOptions.length > 0;
+			const hasContextDropdown = this.contextOptions.some((option) => option.key !== "all-agents");
 			const contextDropdown = hasContextDropdown ? this.renderContextDropdown() : lit.nothing;
 			const coreStatus = this.getCoreStatusSummary();
 			const agentSelector = hasContextDropdown ? contextDropdown : lit.html`
           <div
-            class="flex items-center gap-2 rounded-md border border-dashed border-gray-200 px-2 py-1 text-xs text-gray-400"
+            class="inspector-agent-placeholder flex items-center gap-2 rounded-md border border-dashed px-2 py-1 text-xs"
           >
             <span>${this.renderIcon("Bot")}</span>
             <span class="truncate">No agents available</span>
@@ -5358,32 +6121,41 @@ ${argsString}</pre
             @pointerup=${isDocked ? void 0 : this.handlePointerUp}
             @pointercancel=${isDocked ? void 0 : this.handlePointerCancel}
           >
-            <div class="flex flex-wrap items-center gap-3 px-4 py-3">
+            <div
+              class="inspector-account-strip flex flex-wrap items-center gap-3 px-4 py-3"
+              data-inspector-account-strip
+              style="width:100%;min-width:0;background-color:#010507;color:#ffffff;"
+            >
               <div class="flex items-center min-w-0">
                 <img
                   src=${inspector_logo_default}
                   alt="Inspector logo"
-                  class="h-6 w-auto"
+                  class="inspector-account-logo h-6 w-auto"
                   loading="lazy"
                 />
               </div>
+              ${this.renderInspectorMetadataHeader()}
               <div class="ml-auto flex min-w-0 items-center gap-2">
-                <div class="min-w-[160px] max-w-xs">${agentSelector}</div>
+                <div class="inspector-agent-selector min-w-[160px] max-w-xs">
+                  ${agentSelector}
+                </div>
                 <div class="flex items-center gap-1">
                   ${this.renderDockControls()}
                   <button
-                    class="flex h-8 w-8 items-center justify-center rounded-md transition hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400 ${this.selectedMenu === "settings" ? "bg-gray-100 text-gray-700" : "text-gray-400 hover:text-gray-600"}"
+                    class="inspector-account-control flex h-8 w-8 items-center justify-center rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ${this.settingsOpen ? "inspector-account-control-active" : ""}"
                     type="button"
                     aria-label="Settings"
-                    aria-pressed=${this.selectedMenu === "settings"}
-                    @click=${() => this.handleMenuSelect(this.selectedMenu === "settings" ? "ag-ui-events" : "settings")}
+                    aria-pressed=${this.settingsOpen}
+                    style=${INTERACTIVE_FOCUS_BASE_STYLE}
+                    @click=${this.handleSettingsToggle}
                   >
                     ${this.renderIcon("Settings")}
                   </button>
                   <button
-                    class="flex h-8 w-8 items-center justify-center rounded-md 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"
+                    class="inspector-account-control flex h-8 w-8 items-center justify-center rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
                     type="button"
                     aria-label="Close Web Inspector"
+                    style=${INTERACTIVE_FOCUS_BASE_STYLE}
                     @pointerdown=${this.handleClosePointerDown}
                     @click=${this.handleCloseClick}
                   >
@@ -5392,37 +6164,73 @@ ${argsString}</pre
                 </div>
               </div>
             </div>
-            <div
-              class="flex flex-wrap items-center gap-2 border-t border-gray-100 px-3 py-2 text-xs"
+            <nav
+              class="inspector-primary-navigation"
+              aria-label="Inspector primary navigation"
+              style="overflow-x:auto;overflow-y:hidden;cursor:default;"
             >
-              ${this.menuItems.map(({ key, label, icon }) => {
-				const isSelected = this.selectedMenu === key;
+              ${INSPECTOR_PRIMARY_NAVIGATION.map(({ key, label, icon }) => {
+				const isSelected = this.selectedGroup === key;
+				const legacyMenuKey = key === "threads" ? "threads" : key === "learning" ? "memories" : void 0;
 				return lit.html`
                   <button
                     type="button"
-                    class=${["inline-flex items-center gap-2 rounded-md px-3 py-2 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300", isSelected ? "cpk-tab-active" : "cpk-tab-inactive"].join(" ")}
-                    aria-pressed=${isSelected}
-                    @click=${() => this.handleMenuSelect(key)}
+                    class="inspector-nav-control inspector-primary-control ${isSelected ? "inspector-nav-control-active" : ""}"
+                    data-inspector-group=${key}
+                    data-inspector-menu-key=${legacyMenuKey !== null && legacyMenuKey !== void 0 ? legacyMenuKey : lit.nothing}
+                    aria-current=${isSelected ? "page" : lit.nothing}
+                    style=${INTERACTIVE_FOCUS_BASE_STYLE}
+                    @click=${() => this.handleGroupSelect(key)}
                   >
-                    <span class="cpk-tab-icon">
-                      ${key in this.customTabIcons ? (0, lit_directives_unsafe_html_js.unsafeHTML)(this.customTabIcons[key]) : this.renderIcon(icon)}
+                    <span class="inspector-nav-icon" aria-hidden="true">
+                      ${key === "threads" ? (0, lit_directives_unsafe_html_js.unsafeHTML)(this.customTabIcons.threads) : this.renderIcon(icon)}
                     </span>
                     <span>${label}</span>
                   </button>
                 `;
 			})}
-              ${this.selectedMenu === "threads" ? lit.html`
+              ${this.selectedGroup === "threads" ? lit.html`
                       <a
+                        data-inspector-thread-cta
                         href=${this.getThreadsTalkToEngineerUrl()}
                         target="_blank"
-                        rel="noopener"
-                        style="margin-left:auto;display:inline-flex;align-items:center;gap:6px;border-radius:6px;border:1px solid #dbdbe5;background:#ffffff;padding:7px 10px;font-size:12px;font-weight:600;color:#57575b;text-decoration:none;"
+                        rel="noopener noreferrer"
+                        aria-label="Talk to an Engineer (opens in a new tab)"
+                        style=${INTERACTIVE_FOCUS_BASE_STYLE}
                         @click=${this.handleTalkToEngineerClick}
                       >
                         Talk to an Engineer
                       </a>
                     ` : lit.nothing}
-            </div>
+            </nav>
+            ${this.selectedGroup === "agents" ? lit.html`
+                    <nav
+                      class="inspector-child-navigation"
+                      aria-label="Agent navigation"
+                      style="overflow-x:auto;overflow-y:hidden;white-space:nowrap;cursor:default;"
+                    >
+                      ${this.getVisibleMenuItemsForGroup("agents").map(({ key, label, icon }) => {
+				const isSelected = this.selectedMenu === key;
+				return lit.html`
+                            <button
+                              type="button"
+                              class="inspector-nav-control inspector-child-control ${isSelected ? "inspector-nav-control-active" : ""}"
+                              data-inspector-menu-key=${key}
+                              aria-current=${isSelected ? "page" : lit.nothing}
+                              style=${INTERACTIVE_FOCUS_BASE_STYLE}
+                              @click=${() => this.handleMenuSelect(key)}
+                            >
+                              <span
+                                class="inspector-nav-icon"
+                                aria-hidden="true"
+                                >${this.renderIcon(icon)}</span
+                              >
+                              <span>${label}</span>
+                            </button>
+                          `;
+			})}
+                    </nav>
+                  ` : lit.nothing}
           </div>
           <div class="flex flex-1 flex-col overflow-hidden">
             <div id="cpk-main-scroll" class="flex-1 overflow-auto">
@@ -5478,10 +6286,7 @@ ${argsString}</pre
 			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;
-			}
+			this.restorePersistedMenu(persisted.selectedMenu);
 			if (typeof persisted.selectedContext === "string") {
 				this.selectedContext = persisted.selectedContext;
 				this.pendingSelectedContext = persisted.selectedContext;
@@ -5491,6 +6296,7 @@ ${argsString}</pre
 			if (typeof document === "undefined" || typeof window === "undefined") return;
 			const persisted = loadInspectorState(INSPECTOR_STORAGE_KEY);
 			if (!persisted) return;
+			this.restorePersistedMenu(persisted.selectedMenu);
 			const persistedButton = persisted.button;
 			if (persistedButton) {
 				if (isValidAnchor(persistedButton.anchor)) this.contextState.button.anchor = persistedButton.anchor;
@@ -5509,6 +6315,28 @@ ${argsString}</pre
 				this.pendingSelectedContext = persisted.selectedContext;
 			}
 		}
+		/** Restore a visible legacy leaf, or use Threads for stale state. */
+		restorePersistedMenu(value) {
+			this.selectedMenu = "threads";
+			this.lastSelectedMenuByGroup.threads = "threads";
+			this.pendingPersistedMenu = null;
+			if (!isInspectorMenuKey(value)) return;
+			const validMenu = this.menuItems.find((item) => item.key === value);
+			if (!validMenu) {
+				if (!this.hasResolvedCore) this.pendingPersistedMenu = value;
+				return;
+			}
+			this.selectedMenu = validMenu.key;
+			this.lastSelectedMenuByGroup[this.getGroupForMenu(validMenu.key)] = validMenu.key;
+		}
+		/** Resolve a valid stored leaf after the first Core exposes its sources. */
+		resolvePendingPersistedMenu() {
+			const pendingMenu = this.pendingPersistedMenu;
+			if (!pendingMenu) return;
+			this.pendingPersistedMenu = null;
+			this.restorePersistedMenu(pendingMenu);
+			this.persistState();
+		}
 		get activeContext() {
 			return this.isOpen ? "window" : "button";
 		}
@@ -5558,7 +6386,7 @@ ${argsString}</pre
 			};
 		}
 		persistState() {
-			var _state$selectedContex;
+			var _this$pendingPersiste, _state$selectedContex;
 			const state = {
 				button: {
 					anchor: this.contextState.button.anchor,
@@ -5576,7 +6404,7 @@ ${argsString}</pre
 				},
 				isOpen: this.isOpen,
 				dockMode: this.dockMode,
-				selectedMenu: this.selectedMenu,
+				selectedMenu: (_this$pendingPersiste = this.pendingPersistedMenu) !== null && _this$pendingPersiste !== void 0 ? _this$pendingPersiste : this.selectedMenu,
 				selectedContext: this.selectedContext
 			};
 			saveInspectorState(INSPECTOR_STORAGE_KEY, state);
@@ -5599,7 +6427,7 @@ ${argsString}</pre
 				if (mode === "docked-left") this.contextState.window.size.width = DOCKED_LEFT_WIDTH;
 				this.applyDockStyles();
 			} else {
-				this.contextState.window.size = { ...DEFAULT_WINDOW_SIZE };
+				this.contextState.window.size = this.clampWindowSize(DEFAULT_WINDOW_SIZE);
 				this.centerContext("window");
 			}
 			this.persistState();
@@ -5758,6 +6586,7 @@ ${argsString}</pre
           type="button"
           aria-label="Dock to left"
           title="Dock Left"
+          style=${INTERACTIVE_FOCUS_BASE_STYLE}
           @click=${() => this.handleDockClick("docked-left")}
         >
           ${this.renderIcon("PanelLeft")}
@@ -5769,6 +6598,7 @@ ${argsString}</pre
           type="button"
           aria-label="Float window"
           title="Float"
+          style=${INTERACTIVE_FOCUS_BASE_STYLE}
           @click=${() => this.handleDockClick("floating")}
         >
           ${this.renderIcon("Maximize2")}
@@ -5839,7 +6669,7 @@ ${argsString}</pre
 			if (content === null || content === void 0) return "";
 			if (typeof content === "object") try {
 				return JSON.stringify(this.sanitizeForLogging(content));
-			} catch (_unused7) {
+			} catch (_unused13) {
 				return "";
 			}
 			return String(content);
@@ -5948,6 +6778,7 @@ ${argsString}</pre
 			};
 		}
 		renderMainContent() {
+			if (this.settingsOpen) return this.renderSettingsPanel();
 			if (this.selectedMenu === "ag-ui-events") return this.renderEventsTable();
 			if (this.selectedMenu === "agents") return this.renderAgentsView();
 			if (this.selectedMenu === "frontend-tools") return this.renderToolsView();
@@ -5955,12 +6786,11 @@ ${argsString}</pre
 			if (this.selectedMenu === "agent-context") return this.renderContextView();
 			if (this.selectedMenu === "threads") return this.renderThreadsView();
 			if (this.selectedMenu === "memories") return this.renderMemoriesView();
-			if (this.selectedMenu === "settings") return this.renderSettingsPanel();
 			return lit.nothing;
 		}
 		renderSettingsPanel() {
-			var _this$core$telemetryD2, _this$core13;
-			const optedOut = (_this$core$telemetryD2 = (_this$core13 = this.core) === null || _this$core13 === void 0 ? void 0 : _this$core13.telemetryDisabled) !== null && _this$core$telemetryD2 !== void 0 ? _this$core$telemetryD2 : false;
+			var _this$core$telemetryD, _this$core12;
+			const optedOut = (_this$core$telemetryD = (_this$core12 = this.core) === null || _this$core12 === void 0 ? void 0 : _this$core12.telemetryDisabled) !== null && _this$core$telemetryD !== void 0 ? _this$core$telemetryD : false;
 			return lit.html`
       <div class="flex h-full flex-col overflow-hidden">
         <div class="overflow-auto p-4">
@@ -5993,18 +6823,107 @@ ${argsString}</pre
     `;
 		}
 		trackOpened(source, hadUnseenAnnouncement) {
-			var _this$core14, _this$core$licenseSta2, _this$core15, _this$core$runtimeMod2, _this$core16, _this$core17;
-			if ((_this$core14 = this.core) === null || _this$core14 === void 0 ? void 0 : _this$core14.telemetryDisabled) return;
+			var _this$core13, _this$core$licenseSta2, _this$core14, _this$core$runtimeMod2, _this$core15, _this$core16;
+			if ((_this$core13 = this.core) === null || _this$core13 === void 0 ? void 0 : _this$core13.telemetryDisabled) return;
 			trackInspectorOpened({
 				open_source: source,
 				...this.runtimeStatus === "connected" ? {
-					license_status: (_this$core$licenseSta2 = (_this$core15 = this.core) === null || _this$core15 === void 0 ? void 0 : _this$core15.licenseStatus) !== null && _this$core$licenseSta2 !== void 0 ? _this$core$licenseSta2 : void 0,
-					runtime_mode: (_this$core$runtimeMod2 = (_this$core16 = this.core) === null || _this$core16 === void 0 ? void 0 : _this$core16.runtimeMode) !== null && _this$core$runtimeMod2 !== void 0 ? _this$core$runtimeMod2 : void 0
+					license_status: (_this$core$licenseSta2 = (_this$core14 = this.core) === null || _this$core14 === void 0 ? void 0 : _this$core14.licenseStatus) !== null && _this$core$licenseSta2 !== void 0 ? _this$core$licenseSta2 : void 0,
+					runtime_mode: (_this$core$runtimeMod2 = (_this$core15 = this.core) === null || _this$core15 === void 0 ? void 0 : _this$core15.runtimeMode) !== null && _this$core$runtimeMod2 !== void 0 ? _this$core$runtimeMod2 : void 0
 				} : {},
-				runtime_url_type: getRuntimeUrlType((_this$core17 = this.core) === null || _this$core17 === void 0 ? void 0 : _this$core17.runtimeUrl),
+				runtime_url_type: getRuntimeUrlType((_this$core16 = this.core) === null || _this$core16 === void 0 ? void 0 : _this$core16.runtimeUrl),
 				has_unseen_announcement: hadUnseenAnnouncement
 			});
 		}
+		getVisibleInspectorMetadataAction() {
+			const { threadsFooterAction, lockedAction } = this.inspectorMetadataProjection;
+			if (threadsFooterAction && !this.settingsOpen && this.selectedMenu === "threads") return {
+				action: threadsFooterAction,
+				placement: "threads-footer"
+			};
+			if (lockedAction && !this.settingsOpen && this.selectedMenu === "threads" && !this.areThreadEndpointsAvailable()) return {
+				action: lockedAction,
+				placement: "locked"
+			};
+		}
+		/** Return paired stable navigation keys, or neither for an invalid leaf. */
+		getMetadataTelemetryNavigation() {
+			const selectedLeaf = this.selectedMenu;
+			if (!isInspectorMenuKey(selectedLeaf)) return {};
+			for (const group of INSPECTOR_PRIMARY_NAVIGATION) if (INSPECTOR_GROUPS[group.key].some((menuKey) => menuKey === selectedLeaf)) return {
+				group_key: group.key,
+				leaf_key: selectedLeaf
+			};
+			return {};
+		}
+		/** Build metadata's shared coarse buckets and stable navigation context. */
+		getMetadataTelemetryContext() {
+			return {
+				usage_bucket: this.getThreadsUsageBucket(),
+				expiry_bucket: this.getThreadsExpiryBucket(),
+				...this.getMetadataTelemetryNavigation()
+			};
+		}
+		trackMetadataModuleIfChanged(props, fingerprint) {
+			if (this.metadataTelemetryFingerprints.get(props.module) === fingerprint) return;
+			this.metadataTelemetryFingerprints.set(props.module, fingerprint);
+			try {
+				trackMetadataModuleViewed(props);
+			} catch (_unused14) {}
+		}
+		maybeTrackInspectorMetadataViews() {
+			var _this$core17, _telemetryContext$gro, _telemetryContext$lea;
+			if (!this.isOpen || this.runtimeStatus !== _copilotkit_core.CopilotKitCoreRuntimeConnectionStatus.Connected || ((_this$core17 = this.core) === null || _this$core17 === void 0 ? void 0 : _this$core17.telemetryDisabled)) return;
+			const { identity, plan } = this.inspectorMetadataProjection;
+			const license_bucket = this.inspectorMetadataProjection.licenseState;
+			const telemetryContext = this.getMetadataTelemetryContext();
+			const contextFingerprint = [
+				telemetryContext.usage_bucket,
+				telemetryContext.expiry_bucket,
+				(_telemetryContext$gro = telemetryContext.group_key) !== null && _telemetryContext$gro !== void 0 ? _telemetryContext$gro : null,
+				(_telemetryContext$lea = telemetryContext.leaf_key) !== null && _telemetryContext$lea !== void 0 ? _telemetryContext$lea : null
+			];
+			if (identity) this.trackMetadataModuleIfChanged({
+				module: "identity",
+				license_bucket,
+				...telemetryContext
+			}, JSON.stringify([
+				license_bucket,
+				...contextFingerprint,
+				identity.organizationName,
+				identity.projectName
+			]));
+			else this.metadataTelemetryFingerprints.delete("identity");
+			if (plan) this.trackMetadataModuleIfChanged({
+				module: "plan",
+				license_bucket,
+				...telemetryContext
+			}, JSON.stringify([
+				license_bucket,
+				...contextFingerprint,
+				plan.code,
+				plan.label
+			]));
+			else this.metadataTelemetryFingerprints.delete("plan");
+			const visibleAction = this.getVisibleInspectorMetadataAction();
+			if (visibleAction) {
+				const { action, placement } = visibleAction;
+				const action_placement = getMetadataActionPlacement(placement);
+				this.trackMetadataModuleIfChanged({
+					module: "action",
+					action_kind: action.kind,
+					license_bucket,
+					...telemetryContext,
+					action_placement
+				}, JSON.stringify([
+					license_bucket,
+					...contextFingerprint,
+					action_placement,
+					action.kind,
+					action.url
+				]));
+			} else this.metadataTelemetryFingerprints.delete("action");
+		}
 		trackBannerDismissedOnce(surface) {
 			var _this$core18, _this$announcementCta;
 			if ((_this$core18 = this.core) === null || _this$core18 === void 0 ? void 0 : _this$core18.telemetryDisabled) return;
@@ -6033,22 +6952,19 @@ ${argsString}</pre
 				cta_label: (_this$announcementCta2 = this.announcementCtaLabel) !== null && _this$announcementCta2 !== void 0 ? _this$announcementCta2 : void 0
 			});
 		}
-		trackThreadsViewStateOnce(state, threadCount) {
+		trackThreadsViewStateOnce(state) {
 			var _this$core20;
 			if ((_this$core20 = this.core) === null || _this$core20 === void 0 ? void 0 : _this$core20.telemetryDisabled) return;
 			const key = `${state}:${this.getThreadServiceStatus()}`;
 			if (this.viewedThreadsTelemetryStates.has(key)) return;
 			this.viewedThreadsTelemetryStates.add(key);
-			const props = this.getThreadsTelemetryProps({ thread_count: threadCount });
+			const props = this.getThreadsTelemetryProps();
 			if (state === "locked") trackThreadsLockedViewed(props);
 			else if (state === "empty_enabled") trackThreadsEmptyEnabledViewed(props);
 			else trackThreadsEnabledViewed(props);
 		}
-		shouldRenderExampleThreads(displayThreads, threadsErrorMessage) {
-			return this.areThreadEndpointsAvailable() && !threadsErrorMessage && displayThreads.length === 0;
-		}
-		getVisibleThreads(displayThreads, threadsErrorMessage) {
-			return this.shouldRenderExampleThreads(displayThreads, threadsErrorMessage) ? THREADS_EXAMPLE_THREADS : displayThreads;
+		shouldRenderExampleThreads(locked, displayThreads, threadsErrorMessage, threadsLoading) {
+			return locked || !threadsErrorMessage && !threadsLoading && displayThreads.length === 0;
 		}
 		isExampleThreadId(threadId) {
 			return THREADS_EXAMPLE_THREADS.some((thread) => thread.id === threadId);
@@ -6065,6 +6981,7 @@ ${argsString}</pre
 					agentId: thread.agentId,
 					endUserId: "example-user",
 					status: "completed",
+					createdAt: thread.createdAt,
 					updatedAt: thread.updatedAt
 				} : null,
 				getMessages: async () => {
@@ -6087,50 +7004,53 @@ ${argsString}</pre
 			var _this$core21;
 			if ((_this$core21 = this.core) === null || _this$core21 === void 0 ? void 0 : _this$core21.telemetryDisabled) return;
 			for (const thread of THREADS_EXAMPLE_THREADS) {
-				if (this.viewedExampleThreadIds.has(thread.id)) continue;
-				this.viewedExampleThreadIds.add(thread.id);
-				trackThreadsExampleViewed(this.getThreadsTelemetryProps({
-					example_thread_id: thread.id,
-					thread_count: 0
-				}));
+				const exampleKind = getExampleKind(thread.id);
+				if (!exampleKind || this.viewedExampleKinds.has(exampleKind)) continue;
+				this.viewedExampleKinds.add(exampleKind);
+				trackThreadsExampleViewed({
+					...this.getThreadsTelemetryProps(),
+					example_kind: exampleKind
+				});
 			}
 		}
 		trackThreadsExampleSelectedOnce(threadId) {
 			var _this$core22;
 			if ((_this$core22 = this.core) === null || _this$core22 === void 0 ? void 0 : _this$core22.telemetryDisabled) return;
-			if (this.selectedExampleThreadIds.has(threadId)) return;
-			this.selectedExampleThreadIds.add(threadId);
-			trackThreadsExampleSelected(this.getThreadsTelemetryProps({
-				example_thread_id: threadId,
-				thread_count: 0
-			}));
+			const exampleKind = getExampleKind(threadId);
+			if (!exampleKind || this.selectedExampleKinds.has(exampleKind)) return;
+			this.selectedExampleKinds.add(exampleKind);
+			trackThreadsExampleSelected({
+				...this.getThreadsTelemetryProps(),
+				example_kind: exampleKind
+			});
 		}
 		getCurrentExampleTourProps() {
-			var _THREADS_EXAMPLE_TOUR, _this$selectedThreadI;
-			const step = (_THREADS_EXAMPLE_TOUR = THREADS_EXAMPLE_TOUR_STEPS[this.exampleTourStep]) !== null && _THREADS_EXAMPLE_TOUR !== void 0 ? _THREADS_EXAMPLE_TOUR : THREADS_EXAMPLE_TOUR_STEPS[0];
-			return this.getThreadsTelemetryProps({
-				example_thread_id: (_this$selectedThreadI = this.selectedThreadId) !== null && _this$selectedThreadI !== void 0 ? _this$selectedThreadI : void 0,
-				thread_count: 0,
-				tour_step: this.exampleTourStep + 1,
-				tour_tab: step === null || step === void 0 ? void 0 : step.tab
-			});
+			const exampleKind = this.selectedThreadId ? getExampleKind(this.selectedThreadId) : void 0;
+			const tourPair = getExampleTourTelemetryPair(this.exampleTourStep);
+			if (!exampleKind || !tourPair) return void 0;
+			return {
+				...this.getThreadsTelemetryProps(),
+				example_kind: exampleKind,
+				...tourPair
+			};
 		}
 		trackThreadsExampleTourStepViewedOnce() {
-			var _this$core23, _THREADS_EXAMPLE_TOUR2;
+			var _this$core23;
 			if (((_this$core23 = this.core) === null || _this$core23 === void 0 ? void 0 : _this$core23.telemetryDisabled) || !this.selectedThreadId) return;
-			if (!((_THREADS_EXAMPLE_TOUR2 = THREADS_EXAMPLE_TOUR_STEPS[this.exampleTourStep]) !== null && _THREADS_EXAMPLE_TOUR2 !== void 0 ? _THREADS_EXAMPLE_TOUR2 : THREADS_EXAMPLE_TOUR_STEPS[0])) return;
-			const key = `${this.selectedThreadId}:${this.exampleTourStep}`;
+			const props = this.getCurrentExampleTourProps();
+			if (!props) return;
+			const key = `${props.example_kind}:${props.tour_step}`;
 			if (this.viewedExampleTourSteps.has(key)) return;
 			this.viewedExampleTourSteps.add(key);
-			trackThreadsExampleTourStepViewed(this.getCurrentExampleTourProps());
+			trackThreadsExampleTourStepViewed(props);
 		}
 		syncExampleTourTab() {
-			var _THREADS_EXAMPLE_TOUR3;
-			const step = (_THREADS_EXAMPLE_TOUR3 = THREADS_EXAMPLE_TOUR_STEPS[this.exampleTourStep]) !== null && _THREADS_EXAMPLE_TOUR3 !== void 0 ? _THREADS_EXAMPLE_TOUR3 : THREADS_EXAMPLE_TOUR_STEPS[0];
+			var _THREADS_EXAMPLE_TOUR;
+			const step = (_THREADS_EXAMPLE_TOUR = THREADS_EXAMPLE_TOUR_STEPS[this.exampleTourStep]) !== null && _THREADS_EXAMPLE_TOUR !== void 0 ? _THREADS_EXAMPLE_TOUR : THREADS_EXAMPLE_TOUR_STEPS[0];
 			if (!step) return;
 			this.updateComplete.then(() => {
-				var _this$shadowRoot2, _details$selectTab;
-				const details = (_this$shadowRoot2 = this.shadowRoot) === null || _this$shadowRoot2 === void 0 ? void 0 : _this$shadowRoot2.querySelector("cpk-thread-details");
+				var _this$shadowRoot4, _details$selectTab;
+				const details = (_this$shadowRoot4 = this.shadowRoot) === null || _this$shadowRoot4 === void 0 ? void 0 : _this$shadowRoot4.querySelector("cpk-thread-details");
 				details === null || details === void 0 || (_details$selectTab = details.selectTab) === null || _details$selectTab === void 0 || _details$selectTab.call(details, step.tab);
 			});
 		}
@@ -6142,45 +7062,66 @@ ${argsString}</pre
 			if (autoStarted) {
 				var _this$core24;
 				this.exampleTourAutoShown = true;
-				if (!((_this$core24 = this.core) === null || _this$core24 === void 0 ? void 0 : _this$core24.telemetryDisabled)) trackThreadsExampleTourStarted(this.getCurrentExampleTourProps());
-			} else if (!((_this$core25 = this.core) === null || _this$core25 === void 0 ? void 0 : _this$core25.telemetryDisabled)) trackThreadsExampleTourReopened(this.getCurrentExampleTourProps());
+				if (!((_this$core24 = this.core) === null || _this$core24 === void 0 ? void 0 : _this$core24.telemetryDisabled)) {
+					const props = this.getCurrentExampleTourProps();
+					if (props) trackThreadsExampleTourStarted(props);
+				}
+			} else if (!((_this$core25 = this.core) === null || _this$core25 === void 0 ? void 0 : _this$core25.telemetryDisabled)) {
+				const props = this.getCurrentExampleTourProps();
+				if (props) trackThreadsExampleTourReopened(props);
+			}
 			this.trackThreadsExampleTourStepViewedOnce();
 			this.syncExampleTourTab();
 			this.requestUpdate();
 		}
 		setExampleTourStep(nextStep) {
+			const telemetryStepIsValid = getExampleTourTelemetryPair(nextStep) !== void 0;
 			this.exampleTourStep = Math.max(0, Math.min(THREADS_EXAMPLE_TOUR_STEPS.length - 1, nextStep));
-			this.trackThreadsExampleTourStepViewedOnce();
+			if (telemetryStepIsValid) this.trackThreadsExampleTourStepViewedOnce();
 			this.syncExampleTourTab();
 			this.requestUpdate();
 		}
 		dismissExampleTour(method) {
 			var _this$core26;
 			if (!this.selectedThreadId) return;
-			const props = {
-				...this.getCurrentExampleTourProps(),
-				dismiss_method: method
-			};
 			this.exampleTourActive = false;
 			this.exampleTourDismissed = true;
 			this.writeThreadsExampleTourDismissed();
-			if (!((_this$core26 = this.core) === null || _this$core26 === void 0 ? void 0 : _this$core26.telemetryDisabled)) if (method === "done") trackThreadsExampleTourCompleted(props);
-			else trackThreadsExampleTourDismissed(props);
+			if (!((_this$core26 = this.core) === null || _this$core26 === void 0 ? void 0 : _this$core26.telemetryDisabled)) {
+				const currentProps = this.getCurrentExampleTourProps();
+				if (currentProps) {
+					const props = {
+						...currentProps,
+						dismiss_method: method
+					};
+					if (method === "done") trackThreadsExampleTourCompleted(props);
+					else trackThreadsExampleTourDismissed(props);
+				}
+			}
 			this.requestUpdate();
 		}
 		handleThreadsThreadSelected(threadId, showingExamples) {
-			if (showingExamples && this.selectedThreadId === threadId) {
+			if (showingExamples && this.selectedThreadId === threadId && this.selectedLocalExampleThreadId === threadId) {
 				this.selectedThreadId = null;
+				this.selectedRealThreadIsExplicit = false;
+				this.selectedLocalExampleThreadId = null;
 				this.exampleTourActive = false;
 				this.requestUpdate();
 				return;
 			}
 			this.selectedThreadId = threadId;
 			if (showingExamples && this.isExampleThreadId(threadId)) {
+				this.selectedRealThreadIsExplicit = false;
+				this.selectedLocalExampleThreadId = threadId;
 				this.trackThreadsExampleSelectedOnce(threadId);
 				if (!this.exampleTourDismissed && !this.exampleTourAutoShown) this.startExampleTour(true);
 				else this.exampleTourActive = false;
-			} else this.exampleTourActive = false;
+			} else {
+				const { displayThreads } = this.getActiveThreadsState();
+				this.selectedRealThreadIsExplicit = displayThreads.some((thread) => thread.id === threadId);
+				this.selectedLocalExampleThreadId = null;
+				this.exampleTourActive = false;
+			}
 			this.requestUpdate();
 		}
 		readThreadsExampleTourDismissed() {
@@ -6189,7 +7130,7 @@ ${argsString}</pre
 				const raw = window.localStorage.getItem(THREADS_EXAMPLE_TOUR_STORAGE_KEY);
 				if (!raw) return false;
 				return JSON.parse(raw).dismissed === true;
-			} catch (_unused8) {
+			} catch (_unused15) {
 				return false;
 			}
 		}
@@ -6197,45 +7138,232 @@ ${argsString}</pre
 			if (typeof window === "undefined") return;
 			try {
 				window.localStorage.setItem(THREADS_EXAMPLE_TOUR_STORAGE_KEY, JSON.stringify({ dismissed: true }));
-			} catch (_unused9) {}
+			} catch (_unused16) {}
 		}
-		scheduleThreadsExampleOverviewVideoLoad() {
-			var _window$matchMedia, _window;
-			if (this.threadsExampleOverviewVideoShouldLoad || this.threadsExampleOverviewVideoLoadTimer !== null || this.threadsExampleOverviewVideoIdleCallbackId !== null || typeof window === "undefined") return;
-			if ((_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-reduced-motion: reduce)").matches) return;
-			const loadVideo = () => {
+		/** Cancels the one deferred gate without disturbing a newer lifecycle. */
+		cancelThreadsExampleOverviewVideoGate() {
+			if (this.threadsExampleOverviewVideoLoadTimer !== null) {
+				if (typeof window !== "undefined") window.clearTimeout(this.threadsExampleOverviewVideoLoadTimer);
 				this.threadsExampleOverviewVideoLoadTimer = null;
+			}
+			if (this.threadsExampleOverviewVideoIdleCallbackId !== null) {
+				if (typeof window !== "undefined" && typeof window.cancelIdleCallback === "function") window.cancelIdleCallback(this.threadsExampleOverviewVideoIdleCallbackId);
 				this.threadsExampleOverviewVideoIdleCallbackId = null;
-				this.threadsExampleOverviewVideoShouldLoad = true;
-				this.requestUpdate();
-			};
+			}
+		}
+		/** Returns whether media work still belongs to the mounted lifecycle. */
+		isCurrentThreadsExampleOverviewVideo(video, lifecycleGeneration) {
+			return this.isConnected && video.isConnected && this.threadsExampleOverviewVideoElement === video && this.threadsExampleOverviewVideoLifecycleGeneration === lifecycleGeneration;
+		}
+		/** Invalidates any unresolved play request without exposing another state. */
+		invalidateThreadsExampleOverviewVideoPlay() {
+			this.threadsExampleOverviewVideoPlayAttemptGeneration += 1;
+			this.threadsExampleOverviewVideoPlayPromise = null;
+		}
+		/** Moves a current media lifecycle into its readable failure state. */
+		failThreadsExampleOverviewVideo(video, lifecycleGeneration) {
+			if (!this.isCurrentThreadsExampleOverviewVideo(video, lifecycleGeneration)) return;
+			this.invalidateThreadsExampleOverviewVideoPlay();
+			this.threadsExampleOverviewVideoLoaded = false;
+			this.threadsExampleOverviewVideoState = "failed";
+			this.requestUpdate();
+		}
+		/** Settles one guarded play promise and ignores stale completion. */
+		async settleThreadsExampleOverviewVideoPlay(video, lifecycleGeneration, playAttemptGeneration, playback) {
+			try {
+				await playback;
+				if (this.isCurrentThreadsExampleOverviewVideo(video, lifecycleGeneration) && this.threadsExampleOverviewVideoPlayAttemptGeneration === playAttemptGeneration && this.threadsExampleOverviewVideoState !== "failed") {
+					this.threadsExampleOverviewVideoState = "playing";
+					this.requestUpdate();
+				}
+			} catch (_unused17) {
+				if (this.isCurrentThreadsExampleOverviewVideo(video, lifecycleGeneration) && this.threadsExampleOverviewVideoPlayAttemptGeneration === playAttemptGeneration) this.failThreadsExampleOverviewVideo(video, lifecycleGeneration);
+			} finally {
+				if (this.threadsExampleOverviewVideoPlayAttemptGeneration === playAttemptGeneration) this.threadsExampleOverviewVideoPlayPromise = null;
+			}
+		}
+		/** Starts at most one play request for the current media lifecycle. */
+		playThreadsExampleOverviewVideo(video, lifecycleGeneration) {
+			if (this.threadsExampleOverviewVideoPlayPromise !== null || this.threadsExampleOverviewVideoState === "deferred" || this.threadsExampleOverviewVideoState === "failed" || !this.isCurrentThreadsExampleOverviewVideo(video, lifecycleGeneration)) return;
+			const playAttemptGeneration = this.threadsExampleOverviewVideoPlayAttemptGeneration + 1;
+			this.threadsExampleOverviewVideoPlayAttemptGeneration = playAttemptGeneration;
+			try {
+				const playback = Promise.resolve(video.play());
+				this.threadsExampleOverviewVideoPlayPromise = this.settleThreadsExampleOverviewVideoPlay(video, lifecycleGeneration, playAttemptGeneration, playback);
+			} catch (_unused18) {
+				this.failThreadsExampleOverviewVideo(video, lifecycleGeneration);
+			}
+		}
+		/** Attaches the sole source for a generation and optionally starts playback. */
+		activateThreadsExampleOverviewVideo(video, lifecycleGeneration, play) {
+			if (this.threadsExampleOverviewVideoState !== "deferred" || !this.isCurrentThreadsExampleOverviewVideo(video, lifecycleGeneration)) return;
+			this.threadsExampleOverviewVideoState = "ready";
+			this.threadsExampleOverviewVideoLoaded = false;
+			video.autoplay = !this.threadsExampleOverviewVideoReducedMotion;
+			video.setAttribute("src", THREADS_EXAMPLE_OVERVIEW_VIDEO_URL);
+			this.requestUpdate();
+			if (play) this.playThreadsExampleOverviewVideo(video, lifecycleGeneration);
+		}
+		/** Schedules exactly one idle or timer gate for the current video. */
+		scheduleThreadsExampleOverviewVideoLoad() {
+			const video = this.threadsExampleOverviewVideoElement;
+			if (!video || !this.isConnected || this.threadsExampleOverviewVideoState !== "deferred" || this.threadsExampleOverviewVideoLoadTimer !== null || this.threadsExampleOverviewVideoIdleCallbackId !== null || typeof window === "undefined") return;
+			const lifecycleGeneration = this.threadsExampleOverviewVideoLifecycleGeneration;
 			if (typeof window.requestIdleCallback === "function") {
-				this.threadsExampleOverviewVideoIdleCallbackId = window.requestIdleCallback(loadVideo, { timeout: 1200 });
+				let idleCallbackId = 0;
+				const loadVideo = () => {
+					if (this.threadsExampleOverviewVideoIdleCallbackId !== idleCallbackId) return;
+					this.threadsExampleOverviewVideoIdleCallbackId = null;
+					this.activateThreadsExampleOverviewVideo(video, lifecycleGeneration, !this.threadsExampleOverviewVideoReducedMotion);
+				};
+				idleCallbackId = window.requestIdleCallback(loadVideo, { timeout: 1200 });
+				this.threadsExampleOverviewVideoIdleCallbackId = idleCallbackId;
 				return;
 			}
-			this.threadsExampleOverviewVideoLoadTimer = window.setTimeout(loadVideo, 450);
+			const loadTimer = window.setTimeout(() => {
+				if (this.threadsExampleOverviewVideoLoadTimer !== loadTimer) return;
+				this.threadsExampleOverviewVideoLoadTimer = null;
+				this.activateThreadsExampleOverviewVideo(video, lifecycleGeneration, !this.threadsExampleOverviewVideoReducedMotion);
+			}, 450);
+			this.threadsExampleOverviewVideoLoadTimer = loadTimer;
+		}
+		/** Attaches one generation-scoped media listener set to the stable video. */
+		bindThreadsExampleOverviewVideo(video) {
+			const lifecycleGeneration = this.threadsExampleOverviewVideoLifecycleGeneration;
+			const listeners = {
+				loadeddata: () => {
+					if (!this.isCurrentThreadsExampleOverviewVideo(video, lifecycleGeneration) || this.threadsExampleOverviewVideoState === "deferred" || this.threadsExampleOverviewVideoState === "failed") return;
+					this.threadsExampleOverviewVideoLoaded = true;
+					this.requestUpdate();
+				},
+				play: () => {
+					if (this.isCurrentThreadsExampleOverviewVideo(video, lifecycleGeneration) && this.threadsExampleOverviewVideoState !== "deferred" && this.threadsExampleOverviewVideoState !== "failed") {
+						this.threadsExampleOverviewVideoState = "playing";
+						this.requestUpdate();
+					}
+				},
+				pause: () => {
+					if (this.isCurrentThreadsExampleOverviewVideo(video, lifecycleGeneration) && this.threadsExampleOverviewVideoState !== "deferred" && this.threadsExampleOverviewVideoState !== "failed") {
+						this.invalidateThreadsExampleOverviewVideoPlay();
+						this.threadsExampleOverviewVideoState = "ready";
+						this.requestUpdate();
+					}
+				},
+				error: () => {
+					this.failThreadsExampleOverviewVideo(video, lifecycleGeneration);
+				}
+			};
+			this.threadsExampleOverviewVideoElement = video;
+			this.threadsExampleOverviewVideoListeners = listeners;
+			video.addEventListener("loadeddata", listeners.loadeddata);
+			video.addEventListener("play", listeners.play);
+			video.addEventListener("pause", listeners.pause);
+			video.addEventListener("error", listeners.error);
+			video.muted = true;
+			video.loop = true;
+			video.playsInline = true;
+			video.autoplay = this.threadsExampleOverviewVideoState !== "deferred" && !this.threadsExampleOverviewVideoReducedMotion;
+		}
+		/** Tears down gates, listeners, playback, and source in cleanup order. */
+		cleanupThreadsExampleOverviewVideo() {
+			const video = this.threadsExampleOverviewVideoElement;
+			if (video) this.threadsExampleOverviewVideoLifecycleGeneration += 1;
+			this.invalidateThreadsExampleOverviewVideoPlay();
+			this.cancelThreadsExampleOverviewVideoGate();
+			this.threadsExampleOverviewVideoPlayOnNextBind = false;
+			const listeners = this.threadsExampleOverviewVideoListeners;
+			if (video && listeners) {
+				video.removeEventListener("loadeddata", listeners.loadeddata);
+				video.removeEventListener("play", listeners.play);
+				video.removeEventListener("pause", listeners.pause);
+				video.removeEventListener("error", listeners.error);
+			}
+			this.threadsExampleOverviewVideoElement = null;
+			this.threadsExampleOverviewVideoListeners = null;
+			if (video) {
+				try {
+					video.pause();
+				} catch (_unused19) {}
+				video.removeAttribute("src");
+				try {
+					video.load();
+				} catch (_unused20) {}
+			}
+			this.threadsExampleOverviewVideoLoaded = false;
+			this.threadsExampleOverviewVideoState = "deferred";
+		}
+		/** Reconciles the rendered media node with its current lifecycle. */
+		syncThreadsExampleOverviewVideo() {
+			var _this$shadowRoot5;
+			const video = (_this$shadowRoot5 = this.shadowRoot) === null || _this$shadowRoot5 === void 0 ? void 0 : _this$shadowRoot5.querySelector(".cpk-threads-overview-video");
+			if (!video) {
+				if (this.threadsExampleOverviewVideoElement || this.threadsExampleOverviewVideoState !== "deferred" || this.threadsExampleOverviewVideoLoadTimer !== null || this.threadsExampleOverviewVideoIdleCallbackId !== null || this.threadsExampleOverviewVideoPlayOnNextBind) this.cleanupThreadsExampleOverviewVideo();
+				return;
+			}
+			if (this.threadsExampleOverviewVideoElement !== video) {
+				if (this.threadsExampleOverviewVideoElement) this.cleanupThreadsExampleOverviewVideo();
+				this.bindThreadsExampleOverviewVideo(video);
+			}
+			if (this.threadsExampleOverviewVideoPlayOnNextBind) {
+				this.threadsExampleOverviewVideoPlayOnNextBind = false;
+				this.activateThreadsExampleOverviewVideo(video, this.threadsExampleOverviewVideoLifecycleGeneration, true);
+				return;
+			}
+			this.scheduleThreadsExampleOverviewVideoLoad();
 		}
 		renderThreadsExampleOverviewVideo() {
-			this.scheduleThreadsExampleOverviewVideoLoad();
+			const isPlaying = this.threadsExampleOverviewVideoState === "playing";
+			const sourceIsAttached = this.threadsExampleOverviewVideoState !== "deferred";
+			const video = lit.html`<video
+      class="cpk-threads-overview-video"
+      data-loaded=${this.threadsExampleOverviewVideoLoaded}
+      ?autoplay=${sourceIsAttached && !this.threadsExampleOverviewVideoReducedMotion}
+      .autoplay=${sourceIsAttached && !this.threadsExampleOverviewVideoReducedMotion}
+      loop
+      .loop=${true}
+      muted
+      .muted=${true}
+      playsinline
+      .playsInline=${true}
+      preload="metadata"
+    ></video>`;
 			return lit.html`
       <div class="cpk-threads-overview-video-frame" aria-hidden="true">
-        ${this.threadsExampleOverviewVideoShouldLoad ? lit.html`
-                <video
-                  class="cpk-threads-overview-video"
-                  data-ready=${this.threadsExampleOverviewVideoReady}
-                  src=${THREADS_EXAMPLE_OVERVIEW_VIDEO_URL}
-                  autoplay
-                  loop
-                  muted
-                  playsinline
-                  preload="metadata"
-                  @loadeddata=${this.handleThreadsExampleOverviewVideoLoaded}
-                ></video>
-              ` : lit.nothing}
+        ${this.threadsExampleOverviewVideoLifecycleGeneration % 2 === 0 ? lit.html`<!-- cpk-video-generation-even -->${video}` : lit.html`<!-- cpk-video-generation-odd -->${video}`}
       </div>
+      <button
+        class="cpk-threads-overview-video-control"
+        type="button"
+        aria-pressed=${isPlaying ? "false" : "true"}
+        @click=${this.handleThreadsExampleOverviewVideoControl}
+      >
+        ${isPlaying ? "Pause demo" : "Play demo"}
+      </button>
+      ${this.threadsExampleOverviewVideoState === "failed" ? lit.html`
+              <p class="cpk-threads-overview-video-fallback" role="status">
+                ${THREADS_EXAMPLE_OVERVIEW_VIDEO_FALLBACK}
+              </p>
+            ` : lit.nothing}
     `;
 		}
-		renderThreadsExampleOverview() {
+		/** Show a copy result briefly and announce it to assistive technology. */
+		showThreadsSetupPromptCopyState(state, generation) {
+			if (!this.isConnected || generation !== this.threadsSetupPromptCopyGeneration) return;
+			if (this.threadsSetupPromptCopyResetTimeoutId !== null) window.clearTimeout(this.threadsSetupPromptCopyResetTimeoutId);
+			this.threadsSetupPromptCopyState = state;
+			this.requestUpdate();
+			this.threadsSetupPromptCopyResetTimeoutId = window.setTimeout(() => {
+				if (!this.isConnected || generation !== this.threadsSetupPromptCopyGeneration) return;
+				this.threadsSetupPromptCopyState = "idle";
+				this.threadsSetupPromptCopyResetTimeoutId = null;
+				this.requestUpdate();
+			}, 2e3);
+		}
+		renderThreadsExampleOverview(locked) {
+			var _lockedCopy$heading, _lockedCopy$descripti;
+			const lockedCopy = locked ? this.getThreadsLockedCopy() : void 0;
+			const { lockedAction } = this.inspectorMetadataProjection;
+			const onboardingAction = this.getThreadsEmptyOnboardingAction();
 			return lit.html`
       <div
         style="
@@ -6258,7 +7386,7 @@ ${argsString}</pre
               color: #010507;
             "
           >
-            Threads are persistent, inspectable conversations
+            ${(_lockedCopy$heading = lockedCopy === null || lockedCopy === void 0 ? void 0 : lockedCopy.heading) !== null && _lockedCopy$heading !== void 0 ? _lockedCopy$heading : "Threads are persistent, inspectable conversations"}
           </h2>
           ${this.renderThreadsExampleOverviewVideo()}
           <p
@@ -6269,61 +7397,90 @@ ${argsString}</pre
               color: #57575b;
             "
           >
-            Take a tour with the example threads in the sidebar. Then, start
-            chatting in your app to create the first real thread.
+            ${(_lockedCopy$descripti = lockedCopy === null || lockedCopy === void 0 ? void 0 : lockedCopy.description) !== null && _lockedCopy$descripti !== void 0 ? _lockedCopy$descripti : "Take a tour with the example threads in the sidebar. Then, start chatting in your app to create the first real thread."}
           </p>
           <div style="display:flex;flex-wrap:wrap;gap:8px;">
-            <a
-              href=${this.getThreadsDocsUrl()}
-              target="_blank"
-              rel="noopener"
-              style="
-                display: inline-flex;
-                align-items: center;
-                justify-content: center;
-                gap: 6px;
-                min-height: 34px;
-                border-radius: 6px;
-                background: #010507;
-                padding: 8px 12px;
-                font-size: 12px;
-                font-weight: 600;
-                color: #ffffff;
-                text-decoration: none;
-              "
-            >
-              Learn how Threads work
-            </a>
-            <a
-              href=${this.getSelfHostedIntelligenceUrl()}
-              target="_blank"
-              rel="noopener"
-              style="
-                display: inline-flex;
-                align-items: center;
-                justify-content: center;
-                gap: 6px;
-                min-height: 34px;
-                border-radius: 6px;
-                border: 1px solid #dbdbe5;
-                background: #ffffff;
-                padding: 8px 12px;
-                font-size: 12px;
-                font-weight: 600;
-                color: #010507;
-                text-decoration: none;
-              "
-            >
-              Explore self-hosted Intelligence
-            </a>
+            ${locked ? lit.html`
+                    ${this.inspectorMetadataProjection.licenseState === "valid" ? lit.html`
+                            <button
+                              data-inspector-threads-setup-prompt
+                              type="button"
+                              aria-label=${this.threadsSetupPromptCopyState === "copied" ? "Setup prompt copied" : this.threadsSetupPromptCopyState === "error" ? "Copy setup prompt failed. Try again" : "Copy setup prompt for your coding agent"}
+                              @click=${this.handleThreadsSetupPromptCopy}
+                            >
+                              ${this.renderIcon(this.threadsSetupPromptCopyState === "copied" ? "Check" : "Copy")}
+                              ${this.threadsSetupPromptCopyState === "copied" ? "Copied" : this.threadsSetupPromptCopyState === "error" ? "Copy blocked" : "Copy prompt for your agent"}
+                            </button>
+                            <a
+                              data-inspector-threads-setup-link
+                              href=${this.getThreadsRuntimeSetupDocsUrl()}
+                              target="_blank"
+                              rel="noopener"
+                              aria-label="Open setup guide (opens in a new tab)"
+                            >
+                              Open setup guide
+                            </a>
+                            <span
+                              class="sr-only"
+                              data-inspector-threads-setup-copy-status
+                              aria-live="polite"
+                              >${this.threadsSetupPromptCopyState === "copied" ? "Setup prompt copied." : this.threadsSetupPromptCopyState === "error" ? "Setup prompt copy failed. Open the setup guide and copy it manually." : ""}</span
+                            >
+                          ` : lit.nothing}
+                    ${lockedAction ? this.renderInspectorAction(lockedAction, "locked") : lit.nothing}
+                  ` : lit.html`
+                    <a
+                      href=${this.getThreadsDocsUrl()}
+                      target="_blank"
+                      rel="noopener"
+                      style="
+                        display: inline-flex;
+                        align-items: center;
+                        justify-content: center;
+                        gap: 6px;
+                        min-height: 34px;
+                        border-radius: 6px;
+                        background: #010507;
+                        padding: 8px 12px;
+                        font-size: 12px;
+                        font-weight: 600;
+                        color: #ffffff;
+                        text-decoration: none;
+                      "
+                    >
+                      Learn how Threads work
+                    </a>
+                    <a
+                      href=${onboardingAction.href}
+                      target="_blank"
+                      rel="noopener"
+                      style="
+                        display: inline-flex;
+                        align-items: center;
+                        justify-content: center;
+                        gap: 6px;
+                        min-height: 34px;
+                        border-radius: 6px;
+                        border: 1px solid #dbdbe5;
+                        background: #ffffff;
+                        padding: 8px 12px;
+                        font-size: 12px;
+                        font-weight: 600;
+                        color: #010507;
+                        text-decoration: none;
+                      "
+                    >
+                      ${onboardingAction.label}
+                    </a>
+                  `}
           </div>
         </div>
       </div>
     `;
 		}
 		renderThreadsExampleTour() {
-			var _THREADS_EXAMPLE_TOUR4;
-			if (!this.selectedThreadId || !this.isExampleThreadId(this.selectedThreadId)) return lit.nothing;
+			var _THREADS_EXAMPLE_TOUR2;
+			if (!this.selectedThreadId || this.selectedThreadId !== this.selectedLocalExampleThreadId) return lit.nothing;
 			if (!this.exampleTourActive) return lit.html`
         <button
           type="button"
@@ -6347,7 +7504,7 @@ ${argsString}</pre
           Show tour
         </button>
       `;
-			const step = (_THREADS_EXAMPLE_TOUR4 = THREADS_EXAMPLE_TOUR_STEPS[this.exampleTourStep]) !== null && _THREADS_EXAMPLE_TOUR4 !== void 0 ? _THREADS_EXAMPLE_TOUR4 : THREADS_EXAMPLE_TOUR_STEPS[0];
+			const step = (_THREADS_EXAMPLE_TOUR2 = THREADS_EXAMPLE_TOUR_STEPS[this.exampleTourStep]) !== null && _THREADS_EXAMPLE_TOUR2 !== void 0 ? _THREADS_EXAMPLE_TOUR2 : THREADS_EXAMPLE_TOUR_STEPS[0];
 			const isFirst = this.exampleTourStep === 0;
 			const isLast = this.exampleTourStep === THREADS_EXAMPLE_TOUR_STEPS.length - 1;
 			return lit.html`
@@ -6374,7 +7531,7 @@ ${argsString}</pre
             font-family: 'Spline Sans Mono', monospace;
             font-size: 10px;
             font-weight: 600;
-            color: #189370;
+            color: #087653;
             text-transform: uppercase;
           "
         >
@@ -6405,7 +7562,7 @@ ${argsString}</pre
         >
           <button
             type="button"
-            style="border:0;background:transparent;color:#838389;font-size:12px;font-weight:600;cursor:pointer;padding:7px 0;"
+            style="border:0;background:transparent;color:#68686e;font-size:12px;font-weight:600;cursor:pointer;padding:7px 0;"
             @click=${() => this.dismissExampleTour("skip")}
           >
             Skip
@@ -6584,124 +7741,25 @@ ${argsString}</pre
       </div>
     `;
 		}
-		renderThreadsLockedView() {
-			this.trackThreadsViewStateOnce("locked", 0);
-			return lit.html`
-      <div
-        style="
-          position: relative;
-          height: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 32px;
-          overflow: hidden;
-          background: #ffffff;
-        "
-      >
-        ${this.renderThreadsLockedBackgroundMockup()}
-        <div
-          aria-hidden="true"
-          style="
-            position: absolute;
-            inset: 0;
-            pointer-events: none;
-            background:
-              radial-gradient(circle at center, rgba(255,255,255,0.9) 0, rgba(255,255,255,0.78) 24%, rgba(255,255,255,0.34) 48%, rgba(255,255,255,0.56) 100%);
-          "
-        ></div>
-        <div
-          style="
-            position: relative;
-            z-index: 1;
-            max-width: 440px;
-            text-align: center;
-            color: #57575b;
-          "
-        >
-          <div
-            aria-hidden="true"
-            style="
-              margin: 0 auto 18px;
-              display: flex;
-              justify-content: center;
-            "
-          >
-            <div
-              style="
-                display: flex;
-                height: 44px;
-                width: 44px;
-                align-items: center;
-                justify-content: center;
-                border: 1px solid #dfd6fb;
-                border-radius: 8px;
-                background: #eee6fe;
-                color: #57575b;
-                box-shadow: 0 8px 18px rgba(87, 87, 91, 0.14);
-              "
-            >
-              ${this.renderIcon("Lock")}
-            </div>
-          </div>
-          <h2
-            style="
-              margin: 0 0 8px;
-              font-size: 16px;
-              line-height: 1.35;
-              font-weight: 600;
-              color: #010507;
-            "
-          >
-            Enable Intelligence to inspect Threads.
-          </h2>
-          <p
-            style="
-              margin: 0 auto 18px;
-              max-width: 380px;
-              font-size: 13px;
-              line-height: 1.55;
-              color: #57575b;
-            "
-          >
-            Persist conversations and inspect saved thread history from the
-            Inspector.
-          </p>
-          <div
-            style="
-              display: flex;
-              flex-wrap: wrap;
-              justify-content: center;
-              gap: 8px;
-            "
-          >
-            <a
-              href=${this.getThreadsIntelligenceSignupUrl()}
-              target="_blank"
-              rel="noopener"
-              style="
-                display: inline-flex;
-                min-height: 34px;
-                align-items: center;
-                justify-content: center;
-                gap: 6px;
-                border-radius: 6px;
-                border: 1px solid #dbdbe5;
-                background: #ffffff;
-                padding: 8px 12px;
-                font-size: 12px;
-                font-weight: 600;
-                color: #57575b;
-                text-decoration: none;
-              "
-              @click=${this.handleThreadsIntelligenceSignupClick}
-            >
-              Sign up for Intelligence
-            </a>
-          </div>
-        </div>
-      </div>
-    `;
+		getThreadsLockedCopy() {
+			switch (this.inspectorMetadataProjection.licenseState) {
+				case "valid": return {
+					heading: "Finish setting up Rich Threads",
+					description: "Copy this prompt into your coding agent to finish the setup."
+				};
+				case "none": return {
+					heading: "Enable Intelligence to inspect Threads.",
+					description: "Persist conversations and inspect saved thread history from the Inspector."
+				};
+				case "expired": return {
+					heading: "Renew Intelligence to inspect Threads.",
+					description: "Your Intelligence access has expired. Renew it to inspect saved thread history."
+				};
+				case "unknown": return {
+					heading: "Threads are unavailable.",
+					description: "This runtime does not expose Threads for the Inspector."
+				};
+			}
 		}
 		/**
 		* Renders the realtime-connection indicator in the memory-store header.
@@ -6721,7 +7779,7 @@ ${argsString}</pre
           gap: 4px;
           font-size: 10px;
           font-weight: 500;
-          color: ${connected ? "#57575b" : "#838389"};
+          color: ${connected ? "#57575b" : "#68686e"};
         "
       >
         <span
@@ -6885,7 +7943,7 @@ ${argsString}</pre
             align-items: center;
             justify-content: center;
             gap: 8px;
-            color: #838389;
+            color: #68686e;
           "
         >
           <svg
@@ -6927,7 +7985,7 @@ ${argsString}</pre
             align-items: center;
             justify-content: center;
             gap: 8px;
-            color: #838389;
+            color: #68686e;
           "
         >
           <svg
@@ -7019,18 +8077,66 @@ ${argsString}</pre
           ></cpk-memory-list>
         </div>
       </div>
+    `;
+		}
+		/** Renders trusted Threads usage and its independent plan action. */
+		renderThreadsUsageFooter() {
+			const { usage, threadsFooterAction } = this.inspectorMetadataProjection;
+			if (!usage && !threadsFooterAction) return lit.nothing;
+			let countLabel;
+			let progressMax;
+			let progressValue;
+			const capacityState = this.getThreadsCapacityState();
+			if (usage) if (usage.limit.kind === "finite") {
+				countLabel = `${usage.used > usage.limit.value ? `${usage.limit.value}+` : String(usage.used)} / ${usage.limit.value} Threads`;
+				progressMax = usage.limit.value;
+				progressValue = Math.min(usage.used, usage.limit.value);
+			} else if (usage.limit.kind === "unlimited") countLabel = `${usage.used} Threads · Unlimited`;
+			else countLabel = `${usage.used} Threads · Limit unavailable`;
+			return lit.html`
+      <footer
+        class="inspector-threads-footer"
+        data-inspector-threads-footer
+        role="group"
+        aria-label="Threads usage"
+      >
+        ${usage && countLabel ? lit.html`
+                <div class="inspector-threads-usage">
+                  <span data-inspector-thread-count>${countLabel}</span>
+                  ${progressMax !== void 0 && progressValue !== void 0 ? lit.html`
+                          <progress
+                            class="inspector-thread-progress"
+                            data-inspector-thread-progress
+                            data-inspector-thread-capacity=${capacityState}
+                            max=${progressMax}
+                            value=${progressValue}
+                            aria-label=${capacityState === "warning" ? `${countLabel}. Near thread limit.` : capacityState === "critical" ? `${countLabel}. Thread limit reached.` : countLabel}
+                            >${countLabel}</progress
+                          >
+                        ` : lit.nothing}
+                  ${usage.expiringSoonCount !== void 0 ? lit.html`
+                          <span data-inspector-thread-expiry
+                            >${usage.expiringSoonCount} Expiring Soon</span
+                          >
+                        ` : lit.nothing}
+                </div>
+              ` : lit.nothing}
+        ${threadsFooterAction ? this.renderInspectorAction(threadsFooterAction, "threads-footer", capacityState === "warning" || capacityState === "critical" ? "Upgrade Your Plan" : threadsFooterAction.label) : lit.nothing}
+      </footer>
     `;
 		}
 		renderThreadsView() {
-			var _visibleThreads$find, _this$_core$runtimeUr, _this$_core4, _this$_core$headers, _this$_core5, _this$_core6, _this$liveMessageVers2, _this$agentEvents$get6;
-			if (!this.areThreadEndpointsAvailable()) return this.renderThreadsLockedView();
-			const { displayThreads, threadsErrorMessage } = this.getActiveThreadsState();
-			const showingExamples = this.shouldRenderExampleThreads(displayThreads, threadsErrorMessage);
-			const visibleThreads = this.getVisibleThreads(displayThreads, threadsErrorMessage);
+			var _visibleThreads$find, _this$_core$runtimeUr, _this$_core6, _this$_core$headers, _this$_core7, _this$_core8, _this$liveMessageVers2, _this$agentEvents$get6;
+			const locked = !this.areThreadEndpointsAvailable();
+			const { displayThreads, threadsErrorMessage, threadsLoading } = this.getActiveThreadsState();
+			const loadingWithoutRows = !locked && threadsLoading && !threadsErrorMessage && displayThreads.length === 0;
+			const showingExamples = this.shouldRenderExampleThreads(locked, displayThreads, threadsErrorMessage, threadsLoading);
+			const visibleThreads = !locked && (threadsErrorMessage || loadingWithoutRows) ? [] : showingExamples ? THREADS_EXAMPLE_THREADS : displayThreads;
 			if (showingExamples) this.trackThreadsExampleViewedOnce();
 			const selectedThread = this.selectedThreadId != null ? (_visibleThreads$find = visibleThreads.find((t) => t.id === this.selectedThreadId)) !== null && _visibleThreads$find !== void 0 ? _visibleThreads$find : null : null;
-			const selectedThreadIsExample = this.isExampleThreadId(selectedThread === null || selectedThread === void 0 ? void 0 : selectedThread.id);
-			if (!threadsErrorMessage) this.trackThreadsViewStateOnce(displayThreads.length === 0 ? "empty_enabled" : "enabled", displayThreads.length);
+			const selectedThreadIsLocalExample = selectedThread !== null && selectedThread.id === this.selectedLocalExampleThreadId;
+			if (locked) this.trackThreadsViewStateOnce("locked");
+			else if (!threadsErrorMessage && (!threadsLoading || displayThreads.length > 0)) this.trackThreadsViewStateOnce(displayThreads.length === 0 ? "empty_enabled" : "enabled");
 			return lit.html`
       <div style="display:flex;height:100%;overflow:hidden;flex-direction:column;">
         <div style="display:flex;min-height:0;flex:1;overflow:hidden;">
@@ -7039,14 +8145,16 @@ ${argsString}</pre
             style="width:${this.threadListWidth}px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;border-right:1px solid #DBDBE5;"
           >
             <cpk-thread-list
-              style="height:100%;"
+              style="min-height:0;flex:1;"
               .threads=${visibleThreads}
               .selectedThreadId=${this.selectedThreadId}
               .errorMessage=${threadsErrorMessage}
+              .suppressEmptyState=${loadingWithoutRows}
               @threadSelected=${(e) => {
 				this.handleThreadsThreadSelected(e.detail, showingExamples);
 			}}
             ></cpk-thread-list>
+            ${this.renderThreadsUsageFooter()}
           </div>
 
           <!-- Resize divider -->
@@ -7060,19 +8168,53 @@ ${argsString}</pre
 
           <!-- Center + right: thread details or empty state -->
           <div style="flex:1;min-width:0;overflow:hidden;display:flex;position:relative;">
-            ${selectedThread ? lit.html`<cpk-thread-details
+            ${!locked && threadsErrorMessage ? lit.html`
+                    <div
+                      role="alert"
+                      style="
+                        display: flex;
+                        flex: 1;
+                        flex-direction: column;
+                        align-items: center;
+                        justify-content: center;
+                        gap: 6px;
+                        padding: 24px;
+                        color: #c0333a;
+                        text-align: center;
+                      "
+                    >
+                      <strong style="font-size:13px;">Failed to load threads</strong>
+                      <span style="max-width:440px;font-size:12px;line-height:1.5;"
+                        >${threadsErrorMessage}</span
+                      >
+                    </div>
+                  ` : loadingWithoutRows ? lit.html`
+                      <div
+                        role="status"
+                        style="
+                          display: flex;
+                          flex: 1;
+                          align-items: center;
+                          justify-content: center;
+                          color: #57575b;
+                          font-size: 13px;
+                        "
+                      >
+                        Loading threads…
+                      </div>
+                    ` : selectedThread ? lit.html`<cpk-thread-details
                     style="flex:1;min-width:0;"
                     .threadId=${selectedThread.id}
                     .thread=${selectedThread}
-                    .provider=${selectedThreadIsExample ? this.getExampleThreadProvider(selectedThread.id) : null}
-                    .runtimeUrl=${(_this$_core$runtimeUr = (_this$_core4 = this._core) === null || _this$_core4 === void 0 ? void 0 : _this$_core4.runtimeUrl) !== null && _this$_core$runtimeUr !== void 0 ? _this$_core$runtimeUr : ""}
-                    .headers=${(_this$_core$headers = (_this$_core5 = this._core) === null || _this$_core5 === void 0 ? void 0 : _this$_core5.headers) !== null && _this$_core$headers !== void 0 ? _this$_core$headers : {}}
-                    .threadInspectionAvailable=${selectedThreadIsExample || ((_this$_core6 = this._core) === null || _this$_core6 === void 0 || (_this$_core6 = _this$_core6.threadEndpoints) === null || _this$_core6 === void 0 ? void 0 : _this$_core6.inspect) !== false}
+                    .provider=${selectedThreadIsLocalExample ? this.getExampleThreadProvider(selectedThread.id) : null}
+                    .runtimeUrl=${selectedThreadIsLocalExample ? "" : (_this$_core$runtimeUr = (_this$_core6 = this._core) === null || _this$_core6 === void 0 ? void 0 : _this$_core6.runtimeUrl) !== null && _this$_core$runtimeUr !== void 0 ? _this$_core$runtimeUr : ""}
+                    .headers=${(_this$_core$headers = (_this$_core7 = this._core) === null || _this$_core7 === void 0 ? void 0 : _this$_core7.headers) !== null && _this$_core$headers !== void 0 ? _this$_core$headers : {}}
+                    .threadInspectionAvailable=${selectedThreadIsLocalExample || this.areThreadEndpointsAvailable() && ((_this$_core8 = this._core) === null || _this$_core8 === void 0 || (_this$_core8 = _this$_core8.threadEndpoints) === null || _this$_core8 === void 0 ? void 0 : _this$_core8.inspect) !== false}
                     .liveMessageVersion=${(_this$liveMessageVers2 = this.liveMessageVersion.get(selectedThread.id)) !== null && _this$liveMessageVers2 !== void 0 ? _this$liveMessageVers2 : 0}
                     .agentStateInput=${this.getLatestStateForAgent(selectedThread.agentId)}
                     .agentEventsInput=${(_this$agentEvents$get6 = this.agentEvents.get(selectedThread.agentId)) !== null && _this$agentEvents$get6 !== void 0 ? _this$agentEvents$get6 : []}
                   ></cpk-thread-details>
-                  ${selectedThreadIsExample ? this.renderThreadsExampleTour() : lit.nothing}` : showingExamples ? this.renderThreadsExampleOverview() : lit.html`
+                  ${selectedThreadIsLocalExample ? this.renderThreadsExampleTour() : lit.nothing}` : showingExamples ? this.renderThreadsExampleOverview(locked) : lit.html`
                     <div
                       style="
                         flex: 1;
@@ -7081,7 +8223,7 @@ ${argsString}</pre
                         align-items: center;
                         justify-content: center;
                         gap: 8px;
-                        color: #838389;
+                        color: #68686e;
                       "
                     >
                       <svg
@@ -7611,9 +8753,12 @@ ${prettyEvent}</pre
     `;
 		}
 		handleMenuSelect(key) {
-			if (key !== "settings" && !this.menuItems.some((item) => item.key === key)) return;
+			if (!this.menuItems.some((item) => item.key === key)) return;
 			const previousMenu = this.selectedMenu;
+			this.pendingPersistedMenu = null;
 			this.selectedMenu = key;
+			this.settingsOpen = false;
+			this.lastSelectedMenuByGroup[this.getGroupForMenu(key)] = key;
 			if (key === "agents" && this.selectedContext === "all-agents") {
 				const agentOptions = this.contextOptions.filter((opt) => opt.key !== "all-agents");
 				if (agentOptions.length > 0) {
@@ -7642,8 +8787,8 @@ ${prettyEvent}</pre
 				if (previousMenu !== "memories" && !((_this$core29 = this.core) === null || _this$core29 === void 0 ? void 0 : _this$core29.telemetryDisabled)) trackMemoriesTabClicked(this.getMemoriesTelemetryProps());
 			}
 			if (key === "ag-ui-events" || key === "agents") requestAnimationFrame(() => {
-				var _this$shadowRoot3;
-				const scroller = (_this$shadowRoot3 = this.shadowRoot) === null || _this$shadowRoot3 === void 0 ? void 0 : _this$shadowRoot3.getElementById("cpk-main-scroll");
+				var _this$shadowRoot6;
+				const scroller = (_this$shadowRoot6 = this.shadowRoot) === null || _this$shadowRoot6 === void 0 ? void 0 : _this$shadowRoot6.getElementById("cpk-main-scroll");
 				if (scroller) scroller.scrollTop = 0;
 			});
 			this.contextMenuOpen = false;
@@ -7661,6 +8806,7 @@ ${prettyEvent}</pre
 			if (this.selectedContext !== key) {
 				this.selectedContext = key;
 				this.expandedRows.clear();
+				this.autoSelectLatestThread();
 			}
 			this.contextMenuOpen = false;
 			this.persistState();
@@ -8050,9 +9196,9 @@ ${prettyEvent}</pre
 			let currentSchema = schema;
 			let def = currentSchema._def;
 			while (def.typeName === "ZodOptional" || def.typeName === "ZodNullable" || def.typeName === "ZodDefault") {
-				var _ref6;
+				var _ref10;
 				if (def.typeName === "ZodDefault" && def.defaultValue !== void 0) info.defaultValue = typeof def.defaultValue === "function" ? def.defaultValue() : def.defaultValue;
-				currentSchema = (_ref6 = def.innerType) !== null && _ref6 !== void 0 ? _ref6 : currentSchema;
+				currentSchema = (_ref10 = def.innerType) !== null && _ref10 !== void 0 ? _ref10 : currentSchema;
 				if (!(currentSchema === null || currentSchema === void 0 ? void 0 : currentSchema._def)) break;
 				def = currentSchema._def;
 			}
@@ -8222,13 +9368,13 @@ ${prettyEvent}</pre
 			if (typeof value === "function") return value.toString();
 			try {
 				return JSON.stringify(value, null, 2);
-			} catch (_unused10) {
+			} catch (_unused21) {
 				return String(value);
 			}
 		}
 		async copyContextValue(value, contextId) {
-			var _navigator$clipboard2;
-			if (typeof navigator === "undefined" || !((_navigator$clipboard2 = navigator.clipboard) === null || _navigator$clipboard2 === void 0 ? void 0 : _navigator$clipboard2.writeText)) {
+			var _navigator$clipboard3;
+			if (typeof navigator === "undefined" || !((_navigator$clipboard3 = navigator.clipboard) === null || _navigator$clipboard3 === void 0 ? void 0 : _navigator$clipboard3.writeText)) {
 				console.warn("Clipboard API is not available in this environment.");
 				return;
 			}
@@ -8439,7 +9585,7 @@ ${prettyEvent}</pre
 			try {
 				const url = new URL(href, typeof window !== "undefined" ? window.location.href : "https://copilotkit.ai");
 				return url.protocol === "http:" || url.protocol === "https:" || url.protocol === "mailto:";
-			} catch (_unused11) {
+			} catch (_unused22) {
 				return false;
 			}
 		}
@@ -8469,7 +9615,7 @@ ${prettyEvent}</pre
 				}
 				if (isRootRelative) return `${url.pathname}${url.search}${url.hash}`;
 				return url.toString();
-			} catch (_unused12) {
+			} catch (_unused23) {
 				return href;
 			}
 		}
@@ -8488,7 +9634,7 @@ ${prettyEvent}</pre
 				const parsed = JSON.parse(raw);
 				if (parsed && typeof parsed.timestamp === "string") return parsed.timestamp;
 				return null;
-			} catch (_unused13) {}
+			} catch (_unused24) {}
 			return null;
 		}
 		persistAnnouncementTimestamp(timestamp) {
@@ -8496,7 +9642,7 @@ ${prettyEvent}</pre
 			try {
 				const payload = JSON.stringify({ timestamp });
 				window.localStorage.setItem(ANNOUNCEMENT_STORAGE_KEY, payload);
-			} catch (_unused14) {}
+			} catch (_unused25) {}
 		}
 		markAnnouncementSeen() {
 			this.hasUnseenAnnouncement = false;
@@ -8678,7 +9824,7 @@ ${prettyEvent}</pre
         align-items: center;
         justify-content: center;
         border-radius: 6px;
-        color: #838389;
+        color: #68686e;
         cursor: pointer;
         transition:
           background 120ms ease,
@@ -8699,7 +9845,7 @@ ${prettyEvent}</pre
         background: none;
         border: none;
         cursor: pointer;
-        color: #838389;
+        color: #68686e;
         width: 28px;
         height: 28px;
         display: flex;
@@ -8748,7 +9894,7 @@ ${prettyEvent}</pre
         height: 24px;
         border-radius: 50%;
         background-color: #f0f0f4;
-        color: #838389;
+        color: #68686e;
         flex-shrink: 0;
         transition: transform 0.2s;
       }
@@ -8865,7 +10011,7 @@ ${prettyEvent}</pre
       }
 
       .announcement-content a {
-        color: #757cf2;
+        color: #5558b2;
         text-decoration: underline;
       }
 
@@ -8989,7 +10135,7 @@ ${prettyEvent}</pre
         font-family: "Plus Jakarta Sans", system-ui, sans-serif;
         font-size: 12px;
         font-weight: 500;
-        color: #757cf2;
+        color: #5558b2;
         cursor: pointer;
         text-align: center;
       }
@@ -9060,14 +10206,14 @@ ${prettyEvent}</pre
         align-items: center;
       }
       .cpk-tab-active .cpk-tab-icon {
-        color: #757cf2;
+        color: #5558b2;
       }
       .cpk-tab-inactive {
         background-color: transparent;
         color: #2b2b2b;
       }
       .cpk-tab-inactive .cpk-tab-icon {
-        color: #838389;
+        color: #68686e;
       }
       .cpk-tab-inactive:hover {
         background-color: rgba(190, 194, 255, 0.08);
@@ -9100,24 +10246,40 @@ ${prettyEvent}</pre
         width: 100%;
         height: 100%;
         object-fit: cover;
-        opacity: 0;
-        transition: opacity 220ms ease;
-      }
-      .cpk-threads-overview-video[data-ready="true"] {
-        opacity: 1;
       }
 
-      /* ── Header control buttons (dock, close) — first row only ───── */
-      .drag-handle > div:first-child button {
-        color: #838389 !important;
+      /* ── Header controls on the dark account strip ──────────────── */
+      .drag-handle > div[data-inspector-account-strip] button {
+        color: #afafb7 !important;
+        cursor: pointer;
       }
-      .drag-handle > div:first-child button:hover {
-        background-color: #f0f0f4 !important;
-        color: #57575b !important;
+      .drag-handle > div[data-inspector-account-strip] button,
+      .inspector-nav-control,
+      [data-inspector-thread-cta] {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
       }
-      .drag-handle > div:first-child button:focus-visible {
+      .drag-handle > div[data-inspector-account-strip] button:hover {
+        background-color: rgba(255, 255, 255, 0.12) !important;
+        color: #ffffff !important;
+      }
+      .drag-handle > div[data-inspector-account-strip] button:focus-visible {
         outline-color: #bec2ff !important;
       }
+      .drag-handle > div[data-inspector-account-strip] button:focus,
+      .drag-handle > div[data-inspector-account-strip] button:focus-visible {
+        outline: 2px solid #bec2ff !important;
+        outline-offset: 2px;
+      }
+      .inspector-nav-control:focus,
+      .inspector-nav-control:focus-visible,
+      [data-inspector-thread-cta]:focus,
+      [data-inspector-thread-cta]:focus-visible,
+      [data-inspector-action-placement="threads-footer"]:focus,
+      [data-inspector-action-placement="threads-footer"]:focus-visible {
+        outline: 2px solid #6430ab !important;
+        outline-offset: 2px;
+      }
 
       /* ── Agent/context dropdown ──────────────────────────────────── */
       [data-context-dropdown-root="true"] > button {
@@ -9129,7 +10291,7 @@ ${prettyEvent}</pre
         background-color: #f7f7f9 !important;
       }
       [data-context-dropdown-root="true"] > button > span:last-child {
-        color: #838389 !important;
+        color: #68686e !important;
       }
       [data-context-dropdown-root="true"] > div {
         border-color: #dbdbe5 !important;
@@ -9139,6 +10301,28 @@ ${prettyEvent}</pre
       [data-context-dropdown-root="true"] > div button:focus {
         background-color: #f7f7f9 !important;
       }
+      [data-inspector-account-strip]
+        .inspector-agent-selector
+        > [data-context-dropdown-root="true"]
+        > button {
+        border-color: rgba(255, 255, 255, 0.28) !important;
+        background-color: transparent !important;
+        color: #e7e7ec !important;
+      }
+      [data-inspector-account-strip]
+        .inspector-agent-selector
+        > [data-context-dropdown-root="true"]
+        > button:hover {
+        border-color: rgba(190, 194, 255, 0.7) !important;
+        background-color: rgba(255, 255, 255, 0.08) !important;
+      }
+      [data-inspector-account-strip]
+        .inspector-agent-selector
+        > [data-context-dropdown-root="true"]
+        > button
+        > span:last-child {
+        color: #afafb7 !important;
+      }
 
       /* ── Status bar (bottom chrome) ──────────────────────────────── */
       .inspector-window > div > div:last-child {
@@ -9148,7 +10332,7 @@ ${prettyEvent}</pre
 
       /* ── Resize handle ───────────────────────────────────────────── */
       .resize-handle {
-        color: #838389 !important;
+        color: #68686e !important;
       }
       .resize-handle:hover {
         color: #57575b !important;
@@ -9169,7 +10353,7 @@ ${prettyEvent}</pre
       /* Copy "copied" state: generic green → brand mint */
       button[class*="bg-green-100"] {
         background-color: rgba(133, 236, 206, 0.2) !important;
-        color: #189370 !important;
+        color: #087653 !important;
       }
 
       /* ── Agents tab ──────────────────────────────────────────────── */
@@ -9178,14 +10362,14 @@ ${prettyEvent}</pre
         background-color: rgba(190, 194, 255, 0.15) !important;
       }
       span[class*="text-blue-600"] {
-        color: #757cf2 !important;
+        color: #5558b2 !important;
       }
       /* Running badge: emerald → mint */
       span[class*="bg-emerald-50"] {
         background-color: rgba(133, 236, 206, 0.15) !important;
       }
       span[class*="text-emerald-700"] {
-        color: #189370 !important;
+        color: #087653 !important;
       }
       /* Running status dot */
       span[class*="bg-emerald-500"] {
@@ -9205,7 +10389,7 @@ ${prettyEvent}</pre
       span[class*="bg-green-100"][class*="text-green-800"] {
         background-color: rgba(133, 236, 206, 0.18) !important;
         border: 1px solid rgba(133, 236, 206, 0.4) !important;
-        color: #189370 !important;
+        color: #087653 !important;
       }
       /* Tool role badge (amber → orange brand) */
       span[class*="bg-amber-100"][class*="text-amber-800"] {
@@ -9246,13 +10430,17 @@ ${prettyEvent}</pre
         > div:last-child:has(div[class*="bg-emerald-50"]) {
         background-color: rgba(91, 228, 187, 0.08) !important;
         border-top-color: rgba(91, 228, 187, 0.3) !important;
-        color: #189370 !important;
+        color: #087653 !important;
       }
       /* Inner badge — slightly more opaque on the mint bg */
       div[class*="bg-emerald-50"][class*="border-emerald-200"] {
         background-color: rgba(91, 228, 187, 0.12) !important;
         border-color: rgba(91, 228, 187, 0.4) !important;
-        color: #189370 !important;
+        color: #087653 !important;
+      }
+      div[class*="bg-emerald-50"][class*="border-emerald-200"]
+        span[class*="opacity-80"] {
+        opacity: 1 !important;
       }
       /* Icon bubble inside connected badge → mint tint */
       div[class*="bg-emerald-50"] span[class*="bg-white"] {
@@ -9267,7 +10455,7 @@ ${prettyEvent}</pre
       span[class*="bg-slate-900"],
       div[class*="bg-slate-900"] {
         background-color: #eee6fe !important;
-        color: #757cf2 !important;
+        color: #5558b2 !important;
       }
       span[class*="text-slate-800"],
       div[class*="text-slate-800"] {