@mcp-b/react-components 0.47.0 → 0.49.0

package/dist/styles/message.css

@@ -127,14 +127,6 @@
   border-radius: var(--sigvelo-radius-md);
 }
 
-/* Quiet annotation under a part whose stored content was compacted. */
-.message__compacted {
-  margin-block-start: var(--sigvelo-spacing-1);
-  font-size: var(--sigvelo-text-meta);
-  font-style: italic;
-  color: var(--sigvelo-color-text-muted);
-}
-
 .message__meta {
   display: flex;
   align-items: center;
@@ -166,7 +158,7 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.message__actions--reserved {
+.message__actions[data-reserve-space] {
   min-block-size: var(--sigvelo-control-height-xs);
 }
 
@@ -207,7 +199,7 @@
 }
 
 @media (any-pointer: coarse) {
-  .message__actions--reserved {
+  .message__actions[data-reserve-space] {
     min-block-size: var(--sigvelo-control-height-xl);
   }
 

package/dist/styles/queue.css

@@ -60,6 +60,19 @@
   gap: var(--sigvelo-spacing-2);
 }
 
+.queue__section-content {
+  display: grid;
+  gap: var(--sigvelo-layout-cluster);
+  min-inline-size: 0;
+}
+
+.queue__section-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--sigvelo-spacing-1);
+}
+
 .queue__list {
   margin-block: var(--sigvelo-spacing-2) var(--sigvelo-spacing-1);
 }
@@ -179,10 +192,61 @@
   opacity: 1;
 }
 
+.queue__item-actions[data-persistent] {
+  opacity: 1;
+}
+
 .queue__item-action {
   min-inline-size: 0;
 }
 
+.queue[data-density="compact"] {
+  --queue-row-block-size: var(--sigvelo-spacing-5);
+  /* Whole rows plus the list's own row gaps (.queue__list-inner). */
+  --queue-list-max-block-size: calc(
+    3 * var(--queue-row-block-size) + 2 * var(--sigvelo-spacing-0-5)
+  );
+
+  gap: 0;
+}
+
+.queue[data-density="compact"] .queue__list {
+  margin-block: 0;
+}
+
+.queue[data-density="compact"] .queue__list-viewport {
+  max-block-size: var(--queue-list-max-block-size);
+}
+
+.queue[data-density="compact"] .queue__item {
+  align-items: center;
+  min-block-size: var(--queue-row-block-size);
+  gap: var(--sigvelo-spacing-1-5);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-spacing-2);
+}
+
+.queue[data-density="compact"] .queue__item-indicator {
+  inline-size: var(--sigvelo-text-sm);
+  block-size: var(--sigvelo-text-sm);
+  margin-block-start: 0;
+}
+
+.queue[data-density="compact"] .queue__item-content {
+  gap: 0;
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-text-compact-leading);
+}
+
+.queue[data-density="compact"] .queue__item-action {
+  --sigvelo-recipe-button-height: var(--queue-row-block-size);
+  --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-1-5);
+  --sigvelo-recipe-button-font-size: var(--sigvelo-text-xs);
+  --sigvelo-recipe-button-icon-size: var(--sigvelo-text-xs);
+
+  font-weight: var(--sigvelo-font-weight-normal);
+}
+
 .queue__item-attachment {
   display: flex;
   align-items: center;
@@ -218,6 +282,13 @@
   }
 }
 
