@mastra/playground-ui 60.0.0-alpha.9 → 60.0.0

package/dist/style.css

@@ -2,6 +2,8 @@
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
+      --tw-border-spacing-x: 0;
+      --tw-border-spacing-y: 0;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
@@ -152,6 +154,7 @@
     --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
+    --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
@@ -194,7 +197,6 @@
     --color-scrim: var(--scrim);
     --color-surface-overlay-soft: var(--surface-overlay-soft);
     --color-surface-overlay-strong: var(--surface-overlay-strong);
-    --shadow-focus-ring: 0 0 0 3px var(--focus-halo);
     --text-display: 1.375rem;
     --text-display--line-height: 127%;
     --text-display--font-weight: 500;
@@ -514,6 +516,11 @@
     font-size-adjust: none;
   }
 
+  :focus-visible {
+    outline: 1px solid var(--border-focus);
+    outline-offset: 0;
+  }
+
   body {
     background-color: var(--sidebar);
     color: var(--foreground);
@@ -1957,11 +1964,6 @@
     height: calc(var(--spacing) * 16);
   }
 
-  .size-20 {
-    width: calc(var(--spacing) * 20);
-    height: calc(var(--spacing) * 20);
-  }
-
   .size-28 {
     width: calc(var(--spacing) * 28);
     height: calc(var(--spacing) * 28);
@@ -3311,6 +3313,10 @@
     min-width: calc(var(--spacing) * 2);
   }
 
+  .min-w-2xl {
+    min-width: var(--container-2xl);
+  }
+
   .min-w-4 {
     min-width: calc(var(--spacing) * 4);
   }
@@ -3399,6 +3405,10 @@
     min-width: 1px;
   }
 
+  .min-w-xl {
+    min-width: var(--container-xl);
+  }
+
   .flex-1 {
     flex: 1;
   }
@@ -3443,10 +3453,34 @@
     flex-basis: auto;
   }
 
+  .table-fixed {
+    table-layout: fixed;
+  }
+
   .border-collapse {
     border-collapse: collapse;
   }
 
+  .border-separate {
+    border-collapse: separate;
+  }
+
+  .border-spacing-0\.5 {
+    --tw-border-spacing-x: calc(var(--spacing) * .5);
+    --tw-border-spacing-y: calc(var(--spacing) * .5);
+    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+  }
+
+  .border-spacing-x-0\.5 {
+    --tw-border-spacing-x: calc(var(--spacing) * .5);
+    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+  }
+
+  .border-spacing-y-0 {
+    --tw-border-spacing-y: 0px;
+    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+  }
+
   .origin-\(--transform-origin\), .origin-\[var\(--transform-origin\)\] {
     transform-origin: var(--transform-origin);
   }
@@ -3740,6 +3774,10 @@
     grid-template-columns: 3.5rem minmax(0, 1fr);
   }
 
+  .grid-cols-\[4rem_minmax\(0\,1fr\)\] {
+    grid-template-columns: 4rem minmax(0, 1fr);
+  }
+
   .grid-cols-\[5rem_repeat\(4\,minmax\(0\,1fr\)\)\] {
     grid-template-columns: 5rem repeat(4, minmax(0, 1fr));
   }
@@ -4548,8 +4586,8 @@
     }
   }
 
-  .border-brand-green {
-    border-color: var(--color-brand-green);
+  .border-brand-green-indicator {
+    border-color: var(--brand-green-indicator);
   }
 
   .border-destructive-edge {
@@ -4568,6 +4606,10 @@
     border-color: var(--info-edge);
   }
 
+  .border-info-indicator {
+    border-color: var(--info-indicator);
+  }
+
   .border-muted-foreground, .border-muted-foreground\/25 {
     border-color: var(--muted-foreground);
   }
@@ -4614,6 +4656,10 @@
     border-color: #0000;
   }
 
+  .border-warning-bright {
+    border-color: var(--warning-bright);
+  }
+
   .border-warning-edge {
     border-color: var(--warning-edge);
   }
@@ -4634,14 +4680,14 @@
     border-left-color: var(--badge-purple-indicator);
   }
 
-  .border-l-border-strong {
-    border-left-color: var(--border-strong);
-  }
-
   .border-l-destructive-indicator {
     border-left-color: var(--destructive-indicator);
   }
 
+  .border-l-foreground {
+    border-left-color: var(--foreground);
+  }
+
   .border-l-success-indicator {
     border-left-color: var(--success-indicator);
   }
