Reapply: central unmount for ink render tree + fix render lifecycle race

[ryancbahan]

Summary

Reapplies #7153 (reverted in #7157) with a fix for the two bugs that caused the revert:

1. Loading bar stayed visible after deploy / store execute completed
2. Last line of output was cut off in some commands

Root cause

renderTasks and renderSingleTask resolved their promises via onComplete={resolve} — a callback that fires inside the React tree before ink unmounts. The caller resumed and wrote to stdout while ink was still tearing down, causing ink's cleanup to overwrite the caller's output.

Fix

Changed renderTasks and renderSingleTask to use the same pattern the prompt functions (renderSelectPrompt, renderTextPrompt, etc.) already use:

// Before (broken): promise resolves before ink unmounts
return new Promise((resolve, reject) => {
  render(<Component onComplete={resolve} />, options).catch(reject)
})

// After (correct): awaits full ink lifecycle before returning
let result: T
await render(<Component onComplete={(v) => { result = v }} />, options)
return result!

This guarantees the caller only resumes after ink has fully unmounted and flushed its final frame to stdout. This aligns with Ink's rendering approach when concurrent mode is disabled.

Tophatting

• All existing UI tests pass (17/17)
• shopify app deploy — loading bar disappears after completion
• pnpm shopify store execute — loading bars disappear after completion
• Last line of output is not cut off in any command
• shopify app init — no render issues
• shopify app generate extension — no render issues
• shopify kitchen-sink async — loading bar clears properly
• Select/text prompts still work (e.g. shopify app dev org selection)

[ryancbahan]

• Reapply: central unmount for ink render tree + fix render lifecycle race #7217 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

Differences in type declarations

We detected differences in the type declarations generated by Typescript for this branch compared to the baseline ('main' branch). Please, review them to ensure they are backward-compatible. Here are some important things to keep in mind:

• Some seemingly private modules might be re-exported through public modules.
• If the branch is behind main you might see odd diffs, rebase main into this branch.

New type declarations

We found no new type declarations in this PR

Existing type declarations

packages/cli-kit/dist/private/node/ui.d.ts

 import { Logger, LogLevel } from '../../public/node/output.js';
+import React from 'react';
 import { Key, RenderOptions } from 'ink';
 import { EventEmitter } from 'events';
+/**
+ * Signal that the current Ink tree is done. Must be called within an
+ * InkLifecycleRoot — throws if the provider is missing so lifecycle
+ * bugs surface immediately instead of silently hanging.
+ */
+export declare function useComplete(): (error?: Error) => void;
+/**
+ * Root wrapper for Ink trees. Owns the single `exit()` call site — children
+ * signal completion via `useComplete()`, which sets state here. The `useEffect`
+ * fires post-render, guaranteeing all batched state updates have been flushed
+ * before the tree is torn down.
+ */
+export declare function InkLifecycleRoot({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
 interface RenderOnceOptions {
     logLevel?: LogLevel;
     logger?: Logger;
     renderOptions?: RenderOptions;
 }
 export declare function renderOnce(element: JSX.Element, { logLevel, renderOptions }: RenderOnceOptions): string | undefined;
-export declare function render(element: JSX.Element, options?: RenderOptions): Promise<unknown>;
+export declare function render(element: JSX.Element, options?: RenderOptions): Promise<void>;
 export declare class Stdout extends EventEmitter {
     columns: number;
     rows: number;
     readonly frames: string[];
     private _lastFrame?;
     constructor(options: {
         columns?: number;
         rows?: number;
     });
     write: (frame: string) => void;
     lastFrame: () => string | undefined;
 }
 export declare function handleCtrlC(input: string, key: Key, exit?: () => void): void;
 export {};

packages/cli-kit/dist/public/node/ui.d.ts

@@ -34,7 +34,7 @@ export interface RenderConcurrentOptions extends PartialBy<ConcurrentOutputProps
  * 00:00:00 │ frontend │ third frontend message
  *
  */
-export declare function renderConcurrent({ renderOptions, ...props }: RenderConcurrentOptions): Promise<unknown>;
+export declare function renderConcurrent({ renderOptions, ...props }: RenderConcurrentOptions): Promise<void>;
 export type AlertCustomSection = CustomSection;
 export type RenderAlertOptions = Omit<AlertOptions, 'type'>;
 /**

[gonzaloriestra]

---

Review assisted by pair-review

[isaacroldan]

👏