feat(core): improve subagent result display (#20378)

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

@@ -20,7 +20,7 @@ import { formatCommand } from '../../utils/keybindingUtils.js';
  */
 export const MINIMUM_MAX_HEIGHT = 2;
 
-interface MaxSizedBoxProps {
+export interface MaxSizedBoxProps {
   children?: React.ReactNode;
   maxWidth?: number;
   maxHeight?: number;

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

@@ -0,0 +1,123 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from '../../../test-utils/render.js';
+import { OverflowProvider } from '../../contexts/OverflowContext.js';
+import { SlicingMaxSizedBox } from './SlicingMaxSizedBox.js';
+import { Box, Text } from 'ink';
+import { describe, it, expect } from 'vitest';
+
+describe('<SlicingMaxSizedBox />', () => {
+  it('renders string data without slicing when it fits', async () => {
+    const { lastFrame, waitUntilReady, unmount } = render(
+      <OverflowProvider>
+        <SlicingMaxSizedBox data="Hello World" maxWidth={80}>
+          {(truncatedData) => <Text>{truncatedData}</Text>}
+        </SlicingMaxSizedBox>
+      </OverflowProvider>,
+    );
+    await waitUntilReady();
+    expect(lastFrame()).toContain('Hello World');
+    unmount();
+  });
+
+  it('slices string data by characters when very long', async () => {
+    const veryLongString = 'A'.repeat(25000);
+    const { lastFrame, waitUntilReady, unmount } = render(
+      <OverflowProvider>
+        <SlicingMaxSizedBox
+          data={veryLongString}
+          maxWidth={80}
+          overflowDirection="bottom"
+        >
+          {(truncatedData) => <Text>{truncatedData.length}</Text>}
+        </SlicingMaxSizedBox>
+      </OverflowProvider>,
+    );
+    await waitUntilReady();
+    // 20000 characters + 3 for '...'
+    expect(lastFrame()).toContain('20003');
+    unmount();
+  });
+
+  it('slices string data by lines when maxLines is provided', async () => {
+    const multilineString = 'Line 1\nLine 2\nLine 3\nLine 4\nLine 5';
+    const { lastFrame, waitUntilReady, unmount } = render(
+      <OverflowProvider>
+        <SlicingMaxSizedBox
+          data={multilineString}
+          maxLines={3}
+          maxWidth={80}
+          maxHeight={10}
+          overflowDirection="bottom"
+        >
+          {(truncatedData) => <Text>{truncatedData}</Text>}
+        </SlicingMaxSizedBox>
+      </OverflowProvider>,
+    );
+    await waitUntilReady();
+    // maxLines=3, so it should keep 3-1 = 2 lines
+    expect(lastFrame()).toContain('Line 1');
+    expect(lastFrame()).toContain('Line 2');
+    expect(lastFrame()).not.toContain('Line 3');
+    expect(lastFrame()).toContain(
+      '... last 3 lines hidden (Ctrl+O to show) ...',
+    );
+    unmount();
+  });
+
+  it('slices array data when maxLines is provided', async () => {
+    const dataArray = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
+    const { lastFrame, waitUntilReady, unmount } = render(
+      <OverflowProvider>
+        <SlicingMaxSizedBox
+          data={dataArray}
+          maxLines={3}
+          maxWidth={80}
+          maxHeight={10}
+          overflowDirection="bottom"
+        >
+          {(truncatedData) => (
+            <Box flexDirection="column">
+              {truncatedData.map((item, i) => (
+                <Text key={i}>{item}</Text>
+              ))}
+            </Box>
+          )}
+        </SlicingMaxSizedBox>
+      </OverflowProvider>,
+    );
+    await waitUntilReady();
+    // maxLines=3, so it should keep 3-1 = 2 items
+    expect(lastFrame()).toContain('Item 1');
+    expect(lastFrame()).toContain('Item 2');
+    expect(lastFrame()).not.toContain('Item 3');
+    expect(lastFrame()).toContain(
+      '... last 3 lines hidden (Ctrl+O to show) ...',
+    );
+    unmount();
+  });
+
+  it('does not slice when isAlternateBuffer is true', async () => {
+    const multilineString = 'Line 1\nLine 2\nLine 3\nLine 4\nLine 5';
+    const { lastFrame, waitUntilReady, unmount } = render(
+      <OverflowProvider>
+        <SlicingMaxSizedBox
+          data={multilineString}
+          maxLines={3}
+          maxWidth={80}
+          isAlternateBuffer={true}
+        >
+          {(truncatedData) => <Text>{truncatedData}</Text>}
+        </SlicingMaxSizedBox>
+      </OverflowProvider>,
+    );
+    await waitUntilReady();
+    expect(lastFrame()).toContain('Line 5');
+    expect(lastFrame()).not.toContain('hidden');
+    unmount();
+  });
+});

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

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useMemo } from 'react';
+import { MaxSizedBox, type MaxSizedBoxProps } from './MaxSizedBox.js';
+
+// Large threshold to ensure we don't cause performance issues for very large
+// outputs that will get truncated further MaxSizedBox anyway.
+const MAXIMUM_RESULT_DISPLAY_CHARACTERS = 20000;
+
+export interface SlicingMaxSizedBoxProps<T>
+  extends Omit<MaxSizedBoxProps, 'children'> {
+  data: T;
+  maxLines?: number;
+  isAlternateBuffer?: boolean;
+  children: (truncatedData: T) => React.ReactNode;
+}
+
+/**
+ * An extension of MaxSizedBox that performs explicit slicing of the input data
+ * (string or array) before rendering. This is useful for performance and to
+ * ensure consistent truncation behavior for large outputs.
+ */
+export function SlicingMaxSizedBox<T>({
+  data,
+  maxLines,
+  isAlternateBuffer,
+  children,
+  ...boxProps
+}: SlicingMaxSizedBoxProps<T>) {
+  const { truncatedData, hiddenLinesCount } = useMemo(() => {
+    let hiddenLines = 0;
+    const overflowDirection = boxProps.overflowDirection ?? 'top';
+
+    // Only truncate string output if not in alternate buffer mode to ensure
+    // we can scroll through the full output.
+    if (typeof data === 'string' && !isAlternateBuffer) {
+      let text: string = data as string;
+      if (text.length > MAXIMUM_RESULT_DISPLAY_CHARACTERS) {
+        if (overflowDirection === 'bottom') {
+          text = text.slice(0, MAXIMUM_RESULT_DISPLAY_CHARACTERS) + '...';
+        } else {
+          text = '...' + text.slice(-MAXIMUM_RESULT_DISPLAY_CHARACTERS);
+        }
+      }
+      if (maxLines) {
+        const hasTrailingNewline = text.endsWith('\n');
+        const contentText = hasTrailingNewline ? text.slice(0, -1) : text;
+        const lines = contentText.split('\n');
+        if (lines.length > maxLines) {
+          // We will have a label from MaxSizedBox. Reserve space for it.
+          const targetLines = Math.max(1, maxLines - 1);
+          hiddenLines = lines.length - targetLines;
+          if (overflowDirection === 'bottom') {
+            text =
+              lines.slice(0, targetLines).join('\n') +
+              (hasTrailingNewline ? '\n' : '');
+          } else {
+            text =
+              lines.slice(-targetLines).join('\n') +
+              (hasTrailingNewline ? '\n' : '');
+          }
+        }
+      }
+      return {
+        truncatedData: text,
+        hiddenLinesCount: hiddenLines,
+      };
+    }
+
+    if (Array.isArray(data) && !isAlternateBuffer && maxLines) {
+      if (data.length > maxLines) {
+        // We will have a label from MaxSizedBox. Reserve space for it.
+        const targetLines = Math.max(1, maxLines - 1);
+        const hiddenCount = data.length - targetLines;
+        return {
+          truncatedData:
+            overflowDirection === 'bottom'
+              ? data.slice(0, targetLines)
+              : data.slice(-targetLines),
+          hiddenLinesCount: hiddenCount,
+        };
+      }
+    }
+
+    return { truncatedData: data, hiddenLinesCount: 0 };
+  }, [data, isAlternateBuffer, maxLines, boxProps.overflowDirection]);
+
+  return (
+    <MaxSizedBox
+      {...boxProps}
+      additionalHiddenLinesCount={
+        (boxProps.additionalHiddenLinesCount ?? 0) + hiddenLinesCount
+      }
+    >
+      {/* eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion */}
+      {children(truncatedData as unknown as T)}
+    </MaxSizedBox>
+  );
+}