@mcp-b/react-components 0.40.0 → 0.41.0

package/dist/styles/subagent-run.css

@@ -1,14 +1,27 @@
+/* Elevation-led like the composer: the edge is the hairline ring inside
+   --sigvelo-elevation-floating, not a border. Forced colors restores a real
+   border at the end of this file. */
 .subagent-run__selector {
   max-inline-size: 14rem;
   justify-content: flex-start;
   border-radius: var(--sigvelo-radius-full);
+  background-color: var(--sigvelo-color-surface-raised);
+  box-shadow: var(--sigvelo-elevation-floating);
   text-align: start;
 }
 
+/* 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]) {
+  background-color: color-mix(
+    in oklab,
+    var(--sigvelo-color-surface-raised),
+    var(--sigvelo-color-text) 4%
+  );
+}
+
 .subagent-run__selector[aria-current="page"] {
-  border-color: var(--sigvelo-color-neutral-border-muted);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
-  box-shadow: inset 0 0 0 var(--sigvelo-border-width) var(--sigvelo-color-neutral-border-subtle);
 }
 
 .subagent-run__list {
@@ -71,7 +84,7 @@
 }
 
 .subagent-run__indicator:is([data-status="aborted"], [data-status="interrupted"]) {
-  color: var(--sigvelo-color-warning-text);
+  color: var(--sigvelo-color-text-muted);
 }
 
 .subagent-run__progress {
@@ -127,6 +140,10 @@
 }
 
 @media (forced-colors: active) {
+  .subagent-run__selector {
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
+  }
+
   .subagent-run__milestone::before {
     border-color: CanvasText;
   }

package/dist/styles/terminal.css

@@ -29,6 +29,25 @@
   color: var(--sigvelo-color-neutral-300);
 }
 
+.terminal__status {
+  font-family: var(--sigvelo-font-mono);
+  font-size: var(--sigvelo-text-2xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-color-neutral-300);
+}
+
+.terminal__status[data-status="running"] {
+  color: var(--sigvelo-color-primary-300);
+}
+
+.terminal__status[data-status="success"] {
+  color: var(--sigvelo-color-success-300);
+}
+
+.terminal__status[data-status="error"] {
+  color: var(--sigvelo-color-danger-300);
+}
+
 .terminal__actions {
   display: inline-flex;
   align-items: center;

package/dist/styles/test-results.css

@@ -15,6 +15,16 @@
   flex-wrap: wrap;
 }
 
+.test-results__outcome {
+  color: var(--sigvelo-color-success-text);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+.test-results__outcome[data-status="failed"] {
+  color: var(--sigvelo-color-danger-text);
+}
+
 .test-results__stats {
   display: inline-flex;
   align-items: center;
@@ -169,7 +179,6 @@
   justify-content: center;
   inline-size: var(--sigvelo-control-icon-size-md);
   block-size: var(--sigvelo-control-icon-size-md);
-  border-radius: var(--sigvelo-radius-full);
   flex-shrink: 0;
   transition: color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }

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

@@ -21,9 +21,8 @@
   color: var(--sigvelo-color-danger-text);
 }
 
-.think-execution-status[data-tone="warning"] {
-  color: var(--sigvelo-color-warning-text);
-}
+/* The paused tone keeps the base muted colour: stopped is not a state that
+   earns an accent — only success, failure, and running do. */
 
 .think-execution-status[data-tone="primary"] {
   color: var(--sigvelo-color-primary-text);
@@ -47,14 +46,7 @@
 .think-execution-run-summary__copy {
   min-inline-size: 0;
   display: grid;
-  row-gap: var(--sigvelo-spacing-1);
-}
-
-.think-execution-run-summary__heading {
-  min-inline-size: 0;
-  display: flex;
-  align-items: baseline;
-  gap: var(--sigvelo-spacing-2);
+  row-gap: var(--sigvelo-spacing-0-5);
 }
 
 .think-execution-run-summary__title {
@@ -63,19 +55,11 @@
   font-weight: var(--sigvelo-font-weight-semibold);
 }
 
-.think-execution-run-summary__copy code {
+/* Kind · status · time on one muted line — the glyph carries the colour, the
+   words carry the meaning, and identifiers stay off the roster entirely. */
+.think-execution-run-summary__meta {
   min-inline-size: 0;
-  overflow: hidden;
-  color: var(--sigvelo-color-text-muted);
-  overflow-wrap: anywhere;
-  font-family: var(--sigvelo-font-mono);
-  font-size: var(--sigvelo-text-xs);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.think-execution-run-summary__progress {
-  color: var(--sigvelo-color-text-muted);
+  /* The routine roster's secondary-line colour: muted, nudged toward text. */
+  color: color-mix(in oklab, var(--sigvelo-color-text-muted), var(--sigvelo-color-text) 12%);
   font-size: var(--sigvelo-text-xs);
-  line-height: var(--sigvelo-leading-tight);
 }

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

@@ -1,16 +1,20 @@
+/*
+ * One quiet canvas and one pane, like the workspace slot it lives in: the run
+ * list is a gap-separated roster (routine-library anatomy), and a selected
+ * run replaces it with a mini-page — eyebrow, title, hairline fact rows —
+ * the way opening a file replaces the workspace browser.
+ */
 .think-execution-workbench {
+  position: relative;
   min-inline-size: 0;
   min-block-size: 0;
   display: flex;
   flex: 1;
   flex-direction: column;
+  block-size: 100%;
   overflow: hidden;
   container-type: inline-size;
-  background: color-mix(
-    in oklab,
-    var(--sigvelo-color-canvas),
-    var(--sigvelo-color-primary-bg-subtle) 18%
-  );
+  /* No paint: the workbench card (or whatever plane hosts it) shows through. */
   color: var(--sigvelo-color-text);
 }
 
@@ -23,24 +27,32 @@
   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 {
-  margin: var(--sigvelo-spacing-3) var(--sigvelo-spacing-3) 0;
-  min-block-size: var(--sigvelo-control-height-xs);
-  padding-block: var(--sigvelo-spacing-1);
-  padding-inline: var(--sigvelo-spacing-2-5);
+  position: absolute;
+  z-index: 2;
+  inset-block-start: var(--sigvelo-spacing-3);
+  inset-inline: 50% auto;
+  max-inline-size: min(32rem, calc(100% - 2rem));
+  padding: var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-danger-border-subtle);
   border-radius: var(--sigvelo-radius-sm);
-  background: var(--sigvelo-color-danger-bg-subtle);
+  translate: -50% 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
   color: var(--sigvelo-color-danger-text);
-  font-size: var(--sigvelo-text-xs);
+  background: var(--sigvelo-color-danger-bg-subtle);
+  font-size: var(--sigvelo-text-compact);
 }
 
 .think-execution-workbench__content {
   min-block-size: 0;
   display: grid;
   flex: 1;
-  grid-template-rows: minmax(12rem, 0.75fr) minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
   overflow: hidden;
 }
 
@@ -51,25 +63,13 @@
   overflow: auto;
 }
 
-.think-execution-detail {
-  display: grid;
-  align-content: start;
-  gap: var(--sigvelo-spacing-3);
-  min-inline-size: 0;
-}
-
-/* Only the container concerns — the block inside is `EmptyState`, and this
-   component is documented as reusable outside the workbench, so it does not
-   reach for a workbench class to fill itself. */
-.think-execution-detail--empty {
-  align-content: center;
-  justify-items: center;
-  min-block-size: 12rem;
-}
-
-.think-execution-workbench__run-list {
-  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
+/* Roster column cap (the Ploy number) so full-page routes don't stretch rows
+   across the whole viewport; narrow hosts are unaffected. */
+.think-execution-workbench__list-header,
+.think-execution-workbench__list,
+.think-execution-workbench__empty {
+  inline-size: min(100%, 50rem);
+  margin-inline: auto;
 }
 
 .think-execution-workbench__list-header {
@@ -88,17 +88,21 @@
   line-height: var(--sigvelo-leading-tight);
 }
 
+/* Same hairline-bounded band the routine library gives its empty run section. */
 .think-execution-workbench__empty {
-  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-spacing-2-5);
+  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-spacing-4);
 
-  margin: var(--sigvelo-spacing-3);
+  border-block: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
 }
 
 .think-execution-workbench__list {
-  margin: 0;
-  padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
+  /* Block only — the roster-cap rule above owns margin-inline. */
+  margin-block: 0;
+  padding: 0 var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
   list-style: none;
   display: grid;
+  gap: var(--sigvelo-spacing-1);
 }
 
 .think-execution-workbench__list > li {
@@ -106,114 +110,103 @@
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   min-inline-size: 0;
-  border-radius: var(--sigvelo-radius-sm);
+  border-radius: var(--sigvelo-radius-md);
   transition: background-color var(--sigvelo-motion-duration-interaction)
     var(--sigvelo-motion-ease-change);
 }
 
