@mastra/playground-ui 61.0.0 → 62.0.0-alpha.0

package/dist/style.css

@@ -714,6 +714,10 @@
     inset-inline: 1px;
   }
 
+  .inset-y-\(--attachment-action-inset\) {
+    inset-block: var(--attachment-action-inset);
+  }
+
   .inset-y-0 {
     inset-block: 0;
   }
@@ -786,6 +790,10 @@
     right: calc(var(--spacing) * -12);
   }
 
+  .right-\(--attachment-action-inset\) {
+    right: var(--attachment-action-inset);
+  }
+
   .right-0 {
     right: 0;
   }
@@ -850,10 +858,6 @@
     left: calc(var(--spacing) * 2);
   }
 
-  .left-2\.5 {
-    left: calc(var(--spacing) * 2.5);
-  }
-
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
@@ -942,6 +946,10 @@
     grid-column: span 2 / span 2;
   }
 
+  .col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+
   .col-span-5 {
     grid-column: span 5 / span 5;
   }
@@ -1077,6 +1085,10 @@
     margin-inline: calc(var(--spacing) * -1);
   }
 
+  .-mx-2 {
+    margin-inline: calc(var(--spacing) * -2);
+  }
+
   .-mx-3 {
     margin-inline: calc(var(--spacing) * -3);
   }
@@ -2041,6 +2053,11 @@
     height: 7px;
   }
 
+  .size-\[var\(--attachment-thumbnail-size\,--spacing\(12\)\)\] {
+    width: var(--attachment-thumbnail-size, calc(var(--spacing) * 12));
+    height: var(--attachment-thumbnail-size, calc(var(--spacing) * 12));
+  }
+
   .size-control-md {
     width: var(--spacing-control-md);
     height: var(--spacing-control-md);
@@ -2144,6 +2161,10 @@
     height: calc(var(--spacing) * 16);
   }
 
+  .h-17 {
+    height: calc(var(--spacing) * 17);
+  }
+
   .h-20 {
     height: calc(var(--spacing) * 20);
   }
@@ -2364,6 +2385,10 @@
     height: var(--spacing-icon-md);
   }
 
+  .h-lh {
+    height: 1lh;
+  }
+
   .h-max {
     height: max-content;
   }
@@ -2508,6 +2533,10 @@
     min-height: 0;
   }
 
+  .min-h-0\! {
+    min-height: 0 !important;
+  }
+
   .min-h-5 {
     min-height: calc(var(--spacing) * 5);
   }
@@ -2644,8 +2673,8 @@
     min-height: 100vh;
   }
 
-  .w-\(--bar-width\) {
-    width: var(--bar-width);
+  .w-\(--attachment-action-width\) {
+    width: var(--attachment-action-width);
   }
 
   .w-\(--field-width\,100\%\) {
@@ -2844,6 +2873,10 @@
     width: calc(var(--spacing) * 65);
   }
 
+  .w-66 {
+    width: calc(var(--spacing) * 66);
+  }
+
   .w-70 {
     width: calc(var(--spacing) * 70);
   }
@@ -2868,6 +2901,10 @@
     width: calc(var(--spacing) * 90);
   }
 
+  .w-91 {
+    width: calc(var(--spacing) * 91);
+  }
+
   .w-95 {
     width: calc(var(--spacing) * 95);
   }
@@ -2888,6 +2925,10 @@
     width: calc(var(--spacing) * 112);
   }
 
+  .w-116 {
+    width: calc(var(--spacing) * 116);
+  }
+
   .w-120 {
     width: calc(var(--spacing) * 120);
   }
@@ -3028,6 +3069,10 @@
     width: 33.5rem;
   }
 
+  .w-\[calc\(100\%\+1rem\)\] {
+    width: calc(100% + 1rem);
+  }
+
   .w-\[calc\(100\%-2rem\)\] {
     width: calc(100% - 2rem);
   }
@@ -3056,10 +3101,18 @@
     width: min(24rem, 100vw - 2rem);
   }
 
