Hide animated loading bar in non-TTY environments

In non-TTY environments (CI, piped output, AI coding agents), the
TextAnimation component produces a new frame every ~35ms. Since Ink
can't overwrite previous lines without a TTY, every frame gets appended
as new output, flooding logs with thousands of animation lines.

Use isTerminalInteractive() to detect non-TTY environments and render
only the static title text (e.g. 'Loading ...') without the animated
progress bar. Interactive TTY behavior is completely unchanged.

This affects both Tasks and SingleTask components since they both
render through LoadingBar.

Author: amcaplan

packages/cli-kit/src/private/node/ui/components/LoadingBar.test.tsx

@@ -1,4 +1,5 @@
 import {LoadingBar} from './LoadingBar.js'
+import {Stdout} from '../../ui.js'
 import {render} from '../../testing/ui.js'
 import {shouldDisplayColors, unstyled} from '../../../../public/node/output.js'
 import useLayout from '../hooks/use-layout.js'
@@ -25,196 +26,188 @@ beforeEach(() => {
   vi.mocked(shouldDisplayColors).mockReturnValue(true)
 })
 
+/**
+ * Creates a Stdout test double simulating a TTY stream (the default for
+ * interactive terminals). On real Node streams, `isTTY` is only defined
+ * as an own property when the stream IS a TTY — it's absent otherwise.
+ */
+function createTTYStdout(columns = 100) {
+  const stdout = new Stdout({columns}) as Stdout & {isTTY: boolean}
+  stdout.isTTY = true
+  return stdout
+}
+
+/**
+ * Creates a Stdout test double simulating a non-TTY environment
+ * (piped output, CI without a pseudo-TTY, AI coding agents).
+ */
+function createNonTTYStdout(columns = 100) {
+  const stdout = new Stdout({columns}) as Stdout & {isTTY: boolean}
+  stdout.isTTY = false
+  return stdout
+}
+
+/**
+ * Renders LoadingBar with a TTY stdout and returns the last frame.
+ * Most tests need a TTY to verify the animated progress bar renders.
+ */
+function renderWithTTY(element: React.ReactElement) {
+  const stdout = createTTYStdout()
+  const instance = render(element, {stdout})
+  return {lastFrame: stdout.lastFrame, unmount: instance.unmount, stdout}
+}
+
 describe('LoadingBar', () => {
   test('renders loading bar with default colored characters', async () => {
-    // Given
-    const title = 'Loading content'
-
-    // When
-    const {lastFrame} = render(<LoadingBar title={title} />)
+    const {lastFrame} = renderWithTTY(<LoadingBar title="Loading content" />)
 
-    // Then
     expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`
       "▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
       Loading content ..."
     `)
   })
 
   test('renders loading bar with hill pattern when noColor prop is true', async () => {
-    // Given
-    const title = 'Processing files'
+    const {lastFrame} = renderWithTTY(<LoadingBar title="Processing files" noColor />)
 
-    // When
-    const {lastFrame} = render(<LoadingBar title={title} noColor />)
-
-    // Then
     expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`
       "▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅
       Processing files ..."
     `)
   })
 
   test('renders loading bar with hill pattern when shouldDisplayColors returns false', async () => {
-    // Given
     vi.mocked(shouldDisplayColors).mockReturnValue(false)
-    const title = 'Downloading packages'
 
-    // When
-    const {lastFrame} = render(<LoadingBar title={title} />)
+    const {lastFrame} = renderWithTTY(<LoadingBar title="Downloading packages" />)
 
-    // Then
     expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`
       "▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅
       Downloading packages ..."
     `)
   })
 
   test('handles narrow terminal width correctly', async () => {
-    // Given
-    vi.mocked(useLayout).mockReturnValue({
-      twoThirds: 20,
-      oneThird: 10,
-      fullWidth: 30,
-    })
-    const title = 'Building app'
-
-    // When
-    const {lastFrame} = render(<LoadingBar title={title} />)
-
-    // Then
+    vi.mocked(useLayout).mockReturnValue({twoThirds: 20, oneThird: 10, fullWidth: 30})
+
+    const {lastFrame} = renderWithTTY(<LoadingBar title="Building app" />)
+
     expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`
       "▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
       Building app ..."
     `)
   })
 
   test('handles narrow terminal width correctly in no-color mode', async () => {
-    // Given
-    vi.mocked(useLayout).mockReturnValue({
-      twoThirds: 15,
-      oneThird: 8,
-      fullWidth: 23,
-    })
-    const title = 'Installing'
-
-    // When
-    const {lastFrame} = render(<LoadingBar title={title} noColor />)
-
-    // Then
+    vi.mocked(useLayout).mockReturnValue({twoThirds: 15, oneThird: 8, fullWidth: 23})
+
+    const {lastFrame} = renderWithTTY(<LoadingBar title="Installing" noColor />)
+
     expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`
       "▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇
       Installing ..."
     `)
   })
 
   test('handles very narrow terminal width in no-color mode', async () => {
-    // Given
-    vi.mocked(useLayout).mockReturnValue({
-      twoThirds: 5,
-      oneThird: 3,
-      fullWidth: 8,
-    })
-    const title = 'Wait'
-
-    // When
-    const {lastFrame} = render(<LoadingBar title={title} noColor />)
-
-    // Then
+    vi.mocked(useLayout).mockReturnValue({twoThirds: 5, oneThird: 3, fullWidth: 8})
+
+    const {lastFrame} = renderWithTTY(<LoadingBar title="Wait" noColor />)
+
     expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`
       "▁▁▁▂▂
       Wait ..."
     `)
   })
 
   test('handles wide terminal width correctly', async () => {
-    // Given
-    vi.mocked(useLayout).mockReturnValue({
-      twoThirds: 100,
-      oneThird: 50,
-      fullWidth: 150,
-    })
-    const title = 'Synchronizing data'
-
-    // When
-    const {lastFrame} = render(<LoadingBar title={title} />)
-
-    // Then
+    vi.mocked(useLayout).mockReturnValue({twoThirds: 100, oneThird: 50, fullWidth: 150})
+
+    const {lastFrame} = renderWithTTY(<LoadingBar title="Synchronizing data" />)
+
     expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`
       "▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
       Synchronizing data ..."
     `)
   })
 
   test('handles wide terminal width correctly in no-color mode with pattern repetition', async () => {
-    // Given
-    vi.mocked(useLayout).mockReturnValue({
-      twoThirds: 90,
-      oneThird: 45,
-      fullWidth: 135,
-    })
-    const title = 'Analyzing dependencies'
-
-    // When
-    const {lastFrame} = render(<LoadingBar title={title} noColor />)
-
-    // Then
+    vi.mocked(useLayout).mockReturnValue({twoThirds: 90, oneThird: 45, fullWidth: 135})
+
+    const {lastFrame} = renderWithTTY(<LoadingBar title="Analyzing dependencies" noColor />)
+
     expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`
       "▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁
       Analyzing dependencies ..."
     `)
   })
 
   test('renders correctly with empty title', async () => {
-    // Given
-    const title = ''
-
-    // When
-    const {lastFrame} = render(<LoadingBar title={title} />)
+    const {lastFrame} = renderWithTTY(<LoadingBar title="" />)
 
-    // Then
     expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`
       "▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
        ..."
     `)
   })
 
   test('noColor prop overrides shouldDisplayColors when both would show colors', async () => {
-    // Given
     vi.mocked(shouldDisplayColors).mockReturnValue(true)
-    const title = 'Testing override'
 
-    // When
-    const {lastFrame} = render(<LoadingBar title={title} noColor />)
+    const {lastFrame} = renderWithTTY(<LoadingBar title="Testing override" noColor />)
 
-    // Then
     expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`
       "▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅
       Testing override ..."
     `)
   })
 
   test('renders consistently with same props', async () => {
-    // Given
-    const title = 'Consistent test'
-    const props = {title, noColor: false}
+    const props = {title: 'Consistent test', noColor: false}
 
-    // When
-    const {lastFrame: frame1} = render(<LoadingBar {...props} />)
-    const {lastFrame: frame2} = render(<LoadingBar {...props} />)
+    const {lastFrame: frame1} = renderWithTTY(<LoadingBar {...props} />)
+    const {lastFrame: frame2} = renderWithTTY(<LoadingBar {...props} />)
 
-    // Then
     expect(frame1()).toBe(frame2())
   })
 
   test('hides progress bar when noProgressBar is true', async () => {
-    // Given
     vi.mocked(shouldDisplayColors).mockReturnValue(true)
-    const title = 'task 1'
 
-    // When
-    const {lastFrame} = render(<LoadingBar title={title} noProgressBar />)
+    const {lastFrame} = renderWithTTY(<LoadingBar title="task 1" noProgressBar />)
 
-    // Then
     expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`"task 1 ..."`)
   })
