@@ -28,6 +28,10 @@ import { QueryError } from '@/components/query-error';
 import { performCopy } from '@/components/agents/use-message-copy';
 import { i18n } from '@/i18n';
 
+vi.mock('@/components/agents/session-detail-skeleton', () => ({
+  SessionSkeletonMessages: 'SessionSkeletonMessages',
+}));
+
 vi.mock('@/components/centered-state', () => ({ CenteredState: 'CenteredState' }));
 vi.mock('@/components/centered-state-surface', () => ({ StateSurface: 'View' }));
 vi.mock('@/components/ui/activity-indicator', () => ({ ActivityIndicator: 'ActivityIndicator' }));
 
@@ -21,6 +21,10 @@ import { HELD_CHILD_LOAD_RETRY_MS } from './child-session-sheet';
 import { i18n } from '@/i18n';
 import { QueryError } from '@/components/query-error';
 
+vi.mock('@/components/agents/session-detail-skeleton', () => ({
+  SessionSkeletonMessages: 'SessionSkeletonMessages',
+}));
+
 vi.mock('@/components/centered-state', () => ({ CenteredState: 'CenteredState' }));
 vi.mock('@/components/centered-state-surface', () => ({ StateSurface: 'View' }));
 vi.mock('@/components/ui/activity-indicator', () => ({ ActivityIndicator: 'ActivityIndicator' }));
 
@@ -20,6 +20,10 @@ import { QueryError } from '@/components/query-error';
 import { i18n } from '@/i18n';
 import { ChildSessionModelLabel } from './child-session-model-label';
 
+vi.mock('@/components/agents/session-detail-skeleton', () => ({
+  SessionSkeletonMessages: 'SessionSkeletonMessages',
+}));
+
 vi.mock('@/components/centered-state', () => ({ CenteredState: 'CenteredState' }));
 vi.mock('@/components/centered-state-surface', () => ({ StateSurface: 'View' }));
 vi.mock('@/components/ui/activity-indicator', () => ({ ActivityIndicator: 'ActivityIndicator' }));
 