+  .w-\[min\(24rem\,calc\(100vw-3rem\)\)\] {
+    width: min(24rem, 100vw - 3rem);
+  }
+
   .w-\[min\(34rem\,calc\(100vw-3rem\)\)\] {
     width: min(34rem, 100vw - 3rem);
   }
 
+  .w-\[min\(36rem\,calc\(100vw-3rem\)\)\] {
+    width: min(36rem, 100vw - 3rem);
+  }
+
   .w-\[min\(42rem\,calc\(100vw-7rem\)\)\] {
     width: min(42rem, 100vw - 7rem);
   }
@@ -3076,6 +3129,10 @@
     width: min(52rem, 100vw - 3rem);
   }
 
+  .w-\[min\(56rem\,calc\(100vw-3rem\)\)\] {
+    width: min(56rem, 100vw - 3rem);
+  }
+
   .w-\[min\(92vw\,44rem\)\] {
     width: min(92vw, 44rem);
   }
@@ -3208,10 +3265,6 @@
     max-width: var(--container-7xl);
   }
 
-  .max-w-24 {
-    max-width: calc(var(--spacing) * 24);
-  }
-
   .max-w-40 {
     max-width: calc(var(--spacing) * 40);
   }
@@ -3232,10 +3285,6 @@
     max-width: calc(var(--spacing) * 52);
   }
 
-  .max-w-56 {
-    max-width: calc(var(--spacing) * 56);
-  }
-
   .max-w-60 {
     max-width: calc(var(--spacing) * 60);
   }
@@ -3268,6 +3317,10 @@
     max-width: calc(var(--spacing) * 100);
   }
 
+  .max-w-116 {
+    max-width: calc(var(--spacing) * 116);
+  }
+
   .max-w-120 {
     max-width: calc(var(--spacing) * 120);
   }
@@ -3388,6 +3441,10 @@
     min-width: 0;
   }
 
+  .min-w-0\! {
+    min-width: 0 !important;
+  }
+
   .min-w-0\.5 {
     min-width: calc(var(--spacing) * .5);
   }
@@ -3424,10 +3481,6 @@
     min-width: calc(var(--spacing) * 16);
   }
 
-  .min-w-24 {
-    min-width: calc(var(--spacing) * 24);
-  }
-
   .min-w-28 {
     min-width: calc(var(--spacing) * 28);
   }
@@ -3484,6 +3537,10 @@
     min-width: calc(var(--spacing) * 108);
   }
 
+  .min-w-\[3px\] {
+    min-width: 3px;
+  }
+
   .min-w-\[max\(11rem\,var\(--anchor-width\)\)\] {
     min-width: max(11rem, var(--anchor-width));
   }
@@ -3520,6 +3577,10 @@
     flex-shrink: 1;
   }
 
+  .shrink\! {
+    flex-shrink: 1 !important;
+  }
+
   .shrink-\(--field-shrink\,1\) {
     flex-shrink: var(--field-shrink, 1);
   }
@@ -3528,7 +3589,7 @@
     flex-shrink: 0;
   }
 
-  .grow {
+  .flex-grow, .grow {
     flex-grow: 1;
   }
 
@@ -3728,6 +3789,10 @@
     transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
 
+  .animate-\[chart-ghost-sweep_2s_infinite\] {
+    animation: 2s infinite chart-ghost-sweep;
+  }
+
   .animate-\[sidebar-hold_var\(--resize-dur\)\] {
     animation: sidebar-hold var(--resize-dur);
   }
@@ -3932,6 +3997,10 @@
     grid-template-columns: auto 1fr;
   }
 
+  .grid-cols-\[auto_1fr_auto\] {
+    grid-template-columns: auto 1fr auto;
+  }
+
   .grid-cols-\[auto_minmax\(0\,1fr\)\] {
     grid-template-columns: auto minmax(0, 1fr);
   }
@@ -4100,6 +4169,10 @@
     justify-items: end;
   }
 
+  .gap-\(--attachment-action-inset\) {
+    gap: var(--attachment-action-inset);
+  }
+
   .gap-0 {
     gap: 0;
   }
@@ -4152,10 +4225,6 @@
     gap: calc(var(--spacing) * 10);
   }
 