+
+  test('renders only title text without animated progress bar in non-TTY environments', async () => {
+    const stdout = createNonTTYStdout()
+
+    const renderInstance = render(<LoadingBar title="Installing dependencies" />, {stdout})
+
+    expect(unstyled(stdout.lastFrame()!)).toMatchInlineSnapshot(`"Installing dependencies ..."`)
+    renderInstance.unmount()
+  })
+
+  test('renders only title text in non-TTY even when noColor and noProgressBar are not set', async () => {
+    const stdout = createNonTTYStdout()
+    vi.mocked(shouldDisplayColors).mockReturnValue(true)
+
+    const renderInstance = render(<LoadingBar title="Generating extension" />, {stdout})
+
+    expect(unstyled(stdout.lastFrame()!)).toMatchInlineSnapshot(`"Generating extension ..."`)
+    renderInstance.unmount()
+  })
+
+  test('keeps animated progress bar when Ink renders to a TTY stream (e.g. renderTasksToStdErr)', async () => {
+    // renderTasksToStdErr passes process.stderr as Ink's stdout option.
+    // useStdout() returns that stream, so the TTY check uses the correct stream.
+    const ttyStream = createTTYStdout()
+
+    const renderInstance = render(<LoadingBar title="Uploading theme" />, {stdout: ttyStream})
+
+    const frame = unstyled(ttyStream.lastFrame()!)
+    expect(frame).toContain('▀')
+    expect(frame).toContain('Uploading theme ...')
+    renderInstance.unmount()
+  })
 })