+@media (any-pointer: coarse) {
+  .queue[data-density="compact"] {
+    --queue-row-block-size: var(--sigvelo-control-height-xl);
+    --queue-list-max-block-size: calc(2 * var(--queue-row-block-size) + var(--sigvelo-spacing-0-5));
+  }
+}
+
 .queue__item-file-icon {
   display: inline-flex;
   color: var(--sigvelo-color-text-muted);

package/dist/styles/subagent-run.css

@@ -3,7 +3,7 @@
    border at the end of this file. */
 .subagent-run__selector {
   max-inline-size: 18rem;
-  /* Two text lines (name over live status) inside a pill: the control's fixed
+  /* Two text lines (name over live status) inside a control: the control's fixed
      small height would clip the second, so let the content size it. */
   block-size: auto;
   min-block-size: var(--sigvelo-density-compact-control-height);
@@ -15,7 +15,7 @@
   text-align: start;
 }
 
-/* The run's name over its live status line. Shared by the selector chip and
+/* The run's name over its live status line. Shared by the selector and
    the drill-in's top bar so one run reads the same in both. */
 .subagent-run__text {
   display: grid;
@@ -30,14 +30,14 @@
   line-height: var(--sigvelo-leading-snug);
 }
 
-/* Scoped to the label, not the chip, so the drill-in bar tints the same. */
+/* Scoped to the label, not the control, so the drill-in bar tints the same. */
 .subagent-run__text[data-status="error"] .subagent-run__status {
   color: var(--sigvelo-color-danger-text);
 }
 
 /* The ghost hover would swap the raised surface for a near-transparent tint;
    keep the surface and tint over it instead. */
-.subagent-run__selector:hover:not([data-disabled]) {
+.subagent-run__selector:hover:not([data-disabled], [data-surface="plain"]) {
   background-color: color-mix(
     in oklab,
     var(--sigvelo-color-surface-raised),
@@ -45,6 +45,93 @@
   );
 }
 
+.subagent-run__selector[data-surface="plain"] {
+  flex: 1 1 auto;
+  inline-size: 100%;
+  max-inline-size: none;
+  min-block-size: 0;
+  padding: 0;
+  border-radius: var(--sigvelo-radius-sm);
+  background: transparent;
+}
+
+/* Drop the raised chip's elevation, never the focus ring the button recipe
+   draws with the same property. */
+.subagent-run__selector[data-surface="plain"]:not(:focus-visible) {
+  box-shadow: none;
+}
+
+/* A delegated row is two text lines (name over status). The shared compact
+   queue caps its viewport at whole rows of --queue-row-block-size, so the
+   row measure has to say what the row actually is. */
+[data-subagent-run-panel] .queue[data-density="compact"] {
+  --queue-row-block-size: calc(
+    var(--sigvelo-text-compact-leading) + var(--sigvelo-text-xs) * var(--sigvelo-leading-snug)
+  );
+}
+
+@media (any-pointer: coarse) {
+  [data-subagent-run-panel] .queue[data-density="compact"] {
+    --queue-row-block-size: var(--sigvelo-control-height-xl);
+  }
+}
+
+/* The report disclosure above a run's transcript on the employee run route;
+   a fixed band, so the transcript beneath it takes the remaining height. */
+.subagent-run__report {
+  flex: 0 0 auto;
+  min-inline-size: 0;
+  padding-inline: var(--sigvelo-layout-gutter);
+  border-block-end: var(--sigvelo-border-width) var(--sigvelo-border-style)
+    var(--sigvelo-color-neutral-border-subtle);
+  font-size: var(--sigvelo-text-compact);
+}
+
+.subagent-run__report-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-2);
+  inline-size: 100%;
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: 0;
+  border: none;
+  border-radius: var(--sigvelo-radius-sm);
+  background: transparent;
+  color: var(--sigvelo-color-text-muted);
+  font: inherit;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  text-align: start;
+  cursor: pointer;
+}
+
+.subagent-run__report-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
+}
+
+.subagent-run__report-trigger::after {
+  content: "";
+  flex: 0 0 auto;
+  inline-size: 0;
+  block-size: 0;
+  border-inline: var(--sigvelo-spacing-1) solid transparent;
+  border-block-start: var(--sigvelo-spacing-1) solid currentColor;
+  transition: rotate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+}
+
+.subagent-run__report-trigger[data-panel-open]::after {
+  rotate: 180deg;
+}
+
+.subagent-run__report .subagent-run__metadata {
+  padding-block-end: var(--sigvelo-spacing-2);
+}
+
+.subagent-run__selector[data-surface="plain"]:hover:not([data-disabled]) {
+  background: transparent;
+}
+
 .subagent-run__selector[aria-current="page"] {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
 }
@@ -61,10 +148,35 @@
 
 .subagent-run__list-item {
   min-inline-size: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+}