-  .gap-14 {
-    gap: calc(var(--spacing) * 14);
-  }
-
   .gap-\[\.75em\] {
     gap: .75em;
   }
@@ -4207,12 +4276,6 @@
     margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
   }
 
-  :where(.space-y-2\.5 > :not(:last-child)) {
-    --tw-space-y-reverse: 0;
-    margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
-    margin-block-end: calc(calc(var(--spacing) * 2.5) * 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));
@@ -4378,6 +4441,10 @@
     overflow-y: auto;
   }
 
+  .overflow-y-hidden {
+    overflow-y: hidden;
+  }
+
   .overflow-y-scroll {
     overflow-y: scroll;
   }
@@ -4394,6 +4461,10 @@
     border-radius: .25rem;
   }
 
+  .rounded-\(--attachment-action-radius\) {
+    border-radius: var(--attachment-action-radius);
+  }
+
   .rounded-\(--attachment-radius\) {
     border-radius: var(--attachment-radius);
   }
@@ -4410,6 +4481,10 @@
     border-radius: .3125rem;
   }
 
+  .rounded-\[2px\] {
+    border-radius: 2px;
+  }
+
   .rounded-\[7px\] {
     border-radius: 7px;
   }
@@ -4489,11 +4564,6 @@
     border-top-right-radius: var(--radius-xl);
   }
 
-  .rounded-l {
-    border-top-left-radius: .25rem;
-    border-bottom-left-radius: .25rem;
-  }
-
   .rounded-l-md {
     border-top-left-radius: var(--radius-md);
     border-bottom-left-radius: var(--radius-md);
@@ -4509,11 +4579,6 @@
     border-bottom-left-radius: var(--radius-xl);
   }
 
-  .rounded-r {
-    border-top-right-radius: .25rem;
-    border-bottom-right-radius: .25rem;
-  }
-
   .rounded-r-3xl {
     border-top-right-radius: var(--radius-3xl);
     border-bottom-right-radius: var(--radius-3xl);
@@ -4529,10 +4594,6 @@
     border-bottom-right-radius: var(--radius-xl);
   }
 
-  .rounded-tr-\[inherit\] {
-    border-top-right-radius: inherit;
-  }
-
   .rounded-tr-studio-panel {
     border-top-right-radius: max(0px, calc(var(--studio-frame-radius, 1.5rem) - var(--studio-frame-inset, .5rem)));
   }
@@ -4586,6 +4647,11 @@
     border-top-width: 1px;
   }
 
+  .border-t-2 {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 2px;
+  }
+
   .border-r {
     border-right-style: var(--tw-border-style);
     border-right-width: 1px;
@@ -4686,10 +4752,6 @@
     border-color: var(--foreground);
   }
 
-  .border-info-edge {
-    border-color: var(--info-edge);
-  }
-
   .border-info-indicator {
     border-color: var(--info-indicator);
   }
@@ -4748,10 +4810,6 @@
     border-color: var(--warning-bright);
   }
 
-  .border-warning-edge {
-    border-color: var(--warning-edge);
-  }
-
   .border-warning-indicator {
     border-color: var(--warning-indicator);
   }
@@ -5486,6 +5544,18 @@
     mask-composite: intersect;
   }
 
+  .mask-r-from-34\% {
+    -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+    --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+    --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+    --tw-mask-right-from-position: 34%;
+    -webkit-mask-composite: source-in;
+    -webkit-mask-composite: source-in;
+    mask-composite: intersect;
+  }
+
   .mask-r-from-\[calc\(100\%-min\(100\%\,160px\)\)\] {
     -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
     -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
@@ -6809,10 +6879,6 @@
     color: var(--warning-indicator);
   }
 
-  .text-warning-subtle-foreground {
-    color: var(--warning-subtle-foreground);
-  }
-
   .text-white {
     color: var(--color-white);
   }
@@ -6855,10 +6921,28 @@
     text-decoration-line: underline;
   }
 
