sdc-build-wp 5.2.0 → 5.3.1

package/lib/build.js

@@ -2,9 +2,20 @@ import { default as project } from './project.js';
 import * as utils from './utils.js';
 import log from './logging.js';
 import chalk from 'chalk';
+import tui from './tui.js';
 
 
 export async function build(watch = false) {
+
+	if (watch) {
+		tui.init();
+		tui.setComponents(project.builds, true);
+		const commands = `Commands: ${chalk.underline.green('r')}estart, ${chalk.underline.green('c')}lear cache, ${chalk.underline.green('p')}ause/resume, ${chalk.underline.green('n')}ew component, ${chalk.underline.green('q')}uit`;
+		tui.setCommands(commands);
+	}
+
+	log('info', `Started sdc-build-wp`);
+
 	if (project.builds.includes('cache')) {
 		try {
 			await project.components.cache.init();
@@ -28,7 +39,7 @@ export async function build(watch = false) {
 
 		promisesBuilds.push(
 			project.components[build].init().catch(error => {
-				console.error(error);
+				log(null, error);
 				log('error', `Failed to initialize ${build} component`);
 				return { failed: true, component: build, error };
 			})
@@ -44,15 +55,18 @@ export async function build(watch = false) {
 	}
 
 	utils.clearScreen();
-	log('info', `Finished initial build in ${Math.round((performance.now() - initialBuildTimerStart) / 1000)} seconds`);
 
 	if (watch && project.builds.includes('server')) {
 		project.isRunning = true;
 		project.builds.splice(project.builds.indexOf('server'), 1);
 		project.builds.push('server');
+
+		log('info', `Finished initial build in ${Math.round((performance.now() - initialBuildTimerStart) / 1000)} seconds`);
 		log('info', `Started watching [${project.builds.join(', ')}]`);
+
+		tui.setComponents(project.builds, true);
+
 		project.components.server.logURLs();
-		log('info', `${chalk.underline.green('r')}estart, ${chalk.underline.green('c')}lear cache, ${chalk.underline.green('p')}ause/resume, ${chalk.underline.green('n')}ew component, ${chalk.underline.green('q')}uit`);
 
 		for (let build of project.builds) {
 			try {
@@ -63,6 +77,7 @@ export async function build(watch = false) {
 			}
 		}
 	} else {
+		log('info', `Finished initial build in ${Math.round((performance.now() - initialBuildTimerStart) / 1000)} seconds`);
 		process.emit('SIGINT');
 	}
 }

package/lib/components/blocks.js

@@ -156,7 +156,7 @@ export default class BlocksComponent extends BaseComponent {
 
 			await this.updateBuildCache(workingBlockJson, cacheOutputFile, dependencies);
 		} catch (error) {
-			console.error(error.stdout || error.stderr || error.message);
+			this.log(null, error.stdout || error.stderr || error.message);
 			this.log('error', `Failed building ${entryLabel} block - See above error.`);
 			return false;
 		}
@@ -183,8 +183,8 @@ export default class BlocksComponent extends BaseComponent {
 			if (this.watcher) {
 				this.watcher.add([`${blockPath}/src`, `${blockPath}/src/**/*`]);
 			}
-			this.build(blockPath).catch(err => {
-				console.error(err);
+			this.build(blockPath).catch(error => {
+				this.log(null, error);
 				this.log('error', `Failed initial build for new block ${blockPath}`);
 			});
 		}
@@ -290,7 +290,7 @@ export default class BlocksComponent extends BaseComponent {
 						if (path.endsWith('.js')) {
 							if (!this.project.components.scripts.isBuilding) {
 								this.project.components.scripts.lint(path).catch(lintError => {
-									console.error(lintError);
+									this.log(null, lintError);
 									this.log('warn', `Linting failed for ${path}`);
 								});
 							}

package/lib/components/fonts.js

@@ -27,7 +27,7 @@ export default class FontsComponent extends BaseComponent {
 			if (fontsDir.length == 0) { throw new Error('No files present'); }
 			await fs.copy(entry, `${this.project.path}${entryLabel}`);
 			entryLabel += ` (${fontsDir.filter(file => !file.startsWith('.')).length} files)`;
-		} catch(error) {
+		} catch (error) {
 			this.log('error', `${error} at ${entry.replace(this.project.path, '')}/. Skipping font copy`);
 			return false;
 		}

package/lib/components/html.js

@@ -78,7 +78,7 @@ export default class HTMLComponent extends BaseComponent {
 				entryLabel = `${formattedCount} html file${formattedCount > 1 ? 's' : ''}`;
 			}
 		} catch (error) {
-			console.error(error);
+			this.log(null, error);
 			this.log('error', `Failed formatting ${entryLabel.replace(this.project.path, '')} - ${error.message}`);
 			return false;
 		}

package/lib/components/images.js

@@ -58,7 +58,7 @@ export default class ImagesComponent extends BaseComponent {
 				}
 				convertedImagesCount++;
 			} catch (error) {
-				console.error(error);
+				this.log(null, error);
 				this.log('error', `Failed optimizing ${filePath.replace(this.project.path, '')} - See above error.`);
 			}
 

package/lib/components/php.js

@@ -29,7 +29,7 @@ export default class PHPComponent extends BaseComponent {
 				this.log('warn', 'PHP syntax checker not found. Skipping syntax check.');
 				return true;
 			}
-			console.error(error.stderr.replace(this.project.path, ''));
+			this.log(null, error.stderr.replace(this.project.path, ''));
 			this.log('error', `Failed to validate ${entry.replace(this.project.path, '')} - See above error.`);
 			return false;
 		}
@@ -93,7 +93,7 @@ export default class PHPComponent extends BaseComponent {
 					)
 				)
 			) {
-				console.error(error.stderr?.length ? error.stderr : error.stdout);
+				this.log(null, error.stderr?.length ? error.stderr : error.stdout);
 				this.log('error', `Failed linting ${entryLabel.replace(this.project.path, '')} - See above error.`);
 				return false;
 			}

package/lib/components/scripts.js

@@ -35,7 +35,7 @@ export default class ScriptsComponent extends BaseComponent {
 				throw thisLint;
 			}
 		} catch (error) {
-			console.error(error);
+			this.log(null, error);
 			this.log('error', `Failed linting ${entry.replace(`${this.project.path}/${this.project.paths.src.src}/${this.project.paths.src.scripts}/`, '')} - See above error.`);
 			return false;
 		}
@@ -59,6 +59,7 @@ export default class ScriptsComponent extends BaseComponent {
 				globalName: 'sdcBuild',
 				treeShaking: true,
 				entryPoints: [entry],
+				logLevel: 'silent',
 				bundle: true,
 				minify: true,
 				outdir: `${this.project.paths.dist}/${this.project.paths.src.scripts}/`,
@@ -72,7 +73,7 @@ export default class ScriptsComponent extends BaseComponent {
 
 			await this.updateBuildCache(entry, outFile, dependencies);
 		} catch (error) {
-			console.error(error);
+			this.log(null, String(error.message || error.stack || error));
 			this.log('error', `Failed building ${entryLabel} - See above error.`);
 			return false;
 		}
@@ -103,7 +104,7 @@ export default class ScriptsComponent extends BaseComponent {
 					await this.checkAndRebuildAffectedBlocks(path);
 				}
 			} catch (error) {
-				console.error(error);
+				this.log(null, String(error.stack || error));
 				this.log('error', `Failed to process scripts`);
 			}
 		});
@@ -121,7 +122,7 @@ export default class ScriptsComponent extends BaseComponent {
 					affectedBlocks.add(blockPath);
 				}
 			} catch (error) {
-				console.error(error);
+				this.log(null, String(error.stack || error));
 			}
 		}
 
