@vite-hub/ui 0.0.4 → 0.1.0

package/dist/styles.css

@@ -1,5 +1,11 @@
+/* Pin the layer order, so utility classes on a part override its defaults below, and those override comark-chat's and Tailwind's base styles. */
+@layer theme, base, comark, components, utilities;
+/* comark-chat also adds these on mount; importing them keeps server-rendered messages from shifting. */
+@import "comark-chat/style.css";
+
 :root {
-  --vh-ui-radius: var(--ui-radius, 0.5rem);
+  /* Nuxt UI's --ui-radius is its smallest step (rounded-sm). Every radius here derives from rounded-lg, twice that step, so a part follows the app's --ui-radius. */
+  --vh-ui-radius: calc(var(--ui-radius, 0.25rem) * 2);
   --vh-ui-border: var(--ui-border, color-mix(in oklab, currentColor 14%, transparent));
   --vh-ui-muted: var(--ui-text-muted, color-mix(in oklab, currentColor 68%, transparent));
   --vh-ui-dimmed: var(--ui-text-muted, color-mix(in oklab, currentColor 68%, transparent));
@@ -7,95 +13,34 @@
   --vh-ui-bg: var(--ui-bg, Canvas);
   --vh-ui-bg-muted: var(--ui-bg-muted, color-mix(in oklab, Canvas 94%, currentColor));
   --vh-ui-bg-elevated: var(--ui-bg-elevated, color-mix(in oklab, Canvas 96%, currentColor));
+  --vh-ui-bg-accented: var(--ui-bg-accented, color-mix(in oklab, Canvas 90%, currentColor));
+  --vh-ui-highlighted: var(--ui-text-highlighted, currentColor);
   --vh-ui-error: var(--ui-error, #df3030);
   --vh-ui-info: var(--ui-info, #2563eb);
   --vh-ui-success: var(--ui-success, #16a34a);
   --vh-ui-warning: var(--ui-warning, #ad6500);
+  --vh-ui-highlighted: var(--ui-text-highlighted, currentColor);
+  --vh-ui-inverted: var(--ui-text-inverted, Canvas);
+  --vh-ui-primary: var(--ui-primary, #2563eb);
+  --vh-ui-ring: color-mix(in oklab, var(--vh-ui-primary) 50%, transparent);
 }
 
-.vh-chat {
-  min-height: 0;
-  position: relative;
-}
-
-.vh-session {
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr) auto;
-  min-height: 0;
-}
-
-.vh-session__header {
-  border-block-end: 1px solid var(--vh-ui-border);
-  padding: 0.75rem 1rem;
-}
-
-.vh-session__title {
-  font-size: 0.9375rem;
-  font-weight: 600;
-  margin: 0;
-}
-
-.vh-session__chat {
-  min-height: 0;
-}
-
-.vh-chat__viewport {
-  height: 100%;
-  min-height: 0;
-  overflow-y: auto;
-  overscroll-behavior-y: contain;
-  scrollbar-gutter: stable;
-}
-
-.vh-chat__content {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  margin-inline: auto;
-  max-width: 48rem;
-  min-height: 100%;
-  padding: var(--vh-chat-content-padding, 1.5rem 1rem 6rem);
-}
-
-.vh-chat__composer {
-  bottom: 0;
-  inset-inline: 0;
-  padding: var(--vh-chat-composer-padding, 2rem 1rem 1rem);
-  pointer-events: none;
-  position: absolute;
-  z-index: 3;
-}
-
-.vh-chat__composer::before {
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
-  background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--vh-ui-bg) 86%, transparent) 45%, var(--vh-ui-bg) 100%);
-  content: "";
-  inset: 0;
-  -webkit-mask-image: linear-gradient(to bottom, transparent, black 2rem);
-  mask-image: linear-gradient(to bottom, transparent, black 2rem);
-  pointer-events: none;
-  position: absolute;
-}
-
-.vh-chat__composer > * {
-  pointer-events: auto;
-  position: relative;
-}
-
+/*
+ * These rules restyle Nuxt UI components: the Markdown elements inside the typeset, the scroll button, the image dialog,
+ * and the primitive rail items, which the Console renders with Nuxt UI buttons and links.
+ * Nuxt UI styles them with utility classes, so these rules stay outside a layer to win over those classes.
+ */
 .vh-chat:has(.vh-chat__composer) .vh-chat__scroll-button {
   bottom: var(--vh-chat-scroll-button-offset, 7rem);
 }
 
 .vh-chat__scroll-button {
   align-items: center;
-  -webkit-backdrop-filter: blur(12px) saturate(1.14);
-  backdrop-filter: blur(12px) saturate(1.14);
-  background: color-mix(in srgb, var(--vh-ui-bg) 80%, transparent);
+  background: var(--vh-ui-bg-elevated);
   border: 1px solid var(--vh-ui-border);
   border-radius: 999px;
   bottom: 1rem;
-  box-shadow: 0 1px 3px color-mix(in oklab, black 12%, transparent);
+  box-shadow: 0 1px 3px color-mix(in oklab, black 14%, transparent);
   color: var(--vh-ui-muted);
   cursor: pointer;
   display: flex;
@@ -110,32 +55,12 @@
   z-index: 2;
 }
 
-.vh-chat__scroll-button:hover {
-  color: var(--vh-ui-text);
-}
-
-@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
-  .vh-chat__scroll-button {
-    background: var(--vh-ui-bg);
+@media (hover: hover) {
+  .vh-chat__scroll-button:hover {
+    color: var(--vh-ui-text);
   }
 }
 
-.vh-message-parts {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  min-width: 0;
-}
-
-.vh-typeset {
-  --vh-typeset-flow: 0.85em;
-  --vh-typeset-leading: 1.65;
-  font-size: 0.9375rem;
-  line-height: var(--vh-typeset-leading);
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
 .vh-typeset > * {
   margin-block: 0;
 }
@@ -212,2351 +137,2526 @@
   contain: layout style;
 }
 
-.vh-attachment,
-.vh-prompt__attachment {
-  align-items: center;
-  background: var(--vh-ui-bg-elevated);
-  border: 1px solid var(--vh-ui-border);
-  border-radius: var(--vh-ui-radius);
-  color: inherit;
-  display: inline-flex;
-  gap: 0.5rem;
-  max-width: 16rem;
-  padding: 0.375rem;
-  text-decoration: none;
+.vh-typeset p:has(> .vh-image-preview:only-child) {
+  display: inline-block;
+  margin: 0.5rem 0.5rem 0 0;
+  max-width: calc(50% - 0.5rem);
+  vertical-align: top;
 }
 
-.vh-attachment__preview {
-  aspect-ratio: 1;
-  border-radius: calc(var(--vh-ui-radius) * 0.7);
-  height: 2.5rem;
-  object-fit: cover;
+.vh-image-overlay {
+  background: rgb(0 0 0 / 80%);
+  z-index: 59;
 }
 
-.vh-attachment__name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.vh-image-dialog {
+  background: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  max-height: 92dvh;
+  max-width: 92vw;
+  overflow: visible;
+  width: max-content;
+  z-index: 60;
 }
 
-.vh-tool-value,
-.vh-trace__attributes {
-  font-size: 0.75rem;
-  margin: 0;
-  max-height: 18rem;
-  overflow: auto;
-  white-space: pre-wrap;
+.vh-image-dialog__action {
+  color: white;
+  flex: none;
 }
 
-.vh-prompt__attachments {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
+.vh-image-dialog__action:hover {
+  background: rgb(255 255 255 / 10%);
 }
 
-.vh-prompt__attachment button {
-  appearance: none;
-  background: transparent;
-  border: 0;
-  color: var(--vh-ui-muted);
-  cursor: pointer;
-  font: inherit;
+/*
+ * Primitive rail: the narrow icon column that ViteHub docs and the Console share.
+ * The rail always takes 3.5rem of the layout. Its surface expands over the next element to show the labels,
+ * so the page never moves. Icons keep their position: each item starts with an icon box the size of the collapsed square.
+ */
+.vh-primitive-rail {
+  /* The inset centers the square in the rail width minus the 1px border. */
+  --vh-primitive-rail-inset: calc((3.5rem - 1px - var(--vh-primitive-rail-item)) / 2);
+  --vh-primitive-rail-item: 2.25rem;
+  box-sizing: border-box;
+  flex: none;
+  height: 100%;
+  min-height: 0;
+  position: relative;
+  width: 3.5rem;
+  /* Above the next element in the page, below the site header and the popovers. */
+  z-index: 10;
 }
 
-.vh-prompt__attachment--image {
-  border-radius: calc(var(--vh-ui-radius) * 1.25);
-  flex: 0 0 4rem;
-  height: 4rem;
+.vh-primitive-rail__surface {
+  background: var(--vh-ui-bg-muted);
+  border-inline-end: 1px solid var(--vh-ui-border);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  inset-block: 0;
+  inset-inline-start: 0;
   overflow: hidden;
-  padding: 0;
-  position: relative;
-  width: 4rem;
+  padding-block: 0.5rem;
+  position: absolute;
+  width: 100%;
 }
 
-.vh-prompt__attachment-preview {
-  height: 100%;
-  object-fit: cover;
-  width: 100%;
+.vh-primitive-rail[data-expanded] .vh-primitive-rail__surface {
+  width: 13.5rem;
 }
 
-.vh-prompt__attachment--image button {
-  align-items: center;
-  background: color-mix(in oklab, black 65%, transparent);
-  border-radius: 9999px;
-  color: white;
-  display: flex;
-  height: 1.25rem;
-  justify-content: center;
-  line-height: 1;
-  position: absolute;
-  right: 0.25rem;
-  top: 0.25rem;
-  width: 1.25rem;
+.dark .vh-primitive-rail__surface {
+  background: #000;
 }
 
-.vh-prompt__footer {
-  align-items: center;
+.vh-primitive-rail__header,
+.vh-primitive-rail__footer {
   display: flex;
-  gap: 0.5rem;
-  width: 100%;
+  flex: none;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding-inline: var(--vh-primitive-rail-inset);
 }
 
-.vh-prompt__spacer {
-  flex: 1;
+.vh-primitive-rail__body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-inline: var(--vh-primitive-rail-inset);
+  scrollbar-width: none;
 }
 
-.vh-trace {
-  border: 1px solid var(--vh-ui-border);
-  border-radius: var(--vh-ui-radius);
+.vh-primitive-rail__body::-webkit-scrollbar {
+  display: none;
 }
 
-.vh-trace__trigger,
-.vh-trace__step-heading {
-  align-items: center;
+/* Items in a group are 0.125rem apart. Groups are 1rem apart, with the rule in the middle. */
+.vh-primitive-rail__group {
   display: flex;
-  gap: 0.75rem;
-  justify-content: space-between;
+  flex: none;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding-block: 0.5rem;
+  position: relative;
 }
 
-.vh-trace__duration {
-  color: var(--vh-ui-dimmed);
-  font-size: 0.75rem;
+/* The rule stays centered under the icons when the rail expands. */
+.vh-primitive-rail__group + .vh-primitive-rail__group::before {
+  background: var(--vh-ui-border);
+  content: "";
+  height: 1px;
+  inset-block-start: 0;
+  inset-inline-start: calc(var(--vh-primitive-rail-item) / 2 - 0.625rem);
+  position: absolute;
+  width: 1.25rem;
 }
 
-.vh-trace__trigger {
+/* The item fills the column, so it is a square when the rail is collapsed and a row when it is expanded. */
+.vh-primitive-rail__item {
+  align-items: center;
   appearance: none;
   background: transparent;
   border: 0;
-  color: inherit;
+  border-radius: calc(var(--vh-ui-radius) * 0.75);
+  box-sizing: border-box;
+  color: var(--vh-ui-muted);
   cursor: pointer;
-  padding: 0.75rem;
-  text-align: start;
+  display: flex;
+  flex: none;
+  font: inherit;
+  height: var(--vh-primitive-rail-item);
+  justify-content: flex-start;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  text-decoration: none;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
   width: 100%;
 }
 
-.vh-trace__title {
-  flex: 1;
+.vh-primitive-rail__icon {
+  align-items: center;
+  display: flex;
+  flex: none;
+  height: 100%;
+  justify-content: center;
+  width: var(--vh-primitive-rail-item);
 }
 
-.vh-trace__steps {
-  border-block-start: 1px solid var(--vh-ui-border);
-  display: grid;
+/* The label shows only when the rail is expanded. The item's aria-label holds the same text. */
+.vh-primitive-rail__label {
+  flex: 1 1 auto;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  min-width: 0;
+  opacity: 0;
+  overflow: hidden;
+  padding-inline-end: 0.5rem;
+  text-align: start;
+  text-overflow: ellipsis;
+  transition: opacity 150ms ease;
+  white-space: nowrap;
 }
 
-.vh-trace__step {
-  padding: 0.75rem;
+.vh-primitive-rail[data-expanded] .vh-primitive-rail__label {
+  opacity: 1;
 }
 
-.vh-trace__step + .vh-trace__step {
-  border-block-start: 1px solid var(--vh-ui-border);
+/* Under reduced motion the surface opens and closes at once. The labels still fade. */
+@media (prefers-reduced-motion: no-preference) {
+  .vh-primitive-rail__surface {
+    transition: width 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
 }
 
-.vh-invocation-list {
-  min-height: 0;
-  min-width: 0;
-  overflow-y: auto;
-  overscroll-behavior-y: contain;
-  scrollbar-gutter: stable;
+/* Escape and a menu trigger close the rail at once, so a menu opens next to an icon that does not move. */
+.vh-primitive-rail[data-dismissed] .vh-primitive-rail__surface {
+  transition: none;
 }
 
-.vh-invocation-list ul {
-  display: grid;
-  gap: 0.125rem;
-  list-style: none;
-  margin: 0;
-  padding: 0;
+.vh-primitive-rail__item:focus-visible {
+  color: var(--vh-ui-highlighted);
+  outline: 2px solid var(--vh-ui-highlighted);
+  outline-offset: -2px;
 }
 
-.vh-invocation-list__groups {
-  display: grid;
-  gap: 0.25rem;
+.vh-primitive-rail__item[aria-current="page"] {
+  background: var(--vh-ui-bg-accented);
+  color: var(--vh-ui-highlighted);
 }
 
-.vh-invocation-list__group {
-  min-width: 0;
+.vh-primitive-rail__item:disabled {
+  cursor: default;
+  opacity: 0.6;
 }
 
-.vh-invocation-list__group-heading {
-  align-items: center;
-  color: color-mix(in oklab, var(--vh-ui-muted) 88%, var(--vh-ui-text));
-  display: flex;
-  font-size: 0.6875rem;
-  font-weight: 650;
-  gap: 0.375rem;
-  letter-spacing: 0.04em;
-  min-height: 1.75rem;
-  padding: 0.25rem 0.75rem;
-  text-transform: uppercase;
-  user-select: none;
-}
+@media (hover: hover) {
+  .vh-primitive-rail__item:hover {
+    background: var(--vh-ui-bg-elevated);
+    color: var(--vh-ui-highlighted);
+  }
 
-.vh-invocation-list__group--collapsible > summary {
-  cursor: pointer;
-  list-style: none;
+  .vh-primitive-rail__item[aria-current="page"]:hover {
+    background: var(--vh-ui-bg-accented);
+  }
 }
 
-.vh-invocation-list__group--collapsible > summary::-webkit-details-marker {
-  display: none;
+/* Touch targets grow to 2.75rem. The icon keeps its size, and the rail keeps its width. */
+@media (pointer: coarse) {
+  .vh-primitive-rail {
+    --vh-primitive-rail-item: 2.75rem;
+  }
 }
 
-.vh-invocation-list__group--collapsible > summary::before {
-  border-block-end: 1.5px solid currentColor;
-  border-inline-end: 1.5px solid currentColor;
-  content: "";
+.vh-primitive-icon {
+  display: block;
   flex: none;
-  height: 0.375rem;
-  margin-inline: 0.125rem 0.25rem;
-  transform: rotate(-45deg);
-  width: 0.375rem;
+  height: 1.125rem;
+  width: 1.125rem;
 }
 
-.vh-invocation-list__group--collapsible[open] > summary::before {
-  transform: rotate(45deg) translateY(-0.0625rem);
+.vh-primitive-icon__motion {
+  transform-box: view-box;
+  transform-origin: var(--vh-primitive-icon-origin, 12px 12px);
 }
 
-.vh-invocation-list__group--collapsible > summary:hover {
-  color: var(--vh-ui-text);
+/* Each icon moves once when a pointer enters or keyboard focus arrives. Nothing moves while idle. */
+@media (prefers-reduced-motion: no-preference) {
+  .vh-primitive-rail__item:focus-visible .vh-primitive-icon__motion {
+    animation: vh-primitive-icon 320ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
 }
 
-.vh-invocation-list__group--collapsible > summary:focus-visible {
-  border-radius: calc(var(--vh-ui-radius) * 0.8);
-  outline: 2px solid color-mix(in oklab, var(--ui-primary, #2563eb) 52%, transparent);
-  outline-offset: -2px;
+@media (hover: hover) and (prefers-reduced-motion: no-preference) {
+  .vh-primitive-rail__item:hover .vh-primitive-icon__motion {
+    animation: vh-primitive-icon 320ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
 }
 
-.vh-invocation-list__group-label {
-  flex: 1;
-  min-width: 0;
+@keyframes vh-primitive-icon {
+  50% {
+    opacity: var(--vh-primitive-icon-opacity, 1);
+    transform: var(--vh-primitive-icon-motion, none);
+  }
 }
 
-.vh-invocation-list__group-count {
-  color: var(--vh-ui-dimmed);
-  font-variant-numeric: tabular-nums;
-  font-weight: 550;
-  letter-spacing: 0;
+.vh-primitive-icon[data-icon="agent"] {
+  --vh-primitive-icon-motion: scaleY(0.2);
+  --vh-primitive-icon-origin: 12px 14.5px;
 }
 
-.vh-invocation-list ul.vh-invocation-list__virtual {
-  display: block;
-  position: relative;
-  width: 100%;
+.vh-primitive-icon[data-icon="auth"] {
+  --vh-primitive-icon-motion: translateY(-1.5px);
 }
 
-.vh-invocation-list__virtual > li {
-  inset-inline: 0;
-  padding-block-end: 0.125rem;
-  position: absolute;
-  top: 0;
+.vh-primitive-icon[data-icon="blob"] {
+  --vh-primitive-icon-motion: translate(1px, -1px);
 }
 
-.vh-invocation-list__item {
-  appearance: none;
-  background: transparent;
-  border: 0;
-  border-radius: calc(var(--vh-ui-radius) * 1.15);
-  box-sizing: border-box;
-  color: inherit;
-  cursor: pointer;
-  display: grid;
-  gap: 0.3rem;
-  height: 100%;
-  min-height: 4.875rem;
-  padding: 0.65rem 0.75rem;
-  text-align: start;
-  transition: background-color 120ms ease, color 120ms ease;
-  width: 100%;
+.vh-primitive-icon[data-icon="browser"] {
+  --vh-primitive-icon-motion: translate(1.5px, 1.5px);
 }
 
-.vh-invocation-list__virtual .vh-invocation-list__item {
-  grid-template-rows: repeat(4, minmax(0, auto));
-  overflow: hidden;
+.vh-primitive-icon[data-icon="channel"] {
+  --vh-primitive-icon-motion: translateX(1.5px);
 }
 
-.vh-invocation-list__item:hover {
-  background: color-mix(in oklab, var(--vh-ui-bg-elevated) 72%, transparent);
+.vh-primitive-icon[data-icon="connection"] {
+  --vh-primitive-icon-motion: translateY(1.5px);
 }
 
-.vh-invocation-list__item:focus-visible {
-  outline: 2px solid color-mix(in oklab, var(--ui-primary, #2563eb) 52%, transparent);
-  outline-offset: -2px;
+.vh-primitive-icon[data-icon="content"] {
+  --vh-primitive-icon-motion: translateX(1.5px);
 }
 
-.vh-invocation-list__item[aria-current="true"] {
-  background: var(--ui-bg-elevated, var(--vh-ui-bg-elevated));
-  box-shadow: inset 0 0 0 1px var(--vh-ui-border);
+.vh-primitive-icon[data-icon="database"] {
+  --vh-primitive-icon-motion: translateY(-1.5px);
 }
 
-.vh-invocation-list__context,
-.vh-invocation-list__state,
-.vh-invocation-list__meta,
-.vh-invocation-list__harness {
-  align-items: center;
-  display: flex;
-  min-width: 0;
+.vh-primitive-icon[data-icon="development"] {
+  --vh-primitive-icon-motion: rotate(14deg);
 }
 
-.vh-invocation-list__context {
-  color: color-mix(in oklab, var(--vh-ui-muted) 88%, var(--vh-ui-text));
-  gap: 0.4rem;
+.vh-primitive-icon[data-icon="email"] {
+  --vh-primitive-icon-motion: translateY(1.5px);
 }
 
-.vh-invocation-list__project-icon,
-.vh-invocation-list__state-icon {
-  align-items: center;
-  display: inline-flex;
-  flex: none;
-  justify-content: center;
+.vh-primitive-icon[data-icon="env"] {
+  --vh-primitive-icon-motion: rotate(-16deg);
+  --vh-primitive-icon-origin: 8px 16px;
 }
 
-.vh-invocation-list__project-icon svg {
-  height: 1rem;
-  stroke: currentColor;
-  stroke-width: 1.75;
-  width: 1rem;
+.vh-primitive-icon[data-icon="hosts"] {
+  --vh-primitive-icon-motion: translateY(-1.5px);
 }
 
-.vh-invocation-list__project {
-  flex: 1;
-  font-size: 0.75rem;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.vh-primitive-icon[data-icon="kv"] {
+  --vh-primitive-icon-motion: translateX(1.5px);
 }
 
-.vh-invocation-list__state {
-  color: color-mix(in oklab, var(--vh-ui-muted) 88%, var(--vh-ui-text));
-  flex: none;
-  font-size: 0.6875rem;
-  gap: 0.3rem;
+.vh-primitive-icon[data-icon="queue"] {
+  --vh-primitive-icon-motion: translateX(2px);
 }
 
-.vh-invocation-list__state time {
-  color: color-mix(in oklab, currentColor 82%, var(--vh-ui-text));
+.vh-primitive-icon[data-icon="rate-limit"] {
+  --vh-primitive-icon-motion: rotate(-70deg);
+  --vh-primitive-icon-origin: 12px 15px;
 }
 
-.vh-invocation-list__state-icon svg {
-  height: 0.875rem;
-  stroke: currentColor;
-  stroke-width: 1.8;
-  width: 0.875rem;
+.vh-primitive-icon[data-icon="realtime"] {
+  --vh-primitive-icon-motion: scale(1.12);
+  --vh-primitive-icon-opacity: 0.4;
 }
 
-.vh-invocation-list__item[data-status="running"] .vh-invocation-list__state {
-  color: color-mix(in oklab, var(--vh-ui-info) 42%, var(--vh-ui-text));
+.vh-primitive-icon[data-icon="reference"] {
+  --vh-primitive-icon-motion: skewY(-8deg);
+  --vh-primitive-icon-origin: 12px 12px;
 }
 
-.vh-invocation-list__item[data-status="running"] .vh-invocation-list__state-icon svg {
-  animation: vh-invocation-status-spin 800ms linear infinite;
+.vh-primitive-icon[data-icon="sandbox"] {
+  --vh-primitive-icon-motion: scale(0.7);
 }
 
-@keyframes vh-invocation-status-spin {
-  to {
-    transform: rotate(360deg);
-  }
+.vh-primitive-icon[data-icon="schedule"] {
+  --vh-primitive-icon-motion: translateX(4.5px);
 }
 
-.vh-invocation-list__item[data-status="completed"] .vh-invocation-list__state {
-  color: color-mix(in oklab, var(--vh-ui-success) 42%, var(--vh-ui-text));
+.vh-primitive-icon[data-icon="shell"] {
+  --vh-primitive-icon-opacity: 0;
 }
 
-.vh-invocation-list__item[data-status="failed"] .vh-invocation-list__state,
-.vh-invocation-list__item[data-status="failed"] .vh-invocation-list__description {
-  color: color-mix(in oklab, var(--vh-ui-error) 42%, var(--vh-ui-text));
+.vh-primitive-icon[data-icon="source"] {
+  --vh-primitive-icon-motion: translateY(1.5px);
 }
 
-.vh-invocation-list__title {
-  font-size: 0.875rem;
-  font-weight: 560;
-  line-height: 1.35;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.vh-primitive-icon[data-icon="start"] {
+  --vh-primitive-icon-motion: skewY(-10deg);
+  --vh-primitive-icon-origin: 6px 8px;
 }
 
-.vh-invocation-list__meta {
-  color: color-mix(in oklab, var(--vh-ui-muted) 88%, var(--vh-ui-text));
-  font-size: 0.6875rem;
-  gap: 0.5rem;
+.vh-primitive-icon[data-icon="ui"] {
+  --vh-primitive-icon-motion: translate(-1px, -1px);
 }
 
-.vh-invocation-list__branch {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.vh-primitive-icon[data-icon="usage"] {
+  --vh-primitive-icon-motion: scaleY(0.75);
+  --vh-primitive-icon-origin: 12px 16px;
 }
 
-.vh-invocation-list__harness {
-  flex: none;
-  gap: 0.25rem;
+.vh-primitive-icon[data-icon="workflow"] {
+  --vh-primitive-icon-motion: translateX(1.5px);
 }
 
-.vh-invocation-list__harness > span {
-  align-items: center;
-  display: inline-flex;
+.vh-primitive-icon[data-icon="workspace"] {
+  --vh-primitive-icon-motion: translateY(-1px);
 }
 
-.vh-invocation-list__harness svg {
-  height: 0.9rem;
-  stroke: currentColor;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 1.65;
-  width: 0.9rem;
-}
+/*
+ * shadcn/ui agentic parts: Message, Bubble, Marker, Trace, and Attachment.
+ * These rules translate the default classes of https://ui.shadcn.com/docs/components/trace and its siblings to Nuxt UI tokens:
+ * foreground is --ui-text-highlighted, muted-foreground is --ui-text-muted, secondary and muted are --ui-bg-elevated and --ui-bg-muted,
+ * primary-foreground is --ui-text-inverted, and destructive is --ui-error.
+ * They live in the components layer, so a utility class on a part, such as `class="max-w-sm"`, overrides them.
+ */
+@layer components {
+  /* shadcn/ui sweeps a shimmer over running and uploading titles. ViteHub avoids continuously repainting animations, so the title text carries that state. */
 
-.vh-invocation-list__description {
-  font-size: 0.6875rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  /* Message */
 
-.vh-invocation-list__empty,
-.vh-invocation-list__loading {
-  color: var(--vh-ui-dimmed);
-  font-size: 0.8125rem;
-  margin: 1rem 0;
-  text-align: center;
-}
+  :is([data-slot="message-group"], [data-slot="bubble-group"]) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 0;
+  }
 
-.vh-invocation-list__loading {
-  background: color-mix(in oklab, var(--vh-ui-bg) 88%, transparent);
-  bottom: 0;
-  margin: 0;
-  padding: 0.6rem;
-  position: sticky;
-}
+  [data-slot="message"][data-align] {
+    display: flex;
+    font-size: 0.875rem;
+    gap: 0.5rem;
+    line-height: 1.25rem;
+    min-width: 0;
+    position: relative;
+    width: 100%;
+  }
 
-.vh-invocation-session {
-  background: var(--vh-ui-bg);
-  container-type: inline-size;
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-  height: 100%;
-  min-height: 0;
-  min-width: 0;
-  overflow: hidden;
-}
+  [data-slot="message"][data-align="end"] {
+    flex-direction: row-reverse;
+  }
 
-.vh-invocation-session--headerless {
-  grid-template-rows: minmax(0, 1fr);
-}
+  [data-slot="message-avatar"] {
+    align-items: center;
+    align-self: flex-end;
+    background: var(--vh-ui-bg-elevated);
+    border-radius: 9999px;
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    min-width: 2rem;
+    overflow: hidden;
+    width: fit-content;
+  }
 
-.vh-invocation-header {
-  align-items: center;
-  border-block-end: 1px solid var(--vh-ui-border);
-  display: flex;
-  gap: 0.75rem;
-  justify-content: space-between;
-  min-height: 3.25rem;
-  padding: 0.55rem 0.8rem;
-}
+  [data-slot="message"][data-align]:has([data-slot="message-footer"]) [data-slot="message-avatar"] {
+    translate: 0 -2rem;
+  }
 
-.vh-invocation-header__breadcrumb {
-  align-items: center;
-  display: flex;
-  gap: 0.55rem;
-  min-width: 0;
-}
+  [data-slot="message-content"] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    min-width: 0;
+    overflow-wrap: break-word;
+    width: 100%;
+  }
 
-.vh-invocation-header__project-icon {
-  align-items: center;
-  color: var(--vh-ui-muted);
-  display: inline-flex;
-  flex: none;
-}
+  [data-slot="message"][data-align="end"] [data-slot="message-content"] > [data-slot] {
+    align-self: flex-end;
+  }
 
-.vh-invocation-header__project-icon svg {
-  height: 1rem;
-  stroke: currentColor;
-  stroke-width: 1.75;
-  width: 1rem;
-}
+  :is([data-slot="message-header"], [data-slot="message-footer"]) {
+    align-items: center;
+    color: var(--vh-ui-muted);
+    display: flex;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1rem;
+    max-width: 100%;
+    min-width: 0;
+    padding-inline: 0.75rem;
+  }
 
-.vh-invocation-header__project,
-.vh-invocation-header__separator {
-  color: var(--vh-ui-muted);
-  flex: none;
-  font-size: 0.8125rem;
-}
+  /* Without a framed bubble, the header and footer line up with the unframed content. */
+  [data-slot="message"][data-align]:is(:has([data-variant="ghost"]), :not(:has([data-slot="bubble"]))) :is([data-slot="message-header"], [data-slot="message-footer"]) {
+    padding-inline: 0;
+  }
 
-.vh-invocation-header h2 {
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.35;
-  margin: 0;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  [data-slot="message"][data-align="end"] [data-slot="message-footer"] {
+    justify-content: flex-end;
+  }
 
-.vh-invocation-thread {
-  height: 100%;
-  min-height: 0;
-  min-width: 0;
-  overflow-y: auto;
-  overscroll-behavior-y: contain;
-  scrollbar-gutter: stable;
-}
+  /* Bubble */
 
-.vh-invocation-thread__content {
-  margin-inline: auto;
-  max-width: 54rem;
-  min-height: 100%;
-  padding: 1.5rem 2rem 4rem;
-}
+  [data-slot="bubble"] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    max-width: 80%;
+    min-width: 0;
+    position: relative;
+    width: fit-content;
+  }
 
-.vh-invocation-session__error {
-  background: color-mix(in oklab, var(--vh-ui-error) 7%, transparent);
-  border: 1px solid color-mix(in oklab, var(--vh-ui-error) 22%, transparent);
-  border-radius: var(--vh-ui-radius);
-  color: var(--vh-ui-error);
-  display: grid;
-  font-size: 0.8125rem;
-  gap: 0.2rem;
-  margin-block-end: 1.5rem;
-  padding: 0.75rem 0.875rem;
-}
+  :is([data-slot="bubble"][data-align="end"], [data-slot="message"][data-align="end"] [data-slot="bubble"]) {
+    align-self: flex-end;
+  }
 
-.vh-invocation-activities {
-  display: flex;
-  flex-direction: column;
-  gap: 0.0625rem;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
+  [data-slot="bubble"][data-variant="ghost"] {
+    max-width: 100%;
+  }
 
-.vh-invocation-message {
-  min-width: 0;
-}
+  [data-slot="bubble-content"] {
+    border: 1px solid transparent;
+    border-radius: calc(var(--vh-ui-radius) * 1.5);
+    font-size: 0.875rem;
+    line-height: 1.625;
+    max-width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    padding: 0.5rem 0.75rem;
+    width: fit-content;
+  }
 
-.vh-invocation-message[data-role="assistant"] {
-  padding: 0.125rem 0.25rem 0.5rem;
-}
+  [data-slot="bubble"][data-align="end"] > [data-slot="bubble-content"] {
+    align-self: flex-end;
+  }
 
-.vh-invocation-message[data-role="user"] {
-  background: var(--vh-ui-bg-elevated);
-  border-radius: 1rem;
-  margin-block: 0.5rem 1rem;
-  margin-inline-start: 20%;
-  padding: 0.75rem;
-}
+  :is(a, button)[data-slot="bubble-content"] {
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    outline: none;
+    text-align: left;
+    text-decoration: none;
+    transition: background-color 150ms, color 150ms;
+  }
 
-.vh-invocation-message__body {
-  font-size: 0.9375rem;
-  line-height: 1.65;
-}
+  :is(a, button)[data-slot="bubble-content"]:focus-visible {
+    border-color: var(--vh-ui-primary);
+    box-shadow: 0 0 0 3px var(--vh-ui-ring);
+  }
 
-.vh-invocation-message__content {
-  min-width: 0;
-}
+  [data-slot="bubble"][data-variant="default"] > [data-slot="bubble-content"] {
+    background: var(--vh-ui-primary);
+    color: var(--vh-ui-inverted);
+  }
 
-.vh-invocation-message__content[data-collapsed="true"] {
-  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 1.75rem), transparent);
-  mask-image: linear-gradient(to bottom, black calc(100% - 1.75rem), transparent);
-  max-height: 10.5rem;
-  overflow: hidden;
-}
+  /* Hover colors apply only where a pointer can hover, so a tap on a touch screen does not leave them on, as on the primitive rail. */
+  @media (hover: hover) {
+    [data-slot="bubble"][data-variant="default"] > :is(a, button)[data-slot="bubble-content"]:hover {
+      background: color-mix(in oklab, var(--vh-ui-primary) 80%, transparent);
+    }
+  }
 
-.vh-invocation-message__more {
-  appearance: none;
-  background: transparent;
-  border: 0;
-  color: var(--vh-ui-muted);
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.75rem;
-  margin-block-start: 0.35rem;
-  padding: 0;
-  text-decoration: underline dotted;
-  text-underline-offset: 0.25rem;
-}
+  [data-slot="bubble"][data-variant="secondary"] > [data-slot="bubble-content"] {
+    background: var(--vh-ui-bg-elevated);
+    color: var(--vh-ui-highlighted);
+  }
 
-.vh-invocation-message__more:hover,
-.vh-invocation-message__more:focus-visible {
-  color: var(--vh-ui-text);
-}
+  [data-slot="bubble"][data-variant="muted"] > [data-slot="bubble-content"] {
+    background: var(--vh-ui-bg-muted);
+  }
 
-.vh-invocation-message[data-role="assistant"] .vh-invocation-message__body,
-.vh-invocation-message[data-role="user"] .vh-invocation-message__body {
-  --vh-typeset-flow: 0.65rem;
-  font-size: 0.875rem;
-  line-height: 1.625;
-}
+  @media (hover: hover) {
+    [data-slot="bubble"]:is([data-variant="secondary"], [data-variant="muted"]) > :is(a, button)[data-slot="bubble-content"]:hover {
+      background: color-mix(in oklab, var(--vh-ui-bg-elevated), var(--vh-ui-highlighted) 5%);
+    }
+  }
 
-.vh-invocation-message[data-role="assistant"] .vh-invocation-message__body {
-  margin-inline: 0;
-  padding-inline: 0;
-}
+  [data-slot="bubble"][data-variant="tinted"] > [data-slot="bubble-content"] {
+    background: color-mix(in oklab, var(--vh-ui-primary) 14%, var(--vh-ui-bg));
+    color: var(--vh-ui-highlighted);
+  }
 
-.vh-invocation-event {
-  border-radius: 0.375rem;
-  color: var(--vh-ui-muted);
-}
+  @media (hover: hover) {
+    [data-slot="bubble"][data-variant="tinted"] > :is(a, button)[data-slot="bubble-content"]:hover {
+      background: color-mix(in oklab, var(--vh-ui-primary) 22%, var(--vh-ui-bg));
+    }
+  }
 
-.vh-invocation-activity[data-kind="system"] {
-  background: color-mix(in oklab, var(--vh-ui-bg-elevated) 52%, transparent);
-  border: 1px solid var(--vh-ui-border);
-  border-radius: calc(var(--vh-ui-radius) * 1.1);
-  margin-block: 0.3rem;
-  padding: 0.4rem 0.5rem;
-}
+  [data-slot="bubble"][data-variant="outline"] > [data-slot="bubble-content"] {
+    background: var(--vh-ui-bg);
+    border-color: var(--vh-ui-border);
+  }
 
-.vh-invocation-preparation {
-  background: color-mix(in oklab, var(--vh-ui-bg-elevated) 28%, transparent);
-  border: 1px solid var(--vh-ui-border);
-  border-radius: calc(var(--vh-ui-radius) * 1.1);
-  list-style: none;
-  margin-block: 0.3rem 1rem;
-  overflow: hidden;
-}
+  [data-slot="bubble"][data-variant="ghost"] > [data-slot="bubble-content"] {
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+  }
 
-.vh-invocation-preparation__details,
-.vh-invocation-preparation__summary {
-  width: 100%;
-}
+  @media (hover: hover) {
+    [data-slot="bubble"]:is([data-variant="outline"], [data-variant="ghost"]) > :is(a, button)[data-slot="bubble-content"]:hover {
+      background: var(--vh-ui-bg-elevated);
+      color: var(--vh-ui-highlighted);
+    }
+  }
 
-.vh-invocation-preparation__summary {
-  align-items: center;
-  color: var(--vh-ui-muted);
-  cursor: pointer;
-  display: flex;
-  gap: 0.25rem;
-  list-style: none;
-  min-height: 1.75rem;
-  padding: 0.125rem 0.375rem;
-  user-select: none;
-}
+  [data-slot="bubble"][data-variant="destructive"] > [data-slot="bubble-content"] {
+    background: color-mix(in oklab, var(--vh-ui-error) 12%, transparent);
+    color: var(--vh-ui-error);
+  }
 
-.vh-invocation-preparation__summary::-webkit-details-marker {
-  display: none;
-}
+  @media (hover: hover) {
+    [data-slot="bubble"][data-variant="destructive"] > :is(a, button)[data-slot="bubble-content"]:hover {
+      background: color-mix(in oklab, var(--vh-ui-error) 20%, transparent);
+    }
+  }
 
-.vh-invocation-preparation__summary:focus-visible {
-  outline: 2px solid color-mix(in oklab, var(--ui-primary, #2563eb) 55%, transparent);
-  outline-offset: -2px;
-}
+  [data-slot="bubble-reactions"] {
+    align-items: center;
+    background: var(--vh-ui-bg-elevated);
+    border-radius: 9999px;
+    box-shadow: 0 0 0 3px var(--vh-ui-bg);
+    display: flex;
+    flex-shrink: 0;
+    font-size: 0.875rem;
+    gap: 0.25rem;
+    justify-content: center;
+    padding: 0.125rem 0.375rem;
+    position: absolute;
+    width: fit-content;
+    z-index: 10;
+  }
 
-.vh-invocation-preparation__summary > strong {
-  color: var(--vh-ui-text);
-  flex: 0 0 auto;
-  font-size: 0.75rem;
-  font-weight: 550;
-}
+  [data-slot="bubble-reactions"]:has(button) {
+    padding: 0;
+  }
 
-.vh-invocation-preparation__summary > code {
-  color: var(--vh-ui-dimmed);
-  flex: 1;
-  font-size: 0.6875rem;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  [data-slot="bubble-reactions"][data-side="top"] {
+    top: 0;
+    translate: 0 -75%;
+  }
 
-.vh-invocation-preparation__summary > small {
-  color: var(--vh-ui-dimmed);
-  flex: 0 0 auto;
-  font-size: 0.625rem;
-}
+  [data-slot="bubble-reactions"][data-side="bottom"] {
+    bottom: 0;
+    translate: 0 75%;
+  }
 
-.vh-invocation-preparation__disclosure {
-  height: 0.75rem;
-  opacity: 0.65;
-  stroke: currentColor;
-  stroke-width: 2;
-  transition: transform 140ms ease;
-  width: 0.75rem;
-}
+  [data-slot="bubble-reactions"][data-align="start"] {
+    left: 0.75rem;
+  }
 
-.vh-invocation-preparation__details[open] .vh-invocation-preparation__disclosure {
-  transform: rotate(180deg);
-}
+  [data-slot="bubble-reactions"][data-align="end"] {
+    right: 0.75rem;
+  }
 
-.vh-invocation-preparation__steps {
-  display: grid;
-  list-style: none;
-  margin: 0;
-  padding: 0 0 0.1875rem;
-}
+  /* Marker */
+
+  [data-slot="marker"] {
+    align-items: center;
+    color: var(--vh-ui-muted);
+    display: flex;
+    font-size: 0.875rem;
+    gap: 0.5rem;
+    line-height: 1.25rem;
+    min-height: 1rem;
+    position: relative;
+    text-align: left;
+    width: 100%;
+  }
 
-.vh-invocation-preparation__steps > li {
-  align-items: center;
-  color: var(--vh-ui-muted);
-  display: grid;
-  gap: 0.25rem;
-  grid-template-columns: auto auto minmax(0, 1fr) auto;
-  min-height: 1.5rem;
-  padding: 0 0.375rem;
-}
+  [data-slot="marker"] :is(svg, .iconify):not([class*="size-"]),
+  [data-slot="marker-icon"] {
+    flex-shrink: 0;
+    height: 1rem;
+    width: 1rem;
+  }
 
-.vh-invocation-preparation__body,
-.vh-invocation-preparation__steps .vh-invocation-event__notice {
-  grid-column: 2 / -1;
-  margin: 0 0 0.375rem;
-}
+  :is(a[data-slot="marker"], [data-slot="marker-content"] > a) {
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
 
-.vh-invocation-preparation__body {
-  color: var(--vh-ui-dimmed);
-  font-size: 0.75rem;
-  white-space: pre-wrap;
-}
+  @media (hover: hover) {
+    :is(a[data-slot="marker"], [data-slot="marker-content"] > a):hover {
+      color: var(--vh-ui-highlighted);
+    }
+  }
 
-.vh-invocation-preparation__steps strong {
-  color: var(--vh-ui-text);
-  flex: 0 0 auto;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
+  [data-slot="marker"][data-variant="separator"]::before,
+  [data-slot="marker"][data-variant="separator"]::after {
+    background: var(--vh-ui-border);
+    content: "";
+    flex: 1;
+    height: 1px;
+    min-width: 0;
+  }
 
-.vh-invocation-preparation__steps code {
-  color: var(--vh-ui-dimmed);
-  flex: 0 1 auto;
-  font-size: 0.6875rem;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  [data-slot="marker"][data-variant="separator"]::before {
+    margin-right: 0.25rem;
+  }
 
-.vh-invocation-preparation__context {
-  align-items: center;
-  color: var(--vh-ui-dimmed);
-  display: inline-flex;
-  flex: 0 1 auto;
-  font-size: 0.6875rem;
-  gap: 0.25rem;
-  min-width: 0;
-  overflow: hidden;
-  white-space: nowrap;
-}
+  [data-slot="marker"][data-variant="separator"]::after {
+    margin-left: 0.25rem;
+  }
 
-.vh-invocation-preparation__summary > .vh-invocation-preparation__context {
-  flex: 1;
-}
+  [data-slot="marker"][data-variant="border"] {
+    border-bottom: 1px solid var(--vh-ui-border);
+    padding-bottom: 0.5rem;
+  }
 
-.vh-invocation-preparation__context code {
-  flex: 0 1 auto;
-}
+  [data-slot="marker-content"] {
+    min-width: 0;
+    overflow-wrap: break-word;
+  }
 
-.vh-invocation-preparation__context a {
-  color: inherit;
-  flex: 0 0 auto;
-  text-decoration: none;
-}
+  [data-slot="marker"][data-variant="separator"] [data-slot="marker-content"] {
+    flex: none;
+    text-align: center;
+  }
 
-.vh-invocation-preparation__context a:hover,
-.vh-invocation-preparation__context a:focus-visible {
-  color: var(--vh-ui-text);
-  text-decoration: underline;
-  text-underline-offset: 0.2em;
-}
+  /* Trace */
 
-.vh-invocation-preparation__action {
-  align-items: center;
-  appearance: none;
-  background: transparent;
-  border: 0;
-  border-radius: 0.25rem;
-  color: var(--vh-ui-muted);
-  cursor: pointer;
-  display: inline-flex;
-  flex: 0 0 1.25rem;
-  height: 1.25rem;
-  justify-content: center;
-  padding: 0;
-  text-decoration: none;
-  width: 1.25rem;
-}
+  [data-slot="trace"] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 0;
+    width: 100%;
+  }
 
-.vh-invocation-preparation__action:hover,
-.vh-invocation-preparation__action:focus-visible {
-  color: var(--vh-ui-text);
-  outline: none;
-}
+  [data-slot="trace"] > :has(> [data-slot="trace-line"]) {
+    border-radius: calc(var(--vh-ui-radius) * 0.75);
+    display: flex;
+    max-width: 100%;
+    min-width: 0;
+    outline: none;
+    text-align: left;
+    width: fit-content;
+  }
 
-.vh-invocation-preparation__action .vh-invocation-event__icon {
-  height: 1rem;
-  width: 1rem;
-}
+  [data-slot="trace"] > :has(> [data-slot="trace-line"]):focus-visible {
+    box-shadow: 0 0 0 3px var(--vh-ui-ring);
+  }
 
-.vh-invocation-preparation__action .vh-invocation-event__icon svg {
-  height: 0.8rem;
-  width: 0.8rem;
-}
+  [data-slot="trace-line"] {
+    align-items: center;
+    color: var(--vh-ui-muted);
+    display: flex;
+    font-size: 0.875rem;
+    gap: 0.5rem;
+    line-height: 1.25rem;
+    max-width: 100%;
+    min-width: 0;
+    transition: color 150ms;
+    width: fit-content;
+  }
 
-.vh-invocation-activity[data-inspectable="true"] .vh-invocation-event__summary {
-  cursor: pointer;
-}
+  :is(a, button) [data-slot="trace-line"] {
+    cursor: pointer;
+  }
 
-.vh-invocation-lifecycle {
-  background: color-mix(in oklab, var(--vh-ui-bg-elevated) 28%, transparent);
-  border: 1px solid var(--vh-ui-border);
-  border-radius: calc(var(--vh-ui-radius) * 1.1);
-  list-style: none;
-  margin-block: 0.3rem 1rem;
-  overflow: hidden;
-}
+  @media (hover: hover) {
+    :is(a, button):hover [data-slot="trace-line"] {
+      color: var(--vh-ui-highlighted);
+    }
+  }
 
-.vh-invocation-lifecycle__rows {
-  display: grid;
-  list-style: none;
-  margin: 0;
-  padding: 0.1875rem 0;
-}
+  [data-slot="trace-line"][data-status="error"],
+  :is(a, button):hover [data-slot="trace-line"][data-status="error"] {
+    color: var(--vh-ui-error);
+  }
 
-.vh-invocation-lifecycle__rows > li {
-  min-width: 0;
-}
+  [data-slot="trace-line"][data-status="pending"] {
+    opacity: 0.6;
+  }
 
-.vh-invocation-lifecycle__row {
-  align-items: center;
-  appearance: none;
-  background: transparent;
-  border: 0;
-  color: var(--vh-ui-muted);
-  display: flex;
-  font: inherit;
-  gap: 0.25rem;
-  min-height: 1.5rem;
-  min-width: 0;
-  padding: 0 0.375rem;
-  text-align: start;
-  width: 100%;
-}
+  [data-slot="trace-icon"] {
+    align-items: center;
+    display: flex;
+    flex-shrink: 0;
+    height: 1rem;
+    justify-content: center;
+    width: 1rem;
+  }
 
-button.vh-invocation-lifecycle__row {
-  cursor: pointer;
-}
+  [data-slot="trace-icon"] svg {
+    pointer-events: none;
+  }
 
-button.vh-invocation-lifecycle__row:hover,
-button.vh-invocation-lifecycle__row:focus-visible {
-  color: var(--vh-ui-text);
-}
+  [data-slot="trace-icon"] :is(svg, .iconify):not([class*="size-"]) {
+    height: 1rem;
+    width: 1rem;
+  }
 
-button.vh-invocation-lifecycle__row:focus-visible {
-  outline: 1px solid color-mix(in oklab, var(--ui-primary, #2563eb) 55%, transparent);
-  outline-offset: -1px;
-}
+  [data-slot="trace-title"] ~ [data-slot="trace-icon"] {
+    margin-left: -0.25rem;
+  }
 
-.vh-invocation-lifecycle__title {
-  color: var(--vh-ui-text);
-  flex: 0 0 auto;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
+  [data-slot="trace-title"] {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-.vh-invocation-lifecycle__detail {
-  color: var(--vh-ui-dimmed);
-  flex: 1;
-  font-size: 0.6875rem;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  [data-slot="trace-description"] {
+    color: color-mix(in oklab, var(--vh-ui-muted) 70%, transparent);
+    flex-shrink: 0;
+    font-variant-numeric: tabular-nums;
+  }
 
-.vh-invocation-lifecycle__failure {
-  color: var(--vh-ui-error);
-  flex: 1;
-  font-size: 0.6875rem;
-  min-width: 0;
-}
+  [data-slot="trace-collapsible"] {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    width: 100%;
+  }
 
-.vh-invocation-lifecycle__emoji {
-  align-items: center;
-  display: inline-flex;
-  flex: 0 0 1.25rem;
-  font-size: 0.75rem;
-  height: 1.25rem;
-  justify-content: center;
-  line-height: 1;
-  width: 1.25rem;
-}
+  [data-slot="trace-collapsible-trigger"] {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: calc(var(--vh-ui-radius) * 0.75);
+    color: var(--vh-ui-muted);
+    cursor: pointer;
+    display: flex;
+    font: inherit;
+    gap: 0.25rem;
+    max-width: 100%;
+    min-width: 0;
+    outline: none;
+    padding: 0;
+    text-align: left;
+    transition: color 150ms;
+    width: fit-content;
+  }
 
-.vh-invocation-lifecycle__label {
-  background: var(--vh-invocation-label-bg, var(--vh-ui-border));
-  border: 1px solid color-mix(in srgb, var(--vh-invocation-label-bg, var(--vh-ui-border)) 80%, #000000);
-  border-radius: 999px;
-  color: var(--vh-invocation-label-fg, var(--vh-ui-text));
-  flex: 0 1 auto;
-  font-size: 0.625rem;
-  font-weight: 550;
-  line-height: 1rem;
-  max-width: 100%;
-  overflow: hidden;
-  padding-inline: 0.4rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  @media (hover: hover) {
+    [data-slot="trace-collapsible-trigger"]:hover {
+      color: var(--vh-ui-highlighted);
+    }
+  }
 
-[data-slot="invocation"] [data-activity-id][data-selected="true"] {
-  background: color-mix(in oklab, var(--vh-ui-info) 9%, transparent);
-  border-radius: calc(var(--vh-ui-radius) * 0.85);
-  outline: 2px solid color-mix(in oklab, var(--vh-ui-info) 42%, transparent);
-  outline-offset: 2px;
-  scroll-margin-block: 5rem;
-}
+  [data-slot="trace-collapsible-trigger"]:focus-visible {
+    box-shadow: 0 0 0 3px var(--vh-ui-ring);
+  }
 
-.vh-invocation-event__summary {
-  align-items: center;
-  border-radius: inherit;
-  cursor: pointer;
-  display: flex;
-  gap: 0.375rem;
-  min-height: 1.5rem;
-  padding: 0.125rem;
-  transition: background-color 140ms ease, color 140ms ease;
-}
+  [data-slot="trace-collapsible-trigger"]:has([data-status="error"]) {
+    color: var(--vh-ui-error);
+  }
 
-button.vh-invocation-event__summary {
-  appearance: none;
-  background: transparent;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  text-align: start;
-  width: 100%;
-}
+  [data-trace-chevron] svg {
+    stroke: currentColor;
+    stroke-width: 2;
+    transition: rotate 150ms;
+  }
 
-.vh-invocation-event__summary::-webkit-details-marker {
-  display: none;
-}
+  [data-slot="trace-collapsible-trigger"][aria-expanded="true"] [data-trace-chevron] svg {
+    rotate: 90deg;
+  }
 
-.vh-invocation-event__summary:focus-visible {
-  background: color-mix(in oklab, var(--vh-ui-bg-elevated) 55%, transparent);
-  color: inherit;
-  outline: 1px solid color-mix(in oklab, var(--ui-primary, #2563eb) 55%, transparent);
-  outline-offset: 1px;
-}
+  [data-slot="trace-collapsible-content"] {
+    min-width: 0;
+    overflow: hidden;
+  }
 
-details.vh-invocation-event > .vh-invocation-event__summary:hover {
-  color: var(--vh-ui-text);
-}
+  [data-slot="trace-collapsible-content"][data-state="open"] {
+    animation: vh-trace-open 200ms ease-out;
+  }
 
-.vh-invocation-event__icon {
-  align-items: center;
-  display: inline-flex;
-  flex: 0 0 1.25rem;
-  height: 1.25rem;
-  justify-content: center;
-  position: relative;
-  width: 1.25rem;
-}
+  [data-slot="trace-collapsible-content"][data-state="closed"] {
+    animation: vh-trace-close 200ms ease-out;
+  }
 
-.vh-invocation-event__icon svg {
-  height: 0.875rem;
-  opacity: 0.65;
-  stroke: currentColor;
-  stroke-width: 1.65;
-  width: 0.875rem;
-}
+  @keyframes vh-trace-open {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--reka-collapsible-content-height);
+    }
+  }
 
-.vh-invocation-event__icon[data-icon="activity"] > svg:first-child {
-  stroke-width: 5;
-}
+  @keyframes vh-trace-close {
+    from {
+      height: var(--reka-collapsible-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
 
-.vh-invocation-event__failure-icon {
-  background: var(--vh-ui-bg);
-  border-radius: 999px;
-  bottom: -0.05rem;
-  color: var(--vh-ui-text);
-  height: 0.65rem !important;
-  opacity: 0.86 !important;
-  position: absolute;
-  right: -0.05rem;
-  stroke: none !important;
-  width: 0.65rem !important;
-}
+  @media (prefers-reduced-motion: reduce) {
+    [data-slot="trace-collapsible-content"] {
+      animation: none !important;
+    }
+  }
 
-.vh-invocation-event__title {
-  flex: none;
-  font-size: 0.75rem;
-  font-weight: 550;
-  line-height: 1.25rem;
-}
+  [data-slot="trace-collapsible-content-inner"] {
+    border-left: 1px solid var(--vh-ui-border);
+    color: var(--vh-ui-muted);
+    line-height: 1.625;
+    margin: 0.5rem 0 0.25rem calc(0.5rem - 1px);
+    min-width: 0;
+    overflow-wrap: break-word;
+    padding-left: 1rem;
+    padding-right: 0.25rem;
+  }
 
-.vh-invocation-event__suffix {
-  color: var(--vh-ui-dimmed);
-  flex: 1;
-  font-size: 0.75rem;
-  font-weight: 400;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  /* Attachment */
 
-.vh-invocation-event__disclosure {
-  color: var(--vh-ui-dimmed);
-  flex: 0 0 0.75rem;
-  height: 0.75rem;
-  opacity: 0.65;
-  transform: rotate(0);
-  transition: opacity 140ms ease, transform 140ms ease;
-  width: 0.75rem;
-}
+  [data-slot="attachment"] {
+    background: var(--vh-ui-bg);
+    border: 1px solid var(--vh-ui-border);
+    border-radius: calc(var(--vh-ui-radius) * 1.5);
+    color: var(--vh-ui-text);
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    max-width: 100%;
+    min-width: 0;
+    position: relative;
+    transition: background-color 150ms, border-color 150ms;
+    width: fit-content;
+  }
 
-.vh-invocation-event[open] .vh-invocation-event__disclosure {
-  transform: rotate(180deg);
-}
+  /* The trigger covers the attachment and hides its own outline, so the attachment shows the ring of the other parts. */
+  [data-slot="attachment"]:has([data-slot="attachment-trigger"]:focus-visible) {
+    box-shadow: 0 0 0 3px var(--vh-ui-ring);
+  }
 
-.vh-invocation-work {
-  margin-block-end: 1rem;
-  padding-block-start: 0.25rem;
-}
+  [data-slot="attachment"]:has(> a, > button):hover {
+    background: color-mix(in oklab, var(--vh-ui-bg-elevated) 50%, var(--vh-ui-bg));
+  }
 
-.vh-invocation-work__details {
-  color: var(--vh-ui-muted);
-}
+  [data-slot="attachment"][data-state="error"] {
+    border-color: color-mix(in oklab, var(--vh-ui-error) 30%, transparent);
+  }
 
-.vh-invocation-work__summary {
-  align-items: center;
-  border-radius: 0.375rem;
-  cursor: pointer;
-  display: flex;
-  gap: 0.25rem;
-  line-height: 1.25rem;
-  list-style: none;
-  padding: 0 0.25rem;
-  user-select: none;
-  width: fit-content;
-}
+  [data-slot="attachment"][data-state="idle"] {
+    border-style: dashed;
+  }
 
-.vh-invocation-work__summary::-webkit-details-marker {
-  display: none;
-}
+  [data-slot="attachment"][data-size="default"] {
+    font-size: 0.875rem;
+    gap: 0.5rem;
+    line-height: 1.25rem;
+  }
 
-.vh-invocation-work__summary:focus-visible {
-  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--ui-primary, #2563eb) 70%, transparent);
-  outline: none;
-}
+  [data-slot="attachment"][data-size="default"]:has([data-slot="attachment-media"]) {
+    padding: 0.5rem;
+  }
 
-.vh-invocation-work__divider {
-  border-block-start: 1px solid color-mix(in oklab, var(--vh-ui-border) 60%, transparent);
-  margin-block-start: 0.5rem;
-}
+  [data-slot="attachment"][data-size="default"]:has([data-slot="attachment-content"]) {
+    padding: 0.5rem 0.625rem;
+  }
 
-.vh-invocation-work__title {
-  font-size: 0.75rem;
-  font-variant-numeric: tabular-nums;
-}
+  [data-slot="attachment"][data-size="sm"] {
+    font-size: 0.75rem;
+    gap: 0.625rem;
+    line-height: 1rem;
+  }
 
-.vh-invocation-work__disclosure {
-  height: 0.875rem;
-  opacity: 0.7;
-  stroke: currentColor;
-  stroke-width: 2;
-  transition: transform 150ms ease;
-  width: 0.875rem;
-}
+  [data-slot="attachment"][data-size="sm"]:has([data-slot="attachment-media"]) {
+    padding: 0.375rem;
+  }
 
-.vh-invocation-work__details[open] .vh-invocation-work__disclosure {
-  transform: rotate(180deg);
-}
+  [data-slot="attachment"][data-size="sm"]:has([data-slot="attachment-content"]) {
+    padding: 0.375rem 0.5rem;
+  }
 
-.vh-invocation-work__activities {
-  display: flex;
-  flex-direction: column;
-  gap: 0.0625rem;
-  list-style: none;
-  margin: 1rem 0 0;
-  padding: 0;
-}
+  [data-slot="attachment"][data-size="xs"] {
+    border-radius: var(--vh-ui-radius);
+    font-size: 0.75rem;
+    gap: 0.375rem;
+    line-height: 1rem;
+  }
 
-.vh-invocation-work__details:not([open]) > .vh-invocation-work__activities {
-  display: none;
-}
+  [data-slot="attachment"][data-size="xs"]:has([data-slot="attachment-media"]) {
+    padding: 0.25rem;
+  }
 
-.vh-invocation-event__body,
-.vh-invocation-command,
-.vh-invocation-event__diffs,
-.vh-invocation-event__payloads {
-  border-inline-start: 1px solid var(--vh-ui-border);
-  margin: 0.25rem 0 0 1.75rem;
-  max-height: 16rem;
-  overflow: auto;
-  padding-inline-start: 0.75rem;
-}
+  [data-slot="attachment"][data-size="xs"]:has([data-slot="attachment-content"]) {
+    padding: 0.25rem 0.375rem;
+  }
 
-.vh-invocation-event__payloads {
-  display: grid;
-  gap: 0.625rem;
-}
+  [data-slot="attachment"][data-orientation="horizontal"] {
+    align-items: center;
+    min-width: 10rem;
+  }
 
-.vh-invocation-event__payload {
-  border: 1px solid color-mix(in oklab, var(--vh-ui-border) 78%, transparent);
-  border-radius: calc(var(--vh-ui-radius) * 0.9);
-  min-width: 0;
-  overflow: hidden;
-}
+  [data-slot="attachment"][data-orientation="vertical"] {
+    flex-direction: column;
+    width: 6rem;
+  }
 
-.vh-invocation-event__payload > summary {
-  align-items: center;
-  background: color-mix(in oklab, var(--vh-ui-bg-elevated) 65%, transparent);
-  cursor: pointer;
-  display: grid;
-  gap: 0.5rem;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  list-style: none;
-  min-height: 2.25rem;
-  padding: 0.45rem 0.65rem;
-}
+  [data-slot="attachment"][data-orientation="vertical"]:has([data-slot="attachment-content"]) {
+    width: 7.5rem;
+  }
 
-.vh-invocation-event__payload > summary::-webkit-details-marker {
-  display: none;
-}
+  [data-slot="attachment-media"] {
+    align-items: center;
+    aspect-ratio: 1;
+    background: var(--vh-ui-bg-elevated);
+    border-radius: var(--vh-ui-radius);
+    color: var(--vh-ui-highlighted);
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    width: 2.5rem;
+  }
 
-.vh-invocation-event__payload > summary:focus-visible {
-  outline: 2px solid color-mix(in oklab, var(--vh-ui-info) 55%, transparent);
-  outline-offset: -2px;
-}
+  [data-slot="attachment"][data-orientation="vertical"] [data-slot="attachment-media"] {
+    width: 100%;
+  }
 
-.vh-invocation-event__payload > summary strong {
-  color: var(--vh-ui-dimmed);
-  font-size: 0.6875rem;
-  font-weight: 650;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
+  [data-slot="attachment"][data-size="sm"] [data-slot="attachment-media"] {
+    width: 2rem;
+  }
 
-.vh-invocation-event__payload > summary code {
-  color: var(--vh-ui-muted);
-  font: 0.75rem/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  [data-slot="attachment"][data-size="xs"] [data-slot="attachment-media"] {
+    border-radius: calc(var(--vh-ui-radius) * 0.75);
+    width: 1.75rem;
+  }
 
-.vh-invocation-event__payload[open] > summary .vh-invocation-event__disclosure {
-  transform: rotate(180deg);
-}
+  [data-slot="attachment"][data-state="error"] [data-slot="attachment-media"] {
+    background: color-mix(in oklab, var(--vh-ui-error) 10%, transparent);
+    color: var(--vh-ui-error);
+  }
 
-.vh-invocation-payload__content {
-  border-block-start: 1px solid color-mix(in oklab, var(--vh-ui-border) 72%, transparent);
-  padding: 0.6rem;
-}
+  [data-slot="attachment-media"] svg {
+    pointer-events: none;
+  }
 
-.vh-invocation-payload__toolbar {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.4rem;
-  margin-block-end: 0.55rem;
-}
+  [data-slot="attachment-media"] :is(svg, .iconify):not([class*="size-"]) {
+    height: 1rem;
+    width: 1rem;
+  }
 
-.vh-invocation-payload__modes {
-  background: color-mix(in oklab, var(--vh-ui-bg-muted) 76%, transparent);
-  border-radius: calc(var(--vh-ui-radius) * 0.72);
-  display: inline-flex;
-  padding: 0.125rem;
-}
+  [data-slot="attachment"][data-orientation="vertical"] [data-slot="attachment-media"] :is(svg, .iconify):not([class*="size-"]) {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
 
-.vh-invocation-payload__toolbar button {
-  background: transparent;
-  border: 0;
-  border-radius: calc(var(--vh-ui-radius) * 0.6);
-  color: var(--vh-ui-muted);
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.6875rem;
-  min-height: 1.75rem;
-  padding: 0.25rem 0.5rem;
+  [data-slot="attachment"][data-size="xs"] [data-slot="attachment-media"] :is(svg, .iconify):not([class*="size-"]) {
+    height: 0.875rem;
+    width: 0.875rem;
+  }
+
+  [data-slot="attachment-media"][data-variant="image"] {
+    opacity: 0.6;
+  }
+
+  [data-slot="attachment"]:is([data-state="done"], [data-state="idle"]) [data-slot="attachment-media"][data-variant="image"] {
+    opacity: 1;
+  }
+
+  [data-slot="attachment-media"][data-variant="image"] > img {
+    aspect-ratio: 1;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  [data-slot="attachment-content"] {
+    flex: 1;
+    line-height: 1.25;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  [data-slot="attachment"][data-orientation="vertical"] [data-slot="attachment-content"] {
+    padding-inline: 0.25rem;
+  }
+
+  [data-slot="attachment-title"] {
+    display: block;
+    font-weight: 500;
+    max-width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-slot="attachment-description"] {
+    color: var(--vh-ui-muted);
+    display: block;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    margin-top: 0.125rem;
+    max-width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-slot="attachment"][data-state="error"] [data-slot="attachment-description"] {
+    color: color-mix(in oklab, var(--vh-ui-error) 80%, transparent);
+  }
+
+  [data-slot="attachment-actions"] {
+    align-items: center;
+    display: flex;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 20;
+  }
+
+  [data-slot="attachment"][data-orientation="vertical"] [data-slot="attachment-actions"] {
+    gap: 0.25rem;
+    position: absolute;
+    right: 0.75rem;
+    top: 0.75rem;
+  }
+
+  [data-slot="attachment-trigger"] {
+    background: transparent;
+    border: 0;
+    border-radius: inherit;
+    cursor: pointer;
+    inset: 0;
+    outline: none;
+    padding: 0;
+    position: absolute;
+    z-index: 10;
+  }
+
+  [data-slot="attachment-group"] {
+    display: flex;
+    gap: 0.75rem;
+    min-width: 0;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    padding-block: 0.25rem;
+    scroll-padding-inline: 0.25rem;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+  }
+
+  [data-slot="attachment-group"] > [data-slot="attachment"] {
+    flex: none;
+    scroll-snap-align: start;
+  }
 }
 
-.vh-invocation-payload__toolbar button:is(:hover, [aria-pressed="true"]) {
-  background: var(--vh-ui-bg-elevated);
-  color: var(--vh-ui-text);
-}
+/* shadcn/ui CodeBlock and Message Scroller parts, with the same token mapping as the parts above. */
+@layer components {
+  /* Code Block */
+
+  [data-slot="code-block"] {
+    border: 1px solid var(--vh-ui-border);
+    border-radius: var(--vh-ui-radius);
+    color: var(--vh-ui-highlighted);
+    display: flex;
+    flex-direction: column;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    min-width: 0;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+  }
+
+  :root.dark [data-slot="code-block"] {
+    background: color-mix(in oklab, var(--vh-ui-bg-elevated) 40%, transparent);
+  }
+
+  [data-slot="code-block"]:has(> [data-slot="code-block-content"]:focus-visible) {
+    border-color: var(--vh-ui-primary);
+    box-shadow: 0 0 0 3px var(--vh-ui-ring);
+  }
+
+  [data-slot="code-block"][data-size="sm"] {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  [data-slot="code-block"][data-variant="destructive"] {
+    border-color: color-mix(in oklab, var(--vh-ui-error) 30%, transparent);
+    color: var(--vh-ui-error);
+  }
+
+  [data-slot="code-block-header"],
+  [data-slot="code-block-footer"] {
+    align-items: center;
+    color: var(--vh-ui-muted);
+    display: flex;
+    flex-shrink: 0;
+    gap: 0.5rem;
+    min-width: 0;
+    padding-inline: 0.75rem;
+  }
+
+  [data-slot="code-block-header"] {
+    padding-top: 0.75rem;
+  }
+
+  [data-slot="code-block-footer"] {
+    padding-bottom: 0.75rem;
+  }
+
+  [data-slot="code-block"][data-size="sm"] :is([data-slot="code-block-header"], [data-slot="code-block-footer"]) {
+    padding-inline: 0.625rem;
+  }
+
+  [data-slot="code-block"][data-size="sm"] [data-slot="code-block-header"] {
+    padding-top: 0.625rem;
+  }
+
+  [data-slot="code-block"][data-size="sm"] [data-slot="code-block-footer"] {
+    padding-bottom: 0.625rem;
+  }
+
+  [data-slot="code-block"][data-variant="destructive"] :is([data-slot="code-block-header"], [data-slot="code-block-title"]) {
+    color: var(--vh-ui-error);
+  }
+
+  [data-slot="code-block-title"] {
+    color: var(--vh-ui-highlighted);
+    font-family: var(--font-sans, inherit);
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-slot="code-block"][data-size="sm"] [data-slot="code-block-title"] {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  [data-slot="code-block-title"] :is(svg, .iconify) {
+    display: inline-block;
+    margin-inline-end: 0.375rem;
+    pointer-events: none;
+    vertical-align: middle;
+  }
+
+  [data-slot="code-block-title"] :is(svg, .iconify):not([class*="size-"]) {
+    height: 0.875rem;
+    width: 0.875rem;
+  }
+
+  [data-slot="code-block-actions"] {
+    align-items: center;
+    display: flex;
+    flex-shrink: 0;
+    gap: 0.25rem;
+    margin: -0.25rem -0.375rem -0.25rem auto;
+  }
+
+  /* Actions placed directly in the block float over the code and show on hover or focus. */
+  [data-slot="code-block"] > [data-slot="code-block-actions"] {
+    margin: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0.5rem;
+    top: 0.5rem;
+    transition: opacity 150ms ease;
+    z-index: 10;
+  }
+
+  [data-slot="code-block"]:is(:hover, :focus-within) > [data-slot="code-block-actions"] {
+    opacity: 1;
+  }
+
+  @media (pointer: coarse) {
+    [data-slot="code-block"] > [data-slot="code-block-actions"] {
+      opacity: 1;
+    }
+  }
+
+  [data-slot="code-block"][data-size="sm"] > [data-slot="code-block-actions"] {
+    right: 0.375rem;
+    top: 0.375rem;
+  }
+
+  [data-slot="code-block"] > [data-slot="code-block-actions"] > button {
+    background: var(--vh-ui-bg);
+    box-shadow: 0 0 0 1px color-mix(in oklab, var(--vh-ui-highlighted) 10%, transparent);
+  }
+
+  [data-slot="code-block-copy-status"] {
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  [data-slot="code-block-content"] {
+    font-family: var(--font-mono, ui-monospace, monospace);
+    line-height: 1.625;
+    margin: 0;
+    min-height: 0;
+    min-width: 0;
+    outline: none;
+    overflow: auto;
+    padding: 0.75rem;
+    scrollbar-width: thin;
+    text-align: start;
+  }
+
+  [data-slot="code-block"]:has(> [data-slot="code-block-header"]) > [data-slot="code-block-content"] {
+    padding-top: 0.5rem;
+  }
+
+  [data-slot="code-block"]:has(> [data-slot="code-block-footer"]) > [data-slot="code-block-content"] {
+    padding-bottom: 0.5rem;
+  }
+
+  [data-slot="code-block"][data-size="sm"] > [data-slot="code-block-content"] {
+    padding: 0.625rem;
+  }
+
+  [data-slot="code-block"][data-size="sm"]:has(> [data-slot="code-block-header"]) > [data-slot="code-block-content"] {
+    padding-top: 0.375rem;
+  }
+
+  [data-slot="code-block-content"][data-wrap] {
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+  }
+
+  [data-slot="code-block-code"] {
+    align-content: start;
+    background: none;
+    border: 0;
+    display: grid;
+    font: inherit;
+    min-height: 1lh;
+    min-width: max-content;
+    padding: 0;
+  }
 
-.vh-invocation-payload__toolbar button:focus-visible,
-.vh-invocation-payload__search input:focus-visible {
-  outline: 2px solid color-mix(in oklab, var(--vh-ui-info) 55%, transparent);
-  outline-offset: 1px;
-}
+  [data-numbered] > [data-slot="code-block-code"] {
+    grid-template-columns: auto 1fr;
+  }
 
-.vh-invocation-payload__search {
-  flex: 1 1 8rem;
-}
+  [data-wrap] > [data-slot="code-block-code"] {
+    min-width: 0;
+  }
 
-.vh-invocation-payload__search input {
-  background: var(--vh-ui-bg);
-  border: 1px solid var(--vh-ui-border);
-  border-radius: calc(var(--vh-ui-radius) * 0.72);
-  color: var(--vh-ui-text);
-  font: inherit;
-  font-size: 0.6875rem;
-  min-height: 1.75rem;
-  padding: 0.25rem 0.5rem;
-  width: 100%;
-}
+  [data-slot="code-block-line"] {
+    display: block;
+    margin-inline: -0.75rem;
+    min-height: 1lh;
+    padding-inline: 0.75rem;
+    position: relative;
+  }
 
-.vh-invocation-payload__copy {
-  margin-inline-start: auto;
-}
+  [data-slot="code-block"][data-size="sm"] [data-slot="code-block-line"] {
+    margin-inline: -0.625rem;
+    padding-inline: 0.625rem;
+  }
 
-.vh-invocation-payload__content > pre {
-  background: color-mix(in oklab, var(--vh-ui-bg-elevated) 65%, transparent);
-  border-radius: calc(var(--vh-ui-radius) * 0.72);
-  color: var(--vh-ui-text);
-  font: 0.75rem/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  margin: 0;
-  max-height: 18rem;
-  overflow: auto;
-  padding: 0.625rem 0.75rem;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
+  [data-slot="code-block-line"]::before {
+    color: var(--vh-ui-muted);
+    min-width: 1.5rem;
+    text-align: end;
+  }
 
-.vh-invocation-payload__tree,
-.vh-invocation-payload__tree ul,
-.vh-invocation-payload__matches {
-  display: grid;
-  gap: 0.2rem;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
+  [data-slot="code-block-line"]::after {
+    color: var(--vh-ui-muted);
+    left: 0.25rem;
+    position: absolute;
+    top: 0;
+    user-select: none;
+  }
 
-.vh-invocation-payload__tree ul {
-  border-inline-start: 1px solid var(--vh-ui-border);
-  margin: 0.2rem 0 0 0.45rem;
-  padding-inline-start: 0.75rem;
-}
+  [data-numbered] [data-slot="code-block-line"] {
+    column-gap: 0.75rem;
+    counter-increment: line;
+    display: grid;
+    grid-column: span 2;
+    grid-template-columns: subgrid;
+  }
 
-.vh-invocation-payload__branch summary,
-.vh-invocation-payload__leaf {
-  align-items: baseline;
-  display: flex;
-  gap: 0.45rem;
-  min-height: 1.4rem;
-}
+  [data-numbered] [data-slot="code-block-line"]::before {
+    content: counter(line);
+    content: counter(line) / "";
+    user-select: none;
+  }
 
-.vh-invocation-payload__branch summary {
-  color: var(--vh-ui-dimmed);
-  cursor: pointer;
-  font-size: 0.6875rem;
-}
+  [data-slot="code-block-line"]:is([data-variant="added"], [data-variant="highlighted"]) {
+    background: var(--vh-ui-bg-elevated);
+  }
 
-.vh-invocation-payload__key,
-.vh-invocation-payload__value,
-.vh-invocation-payload__matches code {
-  font: 0.71875rem/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-}
+  [data-slot="code-block-line"][data-variant="added"]::after {
+    content: "+";
+  }
 
-.vh-invocation-payload__key {
-  color: var(--vh-ui-info);
-}
+  [data-slot="code-block-line"][data-variant="removed"] {
+    background: color-mix(in oklab, var(--vh-ui-error) 10%, transparent);
+  }
 
-.vh-invocation-payload__value {
-  color: var(--vh-ui-text);
-  overflow-wrap: anywhere;
-}
+  [data-slot="code-block-line"][data-variant="removed"]::after {
+    color: var(--vh-ui-error);
+    content: "−";
+  }
 
-.vh-invocation-payload__value[data-type="string"] {
-  color: var(--vh-ui-success);
-}
+  [data-slot="code-block-line-content"] {
+    min-width: 0;
+  }
 
-.vh-invocation-payload__matches li {
-  display: grid;
-  gap: 0.15rem;
-  grid-template-columns: minmax(7rem, 0.45fr) minmax(0, 1fr);
-}
+  /* useHighlightedCode() gives every token both theme colors as CSS variables. */
+  [data-slot="code-block-line-content"] span[style*="--shiki-light"] {
+    color: var(--shiki-light);
+  }
 
-.vh-invocation-payload__matches code:first-child {
-  color: var(--vh-ui-info);
-  overflow-wrap: anywhere;
-}
+  :root.dark [data-slot="code-block-line-content"] span[style*="--shiki-dark"] {
+    color: var(--shiki-dark);
+  }
 
-.vh-invocation-payload__matches code:last-child {
-  color: var(--vh-ui-text);
-  overflow-wrap: anywhere;
-}
+  /* Message Scroller */
 
-.vh-invocation-payload__empty {
-  color: var(--vh-ui-dimmed);
-  font-size: 0.75rem;
-  margin: 0;
-  padding: 0.5rem;
-  text-align: center;
-}
+  [data-slot="message-scroller"] {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+  }
 
-.vh-invocation-delivery__body {
-  color: var(--vh-ui-text);
-  margin: 0.125rem 0 0 2rem;
-  max-width: 42rem;
-  padding-block-end: 0.75rem;
-}
+  [data-slot="message-scroller-viewport"] {
+    height: 100%;
+    min-height: 0;
+    min-width: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+    scrollbar-width: thin;
+    width: 100%;
+  }
 
-.vh-invocation-delivery__body .vh-invocation-event__markdown {
-  font-size: 0.875rem;
-  line-height: 1.625;
-}
+  [data-slot="message-scroller-content"] {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    height: max-content;
+    min-height: 100%;
+  }
 
-.vh-invocation-event__body,
-.vh-invocation-command {
-  background: transparent;
-}
+  [data-slot="message-scroller-item"] {
+    flex-shrink: 0;
+    min-width: 0;
+  }
 
-.vh-invocation-event__markdown {
-  color: inherit;
-  font-size: 0.8125rem;
-  padding: 0.25rem 0;
-}
+  [data-slot="message-scroller-button"] {
+    align-items: center;
+    background: var(--vh-ui-bg);
+    border: 1px solid var(--vh-ui-border);
+    border-radius: var(--vh-ui-radius);
+    bottom: 1rem;
+    color: var(--vh-ui-highlighted);
+    cursor: pointer;
+    display: flex;
+    height: 2rem;
+    justify-content: center;
+    left: 50%;
+    position: absolute;
+    transition: background-color 150ms ease;
+    transform: translateX(-50%);
+    width: 2rem;
+  }
 
-.vh-invocation-event__notice {
-  color: var(--vh-ui-warning, #d97706);
-  font-size: 0.75rem;
-  margin: 0.5rem 0 0 1.75rem;
-}
+  @media (hover: hover) {
+    [data-slot="message-scroller-button"]:hover {
+      background: var(--vh-ui-bg-elevated);
+    }
+  }
 
-.vh-invocation-command__bar {
-  align-items: flex-start;
-  display: flex;
-  gap: 1rem;
-  justify-content: space-between;
-  padding: 0.25rem 0;
-}
+  [data-slot="message-scroller-button"]:focus-visible {
+    box-shadow: 0 0 0 3px var(--vh-ui-ring);
+    outline: none;
+  }
 
-.vh-invocation-command__bar code {
-  color: inherit;
-  font-size: 0.75rem;
-  overflow-wrap: anywhere;
-  white-space: pre-wrap;
+  [data-slot="message-scroller-button"][hidden] {
+    display: none;
+  }
 }
 
-.vh-invocation-command__bar span,
-.vh-invocation-command__cwd {
-  color: var(--vh-ui-dimmed);
-  font-size: 0.6875rem;
-}
+/* Prompt Input and message parts, composed from the shadcn/ui parts above. */
+@layer components {
+  [data-slot="prompt-input"] {
+    width: 100%;
+  }
 
-.vh-invocation-command__bar span[data-failed="true"] {
-  color: var(--vh-ui-text);
-  font-weight: 600;
-}
+  [data-slot="prompt-input-group"] {
+    background: var(--vh-ui-bg);
+    border: 1px solid var(--vh-ui-border);
+    border-radius: calc(var(--vh-ui-radius) * 2);
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    transition: border-color 150ms ease, box-shadow 150ms ease;
+  }
 
-.vh-invocation-command__cwd {
-  padding: 0.25rem 0;
-}
+  [data-slot="prompt-input-group"]:has([data-slot="prompt-input-textarea"]:focus-visible) {
+    border-color: color-mix(in oklab, var(--vh-ui-highlighted) 28%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--vh-ui-highlighted) 6%, transparent);
+  }
 
-.vh-invocation-command pre {
-  color: inherit;
-  font-size: 0.75rem;
-  margin: 0;
-  max-height: 16rem;
-  overflow: auto;
-  padding: 0.5rem 0;
-  white-space: pre-wrap;
-}
+  [data-slot="prompt-input-attachments"] {
+    padding: 0.5rem 0.5rem 0;
+  }
 
-.vh-invocation-inspector {
-  background: var(--vh-ui-bg);
-  border-inline-start: 1px solid var(--vh-ui-border);
-  container-type: inline-size;
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-  height: 100%;
-  min-height: 0;
-  min-width: 0;
-  overflow: hidden;
-}
+  [data-slot="prompt-input-textarea"] {
+    background: transparent;
+    border: 0;
+    color: var(--vh-ui-highlighted);
+    field-sizing: content;
+    font: inherit;
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+    max-height: 12rem;
+    min-height: 3.5rem;
+    outline: none;
+    padding: 0.75rem 0.875rem 0.25rem;
+    resize: none;
+    width: 100%;
+  }
 
-.vh-invocation-inspector > header {
-  align-items: center;
-  border-block-end: 1px solid var(--vh-ui-border);
-  display: flex;
-  gap: 0.75rem;
-  justify-content: space-between;
-  min-height: 3.5rem;
-  padding: 0.6rem 0.9rem;
-}
+  /* iOS Safari zooms into a focused field with text under 16px. Touch screens get at least 16px, whatever the root font size; mouse-only devices keep 14px. */
+  @media (any-pointer: coarse) {
+    [data-slot="prompt-input-textarea"] {
+      font-size: max(1rem, 16px);
+    }
+  }
 
-.vh-invocation-inspector > header h3 {
-  font-size: 0.875rem;
-  font-weight: 650;
-  line-height: 1.25;
-  margin: 0.1rem 0 0;
-}
+  [data-slot="prompt-input-textarea"]::placeholder {
+    color: var(--vh-ui-muted);
+  }
 
-.vh-invocation-inspector > header p {
-  color: var(--vh-ui-dimmed);
-  font-size: 0.625rem;
-  font-weight: 600;
-  letter-spacing: 0.055em;
-  margin: 0;
-  text-transform: uppercase;
-}
+  [data-slot="prompt-input-toolbar"] {
+    align-items: center;
+    display: flex;
+    gap: 0.375rem;
+    min-width: 0;
+    padding: 0.25rem 0.5rem 0.5rem;
+  }
 
-.vh-invocation-inspector__content {
-  min-height: 0;
-  overflow-y: auto;
-  overscroll-behavior-y: contain;
-  padding: 0 1rem 2rem;
-  scrollbar-gutter: stable;
+  [data-slot="prompt-input-spacer"] {
+    flex: 1;
+  }
 }
 
-.vh-invocation-inspector__content > section {
-  padding-block: 1rem 0.2rem;
-}
+/* Collaboration: AvatarStack, ConnectionStatus, SyncStatus, and the carets of TipTap's CollaborationCaret. */
+@layer components {
+  [data-slot="avatar-stack"] {
+    --vh-avatar-size: 2rem;
+    align-items: center;
+    display: inline-flex;
+    isolation: isolate;
+  }
 
-.vh-invocation-inspector__content > section:first-child {
-  padding-block-start: 1rem;
-}
+  [data-slot="avatar-stack"][data-size="sm"] {
+    --vh-avatar-size: 1.5rem;
+  }
 
-.vh-invocation-inspector__content > section > h4 {
-  color: var(--vh-ui-muted);
-  font-size: 0.625rem;
-  font-weight: 650;
-  letter-spacing: 0.075em;
-  margin: 0 0 0.6rem;
-  text-transform: uppercase;
-}
+  [data-slot="avatar-stack"][data-size="lg"] {
+    --vh-avatar-size: 2.5rem;
+  }
 
-.vh-invocation-inspector__status {
-  align-items: center;
-  background: color-mix(in oklab, var(--vh-ui-bg-elevated) 72%, transparent);
-  border: 1px solid var(--vh-ui-border);
-  border-radius: 999px;
-  display: flex;
-  gap: 0.35rem;
-  min-height: 1.75rem;
-  padding: 0.2rem 0.5rem 0.2rem 0.35rem;
-  width: fit-content;
-}
+  :is([data-slot="avatar-stack-item"], [data-slot="avatar-stack-count"]) {
+    align-items: center;
+    background: var(--vh-ui-bg-accented);
+    border-radius: 9999px;
+    box-shadow: 0 0 0 2px var(--vh-ui-bg);
+    color: var(--vh-ui-highlighted);
+    display: inline-flex;
+    flex: none;
+    font-size: calc(var(--vh-avatar-size) * 0.4);
+    font-weight: 500;
+    height: var(--vh-avatar-size);
+    justify-content: center;
+    line-height: 1;
+    overflow: hidden;
+    user-select: none;
+    width: var(--vh-avatar-size);
+  }
 
-.vh-invocation-inspector__status strong {
-  font-size: 0.6875rem;
-  font-weight: 650;
-}
+  :is([data-slot="avatar-stack-item"], [data-slot="avatar-stack-count"]) + :is([data-slot="avatar-stack-item"], [data-slot="avatar-stack-count"]) {
+    margin-inline-start: calc(var(--vh-avatar-size) * -0.15);
+  }
 
-.vh-invocation-inspector__status small {
-  color: var(--vh-ui-dimmed);
-  font-size: 0.625rem;
-  font-variant-numeric: tabular-nums;
-}
+  [data-slot="avatar-stack-count"] {
+    color: var(--vh-ui-muted);
+    font-size: calc(var(--vh-avatar-size) * 0.34);
+  }
 
-.vh-invocation-inspector__status small::before {
-  color: var(--vh-ui-border);
-  content: "·";
-  margin-inline-end: 0.35rem;
-}
+  /* The outline ring takes the person's presence color, so each face matches its caret. */
+  [data-slot="avatar-stack"][data-variant="outline"] [data-slot="avatar-stack-item"] {
+    box-shadow: 0 0 0 2px var(--vh-ui-bg), 0 0 0 4px var(--vh-avatar-color, var(--vh-ui-border));
+  }
 
-.vh-invocation-inspector__status-icon {
-  align-items: center;
-  color: var(--vh-ui-muted);
-  display: inline-flex;
-  flex: none;
-  justify-content: center;
-}
+  [data-slot="avatar-stack"][data-variant="outline"] :is([data-slot="avatar-stack-item"], [data-slot="avatar-stack-count"]) + :is([data-slot="avatar-stack-item"], [data-slot="avatar-stack-count"]) {
+    margin-inline-start: calc(var(--vh-avatar-size) * 0.05);
+  }
 
-.vh-invocation-inspector__status-icon svg {
-  height: 0.875rem;
-  stroke: currentColor;
-  stroke-width: 2;
-  width: 0.875rem;
-}
+  [data-slot="avatar-stack-image"] {
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
 
-.vh-invocation-inspector[data-status="running"] .vh-invocation-inspector__status {
-  color: color-mix(in oklab, var(--vh-ui-info) 42%, var(--vh-ui-text));
-}
+  :is([data-slot="connection-status"], [data-slot="sync-status"]) {
+    align-items: center;
+    color: var(--vh-ui-muted);
+    display: inline-flex;
+    font-size: 0.75rem;
+    gap: 0.375rem;
+    line-height: 1rem;
+    white-space: nowrap;
+  }
 
-.vh-invocation-inspector[data-status="running"] .vh-invocation-inspector__status-icon svg {
-  animation: vh-invocation-status-spin 800ms linear infinite;
-}
+  :is([data-slot="connection-status-indicator"], [data-slot="sync-status-indicator"]) {
+    background: var(--vh-ui-dimmed);
+    border-radius: 9999px;
+    flex: none;
+    height: 0.5rem;
+    position: relative;
+    width: 0.5rem;
+  }
 
-.vh-invocation-inspector[data-status="completed"] .vh-invocation-inspector__status {
-  color: color-mix(in oklab, var(--vh-ui-success) 42%, var(--vh-ui-text));
-}
+  :is([data-slot="connection-status-indicator"][data-status="connected"], [data-slot="sync-status-indicator"][data-status="synchronized"]) {
+    background: var(--vh-ui-success);
+  }
 
-.vh-invocation-inspector[data-status="failed"] .vh-invocation-inspector__status {
-  color: color-mix(in oklab, var(--vh-ui-error) 42%, var(--vh-ui-text));
-}
+  :is([data-slot="connection-status-indicator"][data-status="reconnecting"], [data-slot="sync-status-indicator"][data-status="synchronizing"]) {
+    background: var(--vh-ui-warning);
+  }
 
-.vh-invocation-inspector[data-status="pending"] .vh-invocation-inspector__status {
-  color: color-mix(in oklab, var(--vh-ui-warning) 42%, var(--vh-ui-text));
-}
+  [data-slot="sync-status-indicator"][data-status="error"] {
+    background: var(--vh-ui-error);
+  }
 
-.vh-invocation-inspector__identity h4 {
-  color: var(--vh-ui-text);
-  font-size: 1rem;
-  font-weight: 650;
-  letter-spacing: -0.015em;
-  line-height: 1.35;
-  margin: 0.8rem 0 0;
-  text-transform: none;
-}
+  :is([data-slot="connection-status"][data-status="reconnecting"], [data-slot="sync-status"][data-status="error"]) {
+    color: var(--vh-ui-highlighted);
+  }
 
-.vh-invocation-inspector__identity p {
-  color: var(--vh-ui-dimmed);
-  font-size: 0.75rem;
-  line-height: 1.45;
-  margin: 0.25rem 0 0;
-  overflow-wrap: anywhere;
-}
+  /* A pending state pings, as Kibo UI's StatusIndicator does. */
+  :is([data-slot="connection-status-indicator"]:not([data-status="connected"]), [data-slot="sync-status-indicator"]:is([data-status="loading"], [data-status="synchronizing"]))::after {
+    animation: vh-status-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
+    background: inherit;
+    border-radius: inherit;
+    content: "";
+    inset: 0;
+    position: absolute;
+  }
 
-.vh-invocation-inspector__agent {
-  align-items: center;
-  color: var(--vh-ui-dimmed);
-  display: flex;
-  font-size: 0.6875rem;
-  gap: 0.35rem;
-  margin-block-start: 0.75rem;
-}
+  @keyframes vh-status-ping {
+    75%,
+    100% {
+      opacity: 0;
+      transform: scale(2.25);
+    }
+  }
 
-.vh-invocation-inspector__agent code {
-  color: var(--vh-ui-muted);
-  font-size: 0.6875rem;
-}
+  @media (prefers-reduced-motion: reduce) {
+    :is([data-slot="connection-status-indicator"], [data-slot="sync-status-indicator"])::after {
+      animation: none;
+    }
+  }
 
-.vh-invocation-inspector__error,
-.vh-invocation-inspector__notice {
-  border: 1px solid color-mix(in oklab, currentColor 18%, transparent);
-  border-radius: calc(var(--vh-ui-radius) * 1.1);
-  margin-block-start: 0.9rem;
-  padding: 0.7rem 0.75rem;
-}
+  /* TipTap's CollaborationCaret markup, which Realtime's RealtimeCaret also renders. The inline style sets the color. */
+  .collaboration-carets__caret {
+    border-inline: 1px solid;
+    margin-inline: -1px;
+    pointer-events: none;
+    position: relative;
+    word-break: normal;
+  }
 
-.vh-invocation-inspector__error {
-  background: color-mix(in oklab, var(--vh-ui-error) 7%, transparent);
-  color: var(--vh-ui-error);
+  .collaboration-carets__label {
+    border-radius: calc(var(--vh-ui-radius) * 0.5) calc(var(--vh-ui-radius) * 0.5) calc(var(--vh-ui-radius) * 0.5) 0;
+    color: #fff;
+    font-size: 0.75rem;
+    font-style: normal;
+    font-weight: 600;
+    inset-inline-start: -1px;
+    line-height: 1.25;
+    padding: 0.0625rem 0.375rem;
+    position: absolute;
+    top: -1.4em;
+    user-select: none;
+    white-space: nowrap;
+  }
 }
 
-.vh-invocation-inspector__notice {
-  background: color-mix(in oklab, var(--ui-warning, #a16207) 7%, transparent);
-  border: 0;
-  border-inline-start: 2px solid color-mix(in oklab, currentColor 55%, transparent);
-  border-radius: 0;
-  color: var(--ui-warning, #a16207);
-  margin-block-start: 1rem;
-  padding: 0.6rem 0.7rem;
-}
+/* Comments: CommentLayer and the parts it is built from. Figma's comment mode, with the shadcn/ui data-slot convention. */
+@layer components {
+  [data-slot="comment-layer"] {
+    inset: 0;
+    pointer-events: none;
+    position: fixed;
+    z-index: 2147483000;
+  }
 
-.vh-invocation-inspector__error strong,
-.vh-invocation-inspector__notice strong {
-  font-size: 0.75rem;
-  font-weight: 650;
-}
+  [data-slot="comment-layer"] > * {
+    pointer-events: auto;
+  }
 
-.vh-invocation-inspector__error p,
-.vh-invocation-inspector__notice p {
-  color: inherit;
-  font-size: 0.6875rem;
-  margin: 0.2rem 0 0;
-}
+  /* The comment cursor: a speech bubble whose sharp corner is the spot of the pin. */
+  [data-slot="comment-layer-overlay"] {
+    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M2 26V14a12 12 0 1 1 12 12H2z' fill='%23fff' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") 2 26, crosshair;
+    inset: 0;
+    position: absolute;
+  }
 
-.vh-invocation-error__details {
-  color: inherit;
-  font-size: 0.6875rem;
-  margin-block-start: 0.45rem;
-}
+  [data-slot="comment-layer-item"] {
+    pointer-events: none;
+    position: absolute;
+  }
 
-.vh-invocation-error__details summary {
-  cursor: pointer;
-  font-weight: 600;
-}
+  [data-slot="comment-layer-item"] > * {
+    pointer-events: auto;
+  }
 
-.vh-invocation-error__details pre {
-  background: color-mix(in oklab, currentColor 6%, transparent);
-  border-radius: calc(var(--vh-ui-radius) * 0.75);
-  margin: 0.45rem 0 0;
-  max-height: 18rem;
-  overflow: auto;
-  padding: 0.6rem;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
+  [data-slot="comment-pin"] {
+    align-items: center;
+    background: var(--vh-ui-primary);
+    border: 2px solid var(--vh-ui-bg);
+    border-radius: 9999px 9999px 9999px 0;
+    box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
+    color: var(--vh-ui-inverted);
+    cursor: pointer;
+    display: grid;
+    height: 2rem;
+    padding: 0;
+    place-items: center;
+    position: absolute;
+    transform: translateY(-100%);
+    transform-origin: bottom left;
+    transition: scale 120ms ease;
+    width: 2rem;
+  }
 
-.vh-invocation-inspector__metrics {
-  border-block: 1px solid var(--vh-ui-border);
-  display: grid;
-  gap: 0;
-  grid-template-columns: repeat(auto-fit, minmax(4.75rem, 1fr));
-  margin: 0;
-}
+  [data-slot="comment-pin"]:is(:hover, :focus-visible, [data-active="true"]) {
+    scale: 1.1;
+  }
 
-.vh-invocation-inspector__metrics > div {
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-  min-width: 0;
-  padding: 0.6rem 0.65rem;
-}
+  [data-slot="comment-pin"]:focus-visible {
+    outline: 2px solid var(--vh-ui-ring);
+    outline-offset: 2px;
+  }
 
-.vh-invocation-inspector__metrics > div + div {
-  border-inline-start: 1px solid var(--vh-ui-border);
-}
+  [data-slot="comment-pin"] [data-slot="avatar-stack"] {
+    --vh-avatar-size: 1.625rem;
+  }
 
-.vh-invocation-inspector__metrics dt {
-  color: var(--vh-ui-dimmed);
-  font-size: 0.625rem;
-  line-height: 1.2;
-}
+  [data-slot="comment-pin"] [data-slot="avatar-stack-item"] {
+    border-radius: inherit;
+    box-shadow: none;
+  }
 
-.vh-invocation-inspector__metrics dd {
-  font-size: 0.8125rem;
-  font-variant-numeric: tabular-nums;
-  font-weight: 650;
-  margin: 0.25rem 0 0;
-  overflow-wrap: anywhere;
-}
+  [data-slot="comment-pin-number"] {
+    background: var(--vh-ui-highlighted);
+    border-radius: 9999px;
+    color: var(--vh-ui-inverted);
+    font-size: 0.625rem;
+    font-weight: 600;
+    line-height: 1;
+    min-width: 1rem;
+    padding: 0.15rem 0.25rem;
+    position: absolute;
+    right: -0.4rem;
+    text-align: center;
+    top: -0.4rem;
+  }
 
-.vh-invocation-timeline {
-  display: grid;
-  gap: 0.625rem;
-}
+  [data-slot="comment-pin"][data-status="resolved"] {
+    filter: grayscale(1);
+    opacity: 0.6;
+  }
 
-.vh-invocation-timeline__legend {
-  color: var(--vh-ui-dimmed);
-  display: flex;
-  font-size: 0.6875rem;
-  gap: 0.875rem;
-}
+  [data-slot="comment-pin"][data-draft="true"] {
+    outline: 2px dashed var(--vh-ui-primary);
+    outline-offset: 2px;
+  }
 
-.vh-invocation-timeline__legend span {
-  align-items: center;
-  display: inline-flex;
-  gap: 0.35rem;
-}
+  [data-slot="comment-layer-popover"] {
+    background: var(--vh-ui-bg);
+    border: 1px solid var(--vh-ui-border);
+    border-radius: calc(var(--vh-ui-radius) * 1.5);
+    box-shadow: 0 8px 24px rgb(0 0 0 / 0.16);
+    color: var(--vh-ui-text);
+    font-size: 0.875rem;
+    left: 0.5rem;
+    max-height: min(32rem, calc(100dvh - 2rem));
+    max-width: calc(100vw - 1rem);
+    overflow-y: auto;
+    position: absolute;
+    top: 0.5rem;
+    width: 22.5rem;
+  }
 
-.vh-invocation-timeline__legend span::before {
-  background: var(--vh-ui-info);
-  border-radius: 999px;
-  content: "";
-  height: 0.45rem;
-  width: 0.45rem;
-}
+  [data-slot="comment-layer-item"][data-flip-x="true"] > [data-slot="comment-layer-popover"] {
+    left: auto;
+    right: 0.5rem;
+  }
 
-.vh-invocation-timeline__legend span[data-owner="vitehub"]::before {
-  background: var(--vh-ui-success);
-}
+  [data-slot="comment-layer-item"][data-flip-y="true"] > [data-slot="comment-layer-popover"] {
+    bottom: 2.5rem;
+    top: auto;
+  }
 
-.vh-invocation-timeline ol {
-  display: grid;
-  gap: 0.2rem;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
+  [data-slot="comment-layer-popover"][data-preview="true"] {
+    pointer-events: none;
+    width: 18rem;
+  }
 
-.vh-invocation-timeline__row {
-  background: transparent;
-  border: 0;
-  border-radius: calc(var(--vh-ui-radius) * 0.9);
-  color: inherit;
-  cursor: pointer;
-  display: block;
-  font: inherit;
-  min-width: 0;
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  padding: 0.45rem 0.5rem;
-  text-align: start;
-  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1);
-  width: 100%;
-}
+  [data-slot="comment-layer-popover"][data-floating="true"] {
+    bottom: 4.5rem;
+    left: auto;
+    position: fixed;
+    right: 1rem;
+    top: auto;
+  }
 
-.vh-invocation-timeline__row:focus-visible {
-  outline-color: color-mix(in oklab, var(--vh-ui-info) 55%, transparent);
-}
+  [data-slot="comment-composer"] {
+    align-items: flex-start;
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.5rem;
+  }
 
-.vh-invocation-timeline__heading {
-  align-items: baseline;
-  display: flex;
-  gap: 0.75rem;
-  justify-content: space-between;
-  min-width: 0;
-}
+  [data-slot="comment-composer-box"] {
+    flex: 1;
+    min-width: 0;
+    position: relative;
+  }
 
-.vh-invocation-timeline__heading strong,
-.vh-invocation-timeline__detail {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  [data-slot="comment-composer"] [data-slot="prompt-input-textarea"] {
+    min-height: 2.25rem;
+    padding-block: 0.5rem 0.125rem;
+  }
 
-.vh-invocation-timeline__heading strong {
-  color: var(--vh-ui-text);
-  font-size: 0.75rem;
-  font-weight: 580;
-}
+  [data-slot="comment-composer"][data-shake="shake"] {
+    animation: vh-comment-shake 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  }
 
-.vh-invocation-timeline__heading time {
-  color: var(--vh-ui-dimmed);
-  flex: none;
-  font: 0.6875rem/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-variant-numeric: tabular-nums;
-}
+  [data-slot="comment-composer"][data-shake="flash"] [data-slot="prompt-input-group"] {
+    animation: vh-comment-flash 450ms ease both;
+  }
 
-.vh-invocation-timeline__detail {
-  color: var(--vh-ui-dimmed);
-  display: block;
-  font-size: 0.6875rem;
-  margin-block-start: 0.15rem;
-}
+  @keyframes vh-comment-shake {
+    10%,
+    90% {
+      transform: translateX(-1px);
+    }
+    20%,
+    80% {
+      transform: translateX(3px);
+    }
+    30%,
+    50%,
+    70% {
+      transform: translateX(-5px);
+    }
+    40%,
+    60% {
+      transform: translateX(5px);
+    }
+  }
 
-.vh-invocation-timeline__row:is(:hover, :focus-visible) .vh-invocation-timeline__heading strong,
-.vh-invocation-timeline__row:is(:hover, :focus-visible) .vh-invocation-timeline__detail {
-  overflow: visible;
-  white-space: normal;
-}
+  @keyframes vh-comment-flash {
+    0%,
+    60% {
+      border-color: var(--vh-ui-error);
+      box-shadow: 0 0 0 3px color-mix(in oklab, var(--vh-ui-error) 25%, transparent);
+    }
+  }
 
-.vh-invocation-timeline__track {
-  background: color-mix(in oklab, var(--vh-ui-border) 60%, transparent);
-  border-radius: 999px;
-  height: 0.25rem;
-  margin-block-start: 0.4rem;
-  overflow: hidden;
-  position: relative;
-}
+  @media (prefers-reduced-motion: reduce) {
+    [data-slot="comment-composer"][data-shake="shake"] {
+      animation: none;
+    }
 
-.vh-invocation-timeline__track span {
-  background: var(--vh-ui-info);
-  border-radius: inherit;
-  inset-block: 0;
-  position: absolute;
-}
+    [data-slot="comment-pin"] {
+      transition: none;
+    }
+  }
 
-.vh-invocation-timeline__row[data-owner="vitehub"] .vh-invocation-timeline__track span {
-  background: var(--vh-ui-success);
-}
+  [data-slot="comment-composer-mentions"] {
+    background: var(--vh-ui-bg);
+    border: 1px solid var(--vh-ui-border);
+    border-radius: var(--vh-ui-radius);
+    box-shadow: 0 4px 16px rgb(0 0 0 / 0.12);
+    left: 0;
+    list-style: none;
+    margin: 0.25rem 0 0;
+    padding: 0.25rem;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    z-index: 1;
+  }
 
-@media (hover: hover) and (pointer: fine) {
-  .vh-invocation-timeline__row:hover {
-    background: color-mix(in oklab, var(--vh-ui-bg-elevated) 72%, transparent);
+  [data-slot="comment-composer-mention"] {
+    border-radius: calc(var(--vh-ui-radius) * 0.75);
+    cursor: pointer;
+    padding: 0.375rem 0.5rem;
   }
-}
 
-.vh-invocation-inspector__groups {
-  display: grid;
-  gap: 1.1rem;
-}
+  [data-slot="comment-composer-mention"][aria-selected="true"] {
+    background: var(--vh-ui-bg-accented);
+  }
 
-.vh-invocation-inspector__group {
-  border: 0;
-  min-width: 0;
-  padding: 0;
-}
+  [data-slot="comment-composer-error"] {
+    color: var(--vh-ui-error);
+    font-size: 0.75rem;
+    margin: 0.375rem 0 0;
+  }
+
+  [data-slot="comment-thread"] {
+    display: flex;
+    flex-direction: column;
+  }
 
-.vh-invocation-inspector__group + .vh-invocation-inspector__group {
-  border-block-start: 0;
-}
+  [data-slot="comment-thread-header"] {
+    align-items: center;
+    border-block-end: 1px solid var(--vh-ui-border);
+    display: flex;
+    gap: 0.25rem;
+    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
+  }
 
-.vh-invocation-inspector__group--execution {
-  background:
-    radial-gradient(circle at 95% 0%, color-mix(in oklab, var(--ui-primary, #2563eb) 9%, transparent), transparent 48%),
-    color-mix(in oklab, var(--vh-ui-bg-elevated) 54%, transparent);
-  border: 1px solid color-mix(in oklab, var(--vh-ui-border) 78%, transparent);
-  border-radius: calc(var(--vh-ui-radius) * 1.2);
-  padding: 0.8rem;
-}
+  [data-slot="comment-thread-title"] {
+    color: var(--vh-ui-highlighted);
+    font-weight: 600;
+  }
 
-.vh-invocation-execution {
-  display: grid;
-  gap: 0.65rem;
-  margin-block-start: 0.65rem;
-}
+  [data-slot="comment-thread-spacer"] {
+    flex: 1;
+  }
 
-.vh-invocation-execution__model {
-  align-items: center;
-  display: grid;
-  gap: 0.7rem;
-  grid-template-columns: 2.35rem minmax(0, 1fr);
-  min-width: 0;
-}
+  [data-slot="comment-thread-messages"] {
+    display: flex;
+    flex-direction: column;
+    max-height: 22rem;
+    overflow-y: auto;
+  }
 
-.vh-invocation-execution__model > div {
-  display: grid;
-  gap: 0.08rem;
-  min-width: 0;
-}
+  [data-slot="comment-thread-quote"] {
+    border-inline-start: 2px solid var(--vh-ui-border);
+    color: var(--vh-ui-muted);
+    margin: 0.75rem 0.75rem 0;
+    padding-inline-start: 0.625rem;
+  }
 
-.vh-invocation-execution__model strong {
-  color: var(--vh-ui-text);
-  font-size: 0.875rem;
-  font-weight: 670;
-  letter-spacing: -0.015em;
-  line-height: 1.3;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  :is([data-slot="comment-thread-detached"], [data-slot="comment-thread-count"]) {
+    color: var(--vh-ui-muted);
+    font-size: 0.75rem;
+    margin: 0.5rem 0.75rem 0;
+  }
 
-.vh-invocation-execution__model span {
-  color: var(--vh-ui-dimmed);
-  font-size: 0.6875rem;
-}
+  [data-slot="comment-reply"] {
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.75rem;
+  }
 
-.vh-invocation-brand__logo,
-.vh-invocation-brand__fallback {
-  display: block;
-  flex: none;
-}
+  [data-slot="comment-reply-content"] {
+    flex: 1;
+    min-width: 0;
+  }
 
-.vh-invocation-brand__logo {
-  fill: currentColor;
-  height: 1rem;
-  width: 1rem;
-}
+  [data-slot="comment-reply-header"] {
+    align-items: baseline;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+  }
 
-.vh-invocation-execution__provider-logo {
-  color: #7624f4;
-}
+  [data-slot="comment-reply-author"] {
+    color: var(--vh-ui-highlighted);
+    font-weight: 500;
+  }
 
-.vh-invocation-execution__model-logo,
-.vh-invocation-brand__fallback.vh-invocation-execution__model-logo {
-  height: 2.35rem;
-  width: 2.35rem;
-}
+  :is([data-slot="comment-reply-time"], [data-slot="comment-reply-edited"], [data-slot="comment-reply-actor"]) {
+    color: var(--vh-ui-muted);
+    font-size: 0.75rem;
+  }
 
-.vh-invocation-brand__fallback {
-  align-items: center;
-  background: color-mix(in oklab, var(--ui-primary, #2563eb) 10%, var(--vh-ui-bg));
-  border: 1px solid color-mix(in oklab, var(--ui-primary, #2563eb) 20%, var(--vh-ui-border));
-  border-radius: calc(var(--vh-ui-radius) * 0.9);
-  color: var(--vh-ui-muted);
-  font-size: 0.65rem;
-  font-weight: 700;
-  justify-content: center;
-}
+  [data-slot="comment-reply-body"] {
+    overflow-wrap: anywhere;
+  }
 
-.vh-invocation-execution__route {
-  align-items: center;
-  color: var(--vh-ui-dimmed);
-  display: flex;
-  font-size: 0.6875rem;
-  gap: 0.35rem;
-  margin-inline-start: 3.05rem;
-}
+  [data-slot="comment-reply-actions"] {
+    display: flex;
+    opacity: 0;
+    transition: opacity 120ms ease;
+  }
 
-.vh-invocation-execution__route strong {
-  color: var(--vh-ui-muted);
-  font-weight: 600;
-}
+  [data-slot="comment-reply"]:is(:hover, :focus-within) [data-slot="comment-reply-actions"] {
+    opacity: 1;
+  }
 
-.vh-invocation-tool-list {
-  border-block: 1px solid var(--vh-ui-border);
-  list-style: none;
-  margin: 0.55rem 0 0;
-  padding: 0;
-}
+  /* A touch screen has no hover, so Edit and Delete always show on a device with one, also on a laptop whose main pointer is a mouse. */
+  @media (any-pointer: coarse) {
+    [data-slot="comment-reply-actions"] {
+      opacity: 1;
+    }
+  }
 
-.vh-invocation-tool-list > li {
-  min-width: 0;
-  padding: 0.55rem 0.15rem 0.6rem;
-}
+  [data-slot="comment-reply"][data-compact="true"] [data-slot="comment-reply-body"] {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+  }
 
-.vh-invocation-tool-list > li + li {
-  border-block-start: 1px solid color-mix(in oklab, var(--vh-ui-border) 72%, transparent);
-}
+  [data-slot="comment-reply"][data-editing="true"] [data-slot="comment-composer"] {
+    padding: 0.25rem 0 0;
+  }
 
-.vh-invocation-tool-list > li[data-used="false"] {
-  opacity: 0.66;
-}
+  [data-slot="comment-toolbar"] {
+    align-items: center;
+    background: var(--vh-ui-bg);
+    border: 1px solid var(--vh-ui-border);
+    border-radius: 9999px;
+    bottom: 1rem;
+    box-shadow: 0 4px 16px rgb(0 0 0 / 0.16);
+    display: flex;
+    gap: 0.25rem;
+    left: 50%;
+    padding: 0.25rem;
+    position: fixed;
+    transform: translateX(-50%);
+  }
 
-.vh-invocation-tool-list__heading {
-  align-items: baseline;
-  display: grid;
-  gap: 0.75rem;
-  grid-template-columns: minmax(0, 1fr) auto;
-}
+  [data-slot="comment-filters"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+  }
 
-.vh-invocation-tool-list__heading code {
-  color: var(--vh-ui-text);
-  font-size: 0.6875rem;
-  font-weight: 580;
-  overflow-wrap: anywhere;
-}
+  [data-slot="comment-list"] {
+    background: var(--vh-ui-bg);
+    border-inline-start: 1px solid var(--vh-ui-border);
+    bottom: 0;
+    color: var(--vh-ui-text);
+    display: flex;
+    flex-direction: column;
+    font-size: 0.875rem;
+    max-width: 100vw;
+    overflow-y: auto;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 20rem;
+  }
 
-.vh-invocation-tool-list__count {
-  color: var(--vh-ui-dimmed);
-  font: 0.6875rem/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-variant-numeric: tabular-nums;
-  min-width: 1.5rem;
-  text-align: end;
-}
+  [data-slot="comment-list-header"] {
+    border-block-end: 1px solid var(--vh-ui-border);
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.75rem;
+  }
 
-.vh-invocation-tool-list > li[data-used="true"] .vh-invocation-tool-list__count {
-  background: color-mix(in oklab, var(--vh-ui-success) 11%, transparent);
-  border-radius: 999px;
-  color: color-mix(in oklab, var(--vh-ui-success) 60%, var(--vh-ui-text));
-  padding: 0.08rem 0.4rem;
-}
-
-.vh-invocation-tool-list p {
-  color: var(--vh-ui-dimmed);
-  display: -webkit-box;
-  font-size: 0.65625rem;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  line-height: 1.45;
-  margin: 0.22rem 2.25rem 0 0;
-  overflow: hidden;
-}
+  [data-slot="comment-list-scopes"] {
+    display: flex;
+    gap: 0.25rem;
+  }
 
-.vh-invocation-inspector__group-heading {
-  align-items: center;
-  color: var(--vh-ui-muted);
-  display: flex;
-  gap: 0.45rem;
-  min-height: 1.25rem;
-  min-width: 0;
-}
+  [data-slot="comment-list-empty"] {
+    color: var(--vh-ui-muted);
+    margin: 0;
+    padding: 1rem 0.75rem;
+  }
 
-.vh-invocation-inspector__group-heading strong {
-  color: var(--vh-ui-text);
-  flex: 1;
-  font-size: 0.75rem;
-  font-weight: 600;
-  min-width: 0;
-}
+  [data-slot="comment-list-items"] {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
 
-.vh-invocation-inspector__group-heading small {
-  color: var(--vh-ui-dimmed);
-  font-size: 0.625rem;
-  font-variant-numeric: tabular-nums;
-}
+  [data-slot="comment-list-item"] {
+    align-items: flex-start;
+    border-block-end: 1px solid var(--vh-ui-border);
+    color: inherit;
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.625rem 0.75rem;
+    text-decoration: none;
+  }
 
-summary.vh-invocation-inspector__group-heading,
-.vh-invocation-inspector__item-disclosure summary {
-  cursor: pointer;
-  list-style: none;
-}
+  [data-slot="comment-list-item"]:is(:hover, :focus-visible, [aria-current="true"]) {
+    background: var(--vh-ui-bg-elevated);
+  }
 
-summary.vh-invocation-inspector__group-heading::-webkit-details-marker,
-.vh-invocation-inspector__item-disclosure summary::-webkit-details-marker {
-  display: none;
-}
+  [data-slot="comment-list-item"][data-status="resolved"] {
+    opacity: 0.65;
+  }
 
-summary.vh-invocation-inspector__group-heading:focus-visible,
-.vh-invocation-inspector__item-disclosure summary:focus-visible {
-  border-radius: calc(var(--vh-ui-radius) * 0.8);
-  outline: 2px solid color-mix(in oklab, var(--ui-primary, #2563eb) 55%, transparent);
-  outline-offset: 2px;
-}
+  [data-slot="comment-list-number"] {
+    color: var(--vh-ui-muted);
+    flex: none;
+    font-size: 0.75rem;
+    min-width: 1.25rem;
+    padding-top: 0.25rem;
+  }
 
-.vh-invocation-inspector__chevron {
-  height: 0.8rem;
-  stroke: currentColor;
-  stroke-width: 2;
-  transition: transform 150ms ease;
-  width: 0.8rem;
-}
+  [data-slot="comment-list-body"] {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+  }
 
-.vh-invocation-inspector__disclosure[open] > summary .vh-invocation-inspector__chevron,
-.vh-invocation-inspector__item-disclosure[open] > summary .vh-invocation-inspector__chevron {
-  transform: rotate(180deg);
-}
+  [data-slot="comment-list-text"] {
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+  }
 
-.vh-invocation-inspector__list {
-  display: grid;
-  margin: 0.45rem 0 0;
+  [data-slot="comment-list-meta"] {
+    color: var(--vh-ui-muted);
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 0.75rem;
+    gap: 0.25rem 0.5rem;
+  }
 }
 
-.vh-invocation-inspector__list > div {
-  align-items: center;
-  display: grid;
-  gap: 0.5rem;
-  grid-template-columns: minmax(4.5rem, 0.7fr) minmax(0, 1.3fr);
-  min-width: 0;
-  padding-block: 0.35rem;
-}
+@layer components {
+  [data-slot="comment-thread"]:focus-visible {
+    outline: 2px solid var(--vh-ui-ring);
+    outline-offset: -2px;
+  }
 
-.vh-invocation-inspector__list dt {
-  color: var(--vh-ui-dimmed);
-  font-size: 0.6875rem;
-}
+  [data-slot="comment-reply-confirm"] {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+  }
 
-.vh-invocation-inspector__list dd {
-  font-size: 0.6875rem;
-  margin: 0;
-  min-width: 0;
-  overflow-wrap: anywhere;
-  text-align: end;
-}
+  [data-slot="comment-reply-confirm"] > p {
+    flex-basis: 100%;
+    margin: 0;
+  }
 
-.vh-invocation-inspector__copy-list {
-  border: 1px solid var(--vh-ui-border);
-  border-radius: calc(var(--vh-ui-radius) * 1.05);
-  overflow: hidden;
+  [data-slot="comment-reply-error"] {
+    color: var(--vh-ui-error);
+    font-size: 0.75rem;
+    margin: 0.375rem 0 0;
+  }
 }
 
-.vh-invocation-inspector__copy {
-  align-items: center;
-  appearance: none;
-  background: transparent;
-  border: 0;
-  color: var(--vh-ui-muted);
-  cursor: pointer;
-  display: grid;
-  font: inherit;
-  gap: 0.5rem;
-  grid-template-columns: minmax(0, 1fr) auto 1rem;
-  min-height: 2.4rem;
-  padding: 0.45rem 0.65rem;
-  text-align: start;
-  transition:
-    background-color 120ms ease,
-    color 120ms ease;
-  width: 100%;
-}
+/*
+ * Chat, session, Markdown typeset, image preview, file views, primitive rail, and tool list.
+ * They live in the components layer, so a utility class on a component, such as `<Chat class="h-96">`, overrides them.
+ */
+@layer components {
+  .vh-chat {
+    display: grid;
+    grid-template-rows: minmax(0, 1fr);
+    height: 100%;
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+  }
 
-.vh-invocation-inspector__copy + .vh-invocation-inspector__copy {
-  border-block-start: 1px solid var(--vh-ui-border);
-}
+  .vh-session {
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    height: 100%;
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+    width: 100%;
+  }
 
-.vh-invocation-inspector__copy-label {
-  color: var(--vh-ui-text);
-  font-size: 0.75rem;
-  min-width: 0;
-}
+  .vh-session__header {
+    border-block-end: 1px solid var(--vh-ui-border);
+    padding: 0.75rem 1rem;
+  }
 
-.vh-invocation-inspector__copy-state {
-  color: var(--vh-ui-dimmed);
-  font-size: 0.625rem;
-}
+  .vh-session__title {
+    font-size: 0.9375rem;
+    font-weight: 600;
+    margin: 0;
+  }
 
-.vh-invocation-inspector__copy:hover,
-.vh-invocation-inspector__copy:focus-visible {
-  background: color-mix(in oklab, var(--vh-ui-bg-elevated) 70%, transparent);
-  color: var(--vh-ui-text);
-}
+  .vh-session__chat {
+    height: 100%;
+    min-height: 0;
+  }
 
-.vh-invocation-inspector__copy:focus-visible {
-  outline: 2px solid color-mix(in oklab, var(--ui-primary, #2563eb) 55%, transparent);
-  outline-offset: -2px;
-}
+  .vh-chat__viewport {
+    height: 100%;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior-y: contain;
+    scrollbar-gutter: stable;
+  }
 
-.vh-invocation-inspector__copy-icon {
-  align-items: center;
-  display: inline-flex;
-  justify-content: center;
-}
+  .vh-chat__content {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    margin-inline: auto;
+    max-width: 48rem;
+    min-height: 100%;
+    padding: var(--vh-chat-content-padding, 1.5rem 1rem 6rem);
+  }
 
-.vh-invocation-inspector__copy-icon svg {
-  height: 0.875rem;
-  stroke: currentColor;
-  stroke-width: 1.8;
-  width: 0.875rem;
-}
+  .vh-chat__composer {
+    bottom: 0;
+    inset-inline: 0;
+    padding: var(--vh-chat-composer-padding, 1rem);
+    pointer-events: none;
+    position: absolute;
+    z-index: 3;
+  }
 
-.vh-invocation-inspector__stack {
-  display: grid;
-  gap: 0.125rem;
-  margin-block-start: 0.45rem;
-}
+  .vh-chat__composer::before {
+    background: color-mix(in oklab, var(--vh-ui-bg) 96%, transparent);
+    border-block-start: 1px solid var(--vh-ui-border);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+  }
 
-.vh-agent-tool-list {
-  display: grid;
-  gap: 0.125rem;
-  margin-block-start: 0.45rem;
-}
+  .vh-chat__composer > * {
+    margin-inline: auto;
+    max-width: 48rem;
+    pointer-events: auto;
+    position: relative;
+    width: 100%;
+  }
 
-.vh-agent-tool-list__item,
-.vh-agent-tool-list__disclosure > summary {
-  align-items: center;
-  border-radius: calc(var(--vh-ui-radius) * 0.8);
-  display: flex;
-  gap: 0.5rem;
-  min-height: 1.8rem;
-  padding: 0.3rem 0.45rem;
-}
+  /* comark-chat draws message parts with the `--comark-*` tokens, so they take ViteHub's colors. */
+  .vh-message-parts {
+    --comark-accent: var(--vh-ui-bg-elevated);
+    --comark-background: var(--vh-ui-bg);
+    --comark-border: var(--vh-ui-border);
+    --comark-font: inherit;
+    --comark-foreground: var(--vh-ui-text);
+    --comark-muted: var(--vh-ui-muted);
+    --comark-ring: var(--vh-ui-ring);
+  }
 
-.vh-agent-tool-list__item code,
-.vh-agent-tool-list__disclosure > summary code {
-  flex: none;
-  font-size: 0.6875rem;
-  overflow-wrap: anywhere;
-}
+  .vh-typeset {
+    --vh-typeset-flow: 0.85em;
+    --vh-typeset-leading: 1.65;
+    font-size: 0.9375rem;
+    line-height: var(--vh-typeset-leading);
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
 
-.vh-agent-tool-list__disclosure > summary {
-  cursor: pointer;
-  list-style: none;
-}
+  .vh-image-preview {
+    appearance: none;
+    aspect-ratio: 4 / 3;
+    background: var(--vh-ui-bg-elevated);
+    border: 1px solid var(--vh-ui-border);
+    border-radius: var(--vh-ui-radius);
+    color: var(--vh-ui-muted);
+    cursor: zoom-in;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+    overflow: hidden;
+    padding: 0;
+    vertical-align: top;
+    width: 13rem;
+  }
 
-.vh-agent-tool-list__disclosure > summary::-webkit-details-marker {
-  display: none;
-}
+  .vh-image-preview:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 3px;
+  }
 
-.vh-agent-tool-list__disclosure > summary:hover {
-  background: color-mix(in oklab, var(--vh-ui-bg-elevated) 70%, transparent);
-}
+  .vh-image-preview img {
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
 
-.vh-agent-tool-list__disclosure > summary:focus-visible {
-  outline: 2px solid color-mix(in oklab, var(--ui-primary, #2563eb) 55%, transparent);
-  outline-offset: 2px;
-}
+  .vh-image-preview--compact {
+    aspect-ratio: 1;
+    border: 0;
+    height: 100%;
+    width: 100%;
+  }
 
-.vh-agent-tool-list__disclosure > summary small {
-  color: var(--vh-ui-dimmed);
-  flex: 1;
-  font-size: 0.625rem;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  .vh-image-unavailable {
+    font-size: 0.75rem;
+    overflow-wrap: anywhere;
+    padding: 0.5rem;
+  }
 
-.vh-agent-tool-list > [data-used="false"] {
-  opacity: 0.66;
-}
+  .vh-image-dialog__toolbar {
+    align-items: center;
+    border: 0;
+    color: white;
+    display: flex;
+    flex: none;
+    gap: 0.25rem;
+    padding-bottom: 0.5rem;
+  }
 
-.vh-agent-tool-list__count {
-  align-items: center;
-  background: var(--vh-ui-bg-elevated);
-  border-radius: 999px;
-  color: var(--vh-ui-dimmed);
-  display: inline-flex;
-  flex: none;
-  font-size: 0.625rem;
-  justify-content: center;
-  min-width: 1.35rem;
-  padding: 0.1rem 0.3rem;
-}
+  .vh-image-dialog__name {
+    flex: 1;
+    font-size: 0.75rem;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-.vh-agent-tool-list > [data-used="true"] .vh-agent-tool-list__count {
-  background: color-mix(in oklab, var(--ui-primary, #2563eb) 14%, transparent);
-  color: var(--ui-primary, #2563eb);
-}
+  .vh-image-dialog__image {
+    border-radius: var(--vh-ui-radius);
+    display: block;
+    max-height: calc(92dvh - 3rem);
+    max-width: 92vw;
+    object-fit: contain;
+  }
 
-.vh-agent-tool-list__chevron {
-  height: 0.8rem;
-  stroke: currentColor;
-  stroke-width: 2;
-  transition: transform 150ms ease;
-  width: 0.8rem;
-}
+  .vh-image-dialog__error {
+    background: black;
+    border-radius: var(--vh-ui-radius);
+    color: white;
+    font-size: 0.875rem;
+    max-width: 24rem;
+    padding: 2rem;
+  }
 
-.vh-agent-tool-list__disclosure[open] > summary .vh-agent-tool-list__chevron {
-  transform: rotate(180deg);
-}
+  [data-slot="invocation"] [data-activity-id][data-selected="true"] {
+    background: color-mix(in oklab, var(--vh-ui-info) 9%, transparent);
+    border-radius: calc(var(--vh-ui-radius) * 0.85);
+    outline: 2px solid color-mix(in oklab, var(--vh-ui-info) 42%, transparent);
+    outline-offset: 2px;
+    scroll-margin-block: 5rem;
+  }
 
-.vh-agent-tool-list__body {
-  display: grid;
-  gap: 0.65rem;
-  padding: 0.35rem 0.45rem 0.75rem;
-}
+  .vh-code-view,
+  .vh-diff,
+  .vh-file,
+  .vh-unresolved-file,
+  .vh-file-tree {
+    border: 1px solid var(--vh-ui-border);
+    border-radius: var(--vh-ui-radius);
+    display: block;
+    overflow: hidden;
+  }
 
-.vh-agent-tool-list__body > p {
-  color: var(--vh-ui-muted);
-  font-size: 0.75rem;
-  line-height: 1.55;
-  margin: 0;
-}
+  .vh-code-view,
+  .vh-diff,
+  .vh-file,
+  .vh-unresolved-file {
+    --diffs-addition-base: var(--vh-ui-success);
+    --diffs-bg: var(--vh-ui-bg);
+    --diffs-bg-addition: color-mix(in oklab, var(--vh-ui-success) 12%, var(--vh-ui-bg));
+    --diffs-bg-addition-emphasis: color-mix(in oklab, var(--vh-ui-success) 22%, var(--vh-ui-bg));
+    --diffs-bg-buffer: var(--vh-ui-bg-muted);
+    --diffs-bg-context: var(--vh-ui-bg);
+    --diffs-bg-context-gutter: color-mix(in oklab, var(--vh-ui-bg-muted) 72%, var(--vh-ui-bg));
+    --diffs-bg-deletion: color-mix(in oklab, var(--vh-ui-error) 12%, var(--vh-ui-bg));
+    --diffs-bg-deletion-emphasis: color-mix(in oklab, var(--vh-ui-error) 22%, var(--vh-ui-bg));
+    --diffs-bg-separator: var(--vh-ui-bg-muted);
+    --diffs-deletion-base: var(--vh-ui-error);
+    --diffs-fg: var(--vh-ui-text);
+    --diffs-fg-conflict-marker: var(--vh-ui-muted);
+    --diffs-fg-number: var(--vh-ui-dimmed);
+    --diffs-font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+    --diffs-font-size: 0.8125rem;
+    --diffs-header-font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+    --diffs-modified-base: var(--vh-ui-info);
+    background: var(--vh-ui-bg);
+    color: var(--vh-ui-text);
+    min-height: 4rem;
+  }
 
-.vh-agent-tool-list__schema strong {
-  color: var(--vh-ui-dimmed);
-  display: block;
-  font-size: 0.625rem;
-  margin-block-end: 0.35rem;
-  text-transform: uppercase;
-}
+  .vh-code-view {
+    min-height: 12rem;
+  }
 
-.vh-agent-tool-list__schema pre {
-  background: color-mix(in oklab, var(--vh-ui-bg-elevated) 65%, transparent);
-  border: 1px solid var(--vh-ui-border);
-  border-radius: calc(var(--vh-ui-radius) * 0.8);
-  color: var(--vh-ui-muted);
-  font-size: 0.625rem;
-  line-height: 1.55;
-  margin: 0;
-  max-height: 18rem;
-  overflow: auto;
-  padding: 0.6rem 0.65rem;
-  white-space: pre;
-}
+  .vh-file-tree {
+    height: 24rem;
+  }
 
-.vh-invocation-inspector__item,
-.vh-invocation-inspector__item-disclosure summary {
-  align-items: center;
-  border-radius: calc(var(--vh-ui-radius) * 0.8);
-  display: flex;
-  gap: 0.45rem;
-  min-height: 1.8rem;
-  padding: 0.3rem 0.45rem;
-}
+  .vh-visually-hidden {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
 
-.vh-invocation-inspector__item code,
-.vh-invocation-inspector__item-disclosure summary code {
-  flex: 1;
-  font-size: 0.6875rem;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
+  @media (prefers-reduced-motion: reduce) {
+    .vh-chat__viewport {
+      scroll-behavior: auto;
+    }
+  }
 
-.vh-invocation-inspector__item-disclosure summary:hover {
-  background: color-mix(in oklab, var(--vh-ui-bg-elevated) 70%, transparent);
-}
+  .vh-agent-tool-list {
+    grid-template-columns: minmax(0, 1fr);
+    display: grid;
+    gap: 0.125rem;
+    margin-block-start: 0.45rem;
+  }
 
-.vh-invocation-inspector__item-disclosure summary small {
-  color: var(--vh-ui-dimmed);
-  font-size: 0.625rem;
-}
+  .vh-agent-tool-list__item,
+  .vh-agent-tool-list__disclosure > summary {
+    align-items: center;
+    border-radius: calc(var(--vh-ui-radius) * 0.8);
+    display: flex;
+    gap: 0.5rem;
+    min-height: 1.8rem;
+    padding: 0.3rem 0.45rem;
+  }
 
-.vh-invocation-inspector__items {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.35rem;
-  list-style: none;
-  margin: 0.6rem 0 0;
-  padding: 0;
-}
+  .vh-agent-tool-list__item code,
+  .vh-agent-tool-list__disclosure > summary code {
+    flex: 0 1 auto;
+    min-width: 0;
+    font-size: 0.6875rem;
+    overflow-wrap: anywhere;
+  }
 
-.vh-invocation-inspector__items li {
-  background: color-mix(in oklab, var(--vh-ui-bg-elevated) 72%, transparent);
-  border: 1px solid var(--vh-ui-border);
-  border-radius: calc(var(--vh-ui-radius) * 0.8);
-  color: var(--vh-ui-muted);
-  max-width: 100%;
-  padding: 0.25rem 0.45rem;
-}
+  .vh-agent-tool-list__disclosure > summary {
+    cursor: pointer;
+    list-style: none;
+  }
 
-.vh-invocation-inspector__items code {
-  display: block;
-  font-size: 0.6875rem;
-  overflow-wrap: anywhere;
-}
+  .vh-agent-tool-list__disclosure > summary::-webkit-details-marker {
+    display: none;
+  }
 
-.vh-invocation-inspector__item-disclosure pre,
-.vh-invocation-inspector__instructions {
-  background: color-mix(in oklab, var(--vh-ui-bg-elevated) 65%, transparent);
-  border: 1px solid var(--vh-ui-border);
-  border-radius: calc(var(--vh-ui-radius) * 0.8);
-  color: var(--vh-ui-muted);
-  font-size: 0.625rem;
-  line-height: 1.55;
-  margin: 0.4rem 0 0;
-  max-height: 18rem;
-  overflow: auto;
-  padding: 0.6rem 0.65rem;
-  white-space: pre-wrap;
-}
+  .vh-agent-tool-list__disclosure > summary:hover {
+    background: color-mix(in oklab, var(--vh-ui-bg-elevated) 70%, transparent);
+  }
 
-.vh-invocation-inspector__instructions {
-  margin-block-start: 0.65rem;
-}
+  .vh-agent-tool-list__disclosure > summary:focus-visible {
+    outline: 2px solid color-mix(in oklab, var(--ui-primary, #2563eb) 55%, transparent);
+    outline-offset: 2px;
+  }
 
-@container (max-width: 19rem) {
-  .vh-invocation-inspector__metrics {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  .vh-agent-tool-list__item small,
+  .vh-agent-tool-list__disclosure > summary small {
+    color: var(--vh-ui-dimmed);
+    flex: 1;
+    font-size: 0.625rem;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  .vh-invocation-inspector__list > div {
-    grid-template-columns: minmax(0, 1fr);
+  .vh-agent-tool-list__icon {
+    color: var(--vh-ui-muted);
+    display: inline-flex;
+    flex: none;
   }
 
-  .vh-invocation-inspector__list dd {
-    text-align: start;
+  .vh-agent-tool-list__icon > * {
+    height: 0.875rem;
+    width: 0.875rem;
   }
-}
 
-.vh-invocation-empty {
-  align-items: center;
-  color: var(--vh-ui-dimmed);
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-  justify-content: center;
-  min-height: 16rem;
-}
+  .vh-agent-tool-list > [data-used="false"] {
+    opacity: 0.66;
+  }
 
-.vh-invocation-empty p {
-  font-size: 0.8125rem;
-  margin: 0;
-}
+  .vh-agent-tool-list__count {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    color: var(--vh-ui-dimmed);
+    flex: none;
+    font: inherit;
+    font-size: 0.6875rem;
+    margin-inline-start: auto;
+    padding: 0;
+    white-space: nowrap;
+  }
 
-@container (max-width: 600px) {
-  .vh-invocation-thread__content {
-    padding: 1.5rem 1rem 3rem;
+  .vh-agent-tool-list > [data-used="true"] .vh-agent-tool-list__count {
+    color: var(--vh-ui-muted);
   }
 
-  .vh-invocation-message[data-role="user"] {
-    margin-inline-start: 1rem;
+  button.vh-agent-tool-list__count {
+    cursor: pointer;
+    text-decoration: underline dotted;
+    text-underline-offset: 0.2rem;
   }
-}
 
-@media (max-width: 600px) {
-  .vh-invocation-thread__content {
-    padding: 1.5rem 1rem 3rem;
+  button.vh-agent-tool-list__count:hover,
+  button.vh-agent-tool-list__count:focus-visible {
+    color: var(--vh-ui-text);
   }
 
-  .vh-invocation-message[data-role="user"] {
-    margin-inline-start: 1rem;
+  .vh-agent-tool-list__chevron {
+    height: 0.8rem;
+    stroke: currentColor;
+    stroke-width: 2;
+    transition: transform 150ms ease;
+    width: 0.8rem;
   }
-}
 
-.vh-code-view,
-.vh-diff,
-.vh-file,
-.vh-unresolved-file,
-.vh-file-tree {
-  border: 1px solid var(--vh-ui-border);
-  border-radius: var(--vh-ui-radius);
-  display: block;
-  overflow: hidden;
-}
+  .vh-agent-tool-list__disclosure[open] > summary .vh-agent-tool-list__chevron {
+    transform: rotate(180deg);
+  }
 
-.vh-code-view,
-.vh-diff,
-.vh-file,
-.vh-unresolved-file {
-  --diffs-addition-base: var(--vh-ui-success);
-  --diffs-bg: var(--vh-ui-bg);
-  --diffs-bg-addition: color-mix(in oklab, var(--vh-ui-success) 12%, var(--vh-ui-bg));
-  --diffs-bg-addition-emphasis: color-mix(in oklab, var(--vh-ui-success) 22%, var(--vh-ui-bg));
-  --diffs-bg-buffer: var(--vh-ui-bg-muted);
-  --diffs-bg-context: var(--vh-ui-bg);
-  --diffs-bg-context-gutter: color-mix(in oklab, var(--vh-ui-bg-muted) 72%, var(--vh-ui-bg));
-  --diffs-bg-deletion: color-mix(in oklab, var(--vh-ui-error) 12%, var(--vh-ui-bg));
-  --diffs-bg-deletion-emphasis: color-mix(in oklab, var(--vh-ui-error) 22%, var(--vh-ui-bg));
-  --diffs-bg-separator: var(--vh-ui-bg-muted);
-  --diffs-deletion-base: var(--vh-ui-error);
-  --diffs-fg: var(--vh-ui-text);
-  --diffs-fg-conflict-marker: var(--vh-ui-muted);
-  --diffs-fg-number: var(--vh-ui-dimmed);
-  --diffs-font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-  --diffs-font-size: 0.8125rem;
-  --diffs-header-font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
-  --diffs-modified-base: var(--vh-ui-info);
-  background: var(--vh-ui-bg);
-  color: var(--vh-ui-text);
-  min-height: 4rem;
-}
-
-.vh-code-view {
-  min-height: 12rem;
-}
-
-.vh-file-tree {
-  height: 24rem;
-}
-
-.vh-visually-hidden {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
+  .vh-agent-tool-list__body {
+    grid-template-columns: minmax(0, 1fr);
+    display: grid;
+    gap: 0.65rem;
+    padding: 0.35rem 0.45rem 0.75rem;
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .vh-chat__viewport {
-    scroll-behavior: auto;
+  .vh-agent-tool-list__body > p {
+    color: var(--vh-ui-muted);
+    font-size: 0.75rem;
+    line-height: 1.55;
+    margin: 0;
   }
 
-  .vh-invocation-list__item[data-status="running"] .vh-invocation-list__state-icon svg,
-  .vh-invocation-inspector[data-status="running"] .vh-invocation-inspector__status-icon svg {
-    animation: none;
+  .vh-agent-tool-list__schema strong {
+    color: var(--vh-ui-dimmed);
+    display: block;
+    font-size: 0.625rem;
+    margin-block-end: 0.35rem;
+    text-transform: uppercase;
   }
 
-  .vh-invocation-inspector__chevron {
-    transition: none;
+  .vh-agent-tool-list__schema pre {
+    background: color-mix(in oklab, var(--vh-ui-bg-elevated) 65%, transparent);
+    border: 1px solid var(--vh-ui-border);
+    border-radius: calc(var(--vh-ui-radius) * 0.8);
+    color: var(--vh-ui-muted);
+    font-size: 0.625rem;
+    line-height: 1.55;
+    margin: 0;
+    max-height: 18rem;
+    overflow: auto;
+    padding: 0.6rem 0.65rem;
+    white-space: pre;
   }
+  .vh-agent-tool-list__body > p { white-space: pre-wrap; overflow-wrap: anywhere; }
+
+  .vh-agent-tool-list__properties { width: 100%; border-collapse: collapse; font-size: 0.6875rem; text-align: start; table-layout: fixed; }
+  .vh-agent-tool-list__properties td, .vh-agent-tool-list__properties th { border-bottom: 1px solid var(--vh-ui-border); padding: 0.375rem; vertical-align: top; overflow-wrap: anywhere; }
+  .vh-agent-tool-list__properties small { display: block; color: var(--vh-ui-muted); }
+  .vh-agent-tool-list__schema pre { white-space: pre-wrap; overflow-wrap: anywhere; }
+  .vh-agent-tool-list__unavailable { color: var(--vh-ui-muted); font-size: 0.6875rem; }
 }