@mcp-b/react-components 0.48.0 → 0.49.0

package/dist/styles/button.css

@@ -2,6 +2,7 @@
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-md);
   --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-3);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-button-line-height: var(--sigvelo-control-line-height-md);
   --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-md);
   --sigvelo-recipe-button-radius: var(--sigvelo-recipe-control-radius);
 
@@ -18,7 +19,7 @@
   font-family: inherit;
   font-size: var(--sigvelo-recipe-button-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: var(--sigvelo-leading-compact);
+  line-height: var(--sigvelo-recipe-button-line-height);
   text-decoration: none;
   border-radius: var(--sigvelo-recipe-button-radius);
   translate: 0;
@@ -176,6 +177,7 @@
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-xs);
   --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-xs);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-xs);
+  --sigvelo-recipe-button-line-height: var(--sigvelo-control-line-height-xs);
   --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-xs);
 }
 
@@ -183,6 +185,7 @@
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-sm);
   --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-sm);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-sm);
+  --sigvelo-recipe-button-line-height: var(--sigvelo-control-line-height-sm);
   --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-sm);
 }
 
@@ -190,6 +193,7 @@
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-md);
   --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-md);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-button-line-height: var(--sigvelo-control-line-height-md);
   --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-md);
 }
 
@@ -197,6 +201,7 @@
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-lg);
   --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-lg);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-lg);
+  --sigvelo-recipe-button-line-height: var(--sigvelo-control-line-height-lg);
   --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-lg);
 }
 
@@ -204,6 +209,7 @@
   --sigvelo-recipe-button-height: var(--sigvelo-control-height-xl);
   --sigvelo-recipe-button-padding-inline: var(--sigvelo-control-padding-inline-xl);
   --sigvelo-recipe-button-font-size: var(--sigvelo-control-text-xl);
+  --sigvelo-recipe-button-line-height: var(--sigvelo-control-line-height-xl);
   --sigvelo-recipe-button-icon-size: var(--sigvelo-control-icon-size-xl);
 }
 

package/dist/styles/code-block.css

@@ -115,3 +115,15 @@
     border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }
+
+.code-block[data-surface="plain"] {
+  background-color: transparent;
+}
+
+.code-block[data-wrap] .code-block__content,
+.code-block[data-wrap] .code-block__content--highlighted pre.shiki,
+.code-block[data-wrap] .code-block__content--highlighted pre.shiki code {
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}

package/dist/styles/composition-motion.css

@@ -7,7 +7,6 @@
   .message,
   .queue,
   .queue__item,
-  .agent-chat__queued-message,
   .reasoning,
   .sources,
   .sources__item,
@@ -33,7 +32,6 @@
     .message,
     .queue,
     .queue__item,
-    .agent-chat__queued-message,
     .reasoning,
     .sources,
     .sources__item,

package/dist/styles/employee-chrome.css

@@ -0,0 +1,43 @@
+.employee-shell {
+  display: grid;
+  grid-template-rows: var(--sigvelo-layout-track-fill);
+  block-size: 100%;
+  min-block-size: 0;
+  min-inline-size: 0;
+}
+
+.employee-gate {
+  box-sizing: border-box;
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  gap: var(--sigvelo-spacing-3);
+  block-size: 100%;
+  padding: var(--sigvelo-layout-gutter);
+}
+
+.employee-shell__run-title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  margin: 0;
+  font: inherit;
+}
+
+.employee-menu__switch {
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-3);
+}
+
+.employee-menu__group-label {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1-5);
+}
+
+.employee-menu__hint {
+  display: inline-flex;
+  color: var(--sigvelo-color-text-muted);
+}

package/dist/styles/file-tree.css

@@ -57,6 +57,11 @@
   transition-behavior: allow-discrete;
 }
 
+/* Lazy listings must have a numeric starting size when their first rows arrive. */
+.file-tree__group:empty {
+  block-size: 0;
+}
+
 .file-tree__group[data-collapsed] {
   block-size: 0;
   visibility: hidden;

package/dist/styles/index.css

@@ -15,6 +15,8 @@
 @import "./accordion.css" layer(components);
 @import "./activity-header.css" layer(components);
 @import "./activity.css" layer(components);
+@import "./think-chat-tool-panels.css" layer(components);
+@import "./think-chat-activity.css" layer(components);
 @import "./agent-attention.css" layer(components);
 @import "./agent-connection.css" layer(components);
 @import "./agent-chat.css" layer(components);
@@ -35,6 +37,7 @@
 @import "./combobox.css" layer(components);
 @import "./context-menu.css" layer(components);
 @import "./dialog.css" layer(components);
+@import "./employee-chrome.css" layer(components);
 @import "./empty-state.css" layer(components);
 @import "./field.css" layer(components);
 @import "./fieldset.css" layer(components);
@@ -125,8 +128,7 @@
 @import "./think-execution-status.css" layer(components);
 @import "./think-execution-workbench.css" layer(components);
 @import "./think-full-app.css" layer(components);
-@import "./think-routine-library.css" layer(components);
-@import "./think-sidepanel.css" layer(components);
+@import "./think-routine.css" layer(components);
 @import "./think-thread-picker.css" layer(components);
 @import "./web-preview.css" layer(components);
 @import "./workspace-explorer.css" layer(components);

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;