@@ -149,10 +150,13 @@ export default class ScriptsComponent extends BaseComponent {
 			await ESLint.outputFixes(lintresults);
 			const formatter = await eslint.loadFormatter('stylish');
 			const formatterOutput = formatter.format(lintresults);
-			if (formatterOutput) { console.log(formatterOutput.replace(`${this.project.path}/${this.project.paths.src.src}/${this.project.paths.src.scripts}/`, '')); }
+			if (formatterOutput) {
+				const cleanedOutput = formatterOutput.replace(`${this.project.path}/${this.project.paths.src.src}/${this.project.paths.src.scripts}/`, '');
+				this.log(null, cleanedOutput)
+			}
 			return true;
 		} catch (error) {
-			console.error(error);
+			this.log(null, error.stack || error);
 			return error;
 		}
 	}

package/lib/components/server.js

@@ -4,6 +4,7 @@ import { fileURLToPath } from 'url';
 import { readFile } from 'fs/promises';
 import { create } from 'browser-sync';
 import chalk from 'chalk';
+import tui from '../tui.js';
 
 export default class ServerComponent extends BaseComponent {
 
@@ -115,9 +116,14 @@ export default class ServerComponent extends BaseComponent {
 		if (this.usedOptions.proxy) {
 			localURL = localURL.replace('localhost', this.usedOptions.proxy.url.host);
 		}
-		this.log('info', `Local server:    ${chalk.green(localURL)} (${this.usedOptions.urls.local})`);
-		if (this.usedOptions.urls.external) {
-			this.log('info', `External server: ${chalk.green(this.usedOptions.urls.external)}`);
+
+		if (tui.isInitialized) {
+			tui.setURLs(localURL, this.usedOptions.urls.external || '');
+		} else {
+			this.log('info', `Local server:    ${chalk.green(localURL)} (${this.usedOptions.urls.local})`);
+			if (this.usedOptions.urls.external) {
+				this.log('info', `External server: ${chalk.green(this.usedOptions.urls.external)}`);
+			}
 		}
 	}
 

package/lib/components/style.js

@@ -84,12 +84,12 @@ export default class StyleComponent extends BaseComponent {
 			}
 			try {
 				await fs.writeFile(this.project.paths.theme.scss, themeFileData);
-			} catch(error) {
-				console.error(error);
+			} catch (error) {
+				this.log(null, error);
 				this.log('error', `Failed to write auto-generated _theme.scss - See above error.`);
 			}
-		} catch(error) {
-			console.error(error);
+		} catch (error) {
+			this.log(null, error);
 			this.log('error', `Failed to read theme.json - See above error.`);
 		}
 	}
