@tangle-network/sandbox-ui 1.1.10 → 2.0.0

package/dist/styles.css

@@ -97,6 +97,7 @@
     --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.3);
     --shadow-dropdown: 0 8px 30px hsl(var(--shadow-color) / 0.45);
     --shadow-glow: none;
+    --shadow-overlay: 0 2px 6px hsl(var(--shadow-color) / 0.3), 0 16px 40px hsl(var(--shadow-color) / 0.5);
     --color-background: hsl(var(--background));
     --color-muted: hsl(var(--muted));
   }
@@ -790,10 +791,6 @@
     width: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 2);
   }
-  .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);
@@ -932,6 +929,9 @@
   .h-28 {
     height: calc(var(--spacing) * 28);
   }
+  .h-40 {
+    height: calc(var(--spacing) * 40);
+  }
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
@@ -1070,6 +1070,9 @@
   .h-\[var\(--radix-select-trigger-height\)\] {
     height: var(--radix-select-trigger-height);
   }
+  .h-\[var\(--shell-header-height\)\] {
+    height: var(--shell-header-height);
+  }
   .h-\[var\(--timeline-dot-size\,0\.5rem\)\] {
     height: var(--timeline-dot-size,0.5rem);
   }
@@ -1103,6 +1106,9 @@
   .max-h-96 {
     max-height: calc(var(--spacing) * 96);
   }
+  .max-h-\[35vh\] {
+    max-height: 35vh;
+  }
   .max-h-\[40\%\] {
     max-height: 40%;
   }
@@ -1142,6 +1148,9 @@
   .min-h-0 {
     min-height: 0px;
   }
+  .min-h-4 {
+    min-height: calc(var(--spacing) * 4);
+  }
   .min-h-5 {
     min-height: calc(var(--spacing) * 5);
   }
@@ -1649,6 +1658,9 @@
   .max-w-\[min\(640px\,calc\(100vw-2rem\)\)\] {
     max-width: min(640px, calc(100vw - 2rem));
   }
