@mcp-b/react-components 0.40.0 → 0.42.0

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)
@@ -12,23 +12,23 @@
   box-shadow: var(--sigvelo-elevation-raised);
 }
 
-.agent-attention[data-tone="warning"] {
-  border-color: var(--sigvelo-color-warning-border);
+.agent-attention[data-tone="attention"] {
+  border-color: var(--sigvelo-color-danger-border);
 }
 
 .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,26 +38,26 @@
 .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);
 }
 
-.agent-attention[data-tone="warning"] .agent-attention__icon {
-  color: var(--sigvelo-color-warning-text);
-  background: var(--sigvelo-color-warning-bg-subtle);
+.agent-attention[data-tone="attention"] .agent-attention__icon {
+  color: var(--sigvelo-color-danger-text);
+  background: var(--sigvelo-color-danger-bg-subtle);
 }
 
 .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);
   }
 }
 

package/dist/styles/agent-chat.css

@@ -1,14 +1,16 @@
 .agent-chat {
-  --agent-chat-content-max-inline-size: 64rem;
-  --agent-chat-composer-scrim-fade: 2.5rem;
-
+  /* Hooks, not constants: hosts set --agent-chat-content-max-inline-size or
+     --agent-chat-composer-scrim-fade on any ancestor. Declaring them here
+     would beat every inherited value, so the defaults live in the fallbacks
+     at each use site. */
   container: agent-chat / inline-size;
   position: relative;
-  inline-size: 100%;
-  block-size: 100%;
-  min-inline-size: 0;
-  min-block-size: 0;
-  background-color: var(--sigvelo-color-surface);
+  /* The colour the lane rests on. Hosts that seat the conversation on the
+     underlay rather than a plane of its own inherit --agent-chat-surface down
+     to here, so the composer's scrim dissolves into what is actually behind
+     it. Declared as a fallback rather than on .agent-chat itself: a local
+     custom property would beat the ancestor's value. */
+  background-color: var(--agent-chat-surface, var(--sigvelo-color-surface));
   color: var(--sigvelo-color-text);
   font-family: inherit;
 }
@@ -30,21 +32,24 @@
 
   min-inline-size: 0;
   max-inline-size: 100%;
-  /* The virtual wrapper is content-box (its JS-set height must exclude the
-     block padding), so the inline gutters land OUTSIDE this size — subtract
-     them from the full-width term or the padding box overflows the viewport
-     and end-aligned user rows hang past the right edge. */
-  inline-size: min(100% - 2 * var(--sigvelo-spacing-4), var(--agent-chat-content-max-inline-size));
+  /* Codex thread column: `mx-auto w-full max-w-(--thread-content-max-width)
+     px-toolbar`. Subtract the inset from the measure so content-box padding
+     cannot overflow the scroller or eat the composer clearance. */
+  --agent-chat-used-column-inset: var(--agent-chat-column-inset, var(--sigvelo-spacing-4));
+  inline-size: min(
+    calc(100% - 2 * var(--agent-chat-used-column-inset)),
+    var(--agent-chat-content-max-inline-size, var(--sigvelo-measure-wide-block))
+  );
   margin-inline: auto;
   /* Clearance = composer + its scrim band, so a transcript resting at the
      bottom never sits inside the fade. */
   padding-block: var(--message-scroller-virtual-block-start)
-    calc(var(--agent-chat-composer-size, 5rem) + var(--agent-chat-composer-scrim-fade));
-  padding-inline: var(--sigvelo-spacing-4);
+    calc(var(--agent-chat-composer-size, 5rem) + var(--agent-chat-composer-scrim-fade, 2.5rem));
+  padding-inline: var(--agent-chat-used-column-inset);
 }
 
 .agent-chat[data-composer-hidden] .agent-chat__transcript-content {
-  padding-block-end: var(--sigvelo-spacing-4);
+  padding-block-end: var(--sigvelo-layout-gutter);
 }
 
 .agent-chat__scroll-button {
@@ -88,14 +93,17 @@
   );
 
   display: grid;