@@ -52,6 +52,9 @@ vi.mock('@/lib/hooks/use-theme-colors', () => ({
 vi.mock('@/components/agents/session-pagination-header', () => ({
   SessionPaginationHeader: () => null,
 }));
+vi.mock('@/components/agents/session-detail-skeleton', () => ({
+  SessionSkeletonMessages: 'SessionSkeletonMessages',
+}));
 
 const baseProps = {
   sessionId: 'session-1',
@@ -163,6 +166,120 @@ describe('SessionMessageList', () => {
   });
 });
 
+describe('SessionMessageList open settle', () => {
+  function skeletonCount(renderer: TestRenderer.ReactTestRenderer): number {
+    return renderer.root.findAll(node => Object.is(node.type, 'SessionSkeletonMessages')).length;
+  }
+
+  function fireContentSize(height: number): void {
+    const handler = flashListProps.current?.onContentSizeChange as
+      | ((width: number, height: number) => void)
+      | undefined;
+    act(() => {
+      handler?.(400, height);
+    });
+  }
+
+  function fireLayout(height: number): void {
+    const handler = flashListProps.current?.onLayout as
+      | ((event: { nativeEvent: { layout: { height: number } } }) => void)
+      | undefined;
+    act(() => {
+      handler?.({ nativeEvent: { layout: { height } } });
+    });
+  }
+
+  it('keeps the loading skeleton over the rows until they stop measuring', () => {
+    vi.useFakeTimers();
+    const renderer = mountList({ items: ['m1', 'm2', 'm3'] });
+    expect(skeletonCount(renderer)).toBe(1);
+
+    // Content taller than the viewport: the list still has to settle.
+    fireLayout(655);
+    fireContentSize(790);
+    expect(skeletonCount(renderer)).toBe(1);
+
+    act(() => {
+      vi.advanceTimersByTime(150);
+    });
+    expect(skeletonCount(renderer)).toBe(0);
+  });
+
+  it('reveals a short transcript after the quiet window, not on its first height', () => {
+    vi.useFakeTimers();
+    const renderer = mountList();
+    fireLayout(655);
+    fireContentSize(500);
+
+    // A height that fits may still be a measurement in progress.
+    expect(skeletonCount(renderer)).toBe(1);
+    act(() => {
+      vi.advanceTimersByTime(150);
+    });
+    expect(skeletonCount(renderer)).toBe(0);
+  });
+
+  it('does not reveal before the list has measured anything', () => {
+    vi.useFakeTimers();
+    const renderer = mountList({ items: ['m1', 'm2', 'm3'] });
+
+    // A slow first measurement must not let the quiet window run out first.
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+    expect(skeletonCount(renderer)).toBe(1);
+
+    fireLayout(655);
+    fireContentSize(790);
+    act(() => {
+      vi.advanceTimersByTime(150);
+    });
+    expect(skeletonCount(renderer)).toBe(0);
+  });
+
+  it('settles again for a session the mounted list switches to', () => {
+    vi.useFakeTimers();
+    const renderer = mountList({ items: ['m1', 'm2', 'm3'] });
+    fireLayout(655);
+    fireContentSize(790);
+    act(() => {
+      vi.advanceTimersByTime(150);
+    });
+    expect(skeletonCount(renderer)).toBe(0);
+
+    // The Chat tab follows a conversation that moved onto a new session: the
+    // same list now paints different rows, without a new layout (the frame did
+    // not change), so only the content size arrives.
+    rerenderList(renderer, { sessionId: 'session-2', items: ['n1', 'n2', 'n3'] });
+    expect(skeletonCount(renderer)).toBe(1);
+
+    fireContentSize(810);
+    act(() => {
+      vi.advanceTimersByTime(150);
+    });
+    expect(skeletonCount(renderer)).toBe(0);
+  });
+
+  it('reveals the rows even if the content never stops measuring', () => {
+    vi.useFakeTimers();
+    const renderer = mountList({ items: ['m1', 'm2', 'm3'] });
+    fireLayout(655);
+
+    for (let elapsed = 0; elapsed < 1400; elapsed += 100) {
+      fireContentSize(800 + elapsed);
+      act(() => {
+        vi.advanceTimersByTime(100);
+      });
+    }
+    expect(skeletonCount(renderer)).toBe(1);
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+    expect(skeletonCount(renderer)).toBe(0);
+  });
+});
+
 describe('SessionMessageList older-page auto-scroll', () => {
   it('does not yank the viewport when an older page is prepended', () => {
     const renderer = mountList({ items: ['m1', 'm2'], hasOlderMessages: true });
 
@@ -72,6 +72,9 @@ vi.mock('@/lib/hooks/use-theme-colors', () => ({
 vi.mock('@/components/agents/session-pagination-header', () => ({
   SessionPaginationHeader: () => null,
 }));
+vi.mock('@/components/agents/session-detail-skeleton', () => ({
+  SessionSkeletonMessages: 'SessionSkeletonMessages',
+}));
 
 function resumeItem(id: string): SessionTranscriptItem {
   return {
 
@@ -9,8 +9,10 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useSessionListAutoScroll } from '@/components/agents/use-session-list-auto-scroll';
 import { useSessionListAnchorReport } from '@/components/agents/use-session-list-anchor-report';
+import { useSessionListOpenSettle } from '@/components/agents/use-session-list-open-settle';
 import { useSessionListResumeScroll } from '@/components/agents/use-session-list-resume-scroll';
 import { SessionPaginationHeader } from '@/components/agents/session-pagination-header';
+import { SessionTranscriptOpenGate } from '@/components/agents/session-transcript-open-gate';
 import { shouldTriggerOlderMessagesLoad } from '@/components/agents/session-message-list-state';
 import {
   getSessionTranscriptItemMessageId,
@@ -106,9 +108,7 @@ export function SessionMessageList<T>({
   followTailNonce,
 }: Readonly<SessionMessageListProps<T>>) {
   // Rows are already present when the list mounts (the resume never mounts a
-  // blank list), so the resume decision is derivable at render: every row's
-  // anchor id via `getSessionTranscriptItemMessageId`, and whether the anchor
-  // is one of them.
+  // blank list), so the resume decision is derivable at render.
   const anchorIds = useMemo(
     () => items.map(item => getSessionTranscriptItemMessageId(item as SessionTranscriptItem)),
     [items]
@@ -157,6 +157,18 @@ export function SessionMessageList<T>({
     initialAutoScroll: followTailAtMount,
     resumeKey: resumeAnchor,
   });
+  // The transcript stays behind the loading skeleton until its rows stop
+  // measuring, so the position it is first seen in is the position it keeps.
+  const {
+    openSettled,
+    handleContentSizeChange: handleContentSizeChangeForOpen,
+    handleListLayout: handleListLayoutForOpen,
+  } = useSessionListOpenSettle({
+    sessionId,
+    followTailAtMount,
+    onContentSizeChange: handleContentSizeChange,
+    onLayout: handleListLayout,
+  });
   const colors = useThemeColors();
   const { t } = useTranslation();
   const { left, right } = useSafeAreaInsets();
@@ -245,11 +257,10 @@ export function SessionMessageList<T>({
 
   // The newest message is kept visible when the viewport shrinks by the follow
   // itself: `handleListLayout` re-pins the tail on a viewport resize, and
-  // FlashList's `startRenderingFromBottom` holds the bottom while the layout
-  // changes. A keyboard listener here added a second, independent correction —
-  // the message stack jumped on its own timetable while the composer was still
-  // moving (video V1 ~19.0s), and no surface beside the provider may read the
-  // keyboard.
+  // `startRenderingFromBottom` holds the bottom while the layout changes. A
+  // keyboard listener here added a second, independent correction — the stack
+  // jumped as the composer moved (video V1 ~19.0s), and no surface beside the
+  // provider may read the keyboard.
 
   // Fire `onReachedBottom` only on the false→true transition of
   // `isAtBottom`. The previous-value ref prevents a fire on mount (the list
@@ -350,76 +361,78 @@ export function SessionMessageList<T>({
   );
 
   return (
-    <View className="flex-1">
-      <FlashList<T>
-        ref={listRef}
-        style={listStyle}
-        contentContainerStyle={resolvedContentContainerStyle}
-        data={items}
-        keyExtractor={keyExtractor}
-        getItemType={getItemType}
-        renderItem={renderItem}
-        // Transcript rows are tall and parse markdown on mount. The 250 dp
-        // default draws under half a screen ahead, so a fast fling shows blank
-        // space until the rows mount. A 2000 dp lookahead hides that.
-        drawDistance={DRAW_DISTANCE}
-        // Android Fabric can race clipped-view reattachment with rapid transcript updates.
-        // Kept explicit: flash-list ≥ 2.3.2 defaults this to false (PR #2202); the pin
-        // is asserted in src/lib/flash-list-contract.test.ts.
-        removeClippedSubviews={false}
-        onScroll={handleScroll}
-        onScrollBeginDrag={handleScrollBeginDrag}
-        onScrollEndDrag={handleScrollEndDrag}
-        onMomentumScrollBegin={handleMomentumScrollBegin}
-        onMomentumScrollEnd={handleMomentumScrollEnd}
-        onContentSizeChange={handleContentSizeChange}
-        onLayout={handleListLayout}
-        scrollEventThrottle={16}
-        onStartReached={hasOlderMessages ? handleStartReached : undefined}
-        onStartReachedThreshold={ON_START_REACHED_THRESHOLD}
-        // Viewability is only wired when a host asked for the position, so
-        // every other caller's list stays byte-identical.
-        {...anchorReport}
-        maintainVisibleContentPosition={{
-          // Start rendering from the bottom so the newest message is visible
-          // on first render. `autoscrollToTopThreshold` is left at its default
-          // so the viewport only repositions when the user is far enough away
-          // from the top — preserving the existing auto-follow behavior on
-          // streaming insertions at the bottom.
-          startRenderingFromBottom: true,
-        }}
-        ListHeaderComponent={listHeaderComponent}
-        ListFooterComponent={ListFooterComponent}
-        keyboardDismissMode="interactive"
-        keyboardShouldPersistTaps="handled"
-      />
-      {/* Floating "scroll to bottom" affordance. Rendered only when the
+    <SessionTranscriptOpenGate settled={openSettled} sessionId={sessionId}>
+      <View className="flex-1">
+        <FlashList<T>
+          ref={listRef}
+          style={listStyle}
+          contentContainerStyle={resolvedContentContainerStyle}
+          data={items}
+          keyExtractor={keyExtractor}
+          getItemType={getItemType}
+          renderItem={renderItem}
+          // Transcript rows are tall and parse markdown on mount. The 250 dp
+          // default draws under half a screen ahead, so a fast fling shows blank
+          // space until the rows mount. A 2000 dp lookahead hides that.
+          drawDistance={DRAW_DISTANCE}
+          // Android Fabric can race clipped-view reattachment with rapid transcript updates.
+          // Kept explicit: flash-list ≥ 2.3.2 defaults this to false (PR #2202); the pin
+          // is asserted in src/lib/flash-list-contract.test.ts.
+          removeClippedSubviews={false}
+          onScroll={handleScroll}
+          onScrollBeginDrag={handleScrollBeginDrag}
+          onScrollEndDrag={handleScrollEndDrag}
+          onMomentumScrollBegin={handleMomentumScrollBegin}
+          onMomentumScrollEnd={handleMomentumScrollEnd}
+          onContentSizeChange={handleContentSizeChangeForOpen}
+          onLayout={handleListLayoutForOpen}
+          scrollEventThrottle={16}
+          onStartReached={hasOlderMessages ? handleStartReached : undefined}
+          onStartReachedThreshold={ON_START_REACHED_THRESHOLD}
+          // Viewability is only wired when a host asked for the position, so
+          // every other caller's list stays byte-identical.
+          {...anchorReport}
+          maintainVisibleContentPosition={{
+            // Start rendering from the bottom so the newest message is visible
+            // on first render. `autoscrollToTopThreshold` is left at its default
+            // so the viewport only repositions when the user is far enough away
+            // from the top — preserving the existing auto-follow behavior on
+            // streaming insertions at the bottom.
+            startRenderingFromBottom: true,
+          }}
+          ListHeaderComponent={listHeaderComponent}
+          ListFooterComponent={ListFooterComponent}
+          keyboardDismissMode="interactive"
+          keyboardShouldPersistTaps="handled"
+        />
+        {/* Floating "scroll to bottom" affordance. Rendered only when the
           user has scrolled past the 100px bottom threshold; the fade
           animations match the chat-composer convention. `pointerEvents`
           is set on the wrapper so empty space around the button keeps
           scrolling the list, while the Pressable itself catches taps. */}
-      {!isAtBottom ? (
-        <Animated.View
-          entering={FadeIn.duration(200)}
-          exiting={FadeOut.duration(150)}
-          pointerEvents="box-none"
-          className="absolute bottom-4 right-4"
-          // The fixed 16pt (right-4) offset gains the landscape right inset so
-          // the control clears the sensor area; portrait insets are 0, keeping
-          // the geometry unchanged (16 == right-4).
-          style={{ right: 16 + right }}
-        >
-          <Pressable
-            accessibilityRole="button"
-            accessibilityLabel={t('agentChat.session.scrollToBottom')}
-            onPress={scrollToLatestAnimated}
-            hitSlop={2}
-            className="h-10 w-10 items-center justify-center rounded-full border border-border bg-card shadow-lg shadow-[#00000040] active:opacity-70"
+        {!isAtBottom ? (
+          <Animated.View
+            entering={FadeIn.duration(200)}
+            exiting={FadeOut.duration(150)}
+            pointerEvents="box-none"
+            className="absolute bottom-4 right-4"
+            // The fixed 16pt (right-4) offset gains the landscape right inset so
+            // the control clears the sensor area; portrait insets are 0, keeping
+            // the geometry unchanged (16 == right-4).
+            style={{ right: 16 + right }}
           >
-            <ChevronDown size={20} color={colors.foreground} />
-          </Pressable>
-        </Animated.View>
-      ) : null}
-    </View>
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel={t('agentChat.session.scrollToBottom')}
+              onPress={scrollToLatestAnimated}
+              hitSlop={2}
+              className="h-10 w-10 items-center justify-center rounded-full border border-border bg-card shadow-lg shadow-[#00000040] active:opacity-70"
+            >
+              <ChevronDown size={20} color={colors.foreground} />
+            </Pressable>
+          </Animated.View>
+        ) : null}
+      </View>
+    </SessionTranscriptOpenGate>
   );
 }