fix(flow-chat): give transcript compositions consistent vertical rhythm

Use 8px item gaps, 4px inline spacing and 22px compact disclosure minimums. Move outer spacing from leaf views to model-round, retry, exploration and subagent compositions; retain continuous collapsed ambient runs across virtual rows. Remove adjacent negative margins and expanded Task margin stacking. Preserve the 24px runtime footer and existing measurement, collapse and viewport owners.

Lab: real mixed tool sequence changes between compact runs and spaced expanded cards. Export wrappers retain their own spacing. Validation: design-system:check, check:web, ESLint, motion inventory (zero duplicate keyframes), and 40 tests across seven focused layout/measurement/collapse/rhythm/thinking/subagent files pass.

Native Windows existing transcript: thinking expansion/collapse and switching away/back inspected; collapse preserved earlier content position. Live streaming, full mixed history, theme/density and remote scenarios remain manual pending. No remote runtime scenario was exercised; existing scrolling Known Gaps remain outside this change.

Author: kev1n77

design-system/apps/design-lab/src/preview/FlowChatToolGallery.css

@@ -17,9 +17,16 @@
 }
 
 .flow-chat-tool-sequence__rows {
-  display: grid;
   min-inline-size: 0;
-  gap: var(--openbitfun-control-flow-chat-flow-item-gap);
+}
+
+.flow-chat-tool-sequence__rows > * + * {
+  margin-block-start: var(--openbitfun-control-flow-chat-flow-item-gap);
+}
+
+.flow-chat-tool-sequence__rows > [data-openbitfun-component='flow-chat-tool-card'][data-openbitfun-attention='ambient'][data-openbitfun-expanded-shell='false']
+  + [data-openbitfun-component='flow-chat-tool-card'][data-openbitfun-attention='ambient'][data-openbitfun-expanded-shell='false'] {
+  margin-block-start: 0;
 }
 
 .flow-chat-tool-gallery > .component-catalog-section-heading {

design-system/packages/design-tokens/src/system.tokens.json

@@ -497,19 +497,19 @@
       "$type": "dimension",
       "rowIconSize": { "$value": "{control.icon.sizeSm}" },
       "rowIconGap": { "$value": "{space.1}" },
-      "flowItemGap": { "$value": "0.42rem" },
+      "flowItemGap": { "$value": "{space.2}" },
       "turnGap": { "$value": "{space.4}" },
-      "inlineGap": { "$value": "0.35rem" },
-      "controlGap": { "$value": "0.5rem" },
-      "controlPaddingBlock": { "$value": "0.35rem" },
+      "inlineGap": { "$value": "{space.1}" },
+      "controlGap": { "$value": "{space.2}" },
+      "controlPaddingBlock": { "$value": "{space.1}" },
       "controlPaddingInline": { "$value": "0.75rem" },
       "contentPaddingInline": { "$value": "3rem" },
       "contentPaddingInlineMobile": { "$value": "1.5rem" },
-      "cardGap": { "$value": "0.42rem" },
+      "cardGap": { "$value": "{control.flowChat.flowItemGap}" },
       "cardRadius": { "$value": "{radius.base}" },
       "cardPaddingBlock": { "$value": "0.625rem" },
       "cardPaddingInline": { "$value": "0.75rem" },
-      "cardExpandedPaddingBlock": { "$value": "0.5rem" },
+      "cardExpandedPaddingBlock": { "$value": "{space.2}" },
       "cardExpandedPaddingInline": { "$value": "0.625rem" },
       "codeBlockPaddingBlock": { "$value": "0.55rem" },
       "codeBlockPaddingInline": { "$value": "0.75rem" }

design-system/packages/ui/README.md

@@ -448,3 +448,9 @@ and disclosure glyphs occupy that same column. Expanded thinking prose remains
 aligned with the body edge; bordered tool detail retains its own content inset.
 The 12px/4px Figma inline trace is a smaller typography scene; the existing
 product 14px glyph size is retained when applying its gap to these summaries.
+
+FlowChat vertical composition uses an 8px item/section gap and 4px inline gap.
+Collapsed ambient tool runs use their 22px minimum line boxes without extra
+spacing between adjacent rows; expanded/prominent cards retain the section gap.
+The enclosing composition owns those gaps, and card bodies own their internal
+padding. The Lab tool sequence demonstrates both arrangements with real cards.

src/apps/data-migrator/ui/generated/design-system.css

@@ -69,21 +69,21 @@
     --openbitfun-control-composer-surface-padding: var(--openbitfun-space-2);
     --openbitfun-control-composer-surface-radius: var(--openbitfun-radius-xl);
     --openbitfun-control-composer-toolbar-gap: var(--openbitfun-space-2);
-    --openbitfun-control-flow-chat-card-expanded-padding-block: 0.5rem;
+    --openbitfun-control-flow-chat-card-expanded-padding-block: var(--openbitfun-space-2);
     --openbitfun-control-flow-chat-card-expanded-padding-inline: 0.625rem;
-    --openbitfun-control-flow-chat-card-gap: 0.42rem;
+    --openbitfun-control-flow-chat-card-gap: var(--openbitfun-control-flow-chat-flow-item-gap);
     --openbitfun-control-flow-chat-card-padding-block: 0.625rem;
     --openbitfun-control-flow-chat-card-padding-inline: 0.75rem;
     --openbitfun-control-flow-chat-card-radius: var(--openbitfun-radius-base);
     --openbitfun-control-flow-chat-code-block-padding-block: 0.55rem;
     --openbitfun-control-flow-chat-code-block-padding-inline: 0.75rem;
     --openbitfun-control-flow-chat-content-padding-inline: 3rem;
     --openbitfun-control-flow-chat-content-padding-inline-mobile: 1.5rem;
-    --openbitfun-control-flow-chat-control-gap: 0.5rem;
-    --openbitfun-control-flow-chat-control-padding-block: 0.35rem;
+    --openbitfun-control-flow-chat-control-gap: var(--openbitfun-space-2);
+    --openbitfun-control-flow-chat-control-padding-block: var(--openbitfun-space-1);
     --openbitfun-control-flow-chat-control-padding-inline: 0.75rem;
-    --openbitfun-control-flow-chat-flow-item-gap: 0.42rem;
-    --openbitfun-control-flow-chat-inline-gap: 0.35rem;
+    --openbitfun-control-flow-chat-flow-item-gap: var(--openbitfun-space-2);
+    --openbitfun-control-flow-chat-inline-gap: var(--openbitfun-space-1);
     --openbitfun-control-flow-chat-row-icon-gap: var(--openbitfun-space-1);
     --openbitfun-control-flow-chat-row-icon-size: var(--openbitfun-control-icon-size-sm);
     --openbitfun-control-flow-chat-turn-gap: var(--openbitfun-space-4);

src/web-ui/src/flow_chat/_item-rhythm.scss

@@ -0,0 +1,28 @@
+// Composition owns inter-item space. Leaf views own only their content padding.
+// A model round retains its trailing gap across virtual rows; enclosed content
+// drops it so the enclosing section does not count the last gap twice.
+@mixin apply($enclosed: false) {
+  > :is(.flow-text-block, .flow-thinking-item, .flowchat-flow-item,
+    .task-with-subagent-wrapper, .subagent-projection-text--truncated) {
+    margin: 0 0 var(--openbitfun-control-flow-chat-flow-item-gap) 0;
+  }
+
+  // Consecutive collapsed ambient tools form a continuous run of 22px lines.
+  > .flowchat-flow-item:has(
+    > .flow-tool-card-wrapper[data-openbitfun-attention='ambient']
+      [data-openbitfun-component='flow-chat-tool-card'][data-openbitfun-part='root'][data-openbitfun-expanded-shell='false']
+  ):has(
+    + .flowchat-flow-item
+      > .flow-tool-card-wrapper[data-openbitfun-attention='ambient']
+        [data-openbitfun-component='flow-chat-tool-card'][data-openbitfun-part='root'][data-openbitfun-expanded-shell='false']
+  ) {
+    margin-bottom: 0;
+  }
+
+  @if $enclosed {
+    > :is(.flow-text-block, .flow-thinking-item, .flowchat-flow-item,
+      .task-with-subagent-wrapper, .subagent-projection-text--truncated):last-child {
+      margin-bottom: 0;
+    }
+  }
+}

src/web-ui/src/flow_chat/components/FlowTextBlock.scss

@@ -10,7 +10,7 @@
   @include markdownTypography.apply;
 
   width: 100%;
-  margin: 0 0 var(--openbitfun-control-flow-chat-flow-item-gap) 0;
+  margin: 0;
   font-size: var(--openbitfun-type-flow-body-font-size);
   line-height: var(--openbitfun-type-flow-body-line-height);
   border: 0;

src/web-ui/src/flow_chat/components/FlowToolCard.scss

@@ -1,24 +1,9 @@
 .flowchat-flow-item {
-  margin: 0 0 var(--openbitfun-control-flow-chat-flow-item-gap) 0;
+  margin: 0;
   font-size: var(--openbitfun-type-flow-body-font-size);
   line-height: var(--openbitfun-type-flow-support-line-height);
 }
 
-/* A run of collapsed ambient tools reads like consecutive transcript lines.
- * Keep the normal flow-item gap at either edge of the run, but do not insert a
- * card gap between each one-line row. Expanded ambient cards retain section
- * spacing because they are content surfaces rather than line items. */
-.flowchat-flow-item:has(
-  > .flow-tool-card-wrapper[data-openbitfun-attention='ambient']
-    [data-openbitfun-component='flow-chat-tool-card'][data-openbitfun-part='root'][data-openbitfun-expanded-shell='false']
-):has(
-  + .flowchat-flow-item
-    > .flow-tool-card-wrapper[data-openbitfun-attention='ambient']
-      [data-openbitfun-component='flow-chat-tool-card'][data-openbitfun-part='root'][data-openbitfun-expanded-shell='false']
-) {
-  margin-bottom: 0;
-}
-
 .flow-tool-card-wrapper {
   display: flex;
   flex-direction: column;

src/web-ui/src/flow_chat/components/modern/ExploreRegion.scss

@@ -1,3 +1,5 @@
+@use '../../item-rhythm' as itemRhythm;
+
 /* Explore region styling for consecutive explore tool calls. */
 
 .explore-region {
@@ -18,11 +20,12 @@
 // ==================== Collapsible (header + animated content) ====================
 
 .explore-region--collapsible {
-  margin: 0 0 0.3rem 0;
+  margin: 0 0 var(--openbitfun-control-flow-chat-flow-item-gap) 0;
   font-size: var(--openbitfun-type-flow-control-font-size);
   line-height: var(--openbitfun-type-flow-support-line-height);
 
   .explore-region__header {
+    min-block-size: max(1lh, var(--openbitfun-control-tool-card-ambient-row-min-block-size));
     display: flex;
     align-items: center;
     gap: var(--openbitfun-control-flow-chat-row-icon-gap);
@@ -96,10 +99,11 @@
   }
 
   .explore-region__content {
+    @include itemRhythm.apply($enclosed: true);
     position: relative;
     // Keep expanded rows on the same leading edge as the collapsed group.
     // A nested inset makes auto-collapse read as a horizontal jump.
-    padding: 0;
+    padding: var(--openbitfun-space-2) 0 0;
     box-sizing: border-box;
     // Hide scrollbar track by default; only show when content actually overflows.
     overflow: hidden;
@@ -133,7 +137,7 @@
     content: '';
     position: absolute;
     // Account for collapsible header height.
-    top: 28px;
+    top: max(1lh, var(--openbitfun-control-tool-card-ambient-row-min-block-size));
     left: 0;
     right: 0;
     height: 16px;
@@ -175,7 +179,7 @@
     max-height: 400px;
     // Add bottom padding so the last line of text isn't obscured by the
     // gradient overlay or clipped at the container edge.
-    padding-bottom: 8px;
+    padding-bottom: var(--openbitfun-space-2);
   }
 }
 
@@ -184,13 +188,6 @@
   overflow-y: auto;
 }
 
-// ==================== Adjacent collapsed regions ====================
-
-// Reduce spacing between adjacent collapsed regions.
-.explore-region--collapsed + .explore-region--collapsed {
-  margin-top: -2px;
-}
-
 // ==================== Cross-ModelRound collapse ====================
 
 // Reduce spacing for explore-only model rounds.

src/web-ui/src/flow_chat/components/modern/ExportImageButton.scss

@@ -143,15 +143,15 @@
   }
 
   &__text-item {
-    margin-bottom: 8px;
+    margin-bottom: var(--openbitfun-control-flow-chat-flow-item-gap);
 
     // Ensure FlowTextBlock styles render correctly.
     .flow-text-block {
     }
   }
 
   &__thinking-item {
-    margin-bottom: 8px;
+    margin-bottom: var(--openbitfun-control-flow-chat-flow-item-gap);
   }
 
   &__thinking-item--expanded {
@@ -177,7 +177,7 @@
   }
 
   &__tool-item {
-    margin-bottom: 8px;
+    margin-bottom: var(--openbitfun-control-flow-chat-flow-item-gap);
 
     // Hide tool card action buttons and expanded content.
     .tool-card__actions,

src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIRTUALIZATION.md

@@ -200,3 +200,21 @@ internal whitespace; do not compensate for it with per-tool margins.
 Thinking/Explore labels use secondary content directly and their icons use the
 caption role, avoiding a second opacity multiplier. These layout rules do not
 change virtual-item identity, measurement ownership or viewport writes.
+
+## Transcript vertical rhythm
+
+The shared item gap is 8px and the inline gap is 4px. Thinking, Explore and
+retry disclosure headers share the ambient 22px minimum line box, growing with
+text. Consecutive collapsed ambient tools remain continuous lines with no added
+inter-item gap. The existing projection flag preserves that rule across virtual
+model-round boundaries; expanded and prominent cards keep the ordinary 8px gap.
+
+The item-rhythm mixin belongs to ModelRoundItem, retry-attempt contents,
+Explore contents and the subagent projection. Leaves carry no outer margin.
+Enclosed contents remove their last gap; model rounds retain it until the virtual
+Turn boundary removes it. Expanded Task wrappers use the same parent-owned gap
+as other items; their body owns its internal padding. Export wrappers and the
+Lab sequence own their own gaps. Thinking/Explore content has an 8px top inset;
+bounded Explore retains 8px bottom padding for its scroll fade. There is no
+negative adjacent-region margin. The resident runtime slot stays 24px high and
+continues to participate in the existing footer/reservation contract.