-  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
-  inline-size: min(100%, var(--agent-chat-content-max-inline-size));
+  grid-template-rows: var(--sigvelo-layout-track-fill) auto var(--sigvelo-layout-track-fill);
+  inline-size: min(
+    100%,
+    var(--agent-chat-content-max-inline-size, var(--sigvelo-measure-wide-block))
+  );
   min-block-size: 100%;
   margin-inline: auto;
   padding-block: max(var(--agent-chat-start-screen-padding-block), env(safe-area-inset-top, 0px))
     max(var(--agent-chat-start-screen-padding-block), env(safe-area-inset-bottom, 0px));
-  padding-inline: max(var(--sigvelo-spacing-4), env(safe-area-inset-left, 0px))
-    max(var(--sigvelo-spacing-4), env(safe-area-inset-right, 0px));
+  padding-inline: max(var(--sigvelo-layout-gutter), env(safe-area-inset-left, 0px))
+    max(var(--sigvelo-layout-gutter), env(safe-area-inset-right, 0px));
 }
 
 .agent-chat-start-screen__primary {
@@ -108,7 +116,7 @@
 .agent-chat-start-screen__heading {
   margin: 0;
   color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-text-2xl);
+  font-size: var(--sigvelo-text-lg);
   font-weight: var(--sigvelo-font-weight-normal);
   letter-spacing: var(--sigvelo-tracking-normal);
   line-height: var(--sigvelo-text-lg-leading);
@@ -122,6 +130,11 @@
 }
 
 .agent-chat-start-screen__composer > .agent-chat__composer {
+  /* Grid item z-index, not isolation: the tray is a sibling and must paint
+     behind the card. isolation: isolate on .agent-chat__composer trapped the
+     inner z-index and left the tray as a second pill. */
+  isolation: auto;
+  z-index: 1;
   position: static;
   padding: 0;
   background: none;
@@ -199,7 +212,7 @@
 
 .agent-chat-starter {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto;
   align-items: center;
   border-radius: var(--sigvelo-radius-xl);
   transition: background-color var(--sigvelo-motion-duration-interaction)
@@ -218,14 +231,14 @@
   inline-size: 100%;
   min-block-size: var(--sigvelo-control-height-xl);
   min-inline-size: 0;
-  gap: var(--sigvelo-spacing-3);
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-gutter);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   background: transparent;
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-base);
+  font-size: var(--sigvelo-text-prose);
   font-weight: var(--sigvelo-font-weight-normal);
-  line-height: var(--sigvelo-leading-relaxed);
+  line-height: var(--sigvelo-text-prose-leading);
   text-align: start;
   white-space: normal;
   transition: color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
@@ -349,8 +362,13 @@
   inset-inline: 0;
   inset-block-end: 0;
   padding-block: 0 max(var(--sigvelo-spacing-6), env(safe-area-inset-bottom, 0px));
