fix(ui): bottom-align short VP content so blank space is at top

packages/cli/src/ui/components/shared/VirtualizedList.test.tsx

@@ -145,7 +145,7 @@ describe('<VirtualizedList />', () => {
     expect(frame.endsWith('item-19')).toBe(true);
   });
 
-  it('collapses a short bottom-stuck list below the container height', async () => {
+  it('bottom-aligns a short bottom-stuck list within the container height', async () => {
     const { lastFrame, rerender } = render(
       <VirtualizedList<Item>
         data={makeItems(5)}
@@ -174,7 +174,12 @@ describe('<VirtualizedList />', () => {
     await act(async () => {});
 
     const frame = lastFrame() ?? '';
-    expect(frame.split('\n')).toEqual([
+    // Short bottom-stuck content is bottom-aligned (#9300): blank rows at the
+    // top, the five items pinned to the bottom of the 20-row container.
+    const lines = frame.split('\n');
+    expect(lines.length).toBe(20);
+    expect(lines.slice(0, 15).every((l) => l.trim() === '')).toBe(true);
+    expect(lines.slice(15)).toEqual([
       'item-0',
       'item-1',
       'item-2',
@@ -268,7 +273,7 @@ describe('<VirtualizedList />', () => {
     expect(lastFrame() ?? '').toContain('thinking line 29');
   });
 
-  it('collapses after measuring changed content at full viewport height', async () => {
+  it('bottom-aligns changed content after measuring it at full viewport height', async () => {
     const liveItems = [{ id: -1, label: 'live' }];
 
     const { frames, lastFrame, rerender } = render(
@@ -301,7 +306,9 @@ describe('<VirtualizedList />', () => {
       />,
     );
     await act(async () => {});
-    expect(lastFrame()?.split('\n')).toEqual(['confirm']);
+    // Bottom-aligned (#9300): the single confirmation sits at the container
+    // bottom with blank rows above.
+    expect(lastFrame()?.split('\n')).toEqual(['', '', '', '', 'confirm']);
 
     const longConfirmationItems = [
       { id: -1, label: ['confirm', 'line 2', 'line 3'].join('\n') },
@@ -326,7 +333,14 @@ describe('<VirtualizedList />', () => {
     expect(
       frames.slice(frameCountBeforeLongContent).map((frame) => frame.trimEnd()),
     ).not.toContain('confirm');
-    expect(lastFrame()?.split('\n')).toEqual(['confirm', 'line 2', 'line 3']);
+    // Bottom-aligned (#9300): 3-line content pinned to the 5-row bottom.
+    expect(lastFrame()?.split('\n')).toEqual([
+      '',
+      '',
+      'confirm',
+      'line 2',
+      'line 3',
+    ]);
   });
 
   it('targetScrollIndex anchors to that index on first usable render', () => {
@@ -1132,10 +1146,15 @@ describe('<VirtualizedList /> VP collapsed thought groups', () => {
     const lines = (harness.lastFrame() ?? '').split('\n');
     expect(lines.some((l) => l.includes('c1 thought line 0'))).toBe(false);
     expect(lines.filter((l) => l.trim() !== '').length).toBeLessThanOrEqual(6);
-    expect(lines.length).toBeLessThanOrEqual(8);
     // Collapsed state must still render the head summary, not an empty
     // window (the assertions above also hold for a blank frame).
     expect(lines.some((l) => l.includes('Thought for 1m 41s'))).toBe(true);
+    // Bottom-aligned (#9300): the released height becomes blank space at the
+    // TOP, and the collapsed summary sits at the bottom of the full 40-row
+    // container (last row is content, not a gap between content and the
+    // composer).
+    expect(lines.length).toBe(40);
+    expect(lines[lines.length - 1]!.trim()).not.toBe('');
   });
 
   it('does not lock the render window when a tall thought collapses off-screen', async () => {

packages/cli/src/ui/components/shared/VirtualizedList.tsx

@@ -543,6 +543,17 @@ function VirtualizedList<T>(
     maxScroll,
   );
 
+  // Bottom-align short content while stuck to the bottom (#9300): when the
+  // whole conversation fits in the viewport, push it down so the latest
+  // message sits directly above the composer and any blank space is at the
+  // TOP (standard chat-TUI behavior), instead of top-aligning and leaving a
+  // gap between the last message and the composer. Zero whenever content
+  // overflows (maxScroll > 0) or the user has scrolled away from the bottom.
+  const bottomAlignGap =
+    isStickingToBottom && maxScroll === 0
+      ? Math.max(0, scrollableContainerHeight - totalHeight)
+      : 0;
+
   // The render window must cover what the viewport actually paints, so
   // it is computed from clampedScrollTop, not the anchor-based
   // actualScrollTop. While bottom-stuck the viewport pins to maxScroll,
@@ -940,20 +951,23 @@ function VirtualizedList<T>(
   ]);
 
   // The host passes `containerHeight` as the *maximum* viewport height (the
-  // room available between the header and the composer). Pinning the root box
-  // to that height unconditionally left a tall empty gap below short content
-  // and pushed the composer far down the screen — the legacy <Static> path
-  // instead grows with its content. Collapse to `totalHeight` whenever the
-  // content fits so the composer sits right beneath the conversation. A
-  // caller can request one full-height measurement pass while content changes
-  // shape under a stable item key; otherwise a stale cached total can clip
-  // the new content before it is measured. The root collapses again after the
-  // measurement so short content does not leave a gap above the composer.
+  // room available between the header and the composer). While the list is
+  // not bottom-aligned, collapse to `totalHeight` whenever the content fits:
+  // pinning the root box to the full height unconditionally would leave a
+  // tall empty gap below short content and push the composer far down the
+  // screen, while the legacy <Static> path grows with its content. While a
+  // bottom-stuck conversation has room to spare (#9300), keep the full
+  // `containerHeight` instead so `bottomAlignGap` can push it down: the
+  // blank rows render ABOVE the content and the latest message sits right
+  // above the composer. A caller can request one full-height measurement
+  // pass while content changes shape under a stable item key; otherwise a
+  // stale cached total can clip the new content before it is measured. The
+  // collapse/bottom-align rule above applies again after the measurement.
   // `scrollableContainerHeight` (the scroll math) still uses the full
   // `containerHeight`, so scrolling is unaffected.
   const rootHeight =
     props.containerHeight !== undefined
-      ? fullHeightMeasurementPending
+      ? fullHeightMeasurementPending || bottomAlignGap > 0
         ? props.containerHeight
         : Math.min(props.containerHeight, totalHeight)
       : '100%';
@@ -973,6 +987,7 @@ function VirtualizedList<T>(
           flexDirection="column"
           marginTop={-clampedScrollTop}
         >
+          <Box height={bottomAlignGap} flexShrink={0} />
           <Box height={topSpacerHeight} flexShrink={0} />
           {renderedItems}
           <Box height={bottomSpacerHeight} flexShrink={0} />