Force color when generating example for progress bar

Author: matteodepalo

packages/cli-kit/bin/documentation/examples.ts

@@ -565,43 +565,64 @@ export const examples: {[key in string]: Example} = {
   renderTasks: {
     type: 'async',
     basic: async () => {
-      const stdout = new Stdout({columns: TERMINAL_WIDTH})
+      // Force colors for deterministic output (solid blocks vs animated wave)
+      const originalForceColor = process.env.FORCE_COLOR
+      process.env.FORCE_COLOR = '1'
+      try {
+        const stdout = new Stdout({columns: TERMINAL_WIDTH})
 
-      const tasks = [
-        {
-          title: 'Installing dependencies',
-          task: async () => {
-            await new Promise((resolve) => setTimeout(resolve, 2000))
+        const tasks = [
+          {
+            title: 'Installing dependencies',
+            task: async () => {
+              await new Promise((resolve) => setTimeout(resolve, 2000))
+            },
           },
-        },
-      ]
-
-      renderTasks(tasks, {renderOptions: {stdout: stdout as any, debug: true}})
-
-      await waitFor(
-        () => {},
-        () => Boolean(stdout.lastFrame()?.includes('Installing dependencies')),
-      )
-
-      // Return first frame with the title for deterministic output
-      return stdout.frames.find((frame) => frame.includes('Installing dependencies'))!
+        ]
+
+        renderTasks(tasks, {renderOptions: {stdout: stdout as any, debug: true}})
+
+        await waitFor(
+          () => {},
+          () => Boolean(stdout.lastFrame()?.includes('Installing dependencies')),
+        )
+
+        return stdout.lastFrame()!
+      } finally {
+        if (originalForceColor === undefined) {
+          delete process.env.FORCE_COLOR
+        } else {
+          process.env.FORCE_COLOR = originalForceColor
+        }
+      }
     },
   },
   renderSingleTask: {
     type: 'async',
     basic: async () => {
-      const stdout = new Stdout({columns: TERMINAL_WIDTH})
-
-      await renderSingleTask({
-        title: outputContent`Loading app`,
-        task: async () => {
-          await sleep(1)
-        },
-        renderOptions: {stdout: stdout as any, debug: true},
-      })
-
-      // Return first frame with the title for deterministic output
-      return stdout.frames.find((frame) => frame.includes('Loading'))!
+      // Force colors for deterministic output (solid blocks vs animated wave)
+      const originalForceColor = process.env.FORCE_COLOR
+      process.env.FORCE_COLOR = '1'
+      try {
+        const stdout = new Stdout({columns: TERMINAL_WIDTH})
+
+        await renderSingleTask({
+          title: outputContent`Loading app`,
+          task: async () => {
+            await sleep(1)
+          },
+          renderOptions: {stdout: stdout as any, debug: true},
+        })
+
+        // Return first frame with the title for deterministic output
+        return stdout.frames.find((frame) => frame.includes('Loading'))!
+      } finally {
+        if (originalForceColor === undefined) {
+          delete process.env.FORCE_COLOR
+        } else {
+          process.env.FORCE_COLOR = originalForceColor
+        }
+      }
     },
   },
   renderTextPrompt: {

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

@@ -468,7 +468,7 @@ interface RenderTasksOptions {
 /**
  * Runs async tasks and displays their progress to the console.
  * @example
- * ▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁▁
+ * ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
  * Installing dependencies ...
  */
 // eslint-disable-next-line max-params
@@ -502,7 +502,7 @@ export interface RenderSingleTaskOptions<T> {
  * @param options.renderOptions - Optional render configuration
  * @returns The result of the task
  * @example
- * ▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁▁▁▁▂▂▃▃▄▄▅▅▆▆▇▇██▇▇▆▆▅▅▄▄▃▃▂▂▁▁
+ * ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
  * Loading app ...
  */
 export async function renderSingleTask<T>({