-  padding-inline: max(var(--sigvelo-spacing-6), env(safe-area-inset-left, 0px))
-    max(var(--sigvelo-spacing-6), env(safe-area-inset-right, 0px));
+  /* Same column as the transcript (Codex px-toolbar). The pill's own
+     padding lives on .prompt-input. */
+  padding-inline: max(
+      var(--agent-chat-column-inset, var(--sigvelo-spacing-4)),
+      env(safe-area-inset-left, 0px)
+    )
+    max(var(--agent-chat-column-inset, var(--sigvelo-spacing-4)), env(safe-area-inset-right, 0px));
 }
 
 /* Solid behind the composer itself, dissolving upward so passing transcript
@@ -360,30 +378,34 @@
   position: absolute;
   z-index: -1;
   inset: 0;
-  inset-block-start: calc(-1 * var(--agent-chat-composer-scrim-fade));
+  inset-block-start: calc(-1 * var(--agent-chat-composer-scrim-fade, 2.5rem));
   content: "";
   pointer-events: none;
   background: linear-gradient(
     to bottom,
     transparent,
-    var(--sigvelo-color-surface) var(--agent-chat-composer-scrim-fade)
+    var(--agent-chat-surface, var(--sigvelo-color-surface))
+      var(--agent-chat-composer-scrim-fade, 2.5rem)
   );
 }
 
 .agent-chat__composer > .prompt-input {
   z-index: 1;
-  inline-size: min(100%, var(--agent-chat-content-max-inline-size));
+  inline-size: min(
+    100%,
+    var(--agent-chat-content-max-inline-size, var(--sigvelo-measure-wide-block))
+  );
   margin-inline: auto;
   padding-block: var(--sigvelo-spacing-3);
 }
 
-/* Transient status pill between transcript and composer (recovery, errors). */
+/* Transient status between transcript and composer (recovery, errors). */
 .agent-chat__notice {
   display: flex;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
   margin-block-end: var(--sigvelo-spacing-2);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-text-meta);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -397,7 +419,8 @@
   flex-direction: column;
   align-items: stretch;
   inline-size: calc(
-    min(100%, var(--agent-chat-content-max-inline-size)) - var(--sigvelo-spacing-10)
+    min(100%, var(--agent-chat-content-max-inline-size, var(--sigvelo-measure-wide-block))) -
+      var(--sigvelo-spacing-10)
   );
   margin-inline: auto;
 }
@@ -421,8 +444,8 @@
   padding-block: 0;
   padding-inline: var(--sigvelo-spacing-2-5);
   color: var(--sigvelo-color-text);
-  font-size: var(--sigvelo-text-compact);
-  line-height: var(--sigvelo-leading-snug);
+  font-size: var(--sigvelo-text-prose);
+  line-height: var(--sigvelo-text-prose-leading);
 }
 
 .agent-chat__queued-indicator {
@@ -486,13 +509,14 @@
   border-radius: var(--sigvelo-radius-lg);
 }
 