@@ -110,7 +110,7 @@ export default class StyleComponent extends BaseComponent {
 
 		try {
 			await fs.access(`${this.project.path}/${this.project.paths.dist}/${this.project.paths.src.style}`);
-		} catch(error) {
+		} catch (error) {
 			await fs.mkdir(`${this.project.path}/${this.project.paths.dist}/${this.project.paths.src.style}`, { recursive: true });
 		}
 
@@ -123,7 +123,7 @@ export default class StyleComponent extends BaseComponent {
 				fix: true
 			});
 			if (stylelinted.errored) {
-				console.error(stylelinted.report);
+				this.log(null, stylelinted.report);
 				throw Error('Linting error');
 			}
 
@@ -162,8 +162,8 @@ export default class StyleComponent extends BaseComponent {
 			thisClass.end({
 				itemLabel: entryLabel
 			});
-		} catch(error) {
-			console.error(error);
+		} catch (error) {
+			this.log(null, error);
 			this.log('error', `Failed building ${entryLabel} - See above error.`);
 			return false;
 		}

package/lib/config-validator.js

@@ -75,8 +75,8 @@ function validateConfig(config) {
 			}
 		}
 		return true;
-	} catch (error) {``
-		console.error(error);
+	} catch (error) {
+		log(null, error);
 		log('error', `Configuration validation failed`);
 		return false;
 	}

package/lib/help.js

@@ -1,8 +1,9 @@
 import project from './project.js';
 import chalk from 'chalk';
