@mcp-b/react-components 0.41.0 → 0.43.0

package/dist/styles/activity-header.css

@@ -1,58 +1,32 @@
 .activity__header {
   display: flex;
-  width: 100%;
-  min-width: 0;
+  inline-size: 100%;
+  min-inline-size: 0;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  color: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
+  color: inherit;
   font-family: inherit;
-  font-size: var(--sigvelo-text-compact);
-  font-weight: var(--sigvelo-font-weight-semibold);
+  font-size: var(--sigvelo-text-prose);
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: var(--sigvelo-text-prose-leading);
   text-align: start;
 }
 
-/*
- * The action holds its content width and the detail absorbs whatever is left,
- * so the two shrink in the right order: a long path loses its tail while
- * "Reading" stays legible. Basis 0 on the detail is what makes it the flexible
- * one; the trailing affordance stays adjacent until the width is exhausted.
- *
- * With no detail present the action is the only flexible item, so a settled
- * summary sentence still truncates rather than inflating its owner.
- */
+/* Action keeps its content width; the detail takes the leftover track. */
 .activity__header-action {
   flex: 0 1 auto;
-  min-width: 0;
-  max-width: max-content;
-  overflow: hidden;
-  color: var(--sigvelo-color-text);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  min-inline-size: 0;
+  color: inherit;
+  overflow-wrap: anywhere;
 }
 
-/*
- * The target of the action — a path, a command, a query. Muted, because in a
- * column of activity lines the verb is what the reader scans for.
- *
- * Faded rather than ellipsed: this is data, and a trailing "…" reads as part of
- * the value it is truncating.
- *
- * The fade is unconditional because it does not need a condition. Growing to
- * fill the free space means the box is wider than short text, so the gradient
- * lands on empty space and only bites once the text actually reaches the edge.
- */
+/* Path, command, or query. Muted so the verb stays the scan target. */
 .activity__header-detail {
   flex: 1 1 0;
-  min-width: 0;
-  overflow: hidden;
+  min-inline-size: 0;
   color: var(--sigvelo-color-text-muted);
   font-weight: var(--sigvelo-font-weight-normal);
-  white-space: nowrap;
-  mask-image: linear-gradient(
-    to right,
-    #000 calc(100% - var(--sigvelo-spacing-4)),
-    transparent 100%
-  );
+  overflow-wrap: anywhere;
 }
 
 .activity__item-icon {

package/dist/styles/activity.css

@@ -5,18 +5,15 @@
   flex-direction: column;
   inline-size: 100%;
   min-inline-size: 0;
-  /* Hard cap, Codex-style, on the WHOLE unit — collapsed line and expanded
-     log alike — so toggling never reflows the conversation width. Plain rem,
-     not min(100%, …): percentages are ignored in intrinsic-size contributions,
-     so the min() let wide nowrap rows inflate content-sized ancestors. */
-  max-inline-size: 36rem;
+  max-inline-size: 100%;
   /* Live tool labels and panels must never contribute a wider intrinsic size
      when Activity is inserted into a narrow chat transcript. */
   contain: inline-size;
-  /* Whitespace separates the work log from message prose around it */
   margin-block: var(--sigvelo-spacing-2);
   font-family: inherit;
-  color: var(--sigvelo-color-text);
+  /* Codex `conversation-body`: same ink as the turn, at 60%. Size matches
+     chat (`text-size-chat`); opacity is what marks the row as status. */
+  color: color-mix(in oklab, var(--sigvelo-color-text) 60%, transparent);
 }
 
 .activity__trigger {
@@ -26,19 +23,15 @@
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
   padding-block: var(--sigvelo-spacing-1-5);
-  /* The fill bleeds past the text edge via the negative margin, so the label
-     stays flush with the rows below instead of indenting on hover */
-  padding-inline: var(--sigvelo-spacing-2);
-  margin-inline: calc(var(--sigvelo-spacing-2) * -1);
+  padding-inline: 0;
   background-color: transparent;
   border: none;
   border-radius: var(--sigvelo-radius-sm);
-  /* A step dimmer than message prose (Codex-style) so the line reads as
-     status, not content */
-  color: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
+  color: inherit;
   font-family: inherit;
-  font-size: var(--sigvelo-text-compact);
-  font-weight: var(--sigvelo-font-weight-semibold);
+  font-size: var(--sigvelo-text-prose);
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: var(--sigvelo-text-prose-leading);
   text-align: start;
   cursor: pointer;
   transition:
@@ -69,9 +62,6 @@
 }
 
 .activity__content {
-  /* The panel clips (overflow: hidden), so it must own the gutter the row
-     hover fills bleed into — the list padding puts the text back in line */
-  margin-inline: calc(var(--sigvelo-spacing-2) * -1);
   /* Standard easing, not emphasized: the expo-out curve front-loads ~60% of
      the motion into the first frames, which makes collapsing read as content
      snapping upward instead of folding. */
@@ -84,7 +74,7 @@
   /* Unbounded on purpose: the expanded log flows in the conversation scroll;
      only subsection panels (group text, shell output, code) are height-capped. */
   padding-block: var(--sigvelo-spacing-0-5) var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-2);
