Fix loading bar persisting on screen after task completion

Ink 6's unmount flow renders a final frame before the React tree clears,
leaving stale loading bar output on screen. The component's null render
from setIsDone(true) hasn't committed yet due to throttled rendering.

Add an eraseOnExit option to the render() wrapper that intercepts stdout
writes to track the maximum output height, then erases that many lines
after the Ink instance exits. Applied to renderTasks and renderSingleTask.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: nickwesselman

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

@@ -5,6 +5,7 @@ import {treeKill} from '../../public/node/tree-kill.js'
 
 import {ReactElement} from 'react'
 import {Key, render as inkRender, RenderOptions} from 'ink'
+import ansiEscapes from 'ansi-escapes'
 
 import {EventEmitter} from 'events'
 
@@ -26,9 +27,47 @@ export function renderOnce(element: JSX.Element, {logLevel = 'info', renderOptio
   return renderedString
 }
 
-export async function render(element: JSX.Element, options?: RenderOptions) {
-  const {waitUntilExit} = inkRender(element, options)
-  await waitUntilExit()
+interface ExtendedRenderOptions extends RenderOptions {
+  // When true, erase the final output after the Ink instance exits.
+  // Use for transient UI (loading bars, progress indicators) that should
+  // not persist on screen after completion.
+  eraseOnExit?: boolean
+}
+
+export async function render(element: JSX.Element, options?: ExtendedRenderOptions) {
+  const {eraseOnExit, ...inkOptions} = options ?? {}
+  const stdout = inkOptions.stdout ?? process.stdout
+  // Track the height of Ink's last write so we can erase it after exit.
+  // Ink 6's unmount performs a final onRender() before clearing the React tree,
+  // which can leave stale output (e.g. a loading bar) on screen because the
+  // component's null render hasn't committed yet due to throttled rendering.
+  let lastOutputHeight = 0
+  if (eraseOnExit && 'write' in stdout && typeof stdout.write === 'function') {
+    const origWrite = stdout.write.bind(stdout) as typeof stdout.write
+    stdout.write = ((...args: Parameters<typeof stdout.write>) => {
+      const data = args[0]
+      if (typeof data === 'string' && data.length > 0) {
+        const lineCount = data.split('\n').length
+        // Track the maximum height to avoid being clobbered by small
+        // writes (e.g. cursor escape sequences) after the final render.
+        if (lineCount > lastOutputHeight) {
+          lastOutputHeight = lineCount
+        }
+      }
+      return origWrite(...args)
+    }) as typeof stdout.write
+
+    const {waitUntilExit} = inkRender(element, inkOptions)
+    await waitUntilExit()
+
+    stdout.write = origWrite
+    if (lastOutputHeight > 0) {
+      stdout.write(ansiEscapes.eraseLines(lastOutputHeight))
+    }
+  } else {
+    const {waitUntilExit} = inkRender(element, inkOptions)
+    await waitUntilExit()
+  }
   // We need to wait for other pending tasks -- unmounting of the ink component -- to complete
   return new Promise((resolve) => setImmediate(resolve))
 }

packages/cli-kit/src/public/node/ui.tsx

@@ -491,6 +491,7 @@ export async function renderTasks<TContext>(
     render(<Tasks tasks={tasks} onComplete={resolve} noProgressBar={noProgressBar} />, {
       ...renderOptions,
       exitOnCtrlC: false,
+      eraseOnExit: true,
     })
       .then(() => {})
       .catch(reject)
@@ -525,6 +526,7 @@ export async function renderSingleTask<T>({
     render(<SingleTask title={title} task={task} onComplete={resolve} onAbort={onAbort} />, {
       ...renderOptions,
       exitOnCtrlC: false,
+      eraseOnExit: true,
     }).catch(reject)
   })
 }