+/* Wrap floor so retry actions stay on their own line. Not --sigvelo-layout-sidebar. */
 .agent-chat__turn-error-message {
   min-inline-size: min(100%, 16rem);
   flex: 1;
   margin: 0;
   overflow-wrap: anywhere;
-  font-size: var(--sigvelo-text-sm);
-  line-height: var(--sigvelo-leading-normal);
+  font-size: var(--sigvelo-text-prose);
+  line-height: var(--sigvelo-text-prose-leading);
 }
 
 .agent-chat__turn-error-actions {
@@ -527,13 +551,40 @@
    alignment off width top-aligned the start screen in a pane with hundreds of
    spare pixels under it. Only the height query below drops the centring, and
    only where there is genuinely no room for it. */
-@container agent-chat (width <= 36rem) {
+/* Local wrap. Not --sigvelo-layout-break-compact. */
+@container agent-chat (inline-size <= 36rem) {
+  .agent-chat__transcript-content {
+    /* A notch pushes the first row down only as far as it must: the desktop
+       inset already clears shallow insets, so only deeper ones add height. */
+    --message-scroller-virtual-block-start: max(
+      var(--sigvelo-spacing-8),
+      calc(var(--sigvelo-spacing-5) + env(safe-area-inset-top, 0px))
+    );
+
+    --agent-chat-used-column-inset: var(--agent-chat-column-inset, var(--sigvelo-spacing-2));
+    inline-size: min(
+      calc(100% - 2 * var(--agent-chat-used-column-inset)),
+      var(--agent-chat-content-max-inline-size, var(--sigvelo-measure-wide-block))
+    );
+    /* Codex Chrome extension: [--padding-toolbar:calc(var(--spacing)*2)] = 8px. */
+    padding-inline: var(--agent-chat-used-column-inset);
+  }
+
+  .agent-chat__composer {
+    padding-block-end: max(var(--sigvelo-layout-stack), env(safe-area-inset-bottom, 0px));
+    padding-inline: max(
+        var(--agent-chat-column-inset, var(--sigvelo-spacing-2)),
+        env(safe-area-inset-left, 0px)
+      )
+      max(var(--agent-chat-column-inset, var(--sigvelo-spacing-2)), env(safe-area-inset-right, 0px));
+  }
+
   .agent-chat-start-screen__content {
     --agent-chat-start-screen-padding-block: var(--sigvelo-spacing-5);
   }
 
   .agent-chat-start-screen__heading {
-    font-size: var(--sigvelo-text-2xl);
+    font-size: var(--sigvelo-text-lg);
   }
 
   .agent-chat-starter__label {
@@ -545,7 +596,8 @@
 
 /* Side-panel widths: tray labels yield to the icons; each action keeps its
    accessible name. */
-@container agent-chat (width <= 30rem) {
+/* Local wrap. Not --sigvelo-layout-break-compact. */
+@container agent-chat (inline-size <= 30rem) {
   .agent-chat-start-screen__composer-tray > .button > span:not(.app-icon-stack) {
     display: none;
   }

package/dist/styles/agent-connection.css

@@ -1,4 +1,5 @@
 .agent-connect {
+  container: agent-connect / inline-size;
   display: grid;
   gap: var(--sigvelo-spacing-2);
   min-inline-size: 0;
@@ -7,6 +8,7 @@
 
 .agent-connect__header {
   display: flex;
+  /* Form header, not --sigvelo-layout-cluster. */
   gap: var(--sigvelo-spacing-2);
   align-items: flex-start;
   min-inline-size: 0;
@@ -51,7 +53,7 @@
 
 .agent-connect .agent-connect__targets {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(4, var(--sigvelo-layout-track-fill));
   min-inline-size: 0;
   margin: 0;
   padding: var(--sigvelo-spacing-1);
@@ -129,14 +131,18 @@
 .agent-connect-popover {
   inline-size: min(36rem, calc(100dvi - 1.5rem));
   max-inline-size: min(36rem, calc(100dvi - 1.5rem));
-  padding: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-layout-gutter);
 }
 
-@media (width <= 40rem) {
+/* Local wrap. Not --sigvelo-layout-break-compact. */
+@container agent-connect (inline-size <= 40rem) {
   .agent-connect__targets {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(2, var(--sigvelo-layout-track-fill));
   }
+}
 
+/* Popup vs viewport. Not a plane container query. */
+@media (width <= 40rem) {
   .agent-connect-popover {
     inline-size: min(24rem, calc(100dvi - 1.5rem));
   }

package/dist/styles/agent-tool-detail.css

@@ -1,6 +1,6 @@
 .agent-tool-detail {
   display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  grid-template-rows: auto auto var(--sigvelo-layout-track-fill);
   min-inline-size: 0;
   block-size: 100%;
   background-color: var(--sigvelo-color-surface);
@@ -15,10 +15,10 @@
 .agent-tool-detail__run-state {
   grid-row: 2;
   display: grid;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-layout-cluster);
   min-inline-size: 0;
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   border-block-end: var(--sigvelo-border-width) var(--sigvelo-border-style)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -47,18 +47,8 @@
   block-size: 100%;
 }
 
-.agent-tool-detail > .subagent-run__actions {
-  grid-row: 4;
-  display: flex;
-  justify-content: center;
-  padding: var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
-  border-block-start: var(--sigvelo-border-width) var(--sigvelo-border-style)
-    var(--sigvelo-color-neutral-border-subtle);
-}
-
 @media (forced-colors: active) {
-  .agent-tool-detail__run-state,
-  .agent-tool-detail > .subagent-run__actions {
+  .agent-tool-detail__run-state {
     border-color: CanvasText;
   }
 }