+import log from './logging.js';
 
 export default function() {
-	console.log(`
+	log(null, `
 ${chalk.bold.blue('SDC Build WP')} - Custom WordPress build process
 
 ${chalk.yellow('Usage:')} sdc-build-wp [options] [arguments]
@@ -38,9 +39,9 @@ ${chalk.yellow('Examples:')}
 
 ${chalk.yellow('Watch Mode Controls:')}
   ${chalk.green('[r]')} Restart build process
-	${chalk.green('[c]')} Clear cache
+  ${chalk.green('[c]')} Clear cache
   ${chalk.green('[p]')} Pause/Resume watching
-	${chalk.green('[n]')} New component
+  ${chalk.green('[n]')} New component
   ${chalk.green('[q]')} Quit and exit
 
 ${chalk.yellow('Configuration:')}

package/lib/logging.js

@@ -2,59 +2,68 @@
 // https://github.com/callmenick/node-pretty-log
 import chalk from 'chalk';
 import { default as project } from './project.js';
+import tui from './tui.js';
 
 function getTime() {
 	return new Date().toLocaleTimeString('en-US');
 }
 
 function log(type, ...messages) {
+	let icon, time = null;
+	let prefix = '';
+
 	switch (type) {
 		case 'success':
-			console.log.call(
-				console,
-				chalk.green('✔'),
-				chalk.gray(getTime()),
-				...messages
-			);
+			icon = chalk.green('✔');
+			time = chalk.gray(getTime());
 			break;
 		case 'error':
-			console.log.call(
-				console,
-				chalk.red('✖'),
-				chalk.bgRed.gray(getTime()),
-				...messages
-			);
+			icon = chalk.red('✖');
+			time = chalk.bgRed.gray(getTime());
 			if (project.builds.includes('server') && project.isRunning) {
 				project.components.server.server.notify('ERROR', 2500);
 			}
 			break;
 		case 'warn':
-			console.log.call(
-				console,
-				chalk.yellow('⚠'),
-				chalk.bgYellow.gray(getTime()),
-				...messages
-			);
+			icon = chalk.yellow('⚠');
+			time = chalk.bgYellow.gray(getTime());
 			break;
 		case 'php':
-			console.log.call(
-				console,
-				chalk.blue('ℹ'),
-				chalk.gray(getTime()),
-				chalk.gray('PHP:  '),
-				...messages
-			);
+			icon = chalk.blue('ℹ');
+			time = chalk.gray(getTime());
+			prefix = chalk.gray('PHP:  ');
 			break;
 		case 'info':
-		default:
-			console.log.call(
-				console,
-				chalk.blue('ℹ'),
-				chalk.bgBlue.gray(getTime()),
-				...messages
-			);
+			icon = chalk.blue('ℹ');
+			time = chalk.bgBlue.gray(getTime());
 			break;
 	}
+
+	let messagesString = messages.join(' ');
+
+	const logMessage = [icon, time, prefix, messagesString].filter(Boolean).join(' ');
+	if (tui.isInitialized) {
+		if (!type && messagesString.includes('\n')) {
+			messagesString.split('\n').forEach(line => {
+				if (line.trim()) {
+					tui.log(line);
+				}
+			});
+			return;
+		}
+		tui.log(String(logMessage));
+	} else {
+		switch (type) {
+			case 'error':
+				console.error(logMessage);
+				break;
+			case 'warn':
+				console.warn(logMessage);
+				break;
+			default:
+				console.log(logMessage);
+		}
+	}
 }
 
 export default log;

package/lib/project.js

@@ -11,7 +11,7 @@ import log from './logging.js';
 import * as LibComponents from './components/index.js';
 import help from './help.js';
 import { validateConfig, mergeWithDefaults } from './config-validator.js';
-import { input, select } from '@inquirer/prompts';
+import tui from './tui.js';
 
 let project = {
 	config: {},
@@ -92,14 +92,14 @@ export async function init() {
 	const styleDir = `${project.path}/${project.paths.src.src}/${project.paths.src.style}`;
 
 	if (project.argv.version || project.argv.v) {
-		console.log(await utils.getThisPackageVersion());
+		log(null, await utils.getThisPackageVersion());
 		process.exit(0);
 	} else if (project.argv['clear-cache']) {
 		try {
 			await project.components.cache.init();
 			await project.components.cache.clearCache();
 		} catch (error) {
-			console.error(error);
+			log(null, error);
 			log('error', `Failed to clear cache`);
 		}
 		process.exit(0);
@@ -153,7 +153,6 @@ export async function init() {
 	});
 
 	process.on('SIGINT', async function() {
-		console.log(`\r`);
 		if (project.isRunning) {
 			await utils.stopActiveComponents();
 			project.isRunning = false;
@@ -163,12 +162,19 @@ export async function init() {
 			await project.configWatcher.close();
 			project.configWatcher = null;
 		}
+		tui.destroy();
+		if (tui.getLogHistory) {
+			const logDump = tui.getLogHistory();
+			if (logDump && logDump.trim()) {
+				log(null, logDump);
+			}
+		}
 		log('info', `Exited sdc-build-wp`);
 		if (process.stdin.isTTY) {
 			process.stdin.setRawMode(false);
 			process.stdin.pause();
 		}
-		process.exit(0);
+		setTimeout(() => process.exit(0), 100);
 	});
 
 }
@@ -180,7 +186,9 @@ export function keypressListen() {
 
 	const installRaw = () => {
 		if (!process.stdin.isTTY) return;
-		try { process.stdin.setRawMode(true); } catch {}
+		if (!tui.isInitialized) {
+			try { process.stdin.setRawMode(true); } catch {}
+		}
 		process.stdin.resume();
 		process.stdin.setEncoding('utf8');
 	};
@@ -191,7 +199,7 @@ export function keypressListen() {
 		if (isPrompting) { return; }
 		switch (key) {
 			case '\r': // [Enter]/[Return]
-				console.log('\r');
+				log(null, '');
 				break;
 			case '\u0003': // [Ctrl]+C
 			case 'q':
@@ -202,8 +210,10 @@ export function keypressListen() {
 				utils.clearScreen();
 				if (project.isRunning) {
 					log('success', 'Resumed build process');
+					tui.setPaused(false);
 				} else {
 					log('warn', 'Paused build process');
+					tui.setPaused(true);
 				}
 				break;
 			case 'c':
@@ -216,8 +226,8 @@ export function keypressListen() {
 			case 'n': // New menu
 				isPrompting = true;
 				process.stdin.removeListener('data', handler);
+
 				try {
-					try { process.stdin.setRawMode(false); } catch {}
 					await handleCreateNew();
 				} finally {
 					isPrompting = false;
@@ -235,28 +245,21 @@ async function handleCreateNew() {
 	if (!project.isRunning) {
 		log('warn', 'Build process paused. Press [p] to resume if needed. Continuing creation.');
 	}
-	let typeKey;
-	try {
-		typeKey = await select({
-			message: 'Create new:',
-			choices: [
-				{ name: 'Block', value: 'b' },
-				{ name: 'Pattern', value: 'p' },
-				{ name: 'Style variation', value: 's' },
-				{ name: 'Cancel', value: 'cancel' }
-			]
-		});
-	} catch (error) {
-		return;
-	}
-	if (typeKey === 'cancel') { return; }
+
+
+	const menuOptions = ['Block', 'Pattern', 'Style variation', 'Cancel'];
+	const menuMap = { Block: 'b', Pattern: 'p', 'Style variation': 's', Cancel: 'cancel' };
+	const menuPrompt = 'Create new:';
+	const blockPrompt = 'Block name:';
+	const patternPrompt = 'Pattern name:';
+	const stylePrompt = 'Style variation name:';
+
+	let menuResult = await tui.showMenu(menuOptions, menuPrompt);
+	if (!menuResult || menuMap[menuResult.value] === 'cancel') return;
+	let typeKey = menuMap[menuResult.value];
+
 	if (typeKey === 'b') {
-		let name;
-		try {
-			name = await input({ message: 'Block name:' });
-		} catch (error) {
-			return;
-		}
+		let name = await tui.showInput(blockPrompt);
 		if (!name) { log('warn', 'No name provided.'); return; }
 		const slug = utils.slugify(name);
 		const blockDir = `${project.path}/blocks/${slug}`;
@@ -286,12 +289,11 @@ async function handleCreateNew() {
 				project.components.blocks.addBlock(blockDir);
 			}
 		} catch (error) {
-			console.error(error);
+			log(null, error);
 			log('error', `Failed to scaffold block`);
 		}
 	} else if (typeKey === 'p') {
-		let name;
-		try { name = await input({ message: 'Pattern name:' }); } catch (error) { return; }
+		let name = await tui.showInput(patternPrompt);
 		if (!name) { log('warn', 'No name provided.'); return; }
 		const slug = utils.slugify(name);
 		const patternsDir = `${project.path}/patterns`;
@@ -318,12 +320,11 @@ async function handleCreateNew() {
 				project.components.php.globs.push(filePath);
 			}
 		} catch (error) {
-			console.error(error);
+			log(null, error);
 			log('error', `Failed to create pattern`);
 		}
 	} else if (typeKey === 's') {
-		let name;
-		try { name = await input({ message: 'Style variation name:' }); } catch (error) { return; }
+		let name = await tui.showInput(stylePrompt);
 		if (!name) { log('warn', 'No name provided.'); return; }
 		const slug = utils.slugify(name);
 		const stylesDir = `${project.path}/styles`;
@@ -334,7 +335,7 @@ async function handleCreateNew() {
 			log('warn', `Style variation ${slug}.json already exists.`);
 			return;
 		} catch (error) {
-
+			//
 		}
 		try {
 			const libDir = path.dirname(fileURLToPath(import.meta.url));
@@ -344,7 +345,7 @@ async function handleCreateNew() {
 			try {
 				templateObj = JSON.parse(templateRaw);
 			} catch (error) {
-				console.error(error);
+				log(null, error);
 				throw new Error('Invalid style variation template JSON');
 			}
 			templateObj.title = name;
@@ -352,7 +353,7 @@ async function handleCreateNew() {
 			await fs.writeFile(filePath, JSON.stringify(templateObj, null, '\t'));
 			log('success', `Created style variation at styles/${slug}.json`);
 		} catch (error) {
-			console.error(error);
+			log(null, error);
 			log('error', `Failed to create style variation`);
 		}
 	}
@@ -393,7 +394,7 @@ export async function loadConfig() {
 			project.paths.images = `${project.path}/${project.paths.src.src}/${project.paths.src.images}`;
 			project.entries = {};
 		} else {
-			console.error(error);
+			log(null, error);
 			log('error', `Failed to load config: ${error.message}`);
 			process.exit(1);
 		}
@@ -412,7 +413,7 @@ export function setupConfigWatcher() {
 		await restartBuild();
 	});
 	configWatcher.on('error', (error) => {
-		console.error(error);
+		log(null, error);
 		log('warn', `Config file watcher error`);
 	});
 	project.configWatcher = configWatcher;

package/lib/tui.js

@@ -0,0 +1,345 @@
+import blessed from 'blessed';
+import chalk from 'chalk';
+import log from './logging.js';
+
+class TUI {
+	constructor() {
+		this.screen = null;
+		this.headerBox = null;
+		this.logBox = null;
+		this.isInitialized = false;
+		this.urls = {
+			local: '',
+			external: ''
+		};
+		this.commands = '';
+		this.components = [];
+		this.watchMode = false;
+		this.isPaused = false;
+		this._logHistory = [];
+	}
+
+	init() {
+		if (this.isInitialized) {
+			return;
+		}
+
+		this.screen = blessed.screen({
+			smartCSR: true,
+			fullUnicode: true,
+			title: 'SDC Build WP',
+			input: process.stdin,
+			output: process.stdout
+		});
+
+		this.headerBox = blessed.box({
+			top: 0,
+			left: 0,
+			width: '100%',
+			height: 5,
+			content: '',
+			tags: true,
+			style: {
+				fg: 'white',
+				bg: 'black',
+				border: {
+					fg: 'blue'
+				}
+			},
+			border: {
+				type: 'line',
+				bottom: true
+			},
+			shrink: false,
+			scrollable: false
+		});
+
+		this.logBox = blessed.log({
+			top: 5,
+			left: 0,
+			width: '100%',
+			height: '100%-5',
+			tags: true,
+			scrollable: true,
+			alwaysScroll: true,
+			scrollbar: {
+				ch: ' ',
+				track: {
+					bg: 'blue'
+				},
+				style: {
+					inverse: true
+				}
+			},
+			mouse: true,
+			keys: true,
+			vi: true,
+			style: {
+				fg: 'white',
+				bg: 'black'
+			}
+		});
+
+		this.screen.append(this.logBox);
+		this.screen.append(this.headerBox);
+
+		this.screen.on('resize', () => {
+			this.updateHeader();
+			this.screen.render();
+		});
+
+		this.screen.key(['escape', 'q', 'C-c'], () => {
+			return false;
+		});
+
+		this.screen.key(['enter', 'return'], () => {
+			this.logBox.log('');
+			this.screen.render();
+		});
+
+		this.screen.key(['down'], () => {
+			this.logBox.scroll(1);
+			this.screen.render();
+		});
+
+		this.screen.key(['up'], () => {
+			this.logBox.scroll(-1);
+			this.screen.render();
+		});
+
+		this.screen.key(['pagedown'], () => {
+			this.logBox.scroll(this.logBox.height);
+			this.screen.render();
+		});
+
+		this.screen.key(['pageup'], () => {
+			this.logBox.scroll(-this.logBox.height);
+			this.screen.render();
+		});
+
+		this.updateHeader();
+		this.screen.render();
+
+		this.isInitialized = true;
+	}
+
+	updateHeader() {
+		if (!this.isInitialized) {
+			return;
+		}
+
+		const lines = [];
+
+		let titleLine = ' ' + chalk.bold.blue('SDC Build WP');
+		if (this.watchMode) {
+			titleLine += chalk.gray(' (watch mode)');
+		}
+		if (this.isPaused) {
+			titleLine += chalk.bold.yellow(' [PAUSED]');
+		}
+		if (this.components.length > 0) {
+			titleLine += chalk.gray(' [') + chalk.cyan(this.components.join(', ')) + chalk.gray(']');
+		}
+		lines.push(titleLine);
+
+		if (this.urls.local || this.urls.external) {
+			let urlLine = ' ';
+			if (this.urls.local) {
+				urlLine += `Local: ${chalk.green(this.urls.local)}`;
+			}
+			if (this.urls.external) {
+				if (urlLine.length > 1) urlLine += '  ';
+				urlLine += `External: ${chalk.green(this.urls.external)}`;
+			}
+			lines.push(urlLine);
+		} else {
+			lines.push(' ');
+		}
+
+		if (this.commands) {
+			lines.push(' ' + this.commands);
+		} else {
+			lines.push(' ');
+		}
+
+		lines.push(' ');
+
+		this.headerBox.setContent(lines.join('\n'));
+	}
+
+	setURLs(local, external) {
+		this.urls.local = local;
+		this.urls.external = external;
+		this.updateHeader();
+		this.render();
+	}
+
+	setCommands(commands) {
+		this.commands = commands;
+		this.updateHeader();
+		this.render();
+	}
+
+	setPaused(isPaused) {
+		this.isPaused = isPaused;
+		this.updateHeader();
+		this.render();
+	}
+
+	setComponents(components, watchMode = false) {
+		this.components = components;
+		this.watchMode = watchMode;
+		this.updateHeader();
+		this.render();
+	}
+
+	log(message) {
+		this._logHistory.push(message);
+		if (!this.isInitialized) {
+			log(null, message);
+			return;
+		}
+		this.logBox.log(message);
+		this.render();
+	}
+
+	getLogHistory() {
+		return this._logHistory.join('\n');
+	}
+
+	render() {
+		if (this.isInitialized && this.screen) {
+			this.screen.render();
+		}
+	}
+
+	async showMenu(options, prompt = 'Choose an option:') {
+		return new Promise((resolve) => {
+			const menu = blessed.list({
+				parent: this.screen,
+				top: 'center',
+				left: 'center',
+				width: '50%',
+				height: options.length + 4,
+				label: ` ${prompt} `,
+				items: options,
+				keys: true,
+				mouse: true,
+				border: 'line',
+				style: {
+					fg: 'white',
+					bg: 'black',
+					border: { fg: 'blue' },
+					selected: { bg: 'blue', fg: 'white' }
+				}
+			});
+			menu.focus();
+			const stopLogScroll = (ch, key) => {
+				if (['up', 'down', 'pagedown', 'pageup'].includes(key.name)) {
+					return false;
+				}
+			};
+			this.logBox.ignoreKeys = true;
+			menu.on('detach', () => {
+				this.logBox.ignoreKeys = false;
+			});
+			menu.on('keypress', stopLogScroll);
+			this.screen.render();
+			menu.on('select', (item, idx) => {
+				menu.destroy();
+				this.screen.render();
+				resolve({ value: item.getText(), index: idx });
+			});
+			menu.on('cancel', () => {
+				menu.destroy();
+				this.screen.render();
+				resolve(null);
+			});
+			menu.key(['escape', 'q'], () => {
+				menu.emit('cancel');
+			});
+		});
+	}
+
+	async showInput(prompt = 'Enter value:') {
+		return new Promise((resolve) => {
+			const box = blessed.box({
+				parent: this.screen,
+				top: 'center',
+				left: 'center',
+				width: '50%',
+				height: 5,
+				label: ` ${prompt} `,
+				border: 'line',
+				style: {
+					fg: 'white',
+					bg: 'black',
+					border: { fg: 'blue' }
+				}
+			});
+			const input = blessed.textbox({
+				parent: box,
+				top: 2,
+				left: 2,
+				width: '90%',
+				height: 1,
+				inputOnFocus: true,
+				style: {
+					fg: 'white',
+					bg: 'black',
+					focus: { bg: 'blue' }
+				}
+			});
+			input.focus();
+			this.screen.render();
+			input.on('submit', (value) => {
+				box.destroy();
+				this.screen.render();
+				resolve(value);
+			});
+			input.on('cancel', () => {
+				box.destroy();
+				this.screen.render();
+				resolve(null);
+			});
+			input.key(['escape', 'q'], () => {
+				input.emit('cancel');
+			});
+		});
+	}
+
+	getState() {
+		return {
+			urls: { ...this.urls },
+			commands: this.commands,
+			components: [...this.components],
+			watchMode: this.watchMode,
+			isPaused: this.isPaused
+		};
+	}
+
+	setState(state) {
+		if (state) {
+			this.urls = { ...state.urls };
+			this.commands = state.commands;
+			this.components = [...state.components];
+			this.watchMode = state.watchMode;
+			this.isPaused = state.isPaused;
+			this.updateHeader();
+			this.render();
+		}
+	}
+
+	destroy() {
+		if (this.isInitialized && this.screen) {
+			this.screen.destroy();
+			this.isInitialized = false;
+			this.screen = null;
+			this.headerBox = null;
+			this.logBox = null;
+		}
+	}
+}
+
+const tui = new TUI();
+export default tui;

package/lib/utils.js

@@ -4,6 +4,7 @@ import { readdir } from 'node:fs/promises';
 import { fileURLToPath } from 'url';
 import project from './project.js';
 import log from './logging.js';
+import tui from './tui.js';
 
 export async function getThisPackageVersion() {
 	return JSON.parse(await fs.readFile(path.join(path.dirname(fileURLToPath(import.meta.url)), '../package.json'))).version
@@ -11,6 +12,7 @@ export async function getThisPackageVersion() {
 
 export function clearScreen() {
 	if (!process.stdout.isTTY) { return; }
+	if (tui.isInitialized) { return; }
 	process.stdout.write('\x1B[2J\x1B[0f');
 }
 
@@ -19,7 +21,7 @@ export async function stopActiveComponents() {
 		try {
 			await project.configWatcher.close();
 		} catch (error) {
-			console.error(error);
+			log(null, error);
 			log('error', 'Failed to stop config file watcher');
 		}
 	}
@@ -27,7 +29,7 @@ export async function stopActiveComponents() {
 		try {
 			project.components.server.server.exit();
 		} catch (error) {
-			console.error(error);
+			this.log(null, error);
 			log('error', 'Failed to stop server');
 		}
 	}
@@ -39,7 +41,8 @@ export async function stopActiveComponents() {
 			try {
 				await component.watcher.close();
 			} catch (error) {
-				console.warn(`Failed to stop watcher for ${component.constructor.name}:`, error.message);
+				log(null, error);
+				log('error', `Failed to stop watcher for ${component.constructor.name}`);
 			}
 		}
 	}
@@ -217,7 +220,7 @@ export async function ensureDir(dir) {
 		await fs.mkdir(dir, { recursive: true });
 		return true;
 	} catch (error) {
-		console.error(error);
+		log(null, error);
 		log('error', `Failed to create directory ${dir}`);
 		return false;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sdc-build-wp",
-	"version": "5.2.0",
+	"version": "5.3.1",
 	"description": "Custom WordPress build process.",
 	"engines": {
 		"node": ">=22"
@@ -22,13 +22,13 @@
 		"sdc-build-wp": "./index.js"
 	},
 	"dependencies": {
-		"@inquirer/prompts": "^7.9.0",
 		"@stylistic/eslint-plugin": "^5.4.0",
 		"@stylistic/stylelint-plugin": "^4.0.0",
 		"@typescript-eslint/eslint-plugin": "^8.46.1",
 		"@typescript-eslint/parser": "^8.46.1",
 		"@wordpress/scripts": "^30.25.0",
 		"autoprefixer": "^10.4.21",
+		"blessed": "^0.1.81",
 		"browser-sync": "^3.0.4",
 		"chalk": "^5.6.2",
 		"chokidar": "^4.0.3",