feat: migrate atmn CLI from React Ink to OpenTUI

atmn/bun.config.ts

@@ -16,7 +16,7 @@ async function build() {
 		define: {
 			VERSION: `"${version}"`,
 		},
-		external: ["prettier", "jiti"],
+		external: ["prettier", "jiti", "@opentui/core", "@opentui/react", "react", "react/jsx-runtime", "yoga-layout"],
 	});
 	console.timeEnd(`Building atmn v${version}`);
 

atmn/package.json

@@ -26,9 +26,9 @@
 		"README.md"
 	],
 	"dependencies": {
-		"@inkjs/ui": "^2.0.0",
 		"@inquirer/prompts": "^7.6.0",
-		"@mishieck/ink-titled-box": "^0.3.0",
+		"@opentui/core": "^0.1.80",
+		"@opentui/react": "^0.1.80",
 		"@tanstack/react-query": "^5.90.17",
 		"@types/prettier": "^3.0.0",
 		"arctic": "^3.7.0",
@@ -38,17 +38,6 @@
 		"clipboardy": "^5.0.2",
 		"commander": "^14.0.0",
 		"dotenv": "^17.2.0",
-		"ervy": "^1.0.7",
-		"ink": "^6.6.0",
-		"ink-big-text": "^2.0.0",
-		"ink-chart": "^0.1.1",
-		"ink-confirm-input": "^2.0.0",
-		"ink-scroll-list": "^0.4.1",
-		"ink-scroll-view": "^0.3.5",
-		"ink-select-input": "^6.2.0",
-		"ink-spinner": "^5.0.0",
-		"ink-table": "^3.1.0",
-		"ink-text-input": "^6.0.0",
 		"inquirer": "^12.7.0",
 		"jiti": "^2.4.2",
 		"open": "^10.1.2",
@@ -68,7 +57,6 @@
 		"eslint-config-xo-react": "^0.27.0",
 		"eslint-plugin-react": "^7.32.2",
 		"eslint-plugin-react-hooks": "^4.6.0",
-		"ink-testing-library": "^3.0.0",
 		"nodemon": "^3.1.11",
 		"react-devtools-core": "^6.1.2",
 		"ts-node": "^10.9.1",

atmn/src/cli.tsx

@@ -2,7 +2,7 @@
 /** biome-ignore-all lint/complexity/useLiteralKeys: necessary */
 import chalk from "chalk";
 import { program } from "commander";
-import { render } from "ink";
+import { render } from "./lib/tui/ink-compat.js";
 import open from "open";
 import React from "react";
 import AuthCommand from "./commands/auth/command.js";
@@ -107,7 +107,7 @@ program
 		if (process.stdout.isTTY && !skipAllPrompts) {
 			// Interactive mode - use new beautiful Ink UI
 			const { NukeView } = await import("./views/react/nuke/NukeView.js");
-			render(
+			await render(
 				<QueryProvider>
 					<NukeView />
 				</QueryProvider>,
@@ -130,7 +130,7 @@ program
 		if (process.stdout.isTTY) {
 			// Interactive mode - use new beautiful Ink UI
 			const { PushView } = await import("./views/react/push/Push.js");
-			render(
+			await render(
 				<QueryProvider>
 					<PushView
 						environment={environment}
@@ -169,7 +169,7 @@ program
 
 		if (process.stdout.isTTY) {
 			// Interactive mode - use beautiful Ink UI
-			render(
+			await render(
 				<QueryProvider>
 					<PullView
 						environment={environment}
@@ -241,7 +241,7 @@ program
 	.action(async () => {
 		if (process.stdout.isTTY) {
 			// Interactive mode - use new Ink-based init flow
-			render(
+			await render(
 				<QueryProvider>
 					<InitFlow />
 				</QueryProvider>,
@@ -251,7 +251,7 @@ program
 			const { HeadlessInitFlow } = await import(
 				"./views/react/init/HeadlessInitFlow.js"
 			);
-			render(
+			await render(
 				<QueryProvider>
 					<HeadlessInitFlow />
 				</QueryProvider>,
@@ -266,7 +266,7 @@ program
 		if (process.stdout.isTTY) {
 			// Interactive mode - use new beautiful Ink UI
 			const { LoginView } = await import("./views/react/login/LoginView.js");
-			render(
+			await render(
 				<QueryProvider>
 					<LoginView
 						onComplete={() => {

atmn/src/commands/customers/command.tsx

@@ -1,4 +1,4 @@
-import { render } from "ink";
+import { render } from "../../lib/tui/ink-compat.js";
 import { AppEnv } from "../../lib/env/detect.js";
 import { QueryProvider } from "../../views/react/components/providers/QueryProvider.js";
 import { CustomersView } from "../../views/react/customers/CustomersView.js";

atmn/src/commands/events/command.tsx

@@ -1,4 +1,4 @@
-import { render } from "ink";
+import { render } from "../../lib/tui/ink-compat.js";
 import { headlessEventsCommand } from "./headless.js";
 
 export interface EventsCommandOptions {

atmn/src/commands/features/command.tsx

@@ -1,4 +1,4 @@
-import { render } from "ink";
+import { render } from "../../lib/tui/ink-compat.js";
 import { AppEnv } from "../../lib/env/detect.js";
 import { QueryProvider } from "../../views/react/components/providers/QueryProvider.js";
 import { FeaturesView } from "../../views/react/features/FeaturesView.js";

atmn/src/commands/preview/index.ts

@@ -1,5 +1,5 @@
 import chalk from "chalk";
-import { render } from "ink";
+import { render } from "../../lib/tui/ink-compat.js";
 import React from "react";
 import { loadConfig } from "./loadConfig.js";
 import { PreviewView } from "../../views/react/preview/index.js";

atmn/src/commands/products/command.tsx

@@ -1,4 +1,4 @@
-import { render } from "ink";
+import { render } from "../../lib/tui/ink-compat.js";
 import { AppEnv } from "../../lib/env/detect.js";
 import { QueryProvider } from "../../views/react/components/providers/QueryProvider.js";
 import { ProductsView } from "../../views/react/products/ProductsView.js";

atmn/src/commands/test-template/command.tsx

@@ -1,4 +1,4 @@
-import { render } from "ink";
+import { render } from "../../lib/tui/ink-compat.js";
 import { TemplateSelector } from "../../views/react/template/TemplateSelector.js";
 
 export function testTemplateCommand() {

atmn/src/lib/hooks/useVisibleRowCount.ts

@@ -1,4 +1,4 @@
-import { useStdout } from "ink";
+import { useStdout } from "../tui/ink-compat.js";
 
 /**
  * Chrome heights for different layout configurations.