feat(cli): truncate shell output in UI history and improve active shell display

packages/cli/src/ui/components/AnsiOutput.test.tsx

@@ -68,8 +68,9 @@ describe('<AnsiOutputText />', () => {
     const output = lastFrame();
     expect(output).toBeDefined();
     const lines = output!.split('\n');
-    expect(lines[0]).toBe('First line');
-    expect(lines[1]).toBe('Third line');
+    expect(lines[0].trim()).toBe('First line');
+    expect(lines[1].trim()).toBe('');
+    expect(lines[2].trim()).toBe('Third line');
   });
 
   it('respects the availableTerminalHeight prop and slices the lines correctly', () => {
@@ -89,6 +90,45 @@ describe('<AnsiOutputText />', () => {
     expect(output).toContain('Line 4');
   });
 
+  it('respects the maxLines prop and slices the lines correctly', () => {
+    const data: AnsiOutput = [
+      [createAnsiToken({ text: 'Line 1' })],
+      [createAnsiToken({ text: 'Line 2' })],
+      [createAnsiToken({ text: 'Line 3' })],
+      [createAnsiToken({ text: 'Line 4' })],
+    ];
+    const { lastFrame } = render(
+      <AnsiOutputText data={data} maxLines={2} width={80} />,
+    );
+    const output = lastFrame();
+    expect(output).not.toContain('Line 1');
+    expect(output).not.toContain('Line 2');
+    expect(output).toContain('Line 3');
+    expect(output).toContain('Line 4');
+  });
+
+  it('prioritizes maxLines over availableTerminalHeight if maxLines is smaller', () => {
+    const data: AnsiOutput = [
+      [createAnsiToken({ text: 'Line 1' })],
+      [createAnsiToken({ text: 'Line 2' })],
+      [createAnsiToken({ text: 'Line 3' })],
+      [createAnsiToken({ text: 'Line 4' })],
+    ];
+    // availableTerminalHeight=3, maxLines=2 => show 2 lines
+    const { lastFrame } = render(
+      <AnsiOutputText
+        data={data}
+        availableTerminalHeight={3}
+        maxLines={2}
+        width={80}
+      />,
+    );
+    const output = lastFrame();
+    expect(output).not.toContain('Line 2');
+    expect(output).toContain('Line 3');
+    expect(output).toContain('Line 4');
+  });
+
   it('renders a large AnsiOutput object without crashing', () => {
     const largeData: AnsiOutput = [];
     for (let i = 0; i < 1000; i++) {

packages/cli/src/ui/components/AnsiOutput.tsx

@@ -14,40 +14,56 @@ interface AnsiOutputProps {
   data: AnsiOutput;
   availableTerminalHeight?: number;
   width: number;
+  maxLines?: number;
+  disableTruncation?: boolean;
 }
 
 export const AnsiOutputText: React.FC<AnsiOutputProps> = ({
   data,
   availableTerminalHeight,
   width,
+  maxLines,
+  disableTruncation,
 }) => {
-  const lastLines = data.slice(
-    -(availableTerminalHeight && availableTerminalHeight > 0
+  const availableHeightLimit =
+    availableTerminalHeight && availableTerminalHeight > 0
       ? availableTerminalHeight
-      : DEFAULT_HEIGHT),
-  );
+      : undefined;
+
+  const numLinesRetained =
+    availableHeightLimit !== undefined && maxLines !== undefined
+      ? Math.min(availableHeightLimit, maxLines)
+      : (availableHeightLimit ?? maxLines ?? DEFAULT_HEIGHT);
+
+  const lastLines = disableTruncation ? data : data.slice(-numLinesRetained);
   return (
-    <Box flexDirection="column" width={width} flexShrink={0}>
+    <Box flexDirection="column" width={width} flexShrink={0} overflow="hidden">
       {lastLines.map((line: AnsiLine, lineIndex: number) => (
-        <Text key={lineIndex} wrap="truncate">
-          {line.length > 0
-            ? line.map((token: AnsiToken, tokenIndex: number) => (
-                <Text
-                  key={tokenIndex}
-                  color={token.fg}
-                  backgroundColor={token.bg}
-                  inverse={token.inverse}
-                  dimColor={token.dim}
-                  bold={token.bold}
-                  italic={token.italic}
-                  underline={token.underline}
-                >
-                  {token.text}
-                </Text>
-              ))
-            : null}
-        </Text>
+        <Box key={lineIndex} height={1} overflow="hidden">
+          <AnsiLineText line={line} />
+        </Box>
       ))}
     </Box>
   );
 };
+
+export const AnsiLineText: React.FC<{ line: AnsiLine }> = ({ line }) => (
+  <Text>
+    {line.length > 0
+      ? line.map((token: AnsiToken, tokenIndex: number) => (
+          <Text
+            key={tokenIndex}
+            color={token.fg}
+            backgroundColor={token.bg}
+            inverse={token.inverse}
+            dimColor={token.dim}
+            bold={token.bold}
+            italic={token.italic}
+            underline={token.underline}
+          >
+            {token.text}
+          </Text>
+        ))
+      : null}
+  </Text>
+);