From eb027f7b4a7daa17e881c8231bfad41af19d5500 Mon Sep 17 00:00:00 2001
From: kev1n77 <fmy077@outlook.com>
Date: Wed, 9 Sep 2026 02:14:47 +0800
Subject: [PATCH 1/2] fix(flow-chat): align ambient status icons and text
 columns

Share the 14px icon slot and 4px text gap across public ambient cards, thinking, exploration and the resident runtime row. Remove double opacity and transparent-border offsets. Lab uses real Todo, AgentWait, Skill and terminal cards with state and expansion controls.

Validation: design-system:check, check:web, motion inventory and 21 focused thinking/Todo/AgentWait/runtime tests pass. Native desktop existing transcript confirms thinking disclosure and body leading edge. Full mixed-state, theme/density and remote scenarios remain manual pending; no remote runtime tested.
---
 .../src/preview/FlowChatToolGallery.css       | 12 +++++
 .../src/preview/FlowChatToolGallery.tsx       | 47 +++++++++++++++++++
 .../design-tokens/src/system.tokens.json      |  2 +
 design-system/packages/ui/README.md           |  8 ++++
 .../tool-cards/ActivityToolCards.tsx          |  1 +
 .../tool-cards/AmbientToolCard.meta.ts        |  2 +
 .../tool-cards/FlowChatToolCard.module.css    |  9 ++--
 .../StandardAmbientToolCards.module.css       | 11 +++--
 .../tool-cards/StandardAmbientToolCards.tsx   | 10 ++--
 .../tool-cards/StandardToolCards.meta.ts      |  2 +
 .../tool-cards/ToolCardStatusSlot.module.css  |  2 +
 .../ui/generated/design-system.css            |  2 +
 .../flow_chat/components/FlowTextBlock.scss   |  4 +-
 .../components/modern/ExploreRegion.scss      | 11 ++---
 .../modern/FLOWCHAT_VIRTUALIZATION.md         | 14 ++++++
 .../modern/RuntimeStatusSlot.appearance.ts    |  2 +-
 .../components/modern/RuntimeStatusSlot.scss  | 16 +++++--
 .../modern/RuntimeStatusSlot.test.tsx         |  4 ++
 .../components/modern/RuntimeStatusSlot.tsx   |  4 +-
 .../tool-cards/ModelThinkingDisplay.scss      | 17 +++----
 .../tool-cards/ModelThinkingDisplay.test.tsx  |  5 ++
 21 files changed, 146 insertions(+), 39 deletions(-)

diff --git a/design-system/apps/design-lab/src/preview/FlowChatToolGallery.css b/design-system/apps/design-lab/src/preview/FlowChatToolGallery.css
index dc8cdab64c..dc9b84e080 100644
--- a/design-system/apps/design-lab/src/preview/FlowChatToolGallery.css
+++ b/design-system/apps/design-lab/src/preview/FlowChatToolGallery.css
@@ -10,6 +10,18 @@
   margin-top: 42px;
 }
 