+
+.subagent-run__metadata p {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.subagent-run__metadata [role="alert"] {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.subagent-run__metadata {
+  display: grid;
+  gap: var(--sigvelo-spacing-2);
+  min-inline-size: 0;
+  max-block-size: 12rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-leading-normal);
 }
 
-.subagent-run__list--adjacent {
-  margin-block-start: var(--sigvelo-spacing-2);
+.subagent-run__metadata p,
+.subagent-run__milestone {
+  white-space: pre-wrap;
 }
 
 /* Size comes from the surrounding control — the selector's button recipe, the
@@ -158,6 +270,10 @@
     border-color: CanvasText;
   }
 
+  .subagent-run__report {
+    border-color: CanvasText;
+  }
+
   .subagent-run__indicator {
     color: CanvasText;
   }

package/dist/styles/test-results.css

@@ -148,7 +148,7 @@
   font-variant-numeric: tabular-nums;
 }
 
-.test-results__suite-tests {
+.test-results__suite-content {
   display: flex;
   flex-direction: column;
   margin: 0;
@@ -213,11 +213,8 @@
   font-variant-numeric: tabular-nums;
 }
 
-.test-results__test-children {
-  flex-basis: 100%;
-}
-
 .test-results__error {
+  flex-basis: 100%;
   margin-block-start: var(--sigvelo-spacing-1-5);
   margin-inline-start: var(--sigvelo-spacing-4);
 }

package/dist/styles/think-chat-activity.css

@@ -0,0 +1,13 @@
+/* Reveal row for step logs capped at the trailing window. */
+.think-chat-activity__show-earlier {
+  align-self: flex-start;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.think-chat-activity__runs {
+  margin-block: var(--sigvelo-spacing-2) 0;
+  padding: 0;
+  list-style: none;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+}

package/dist/styles/think-chat-tool-panels.css

@@ -0,0 +1,81 @@
+.think-chat-tool-panels__call-audit {
+  display: flex;
+  min-inline-size: 0;
+  flex-direction: column;
+  gap: var(--sigvelo-spacing-1);
+}
+
+.think-chat-tool-panels__call-audit-label {
+  font-size: var(--sigvelo-text-meta);
+  font-weight: var(--sigvelo-font-weight-normal);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.think-chat-tool-panels__call-audit-list {
+  display: flex;
+  min-inline-size: 0;
+  flex-direction: column;
+  gap: var(--sigvelo-spacing-1);
+  margin: 0;
+  padding-inline-start: 0;
+  list-style: none;
+  font-size: var(--sigvelo-text-code);
+}
+
+.think-chat-tool-panels__call-audit-item {
+  min-inline-size: 0;
+  padding-inline-start: 0;
+  color: var(--sigvelo-color-text);
+  overflow-wrap: anywhere;
+}
+
+.think-chat-tool-panels__call-audit-code,
+.think-chat-tool-panels__call-audit-result {
+  font-family: var(--sigvelo-font-mono);
+  white-space: pre-wrap;
+}
+
+.think-chat-tool-panels__call-audit-state {
+  margin-inline-start: var(--sigvelo-spacing-1);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.think-chat-tool-panels__call-audit-item[data-state="error"]
+  .think-chat-tool-panels__call-audit-state {
+  color: var(--sigvelo-color-danger-text-on-subtle);
+}
+
+.think-chat-tool-panels__call-audit-item[data-state="reverted"]
+  .think-chat-tool-panels__call-audit-state {
+  text-decoration: line-through;
+}
+
+/* Keep nested browser content compact without restyling the Tabs primitive. */
+.think-chat-tool-panels__browser-panel {
+  padding-block: var(--sigvelo-spacing-2) 0;
+}
+
+.think-chat-tool-panels__browser-screenshot {
+  display: block;
+  inline-size: 100%;
+  /* Screenshot well. Not --sigvelo-layout-sidebar. */
+  max-block-size: 16rem;
+  aspect-ratio: 16 / 10;
+  object-fit: contain;
+  border-radius: var(--sigvelo-radius-md);
+  background-color: var(--sigvelo-color-surface);
+}
+
+/* Mini diff inside an edit panel */
+.think-chat-tool-panels__diff-del {
+  color: var(--sigvelo-color-danger-text-on-subtle);
+}
+
+.think-chat-tool-panels__diff-add {
+  color: var(--sigvelo-color-success-text-on-subtle);
+}
+
+/* Bound individual code details, not the complete activity list. */
+.think-chat-tool-panels__code-block {
+  max-block-size: 12rem;
+}

package/dist/styles/think-execution-workbench.css

@@ -22,11 +22,6 @@
   flex: 0 0 auto;
 }
 
-.think-execution-workbench__title {
-  margin: 0;
-  font: inherit;
-}
-
 /* The routine library's floating error notice overlays rather than
    reflows, so a failed action never shoves the roster around. */
 .think-execution-workbench__error {
@@ -53,11 +48,10 @@
   display: grid;
   flex: 1;
   grid-template-rows: var(--sigvelo-layout-track-fill);
-  overflow: hidden;
+  overflow: auto;
 }
 
-.think-execution-workbench__run-list,
-.think-execution-workbench__detail {
+.think-execution-workbench__run-list {
   min-inline-size: 0;
   min-block-size: 0;
   overflow: auto;