packages/cli-kit/src/private/node/ui/components/LoadingBar.tsx

@@ -3,7 +3,7 @@ import useLayout from '../hooks/use-layout.js'
 import {shouldDisplayColors} from '../../../../public/node/output.js'
 import React from 'react'
 
-import {Box, Text} from 'ink'
+import {Box, Text, useStdout} from 'ink'
 
 const loadingBarChar = '▀'
 const hillString = '▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁▁'
@@ -14,16 +14,37 @@ interface LoadingBarProps {
   noProgressBar?: boolean
 }
 
+/**
+ * Checks whether the stream Ink is rendering to supports cursor movement.
+ * When it doesn't (piped stdout, dumb terminal, non-TTY CI runner, AI coding
+ * agents), every animation frame would be appended as a new line instead of
+ * overwriting the previous one.
+ *
+ * We inspect the stdout object Ink is actually using (via `useStdout`) so the
+ * check stays accurate even when a custom stream is provided through
+ * `renderOptions` (e.g. `renderTasksToStdErr` passes `process.stderr`).
+ *
+ * On real Node streams, `isTTY` is only defined as an own property when the
+ * stream IS a TTY — it's completely absent otherwise, not set to `false`.
+ * So we check the value directly: truthy means TTY, falsy/missing means not.
+ */
+function useOutputSupportsCursor(stdout: NodeJS.WriteStream | Record<string, unknown>): boolean {
+  return Boolean((stdout as Record<string, unknown>).isTTY)
+}
+
 const LoadingBar = ({title, noColor, noProgressBar}: React.PropsWithChildren<LoadingBarProps>) => {
   const {twoThirds} = useLayout()
+  const {stdout} = useStdout()
+  const supportsCursor = useOutputSupportsCursor(stdout)
+
   let loadingBar = new Array(twoThirds).fill(loadingBarChar).join('')
   if (noColor ?? !shouldDisplayColors()) {
     loadingBar = hillString.repeat(Math.ceil(twoThirds / hillString.length))
   }
 
   return (
     <Box flexDirection="column">
-      {!noProgressBar && <TextAnimation text={loadingBar} maxWidth={twoThirds} />}
+      {supportsCursor && !noProgressBar && <TextAnimation text={loadingBar} maxWidth={twoThirds} />}
       <Text>{title} ...</Text>
     </Box>
   )