+.flow-chat-tool-sequence {
+  display: grid;
+  min-inline-size: 0;
+  gap: var(--openbitfun-space-5);
+}
+
+.flow-chat-tool-sequence__rows {
+  display: grid;
+  min-inline-size: 0;
+  gap: var(--openbitfun-control-flow-chat-flow-item-gap);
+}
+
 .flow-chat-tool-gallery > .component-catalog-section-heading {
   margin-block: 0 -8px;
   padding-top: 34px;
diff --git a/design-system/apps/design-lab/src/preview/FlowChatToolGallery.tsx b/design-system/apps/design-lab/src/preview/FlowChatToolGallery.tsx
index 2b17f1d87a..c6cb713c5d 100644
--- a/design-system/apps/design-lab/src/preview/FlowChatToolGallery.tsx
+++ b/design-system/apps/design-lab/src/preview/FlowChatToolGallery.tsx
@@ -2,6 +2,9 @@ import {
   ArrowRight,
   Eye,
 } from "lucide-react";
+import { useState } from "react";
+import { TabGroup } from "@openbitfun/ui";
+import { AgentWaitToolCard, SkillToolCard, TerminalControlToolCard, TodoToolCard } from "@openbitfun/ui/flow-chat";
 import { useI18n } from "../i18n";
 import { getComponentDescription } from "../i18n/componentMetadata";
 import {
@@ -28,6 +31,47 @@ const productOwnedToolExamples = [
   "PatchCanvas",
 ] as const;
 
+function ToolSequencePreview() {
+  const { t } = useI18n();
+  const [status, setStatus] = useState<"running" | "completed" | "error">("running");
+  const [expanded, setExpanded] = useState(false);
+  const completed = status === "completed";
+  return <section className="flow-chat-tool-sequence" data-openbitfun-pattern="tool-sequence">
+    <TabGroup
+      size="sm"
+      value={status}
+      onValueChange={(value) => setStatus(value as typeof status)}
+      items={[
+        { value: "running", label: t("components.preview.flowChat.running") },
+        { value: "completed", label: t("components.preview.flowChat.completed") },
+        { value: "error", label: t("components.preview.flowChat.failed") },
+      ]}
+    />
+    <div className="flow-chat-tool-sequence__rows">
+      <SkillToolCard action="Skill" status="completed" summary="Read the public component contract" />
+      <TodoToolCard
+        title="Tasks"
+        status={status}
+        summary="Align long workspace paths and tool summaries with the conversation text column"
+        mode="standard"
+        loading={status === "running"}
+        allCompleted={completed}
+        completedCount={completed ? 3 : 1}
+        totalCount={3}
+        items={[
+          { key: "columns", content: "Align public and product row columns", status: "completed" },
+          { key: "detail", content: "Verify expansion with long text and file paths", status: completed ? "completed" : "in_progress" },
+          { key: "replay", content: "Review the completed transcript", status: completed ? "completed" : "pending" },
+        ]}
+        isExpanded={expanded}
+        onToggle={() => setExpanded(!expanded)}
+      />
+      <AgentWaitToolCard action="AgentWait" status={status} summary={t(`components.preview.flowChat.${status === "error" ? "failed" : status}`)} />
+      <TerminalControlToolCard action="TerminalControl" status="completed" summary="src/features/workspace/remote/connection-profile-with-a-long-name.ts" />
+    </div>
+  </section>;
+}
+
 function ToolSpecimenCard({
   componentName,
   specimen,
@@ -67,6 +111,8 @@ export function FlowChatToolGallery({
         <p>{t("components.flowChat.toolsDescription")}</p>
       </header>
 
+      <ToolSequencePreview />
+
       {toolCardEntries.map(({ component, definition }) => (
         <section className="flow-chat-tool-group" key={component.name}>
           <header className="flow-chat-tool-group__heading">
@@ -105,6 +151,7 @@ export function FlowChatToolGallery({
         <div>
           <strong>{t("components.flowChat.dedicatedTitle")}</strong>
           <p>{t("components.flowChat.dedicatedDescription")}</p>
+          <code>ModelThinkingDisplay · ExploreGroupRenderer · RuntimeStatusSlot</code>
         </div>
         <code>{productOwnedToolExamples.join(" · ")}</code>
       </aside>
diff --git a/design-system/packages/design-tokens/src/system.tokens.json b/design-system/packages/design-tokens/src/system.tokens.json
index 32fb07dbbd..ade17725a8 100644
--- a/design-system/packages/design-tokens/src/system.tokens.json
+++ b/design-system/packages/design-tokens/src/system.tokens.json
@@ -495,6 +495,8 @@
     "flowChat": {
       "$description": "Shared FlowChat rhythm for product and package-owned conversation surfaces.",
       "$type": "dimension",
+      "rowIconSize": { "$value": "{control.icon.sizeSm}" },
+      "rowIconGap": { "$value": "{space.1}" },
       "flowItemGap": { "$value": "0.42rem" },
       "turnGap": { "$value": "{space.4}" },
       "inlineGap": { "$value": "0.35rem" },
diff --git a/design-system/packages/ui/README.md b/design-system/packages/ui/README.md
index 9242c36222..55eddd55a1 100644
--- a/design-system/packages/ui/README.md
+++ b/design-system/packages/ui/README.md
@@ -440,3 +440,11 @@ long description while metadata and sibling actions retain their own slots.
 Lab Patterns includes long paths, large change counts, expandable detail and
 disabled actions. The current Web UI has no direct ActivityItem consumer;
 FlowChat ambient tool cards keep their separate presentation contract.
+
+Ambient FlowChat summaries, product thinking/explore headers and runtime status
+share a 14px icon column followed by a 4px gap. The icon column starts at the
+transcript body edge; heading text starts 18px after that edge. Loading, tool
+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.
diff --git a/design-system/packages/ui/src/flow-chat/tool-cards/ActivityToolCards.tsx b/design-system/packages/ui/src/flow-chat/tool-cards/ActivityToolCards.tsx
index fcba529cd3..53028e269c 100644
--- a/design-system/packages/ui/src/flow-chat/tool-cards/ActivityToolCards.tsx
+++ b/design-system/packages/ui/src/flow-chat/tool-cards/ActivityToolCards.tsx
@@ -52,6 +52,7 @@ function ActivityToolCardBase({
           ) : undefined}
           icon={(
             <ToolCardStatusSlot
+              size={14}
               defaultIcon={defaultIcon}
               status={status}
               toolIcon={icon}
diff --git a/design-system/packages/ui/src/flow-chat/tool-cards/AmbientToolCard.meta.ts b/design-system/packages/ui/src/flow-chat/tool-cards/AmbientToolCard.meta.ts
index 7bb8cd473e..7197fa6a5d 100644
--- a/design-system/packages/ui/src/flow-chat/tool-cards/AmbientToolCard.meta.ts
+++ b/design-system/packages/ui/src/flow-chat/tool-cards/AmbientToolCard.meta.ts
@@ -22,6 +22,8 @@ export const ambientToolCardMeta = {
     "color.status.danger.content",
     "control.height.md",
     "control.toolCard.ambientRowMinBlockSize",
+    "control.flowChat.rowIconSize",
+    "control.flowChat.rowIconGap",
     "font.family.sans",
     "font.size.sm",
     "font.size.xl",
diff --git a/design-system/packages/ui/src/flow-chat/tool-cards/FlowChatToolCard.module.css b/design-system/packages/ui/src/flow-chat/tool-cards/FlowChatToolCard.module.css
index a73fd1e4bd..0b3dd48d20 100644
--- a/design-system/packages/ui/src/flow-chat/tool-cards/FlowChatToolCard.module.css
+++ b/design-system/packages/ui/src/flow-chat/tool-cards/FlowChatToolCard.module.css
@@ -454,8 +454,8 @@
     display: flex;
     min-block-size: max(1lh, var(--openbitfun-control-tool-card-ambient-row-min-block-size));
     align-items: center;
-    gap: var(--openbitfun-space-1);
-    padding-inline: var(--openbitfun-space-1) var(--openbitfun-space-2);
+    gap: var(--openbitfun-control-flow-chat-row-icon-gap);
+    padding-inline: 0 var(--openbitfun-space-2);
     border: 0;
     background: transparent;
     box-shadow: none;
@@ -476,9 +476,8 @@
   }
 
   .ambientSurface .iconSlot {
-    --_tool-card-action-size: var(--openbitfun-space-5);
-
-    margin-inline-end: 1px;
+    --_tool-card-action-size: var(--openbitfun-control-flow-chat-row-icon-size);
+    --_flow-chat-tool-card-icon-size: var(--openbitfun-control-flow-chat-row-icon-size);
   }
 
   .ambientAction {
diff --git a/design-system/packages/ui/src/flow-chat/tool-cards/StandardAmbientToolCards.module.css b/design-system/packages/ui/src/flow-chat/tool-cards/StandardAmbientToolCards.module.css
index 250cc824cf..7d477f450e 100644
--- a/design-system/packages/ui/src/flow-chat/tool-cards/StandardAmbientToolCards.module.css
+++ b/design-system/packages/ui/src/flow-chat/tool-cards/StandardAmbientToolCards.module.css
@@ -211,20 +211,23 @@
     display: flex;
     min-inline-size: 0;
     align-items: center;
-    gap: var(--openbitfun-space-2);
+    gap: var(--openbitfun-control-flow-chat-row-icon-gap);
     color: var(--openbitfun-color-content-muted);
     font-size: var(--openbitfun-type-body-sm-font-size);
   }
 
   .todoCompactIcon {
     display: inline-flex;
-    flex: 0 0 auto;
+    flex: 0 0 var(--openbitfun-control-flow-chat-row-icon-size);
+    inline-size: var(--openbitfun-control-flow-chat-row-icon-size);
+    block-size: var(--openbitfun-control-flow-chat-row-icon-size);
     align-items: center;
+    justify-content: center;
   }
 
   .todoCompactIcon > svg {
-    inline-size: 0.875rem;
-    block-size: 0.875rem;
+    inline-size: 100%;
+    block-size: 100%;
   }
 
   .todoCompactMeta {
diff --git a/design-system/packages/ui/src/flow-chat/tool-cards/StandardAmbientToolCards.tsx b/design-system/packages/ui/src/flow-chat/tool-cards/StandardAmbientToolCards.tsx
index 6051796cf1..46adf81397 100644
--- a/design-system/packages/ui/src/flow-chat/tool-cards/StandardAmbientToolCards.tsx
+++ b/design-system/packages/ui/src/flow-chat/tool-cards/StandardAmbientToolCards.tsx
@@ -98,7 +98,7 @@ export function RunCodeToolCard({
           action={action}
           content={summary}
           extra={actions ? <ToolCardActions>{actions}</ToolCardActions> : undefined}
-          icon={<ToolCardStatusSlot status={status} toolIcon={<Code2 aria-hidden="true" />} />}
+          icon={<ToolCardStatusSlot size={14} status={status} toolIcon={<Code2 aria-hidden="true" />} />}
         />
       )}
       isExpanded={Boolean(isExpanded && hasDetails)}
@@ -181,7 +181,7 @@ export function WebFetchToolCard({
           action={action}
           content={<OverflowText className={styles.fetchTitle} title={typeof title === "string" ? title : undefined}>{title}</OverflowText>}
           icon={(
-            <ToolCardStatusSlot
+            <ToolCardStatusSlot size={14}
               defaultIcon={status === "completed" || status === "error" ? "tool" : "status"}
               status={status}
               toolIcon={<Globe aria-hidden="true" />}
@@ -260,7 +260,7 @@ export function DefaultToolCard({
           action={displayName}
           content={summary}
           icon={hasVisibleToolCardStatusGlyph(status) || icon
-            ? <ToolCardStatusSlot status={status} toolIcon={icon} />
+            ? <ToolCardStatusSlot size={14} status={status} toolIcon={icon} />
             : undefined}
         />
       )}
@@ -337,7 +337,7 @@ export function ViewImageToolCard({
         header={(
           <AmbientToolCardHeader
             action={statusText}
-            icon={<ToolCardStatusSlot status={status} toolIcon={<ImageIcon aria-hidden="true" />} />}
+            icon={<ToolCardStatusSlot size={14} status={status} toolIcon={<ImageIcon aria-hidden="true" />} />}
           />
         )}
         isExpanded={Boolean(source && isExpanded)}
@@ -461,7 +461,7 @@ export function TodoToolCard({
           action={isExpanded ? undefined : title}
           content={headerSummary}
           icon={(
-            <ToolCardStatusSlot
+            <ToolCardStatusSlot size={14}
               defaultIcon={status === "error" || status === "cancelled" || allCompleted ? "status" : "tool"}
               status={allCompleted ? "completed" : status}
               toolIcon={<ListTodo aria-hidden="true" />}
diff --git a/design-system/packages/ui/src/flow-chat/tool-cards/StandardToolCards.meta.ts b/design-system/packages/ui/src/flow-chat/tool-cards/StandardToolCards.meta.ts
index 00f212e96d..f96b4620de 100644
--- a/design-system/packages/ui/src/flow-chat/tool-cards/StandardToolCards.meta.ts
+++ b/design-system/packages/ui/src/flow-chat/tool-cards/StandardToolCards.meta.ts
@@ -1,6 +1,8 @@
 import type { ComponentMeta } from "../../registry.types";
 
 const ambientTokens = [
+  "control.flowChat.rowIconSize",
+  "control.flowChat.rowIconGap",
   "color.content.primary",
   "color.content.secondary",
   "color.content.muted",
diff --git a/design-system/packages/ui/src/flow-chat/tool-cards/ToolCardStatusSlot.module.css b/design-system/packages/ui/src/flow-chat/tool-cards/ToolCardStatusSlot.module.css
index a77493ff23..42cd2b839a 100644
--- a/design-system/packages/ui/src/flow-chat/tool-cards/ToolCardStatusSlot.module.css
+++ b/design-system/packages/ui/src/flow-chat/tool-cards/ToolCardStatusSlot.module.css
@@ -11,6 +11,8 @@
   .statusLayer,
   .iconLayer {
     display: inline-flex;
+    inline-size: 100%;
+    block-size: 100%;
     align-items: center;
     justify-content: center;
     transition: opacity var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
diff --git a/src/apps/data-migrator/ui/generated/design-system.css b/src/apps/data-migrator/ui/generated/design-system.css
index 9e73ba51a0..6204a05236 100644
--- a/src/apps/data-migrator/ui/generated/design-system.css
+++ b/src/apps/data-migrator/ui/generated/design-system.css
@@ -84,6 +84,8 @@
     --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-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);
     --openbitfun-control-height-lg: 48px;
     --openbitfun-control-height-md: 40px;
diff --git a/src/web-ui/src/flow_chat/components/FlowTextBlock.scss b/src/web-ui/src/flow_chat/components/FlowTextBlock.scss
index 600f4f3519..07cac865ea 100644
--- a/src/web-ui/src/flow_chat/components/FlowTextBlock.scss
+++ b/src/web-ui/src/flow_chat/components/FlowTextBlock.scss
@@ -13,9 +13,7 @@
   margin: 0 0 var(--openbitfun-control-flow-chat-flow-item-gap) 0;
   font-size: var(--openbitfun-type-flow-body-font-size);
   line-height: var(--openbitfun-type-flow-body-line-height);
-  /* Transparent border to match the box-sizing of bordered FlowChat cards,
-   * TerminalRegion, etc.) so that text and card content share the same left edge. */
-  border: 1px solid transparent;
+  border: 0;
   box-sizing: border-box;
 
   .markdown-renderer {
diff --git a/src/web-ui/src/flow_chat/components/modern/ExploreRegion.scss b/src/web-ui/src/flow_chat/components/modern/ExploreRegion.scss
index d09dd0cbf7..777e545d1d 100644
--- a/src/web-ui/src/flow_chat/components/modern/ExploreRegion.scss
+++ b/src/web-ui/src/flow_chat/components/modern/ExploreRegion.scss
@@ -25,7 +25,7 @@
   .explore-region__header {
     display: flex;
     align-items: center;
-    gap: var(--openbitfun-control-flow-chat-inline-gap);
+    gap: var(--openbitfun-control-flow-chat-row-icon-gap);
     padding: 0;
     background: transparent;
     color: var(--openbitfun-color-content-muted);
@@ -58,14 +58,13 @@
 
   .explore-region__leading-icon {
     position: relative;
-    width: var(--openbitfun-control-icon-size-sm);
-    height: var(--openbitfun-control-icon-size-sm);
+    width: var(--openbitfun-control-flow-chat-row-icon-size);
+    height: var(--openbitfun-control-flow-chat-row-icon-size);
     flex-shrink: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: var(--openbitfun-color-content-muted);
-    opacity: 0.6;
+    color: var(--openbitfun-color-content-caption);
     transition: opacity 0.15s ease;
 
     > [data-openbitfun-component='icon'] {
@@ -87,7 +86,7 @@
   .explore-region__summary {
     font-size: var(--openbitfun-type-flow-control-font-size);
     line-height: var(--openbitfun-type-flow-support-line-height);
-    opacity: 0.8;
+    color: var(--openbitfun-color-content-secondary);
   }
 
   // Inner div must have min-height: 0 for height animation clipping to work.
diff --git a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIRTUALIZATION.md b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIRTUALIZATION.md
index c061cb5260..add28b2469 100644
--- a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIRTUALIZATION.md
+++ b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIRTUALIZATION.md
@@ -186,3 +186,17 @@ package.
 - `virtualMessageListLayout.ts`
 - `VirtualItemRenderer.tsx` + `.scss`
 - `VirtualMessageList.tsx`
+
+## Transcript row columns
+
+Thinking, Explore, ambient tool summaries and the runtime-status footer use
+`control.flowChat.rowIconSize` (14px) and `rowIconGap` (4px). The outer content
+column owns its responsive inset. Borderless rows add no leading padding or
+transparent border; text-only replies and expanded thinking begin at that same
+body edge. A summary with an icon starts its label 18px later. Tool/arrow/status
+layers keep their slot during state changes. Native SVG artwork may contain
+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.
diff --git a/src/web-ui/src/flow_chat/components/modern/RuntimeStatusSlot.appearance.ts b/src/web-ui/src/flow_chat/components/modern/RuntimeStatusSlot.appearance.ts
index 30c03cb9cd..03a6bf8a6c 100644
--- a/src/web-ui/src/flow_chat/components/modern/RuntimeStatusSlot.appearance.ts
+++ b/src/web-ui/src/flow_chat/components/modern/RuntimeStatusSlot.appearance.ts
@@ -2,5 +2,5 @@ import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
 
 export const runtimeStatusSlotAppearanceDescriptor: AppearanceSurfaceDescriptor = {
   id: 'runtime-status-slot',
-  parts: [{ id: 'root' }, { id: 'content' }, { id: 'hint' }],
+  parts: [{ id: 'root' }, { id: 'content' }, { id: 'leadingIcon' }, { id: 'hint' }],
 };
diff --git a/src/web-ui/src/flow_chat/components/modern/RuntimeStatusSlot.scss b/src/web-ui/src/flow_chat/components/modern/RuntimeStatusSlot.scss
index 61ad554fd2..232aeb28ec 100644
--- a/src/web-ui/src/flow_chat/components/modern/RuntimeStatusSlot.scss
+++ b/src/web-ui/src/flow_chat/components/modern/RuntimeStatusSlot.scss
@@ -10,10 +10,10 @@
   &__content {
     display: flex;
     align-items: center;
-    gap: var(--openbitfun-control-flow-chat-control-gap);
+    gap: var(--openbitfun-control-flow-chat-row-icon-gap);
     height: 24px;
     min-width: 0;
-    color: var(--openbitfun-color-content-muted);
+    color: var(--openbitfun-color-content-secondary);
     font-size: var(--openbitfun-type-flow-body-font-size);
     line-height: var(--openbitfun-type-flow-support-line-height);
     opacity: 0;
@@ -24,7 +24,7 @@
   }
 
   &--visible &__content {
-    opacity: 0.86;
+    opacity: 1;
     transform: translateY(0);
   }
 
@@ -34,6 +34,16 @@
     white-space: nowrap;
   }
 
+  &__icon {
+    display: inline-flex;
+    flex: 0 0 var(--openbitfun-control-flow-chat-row-icon-size);
+    width: var(--openbitfun-control-flow-chat-row-icon-size);
+    height: var(--openbitfun-control-flow-chat-row-icon-size);
+    align-items: center;
+    justify-content: center;
+    color: var(--openbitfun-color-content-caption);
+  }
+
   &--footer &__content {
     width: 100%;
     max-width: 900px;
diff --git a/src/web-ui/src/flow_chat/components/modern/RuntimeStatusSlot.test.tsx b/src/web-ui/src/flow_chat/components/modern/RuntimeStatusSlot.test.tsx
index a938c73afc..f00e58c9f9 100644
--- a/src/web-ui/src/flow_chat/components/modern/RuntimeStatusSlot.test.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/RuntimeStatusSlot.test.tsx
@@ -39,6 +39,8 @@ describe('RuntimeStatusSlot', () => {
       root.render(<RuntimeStatusSlot sessionId="session-1" placement="footer" />);
     });
     const slot = container.querySelector<HTMLElement>('.runtime-status-slot');
+    const iconSlot = container.querySelector('[data-openbitfun-part="leadingIcon"]');
+    expect(iconSlot?.querySelector('[data-testid="dot-matrix"]')).not.toBeNull();
     expect(slot).not.toBeNull();
     expect(slot?.dataset.runtimeStatusVisible).toBe('false');
 
@@ -62,11 +64,13 @@ describe('RuntimeStatusSlot', () => {
       });
     });
     expect(slot?.textContent).toContain('Transferring workspace');
+    expect(container.querySelector('[data-openbitfun-part="leadingIcon"]')).toBe(iconSlot);
 
     act(() => {
       useRuntimeStatusStore.getState().clear({ sessionId: 'session-1' });
     });
     expect(container.querySelector('.runtime-status-slot')).toBe(slot);
     expect(slot?.dataset.runtimeStatusVisible).toBe('false');
+    expect(container.querySelector('[data-openbitfun-part="leadingIcon"]')).toBe(iconSlot);
   });
 });
diff --git a/src/web-ui/src/flow_chat/components/modern/RuntimeStatusSlot.tsx b/src/web-ui/src/flow_chat/components/modern/RuntimeStatusSlot.tsx
index 73a2ce83a6..3b013db898 100644
--- a/src/web-ui/src/flow_chat/components/modern/RuntimeStatusSlot.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/RuntimeStatusSlot.tsx
@@ -49,7 +49,9 @@ export const RuntimeStatusSlot: React.FC<RuntimeStatusSlotProps> = ({
         data-openbitfun-component="runtime-status-slot"
         data-openbitfun-part="content"
       >
-        <Spinner size="sm" />
+        <span className="runtime-status-slot__icon" data-openbitfun-component="runtime-status-slot" data-openbitfun-part="leadingIcon" aria-hidden="true">
+          <Spinner size="sm" />
+        </span>
         <OverflowText
           className="runtime-status-slot__hint"
           data-openbitfun-component="runtime-status-slot"
diff --git a/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss
index 6c7b37f907..71aeba6342 100644
--- a/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss
@@ -22,9 +22,7 @@
   /* Match `.flow-text-block` and the tool wrappers so flow items share one visual gap. */
   margin: 0 0 var(--openbitfun-control-flow-chat-flow-item-gap) 0;
   background: transparent;
-  /* Transparent border to match the box-sizing of bordered cards so that thinking
-   * items and card content share the same left edge. */
-  border: 1px solid transparent;
+  border: 0;
   box-sizing: border-box;
   /* Collapsed summary line: match `.explore-region--collapsible` (e.g. command count). */
   font-size: var(--openbitfun-type-flow-control-font-size);
@@ -35,7 +33,7 @@
 .thinking-collapsed-header {
   display: flex;
   align-items: center;
-  gap: var(--openbitfun-control-flow-chat-inline-gap);
+  gap: var(--openbitfun-control-flow-chat-row-icon-gap);
   padding: 0;
   border-radius: 4px;
   cursor: pointer;
@@ -64,11 +62,10 @@
 
   .thinking-leading-icon {
     position: relative;
-    width: var(--openbitfun-control-icon-size-sm);
-    height: var(--openbitfun-control-icon-size-sm);
+    width: var(--openbitfun-control-flow-chat-row-icon-size);
+    height: var(--openbitfun-control-flow-chat-row-icon-size);
     flex-shrink: 0;
-    color: var(--openbitfun-color-content-muted);
-    opacity: 0.6;
+    color: var(--openbitfun-color-content-caption);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -94,8 +91,7 @@
     min-width: 0;
     font-size: var(--openbitfun-type-flow-control-font-size);
     font-weight: var(--openbitfun-type-body-sm-font-weight);
-    color: var(--openbitfun-color-content-muted);
-    opacity: 0.8;
+    color: var(--openbitfun-color-content-secondary);
     line-height: var(--openbitfun-type-flow-support-line-height);
   }
 }
@@ -114,7 +110,6 @@
 
 .flow-thinking-item.summary .thinking-label {
   color: var(--openbitfun-color-content-secondary);
-  opacity: 0.9;
 }
 
 .flow-thinking-item.expanded {
diff --git a/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.test.tsx b/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.test.tsx
index 12fb2161f5..a8ed7c303c 100644
--- a/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.test.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.test.tsx
@@ -124,6 +124,8 @@ describe('ModelThinkingDisplay reasoning summary', () => {
     await act(async () => {
       root.render(<ModelThinkingDisplay thinkingItem={summaryItem(content)} />);
     });
+    const leadingIcon = container.querySelector('[data-openbitfun-part="leadingIcon"]');
+    const label = container.querySelector('[data-openbitfun-part="label"]');
 
     await act(async () => {
       (container.querySelector('[data-testid="chat-thinking-toggle"]') as HTMLElement).click();
@@ -134,6 +136,8 @@ describe('ModelThinkingDisplay reasoning summary', () => {
       .toBe('Thinking Summary');
     expect(container.querySelector('[data-testid="thinking-markdown"]')?.textContent)
       .toBe(content);
+    expect(container.querySelector('[data-openbitfun-part="leadingIcon"]')).toBe(leadingIcon);
+    expect(container.querySelector('[data-openbitfun-part="label"]')).toBe(label);
 
     await act(async () => {
       root.render(<ModelThinkingDisplay thinkingItem={summaryItem(
@@ -142,6 +146,7 @@ describe('ModelThinkingDisplay reasoning summary', () => {
     });
     expect(container.querySelector('[data-testid="chat-thinking-panel"]')
       ?.getAttribute('data-expanded')).toBe('true');
+    expect(container.querySelector('[data-openbitfun-part="leadingIcon"]')).toBe(leadingIcon);
   });
 });
 

From 970cd194d00ebd908a366de132980e2f1853d13f Mon Sep 17 00:00:00 2001
From: kev1n77 <fmy077@outlook.com>
Date: Wed, 9 Sep 2026 02:22:32 +0800
Subject: [PATCH 2/2] 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.
---
 .../src/preview/FlowChatToolGallery.css       | 11 ++++++--
 .../design-tokens/src/system.tokens.json      | 12 ++++----
 design-system/packages/ui/README.md           |  6 ++++
 .../ui/generated/design-system.css            | 12 ++++----
 src/web-ui/src/flow_chat/_item-rhythm.scss    | 28 +++++++++++++++++++
 .../flow_chat/components/FlowTextBlock.scss   |  2 +-
 .../flow_chat/components/FlowToolCard.scss    | 17 +----------
 .../components/modern/ExploreRegion.scss      | 19 ++++++-------
 .../components/modern/ExportImageButton.scss  |  6 ++--
 .../modern/FLOWCHAT_VIRTUALIZATION.md         | 18 ++++++++++++
 .../modern/FlowChatCollapseAlignment.test.ts  |  4 +--
 .../components/modern/FlowChatRhythm.test.ts  | 14 ++++++----
 .../components/modern/ModelRoundItem.scss     | 21 ++++++++------
 .../subagent/SubagentProjectionView.scss      |  7 +++--
 .../tool-cards/ModelThinkingDisplay.scss      |  7 +++--
 .../flow_chat/tool-cards/TaskToolDisplay.scss |  1 -
 16 files changed, 119 insertions(+), 66 deletions(-)
 create mode 100644 src/web-ui/src/flow_chat/_item-rhythm.scss

diff --git a/design-system/apps/design-lab/src/preview/FlowChatToolGallery.css b/design-system/apps/design-lab/src/preview/FlowChatToolGallery.css
index dc9b84e080..336f7a7149 100644
--- a/design-system/apps/design-lab/src/preview/FlowChatToolGallery.css
+++ b/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 {
diff --git a/design-system/packages/design-tokens/src/system.tokens.json b/design-system/packages/design-tokens/src/system.tokens.json
index ade17725a8..e0a6abf81c 100644
--- a/design-system/packages/design-tokens/src/system.tokens.json
+++ b/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" }
diff --git a/design-system/packages/ui/README.md b/design-system/packages/ui/README.md
index 55eddd55a1..c9ae0daf6b 100644
--- a/design-system/packages/ui/README.md
+++ b/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.
diff --git a/src/apps/data-migrator/ui/generated/design-system.css b/src/apps/data-migrator/ui/generated/design-system.css
index 6204a05236..f140c030d3 100644
--- a/src/apps/data-migrator/ui/generated/design-system.css
+++ b/src/apps/data-migrator/ui/generated/design-system.css
@@ -69,9 +69,9 @@
     --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);
@@ -79,11 +79,11 @@
     --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);
diff --git a/src/web-ui/src/flow_chat/_item-rhythm.scss b/src/web-ui/src/flow_chat/_item-rhythm.scss
new file mode 100644
index 0000000000..f5f3a36a93
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/src/web-ui/src/flow_chat/components/FlowTextBlock.scss b/src/web-ui/src/flow_chat/components/FlowTextBlock.scss
index 07cac865ea..431258ffb3 100644
--- a/src/web-ui/src/flow_chat/components/FlowTextBlock.scss
+++ b/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;
diff --git a/src/web-ui/src/flow_chat/components/FlowToolCard.scss b/src/web-ui/src/flow_chat/components/FlowToolCard.scss
index 72b0fad5a3..294a5f2959 100644
--- a/src/web-ui/src/flow_chat/components/FlowToolCard.scss
+++ b/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;
diff --git a/src/web-ui/src/flow_chat/components/modern/ExploreRegion.scss b/src/web-ui/src/flow_chat/components/modern/ExploreRegion.scss
index 777e545d1d..8b22df39a5 100644
--- a/src/web-ui/src/flow_chat/components/modern/ExploreRegion.scss
+++ b/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.
diff --git a/src/web-ui/src/flow_chat/components/modern/ExportImageButton.scss b/src/web-ui/src/flow_chat/components/modern/ExportImageButton.scss
index d1c0f9e711..1f2b862a40 100644
--- a/src/web-ui/src/flow_chat/components/modern/ExportImageButton.scss
+++ b/src/web-ui/src/flow_chat/components/modern/ExportImageButton.scss
@@ -143,7 +143,7 @@
   }
 
   &__text-item {
-    margin-bottom: 8px;
+    margin-bottom: var(--openbitfun-control-flow-chat-flow-item-gap);
     
     // Ensure FlowTextBlock styles render correctly.
     .flow-text-block {
@@ -151,7 +151,7 @@
   }
 
   &__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,
diff --git a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIRTUALIZATION.md b/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIRTUALIZATION.md
index add28b2469..b07d3502e5 100644
--- a/src/web-ui/src/flow_chat/components/modern/FLOWCHAT_VIRTUALIZATION.md
+++ b/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.
diff --git a/src/web-ui/src/flow_chat/components/modern/FlowChatCollapseAlignment.test.ts b/src/web-ui/src/flow_chat/components/modern/FlowChatCollapseAlignment.test.ts
index 586bfb50da..319bf350a9 100644
--- a/src/web-ui/src/flow_chat/components/modern/FlowChatCollapseAlignment.test.ts
+++ b/src/web-ui/src/flow_chat/components/modern/FlowChatCollapseAlignment.test.ts
@@ -42,9 +42,9 @@ describe('FlowChat collapse spacing', () => {
     const exploreContent = extractBlock(exploreStyles, '.explore-region__content');
     const thinkingContent = extractBlock(thinkingStyles, '.thinking-content');
 
-    expect(exploreContent).toContain('padding: 0;');
+    expect(exploreContent).toContain('padding: var(--openbitfun-space-2) 0 0;');
     expect(thinkingContent).toMatch(
-      /padding:\s*var\(--openbitfun-control-flow-chat-card-expanded-padding-block\)\s*var\(--openbitfun-control-flow-chat-card-expanded-padding-inline\)\s*var\(--openbitfun-control-flow-chat-card-expanded-padding-block\)\s*0;/,
+      /padding:\s*var\(--openbitfun-control-flow-chat-card-expanded-padding-block\)\s*var\(--openbitfun-control-flow-chat-card-expanded-padding-inline\)\s*0\s*0;/,
     );
   });
 
diff --git a/src/web-ui/src/flow_chat/components/modern/FlowChatRhythm.test.ts b/src/web-ui/src/flow_chat/components/modern/FlowChatRhythm.test.ts
index 5e01b429e6..f7798e508c 100644
--- a/src/web-ui/src/flow_chat/components/modern/FlowChatRhythm.test.ts
+++ b/src/web-ui/src/flow_chat/components/modern/FlowChatRhythm.test.ts
@@ -40,7 +40,7 @@ describe('FlowChat transcript rhythm', () => {
   }
 
   it('treats collapsed ambient tool runs as text-like rows', () => {
-    const toolStyles = readSource('../FlowToolCard.scss');
+    const toolStyles = readSource('../../_item-rhythm.scss');
 
     expect(toolStyles).toContain(
       'margin: 0 0 var(--openbitfun-control-flow-chat-flow-item-gap) 0;',
@@ -55,7 +55,12 @@ describe('FlowChat transcript rhythm', () => {
       "> [data-openbitfun-component='flow-chat-tool-card'][data-openbitfun-part='root'][data-openbitfun-expanded-shell='false']",
     );
     expect(toolStyles).not.toContain('+ .task-with-subagent-wrapper');
-    expect(toolStyles).not.toContain('.task-with-subagent-wrapper:not(');
+    for (const owner of ['./ModelRoundItem.scss', './ExploreRegion.scss', '../subagent/SubagentProjectionView.scss']) {
+      expect(readSource(owner)).toContain('@include itemRhythm.apply');
+    }
+    for (const leaf of ['../FlowToolCard.scss', '../FlowTextBlock.scss', '../../tool-cards/ModelThinkingDisplay.scss']) {
+      expect(readSource(leaf)).not.toContain('margin: 0 0 var(--openbitfun-control-flow-chat-flow-item-gap) 0;');
+    }
   });
 
   it('gives every new user Turn one token-owned boundary gap', () => {
@@ -119,8 +124,7 @@ describe('FlowChat transcript rhythm', () => {
     expect(rendererStyles).not.toContain(
       '.task-with-subagent-wrapper:last-child:not(.task-with-subagent-wrapper--expanded)',
     );
-    expect(taskStyles).toMatch(
-      /\.task-with-subagent-wrapper\s*\{[\s\S]*?margin-block:\s*0;[\s\S]*?&\.task-with-subagent-wrapper--expanded\s*\{\s*margin-block:\s*var\(--openbitfun-space-1\) var\(--openbitfun-space-3\);/,
-    );
+    expect(taskStyles).toContain('margin-block: 0;');
+    expect(taskStyles).not.toMatch(/&\.task-with-subagent-wrapper--expanded\s*\{\s*margin-block:/);
   });
 });
diff --git a/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.scss b/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.scss
index 0324dd4347..1e644036d1 100644
--- a/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.scss
+++ b/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.scss
@@ -1,9 +1,12 @@
+@use '../../item-rhythm' as itemRhythm;
+
 /* Model round item styles (BEM). */
 .model-round-item {
+  @include itemRhythm.apply;
   /*
-   * No bottom margin — the inter-round gap is covered by the same line-height rhythm
-   * as inter-item gaps inside a round, so flow text → tool / tool → thinking / cross-
-   * round transitions all read as one continuous, evenly-spaced text column.
+   * The composition assigns one 8px trailing gap to each item, including the
+   * last item across a model-round boundary. Consecutive collapsed ambient
+   * tools have no extra gap, within a round and across virtual rows.
    *
    * No mount / enter animation lives here on purpose. The list is virtualized:
    * any animation keyed off mount replays whenever an item scrolls back into
@@ -86,12 +89,13 @@
 .model-round-item__retry-history {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
+  gap: var(--openbitfun-control-flow-chat-flow-item-gap);
+  margin-bottom: var(--openbitfun-control-flow-chat-flow-item-gap);
 }
 
 .model-round-item__retry-toggle {
   align-self: flex-start;
+  min-block-size: max(1lh, var(--openbitfun-control-tool-card-ambient-row-min-block-size));
   padding: 0;
   background: transparent;
   border: none;
@@ -113,7 +117,8 @@
 }
 
 .model-round-item__retry-attempt {
-  padding: 0.35rem 0 0.15rem;
+  @include itemRhythm.apply($enclosed: true);
+  padding: var(--openbitfun-space-2) 0 0;
   border-top: 1px solid color-mix(in srgb, var(--openbitfun-color-border-default) 62%, transparent);
 }
 
@@ -121,8 +126,8 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 0.25rem;
-  margin-bottom: 0.35rem;
+  gap: var(--openbitfun-space-1);
+  margin-bottom: var(--openbitfun-space-1);
   color: var(--openbitfun-color-content-muted);
   font-size: var(--openbitfun-type-flow-meta-font-size);
   line-height: var(--openbitfun-type-flow-meta-line-height);
diff --git a/src/web-ui/src/flow_chat/components/subagent/SubagentProjectionView.scss b/src/web-ui/src/flow_chat/components/subagent/SubagentProjectionView.scss
index 4ac2f2ca69..4a4f9dd0cb 100644
--- a/src/web-ui/src/flow_chat/components/subagent/SubagentProjectionView.scss
+++ b/src/web-ui/src/flow_chat/components/subagent/SubagentProjectionView.scss
@@ -1,3 +1,5 @@
+@use '../../item-rhythm' as itemRhythm;
+
 .subagent-projection-wrapper {
   width: 100%;
 }
@@ -5,7 +7,7 @@
 .subagent-projection-container {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--openbitfun-control-flow-chat-flow-item-gap);
   overflow-y: auto;
   overscroll-behavior: contain;
   box-sizing: border-box;
@@ -23,10 +25,11 @@
 .subagent-projection-text--truncated {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--openbitfun-control-flow-chat-inline-gap);
 }
 
 .subagent-projection-content {
+  @include itemRhythm.apply($enclosed: true);
   min-width: 0;
 
   .flow-thinking-item .thinking-content {
diff --git a/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss
index 71aeba6342..e05ec31665 100644
--- a/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss
@@ -19,8 +19,8 @@
  *   flow so flex `align-items: center` stays stable. */
 .flow-thinking-item {
   padding: 0;
-  /* Match `.flow-text-block` and the tool wrappers so flow items share one visual gap. */
-  margin: 0 0 var(--openbitfun-control-flow-chat-flow-item-gap) 0;
+  /* The enclosing transcript composition owns the gap to the next item. */
+  margin: 0;
   background: transparent;
   border: 0;
   box-sizing: border-box;
@@ -31,6 +31,7 @@
 }
 
 .thinking-collapsed-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);
@@ -154,7 +155,7 @@
   font-family:var(--openbitfun-type-body-sm-font-family);
   word-break: break-word;
   color: var(--openbitfun-color-content-muted);
-  padding: var(--openbitfun-control-flow-chat-card-expanded-padding-block) var(--openbitfun-control-flow-chat-card-expanded-padding-inline) var(--openbitfun-control-flow-chat-card-expanded-padding-block) 0;
+  padding: var(--openbitfun-control-flow-chat-card-expanded-padding-block) var(--openbitfun-control-flow-chat-card-expanded-padding-inline) 0 0;
   background: transparent;
   border: none;
   border-radius: 6px;
diff --git a/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss
index 7e1895bd74..39cf6eb3cb 100644
--- a/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss
@@ -67,7 +67,6 @@
   }
 
   &.task-with-subagent-wrapper--expanded {
-    margin-block: var(--openbitfun-space-1) var(--openbitfun-space-3);
     overflow: hidden;
     border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-default);
     background: var(--openbitfun-color-surface-panel);