@ai-sdk/devtools 1.0.6 → 1.0.7

package/dist/client/assets/index-CIZI8r26.css

@@ -0,0 +1 @@
+/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@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-space-y-reverse:0;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@layer theme{:root,:host{--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--tracking-wider:.05em;--leading-tight:1.25;--leading-relaxed:1.625;--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:"Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--default-mono-font-family:"Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace}}@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%;-moz-tab-size:4;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;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]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:var(--border);outline-color:var(--ring)}body{background-color:var(--background);color:var(--foreground);font-family:Geist Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}code,pre,kbd{font-family:Geist Mono,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace}*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background-color:var(--muted-foreground)}::-webkit-scrollbar-corner{background:0 0}}@layer components;@layer utilities{.\@container\/card-header{container:card-header/inline-size}.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}.inset-0{inset:calc(var(--spacing) * 0)}.top-0{top:calc(var(--spacing) * 0)}.top-1{top:calc(var(--spacing) * 1)}.top-1\.5{top:calc(var(--spacing) * 1.5)}.right-1\.5{right:calc(var(--spacing) * 1.5)}.bottom-0{bottom:calc(var(--spacing) * 0)}.bottom-1{bottom:calc(var(--spacing) * 1)}.z-10{z-index:10}.z-50{z-index:50}.col-start-2{grid-column-start:2}.row-span-2{grid-row:span 2/span 2}.row-start-1{grid-row-start:1}.mx-1{margin-inline:calc(var(--spacing) * 1)}.mx-auto{margin-inline:auto}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-auto{margin-top:auto}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-5\.5{margin-left:calc(var(--spacing) * 5.5)}.ml-auto{margin-left:auto}.line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-6{-webkit-line-clamp:6;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.size-2\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-full{width:100%;height:100%}.h-2{height:calc(var(--spacing) * 2)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-5{height:calc(var(--spacing) * 5)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-20{max-height:calc(var(--spacing) * 20)}.max-h-40{max-height:calc(var(--spacing) * 40)}.max-h-60{max-height:calc(var(--spacing) * 60)}.max-h-\[400px\]{max-height:400px}.min-h-\[calc\(100vh-57px\)\]{min-height:calc(100vh - 57px)}.min-h-full{min-height:100%}.w-1{width:calc(var(--spacing) * 1)}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-4{width:calc(var(--spacing) * 4)}.w-\[100px\]{width:100px}.w-\[300px\]{width:300px}.w-\[800px\]{width:800px}.w-fit{width:fit-content}.w-full{width:100%}.max-w-\[200px\]{max-width:200px}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.origin-\(--radix-tooltip-content-transform-origin\){transform-origin:var(--radix-tooltip-content-transform-origin)}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-90{rotate:90deg}.rotate-180{rotate:180deg}.animate-in{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-help{cursor:help}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.auto-rows-min{grid-auto-rows:min-content}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-rows-\[auto_auto\]{grid-template-rows:auto auto}.flex-col{flex-direction:column}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-0{gap:calc(var(--spacing) * 0)}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}: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(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.divide-x>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px * var(--tw-divide-x-reverse));border-inline-end-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}:where(.divide-border>:not(:last-child)){border-color:var(--border)}.self-start{align-self:flex-start}.self-stretch{align-self:stretch}.justify-self-end{justify-self:flex-end}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.rounded-xl{border-radius:calc(var(--radius) + 4px)}.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-agent\/20{border-color:var(--agent)}@supports (color:color-mix(in lab,red,red)){.border-agent\/20{border-color:color-mix(in oklab,var(--agent) 20%,transparent)}}.border-agent\/30{border-color:var(--agent)}@supports (color:color-mix(in lab,red,red)){.border-agent\/30{border-color:color-mix(in oklab,var(--agent) 30%,transparent)}}.border-border,.border-border\/20{border-color:var(--border)}@supports (color:color-mix(in lab,red,red)){.border-border\/20{border-color:color-mix(in oklab,var(--border) 20%,transparent)}}.border-border\/30{border-color:var(--border)}@supports (color:color-mix(in lab,red,red)){.border-border\/30{border-color:color-mix(in oklab,var(--border) 30%,transparent)}}.border-border\/50{border-color:var(--border)}@supports (color:color-mix(in lab,red,red)){.border-border\/50{border-color:color-mix(in oklab,var(--border) 50%,transparent)}}.border-destructive\/30{border-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.border-destructive\/30{border-color:color-mix(in oklab,var(--destructive) 30%,transparent)}}.border-info\/30{border-color:var(--info)}@supports (color:color-mix(in lab,red,red)){.border-info\/30{border-color:color-mix(in oklab,var(--info) 30%,transparent)}}.border-success\/30{border-color:var(--success)}@supports (color:color-mix(in lab,red,red)){.border-success\/30{border-color:color-mix(in oklab,var(--success) 30%,transparent)}}.border-tool\/30{border-color:var(--tool)}@supports (color:color-mix(in lab,red,red)){.border-tool\/30{border-color:color-mix(in oklab,var(--tool) 30%,transparent)}}.border-transparent{border-color:#0000}.border-warning\/20{border-color:var(--warning)}@supports (color:color-mix(in lab,red,red)){.border-warning\/20{border-color:color-mix(in oklab,var(--warning) 20%,transparent)}}.border-warning\/30{border-color:var(--warning)}@supports (color:color-mix(in lab,red,red)){.border-warning\/30{border-color:color-mix(in oklab,var(--warning) 30%,transparent)}}.border-t-transparent{border-top-color:#0000}.border-l-transparent{border-left-color:#0000}.bg-accent{background-color:var(--accent)}.bg-agent,.bg-agent\/10{background-color:var(--agent)}@supports (color:color-mix(in lab,red,red)){.bg-agent\/10{background-color:color-mix(in oklab,var(--agent) 10%,transparent)}}.bg-agent\/20{background-color:var(--agent)}@supports (color:color-mix(in lab,red,red)){.bg-agent\/20{background-color:color-mix(in oklab,var(--agent) 20%,transparent)}}.bg-background,.bg-background\/50{background-color:var(--background)}@supports (color:color-mix(in lab,red,red)){.bg-background\/50{background-color:color-mix(in oklab,var(--background) 50%,transparent)}}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab,red,red)){.bg-black\/50{background-color:color-mix(in oklab,var(--color-black) 50%,transparent)}}.bg-border{background-color:var(--border)}.bg-card,.bg-card\/50{background-color:var(--card)}@supports (color:color-mix(in lab,red,red)){.bg-card\/50{background-color:color-mix(in oklab,var(--card) 50%,transparent)}}.bg-danger,.bg-danger\/20{background-color:var(--danger)}@supports (color:color-mix(in lab,red,red)){.bg-danger\/20{background-color:color-mix(in oklab,var(--danger) 20%,transparent)}}.bg-destructive,.bg-destructive\/10{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.bg-destructive\/10{background-color:color-mix(in oklab,var(--destructive) 10%,transparent)}}.bg-info,.bg-info\/10{background-color:var(--info)}@supports (color:color-mix(in lab,red,red)){.bg-info\/10{background-color:color-mix(in oklab,var(--info) 10%,transparent)}}.bg-info\/15{background-color:var(--info)}@supports (color:color-mix(in lab,red,red)){.bg-info\/15{background-color:color-mix(in oklab,var(--info) 15%,transparent)}}.bg-info\/20{background-color:var(--info)}@supports (color:color-mix(in lab,red,red)){.bg-info\/20{background-color:color-mix(in oklab,var(--info) 20%,transparent)}}.bg-muted,.bg-muted\/10{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.bg-muted\/10{background-color:color-mix(in oklab,var(--muted) 10%,transparent)}}.bg-muted\/20{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.bg-muted\/20{background-color:color-mix(in oklab,var(--muted) 20%,transparent)}}.bg-muted\/30{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.bg-muted\/30{background-color:color-mix(in oklab,var(--muted) 30%,transparent)}}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.bg-sidebar{background-color:var(--sidebar)}.bg-sidebar-primary\/10{background-color:var(--sidebar-primary)}@supports (color:color-mix(in lab,red,red)){.bg-sidebar-primary\/10{background-color:color-mix(in oklab,var(--sidebar-primary) 10%,transparent)}}.bg-success,.bg-success\/5{background-color:var(--success)}@supports (color:color-mix(in lab,red,red)){.bg-success\/5{background-color:color-mix(in oklab,var(--success) 5%,transparent)}}.bg-success\/10{background-color:var(--success)}@supports (color:color-mix(in lab,red,red)){.bg-success\/10{background-color:color-mix(in oklab,var(--success) 10%,transparent)}}.bg-success\/15{background-color:var(--success)}@supports (color:color-mix(in lab,red,red)){.bg-success\/15{background-color:color-mix(in oklab,var(--success) 15%,transparent)}}.bg-success\/20{background-color:var(--success)}@supports (color:color-mix(in lab,red,red)){.bg-success\/20{background-color:color-mix(in oklab,var(--success) 20%,transparent)}}.bg-tool,.bg-tool\/10{background-color:var(--tool)}@supports (color:color-mix(in lab,red,red)){.bg-tool\/10{background-color:color-mix(in oklab,var(--tool) 10%,transparent)}}.bg-tool\/20{background-color:var(--tool)}@supports (color:color-mix(in lab,red,red)){.bg-tool\/20{background-color:color-mix(in oklab,var(--tool) 20%,transparent)}}.bg-warning,.bg-warning\/5{background-color:var(--warning)}@supports (color:color-mix(in lab,red,red)){.bg-warning\/5{background-color:color-mix(in oklab,var(--warning) 5%,transparent)}}.bg-warning\/10{background-color:var(--warning)}@supports (color:color-mix(in lab,red,red)){.bg-warning\/10{background-color:color-mix(in oklab,var(--warning) 10%,transparent)}}.bg-warning\/20{background-color:var(--warning)}@supports (color:color-mix(in lab,red,red)){.bg-warning\/20{background-color:color-mix(in oklab,var(--warning) 20%,transparent)}}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-px{padding:1px}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0{padding-block:calc(var(--spacing) * 0)}.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-6{padding-block:calc(var(--spacing) * 6)}.pt-0\.5{padding-top:calc(var(--spacing) * .5)}.pt-1{padding-top:calc(var(--spacing) * 1)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-2\.5{padding-bottom:calc(var(--spacing) * 2.5)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pl-1{padding-left:calc(var(--spacing) * 1)}.text-center{text-align:center}.text-left{text-align:left}.font-mono{font-family:Geist Mono,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--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}.text-\[13px\]{font-size:13px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-balance{text-wrap:balance}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-agent{color:var(--agent)}.text-card-foreground{color:var(--card-foreground)}.text-danger{color:var(--danger)}.text-destructive{color:var(--destructive)}.text-destructive-foreground{color:var(--destructive-foreground)}.text-foreground,.text-foreground\/80{color:var(--foreground)}@supports (color:color-mix(in lab,red,red)){.text-foreground\/80{color:color-mix(in oklab,var(--foreground) 80%,transparent)}}.text-foreground\/90{color:var(--foreground)}@supports (color:color-mix(in lab,red,red)){.text-foreground\/90{color:color-mix(in oklab,var(--foreground) 90%,transparent)}}.text-info{color:var(--info)}.text-muted-foreground,.text-muted-foreground\/30{color:var(--muted-foreground)}@supports (color:color-mix(in lab,red,red)){.text-muted-foreground\/30{color:color-mix(in oklab,var(--muted-foreground) 30%,transparent)}}.text-muted-foreground\/50{color:var(--muted-foreground)}@supports (color:color-mix(in lab,red,red)){.text-muted-foreground\/50{color:color-mix(in oklab,var(--muted-foreground) 50%,transparent)}}.text-muted-foreground\/60{color:var(--muted-foreground)}@supports (color:color-mix(in lab,red,red)){.text-muted-foreground\/60{color:color-mix(in oklab,var(--muted-foreground) 60%,transparent)}}.text-muted-foreground\/70{color:var(--muted-foreground)}@supports (color:color-mix(in lab,red,red)){.text-muted-foreground\/70{color:color-mix(in oklab,var(--muted-foreground) 70%,transparent)}}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-sidebar-primary{color:var(--sidebar-primary)}.text-success{color:var(--success)}.text-tool{color:var(--tool)}.text-warning{color:var(--warning)}.text-white{color:var(--color-white)}.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline-offset-4{text-underline-offset:4px}.opacity-0{opacity:0}.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)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-2{--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)}.ring-foreground\/50{--tw-ring-color:var(--foreground)}@supports (color:color-mix(in lab,red,red)){.ring-foreground\/50{--tw-ring-color:color-mix(in oklab, var(--foreground) 50%, transparent)}}.ring-info\/50{--tw-ring-color:var(--info)}@supports (color:color-mix(in lab,red,red)){.ring-info\/50{--tw-ring-color:color-mix(in oklab, var(--info) 50%, transparent)}}.ring-offset-1{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ring-offset-background{--tw-ring-offset-color:var(--background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.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-opacity{transition-property:opacity;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))}.fade-in-0{--tw-enter-opacity:0}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.zoom-in-95{--tw-enter-scale:.95}@media(hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block:is(:where(.group\/drawer-content)[data-vaul-drawer-direction=bottom] *){display:block}.group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center:is(:where(.group\/drawer-content)[data-vaul-drawer-direction=bottom] *),.group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center:is(:where(.group\/drawer-content)[data-vaul-drawer-direction=top] *){text-align:center}@media(hover:hover){.hover\:bg-accent:hover,.hover\:bg-accent\/30:hover{background-color:var(--accent)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-accent\/30:hover{background-color:color-mix(in oklab,var(--accent) 30%,transparent)}}.hover\:bg-accent\/50:hover{background-color:var(--accent)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-accent\/50:hover{background-color:color-mix(in oklab,var(--accent) 50%,transparent)}}.hover\:bg-agent\/15:hover{background-color:var(--agent)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-agent\/15:hover{background-color:color-mix(in oklab,var(--agent) 15%,transparent)}}.hover\:bg-destructive\/20:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/20:hover{background-color:color-mix(in oklab,var(--destructive) 20%,transparent)}}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--destructive) 90%,transparent)}}.hover\:bg-info\/20:hover{background-color:var(--info)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-info\/20:hover{background-color:color-mix(in oklab,var(--info) 20%,transparent)}}.hover\:bg-muted\/50:hover{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-muted\/50:hover{background-color:color-mix(in oklab,var(--muted) 50%,transparent)}}.hover\:bg-primary\/30:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/30:hover{background-color:color-mix(in oklab,var(--primary) 30%,transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--primary) 90%,transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab,var(--secondary) 80%,transparent)}}.hover\:bg-success\/20:hover{background-color:var(--success)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-success\/20:hover{background-color:color-mix(in oklab,var(--success) 20%,transparent)}}.hover\:bg-tool\/20:hover{background-color:var(--tool)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-tool\/20:hover{background-color:color-mix(in oklab,var(--tool) 20%,transparent)}}.hover\:bg-warning\/20:hover{background-color:var(--warning)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-warning\/20:hover{background-color:color-mix(in oklab,var(--warning) 20%,transparent)}}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:text-foreground:hover{color:var(--foreground)}.hover\:underline:hover{text-decoration-line:underline}}.focus-visible\:border-ring:focus-visible{border-color:var(--ring)}.focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + 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-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:color-mix(in oklab, var(--destructive) 20%, transparent)}}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--ring)}.focus-visible\:outline-1:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}.has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.has-\[\>svg\]\:px-2\.5:has(>svg){padding-inline:calc(var(--spacing) * 2.5)}.has-\[\>svg\]\:px-3:has(>svg){padding-inline:calc(var(--spacing) * 3)}.has-\[\>svg\]\:px-4:has(>svg){padding-inline:calc(var(--spacing) * 4)}.aria-invalid\:border-destructive[aria-invalid=true]{border-color:var(--destructive)}.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--destructive) 20%, transparent)}}.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y:calc(2*var(--spacing)*-1)}.data-\[side\=left\]\:slide-in-from-right-2[data-side=left]{--tw-enter-translate-x:calc(2*var(--spacing))}.data-\[side\=right\]\:slide-in-from-left-2[data-side=right]{--tw-enter-translate-x:calc(2*var(--spacing)*-1)}.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y:calc(2*var(--spacing))}.data-\[state\=closed\]\:animate-out[data-state=closed]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.data-\[state\=closed\]\:zoom-out-95[data-state=closed]{--tw-exit-scale:.95}.data-\[state\=open\]\:animate-in[data-state=open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=open\]\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction=bottom]{inset-inline:calc(var(--spacing) * 0)}.data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction=bottom]{bottom:calc(var(--spacing) * 0)}.data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction=bottom]{margin-top:calc(var(--spacing) * 24)}.data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction=bottom]{max-height:80vh}.data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction=bottom]{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}.data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction=bottom]{border-top-style:var(--tw-border-style);border-top-width:1px}.data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction=left]{inset-block:calc(var(--spacing) * 0)}.data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction=left]{left:calc(var(--spacing) * 0)}.data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction=left]{width:75%}.data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction=left]{border-right-style:var(--tw-border-style);border-right-width:1px}.data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction=right]{inset-block:calc(var(--spacing) * 0)}.data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction=right]{right:calc(var(--spacing) * 0)}.data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction=right]{border-left-style:var(--tw-border-style);border-left-width:1px}.data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction=top]{inset-inline:calc(var(--spacing) * 0)}.data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction=top]{top:calc(var(--spacing) * 0)}.data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction=top]{margin-bottom:calc(var(--spacing) * 24)}.data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction=top]{max-height:80vh}.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction=top]{border-bottom-right-radius:var(--radius);border-bottom-left-radius:var(--radius)}.data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction=top]{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}@media(min-width:40rem){.sm\:max-w-\[800px\]{max-width:800px}.data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction=left]{max-width:var(--container-sm)}}@media(min-width:48rem){.md\:gap-1\.5{gap:calc(var(--spacing) * 1.5)}.md\:text-left{text-align:left}}.dark\:border-input:is(.dark *){border-color:var(--input)}.dark\:bg-destructive\/60:is(.dark *){background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\:bg-destructive\/60:is(.dark *){background-color:color-mix(in oklab,var(--destructive) 60%,transparent)}}.dark\:bg-input\/30:is(.dark *){background-color:var(--input)}@supports (color:color-mix(in lab,red,red)){.dark\:bg-input\/30:is(.dark *){background-color:color-mix(in oklab,var(--input) 30%,transparent)}}@media(hover:hover){.dark\:hover\:bg-accent\/50:is(.dark *):hover{background-color:var(--accent)}@supports (color:color-mix(in lab,red,red)){.dark\:hover\:bg-accent\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--accent) 50%,transparent)}}.dark\:hover\:bg-input\/50:is(.dark *):hover{background-color:var(--input)}@supports (color:color-mix(in lab,red,red)){.dark\:hover\:bg-input\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--input) 50%,transparent)}}}.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible{--tw-ring-color:color-mix(in oklab, var(--destructive) 40%, transparent)}}.dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--destructive) 40%, transparent)}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\.border-b\]\:pb-6.border-b{padding-bottom:calc(var(--spacing) * 6)}.\[\.border-t\]\:pt-6.border-t{padding-top:calc(var(--spacing) * 6)}.\[\&\>svg\]\:pointer-events-none>svg{pointer-events:none}.\[\&\>svg\]\:size-3>svg{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}@media(hover:hover){a.\[a\&\]\:hover\:bg-accent:hover{background-color:var(--accent)}a.\[a\&\]\:hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){a.\[a\&\]\:hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--destructive) 90%,transparent)}}a.\[a\&\]\:hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){a.\[a\&\]\:hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--primary) 90%,transparent)}}a.\[a\&\]\:hover\:bg-secondary\/90:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab,red,red)){a.\[a\&\]\:hover\:bg-secondary\/90:hover{background-color:color-mix(in oklab,var(--secondary) 90%,transparent)}}a.\[a\&\]\:hover\:text-accent-foreground:hover{color:var(--accent-foreground)}}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}:root,:root[data-theme=dark]{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(17% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(14.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(98.5% 0 0);--primary-foreground:oklch(20.5% 0 0);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(39.6% .141 25.723);--destructive-foreground:oklch(63.7% .237 25.331);--border:oklch(26.9% 0 0);--input:oklch(26.9% 0 0);--ring:oklch(60% 0 0);--chart-1:oklch(48.8% .243 264.376);--chart-2:oklch(69.6% .17 162.48);--chart-3:oklch(76.9% .188 70.08);--chart-4:oklch(62.7% .265 303.9);--chart-5:oklch(64.5% .246 16.439);--radius:.625rem;--sidebar:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(26.9% 0 0);--sidebar-ring:oklch(60% 0 0);--info:#60a5fa;--success:#4ade80;--warning:#fbbf24;--tool:#c084fc;--agent:#22d3ee;--danger:#f87171;color-scheme:dark}:root[data-theme=light]{--background:#fff;--foreground:#171717;--card:#fafafa;--card-foreground:#171717;--popover:#fff;--popover-foreground:#171717;--primary:#171717;--primary-foreground:#fafafa;--secondary:#f1f1f1;--secondary-foreground:#262626;--muted:#f1f1f1;--muted-foreground:#525252;--accent:#e5e5e5;--accent-foreground:#171717;--destructive:#dc2626;--destructive-foreground:#b91c1c;--border:#8a8a8a;--input:#8a8a8a;--ring:#737373;--chart-1:#1d4ed8;--chart-2:#15803d;--chart-3:#a16207;--chart-4:#7e22ce;--chart-5:#be123c;--sidebar:#f7f7f7;--sidebar-foreground:#171717;--sidebar-primary:#1d4ed8;--sidebar-primary-foreground:#fff;--sidebar-accent:#e5e5e5;--sidebar-accent-foreground:#171717;--sidebar-border:#8a8a8a;--sidebar-ring:#737373;--info:#1d4ed8;--success:#166534;--warning:#92400e;--tool:#7e22ce;--agent:#0e7490;--danger:#b91c1c;color-scheme:light}@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-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))}}

package/dist/client/index.html

@@ -10,8 +10,8 @@
       href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-DKzNaLaQ.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BVPj3Knk.css">
+    <script type="module" crossorigin src="/assets/index-Beo4T2zg.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CIZI8r26.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-sdk/devtools",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -55,7 +55,7 @@
     "vite": "^6.4.3",
     "vitest": "^4.1.6",
     "zod": "3.25.76",
-    "ai": "7.0.27"
+    "ai": "7.0.35"
   },
   "publishConfig": {
     "access": "public",
@@ -87,7 +87,9 @@
     "build": "pnpm build:client && pnpm build:server",
     "build:client": "vite build",
     "build:server": "tsup --tsconfig tsconfig.build.json",
-    "test": "vitest --config vitest.node.config.js --run",
+    "test": "pnpm test:unit",
+    "test:e2e": "pnpm build:client && playwright test",
+    "test:unit": "vitest --config vitest.node.config.js --run",
     "test:watch": "vitest --config vitest.node.config.js"
   }
 }

package/src/viewer/client/app.tsx

@@ -36,13 +36,31 @@ import {
 import { TokenBreakdownTooltip } from './components/shared-components';
 import { StepCard } from './components/step-card';
 import { TraceTimeline } from './components/trace-timeline';
+import { ThemeToggle } from './components/theme-toggle';
+import { setTheme, type Theme } from './theme';
 
-function App() {
+function App({
+  initialTheme,
+  storage,
+}: {
+  initialTheme: Theme;
+  storage?: Pick<Storage, 'setItem'>;
+}) {
   const [runs, setRuns] = useState<Run[]>([]);
   const [selectedRun, setSelectedRun] = useState<RunDetail | null>(null);
   const [expandedSteps, setExpandedSteps] = useState<Set<string>>(new Set());
   const [loading, setLoading] = useState(true);
   const [showTimeline, setShowTimeline] = useState(false);
+  const [theme, updateTheme] = useState<Theme>(initialTheme);
+
+  const handleThemeChange = (nextTheme: Theme) => {
+    setTheme({
+      theme: nextTheme,
+      root: document.documentElement,
+      storage,
+    });
+    updateTheme(nextTheme);
+  };
 
   const fetchRuns = async () => {
     try {
@@ -245,6 +263,7 @@ function App() {
           </span>
         </div>
         <div className="flex gap-2">
+          <ThemeToggle theme={theme} onThemeChange={handleThemeChange} />
           <Button
             variant="ghost"
             size="sm"
@@ -293,7 +312,7 @@ function App() {
                     >
                       <div className="flex items-start gap-2 mb-1.5 min-w-0">
                         {run.isInProgress ? (
-                          <Loader2 className="size-3.5 text-blue-400 mt-0.5 shrink-0 animate-spin" />
+                          <Loader2 className="size-3.5 text-info mt-0.5 shrink-0 animate-spin" />
                         ) : run.hasError ? (
                           <AlertCircle className="size-3.5 text-destructive-foreground mt-0.5 shrink-0" />
                         ) : (
@@ -315,8 +334,8 @@ function App() {
                           <span
                             className={`flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium ${
                               run.type === 'stream'
-                                ? 'bg-blue-500/15 text-blue-400'
-                                : 'bg-emerald-500/15 text-emerald-400'
+                                ? 'bg-info/15 text-info'
+                                : 'bg-success/15 text-success'
                             }`}
                           >
                             {run.type === 'stream' && (
@@ -363,7 +382,7 @@ function App() {
                     {selectedRun.run.isInProgress && (
                       <Badge
                         variant="secondary"
-                        className="text-[10px] h-5 gap-1.5 bg-blue-500/15 text-blue-400 border-blue-500/30"
+                        className="text-[10px] h-5 gap-1.5 bg-info/15 text-info border-info/30"
                       >
                         <Loader2 className="size-3 animate-spin" />
                         In Progress

package/src/viewer/client/components/message-components.tsx

@@ -174,7 +174,7 @@ function InputMessagePreview({
       </div>
 
       {reasoningContent && (
-        <div className="text-xs text-amber-500/60">[thinking]</div>
+        <div className="text-xs text-warning">[thinking]</div>
       )}
 
       {textContent && (

package/src/viewer/client/components/output-components.tsx

@@ -97,25 +97,25 @@ function ToolCallCard({
     typeof result === 'string' ? safeParseJson(result) : result;
 
   return (
-    <div className="rounded-md border border-purple/30 overflow-hidden">
+    <div className="rounded-md border border-tool/30 overflow-hidden">
       <button
-        className="w-full flex items-center gap-2 px-3 py-2 bg-purple/10 hover:bg-purple/20 transition-colors"
+        className="w-full flex items-center gap-2 px-3 py-2 bg-tool/10 hover:bg-tool/20 transition-colors"
         onClick={() => setExpanded(!expanded)}
       >
         <ChevronRight
-          className={`size-3 text-purple transition-transform shrink-0 ${
+          className={`size-3 text-tool transition-transform shrink-0 ${
             expanded ? 'rotate-90' : ''
           }`}
         />
-        <Wrench className="size-3 text-purple shrink-0" />
-        <span className="text-xs font-mono font-medium text-purple">
+        <Wrench className="size-3 text-tool shrink-0" />
+        <span className="text-xs font-mono font-medium text-tool">
           {toolName}
         </span>
         {!expanded &&
           parsedArgs &&
           typeof parsedArgs === 'object' &&
           !Array.isArray(parsedArgs) && (
-            <span className="text-[11px] font-mono text-purple/70 truncate">
+            <span className="text-[11px] font-mono text-tool truncate">
               {formatToolParams(parsedArgs)}
             </span>
           )}
@@ -123,7 +123,7 @@ function ToolCallCard({
 
       {expanded && (
         <>
-          <div className="p-3 bg-card/50 border-t border-purple/30">
+          <div className="p-3 bg-card/50 border-t border-tool/30">
             <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground mb-2">
               Input
             </div>

package/src/viewer/client/components/shared-components.tsx

@@ -326,27 +326,27 @@ export function ReasoningBlock({ content }: { content: string }) {
     content.length > 200 ? content.slice(0, 200) + '…' : content;
 
   return (
-    <div className="overflow-hidden rounded-md border border-amber-500/30">
+    <div className="overflow-hidden rounded-md border border-warning/30">
       <button
-        className="flex gap-2 items-center px-3 py-2 w-full transition-colors bg-amber-500/10 hover:bg-amber-500/20"
+        className="flex gap-2 items-center px-3 py-2 w-full transition-colors bg-warning/10 hover:bg-warning/20"
         onClick={() => setExpanded(!expanded)}
       >
         <ChevronRight
-          className={`size-3 text-amber-500 transition-transform shrink-0 ${
+          className={`size-3 text-warning transition-transform shrink-0 ${
             expanded ? 'rotate-90' : ''
           }`}
         />
-        <Brain className="text-amber-500 size-3 shrink-0" />
-        <span className="text-xs font-medium text-amber-500">Thinking</span>
+        <Brain className="text-warning size-3 shrink-0" />
+        <span className="text-xs font-medium text-warning">Thinking</span>
         {!expanded && (
-          <span className="text-[11px] text-amber-500/70 truncate ml-1">
+          <span className="text-[11px] text-warning truncate ml-1">
             {previewContent}
           </span>
         )}
       </button>
 
       {expanded && (
-        <div className="p-3 border-t bg-card/50 border-amber-500/30">
+        <div className="p-3 border-t bg-card/50 border-warning/30">
           <div className="text-xs leading-relaxed whitespace-pre-wrap text-foreground/80">
             {content}
           </div>
@@ -371,11 +371,11 @@ export function TextBlock({
   const previewContent =
     content.length > 200 ? content.slice(0, 200) + '…' : content;
 
-  const borderColor = isSystem ? 'border-blue-500/30' : 'border-border';
-  const bgColor = isSystem ? 'bg-blue-500/10' : 'bg-muted/30';
-  const hoverBgColor = isSystem ? 'hover:bg-blue-500/20' : 'hover:bg-muted/50';
-  const iconColor = isSystem ? 'text-blue-400' : 'text-muted-foreground';
-  const labelColor = isSystem ? 'text-blue-400' : 'text-foreground';
+  const borderColor = isSystem ? 'border-info/30' : 'border-border';
+  const bgColor = isSystem ? 'bg-info/10' : 'bg-muted/30';
+  const hoverBgColor = isSystem ? 'hover:bg-info/20' : 'hover:bg-muted/50';
+  const iconColor = isSystem ? 'text-info' : 'text-muted-foreground';
+  const labelColor = isSystem ? 'text-info' : 'text-foreground';
 
   const handleCopy = async (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -399,7 +399,7 @@ export function TextBlock({
         <span className={`text-xs font-medium ${labelColor}`}>Text</span>
         {!expanded && (
           <span
-            className={`text-[11px] ${isSystem ? 'text-blue-400/70' : 'text-muted-foreground'} truncate ml-1`}
+            className={`text-[11px] ${isSystem ? 'text-info' : 'text-muted-foreground'} truncate ml-1`}
           >
             {previewContent}
           </span>
@@ -441,7 +441,7 @@ export function ToolItem({ tool }: { tool: ToolDefinition }) {
         className="w-full flex items-center justify-between p-2.5 hover:bg-accent/50 transition-colors"
         onClick={() => setExpanded(!expanded)}
       >
-        <span className="font-mono text-sm text-purple">{tool.name}</span>
+        <span className="font-mono text-sm text-tool">{tool.name}</span>
         {hasExpandableContent && (
           <ChevronRight
             className={`size-3 text-muted-foreground transition-transform ${
@@ -486,25 +486,25 @@ export function CollapsibleToolCall({
   const parsedData = typeof data === 'string' ? safeParseJson(data) : data;
 
   return (
-    <div className="overflow-hidden rounded-md border border-purple/30">
+    <div className="overflow-hidden rounded-md border border-tool/30">
       <button
-        className="flex gap-2 items-center px-3 py-2 w-full transition-colors bg-purple/10 hover:bg-purple/20"
+        className="flex gap-2 items-center px-3 py-2 w-full transition-colors bg-tool/10 hover:bg-tool/20"
         onClick={() => setExpanded(!expanded)}
       >
         <ChevronRight
-          className={`size-3 text-purple transition-transform shrink-0 ${
+          className={`size-3 text-tool transition-transform shrink-0 ${
             expanded ? 'rotate-90' : ''
           }`}
         />
-        <Wrench className="size-3 text-purple shrink-0" />
-        <span className="font-mono text-xs font-medium text-purple">
+        <Wrench className="size-3 text-tool shrink-0" />
+        <span className="font-mono text-xs font-medium text-tool">
           {toolName}
         </span>
         {!expanded &&
           parsedData != null &&
           typeof parsedData === 'object' &&
           !Array.isArray(parsedData) && (
-            <span className="text-[11px] font-mono text-purple/70 truncate">
+            <span className="text-[11px] font-mono text-tool truncate">
               {formatToolParams(parsedData as Record<string, unknown>)}
             </span>
           )}
@@ -515,7 +515,7 @@ export function CollapsibleToolCall({
         )}
       </button>
       {expanded && (
-        <div className="p-3 border-t bg-card/50 border-purple/30">
+        <div className="p-3 border-t bg-card/50 border-tool/30">
           <JsonBlock data={parsedData} />
         </div>
       )}

package/src/viewer/client/components/step-card.tsx

@@ -82,7 +82,7 @@ export function StepCard({
   return (
     <Collapsible open={isExpanded} onOpenChange={() => toggleStep(step.id)}>
       <Card
-        className={`overflow-hidden py-0 gap-0 ${isActiveStep ? 'ring-2 ring-blue-500/50 ring-offset-1 ring-offset-background' : ''}`}
+        className={`overflow-hidden py-0 gap-0 ${isActiveStep ? 'ring-2 ring-info/50 ring-offset-1 ring-offset-background' : ''}`}
       >
         <CollapsibleTrigger asChild>
           <button
@@ -164,7 +164,7 @@ export function StepCard({
 
             <div className="flex items-center gap-4">
               {isActiveStep ? (
-                <span className="text-[11px] text-blue-400 font-medium flex items-center gap-1.5">
+                <span className="text-[11px] text-info font-medium flex items-center gap-1.5">
                   <Loader2 className="size-3 animate-spin" />
                   streaming
                 </span>
@@ -292,7 +292,7 @@ export function StepDetailContent({
           ) : output ? (
             <OutputDisplay output={output} toolResults={toolResults} />
           ) : isActiveStep ? (
-            <div className="flex items-center gap-2 text-sm text-blue-400">
+            <div className="flex items-center gap-2 text-sm text-info">
               <Loader2 className="size-4 animate-spin" />
               <span>Waiting for response...</span>
             </div>
@@ -410,20 +410,18 @@ function NestedRunCard({
   const modelId = firstStep?.model_id;
 
   return (
-    <div className="rounded-md border border-cyan-500/30 overflow-hidden">
+    <div className="rounded-md border border-agent/30 overflow-hidden">
       <button
-        className="w-full flex items-center gap-2 px-3 py-2 bg-cyan-500/10 hover:bg-cyan-500/15 transition-colors"
+        className="w-full flex items-center gap-2 px-3 py-2 bg-agent/10 hover:bg-agent/15 transition-colors"
         onClick={() => setExpanded(!expanded)}
       >
         <ChevronRight
-          className={`size-3 text-cyan-400 transition-transform shrink-0 ${
+          className={`size-3 text-agent transition-transform shrink-0 ${
             expanded ? 'rotate-90' : ''
           }`}
         />
-        <Brain className="size-3 text-cyan-400 shrink-0" />
-        <span className="text-xs font-medium text-cyan-400 truncate">
-          {label}
-        </span>
+        <Brain className="size-3 text-agent shrink-0" />
+        <span className="text-xs font-medium text-agent truncate">{label}</span>
         <span className="ml-auto flex items-center gap-3 shrink-0">
           {modelId && (
             <span className="text-[10px] font-mono text-muted-foreground">
@@ -438,13 +436,13 @@ function NestedRunCard({
             {formatDuration(totalDuration)}
           </span>
           {childRun.run.isInProgress && (
-            <Loader2 className="size-3 text-blue-400 animate-spin" />
+            <Loader2 className="size-3 text-info animate-spin" />
           )}
         </span>
       </button>
 
       {expanded && (
-        <div className="border-t border-cyan-500/20 bg-background/50 p-3 flex flex-col gap-2">
+        <div className="border-t border-agent/20 bg-background/50 p-3 flex flex-col gap-2">
           {childRun.steps.map((step, index) => {
             const nestedChildRuns = (childRun.childRuns ?? []).filter(
               cr => cr.run.parent_step_id === step.id,

package/src/viewer/client/components/theme-toggle.tsx

@@ -0,0 +1,33 @@
+import { Moon, Sun } from 'lucide-react';
+import type { Theme } from '../theme';
+import { Button } from './ui/button';
+
+export function ThemeToggle({
+  theme,
+  onThemeChange,
+}: {
+  theme: Theme;
+  onThemeChange: (theme: Theme) => void;
+}) {
+  const nextTheme = theme === 'dark' ? 'light' : 'dark';
+  const title = `Switch to ${nextTheme} theme`;
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon-sm"
+      type="button"
+      aria-label="Use light theme"
+      aria-pressed={theme === 'light'}
+      title={title}
+      onClick={() => onThemeChange(nextTheme)}
+    >
+      {theme === 'dark' ? (
+        <Sun className="size-3.5" />
+      ) : (
+        <Moon className="size-3.5" />
+      )}
+      <span className="sr-only">Use light theme</span>
+    </Button>
+  );
+}

package/src/viewer/client/components/trace-timeline.tsx

@@ -166,17 +166,17 @@ export function TraceTimeline({
   const spanIcon = (kind: SpanKind) => {
     switch (kind) {
       case 'child-run':
-        return <Brain className="size-3 text-cyan-400 shrink-0" />;
+        return <Brain className="size-3 text-agent shrink-0" />;
       case 'thinking':
-        return <Brain className="size-3 text-amber-500 shrink-0" />;
+        return <Brain className="size-3 text-warning shrink-0" />;
       case 'tool-call':
-        return <Wrench className="size-3 text-purple-400 shrink-0" />;
+        return <Wrench className="size-3 text-tool shrink-0" />;
       case 'text':
-        return <MessageSquare className="size-3 text-emerald-400 shrink-0" />;
+        return <MessageSquare className="size-3 text-success shrink-0" />;
       case 'error':
-        return <AlertCircle className="size-3 text-red-400 shrink-0" />;
+        return <AlertCircle className="size-3 text-danger shrink-0" />;
       default:
-        return <Zap className="size-3 text-blue-400 shrink-0" />;
+        return <Zap className="size-3 text-info shrink-0" />;
     }
   };
 
@@ -211,7 +211,7 @@ export function TraceTimeline({
                 {ticks.map((tick, i) => (
                   <span
                     key={i}
-                    className="absolute text-[9px] font-mono text-muted-foreground/60 -translate-x-1/2"
+                    className="absolute text-[9px] font-mono text-muted-foreground -translate-x-1/2"
                     style={{
                       left: `${(tick.ms / totalDurationMs) * 100}%`,
                       top: 5,
@@ -263,7 +263,7 @@ export function TraceTimeline({
                       {formatDuration(span.durationMs || null)}
                     </span>
                     {span.tokens && (
-                      <span className="text-[9px] font-mono text-muted-foreground/60 shrink-0">
+                      <span className="text-[9px] font-mono text-muted-foreground shrink-0">
                         {span.tokens.input}→{span.tokens.output}
                       </span>
                     )}
@@ -331,7 +331,7 @@ export function TraceTimeline({
                               </span>
                             )}
                           </div>
-                          <div className="text-muted-foreground/60 pt-0.5">
+                          <div className="text-muted-foreground pt-0.5">
                             Click to {isSelected ? 'deselect' : 'view details'}
                           </div>
                         </div>
@@ -440,8 +440,8 @@ function SpanDetailPanel({
     return (
       <div className="p-4 space-y-4">
         <div className="flex items-center gap-2 mb-1">
-          <Wrench className="size-4 text-purple-400" />
-          <span className="text-sm font-mono font-medium text-purple-400">
+          <Wrench className="size-4 text-tool" />
+          <span className="text-sm font-mono font-medium text-tool">
             {span.label}
           </span>
         </div>
@@ -474,10 +474,10 @@ function SpanDetailPanel({
     return (
       <div className="p-4 space-y-2">
         <div className="flex items-center gap-2 mb-1">
-          <Brain className="size-4 text-amber-500" />
-          <span className="text-sm font-medium text-amber-500">Thinking</span>
+          <Brain className="size-4 text-warning" />
+          <span className="text-sm font-medium text-warning">Thinking</span>
         </div>
-        <div className="text-sm text-foreground/80 leading-relaxed whitespace-pre-wrap rounded-md border border-amber-500/20 bg-amber-500/5 p-3">
+        <div className="text-sm text-foreground/80 leading-relaxed whitespace-pre-wrap rounded-md border border-warning/20 bg-warning/5 p-3">
           {span.thinkingText}
         </div>
       </div>
@@ -488,8 +488,8 @@ function SpanDetailPanel({
     return (
       <div className="p-4 space-y-2">
         <div className="flex items-center gap-2 mb-1">
-          <MessageSquare className="size-4 text-emerald-400" />
-          <span className="text-sm font-medium text-emerald-400">
+          <MessageSquare className="size-4 text-success" />
+          <span className="text-sm font-medium text-success">
             Text Response
           </span>
         </div>
@@ -504,8 +504,8 @@ function SpanDetailPanel({
     return (
       <div className="p-4 space-y-2">
         <div className="flex items-center gap-2 mb-1">
-          <AlertCircle className="size-4 text-red-400" />
-          <span className="text-sm font-medium text-red-400">Error</span>
+          <AlertCircle className="size-4 text-danger" />
+          <span className="text-sm font-medium text-danger">Error</span>
         </div>
         <div className="text-sm text-destructive-foreground font-mono whitespace-pre-wrap rounded-md border border-destructive/30 bg-destructive/10 p-3">
           {step.error}

package/src/viewer/client/components/ui/badge.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
   {
     variants: {
       variant: {

package/src/viewer/client/components/ui/button.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {

package/src/viewer/client/components/ui/scroll-area.tsx

@@ -18,7 +18,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="focus-visible:ring-ring size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>

package/src/viewer/client/main.tsx

@@ -1,6 +1,21 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './app';
+import { initializeTheme } from './theme';
 import './styles.css';
 
-createRoot(document.getElementById('root')!).render(<App />);
+let storage: Storage | undefined;
+try {
+  storage = window.localStorage;
+} catch {
+  storage = undefined;
+}
+
+const initialTheme = initializeTheme({
+  root: document.documentElement,
+  storage,
+});
+
+createRoot(document.getElementById('root')!).render(
+  <App initialTheme={initialTheme} storage={storage} />,
+);