+  .decoration-foreground\/40 {
+    -webkit-text-decoration-color: var(--foreground);
+    -webkit-text-decoration-color: var(--foreground);
+    text-decoration-color: var(--foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .decoration-foreground\/40 {
+      -webkit-text-decoration-color: color-mix(in oklab, var(--foreground) 40%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, var(--foreground) 40%, transparent);
+      text-decoration-color: color-mix(in oklab, var(--foreground) 40%, transparent);
+    }
+  }
+
   .underline-offset-2 {
     text-underline-offset: 2px;
   }
 
+  .underline-offset-4 {
+    text-underline-offset: 4px;
+  }
+
   .accent-foreground {
     accent-color: var(--foreground);
   }
@@ -7116,6 +7200,12 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-\[background-color\,opacity\] {
+    transition-property: background-color, opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-\[background-color\,scale\] {
     transition-property: background-color, scale;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -7536,10 +7626,30 @@
     user-select: none;
   }
 
+  .\[--attachment-action-inset\:--spacing\(1\)\] {
+    --attachment-action-inset: var(--spacing);
+  }
+
+  .\[--attachment-action-radius\:max\(0px\,calc\(var\(--attachment-radius\)-var\(--attachment-action-inset\)\)\)\] {
+    --attachment-action-radius: max(0px, calc(var(--attachment-radius) - var(--attachment-action-inset)));
+  }
+
+  .\[--attachment-action-width\:--spacing\(9\)\] {
+    --attachment-action-width: calc(var(--spacing) * 9);
+  }
+
   .\[--attachment-radius\:var\(--radius-xl\)\] {
     --attachment-radius: var(--radius-xl);
   }
 
+  .\[--attachment-sleeve-width\:calc\(var\(--attachment-action-width\)\+2\*var\(--attachment-action-inset\)\)\] {
+    --attachment-sleeve-width: calc(var(--attachment-action-width) + 2 * var(--attachment-action-inset));
+  }
+
+  .\[--attachment-thumbnail-size\:--spacing\(15\)\] {
+    --attachment-thumbnail-size: calc(var(--spacing) * 15);
+  }
+
   .\[--card-radius\:calc\(var\(--radius-xl\)-2px\)\] {
     --card-radius: calc(var(--radius-xl) - 2px);
   }
@@ -7730,10 +7840,18 @@
     display: inline-flex;
   }
 
+  :is(.\*\:w-full > *) {
+    width: 100%;
+  }
+
   :is(.\*\:min-w-0\! > *) {
     min-width: 0 !important;
   }
 
+  :is(.\*\:shrink-0 > *) {
+    flex-shrink: 0;
+  }
+
   :is(.\*\:items-center > *) {
     align-items: center;
   }
@@ -7746,14 +7864,6 @@
     border-radius: var(--radius-sm);
   }
 
-  :is(.\*\:bg-background\! > *) {
-    background-color: var(--background) !important;
-  }
-
-  :is(.\*\:shadow-rim\! > *) {
-    box-shadow: inset 0 0 0 1px var(--surface-rim) !important;
-  }
-
   :is(.\*\: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));
@@ -7769,7 +7879,25 @@
     border-color: var(--border);
   }
 
-  .group-focus-within\:opacity-100:is(:where(.group):focus-within *), .group-focus-within\/attachment\:opacity-100:is(:where(.group\/attachment):focus-within *) {
+  .group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
+    opacity: 1;
+  }
+
+  .group-focus-within\/attachment\:right-\(--attachment-sleeve-width\):is(:where(.group\/attachment):focus-within *) {
+    right: var(--attachment-sleeve-width);
+  }
+
+  .group-focus-within\/attachment\:translate-x-0:is(:where(.group\/attachment):focus-within *) {
+    --tw-translate-x: 0px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .group-focus-within\/attachment\:rounded-r-\(--attachment-action-inset\):is(:where(.group\/attachment):focus-within *) {
+    border-top-right-radius: var(--attachment-action-inset);
+    border-bottom-right-radius: var(--attachment-action-inset);
+  }
+
+  .group-focus-within\/attachment\:opacity-100:is(:where(.group\/attachment):focus-within *) {
     opacity: 1;
   }
 
@@ -7810,7 +7938,7 @@
       background-color: var(--fill-subtle);
     }
 