@@ -4820,6 +4866,10 @@
     background-color: var(--color-brand-green);
   }
 
+  .bg-brand-green-indicator {
+    background-color: var(--brand-green-indicator);
+  }
+
   .bg-card {
     background-color: var(--card);
   }
@@ -4990,6 +5040,10 @@
     }
   }
 
+  .bg-green-soft-100 {
+    background-color: var(--green-soft-100);
+  }
+
   .bg-green-soft-900 {
     background-color: var(--green-soft-900);
   }
@@ -5214,6 +5268,10 @@
     background-color: #0000;
   }
 
+  .bg-warning-bright {
+    background-color: var(--warning-bright);
+  }
+
   .bg-warning-indicator {
     background-color: var(--warning-indicator);
   }
@@ -5499,28 +5557,28 @@
     mask-repeat: no-repeat;
   }
 
-  .fill-badge-blue-subtle {
-    fill: var(--badge-blue-subtle);
+  .fill-badge-blue-strong {
+    fill: var(--badge-blue-strong);
   }
 
-  .fill-badge-green-subtle {
-    fill: var(--badge-green-subtle);
+  .fill-badge-green-strong {
+    fill: var(--badge-green-strong);
   }
 
-  .fill-badge-orange-subtle {
-    fill: var(--badge-orange-subtle);
+  .fill-badge-orange-strong {
+    fill: var(--badge-orange-strong);
   }
 
-  .fill-badge-pink-subtle {
-    fill: var(--badge-pink-subtle);
+  .fill-badge-pink-strong {
+    fill: var(--badge-pink-strong);
   }
 
-  .fill-badge-purple-subtle {
-    fill: var(--badge-purple-subtle);
+  .fill-badge-purple-strong {
+    fill: var(--badge-purple-strong);
   }
 
-  .fill-badge-yellow-subtle {
-    fill: var(--badge-yellow-subtle);
+  .fill-badge-yellow-strong {
+    fill: var(--badge-yellow-strong);
   }
 
   .fill-card {
@@ -6055,6 +6113,10 @@
     text-align: right;
   }
 
+  .align-top {
+    vertical-align: top;
+  }
+
   .font-body {
     font-family: var(--font-body);
   }
@@ -6184,6 +6246,11 @@
     font-weight: var(--font-weight-medium);
   }
 
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+
   .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
@@ -6332,8 +6399,8 @@
     color: var(--color-black);
   }
 
-  .text-brand-green {
-    color: var(--color-brand-green);
+  .text-brand-green-indicator {
+    color: var(--brand-green-indicator);
   }
 
   .text-chart-blue {
@@ -6482,6 +6549,10 @@
     color: var(--span-agent);
   }
 
+  .text-span-skill {
+    color: var(--span-skill);
+  }
+
   .text-span-tool {
     color: var(--span-tool);
   }
@@ -6609,31 +6680,11 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .shadow-\[0_0_7px_currentColor\] {
-    --tw-shadow: 0 0 7px var(--tw-shadow-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);
-  }
-
-  .shadow-\[0_0_9px_currentColor\] {
-    --tw-shadow: 0 0 9px var(--tw-shadow-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);
-  }
-
-  .shadow-\[0_0_12px_currentColor\] {
-    --tw-shadow: 0 0 12px var(--tw-shadow-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);
-  }
-
   .shadow-\[0_Npx…\] {
     --tw-shadow: 0 Npx…;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .shadow-focus-ring {
-    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--focus-halo));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
   .shadow-none {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -6691,10 +6742,6 @@
     --tw-ring-color: var(--foreground);
   }
 
-  .ring-ring {
-    --tw-ring-color: var(--ring);
-  }
-
   .ring-offset-background {
     --tw-ring-offset-color: var(--background);
   }
@@ -6716,10 +6763,18 @@
     outline-width: 1px;
   }
 
+  .-outline-offset-1 {
+    outline-offset: calc(1px * -1);
+  }
+
   .-outline-offset-2 {
     outline-offset: calc(2px * -1);
   }
 
+  .outline-offset-1 {
+    outline-offset: 1px;
+  }
+
   .outline-offset-2 {
     outline-offset: 2px;
   }
@@ -7275,14 +7330,6 @@
     --field-rim-focus: var(--destructive-indicator);
   }
 
-  .\[--field-rim-focus\:var\(--field-rim-focus-on-surface\)\] {
-    --field-rim-focus: var(--field-rim-focus-on-surface);
-  }
-
-  .\[--field-rim-focus\:var\(--surface-rim-focus\)\] {
-    --field-rim-focus: var(--surface-rim-focus);
-  }
-
   .\[--field-rim\:var\(--destructive-indicator\)\] {
     --field-rim: var(--destructive-indicator);
   }
@@ -7335,8 +7382,8 @@
     --studio-frame-radius: 2.5rem;
   }
 
-  .\[--surface-rim\:var\(--surface-rim-focus\)\] {
-    --surface-rim: var(--surface-rim-focus);
+  .\[--surface-rim\:var\(--border-focus\)\] {
+    --surface-rim: var(--border-focus);
   }
 
   .\[--tw-animation-duration\:var\(--duration-normal\)\] {
@@ -7531,11 +7578,6 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .group-focus-visible\:ring-2:is(:where(.group):focus-visible *) {
-    --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);
-  }
-
   .group-focus-visible\:ring-border-focus:is(:where(.group):focus-visible *) {
     --tw-ring-color: var(--border-focus);
   }
@@ -8065,14 +8107,9 @@
     border-color: var(--muted-foreground);
   }
 
-  .before\:border-warning-edge:before {
+  .before\:border-t-warning-bright:before {
     content: var(--tw-content);
-    border-color: var(--warning-edge);
-  }
-
-  .before\:border-t-warning-indicator:before {
-    content: var(--tw-content);
-    border-top-color: var(--warning-indicator);
+    border-top-color: var(--warning-bright);
   }
 
   .before\:bg-\(--chat-surface\):before {
@@ -8568,7 +8605,7 @@
       background-color: var(--muted);
     }
 
-    .hover\:bg-muted-foreground\/60:hover {
+    .hover\:bg-muted-foreground:hover, .hover\:bg-muted-foreground\/60:hover {
       background-color: var(--muted-foreground);
     }
 
@@ -8616,8 +8653,8 @@
       opacity: 1;
     }
 
-    .hover\:ring-2:hover {
-      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    .hover\:ring-1:hover {
+      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
@@ -8625,6 +8662,15 @@
       --tw-ring-color: var(--border-hover);
     }
 
+    .hover\:outline-1:hover {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+
+    .hover\:outline-border-hover:hover {
+      outline-color: var(--border-hover);
+    }
+
     .hover\:brightness-95:hover {
       --tw-brightness: brightness(95%);
       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, );
@@ -8715,20 +8761,6 @@
     opacity: 1;
   }
 
-  .focus\:shadow-focus-ring:focus {
-    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--focus-halo));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
-  .focus\:ring-1:focus {
-    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
-  .focus\:ring-border-focus:focus {
-    --tw-ring-color: var(--border-focus);
-  }
-
   .focus\:outline-hidden:focus {
     --tw-outline-style: none;
     outline-style: none;
@@ -8751,10 +8783,6 @@
     outline-style: solid;
   }
 
-  .focus\:ring-inset:focus {
-    --tw-ring-inset: inset;
-  }
-
   .focus\:placeholder\:opacity-70:focus::placeholder {
     opacity: .7;
   }
@@ -8795,52 +8823,15 @@
     opacity: 1;
   }
 
-  .focus-visible\:shadow-focus-ring:focus-visible {
-    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--focus-halo));
-    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\:shadow-none:focus-visible {
-    --tw-shadow: 0 0 #0000;
-    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-0:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + 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-1:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .focus-visible\:ring-2:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
   .focus-visible\:ring-border-focus:focus-visible {
     --tw-ring-color: var(--border-focus);
   }
 
-  .focus-visible\:ring-border-strong:focus-visible {
-    --tw-ring-color: var(--border-strong);
-  }
-
-  .focus-visible\:ring-ring:focus-visible {
-    --tw-ring-color: var(--ring);
-  }
-
-  .focus-visible\:ring-offset-2:focus-visible {
-    --tw-ring-offset-width: 2px;
-    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  }
-
-  .focus-visible\:ring-offset-background:focus-visible {
-    --tw-ring-offset-color: var(--background);
-  }
-
   .focus-visible\:outline-hidden:focus-visible {
     --tw-outline-style: none;
     outline-style: none;
@@ -8863,6 +8854,14 @@
     outline-width: 2px;
   }
 
+  .focus-visible\:-outline-offset-1:focus-visible {
+    outline-offset: calc(1px * -1);
+  }
+
+  .focus-visible\:outline-offset-0:focus-visible {
+    outline-offset: 0px;
+  }
+
   .focus-visible\:outline-offset-2:focus-visible {
     outline-offset: 2px;
   }
@@ -8871,6 +8870,10 @@
     outline-color: var(--border-focus);
   }
 
+  .focus-visible\:outline-foreground:focus-visible {
+    outline-color: var(--foreground);
+  }
+
   .focus-visible\:outline-none:focus-visible {
     --tw-outline-style: none;
     outline-style: none;
@@ -8881,16 +8884,12 @@
     outline-style: solid;
   }
 
-  .focus-visible\:\[--surface-rim\:var\(--field-rim-focus\)\]:focus-visible {
-    --surface-rim: var(--field-rim-focus);
-  }
-
-  .focus-visible\:\[--surface-rim\:var\(--surface-rim-focus\)\]:focus-visible {
-    --surface-rim: var(--surface-rim-focus);
+  .focus-visible\:\[--surface-rim\:var\(--border-focus\)\]:focus-visible {
+    --surface-rim: var(--border-focus);
   }
 
-  .focus-visible\:ring-inset:focus-visible {
-    --tw-ring-inset: inset;
+  .focus-visible\:\[--surface-rim\:var\(--field-rim-focus\)\]:focus-visible {
+    --surface-rim: var(--field-rim-focus);
   }
 
   .active\:scale-90:active {
@@ -9065,9 +9064,9 @@
     background-color: var(--surface-panel);
   }
 
-  .has-focus-visible\:outline-2:has(:focus-visible) {
+  .has-focus-visible\:outline-1:has(:focus-visible) {
     outline-style: var(--tw-outline-style);
-    outline-width: 2px;
+    outline-width: 1px;
   }
 
   .has-focus-visible\:outline-offset-4:has(:focus-visible) {
@@ -9112,13 +9111,22 @@
     color: var(--muted-foreground);
   }
 
-  .has-\[\:focus-visible\]\:ring-2:has(:focus-visible) {
-    --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);
+  .has-\[\:focus-visible\]\:outline-1:has(:focus-visible) {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
   }
 
-  .has-\[\:focus-visible\]\:ring-border-focus:has(:focus-visible) {
-    --tw-ring-color: var(--border-focus);
+  .has-\[\:focus-visible\]\:outline-offset-2:has(:focus-visible) {
+    outline-offset: 2px;
+  }
+
+  .has-\[\:focus-visible\]\:outline-border-focus:has(:focus-visible) {
+    outline-color: var(--border-focus);
+  }
+
+  .has-\[\:focus-visible\]\:outline-solid:has(:focus-visible) {
+    --tw-outline-style: solid;
+    outline-style: solid;
   }
 
   .has-\[\[aria-invalid\=true\]\]\:\[--field-rim-focus\:var\(--destructive-indicator\)\]:has([aria-invalid="true"]) {
@@ -9826,6 +9834,15 @@
     color: var(--foreground);
   }
 
+  .data-\[popup-open\]\:outline-2[data-popup-open] {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+  }
+
+  .data-\[popup-open\]\:outline-foreground[data-popup-open] {
+    outline-color: var(--foreground);
+  }
+
   .data-\[popup-open\]\:\[--surface-tint\:var\(--fill\)\][data-popup-open] {
     --surface-tint: var(--fill);
   }
@@ -10207,6 +10224,10 @@
       width: calc(100vw - 2rem);
     }
 
+    .sm\:max-w-80 {
+      max-width: calc(var(--spacing) * 80);
+    }
+
     .sm\:max-w-96 {
       max-width: calc(var(--spacing) * 96);
     }
@@ -10231,10 +10252,6 @@
       grid-template-columns: repeat(5, minmax(0, 1fr));
     }
 
-    .sm\:grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
     .sm\:grid-cols-\[7rem_5\.5rem_minmax\(0\,1fr\)\] {
       grid-template-columns: 7rem 5.5rem minmax(0, 1fr);
     }
@@ -10247,10 +10264,6 @@
       grid-template-columns: 10rem minmax(0, 1fr) auto;
     }
 
-    .sm\:grid-cols-\[11rem_minmax\(0\,1fr\)\] {
-      grid-template-columns: 11rem minmax(0, 1fr);
-    }
-
     .sm\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
       grid-template-columns: minmax(0, 1fr) auto;
     }
@@ -10495,18 +10508,6 @@
       grid-template-columns: repeat(5, minmax(0, 1fr));
     }
 
-    .lg\:grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .lg\:grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .lg\:grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
     .lg\:grid-cols-\[1\.4fr_0\.8fr\] {
       grid-template-columns: 1.4fr .8fr;
     }
@@ -11982,8 +11983,15 @@
   --red-800: oklch(39% .14 25);
   --red-900: oklch(31% .1 25);
   --red-950: oklch(23% .06 25);
+  --red-soft-50: oklch(97% .01 25);
+  --red-soft-100: oklch(93% .022 25);
+  --red-soft-200: oklch(86% .045 25);
   --red-soft-300: oklch(76% .1 25);
+  --red-soft-400: oklch(68% .1 25);
+  --red-soft-500: oklch(60% .1 25);
   --red-soft-600: oklch(52% .1 25);
+  --red-soft-700: oklch(45% .092 25);
+  --red-soft-800: oklch(38% .083 25);
   --red-soft-900: oklch(31% .075 25);
   --red-soft-950: oklch(23% .045 25);
   --orange-50: oklch(97% .014 50);
@@ -11997,8 +12005,15 @@
   --orange-800: oklch(39% .103 50);
   --orange-900: oklch(31% .082 50);
   --orange-950: oklch(23% .05 50);
+  --orange-soft-50: oklch(97% .01 50);
+  --orange-soft-100: oklch(93% .022 50);
+  --orange-soft-200: oklch(86% .045 50);
   --orange-soft-300: oklch(76% .1 50);
+  --orange-soft-400: oklch(68% .1 50);
+  --orange-soft-500: oklch(60% .1 50);
   --orange-soft-600: oklch(52% .1 50);
+  --orange-soft-700: oklch(45% .088 50);
+  --orange-soft-800: oklch(38% .076 50);
   --orange-soft-900: oklch(31% .064 50);
   --orange-soft-950: oklch(23% .038 50);
   --yellow-50: oklch(97% .018 90);
@@ -12012,8 +12027,15 @@
   --yellow-800: oklch(39% .079 90);
   --yellow-900: oklch(31% .06 90);
   --yellow-950: oklch(23% .035 90);
+  --yellow-soft-50: oklch(97% .01 90);
+  --yellow-soft-100: oklch(93% .022 90);
+  --yellow-soft-200: oklch(86% .045 90);
   --yellow-soft-300: oklch(76% .1 90);
+  --yellow-soft-400: oklch(68% .1 90);
+  --yellow-soft-500: oklch(60% .1 90);
   --yellow-soft-600: oklch(52% .1 90);
+  --yellow-soft-700: oklch(45% .082 90);
+  --yellow-soft-800: oklch(38% .063 90);
   --yellow-soft-900: oklch(31% .045 90);
   --yellow-soft-950: oklch(23% .026 90);
   --green-50: oklch(97% .015 150);
@@ -12027,8 +12049,15 @@
   --green-800: oklch(39% .1 150);
   --green-900: oklch(31% .07 150);
   --green-950: oklch(23% .04 150);
+  --green-soft-50: oklch(97% .01 150);
+  --green-soft-100: oklch(93% .022 150);
+  --green-soft-200: oklch(86% .045 150);
   --green-soft-300: oklch(76% .1 150);
+  --green-soft-400: oklch(68% .1 150);
+  --green-soft-500: oklch(60% .1 150);
   --green-soft-600: oklch(52% .1 150);
+  --green-soft-700: oklch(45% .084 150);
+  --green-soft-800: oklch(38% .069 150);
   --green-soft-900: oklch(31% .053 150);
   --green-soft-950: oklch(23% .03 150);
   --cyan-50: oklch(97% .014 215);
@@ -12042,8 +12071,15 @@
   --cyan-800: oklch(39% .069 215);
   --cyan-900: oklch(31% .054 215);
   --cyan-950: oklch(23% .035 215);
+  --cyan-soft-50: oklch(97% .01 215);
+  --cyan-soft-100: oklch(93% .022 215);
+  --cyan-soft-200: oklch(86% .045 215);
   --cyan-soft-300: oklch(76% .1 215);
+  --cyan-soft-400: oklch(68% .097 215);
+  --cyan-soft-500: oklch(60% .093 215);
   --cyan-soft-600: oklch(52% .09 215);
+  --cyan-soft-700: oklch(45% .074 215);
+  --cyan-soft-800: oklch(38% .057 215);
   --cyan-soft-900: oklch(31% .041 215);
   --cyan-soft-950: oklch(23% .026 215);
   --blue-50: oklch(97% .012 260);
@@ -12057,8 +12093,15 @@
   --blue-800: oklch(39% .14 260);
   --blue-900: oklch(31% .1 260);
   --blue-950: oklch(23% .06 260);
+  --blue-soft-50: oklch(97% .01 260);
+  --blue-soft-100: oklch(93% .022 260);
+  --blue-soft-200: oklch(86% .045 260);
   --blue-soft-300: oklch(76% .1 260);
+  --blue-soft-400: oklch(68% .1 260);
+  --blue-soft-500: oklch(60% .1 260);
   --blue-soft-600: oklch(52% .1 260);
+  --blue-soft-700: oklch(45% .092 260);
+  --blue-soft-800: oklch(38% .083 260);
   --blue-soft-900: oklch(31% .075 260);
   --blue-soft-950: oklch(23% .045 260);
   --purple-50: oklch(97% .014 304);
@@ -12072,8 +12115,15 @@
   --purple-800: oklch(39% .15 304);
   --purple-900: oklch(31% .11 304);
   --purple-950: oklch(23% .065 304);
+  --purple-soft-50: oklch(97% .01 304);
+  --purple-soft-100: oklch(93% .022 304);
+  --purple-soft-200: oklch(86% .045 304);
   --purple-soft-300: oklch(76% .1 304);
+  --purple-soft-400: oklch(68% .1 304);
+  --purple-soft-500: oklch(60% .1 304);
   --purple-soft-600: oklch(52% .1 304);
+  --purple-soft-700: oklch(45% .094 304);
+  --purple-soft-800: oklch(38% .089 304);
   --purple-soft-900: oklch(31% .083 304);
   --purple-soft-950: oklch(23% .049 304);
   --pink-50: oklch(97% .014 350);
@@ -12087,8 +12137,15 @@
   --pink-800: oklch(39% .14 350);
   --pink-900: oklch(31% .1 350);
   --pink-950: oklch(23% .06 350);
+  --pink-soft-50: oklch(97% .01 350);
+  --pink-soft-100: oklch(93% .022 350);
+  --pink-soft-200: oklch(86% .045 350);
   --pink-soft-300: oklch(76% .1 350);
+  --pink-soft-400: oklch(68% .1 350);
+  --pink-soft-500: oklch(60% .1 350);
   --pink-soft-600: oklch(52% .1 350);
+  --pink-soft-700: oklch(45% .092 350);
+  --pink-soft-800: oklch(38% .083 350);
   --pink-soft-900: oklch(31% .075 350);
   --pink-soft-950: oklch(23% .045 350);
 }