+  padding-inline: 0;
 }
 
 /* Reveal row for step logs capped at the trailing window. */
@@ -97,9 +87,10 @@
   display: flex;
   align-items: baseline;
   gap: var(--sigvelo-spacing-1-5);
-  font-size: var(--sigvelo-text-compact);
-  color: var(--sigvelo-color-text);
-  line-height: var(--sigvelo-leading-relaxed);
+  font-size: var(--sigvelo-text-prose);
+  font-weight: var(--sigvelo-font-weight-normal);
+  color: inherit;
+  line-height: var(--sigvelo-text-prose-leading);
 }
 
 /* Second collapse level: the trigger reads as a plain item row; the panel is
@@ -113,20 +104,17 @@
   display: flex;
   align-items: baseline;
   gap: var(--sigvelo-spacing-1-5);
-  /* Negative margins cancel the padding, so the hover fill gets breathing
-     room while the row text stays aligned with its plain siblings */
   padding-block: var(--sigvelo-spacing-0-5);
-  padding-inline: var(--sigvelo-spacing-2);
+  padding-inline: 0;
   margin-block: -var(--sigvelo-spacing-0-5);
-  margin-inline: calc(var(--sigvelo-spacing-2) * -1);
   background: none;
   border: none;
   border-radius: var(--sigvelo-radius-sm);
   font-family: inherit;
-  font-size: var(--sigvelo-text-compact);
-  font-weight: inherit;
-  color: var(--sigvelo-color-text);
-  line-height: var(--sigvelo-leading-relaxed);
+  font-size: var(--sigvelo-text-prose);
+  font-weight: var(--sigvelo-font-weight-normal);
+  color: inherit;
+  line-height: var(--sigvelo-text-prose-leading);
   text-align: start;
   cursor: pointer;
   transition: background-color var(--sigvelo-motion-duration-interaction)
@@ -171,8 +159,9 @@
 /* Prose panels (thought traces): quiet text, bounded like everything else */
 .activity__group-text {
   margin: 0;
-  font-size: var(--sigvelo-text-compact);
-  line-height: var(--sigvelo-leading-relaxed);
+  font-size: var(--sigvelo-text-prose);
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: var(--sigvelo-text-prose-leading);
   color: var(--sigvelo-color-text-muted);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
@@ -192,23 +181,24 @@
   display: flex;
   flex-direction: column;
   gap: var(--sigvelo-spacing-1);
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-spacing-1);
+  /* Tighter than Codex exec `px-2` — the card already sits in the column. */
+  padding-inline: var(--sigvelo-spacing-1);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-md);
 }
 
 .activity__shell-label {
-  font-size: var(--sigvelo-text-2xs);
-  font-weight: var(--sigvelo-font-weight-semibold);
+  font-size: var(--sigvelo-text-meta);
+  font-weight: var(--sigvelo-font-weight-normal);
   color: var(--sigvelo-color-text-muted);
 }
 
 .activity__shell-output {
   margin: 0;
   font-family: var(--sigvelo-font-mono);
-  font-size: var(--sigvelo-text-xs);
-  line-height: var(--sigvelo-leading-relaxed);
+  font-size: var(--sigvelo-text-code);
+  line-height: var(--sigvelo-text-code-leading);
   color: var(--sigvelo-color-text);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
@@ -216,7 +206,7 @@
 
 .activity__shell-status {
   align-self: flex-end;
-  font-size: var(--sigvelo-text-2xs);
+  font-size: var(--sigvelo-text-meta);
   color: var(--sigvelo-color-success-text-on-subtle);
 }
 
@@ -232,8 +222,8 @@
 }
 
 .activity__call-audit-label {
-  font-size: var(--sigvelo-text-2xs);
-  font-weight: var(--sigvelo-font-weight-semibold);
+  font-size: var(--sigvelo-text-meta);
+  font-weight: var(--sigvelo-font-weight-normal);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -243,13 +233,14 @@
   flex-direction: column;
   gap: var(--sigvelo-spacing-1);
   margin: 0;
-  padding-inline-start: var(--sigvelo-spacing-4);
-  font-size: var(--sigvelo-text-xs);
+  padding-inline-start: 0;
+  list-style: none;
+  font-size: var(--sigvelo-text-code);
 }
 
 .activity__call-audit-item {
   min-inline-size: 0;
-  padding-inline-start: var(--sigvelo-spacing-0-5);
+  padding-inline-start: 0;
   color: var(--sigvelo-color-text);
   overflow-wrap: anywhere;
 }