-    .group-hover\/message\:opacity-100:is(:where(.group\/message):hover *), .group-hover\/resize\:opacity-100:is(:where(.group\/resize):hover *) {
+    .group-hover\/message\:opacity-100:is(:where(.group\/message):hover *), .group-hover\/metrics-card\:opacity-100:is(:where(.group\/metrics-card):hover *), .group-hover\/resize\:opacity-100:is(:where(.group\/resize):hover *) {
       opacity: 1;
     }
 
@@ -7934,6 +8062,24 @@
     padding-left: calc(var(--spacing) * 6);
   }
 
+  .group-data-popup-open\/attachment\:right-\(--attachment-sleeve-width\):is(:where(.group\/attachment)[data-popup-open] *) {
+    right: var(--attachment-sleeve-width);
+  }
+
+  .group-data-popup-open\/attachment\:translate-x-0:is(:where(.group\/attachment)[data-popup-open] *) {
+    --tw-translate-x: 0px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .group-data-popup-open\/attachment\:rounded-r-\(--attachment-action-inset\):is(:where(.group\/attachment)[data-popup-open] *) {
+    border-top-right-radius: var(--attachment-action-inset);
+    border-bottom-right-radius: var(--attachment-action-inset);
+  }
+
+  .group-data-popup-open\/attachment\:opacity-100:is(:where(.group\/attachment)[data-popup-open] *) {
+    opacity: 1;
+  }
+
   .group-data-\[checked\]\/checkbox-indicator\:scale-100:is(:where(.group\/checkbox-indicator)[data-checked] *) {
     --tw-scale-x: 100%;
     --tw-scale-y: 100%;
@@ -8208,6 +8354,20 @@
     color: var(--foreground);
   }
 
+  .group-\[\:hover\]\/attachment\:right-\(--attachment-sleeve-width\):is(:where(.group\/attachment):hover *) {
+    right: var(--attachment-sleeve-width);
+  }
+
+  .group-\[\:hover\]\/attachment\:translate-x-0:is(:where(.group\/attachment):hover *) {
+    --tw-translate-x: 0px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .group-\[\:hover\]\/attachment\:rounded-r-\(--attachment-action-inset\):is(:where(.group\/attachment):hover *) {
+    border-top-right-radius: var(--attachment-action-inset);
+    border-bottom-right-radius: var(--attachment-action-inset);
+  }
+
   .group-\[\:hover\]\/attachment\:opacity-100:is(:where(.group\/attachment):hover *) {
     opacity: 1;
   }
@@ -8503,6 +8663,11 @@
     content: var(--tw-content);
   }
 
+  .before\:\[animation-delay\:var\(--shimmer-delay\)\]:before {
+    content: var(--tw-content);
+    animation-delay: var(--shimmer-delay);
+  }
+
   @media (hover: hover) {
     .group-hover\:before\:bg-fill-subtle:is(:where(.group):hover *):before {
       content: var(--tw-content);
@@ -8749,6 +8914,11 @@
     content: var(--tw-content);
   }
 
+  .first\:rounded-l-full:first-child {
+    border-top-left-radius: 3.40282e38px;
+    border-bottom-left-radius: 3.40282e38px;
+  }
+
   .first\:pl-3:first-child {
     padding-left: calc(var(--spacing) * 3);
   }
@@ -8757,6 +8927,11 @@
     margin-bottom: 0;
   }
 
+  .last\:rounded-r-full:last-child {
+    border-top-right-radius: 3.40282e38px;
+    border-bottom-right-radius: 3.40282e38px;
+  }
+
   .last\:border-b-0:last-child {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 0;
@@ -8972,8 +9147,10 @@
       text-decoration-line: underline;
     }
 
-    .hover\:opacity-70:hover {
-      opacity: .7;
+    .hover\:decoration-foreground:hover {
+      -webkit-text-decoration-color: var(--foreground);
+      -webkit-text-decoration-color: var(--foreground);
+      text-decoration-color: var(--foreground);
     }
 
     .hover\:opacity-80:hover {
@@ -10342,6 +10519,18 @@
       transition-duration: var(--tw-duration, var(--default-transition-duration));
     }
 
+    .motion-safe\:transition-\[right\,border-radius\] {
+      transition-property: right, border-radius;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+
+    .motion-safe\:transition-\[translate\,opacity\] {
+      transition-property: translate, opacity;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+
     .motion-safe\:transition-\[translate\,rotate\] {
       transition-property: translate, rotate;
       transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -10392,8 +10581,8 @@
       transition-duration: .2s;
     }
 
-    .motion-safe\:duration-fast {
-      transition-duration: var(--duration-fast);
+    .motion-safe\:duration-normal {
+      transition-duration: var(--duration-normal);
     }
 
     .motion-safe\:duration-slow {
@@ -10553,9 +10742,26 @@
   }
 
   @media not all and (min-width: 40rem) {
+    .max-sm\:right-0\! {
+      right: 0 !important;
+    }
+
+    .max-sm\:flex {
+      display: flex;
+    }
+
     .max-sm\:hidden {
       display: none;
     }
+
+    .max-sm\:rounded-r-\[inherit\]\! {
+      border-top-right-radius: inherit !important;
+      border-bottom-right-radius: inherit !important;
+    }
+
+    .max-sm\:pr-\[calc\(--spacing\(11\)\+2\*var\(--attachment-action-inset\)\)\] {
+      padding-right: calc(calc(var(--spacing) * 11) + 2 * var(--attachment-action-inset));
+    }
   }
 
   @media not all and (min-width: 22rem) {
@@ -11056,10 +11262,6 @@
     .lg\:pl-2 {
       padding-left: calc(var(--spacing) * 2);
     }
-
-    :is(.lg\:\*\:flex-1 > *) {
-      flex: 1;
-    }
   }
 
   @media (min-width: 80rem) {
@@ -11149,35 +11351,11 @@
   }
 
   @container (min-width: 28rem) {
-    .\@md\:-my-1 {
-      margin-block: calc(var(--spacing) * -1);
-    }
-
-    .\@md\:block {
-      display: block;
-    }
-
-    .\@md\:hidden {
-      display: none;
-    }
-
     .\@md\:size-16 {
       width: calc(var(--spacing) * 16);
       height: calc(var(--spacing) * 16);
     }
 
-    .\@md\:flex-row {
-      flex-direction: row;
-    }
-
-    .\@md\:items-start {
-      align-items: flex-start;
-    }
-
-    .\@md\:gap-2 {
-      gap: calc(var(--spacing) * 2);
-    }
-
     .\@md\:gap-5 {
       gap: calc(var(--spacing) * 5);
     }
@@ -11206,6 +11384,64 @@
     }
   }
 
+  @container (min-width: 36rem) {
+    .\@xl\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @container (min-width: 42rem) {
+    .\@2xl\:col-span-2 {
+      grid-column: span 2 / span 2;
+    }
+
+    .\@2xl\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @container (min-width: 48rem) {
+    .\@3xl\:col-span-2 {
+      grid-column: span 2 / span 2;
+    }
+
+    .\@3xl\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .\@3xl\:has-\[\>\:nth-child\(5\)\]\:grid-cols-3:has( > :nth-child(5)) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  @container (min-width: 56rem) {
+    .\@4xl\:grid-cols-\[repeat\(auto-fit\,minmax\(12rem\,1fr\)\)\] {
+      grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+    }
+  }
+
+  @container (min-width: 64rem) {
+    .\@5xl\:col-span-1 {
+      grid-column: span 1 / span 1;
+    }
+
+    .\@5xl\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  @container (min-width: 72rem) {
+    .\@6xl\:has-\[\>\:nth-child\(5\)\]\:grid-cols-\[repeat\(auto-fit\,minmax\(12rem\,1fr\)\)\]\!:has( > :nth-child(5)) {
+      grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)) !important;
+    }
+  }
+
+  @container (min-width: 80rem) {
+    .\@7xl\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
   .rtl\:translate-x-0:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
     --tw-translate-x: 0px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -11216,20 +11452,32 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .dark\:block:is(.dark *) {
-    display: block;
+  .dark\:bg-linear-to-b:is(.dark *) {
+    --tw-gradient-position: to bottom;
   }
 
-  .dark\:text-white:is(.dark *) {
-    color: var(--color-white);
+  @supports (background-image: linear-gradient(in lab, red, red)) {
+    .dark\:bg-linear-to-b:is(.dark *) {
+      --tw-gradient-position: to bottom in oklab;
+    }
   }
 
-  .dark\:opacity-30:is(.dark *) {
-    opacity: .3;
+  .dark\:bg-linear-to-b:is(.dark *) {
+    background-image: linear-gradient(var(--tw-gradient-stops));
   }
 
-  .dark\:opacity-100:is(.dark *) {
-    opacity: 1;
+  .dark\:from-fill:is(.dark *) {
+    --tw-gradient-from: var(--fill);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .dark\:to-fill:is(.dark *) {
+    --tw-gradient-to: var(--fill);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  .dark\:opacity-30:is(.dark *) {
+    opacity: .3;
   }
 
   .dark\:brightness-0:is(.dark *) {
@@ -11242,10 +11490,6 @@
     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, );
   }
 
-  .dark\:\[clip-path\:inset\(0_0_0_var\(--bar-width\)\)\]:is(.dark *) {
-    clip-path: inset(0 0 0 var(--bar-width));
-  }
-
   @starting-style {
     .starting\:min-h-0 {
       min-height: 0;
@@ -11257,13 +11501,25 @@
   }
 
   @media (pointer: coarse) {
-    .pointer-coarse\:size-11 {
-      width: calc(var(--spacing) * 11);
-      height: calc(var(--spacing) * 11);
+    .pointer-coarse\:right-0\! {
+      right: 0 !important;
+    }
+
+    .pointer-coarse\:flex {
+      display: flex;
+    }
+
+    .pointer-coarse\:hidden {
+      display: none;
+    }
+
+    .pointer-coarse\:rounded-r-\[inherit\]\! {
+      border-top-right-radius: inherit !important;
+      border-bottom-right-radius: inherit !important;
     }
 
-    .pointer-coarse\:pr-12 {
-      padding-right: calc(var(--spacing) * 12);
+    .pointer-coarse\:pr-\[calc\(--spacing\(11\)\+2\*var\(--attachment-action-inset\)\)\] {
+      padding-right: calc(calc(var(--spacing) * 11) + 2 * var(--attachment-action-inset));
     }
 
     .pointer-coarse\:opacity-100 {
@@ -11287,6 +11543,11 @@
     }
   }
 
+  .\[\&_\*\:focus\:not\(\:focus-visible\)\]\:outline-none :focus:not(:focus-visible) {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
   .\[\&_\.data-list-row\:has\(\+\.data-list-subheader\)\]\:rounded-b-lg .data-list-row:has( + .data-list-subheader) {
     border-bottom-right-radius: var(--radius-lg);
     border-bottom-left-radius: var(--radius-lg);
@@ -11345,6 +11606,14 @@
     right: 0;
   }
 
+  .\[\&_\.recharts-surface\]\:cursor-pointer .recharts-surface {
+    cursor: pointer;
+  }
+
+  .\[\&_\.recharts-surface\]\:overflow-visible .recharts-surface {
+    overflow: visible;
+  }
+
   .\[\&_\.recharts-surface\]\:outline-none .recharts-surface {
     --tw-outline-style: none;
     outline-style: none;
@@ -11580,6 +11849,11 @@
     height: calc(var(--spacing) * 4);
   }
 
+  .\[\&_tbody\>tr\:last-child\]\:border-b-0 tbody > tr:last-child {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0;
+  }
+
   .\[\&\+\&\]\:border-t + .\[\&\+\&\]\:border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -11917,6 +12191,14 @@
     white-space: nowrap;
   }
 
+  .\[\&\>\*\:first-child\]\:min-w-0 > :first-child {
+    min-width: 0;
+  }
+
+  .\[\&\>\*\:last-child\:not\(\:first-child\)\]\:ml-auto > :last-child:not(:first-child) {
+    margin-left: auto;
+  }
+
   .\[\&\>\:first-child\]\:w-auto > :first-child {
     width: auto;
   }
@@ -12087,16 +12369,6 @@
     color: var(--placeholder);
   }
 
-  .\[\&\>button\]\:w-full > button {
-    width: 100%;
-  }
-
-  @container (min-width: 28rem) {
-    .\@md\:\[\&\>button\]\:w-auto > button {
-      width: auto;
-    }
-  }
-
   .\[\&\>div\]\:flex > div {
     display: flex;
   }
@@ -13172,20 +13444,36 @@ html.light {
 }
 
 :root {
-  --chart-blue: var(--blue-300);
+  --chart-blue: oklch(72% .11 240);
   --chart-blue-deep: var(--blue-600);
-  --chart-amber: var(--amber-300);
-  --chart-green: var(--green-400);
+  --chart-amber: oklch(78% .13 80);
+  --chart-green: oklch(72% .13 160);
+  --chart-cyan: oklch(72% .11 205);
   --chart-purple: var(--purple-400);
   --chart-orange: var(--orange-400);
   --chart-pink: var(--pink-300);
-  --chart-red: var(--red-500);
-  --chart-sequential-1: var(--purple-200);
-  --chart-sequential-2: var(--purple-300);
-  --chart-sequential-3: var(--purple-400);
-  --chart-sequential-4: var(--purple-500);
-  --chart-sequential-5: var(--purple-600);
+  --chart-red: oklch(68% .17 20);
+  --chart-sequential-1: oklch(84% .07 290);
+  --chart-sequential-2: oklch(78% .1 290);
+  --chart-sequential-3: oklch(72% .13 290);
+  --chart-sequential-4: oklch(67% .155 290);
+  --chart-sequential-5: oklch(62% .18 290);
   --chart-sequential-pale: var(--purple-200);
+  --chart-share-1: oklch(82% .16 145);
+  --chart-share-2: oklch(78% .11 228);
+  --chart-share-3: oklch(72% .11 295);
+  --chart-share-4: oklch(80% .1 185);
+  --chart-share-5: oklch(66% .12 265);
+  --chart-share-rest: var(--muted-foreground);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :root {
+    --chart-share-rest: color-mix(in oklab, var(--muted-foreground) 35%, transparent);
+  }
+}
+
+:root {
   --span-agent: oklch(75% .133 250);
   --span-workflow: oklch(75% .127 200);
   --span-model: oklch(75% .15 320);
@@ -13204,10 +13492,26 @@ html.light {
   --chart-blue-deep: var(--blue-800);
   --chart-amber: var(--amber-500);
   --chart-green: var(--green-500);
+  --chart-cyan: var(--cyan-500);
   --chart-purple: var(--purple-600);
   --chart-orange: var(--orange-600);
   --chart-pink: var(--pink-500);
   --chart-red: var(--red-700);
+  --chart-share-1: oklch(64% .17 150);
+  --chart-share-2: oklch(60% .13 235);
+  --chart-share-3: oklch(56% .15 295);
+  --chart-share-4: oklch(64% .11 190);
+  --chart-share-5: oklch(50% .15 265);
+  --chart-share-rest: var(--muted-foreground);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  html.light {
+    --chart-share-rest: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
+  }
+}
+
+html.light {
   --span-agent: oklch(55% .15 250);
   --span-workflow: oklch(55% .093 200);
   --span-model: oklch(55% .15 320);
@@ -13377,6 +13681,26 @@ html.light .cm-editor {
   --xy-controls-button-border-color: transparent;
 }
 
+@keyframes shimmer {
+  from {
+    translate: -100%;
+  }
+
+  to {
+    translate: 100%;
+  }
+}
+
+@keyframes chart-ghost-sweep {
+  from {
+    transform: translateX(-40px);
+  }
+
+  to {
+    transform: translateX(140px);
+  }
+}
+
 @keyframes click-ripple {
   0% {
     opacity: .5;