-.think-execution-workbench__list > li:not(:last-child) {
-  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-}
-
-.think-execution-workbench__list > li[data-selected="true"] {
-  background: color-mix(
-    in oklab,
-    var(--sigvelo-color-primary-bg-subtle),
-    var(--sigvelo-color-surface) 70%
-  );
-}
-
 .think-execution-workbench__run {
   min-inline-size: 0;
-  min-block-size: calc(var(--sigvelo-control-height-xl) + var(--sigvelo-spacing-3));
+  min-block-size: var(--sigvelo-spacing-14);
   display: flex;
-  padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-spacing-1);
+  padding: var(--sigvelo-spacing-2);
   border-radius: inherit;
   text-align: start;
 }
 
-.think-execution-workbench__detail-header code {
-  min-inline-size: 0;
-  overflow: hidden;
-  color: var(--sigvelo-color-text-muted);
-  overflow-wrap: anywhere;
-  font-family: var(--sigvelo-font-mono);
-  font-size: var(--sigvelo-text-xs);
-}
-
 .think-execution-workbench__run-actions {
   inline-size: var(--sigvelo-control-height-sm);
   min-block-size: var(--sigvelo-control-height-sm);
   margin-inline-end: var(--sigvelo-spacing-1);
 }
 
-.think-execution-workbench__detail {
+/* The detail pane owns scrolling; the mini-page inside centres itself. */
+.think-execution-detail {
   display: grid;
   align-content: start;
-  gap: var(--sigvelo-spacing-3);
-  padding: var(--sigvelo-spacing-3);
-  background: var(--sigvelo-color-surface);
+  gap: var(--sigvelo-spacing-4);
+  /* The routine library's single-column measure and page padding. */
+  inline-size: min(100%, 46rem);
+  min-inline-size: 0;
+  margin-inline: auto;
+  padding: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
 }
 
-.think-execution-workbench__detail-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--sigvelo-spacing-3);
-  min-inline-size: 0;
+/* Only the container concerns — the block inside is `EmptyState`, and this
+   component is documented as reusable outside the workbench, so it does not
+   reach for a workbench class to fill itself. */
+.think-execution-detail--empty {
+  align-content: center;
+  justify-items: center;
+  min-block-size: 12rem;
+  block-size: 100%;
 }
 
