diff --git a/design-system/AGENTS.md b/design-system/AGENTS.md
index 49f3d6bb32..1ad64768dd 100644
--- a/design-system/AGENTS.md
+++ b/design-system/AGENTS.md
@@ -49,3 +49,10 @@ pnpm --dir design-system run build:ui && node --test design-system/packages/ui/t
 ```
 
 Do not use browser automation or mock screenshots as visual proof. Design Lab is the manual authoring surface; source, build, HTTP, and package checks do not establish final visual fidelity.
+
+For SplitView geometry, drag cancellation, and cached resize bounds:
+
+```bash
+pnpm --dir design-system run build:ui && node --test design-system/packages/ui/tests/split-view.test.mjs
+pnpm --dir src/web-ui exec vitest run src/shared/ui/SplitView.test.tsx
+```
diff --git a/design-system/packages/ui/src/components/SplitView/SplitView.tsx b/design-system/packages/ui/src/components/SplitView/SplitView.tsx
index 6b46012934..2b458922ab 100644
--- a/design-system/packages/ui/src/components/SplitView/SplitView.tsx
+++ b/design-system/packages/ui/src/components/SplitView/SplitView.tsx
@@ -84,12 +84,18 @@ export function SplitView({
   const frameRef = useRef<number | null>(null);
   const dragRef = useRef<{
     pointerId: number; target: HTMLDivElement; x: number; size: number; latest: number;
+    /** Last size written to the CSS variable, so a sub-pixel move can skip the write. */
+    painted: number;
     cursor: string; userSelect: string;
   } | null>(null);
   const callbacks = useRef({ onRightSizeChange, onResizeStateChange });
   callbacks.current = { onRightSizeChange, onResizeStateChange };
   const bounds = width === null ? { min: minRightSize, max: maxRightSize }
     : sizeBounds(width, dividerWidth, minLeftSize, minRightSize, maxRightSize);
+  // The observer keeps these current without a layout read in pointer handlers.
+  // A queued frame must also use any bounds published since it was scheduled.
+  const boundsRef = useRef(bounds);
+  boundsRef.current = bounds;
   const resizeDirection = layout === 'overlay' && secondarySide === 'left' ? -1 : 1;
   const resolvedSize = Math.min(bounds.max, Math.max(bounds.min, rightSize));
   const resolvedSizeRef = useRef(resolvedSize);
@@ -112,6 +118,16 @@ export function SplitView({
     return () => { observer?.disconnect(); window.removeEventListener('resize', measure); };
   }, [mode, layout]);
 
+  // `--_split-view-right-size` is what the pane geometry actually reads, and React
+  // rewrites it whenever `resolvedSize` changes (a container/window resize during the
+  // drag re-renders with a new resolved size while the drag keeps writing the variable
+  // directly). Keep the sub-pixel guard anchored to the displayed value, otherwise a
+  // later move that rounds to the size the drag last wrote would be skipped and the
+  // pane would stay at the re-rendered width for the rest of the gesture.
+  useLayoutEffect(() => {
+    if (dragRef.current) dragRef.current.painted = resolvedSize;
+  }, [resolvedSize]);
+
   const finishResize = useCallback((commit: boolean) => {
     const drag = dragRef.current;
     if (!drag) return;
@@ -142,15 +158,21 @@ export function SplitView({
   const updateDrag = (event: PointerEvent<HTMLDivElement>) => {
     const drag = dragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
-    const measuredWidth = rootRef.current?.getBoundingClientRect().width ?? 0;
-    const currentBounds = measuredWidth > 0
-      ? sizeBounds(measuredWidth, dividerWidth, minLeftSize, minRightSize, maxRightSize) : bounds;
+    const currentBounds = boundsRef.current;
     const delta = (drag.x - event.clientX) * resizeDirection;
     drag.latest = Math.min(currentBounds.max, Math.max(currentBounds.min, drag.size + delta));
     if (frameRef.current !== null) return;
     frameRef.current = requestAnimationFrame(() => {
       frameRef.current = null;
-      if (dragRef.current) rootRef.current?.style.setProperty('--_split-view-right-size', `${dragRef.current.latest}px`);
+      const current = dragRef.current;
+      if (!current) return;
+      const latestBounds = boundsRef.current;
+      current.latest = Math.min(latestBounds.max, Math.max(latestBounds.min, current.latest));
+      // A sub-pixel move paints the same rounded width; keep the written value
+      // instead of dirtying the DOM style on every animation frame.
+      if (Math.round(current.latest) === Math.round(current.painted)) return;
+      current.painted = current.latest;
+      rootRef.current?.style.setProperty('--_split-view-right-size', `${current.latest}px`);
     });
   };
 
@@ -196,6 +218,7 @@ export function SplitView({
             dragRef.current = {
               pointerId: event.pointerId, target: event.currentTarget, x: event.clientX,
               size: resolvedSize, latest: resolvedSize,
+              painted: resolvedSize,
               cursor: document.body.style.cursor, userSelect: document.body.style.userSelect,
             };
             event.currentTarget.setPointerCapture?.(event.pointerId);
diff --git a/src/web-ui/src/app/components/panels/base/FlexiblePanel.tsx b/src/web-ui/src/app/components/panels/base/FlexiblePanel.tsx
index c7752b32d4..a38dbc115e 100644
--- a/src/web-ui/src/app/components/panels/base/FlexiblePanel.tsx
+++ b/src/web-ui/src/app/components/panels/base/FlexiblePanel.tsx
@@ -176,6 +176,8 @@ interface ExtendedFlexiblePanelProps extends FlexiblePanelProps {
   isActive?: boolean;
   /** File no longer exists on disk (from editor); drives tab "deleted" label */
   onFileMissingFromDiskChange?: (missing: boolean) => void;
+  /** The hosting pane is being resized; width-derived measurement waits for it to settle. */
+  resizeSuspended?: boolean;
 }
 
 const FlexiblePanel: React.FC<ExtendedFlexiblePanelProps> = memo(({
@@ -189,6 +191,7 @@ const FlexiblePanel: React.FC<ExtendedFlexiblePanelProps> = memo(({
   isActive = true,
   onFileMissingFromDiskChange,
   terminalResizeSuspended = false,
+  resizeSuspended = false,
 }) => {
   const { t, formatDate } = useI18n('components');
   const documentSession = useEditorDocument();
@@ -856,6 +859,7 @@ const FlexiblePanel: React.FC<ExtendedFlexiblePanelProps> = memo(({
               workspacePath={content.data?.workspacePath || workspacePath}
               viewKind={content.data?.viewKind}
               displayTitle={content.data?.displayTitle}
+              resizeSuspended={resizeSuspended}
             />
           </React.Suspense>
         );
diff --git a/src/web-ui/src/app/components/panels/content-canvas/ContentCanvas.tsx b/src/web-ui/src/app/components/panels/content-canvas/ContentCanvas.tsx
index b5f0fd3c75..8a657b9fd7 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/ContentCanvas.tsx
+++ b/src/web-ui/src/app/components/panels/content-canvas/ContentCanvas.tsx
@@ -45,6 +45,8 @@ export interface ContentCanvasProps {
   externalToolbar?: boolean;
   /** Suspend terminal fit/PTY resize while the hosting panel is animating. */
   terminalResizeSuspended?: boolean;
+  /** The hosting pane is being resized; width-derived measurement waits for it to settle. */
+  resizeSuspended?: boolean;
   /** Whether this host exposes Mission Control. */
   missionControlEnabled?: boolean;
   /** Host-provided content for the no-tabs state. */
@@ -63,6 +65,7 @@ export const ContentCanvas: React.FC<ContentCanvasProps> = ({
   toolbarActions,
   externalToolbar = false,
   terminalResizeSuspended = false,
+  resizeSuspended = false,
   missionControlEnabled = true,
   emptyState,
 }) => {
@@ -225,6 +228,7 @@ export const ContentCanvas: React.FC<ContentCanvasProps> = ({
             externalToolbar={hasExternalToolbar}
             toolbarActions={toolbarActions}
             terminalResizeSuspended={terminalResizeSuspended}
+            resizeSuspended={resizeSuspended}
           />
         </div>
 
diff --git a/src/web-ui/src/app/components/panels/content-canvas/editor-area/EditorArea.tsx b/src/web-ui/src/app/components/panels/content-canvas/editor-area/EditorArea.tsx
index 9c1771998b..f5bf546383 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/editor-area/EditorArea.tsx
+++ b/src/web-ui/src/app/components/panels/content-canvas/editor-area/EditorArea.tsx
@@ -21,6 +21,8 @@ export interface EditorAreaProps {
   toolbarActions?: React.ReactNode;
   externalToolbar?: boolean;
   terminalResizeSuspended?: boolean;
+  /** The hosting pane is being resized; width-derived measurement waits for it to settle. */
+  resizeSuspended?: boolean;
 }
 
 export const EditorArea: React.FC<EditorAreaProps> = ({
@@ -35,6 +37,7 @@ export const EditorArea: React.FC<EditorAreaProps> = ({
   toolbarActions,
   externalToolbar = false,
   terminalResizeSuspended = false,
+  resizeSuspended = false,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const topRowRef = useRef<HTMLDivElement>(null);
@@ -164,6 +167,7 @@ export const EditorArea: React.FC<EditorAreaProps> = ({
       disablePopOut={disablePopOut}
       toolbarActions={toolbarActions === undefined || groupId === toolbarGroupId ? toolbarActions : null}
       terminalResizeSuspended={terminalResizeSuspended}
+      resizeSuspended={resizeSuspended}
     />
   );
 
diff --git a/src/web-ui/src/app/components/panels/content-canvas/editor-area/EditorGroup.tsx b/src/web-ui/src/app/components/panels/content-canvas/editor-area/EditorGroup.tsx
index 6e87e5e0f0..8b9a692052 100644
--- a/src/web-ui/src/app/components/panels/content-canvas/editor-area/EditorGroup.tsx
+++ b/src/web-ui/src/app/components/panels/content-canvas/editor-area/EditorGroup.tsx
@@ -89,6 +89,8 @@ export interface EditorGroupProps {
   toolbarActions?: React.ReactNode;
   externalToolbar?: boolean;
   terminalResizeSuspended?: boolean;
+  /** The hosting pane is being resized; width-derived measurement waits for it to settle. */
+  resizeSuspended?: boolean;
 }
 
 export const EditorGroup: React.FC<EditorGroupProps> = ({
@@ -120,6 +122,7 @@ export const EditorGroup: React.FC<EditorGroupProps> = ({
   toolbarActions,
   externalToolbar = false,
   terminalResizeSuspended = false,
+  resizeSuspended = false,
 }) => {
   const { t } = useTranslation('components');
   const mode = useContext(CanvasStoreModeContext);
@@ -308,6 +311,7 @@ export const EditorGroup: React.FC<EditorGroupProps> = ({
                   onInteraction={onInteraction}
                   workspacePath={workspacePath}
                   terminalResizeSuspended={terminalResizeSuspended}
+                  resizeSuspended={resizeSuspended}
                 />
               </div>
             ))
diff --git a/src/web-ui/src/app/scenes/session/AuxPane.tsx b/src/web-ui/src/app/scenes/session/AuxPane.tsx
index b14dff18a1..c8447a3084 100644
--- a/src/web-ui/src/app/scenes/session/AuxPane.tsx
+++ b/src/web-ui/src/app/scenes/session/AuxPane.tsx
@@ -37,12 +37,14 @@ interface AuxPaneProps {
   externalToolbar?: boolean;
   isSceneActive?: boolean;
   terminalResizeSuspended?: boolean;
+  /** The hosting pane is being resized; width-derived measurement waits for it to settle. */
+  resizeSuspended?: boolean;
   isFullscreen?: boolean;
   onToggleFullscreen?: () => void;
 }
 
 const AuxPane = forwardRef<AuxPaneRef, AuxPaneProps>(
-  ({ workspacePath, externalToolbar = false, isSceneActive = true, terminalResizeSuspended = false, isFullscreen = false, onToggleFullscreen }, ref) => {
+  ({ workspacePath, externalToolbar = false, isSceneActive = true, terminalResizeSuspended = false, resizeSuspended = false, isFullscreen = false, onToggleFullscreen }, ref) => {
     const { t } = useI18n('components');
     const activeSessionId = useSyncExternalStore(
       flowChatStore.subscribe.bind(flowChatStore),
@@ -177,6 +179,7 @@ const AuxPane = forwardRef<AuxPaneRef, AuxPaneProps>(
           onInteraction={handleInteraction}
           onBeforeClose={handleBeforeClose}
           terminalResizeSuspended={terminalResizeSuspended}
+          resizeSuspended={resizeSuspended}
           missionControlEnabled={false}
           emptyState={
             <div
diff --git a/src/web-ui/src/app/scenes/session/ChatPane.composer-layout.test.tsx b/src/web-ui/src/app/scenes/session/ChatPane.composer-layout.test.tsx
index d2e80757b7..02d4001ac9 100644
--- a/src/web-ui/src/app/scenes/session/ChatPane.composer-layout.test.tsx
+++ b/src/web-ui/src/app/scenes/session/ChatPane.composer-layout.test.tsx
@@ -5,7 +5,9 @@ import { expect, it, vi } from 'vitest';
 import ChatPane from './ChatPane';
 
 vi.mock('@/flow_chat/components/modern/ModernFlowChatContainer', () => ({
-  ModernFlowChatContainer: () => <div data-testid="transcript" />,
+  ModernFlowChatContainer: ({ resizeSuspended = false }: { resizeSuspended?: boolean }) => (
+    <div data-testid="transcript" data-resize-suspended={String(resizeSuspended)} />
+  ),
 }));
 vi.mock('@/flow_chat/components/ChatInput', () => ({
   ChatInput: ({ layoutResizeSuspended }: { layoutResizeSuspended: boolean }) => (
@@ -35,12 +37,16 @@ it('docks only the composer and forwards resize suspension without remounting th
     expect(dock.contains(composer)).toBe(true);
     expect(dock.contains(transcript)).toBe(false);
     composer.value = 'unsent';
-    for (const isDragging of [true, false]) {
-      act(() => root.render(<ChatPane width={0} isFullscreen={false} showChatInput isDragging={isDragging} />));
+    // Both the drag itself and the settle window two frames after it: the
+    // transcript stops measuring for either, the composer only for the drag.
+    for (const [isDragging, resizeSuspended] of [[true, true], [false, false], [false, true]] as const) {
+      act(() => root.render(<ChatPane width={0} isFullscreen={false} showChatInput
+        isDragging={isDragging} resizeSuspended={resizeSuspended} />));
       expect(container.querySelector('[data-testid="transcript"]')).toBe(transcript);
       expect(container.querySelector('[data-testid="composer"]')).toBe(composer);
       expect(composer.value).toBe('unsent');
       expect(composer.dataset.resizeSuspended).toBe(String(isDragging));
+      expect(transcript.dataset.resizeSuspended).toBe(String(resizeSuspended));
     }
   } finally {
     act(() => root.unmount());
diff --git a/src/web-ui/src/app/scenes/session/ChatPane.tsx b/src/web-ui/src/app/scenes/session/ChatPane.tsx
index 8260ed892d..80491980b7 100644
--- a/src/web-ui/src/app/scenes/session/ChatPane.tsx
+++ b/src/web-ui/src/app/scenes/session/ChatPane.tsx
@@ -37,6 +37,8 @@ interface ChatPaneProps {
   workspacePath?: string;
   isDragging?: boolean;
   showChatInput?: boolean;
+  /** The hosting pane is being resized; width-derived measurement waits for it to settle. */
+  resizeSuspended?: boolean;
   /** Whether the host-owned session right panel is open. */
   isRightPanelOpen?: boolean;
   /** Toggle the host-owned session right panel. */
@@ -58,6 +60,7 @@ const ChatPaneInner: React.FC<ChatPaneProps> = ({
   workspacePath,
   isDragging = false,
   showChatInput = false,
+  resizeSuspended = false,
   isRightPanelOpen = false,
   onToggleRightPanel,
   emptyState,
@@ -134,6 +137,7 @@ const ChatPaneInner: React.FC<ChatPaneProps> = ({
       <FlowChatContainer
         className="openbitfun-chat-pane__chat-container"
         isViewportActive={isSceneActive}
+        resizeSuspended={resizeSuspended}
         isRightPanelOpen={isRightPanelOpen}
         onToggleRightPanel={onToggleRightPanel}
         emptyState={emptyState}
diff --git a/src/web-ui/src/app/scenes/session/SessionScene.tsx b/src/web-ui/src/app/scenes/session/SessionScene.tsx
index acae87bfee..703b312201 100644
--- a/src/web-ui/src/app/scenes/session/SessionScene.tsx
+++ b/src/web-ui/src/app/scenes/session/SessionScene.tsx
@@ -3,6 +3,7 @@ import { GripHorizontal } from 'lucide-react';
 import React, { useRef, useState, useCallback, useEffect, useLayoutEffect, useMemo } from 'react';
 import { useI18n } from '@/infrastructure/i18n';
 import { useApp } from '../../hooks/useApp';
+import { useWorkbenchResize } from '../../workbench/workbenchResize';
 import ChatPane from './ChatPane';
 import BottomTerminalPane from './BottomTerminalPane';
 import { collapseSessionBottomTerminalPane, expandSessionBottomTerminalPane } from './sessionPanelLayout';
@@ -29,6 +30,7 @@ const SessionScene: React.FC<SessionSceneProps> = ({ workspacePath, isEntering =
   const { t } = useI18n('flow-chat');
   const { state, updateBottomTerminalPanelHeight } = useApp();
   const pane = useSessionPaneLayout();
+  const workbenchResize = useWorkbenchResize();
   const [isDraggingBottom, setIsDraggingBottom] = useState(false);
   const [isHoveringBottom, setIsHoveringBottom] = useState(false);
   const [isBottomTerminalPanelTransitioning, setIsBottomTerminalPanelTransitioning] = useState(false);
@@ -42,7 +44,7 @@ const SessionScene: React.FC<SessionSceneProps> = ({ workspacePath, isEntering =
   const currentBottomHeight = state.layout.bottomTerminalPanelHeight || BOTTOM_TERMINAL_PANEL_CONFIG.COMFORTABLE_DEFAULT;
   const isTerminalDockedBottom = terminalPanelPosition === 'bottom';
   const isBottomHidden = state.layout.bottomTerminalPanelCollapsed;
-  const isDragging = isDraggingBottom;
+  const isDragging = isDraggingBottom || workbenchResize.resizing;
   const bottomTerminalPanelMode = isBottomHidden ? 'collapsed'
     : getPanelDisplayMode(currentBottomHeight, BOTTOM_TERMINAL_PANEL_CONFIG);
 
@@ -193,6 +195,7 @@ const SessionScene: React.FC<SessionSceneProps> = ({ workspacePath, isEntering =
           data-openbitfun-scene="session" data-openbitfun-part="chat">
           <ChatPane width={0} isFullscreen={false} isSceneActive={isActive}
             isDragging={isDragging} workspacePath={workspacePath} showChatInput
+            resizeSuspended={workbenchResize.measurementSuspended}
             isRightPanelOpen={pane.mode !== 'chat-only'} onToggleRightPanel={pane.toggleContent} />
         </div>
       </div>
diff --git a/src/web-ui/src/app/workbench/AGENTS.md b/src/web-ui/src/app/workbench/AGENTS.md
index 4387eea30d..5ac83d5d63 100644
--- a/src/web-ui/src/app/workbench/AGENTS.md
+++ b/src/web-ui/src/app/workbench/AGENTS.md
@@ -24,3 +24,12 @@ pnpm --dir src/web-ui run test:run src/app/workbench/WorkbenchTabDrag.test.tsx s
 Use the parent guide's Session state checks when changing activation or lifetime,
 and the editor guide's focused suite when changing document behavior. Do not use
 mock-based visual verification or browser control for this module.
+
+For pane drag and settle measurement suspension:
+
+```bash
+pnpm --dir src/web-ui exec vitest run src/shared/ui/SplitView.test.tsx src/app/workbench/WorkbenchLayout.test.tsx src/app/scenes/session/ChatPane.composer-layout.test.tsx src/flow_chat/components/btw/BtwVirtualSessionList.test.tsx src/flow_chat/components/modern/useFlowChatVirtualizer.measurement.test.tsx
+```
+
+These DOM fixtures cover split/overlay gestures, cancellation, resize bounds and
+measurement recovery. They do not establish native frame timing or live remote behavior.
diff --git a/src/web-ui/src/app/workbench/ContentResourceView.tsx b/src/web-ui/src/app/workbench/ContentResourceView.tsx
index e4802015bb..d82a8ec344 100644
--- a/src/web-ui/src/app/workbench/ContentResourceView.tsx
+++ b/src/web-ui/src/app/workbench/ContentResourceView.tsx
@@ -10,8 +10,10 @@ import { useI18n } from '@/infrastructure/i18n';
 import { useSceneStore } from '../stores/sceneStore';
 import { getActiveSurfaceId } from '@/infrastructure/peer-device/deviceSurface';
 import { useShortcut } from '@/infrastructure/hooks/useShortcut';
+import { useWorkbenchResize } from './workbenchResize';
 
 export default function ContentResourceView({ resourceId, isActive }: { resourceId: string; isActive: boolean }) {
+  const { measurementSuspended } = useWorkbenchResize();
   const focused = useSceneStore(state => state.activeTabId === `content:${resourceId}`);
   const resource = useContentResourceStore(state => state.resources[resourceId]);
   const update = useContentResourceStore(state => state.update);
@@ -47,6 +49,7 @@ export default function ContentResourceView({ resourceId, isActive }: { resource
     <EditorDocumentContext.Provider value={document}>
       <ResourceFileContext.Provider value={document}>
       <FlexiblePanel content={resource.content} workspacePath={resource.scope.workspacePath} isActive={isActive}
+        resizeSuspended={measurementSuspended} terminalResizeSuspended={measurementSuspended}
         onContentChange={content => {
           if (content) {
             // Buffers belong to EditorDocument. Keep file presentation updates out of the tab store's hot path.
diff --git a/src/web-ui/src/app/workbench/README.md b/src/web-ui/src/app/workbench/README.md
index a15c8cff3e..aae5adfb59 100644
--- a/src/web-ui/src/app/workbench/README.md
+++ b/src/web-ui/src/app/workbench/README.md
@@ -35,6 +35,12 @@ replacing the destination cancels the request instead of recreating its tab.
 Git opens and bottom-terminal opens keep their explicitly selected inline host.
 
 WorkbenchLayout owns one SplitView for the header and both content regions.
+It also owns resize suspension: its context reaches session scenes and promoted
+content views in either pane, and the canvas receives the same state. Transcripts
+retain their last published width throughout a drag and the two-frame layout settle window;
+composer layout pauses only during the drag. SplitView uses its observer-cached
+bounds for pointer moves and queued paint frames, so a container resize updates
+drag constraints without a synchronous layout read in the pointer handlers.
 SceneViewport renders a flat, keyed deck of SplitViewSurface hosts: moving a tab
 changes grid placement, never the React parent, iframe, document or mounted scene.
 SceneStore records optional pane membership (legacy tabs default to primary),
diff --git a/src/web-ui/src/app/workbench/WorkbenchLayout.test.tsx b/src/web-ui/src/app/workbench/WorkbenchLayout.test.tsx
index a1bee95715..7981fba164 100644
--- a/src/web-ui/src/app/workbench/WorkbenchLayout.test.tsx
+++ b/src/web-ui/src/app/workbench/WorkbenchLayout.test.tsx
@@ -22,8 +22,18 @@ vi.mock('@/infrastructure/i18n', () => ({ useI18n: () => ({ t: (key: string) =>
 vi.mock('../hooks/useApp', () => ({
   useApp: () => ({ state: { layout: { bottomTerminalPanelCollapsed: true } }, updateBottomTerminalPanelHeight: vi.fn() }),
 }));
-vi.mock('../scenes/session/ChatPane', () => ({ default: () => <textarea data-testid="chat-draft" defaultValue="draft" /> }));
-vi.mock('../scenes/session/AuxPane', () => ({ default: () => <iframe title="Editor" /> }));
+vi.mock('../scenes/session/ChatPane', () => ({
+  default: ({ isDragging = false, resizeSuspended = false }: { isDragging?: boolean; resizeSuspended?: boolean }) => (
+    <textarea data-testid="chat-draft" data-dragging={String(isDragging)}
+      data-resize-suspended={String(resizeSuspended)} defaultValue="draft" />
+  ),
+}));
+vi.mock('../scenes/session/AuxPane', () => ({
+  default: ({ resizeSuspended = false, terminalResizeSuspended = false }: {
+    resizeSuspended?: boolean; terminalResizeSuspended?: boolean;
+  }) => <iframe title="Editor" data-resize-suspended={String(resizeSuspended)}
+    data-terminal-resize-suspended={String(terminalResizeSuspended)} />,
+}));
 vi.mock('../scenes/session/BottomTerminalPane', () => ({ default: () => null }));
 vi.mock('../scenes/session/sessionPanelLayout', () => ({ collapseSessionBottomTerminalPane: vi.fn(), expandSessionBottomTerminalPane: vi.fn() }));
 vi.mock('@/tools/terminal/services/terminalPanelPreferenceService', () => ({
@@ -60,6 +70,7 @@ describe('workbench pane layout integration', () => {
     localStorage.clear();
     vi.restoreAllMocks();
     vi.unstubAllGlobals();
+    vi.useRealTimers();
   });
 
   it('applies the settings selection to a mounted scene and routes resizing to independent preferences', () => {
@@ -95,6 +106,52 @@ describe('workbench pane layout integration', () => {
     expect(container.querySelector('iframe')).toBe(editor);
   });
 
+  it.each(['split', 'overlay'] as const)('suspends both transcripts through drag and settle in %s mode', layout => {
+    vi.useFakeTimers();
+    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => setTimeout(() => callback(0), 16));
+    vi.stubGlobal('cancelAnimationFrame', (id: number) => clearTimeout(id));
+    const pane = sessionPaneLayoutStore.getState();
+    pane.setDisplayMode(layout);
+    pane.showContent();
+    act(() => root.render(<WorkbenchLayout><SessionScene /></WorkbenchLayout>));
+    const chat = container.querySelector<HTMLTextAreaElement>('[data-testid="chat-draft"]')!;
+    const editor = container.querySelector('iframe')!;
+    const handle = container.querySelector<HTMLElement>('[role="separator"]')!;
+    const pointer = (type: string, clientX: number) => act(() => {
+      const event = new MouseEvent(type, { clientX, button: 0, bubbles: true, cancelable: true });
+      Object.defineProperty(event, 'pointerId', { value: 1 });
+      handle.dispatchEvent(event);
+    });
+    const expectSuspended = (suspended: boolean) => {
+      expect(chat.dataset.resizeSuspended).toBe(String(suspended));
+      expect(editor.dataset.resizeSuspended).toBe(String(suspended));
+      expect(editor.dataset.terminalResizeSuspended).toBe(String(suspended));
+    };
+    act(() => vi.advanceTimersByTime(32));
+    expectSuspended(false);
+    chat.value = 'unsent edit';
+    pointer('pointerdown', 600);
+    expectSuspended(true);
+    expect(chat.dataset.dragging).toBe('true');
+    pointer('pointermove', 560);
+    act(() => vi.advanceTimersByTime(16));
+    expectSuspended(true);
+    pointer('pointerup', 560);
+    expect(chat.dataset.dragging).toBe('false');
+    expectSuspended(true);
+    act(() => vi.advanceTimersByTime(16));
+    expectSuspended(true);
+    act(() => vi.advanceTimersByTime(16));
+    expectSuspended(false);
+    pointer('pointerdown', 600);
+    expectSuspended(true);
+    pointer('pointercancel', 600);
+    expectSuspended(false);
+    expect(container.querySelector('[data-testid="chat-draft"]')).toBe(chat);
+    expect(chat.value).toBe('unsent edit');
+    expect(container.querySelector('iframe')).toBe(editor);
+  });
+
   it('retains the auxiliary view when the main scene changes or the pane is hidden', () => {
     const pane = sessionPaneLayoutStore.getState();
     pane.showContent();
diff --git a/src/web-ui/src/app/workbench/WorkbenchLayout.tsx b/src/web-ui/src/app/workbench/WorkbenchLayout.tsx
index a4b578493e..9cbe11179a 100644
--- a/src/web-ui/src/app/workbench/WorkbenchLayout.tsx
+++ b/src/web-ui/src/app/workbench/WorkbenchLayout.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { ArrowLeftRight, Maximize2, Minimize2 } from 'lucide-react';
 import { Icon, IconButton, SplitView, SplitViewSurface, ToolbarGroup, Tooltip, type SplitViewHeaderGeometry } from '@openbitfun/ui';
 import { useI18n } from '@/infrastructure/i18n';
@@ -15,6 +15,7 @@ import { SceneTopBar } from '../components/SceneTopBar';
 import { CanvasToolbarHost, CanvasToolbarProvider } from '../components/panels/content-canvas/CanvasToolbar';
 import AuxPane from '../scenes/session/AuxPane';
 import { useWorkbenchPaneLayout } from './workbenchPaneLayoutStore';
+import { WorkbenchResizeContext } from './workbenchResize';
 import { PANEL_COMMON_CONFIG, RIGHT_PANEL_CONFIG } from '../layout/panelConfig';
 import './WorkbenchLayout.scss';
 
@@ -30,6 +31,10 @@ export default function WorkbenchLayout({ workspacePath, children, ...windowProp
   const { t: tCommon } = useI18n('common');
   const [resizing, setResizing] = useState(false);
   const [settling, setSettling] = useState(false);
+  const resizeState = useMemo(() => ({
+    resizing,
+    measurementSuspended: resizing || settling,
+  }), [resizing, settling]);
   const [offeredTab, setOfferedTab] = useState(false);
   const [dropTarget, setDropTarget] = useState<'leading' | 'trailing' | null>(null);
   const panelOpen = pane.mode !== 'chat-only';
@@ -124,7 +129,7 @@ export default function WorkbenchLayout({ workspacePath, children, ...windowProp
         </Tooltip>
       </ToolbarGroup>}
     />;
-  return <CanvasToolbarProvider>
+  return <WorkbenchResizeContext.Provider value={resizeState}><CanvasToolbarProvider>
     <div className="openbitfun-workbench-layout__body" data-openbitfun-scene="workbench" data-openbitfun-part="contentLayout">
       <SplitView header={header}
         mode={pane.mode === 'chat-only' ? 'primary' : pane.mode === 'content-only' ? 'secondary' : 'split'}
@@ -146,10 +151,11 @@ export default function WorkbenchLayout({ workspacePath, children, ...windowProp
           {/* Keep the skin address while the canvas moves between stable surface slots. */}
           <div className="openbitfun-workbench-layout__auxiliary" data-openbitfun-scene="session" data-openbitfun-part="auxiliary">
             <AuxPane workspacePath={workspacePath} externalToolbar isSceneActive={canvasVisible}
-              terminalResizeSuspended={resizing || settling} />
+              terminalResizeSuspended={resizeState.measurementSuspended}
+              resizeSuspended={resizeState.measurementSuspended} />
           </div>
         </SplitViewSurface></>}
       />
     </div>
-  </CanvasToolbarProvider>;
+  </CanvasToolbarProvider></WorkbenchResizeContext.Provider>;
 }
diff --git a/src/web-ui/src/app/workbench/workbenchResize.ts b/src/web-ui/src/app/workbench/workbenchResize.ts
new file mode 100644
index 0000000000..beaaf0e70f
--- /dev/null
+++ b/src/web-ui/src/app/workbench/workbenchResize.ts
@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+/** Shared pane geometry belongs to the workbench, including scenes in either slot. */
+export const WorkbenchResizeContext = createContext({
+  resizing: false,
+  measurementSuspended: false,
+});
+
+export function useWorkbenchResize() {
+  return useContext(WorkbenchResizeContext);
+}
diff --git a/src/web-ui/src/flow_chat/components/btw/BtwSessionPanel.tsx b/src/web-ui/src/flow_chat/components/btw/BtwSessionPanel.tsx
index fa38dee455..98a1e5119e 100644
--- a/src/web-ui/src/flow_chat/components/btw/BtwSessionPanel.tsx
+++ b/src/web-ui/src/flow_chat/components/btw/BtwSessionPanel.tsx
@@ -103,6 +103,8 @@ export interface BtwSessionPanelProps {
   workspacePath?: string;
   viewKind?: BtwSessionViewKind;
   displayTitle?: string;
+  /** The hosting pane is being resized; width-derived measurement waits for it to settle. */
+  resizeSuspended?: boolean;
 }
 
 const resolveSessionTitle = (session?: Pick<Session, 'title'> | null, fallback = 'Side thread') =>
@@ -154,6 +156,7 @@ const BtwSessionPanelContent: React.FC<BtwSessionPanelProps & { viewState: BtwPa
   workspacePath,
   viewKind,
   displayTitle,
+  resizeSuspended = false,
   viewState,
 }) => {
   const { t } = useTranslation('flow-chat');
@@ -1205,6 +1208,7 @@ const BtwSessionPanelContent: React.FC<BtwSessionPanelProps & { viewState: BtwPa
               onExpandGroup={onExpandGroup}
               isHistorical={childSession.isHistorical === true}
               viewState={viewState}
+              measurementSuspended={resizeSuspended}
             />
           )}
           {childSession.sessionKind === 'btw' && <FlowChatSelectionBar rootRef={scrollContainerRef}
diff --git a/src/web-ui/src/flow_chat/components/btw/BtwVirtualSessionList.test.tsx b/src/web-ui/src/flow_chat/components/btw/BtwVirtualSessionList.test.tsx
index 1dc3fb5992..9a2fdad7d8 100644
--- a/src/web-ui/src/flow_chat/components/btw/BtwVirtualSessionList.test.tsx
+++ b/src/web-ui/src/flow_chat/components/btw/BtwVirtualSessionList.test.tsx
@@ -6,6 +6,33 @@ import { BtwVirtualSessionList } from './BtwVirtualSessionList';
 import type { VirtualItem } from '../../store/modernFlowChatStore';
 import type { FlowChatViewportOwnerApi } from '../modern/useFlowChatViewportOwner';
 
+/**
+ * What the transcript asked the virtualizer to measure against, per render.
+ *
+ * The hook itself is passed straight through, so every other test in this file
+ * keeps running against the real virtualizer.
+ */
+const virtualizerProbe = vi.hoisted(() => ({
+  /** Every published settled width, in render order. */
+  widths: [] as Array<number | undefined>,
+  /** Whether the render called itself a frame of a still-moving pane. */
+  suspensions: [] as boolean[],
+  renders: 0,
+}));
+
+vi.mock('../modern/useFlowChatVirtualizer', async importOriginal => {
+  const actual = await importOriginal<typeof import('../modern/useFlowChatVirtualizer')>();
+  return {
+    ...actual,
+    useFlowChatVirtualizer: (options: Parameters<typeof actual.useFlowChatVirtualizer>[0]) => {
+      virtualizerProbe.renders += 1;
+      virtualizerProbe.widths.push(options.estimateContext?.availableWidthPx);
+      virtualizerProbe.suspensions.push(options.measurementSuspended === true);
+      return actual.useFlowChatVirtualizer(options);
+    },
+  };
+});
+
 vi.mock('../modern/VirtualItemRenderer', () => ({
   VirtualItemRenderer: ({ index, measureRef }: { index: number; measureRef: React.Ref<HTMLDivElement> }) => (
     <div ref={measureRef} data-virtual-index={index}>{index}</div>
@@ -28,7 +55,7 @@ describe('BtwVirtualSessionList', () => {
     type: 'image-analyzing', turnId: `turn-${index}`,
   } as VirtualItem));
 
-  function render(renderedItems = items) {
+  function render(renderedItems = items, measurementSuspended = false) {
     act(() => root.render(
       <BtwVirtualSessionList
         items={renderedItems}
@@ -38,14 +65,33 @@ describe('BtwVirtualSessionList', () => {
         viewportOwner={owner}
         exploreGroupStates={new Map()}
         isHistorical={false}
+        measurementSuspended={measurementSuspended}
       />,
     ));
   }
 
+  /** The width the observer saw, as the list published it to the virtualizer. */
+  function publishedWidths() {
+    return virtualizerProbe.widths.filter((width, index) => (
+      index === 0 || virtualizerProbe.widths[index - 1] !== width
+    ));
+  }
+
+  /** Deliver the scroller's own resize, which is the one a divider drag drives. */
+  function resizeScroller(widthPx: number) {
+    Object.defineProperty(scroller, 'clientWidth', { configurable: true, value: widthPx });
+    for (const observer of [...resizeObservers]) {
+      if (observer.targets.has(scroller)) observer.callback([], {} as ResizeObserver);
+    }
+  }
+
   beforeEach(() => {
     frames = new Map();
     resizeObservers = [];
     nextFrame = 0;
+    virtualizerProbe.widths.length = 0;
+    virtualizerProbe.suspensions.length = 0;
+    virtualizerProbe.renders = 0;
     vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
       frames.set(++nextFrame, callback);
       return nextFrame;
@@ -227,4 +273,37 @@ describe('BtwVirtualSessionList', () => {
       expect(scroller.scrollHeight - 15).toBeGreaterThan(measuredTotal);
     }
   });
+
+  /**
+   * The pane-resize case.
+   *
+   * A divider drag narrows this scroller on every frame, and the row estimates
+   * — with the heights measured against them — are derived from its width. The
+   * list has to hold the settled width for the whole gesture and publish the
+   * width the drag ended on exactly once, so the virtualizer re-measures once
+   * too instead of once per frame.
+   */
+  it('holds the settled width while a pane resize is suspended and applies it once on settle', () => {
+    // The mount publishes the width the panel settled on.
+    render();
+    expect(publishedWidths()).toEqual([undefined, 500]);
+
+    // The drag starts; every frame below is a width change with no measurement.
+    render(undefined, true);
+    expect(virtualizerProbe.suspensions.at(-1)).toBe(true);
+    const rendersWhenTheDragStarted = virtualizerProbe.renders;
+    for (const widthPx of [480, 460, 440, 420]) act(() => resizeScroller(widthPx));
+
+    expect(virtualizerProbe.renders).toBe(rendersWhenTheDragStarted);
+    expect(publishedWidths()).toEqual([undefined, 500]);
+
+    // The layout settles: the width the drag ended on lands once.
+    render(undefined, false);
+    expect(publishedWidths()).toEqual([undefined, 500, 420]);
+    expect(virtualizerProbe.suspensions.at(-1)).toBe(false);
+
+    // And once only: later renders carry the same settled width.
+    render(undefined, false);
+    expect(publishedWidths()).toEqual([undefined, 500, 420]);
+  });
 });
diff --git a/src/web-ui/src/flow_chat/components/btw/BtwVirtualSessionList.tsx b/src/web-ui/src/flow_chat/components/btw/BtwVirtualSessionList.tsx
index 9ddeea8c77..0720768fd1 100644
--- a/src/web-ui/src/flow_chat/components/btw/BtwVirtualSessionList.tsx
+++ b/src/web-ui/src/flow_chat/components/btw/BtwVirtualSessionList.tsx
@@ -1,5 +1,5 @@
 import { useEmbeddedTimelineFollow } from '../../timeline/useEmbeddedTimelineFollow';
-import { Fragment, useEffect, useRef, useState, type RefObject, type MutableRefObject } from 'react';
+import { Fragment, useEffect, useLayoutEffect, useRef, useState, type RefObject, type MutableRefObject } from 'react';
 import type { VirtualItem } from '../../store/modernFlowChatStore';
 import { VirtualItemRenderer } from '../modern/VirtualItemRenderer';
 import { useFlowChatVirtualizer } from '../modern/useFlowChatVirtualizer';
@@ -32,26 +32,51 @@ interface BtwVirtualSessionListProps {
   isHistorical: boolean;
   viewState?: BtwPanelViewState;
   onExpandGroup?: (id: string) => void;
+  /** The hosting pane is being resized; width-derived measurement waits for it to settle. */
+  measurementSuspended?: boolean;
 }
 
 /** The embedded transcript shares row placement, not the primary session shell. */
 export function BtwVirtualSessionList({
   items: sourceItems, scrollerRef, headerRef, followRef, viewportOwner,
   exploreGroupStates, isHistorical, viewState, onExpandGroup,
+  measurementSuspended = false,
 }: BtwVirtualSessionListProps) {
   const { sessionId } = useFlowChatContext();
   const { items, reader } = useConversationTimeline(sourceItems, sessionId, 'side');
   const windowRef = useRef<HTMLDivElement>(null);
   const [width, setWidth] = useState(0);
+  const measurementSuspendedRef = useRef(measurementSuspended);
+  measurementSuspendedRef.current = measurementSuspended;
+  /** The last width the observer saw while the pane was still moving. */
+  const pendingWidthRef = useRef<number | null>(null);
   useEffect(() => {
     const scroller = scrollerRef.current;
     if (!scroller) return;
-    const updateWidth = () => setWidth(scroller.clientWidth);
+    const updateWidth = () => {
+      /*
+       * A divider drag changes this scroller's width every frame, and the row
+       * estimates — with every height measured against them — are derived from
+       * it. Hold the last settled width for the duration; the settle below
+       * publishes the width the drag ended on exactly once.
+       */
+      if (measurementSuspendedRef.current) {
+        pendingWidthRef.current = scroller.clientWidth;
+        return;
+      }
+      setWidth(scroller.clientWidth);
+    };
     const observer = new ResizeObserver(updateWidth);
     observer.observe(scroller);
     updateWidth();
     return () => observer.disconnect();
   }, [scrollerRef]);
+  useLayoutEffect(() => {
+    if (measurementSuspended) return;
+    const pending = pendingWidthRef.current;
+    pendingWidthRef.current = null;
+    if (pending !== null) setWidth(current => (current === pending ? current : pending));
+  }, [measurementSuspended]);
   const cancelAimRef = useRef<() => void>(() => {});
   const pinnedKeys = useTimelineInteraction(scrollerRef, reader, () => followRef.current, undefined, () => {
     followRef.current = false;
@@ -72,6 +97,7 @@ export function BtwVirtualSessionList({
     },
     estimateContextRevision: `${width}|${isHistorical}|${[...exploreGroupStates]
       .map(([id, expanded]) => `${id}:${expanded}`).join(',')}`,
+    measurementSuspended,
     scrollPaddingStartPx: 0,
     writeViewport: viewportOwner.write,
     shiftViewport: viewportOwner.shift,
diff --git a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx
index 166a289a78..cec20f0dae 100644
--- a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.tsx
@@ -128,6 +128,8 @@ const log = createLogger('ModernFlowChatContainer');
 interface ModernFlowChatContainerProps {
   className?: string;
   isViewportActive?: boolean;
+  /** The hosting pane is being resized; width-derived measurement waits for it to settle. */
+  resizeSuspended?: boolean;
   /** Whether the host-owned session right panel is open. */
   isRightPanelOpen?: boolean;
   /** Toggle the host-owned session right panel. */
@@ -299,6 +301,7 @@ function backgroundCommandSummaryFromActivity(activity: BackgroundCommandActivit
 export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = ({
   className = '',
   isViewportActive = true,
+  resizeSuspended = false,
   isRightPanelOpen = false,
   onToggleRightPanel,
   emptyState,
@@ -2817,6 +2820,7 @@ export const ModernFlowChatContainer: React.FC<ModernFlowChatContainerProps> = (
                   items={virtualItems}
                   latestTurnId={latestTurnId}
                   isViewportActive={isViewportActive}
+                  measurementSuspended={resizeSuspended}
                   presentationMode={isRenderingHistoryProjection ? 'history-window' : 'tail'}
                   viewportMode={isViewportDetachedFromLiveTail ? 'history-reading' : 'live-tail'}
                   historyWindow={isShowingHistoryPresentation ? activeHistoryPresentation?.range ?? null : null}
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx
index 9ee43e8220..5633716ad4 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.tsx
@@ -222,6 +222,8 @@ export interface VirtualMessageListProps {
   /** Session catalog identity, independent from the current history window. */
   latestTurnId?: string;
   isViewportActive?: boolean;
+  /** The hosting pane is being resized; width-derived measurement waits for it to settle. */
+  measurementSuspended?: boolean;
   presentationMode?: 'tail' | 'history-window';
   viewportMode?: 'live-tail' | 'history-reading';
   historyWindow?: ActiveTurnRenderRange | null;
@@ -380,6 +382,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
   items,
   latestTurnId,
   isViewportActive = true,
+  measurementSuspended = false,
   presentationMode = 'tail',
   viewportMode = presentationMode === 'history-window' ? 'history-reading' : 'live-tail',
   historyWindow = null,
@@ -457,6 +460,10 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
   const observedViewportBoxRef = useRef<{ width: number; height: number } | null>(null);
   /** Native minimization withdraws the scroller without unmounting the session. */
   const isViewportSuspendedRef = useRef(false);
+  const measurementSuspendedRef = useRef(measurementSuspended);
+  measurementSuspendedRef.current = measurementSuspended;
+  /** The last width the observer saw while the pane was still moving. */
+  const pendingViewportWidthRef = useRef<number | null>(null);
   const suspendedViewportScrollTopRef = useRef<number | null>(null);
   const viewportResumeFrameRef = useRef<number | null>(null);
   /** Remaining resize callbacks over which to keep a resting viewport at the end. */
@@ -541,6 +548,7 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
         .join(','),
     ].join('|'),
     isViewportSuspended: () => isViewportSuspendedRef.current,
+    measurementSuspended,
     scrollPaddingStartPx: FLOWCHAT_TURN_TOP_GAP_PX,
     writeViewport: viewportOwner.write,
     shiftViewport: viewportOwner.shift,
@@ -1572,7 +1580,18 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
         tailRealignCallbacksRef.current = TAIL_REALIGN_RESIZE_CALLBACKS;
       }
       setViewportHeightPx(nextViewportBox.height);
-      setViewportWidthPx(nextViewportBox.width);
+      /*
+       * A divider drag changes this scroller's width every frame, and both the
+       * row estimates and the heights measured against them are derived from
+       * it. Publish only the settled width: the release effect below applies
+       * the width the drag ended on exactly once, and the virtualizer's
+       * layout-signature pass runs against that layout rather than each frame.
+       */
+      if (measurementSuspendedRef.current) {
+        pendingViewportWidthRef.current = nextViewportBox.width;
+      } else {
+        setViewportWidthPx(nextViewportBox.width);
+      }
 
       /*
        * Before paint, and ahead of everything below: this observer is the one
@@ -1633,6 +1652,20 @@ const VirtualMessageListSession = forwardRef<VirtualMessageListRef, VirtualMessa
     viewportOwner,
   ]);
 
+  /*
+   * One re-measure for a pane drag, against the width the drag ended on.
+   *
+   * The observer above holds the width while the drag is in flight, so the last
+   * box it saw is the settled layout. Publishing it here moves the estimates
+   * and re-measures the rendered rows once, instead of once per frame.
+   */
+  useLayoutEffect(() => {
+    if (measurementSuspended) return;
+    const pending = pendingViewportWidthRef.current;
+    pendingViewportWidthRef.current = null;
+    if (pending !== null) setViewportWidthPx(current => (current === pending ? current : pending));
+  }, [measurementSuspended]);
+
   /**
    * Top-align a Turn, without scrolling into the reserved blank to do it.
    *
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.measurement.test.tsx b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.measurement.test.tsx
index 1adecb9890..8f532a376e 100644
--- a/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.measurement.test.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.measurement.test.tsx
@@ -35,9 +35,13 @@ interface HarnessProps {
   onApi: (api: FlowChatVirtualizer) => void;
   isViewportSuspended?: () => boolean;
   widthPx?: number;
+  /** A pane resize is changing the width on every frame. */
+  measurementSuspended?: boolean;
 }
 
-function Harness({ scroller, header, items, onApi, isViewportSuspended, widthPx }: HarnessProps) {
+function Harness({
+  scroller, header, items, onApi, isViewportSuspended, widthPx, measurementSuspended,
+}: HarnessProps) {
   const scrollerRef = React.useRef<HTMLElement | null>(scroller);
   const headerRef = React.useRef<HTMLElement | null>(header);
   onApi(useFlowChatVirtualizer({
@@ -49,6 +53,7 @@ function Harness({ scroller, header, items, onApi, isViewportSuspended, widthPx
     getKnownItemHeightPx: (item: Item) => item.knownHeightPx,
     estimateContext: { availableWidthPx: widthPx },
     isViewportSuspended,
+    measurementSuspended,
     scrollPaddingStartPx: 0,
     writeViewport: () => true,
   }));
@@ -222,6 +227,55 @@ describe('useFlowChatVirtualizer measurement', () => {
     ]);
   });
 
+  /**
+   * The pane-resize case: the width changes on every frame of a divider drag,
+   * and every measurement this pass takes is derived from it.
+   *
+   * The row is read through a counting `offsetHeight`, which is the work the
+   * pass is for: one read per pass, and the count says how many passes ran.
+   */
+  it('skips the layout-signature pass while a pane resize is suspended and runs it once on release', () => {
+    const items = [{ key: 'a' }, { key: 'b' }, { key: 'c' }];
+    let rowHeightPx = 300;
+    let rowReads = 0;
+    const row = document.createElement('div');
+    row.setAttribute('data-virtual-index', '2');
+    Object.defineProperty(row, 'offsetHeight', {
+      configurable: true,
+      get: () => { rowReads += 1; return rowHeightPx; },
+    });
+    scroller.appendChild(row);
+    const renderAt = (widthPx: number, measurementSuspended?: boolean) => act(() => root.render(
+      <Harness
+        scroller={scroller}
+        header={header}
+        items={items}
+        widthPx={widthPx}
+        measurementSuspended={measurementSuspended}
+        onApi={next => { api = next; }}
+      />,
+    ));
+
+    renderAt(500);
+    expect(api.getItemBounds(2)).toEqual({ startPx: ESTIMATE_PX * 2, endPx: ESTIMATE_PX * 2 + 300 });
+    const readsAfterSettle = rowReads;
+
+    // The drag starts: the content re-wraps and the width keeps changing.
+    rowHeightPx = 380;
+    for (const widthPx of [480, 440, 400, 360]) renderAt(widthPx, true);
+    expect(rowReads).toBe(readsAfterSettle);
+    expect(api.getItemBounds(2)).toEqual({ startPx: ESTIMATE_PX * 2, endPx: ESTIMATE_PX * 2 + 300 });
+
+    // The layout settles: one pass, against the width that stopped moving.
+    renderAt(360, false);
+    expect(rowReads).toBe(readsAfterSettle + 1);
+    expect(api.getItemBounds(2)).toEqual({ startPx: ESTIMATE_PX * 2, endPx: ESTIMATE_PX * 2 + 380 });
+
+    // And nothing after it: the settled signature is the measured one.
+    renderAt(360, false);
+    expect(rowReads).toBe(readsAfterSettle + 1);
+  });
+
   it('ignores an element carrying no usable index', () => {
     const stray = document.createElement('div');
     stray.setAttribute('data-virtual-index', 'not-an-index');
diff --git a/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.ts b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.ts
index b78b074916..e2238e9933 100644
--- a/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.ts
+++ b/src/web-ui/src/flow_chat/components/modern/useFlowChatVirtualizer.ts
@@ -239,6 +239,15 @@ export interface UseFlowChatVirtualizerOptions<T> {
   reconcileOpeningMeasurement?: () => boolean;
   /** The host has temporarily withdrawn the scroller, such as window minimization. */
   isViewportSuspended?: () => boolean;
+  /**
+   * A pane resize is changing the available width on every frame.
+   *
+   * Both the estimates and every measured row are derived from that width, so
+   * there is no settled layout to measure against until the gesture ends. The
+   * layout-signature pass below holds for the duration and runs exactly once
+   * when this goes back to false.
+   */
+  measurementSuspended?: boolean;
   /**
    * Gap kept above a Turn that has been scrolled to the top of the viewport.
    * Applied by the virtualizer itself so that its re-aim, which runs while
@@ -408,6 +417,7 @@ export function useFlowChatVirtualizer<T>({
   startAtTailOnMount = false,
   reconcileOpeningMeasurement,
   isViewportSuspended = () => false,
+  measurementSuspended = false,
   scrollPaddingStartPx,
   writeViewport,
   shiftViewport = () => false,
@@ -471,6 +481,8 @@ export function useFlowChatVirtualizer<T>({
   estimateContextRef.current = estimateContext;
   const isViewportSuspendedRef = useRef(isViewportSuspended);
   isViewportSuspendedRef.current = isViewportSuspended;
+  const measurementSuspendedRef = useRef(measurementSuspended);
+  measurementSuspendedRef.current = measurementSuspended;
 
   const [contentStartPx, setContentStartPx] = useState(0);
   useEffect(() => {
@@ -761,11 +773,26 @@ export function useFlowChatVirtualizer<T>({
   const measuredLayoutRef = useRef(layoutSignature);
   const previousKeysRef = useRef(new Set<string>());
   const retiredMeasurementsRef = useRef(0);
+  /** A pass owed to a layout that a pane drag had not finished moving. */
+  const pendingLayoutMeasureRef = useRef(false);
   useLayoutEffect(() => {
     const keys = new Set(items.map(getItemKeyRef.current));
     for (const key of previousKeysRef.current) if (!keys.has(key)) retiredMeasurementsRef.current++;
     previousKeysRef.current = keys;
-    if (measuredLayoutRef.current === layoutSignature && retiredMeasurementsRef.current < 2048) return;
+    if (measuredLayoutRef.current === layoutSignature && retiredMeasurementsRef.current < 2048
+      && !pendingLayoutMeasureRef.current) return;
+    /*
+     * A divider drag changes the available width every frame, and everything
+     * this pass reads — the estimates and the rendered rows' heights — is
+     * derived from that width. Measuring each intermediate width is what the
+     * drag would spend its frame on, so the invalidation is remembered rather
+     * than acted on: `measuredLayoutRef` keeps the settled signature, and the
+     * release runs exactly one pass against the layout that stopped moving.
+     */
+    if (measurementSuspendedRef.current) {
+      pendingLayoutMeasureRef.current = true;
+      return;
+    }
     if (isViewportSuspendedRef.current()) return;
     const scroller = scrollerRef.current;
     const before = (virtualizer as unknown as MeasuringVirtualizer).getMeasurements();
@@ -781,7 +808,9 @@ export function useFlowChatVirtualizer<T>({
     }
     measuredLayoutRef.current = layoutSignature;
     retiredMeasurementsRef.current = 0;
-  }, [itemKeyRevision, layoutSignature, items, measureRenderedItems, scrollerRef, shiftViewport, virtualizer]);
+    pendingLayoutMeasureRef.current = false;
+  }, [itemKeyRevision, layoutSignature, items, measureRenderedItems, scrollerRef, shiftViewport, virtualizer,
+    measurementSuspended]);
 
   const getItemBounds = useCallback((index: number): FlowChatItemBounds | null => {
     const measurement = (virtualizer as unknown as MeasuringVirtualizer)
diff --git a/src/web-ui/src/shared/ui/SplitView.test.tsx b/src/web-ui/src/shared/ui/SplitView.test.tsx
index 64c869ac44..b15d465bb6 100644
--- a/src/web-ui/src/shared/ui/SplitView.test.tsx
+++ b/src/web-ui/src/shared/ui/SplitView.test.tsx
@@ -13,6 +13,8 @@ describe('shared SplitView interaction contract', () => {
   let resized: () => void;
   let changed: ReturnType<typeof vi.fn>;
   let resizing: ReturnType<typeof vi.fn>;
+  /** Every element whose box was measured, in order, so the tests can attribute reads. */
+  let measured: HTMLElement[];
   const part = (name: string) => container.querySelector<HTMLElement>(`[data-openbitfun-component="split-view"][data-openbitfun-part="${name}"]`)!;
   const render = (props: Partial<SplitViewProps> = {}) => act(() => root.render(<SplitView
     primary={<SplitViewPrimaryDock><textarea aria-label="Draft" defaultValue="unsent" /></SplitViewPrimaryDock>}
@@ -23,19 +25,22 @@ describe('shared SplitView interaction contract', () => {
   />));
   const key = (target: HTMLElement, value: string, shiftKey = false) => act(() => target.dispatchEvent(new KeyboardEvent('keydown', { key: value, shiftKey, bubbles: true, cancelable: true })));
   const pointer = (type: string, x: number, pointerId = 1) => act(() => {
-    const event = new MouseEvent(type, { clientX: x, button: 0, bubbles: true, cancelable: true });
+    const event = new MouseEvent(type, { button: 0, bubbles: true, cancelable: true });
+    // jsdom coerces `clientX` to an integer, which would hide sub-pixel drags.
+    Object.defineProperty(event, 'clientX', { value: x });
     Object.defineProperty(event, 'pointerId', { value: pointerId });
     part('resizeHandle').dispatchEvent(event);
   });
 
   beforeEach(() => {
     width = 1001;
-    changed = vi.fn(); resizing = vi.fn();
+    changed = vi.fn(); resizing = vi.fn(); measured = [];
     vi.useFakeTimers();
     vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => setTimeout(() => cb(0), 16));
     vi.stubGlobal('cancelAnimationFrame', (id: number) => clearTimeout(id));
     vi.stubGlobal('ResizeObserver', class { constructor(callback: () => void) { resized = callback; } observe() {} disconnect() {} });
     vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      measured.push(this);
       return { width: this.getAttribute('data-openbitfun-part') === 'divider' ? 1 : width } as DOMRect;
     });
     container = document.createElement('div'); document.body.appendChild(container); root = createRoot(container);
@@ -183,6 +188,108 @@ describe('shared SplitView interaction contract', () => {
     expect(document.body.style.cursor).toBe('crosshair'); expect(document.body.style.userSelect).toBe('text');
   });
 
+  it('clamps a drag to the latest container width and commits the constrained size', () => {
+    render();
+    const splitRoot = part('root');
+    pointer('pointerdown', 600);
+    width = 601; act(() => resized());
+    expect(splitRoot.style.getPropertyValue('--_split-view-right-size')).toBe('300px');
+    pointer('pointermove', 500);
+    act(() => vi.advanceTimersByTime(16));
+    expect(splitRoot.style.getPropertyValue('--_split-view-right-size')).toBe('300px');
+    pointer('pointerup', 500);
+    expect(changed).toHaveBeenCalledExactlyOnceWith(300);
+  });
+
+  it('uses newly available space when the container grows during a drag', () => {
+    width = 701;
+    render({ rightSize: 600 });
+    pointer('pointerdown', 600); pointer('pointermove', 100);
+    act(() => vi.advanceTimersByTime(16));
+    expect(part('root').style.getPropertyValue('--_split-view-right-size')).toBe('400px');
+    width = 1201; act(() => resized());
+    pointer('pointermove', 100);
+    act(() => vi.advanceTimersByTime(16));
+    expect(part('root').style.getPropertyValue('--_split-view-right-size')).toBe('900px');
+    pointer('pointerup', 100);
+    expect(changed).toHaveBeenCalledExactlyOnceWith(900);
+  });
+
+  it('clamps a queued drag frame when the container shrinks before it paints', () => {
+    render();
+    pointer('pointerdown', 600); pointer('pointermove', 400);
+    width = 701; act(() => resized());
+    const readsAfterResize = measured.length;
+    act(() => vi.advanceTimersByTime(16));
+    expect(part('root').style.getPropertyValue('--_split-view-right-size')).toBe('400px');
+    expect(measured.length).toBe(readsAfterResize);
+    pointer('pointerup', 400);
+    expect(changed).toHaveBeenCalledExactlyOnceWith(400);
+  });
+
+  it('uses observer-cached bounds without layout reads during a drag', () => {
+    render();
+    const root = part('root');
+    const rootReads = () => measured.filter(element => element === root).length;
+    measured.length = 0;
+    pointer('pointerdown', 600);
+    // The observer already supplied the bounds; pointerdown needs no new read.
+    expect(rootReads()).toBe(0);
+    const readsAtPointerDown = measured.length;
+    pointer('pointermove', 560);
+    act(() => vi.advanceTimersByTime(16));
+    expect(root.style.getPropertyValue('--_split-view-right-size')).toBe('440px');
+    pointer('pointermove', 500);
+    act(() => vi.advanceTimersByTime(16));
+    expect(root.style.getPropertyValue('--_split-view-right-size')).toBe('500px');
+    expect(rootReads()).toBe(0);
+    expect(measured.length).toBe(readsAtPointerDown);
+    // Clamping still uses the cached width and commits once at release.
+    pointer('pointerup', 480);
+    expect(changed).toHaveBeenCalledExactlyOnceWith(520);
+  });
+
+  it('skips the live write for a sub-pixel move and writes again on a rounded change', () => {
+    render();
+    const root = part('root');
+    const setProperty = vi.spyOn(CSSStyleDeclaration.prototype, 'setProperty');
+    const sizeWrites = () => setProperty.mock.calls.filter(([name]) => name === '--_split-view-right-size').length;
+    pointer('pointerdown', 600);
+    expect(root.style.getPropertyValue('--_split-view-right-size')).toBe('400px');
+    const writesAtPointerDown = sizeWrites();
+    pointer('pointermove', 600.3);
+    act(() => vi.advanceTimersByTime(16));
+    expect(root.style.getPropertyValue('--_split-view-right-size')).toBe('400px');
+    expect(sizeWrites()).toBe(writesAtPointerDown);
+    expect(changed).not.toHaveBeenCalled();
+    pointer('pointermove', 599);
+    act(() => vi.advanceTimersByTime(16));
+    expect(root.style.getPropertyValue('--_split-view-right-size')).toBe('401px');
+    expect(sizeWrites()).toBe(writesAtPointerDown + 1);
+  });
+
+  it('re-seeds the sub-pixel guard when a re-render rewrites the displayed size mid-drag', () => {
+    render({ rightSize: 600 });
+    const root = part('root');
+    width = 701; act(() => resized());
+    expect(root.style.getPropertyValue('--_split-view-right-size')).toBe('400px');
+    pointer('pointerdown', 600); pointer('pointermove', 610);
+    act(() => vi.advanceTimersByTime(16));
+    expect(root.style.getPropertyValue('--_split-view-right-size')).toBe('390px');
+    // The container grows mid-drag: the root's ResizeObserver re-renders and React
+    // overwrites the inline width with the new resolved size, while `drag.painted`
+    // still holds what the drag wrote (390).
+    width = 1001; act(() => resized());
+    expect(root.style.getPropertyValue('--_split-view-right-size')).toBe('600px');
+    // 390.25 rounds to the stale painted value, but the DOM holds 600px, so the move
+    // must still write instead of being skipped as "already painted".
+    pointer('pointermove', 609.75);
+    act(() => vi.advanceTimersByTime(16));
+    expect(root.style.getPropertyValue('--_split-view-right-size')).toBe('390.25px');
+    pointer('pointerup', 609.75);
+    expect(changed).toHaveBeenCalledExactlyOnceWith(390.25);
+  });
+
   it.each(['pointercancel', 'lostpointercapture', 'Escape', 'mode', 'layout'])('cancels without persisting on %s', reason => {
     render(); pointer('pointerdown', 600); pointer('pointermove', 550);
     act(() => vi.advanceTimersByTime(16));