+  .max-w-fit {
+    max-width: fit-content;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -1841,6 +1853,9 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-\[tangle-breathe_var\(--motion-ambient\)_infinite\] {
+    animation: tangle-breathe var(--motion-ambient) infinite;
+  }
   .animate-bounce {
     animation: var(--animate-bounce);
   }
@@ -2152,9 +2167,6 @@
   .self-center {
     align-self: center;
   }
-  .self-end {
-    align-self: flex-end;
-  }
   .self-start {
     align-self: flex-start;
   }
@@ -2220,6 +2232,15 @@
   .rounded-\[calc\(var\(--radius-xl\)\+2px\)\] {
     border-radius: calc(var(--radius-xl) + 2px);
   }
+  .rounded-\[var\(--radius-card\)\] {
+    border-radius: var(--radius-card);
+  }
+  .rounded-\[var\(--radius-container\)\] {
+    border-radius: var(--radius-container);
+  }
+  .rounded-\[var\(--radius-control\)\] {
+    border-radius: var(--radius-control);
+  }
   .rounded-\[var\(--radius-full\)\] {
     border-radius: var(--radius-full);
   }
@@ -2775,9 +2796,6 @@
   .bg-\[var\(--status-running\)\] {
     background-color: var(--status-running);
   }
-  .bg-\[var\(--status-running\,\#34c48c\)\] {
-    background-color: var(--status-running,#34c48c);
-  }
   .bg-\[var\(--surface-danger-bg\)\] {
     background-color: var(--surface-danger-bg);
   }
@@ -2787,9 +2805,15 @@
   .bg-\[var\(--surface-info-bg\)\] {
     background-color: var(--surface-info-bg);
   }
+  .bg-\[var\(--surface-info-text\)\] {
+    background-color: var(--surface-info-text);
+  }
   .bg-\[var\(--surface-neutral-bg\)\] {
     background-color: var(--surface-neutral-bg);
   }
+  .bg-\[var\(--surface-neutral-text\)\] {
+    background-color: var(--surface-neutral-text);
+  }
   .bg-\[var\(--surface-success-bg\)\] {
     background-color: var(--surface-success-bg);
   }
@@ -3009,12 +3033,6 @@
       background-color: color-mix(in oklab, hsl(var(--muted-foreground)) 40%, transparent);
     }
   }
-  .bg-muted-foreground\/50 {
-    background-color: hsl(var(--muted-foreground));
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, hsl(var(--muted-foreground)) 50%, transparent);
-    }
-  }
   .bg-muted\/10 {
     background-color: hsl(var(--muted));
     @supports (color: color-mix(in lab, red, red)) {
@@ -3749,10 +3767,6 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
-  .tracking-\[-0\.01em\] {
-    --tw-tracking: -0.01em;
-    letter-spacing: -0.01em;
-  }
   .tracking-\[0\.1em\] {
     --tw-tracking: 0.1em;
     letter-spacing: 0.1em;
@@ -3839,6 +3853,9 @@
   .text-\[color\:var\(--surface-danger-text\)\] {
     color: var(--surface-danger-text);
   }
+  .text-\[color\:var\(--surface-warning-text\)\] {
+    color: var(--surface-warning-text);
+  }
   .text-\[color\:var\(--text-dim\)\] {
     color: var(--text-dim);
   }
@@ -4170,6 +4187,9 @@
   .underline {
     text-decoration-line: underline;
   }
+  .underline-offset-2 {
+    text-underline-offset: 2px;
+  }
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
@@ -4358,6 +4378,10 @@
     --tw-blur: blur(8px);
     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,);
   }
+  .grayscale {
+    --tw-grayscale: grayscale(100%);
+    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,);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -4514,8 +4538,8 @@
   .\[-webkit-mask-image\:linear-gradient\(to_right\,transparent\,black_16px\,black_calc\(100\%-16px\)\,transparent\)\] {
     -webkit-mask-image: linear-gradient(to right,transparent,black 16px,black calc(100% - 16px),transparent);
   }
-  .\[animation-duration\:1\.6s\] {
-    animation-duration: 1.6s;
+  .\[text-decoration\:inherit\] {
+    text-decoration: inherit;
   }
   .\[transition\:color_var\(--motion-control\)\,background-color_var\(--motion-control\)\,border-color_var\(--motion-control\)\,box-shadow_var\(--motion-control\)\,transform_var\(--motion-control\)\,scale_var\(--motion-control\)\,opacity_var\(--motion-control\)\] {
     transition: color var(--motion-control),background-color var(--motion-control),border-color var(--motion-control),box-shadow var(--motion-control),transform var(--motion-control),scale var(--motion-control),opacity var(--motion-control);
@@ -4594,16 +4618,6 @@
   .group-focus-visible\:bg-ring:is(:where(.group):focus-visible *) {
     background-color: hsl(var(--ring));
   }
-  .group-focus-visible\/agent\:outline-2:is(:where(.group\/agent):focus-visible *) {
-    outline-style: var(--tw-outline-style);
-    outline-width: 2px;
-  }
-  .group-focus-visible\/agent\:outline-offset-4:is(:where(.group\/agent):focus-visible *) {
-    outline-offset: 4px;
-  }
-  .group-focus-visible\/agent\:outline-ring:is(:where(.group\/agent):focus-visible *) {
-    outline-color: hsl(var(--ring));
-  }
   .group-data-\[state\=indeterminate\]\/checkbox\:block:is(:where(.group\/checkbox)[data-state="indeterminate"] *) {
     display: block;
   }
@@ -4656,66 +4670,54 @@
     --tw-content: '';
     content: var(--tw-content);
   }
-  .after\:pointer-events-none::after {
-    content: var(--tw-content);
-    pointer-events: none;
-  }
   .after\:absolute::after {
     content: var(--tw-content);
     position: absolute;
   }
-  .after\:inset-0::after {
-    content: var(--tw-content);
-    inset: 0px;
-  }
   .after\:top-0::after {
     content: var(--tw-content);
     top: 0px;
   }
-  .after\:right-0::after {
+  .after\:top-1\/2::after {
     content: var(--tw-content);
-    right: 0px;
+    top: calc(1 / 2 * 100%);
   }
-  .after\:left-0::after {
+  .after\:-right-\[3px\]::after {
     content: var(--tw-content);
-    left: 0px;
+    right: calc(3px * -1);
   }
-  .after\:h-\[2px\]::after {
+  .after\:right-0::after {
     content: var(--tw-content);
-    height: 2px;
+    right: 0px;
   }
-  .after\:rounded-xl::after {
+  .after\:left-0::after {
     content: var(--tw-content);
-    border-radius: var(--radius-xl);
+    left: 0px;
   }
-  .after\:bg-primary::after {
+  .after\:h-4::after {
     content: var(--tw-content);
-    background-color: hsl(var(--primary));
+    height: calc(var(--spacing) * 4);
   }
-  .after\:opacity-0::after {
+  .after\:h-\[2px\]::after {
     content: var(--tw-content);
-    opacity: 0%;
+    height: 2px;
   }
-  .after\:shadow-\[0_10px_28px_-10px_hsl\(var\(--foreground\)\/0\.45\)\]::after {
+  .after\:w-px::after {
     content: var(--tw-content);
-    --tw-shadow: 0 10px 28px -10px var(--tw-shadow-color, hsl(var(--foreground)/0.45));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    width: 1px;
   }
-  .after\:transition-opacity::after {
+  .after\:-translate-y-1\/2::after {
     content: var(--tw-content);
-    transition-property: opacity;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .after\:duration-150::after {
+  .after\:bg-border::after {
     content: var(--tw-content);
-    --tw-duration: 150ms;
-    transition-duration: 150ms;
+    background-color: hsl(var(--border));
   }
-  .after\:ease-out::after {
+  .after\:bg-primary::after {
     content: var(--tw-content);
-    --tw-ease: var(--ease-out);
-    transition-timing-function: var(--ease-out);
+    background-color: hsl(var(--primary));
   }
   .first\:pt-0:first-child {
     padding-top: 0px;
@@ -4742,10 +4744,6 @@
       --tw-translate-y: calc(var(--spacing) * -0.5);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
-    .hover\:-translate-y-px:hover {
-      --tw-translate-y: -1px;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
     .hover\:border-\[var\(--border-accent\)\]:hover {
       border-color: var(--border-accent);
     }
@@ -5176,9 +5174,9 @@
       --tw-brightness: brightness(110%);
       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,);
     }
-    .hover\:after\:opacity-100:hover::after {
-      content: var(--tw-content);
-      opacity: 100%;
+    .hover\:grayscale-0:hover {
+      --tw-grayscale: grayscale(0%);
+      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,);
     }
   }
   .focus\:border-\[var\(--focus-border\)\]:focus {
@@ -5454,9 +5452,6 @@
   .aria-pressed\:text-\[var\(--accent-text\)\][aria-pressed="true"] {
     color: var(--accent-text);
   }
-  .aria-pressed\:text-foreground[aria-pressed="true"] {
-    color: hsl(var(--foreground));
-  }
   .aria-pressed\:shadow-\[inset_0_0_0_1px_var\(--ix-sel-ring\)\][aria-pressed="true"] {
     --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--ix-sel-ring));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -5731,11 +5726,6 @@
       }
     }
   }
-  @media (prefers-reduced-motion: no-preference) {
-    .motion-safe\:animate-spin {
-      animation: var(--animate-spin);
-    }
-  }
   @media (prefers-reduced-motion: reduce) {
     .motion-reduce\:not-sr-only {
       position: static;
@@ -5756,16 +5746,6 @@
     .motion-reduce\:transition-none {
       transition-property: none;
     }
-    .motion-reduce\:after\:transition-none::after {
-      content: var(--tw-content);
-      transition-property: none;
-    }
-    @media (hover: hover) {
-      .motion-reduce\:hover\:translate-y-0:hover {
-        --tw-translate-y: 0px;
-        translate: var(--tw-translate-x) var(--tw-translate-y);
-      }
-    }
     .motion-reduce\:active\:scale-100:active {
       --tw-scale-x: 100%;
       --tw-scale-y: 100%;
@@ -5805,6 +5785,9 @@
       border-left-style: var(--tw-border-style) !important;
       border-left-width: 0px !important;
     }
+    .max-sm\:p-4 {
+      padding: calc(var(--spacing) * 4);
+    }
     .max-sm\:pl-4 {
       padding-left: calc(var(--spacing) * 4);
     }
@@ -6017,6 +6000,9 @@
     .lg\:col-span-1 {
       grid-column: span 1 / span 1;
     }
+    .lg\:mr-\[420px\] {
+      margin-right: 420px;
+    }
     .lg\:ml-\[var\(--sb-content-margin\,0px\)\] {
       margin-left: var(--sb-content-margin,0px);
     }
@@ -6301,6 +6287,16 @@
   .\[\&_a\:hover\]\:underline a:hover {
     text-decoration-line: underline;
   }
+  .\[\&_blockquote_p\]\:before\:content-none blockquote p::before {
+    content: var(--tw-content);
+    --tw-content: none;
+    content: none;
+  }
+  .\[\&_blockquote_p\]\:after\:content-none blockquote p::after {
+    content: var(--tw-content);
+    --tw-content: none;
+    content: none;
+  }
   .\[\&_h1\]\:text-2xl h1 {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -6466,12 +6462,20 @@
     padding-block: var(--spacing);
   }
   @media (width < 40rem) {
+    .max-sm\:\[\&\>div\+div\]\:border-t > div + div {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 1px;
+    }
     .max-sm\:\[\&\>div\:not\(\:nth-child\(2n\+1\)\)\]\:border-l > div:not(:nth-child(2n+1)) {
       border-left-style: var(--tw-border-style);
       border-left-width: 1px;
     }
   }
   @media (width >= 40rem) {
+    .sm\:\[\&\>div\:not\(\:nth-child\(2n\+1\)\)\]\:border-l > div:not(:nth-child(2n+1)) {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
     .sm\:\[\&\>div\:not\(\:nth-child\(3n\+1\)\)\]\:border-l > div:not(:nth-child(3n+1)) {
       border-left-style: var(--tw-border-style);
       border-left-width: 1px;
@@ -9112,105 +9116,109 @@
 .tangle-prose th:not(:first-child), .tangle-prose td:not(:first-child) {
   border-left: 1px solid var(--border-subtle);
 }
+.agent-graph {
+  container-type: inline-size;
+}
 .ag-live {
   --ag-fg: hsl(var(--foreground));
   --ag-muted: hsl(var(--muted-foreground));
   --ag-surface: hsl(var(--card));
   --ag-border: hsl(var(--border));
 }
-.ag-live .ag-live-card {
+.ag-live-slot {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.ag-live-card {
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding: 12px;
+  padding: 10px;
   border: 1px solid var(--ag-border);
-  border-radius: 14px;
+  border-radius: var(--radius-card);
+  animation: agent-arrive var(--motion-arrive) both;
   background: var(--ag-surface);
   color: var(--ag-fg);
-  cursor: pointer;
   overflow: hidden;
-  animation: ag-live-grow 420ms cubic-bezier(.2,.8,.2,1) both;
-  transform-origin: 50% 0;
-  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(.2,.8,.2,1);
-}
-.ag-live .ag-live-card:hover {
-  transform: translateY(-1px);
-}
-.ag-live .ag-live-card[data-status="running"]::before {
-  content: "";
-  position: absolute;
-  inset: 0 0 auto;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, var(--ag-status), transparent);
-  background-size: 40% 100%;
-  background-repeat: no-repeat;
-  animation: ag-live-sheen 2.4s ease-in-out infinite;
-}
-.ag-live .ag-live-head {
-  display: flex;
+  transition: height var(--motion-surface), border-radius var(--motion-surface), border-color var(--motion-control), box-shadow var(--motion-control);
+}
+.ag-live-head {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) auto;
   align-items: center;
-  gap: 8px;
+  column-gap: 8px;
   min-width: 0;
 }
-.ag-live .ag-live-names {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  flex: 1;
+.ag-live-head > :first-child {
+  grid-column: 1;
+  grid-row: 1 / 3;
 }
-.ag-live .ag-live-name {
+.ag-live-names, .ag-live-stats {
+  display: contents;
+}
+.ag-live-name {
+  grid-column: 2;
+  grid-row: 1;
   font-size: 14px;
   line-height: 18px;
   font-weight: 600;
-  letter-spacing: -.01em;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.ag-live .ag-live-meta, .ag-live .ag-live-stats {
-  font-size: 11px;
-  line-height: 14px;
+.ag-live-meta, .ag-live-stats {
+  font-size: 12px;
+  line-height: 16px;
   color: var(--ag-muted);
-  white-space: nowrap;
+}
+.ag-live-meta {
+  grid-column: 2 / -1;
+  grid-row: 2;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.ag-live .ag-live-stats {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 2px;
+.ag-live-accounting {
+  grid-column: 2 / -1;
+  grid-row: 3;
   font-variant-numeric: tabular-nums;
-  flex: none;
 }
-.ag-live .ag-live-pill {
+.ag-live-pill {
+  grid-column: 3;
+  grid-row: 1;
+  justify-self: end;
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  height: 16px;
-  padding: 0 6px;
-  border-radius: 8px;
-  font-weight: 600;
   color: var(--ag-status);
-  background: var(--ag-status);
-  @supports (color: color-mix(in lab, red, red)) {
-    background: color-mix(in oklab, var(--ag-status) 14%, transparent);
-  }
 }
-.ag-live .ag-live-dot {
+.ag-running-dot {
+  display: inline-block;
+  flex: none;
   width: 6px;
   height: 6px;
-  border-radius: 50%;
-  background: var(--ag-status);
+  border-radius: var(--radius-pill);
+  background: var(--surface-info-text);
 }
-.ag-live [data-status="running"] .ag-live-dot {
-  animation: ag-live-breathe 1.6s ease-in-out infinite;
+[data-activity="quiet"] .ag-running-dot {
+  background: var(--surface-warning-text);
+  animation: none !important;
 }
-.ag-live .ag-live-thinking {
-  flex: none;
+.ag-live-thinking-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.ag-live-thinking {
+  flex: 1;
+  min-width: 0;
   margin: 0;
   font-size: 13px;
   line-height: 17px;
@@ -9218,141 +9226,297 @@
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  animation: ag-live-in 260ms ease-out both;
 }
-.ag-live .ag-live-quiet {
-  color: var(--ag-muted);
+.ag-live-failure {
+  color: var(--surface-danger-text);
 }
-.ag-live .ag-live-failure {
-  color: var(--ag-status);
+.ag-live-quiet {
+  color: var(--surface-warning-text);
+  font-size: 12px;
+  line-height: 16px;
+}
+.ag-live-inspect {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+}
+.ag-live-inspect > span:last-child {
+  text-decoration: underline;
 }
-.ag-live .ag-live-events {
-  margin: auto 0 0;
+.ag-live-respond {
+  height: 28px;
+  min-height: 28px;
+  flex: none;
+  border: 1px solid currentColor;
+  border-radius: var(--radius-control);
+  padding: 0 8px;
+  color: var(--surface-warning-text);
+  background: transparent;
+  cursor: pointer;
+}
+.ag-live-events-clip {
+  margin-top: auto;
+  height: 48px;
+  min-height: 48px;
+  overflow: hidden;
+}
+.ag-live-events {
+  margin: 0;
   padding: 0;
   list-style: none;
+  min-height: 64px;
   display: flex;
   flex-direction: column;
+  justify-content: flex-end;
+  transform: translateY(-16px);
 }
-.ag-live .ag-live-events li {
+.ag-live-events li {
   display: flex;
   align-items: center;
   gap: 6px;
-  height: 16px;
-  font: 11px/16px var(--font-mono, ui-monospace, monospace);
+  min-height: 16px;
+  font: 11px/16px var(--font-mono, monospace);
   color: var(--ag-muted);
-  animation: ag-live-in 260ms cubic-bezier(.2,.8,.2,1) both;
+  transition: color var(--motion-stream);
 }
-.ag-live .ag-live-events li svg {
+.ag-live-events li svg {
   flex: none;
-  opacity: .8;
-}
-.ag-live .ag-live-events li:nth-last-child(3) {
-  opacity: .55;
-}
-.ag-live .ag-live-events li:nth-last-child(2) {
-  opacity: .8;
+  width: 12px;
+  height: 12px;
 }
-.ag-live .ag-live-events li:last-child {
+.ag-live-events li:last-child {
   color: var(--ag-fg);
-  animation: ag-live-in 260ms cubic-bezier(.2,.8,.2,1) both, ag-live-flash 1.2s ease-out both;
 }
-.ag-live .ag-live-event-label {
+.ag-live-event-label {
   flex: 1;
   min-width: 0;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.ag-live .ag-live-event-at {
+.ag-live-event-at {
   flex: none;
-  font-family: inherit;
-  color: var(--ag-muted);
+  min-width: 3ch;
+  text-align: right;
   font-variant-numeric: tabular-nums;
 }
-.ag-live .ag-live-slot {
-  display: flex;
+.ag-live-chip {
+  height: 40px;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
+  gap: 8px;
+  border-radius: var(--radius-pill);
+  opacity: 1;
+}
+.ag-live-chip .ag-live-head {
+  display: flex;
+  flex: none;
+  max-width: 45%;
+}
+.ag-live-chip .ag-live-names {
+  display: flex;
+  min-width: 0;
+}
+.ag-live-chip .ag-live-stats, .ag-live-chip .ag-live-head > :first-child {
+  display: none;
+}
+.ag-live-chip-result {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+}
+.ag-phone-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin: 0;
+  padding: 8px;
+  list-style: none;
+}
+.ag-phone-list > li {
+  min-width: 0;
+  padding-left: min(calc(var(--depth) * 16px), 32px);
+  border-left: 1px solid var(--ag-border);
+}
+.ag-phone-select {
   width: 100%;
   height: 100%;
+  text-align: left;
+  background: transparent;
+  padding: 0;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
 }
-.ag-live .ag-live-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
+.agent-graph .react-flow__node-liveAgent:focus-visible .ag-live-card, .agent-graph .react-flow__node-agent:focus-visible > div, .ag-phone-select:focus-visible {
+  outline: 2px solid hsl(var(--foreground) / .7);
+  outline-offset: 2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ag-live-card {
+    animation: none;
+    transition: opacity var(--duration-fast);
+  }
+}
+@container (width < 600px) {
+  .ag-live-card {
+    height: auto;
+    min-height: 164px;
+  }
+  .ag-live-card[data-sparse="true"] {
+    min-height: 88px;
+  }
+  .ag-phone-select .ag-agent-card {
+    height: auto;
+    min-height: 88px;
+  }
+  .ag-caption-target {
+    display: none;
+  }
+  .ag-live-card.ag-live-chip {
+    min-height: 40px;
+    height: 40px;
+  }
+}
+.ag-live-accounting {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   max-width: 100%;
-  height: 32px;
-  padding: 0 12px;
-  border: 1px solid var(--ag-border);
-  border-radius: 16px;
-  background: var(--ag-surface);
+}
+.ag-live-chip-status {
+  flex: none;
+  font-size: 12px;
+  color: var(--ag-status);
+}
+.ag-live-chip-cost {
+  flex: none;
+  font-size: 12px;
+  color: var(--ag-muted);
+  font-variant-numeric: tabular-nums;
+}
+.ag-parent-label {
   color: var(--ag-muted);
   font-size: 12px;
-  cursor: pointer;
-  animation: ag-live-settle 320ms cubic-bezier(.2,.8,.2,1) both;
+  font-weight: 400;
 }
-.ag-live .ag-live-chip-name {
-  color: var(--ag-fg);
-  font-weight: 600;
-  white-space: nowrap;
+.ag-agent-card[data-status="needs-you"] p {
+  -webkit-line-clamp: 1;
+}
+.ag-status-button {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  gap: 6px;
+}
+.ag-caption-target {
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
 }
-.ag-live .ag-live-chip-result {
-  color: var(--ag-fg);
-  font-weight: 500;
+.ag-latest {
+  flex: none;
+  min-width: 0;
+  border-bottom: 1px solid hsl(var(--border));
+  padding: 8px 12px;
+  color: hsl(var(--foreground));
+  font-size: 12px;
   line-height: 16px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
-@keyframes ag-live-sheen {
-  from {
-    background-position: -40% 0;
-  }
-  to {
-    background-position: 140% 0;
-  }
+.ag-latest header {
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+  gap: 8px;
 }
-@keyframes ag-live-breathe {
-  50% {
-    opacity: .35;
-    transform: scale(.8);
-  }
+.ag-latest header > span {
+  color: hsl(var(--muted-foreground));
 }
-@keyframes ag-live-flash {
-  from {
-    background: color-mix(in oklab, var(--ag-status) 16%, transparent);
-  }
-  to {
-    background: transparent;
-  }
+.ag-latest header > button {
+  margin-left: auto;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  text-decoration: underline;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
 }
-@keyframes ag-live-grow {
-  from {
-    opacity: 0;
-    transform: scale(.92) translateY(-8px);
-  }
+.ag-latest ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
 }
-@keyframes ag-live-in {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
+.ag-latest li {
+  height: 28px;
 }
-@keyframes ag-live-settle {
-  from {
-    opacity: 1;
-    transform: scale(1.08);
-  }
+.ag-latest li > button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
 }
-@media (prefers-reduced-motion: reduce) {
-  .ag-live *, .ag-live *::before {
-    animation: none !important;
-  }
-  .ag-live .ag-live-card:hover {
-    transform: none;
-  }
+.ag-latest li > button:disabled {
+  cursor: default;
+}
+.ag-latest strong {
+  font-weight: 600;
+}
+.ag-latest li strong {
+  flex: none;
+  max-width: 22%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ag-latest-dot {
+  box-sizing: border-box;
+  width: 8px;
+  height: 8px;
+  flex: none;
+  border-radius: var(--radius-pill);
+}
+.ag-latest-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+}
+.ag-latest-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 11px/16px var(--font-mono, monospace);
+}
+.ag-latest time {
+  flex: none;
+  color: hsl(var(--muted-foreground));
+  font: 11px/16px var(--font-mono, monospace);
+  font-variant-numeric: tabular-nums;
+}
+.ag-latest-empty {
+  display: flex;
+  align-items: center;
+  color: hsl(var(--muted-foreground));
 }
 @property --tw-translate-x {
   syntax: "*";