-.think-execution-workbench__detail-header > div {
+.think-execution-detail__header {
   min-inline-size: 0;
+  display: grid;
+  gap: var(--sigvelo-spacing-1);
 }
 
-.think-execution-workbench__detail-status {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  gap: var(--sigvelo-spacing-2);
+.think-execution-detail__eyebrow {
+  margin: 0;
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-xs);
-  text-align: end;
-}
-
-.think-execution-workbench__detail-status > div {
-  display: grid;
-  gap: var(--sigvelo-spacing-0-5);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
 
-.think-execution-workbench__detail-status strong {
-  color: var(--sigvelo-color-text);
-  font-weight: var(--sigvelo-font-weight-semibold);
+.think-execution-detail__heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
 }
 
-.think-execution-workbench__detail h3 {
+.think-execution-detail__heading h3 {
+  min-inline-size: 0;
   margin: 0;
-  font-size: var(--sigvelo-text-sm);
+  overflow-wrap: anywhere;
+  font-size: var(--sigvelo-text-lg);
   font-weight: var(--sigvelo-font-weight-semibold);
+  letter-spacing: -0.025em;
   line-height: var(--sigvelo-leading-tight);
 }
 
-@container (width >= 44rem) {
-  .think-execution-workbench__content {
-    grid-template-rows: minmax(0, 1fr);
-    grid-template-columns: minmax(15rem, 0.85fr) minmax(21rem, 1.15fr);
-  }
+.think-execution-detail__header code {
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--sigvelo-color-text-muted);
+  overflow-wrap: anywhere;
+  font-family: var(--sigvelo-font-mono);
+  font-size: var(--sigvelo-text-xs);
+}
 
-  .think-execution-workbench__run-list {
-    border-block-end: 0;
-    border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-      var(--sigvelo-color-neutral-border-subtle);
-  }
+.think-execution-detail__error {
+  margin: 0;
+  padding: var(--sigvelo-spacing-2) var(--sigvelo-spacing-2-5);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-danger-border-subtle);
+  border-radius: var(--sigvelo-radius-sm);
+  background: var(--sigvelo-color-danger-bg-subtle);
+  color: var(--sigvelo-color-danger-text);
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-leading-relaxed);
+  overflow-wrap: anywhere;
 }
 
-@media (forced-colors: active) {
-  .think-execution-workbench {
-    border: var(--sigvelo-border-style) var(--sigvelo-border-width) canvastext;
-    background: canvas;
-    color: canvastext;
-    box-shadow: none;
-  }
+.think-execution-detail__facts {
+  font-size: var(--sigvelo-text-compact);
 }