@@ -302,7 +293,9 @@
 .activity__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);
@@ -339,18 +332,14 @@
 .activity__item-detail {
   flex: 1 1 0;
   min-inline-size: 0;
-  overflow: hidden;
   color: var(--sigvelo-color-text-muted);
-  white-space: nowrap;
-  mask-image: linear-gradient(to right, #000 calc(100% - 1rem), transparent 100%);
+  overflow-wrap: anywhere;
 }
 
 /* The action keeps its content width once a detail is beside it to shrink. */
 .activity__item:has(.activity__item-detail) .activity__item-text,
 .activity__group-trigger:has(.activity__item-detail) .activity__item-text {
   flex: 0 1 auto;
-  overflow-wrap: normal;
-  white-space: nowrap;
 }
 
 @media (hover: none) {
@@ -359,12 +348,8 @@
   }
 }
 
-/* Row labels always clamp to one line, Codex-style — the expanded panel
-   carries the full `$ command`, the row stays a trimmed summary. */
 .activity__group-trigger .activity__item-text {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  overflow-wrap: anywhere;
 }
 
 @media (forced-colors: active) {

package/dist/styles/agent-attention.css

@@ -1,7 +1,7 @@
 .agent-attention {
   display: grid;
-  width: min(22rem, 100%);
-  min-width: 0;
+  inline-size: min(22rem, 100%);
+  min-inline-size: 0;
   gap: var(--sigvelo-spacing-1-5);
   padding: var(--sigvelo-spacing-1-5);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -19,16 +19,16 @@
 .agent-attention__header,
 .agent-attention__trigger {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-columns: auto var(--sigvelo-layout-track-fill) auto;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .agent-attention__trigger.button {
-  width: 100%;
-  height: auto;
-  min-height: var(--sigvelo-control-height-sm);
+  inline-size: 100%;
+  block-size: auto;
+  min-block-size: var(--sigvelo-control-height-sm);
   justify-content: stretch;
   padding: var(--sigvelo-spacing-1-5);
   margin: calc(-1 * var(--sigvelo-spacing-1-5));
@@ -38,8 +38,8 @@
 .agent-attention__icon {
   display: grid;
   place-items: center;
-  width: var(--sigvelo-control-height-xs);
-  height: var(--sigvelo-control-height-xs);
+  inline-size: var(--sigvelo-control-height-xs);
+  block-size: var(--sigvelo-control-height-xs);
   border-radius: var(--sigvelo-radius-sm);
   color: var(--sigvelo-color-text-muted);
   background: var(--sigvelo-color-neutral-bg-subtle);
@@ -51,13 +51,13 @@
 }
 
 .agent-attention__icon > :is(svg, img) {
-  width: 1rem;
-  height: 1rem;
+  inline-size: 1rem;
+  block-size: 1rem;
 }
 
 .agent-attention__text {
   display: grid;
-  min-width: 0;
+  min-inline-size: 0;
   line-height: var(--sigvelo-leading-snug);
 }
 
@@ -72,7 +72,7 @@
 }
 
 .agent-attention__body {
-  min-width: 0;
+  min-inline-size: 0;
   overflow: hidden;
   border-radius: var(--sigvelo-radius-sm);
 }
@@ -86,7 +86,7 @@
 
 @media (any-pointer: coarse) {
   .agent-attention__trigger.button {
-    min-height: var(--sigvelo-control-height-xl);
+    min-block-size: var(--sigvelo-control-height-xl);
   }
 }