@@ -12196,6 +12253,12 @@ html.light {
   --product-persistent-server: var(--badge-purple-strong);
   --product-persistent-server-foreground: var(--badge-purple-foreground);
   --product-persistent-server-subtle: var(--badge-purple-subtle);
+  --brand-green-indicator: var(--color-brand-green);
+  --destructive-bright: var(--red-300);
+  --warning-bright: var(--yellow-300);
+  --success-bright: var(--green-300);
+  --info-bright: var(--blue-300);
+  --session-initializing: var(--orange-400);
 }
 
 html.light {
@@ -12205,9 +12268,9 @@ html.light {
   --destructive-indicator: var(--red-600);
   --destructive-subtle-foreground: var(--red-950);
   --warning-subtle: var(--yellow-100);
-  --warning-edge: var(--yellow-300);
+  --warning-edge: var(--yellow-200);
   --warning-indicator: var(--yellow-700);
-  --warning-subtle-foreground: var(--yellow-950);
+  --warning-subtle-foreground: var(--yellow-800);
   --success-subtle: var(--green-100);
   --success-edge: var(--green-300);
   --success-indicator: var(--green-700);
@@ -12263,6 +12326,12 @@ html.light {
   --product-factory-foreground: var(--orange-950);
   --product-workers-foreground: var(--yellow-950);
   --product-persistent-server-foreground: var(--purple-950);
+  --brand-green-indicator: var(--green-700);
+  --destructive-bright: var(--red-500);
+  --warning-bright: var(--yellow-400);
+  --success-bright: var(--green-500);
+  --info-bright: var(--blue-500);
+  --session-initializing: var(--orange-500);
 }
 
 :root {
@@ -12279,6 +12348,7 @@ html.light {
   --chart-sequential-3: var(--purple-400);
   --chart-sequential-4: var(--purple-500);
   --chart-sequential-5: var(--purple-600);
+  --chart-sequential-pale: var(--purple-200);
   --span-agent: oklch(75% .133 250);
   --span-workflow: oklch(75% .127 200);
   --span-model: oklch(75% .15 320);
@@ -12311,11 +12381,11 @@ html.light {
   --span-workspace: oklch(55% .15 20);
   --span-skill: oklch(55% .148 130);
   --span-scorer: oklch(55% .15 350);
-  --chart-sequential-1: var(--purple-800);
-  --chart-sequential-2: var(--purple-700);
-  --chart-sequential-3: var(--purple-600);
-  --chart-sequential-4: var(--purple-500);
-  --chart-sequential-5: var(--purple-400);
+  --chart-sequential-1: var(--purple-900);
+  --chart-sequential-2: var(--purple-800);
+  --chart-sequential-3: var(--purple-700);
+  --chart-sequential-4: var(--purple-600);
+  --chart-sequential-5: var(--purple-500);
 }
 
 :root {
@@ -12365,22 +12435,18 @@ html.light {
   --border-strong: oklch(var(--fill-tint) 0 0 / 19%);
   --border-hover: oklch(var(--fill-tint) 0 0 / 25%);
   --border-focus: oklch(var(--fill-tint) 0 0 / 40%);
-  --ring: var(--border-focus);
   --surface-panel: oklch(22.44% 0 0);
   --surface-overlay-soft: var(--fill-subtle);
   --surface-overlay-strong: var(--gray-alpha-2);
   --scrim: oklch(0% 0 0 / .75);
   --elevation-lip: inset 0 1px 0 oklch(100% 0 0 / .03);
   --inset-highlight: oklch(100% 0 0 / .07);
-  --focus-halo: var(--green-950);
   --inset-rim: oklch(100% 0 0 / .07);
   --surface-rim: oklch(100% 0 0 / .05);
-  --surface-rim-focus: oklch(100% 0 0 / .14);
   --elevation-raised: 0 1px 2px -1px oklch(0% 0 0 / .22), 0 2px 3px -2px oklch(0% 0 0 / .14);
   --dialog: var(--card);
   --field-on-surface: var(--gray-1);
   --field-rim-on-surface: oklch(100% 0 0 / .05);
-  --field-rim-focus-on-surface: oklch(100% 0 0 / .14);
   --elevation-overlay: 0 2px 2px oklch(0% 0 0 / .1), 0 4px 4px oklch(0% 0 0 / .1), 0 8px 8px oklch(0% 0 0 / .1);
 }
 
@@ -12392,15 +12458,12 @@ html.light {
   --scrim: oklch(20.8% 0 0 / .45);
   --elevation-lip: 0 0 #0000;
   --inset-highlight: oklch(100% 0 0 / .55);
-  --focus-halo: var(--green-50);
   --inset-rim: oklch(0% 0 0 / .08);
   --surface-rim: oklch(0% 0 0 / .08);
-  --surface-rim-focus: oklch(0% 0 0 / .18);
   --elevation-raised: 0 1px 2px -1px oklch(0% 0 0 / .05), 0 1px 3px -2px oklch(0% 0 0 / .04);
   --dialog: var(--background);
   --field-on-surface: var(--background-3);
   --field-rim-on-surface: oklch(0% 0 0 / .14);
-  --field-rim-focus-on-surface: oklch(0% 0 0 / .32);
   --elevation-overlay: 0 2px 4px -1px oklch(0% 0 0 / .08), 0 4px 8px -2px oklch(0% 0 0 / .06), 0 8px 16px -4px oklch(0% 0 0 / .06);
 }
 
@@ -12428,7 +12491,7 @@ html.light {
   --field: var(--card);
   --field-disabled: var(--fill-subtle);
   --field-rim: var(--surface-rim);
-  --field-rim-focus: var(--surface-rim-focus);
+  --field-rim-focus: var(--border-focus);
   --muted: var(--gray-1);
   --foreground: var(--gray-10);
   --muted-foreground: var(--gray-8);
@@ -12543,6 +12606,18 @@ html.light .cm-editor {
   }
 }
 
+@property --tw-border-spacing-x {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-border-spacing-y {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;