wp-typia 0.16.3 → 0.16.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wp-typia",
-  "version": "0.16.3",
+  "version": "0.16.6",
   "description": "Canonical CLI package for wp-typia scaffolding and project workflows",
   "packageManager": "bun@1.3.11",
   "type": "module",
@@ -65,7 +65,7 @@
     "@bunli/tui": "0.6.0",
     "@bunli/utils": "0.6.0",
     "@wp-typia/api-client": "^0.4.2",
-    "@wp-typia/project-tools": "0.16.2",
+    "@wp-typia/project-tools": "0.16.5",
     "better-result": "^2.7.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",

package/src/runtime-bridge.ts

@@ -12,20 +12,26 @@ import {
 import { formatRunScript } from "@wp-typia/project-tools/package-managers";
 import { tryResolveWorkspaceProject } from "@wp-typia/project-tools/workspace-project";
 import type { ReadlinePrompt } from "@wp-typia/project-tools/cli-prompt";
+import type { AlternateBufferCompletionPayload } from "./ui/alternate-buffer-lifecycle";
 
 type CreateExecutionInput = {
 	projectDir: string;
 	cwd: string;
+	emitOutput?: boolean;
 	flags: Record<string, unknown>;
 	interactive?: boolean;
+	printLine?: PrintLine;
 	prompt?: ReadlinePrompt;
+	warnLine?: PrintLine;
 };
 
 type AddExecutionInput = {
 	cwd: string;
+	emitOutput?: boolean;
 	flags: Record<string, unknown>;
 	kind?: string;
 	name?: string;
+	printLine?: PrintLine;
 };
 
 type TemplatesExecutionInput = {
@@ -71,6 +77,151 @@ function printBlock(lines: string[], printLine: PrintLine): void {
 	}
 }
 
+export function printCompletionPayload(
+	payload: AlternateBufferCompletionPayload,
+	options: {
+		printLine?: PrintLine;
+		warnLine?: PrintLine;
+	} = {},
+): void {
+	const printLine = options.printLine ?? (console.log as PrintLine);
+	const warnLine = options.warnLine ?? printLine;
+
+	for (const line of payload.preambleLines ?? []) {
+		printLine(line);
+	}
+	for (const warning of payload.warningLines ?? []) {
+		warnLine(`⚠️ ${warning}`);
+	}
+
+	const hasDetails =
+		(payload.summaryLines?.length ?? 0) > 0 ||
+		(payload.nextSteps?.length ?? 0) > 0 ||
+		(payload.optionalLines?.length ?? 0) > 0 ||
+		Boolean(payload.optionalNote);
+	const hasLeadingContext =
+		(payload.preambleLines?.length ?? 0) > 0 ||
+		(payload.warningLines?.length ?? 0) > 0;
+
+	printLine(hasLeadingContext && hasDetails ? `\n${payload.title}` : payload.title);
+	for (const line of payload.summaryLines ?? []) {
+		printLine(line);
+	}
+	if ((payload.nextSteps?.length ?? 0) > 0) {
+		printLine("Next steps:");
+		for (const step of payload.nextSteps ?? []) {
+			printLine(`  ${step}`);
+		}
+	}
+	if ((payload.optionalLines?.length ?? 0) > 0) {
+		printLine(`\n${payload.optionalTitle ?? "Optional:"}`);
+		for (const step of payload.optionalLines ?? []) {
+			printLine(`  ${step}`);
+		}
+	}
+	if (payload.optionalNote) {
+		printLine(`Note: ${payload.optionalNote}`);
+	}
+}
+
+export function buildCreateCompletionPayload(flow: {
+	nextSteps: string[];
+	optionalOnboarding: {
+		note: string;
+		steps: string[];
+	};
+	projectDir: string;
+	result: {
+		selectedVariant?: string | null;
+		variables: {
+			title: string;
+		};
+		warnings: string[];
+	};
+}): AlternateBufferCompletionPayload {
+	return {
+		nextSteps: flow.nextSteps,
+		optionalLines:
+			flow.optionalOnboarding.steps.length > 0 ? flow.optionalOnboarding.steps : undefined,
+		optionalNote:
+			flow.optionalOnboarding.steps.length > 0 ? flow.optionalOnboarding.note : undefined,
+		optionalTitle:
+			flow.optionalOnboarding.steps.length > 0 ? "Optional before first commit:" : undefined,
+		preambleLines: flow.result.selectedVariant
+			? [`Template variant: ${flow.result.selectedVariant}`]
+			: undefined,
+		summaryLines: [`Project directory: ${flow.projectDir}`],
+		title: `✅ Created ${flow.result.variables.title} in ${flow.projectDir}`,
+		warningLines: flow.result.warnings,
+	};
+}
+
+export function buildMigrationCompletionPayload(options: {
+	command: string;
+	lines: string[];
+}): AlternateBufferCompletionPayload {
+	const summaryLines = options.lines.filter((line) => line.trim().length > 0);
+
+	return {
+		summaryLines,
+		title: `✅ Completed wp-typia migrate ${options.command}`,
+	};
+}
+
+function buildAddCompletionPayload(options: {
+	kind: "binding-source" | "block" | "hooked-block" | "pattern" | "variation";
+	projectDir: string;
+	values: Record<string, string>;
+}): AlternateBufferCompletionPayload {
+	switch (options.kind) {
+		case "variation":
+			return {
+				summaryLines: [
+					`Variation: ${options.values.variationSlug}`,
+					`Target block: ${options.values.blockSlug}`,
+					`Project directory: ${options.projectDir}`,
+				],
+				title: "✅ Added workspace variation",
+			};
+		case "pattern":
+			return {
+				summaryLines: [
+					`Pattern: ${options.values.patternSlug}`,
+					`Project directory: ${options.projectDir}`,
+				],
+				title: "✅ Added workspace pattern",
+			};
+		case "binding-source":
+			return {
+				summaryLines: [
+					`Binding source: ${options.values.bindingSourceSlug}`,
+					`Project directory: ${options.projectDir}`,
+				],
+				title: "✅ Added binding source",
+			};
+		case "hooked-block":
+			return {
+				summaryLines: [
+					`Block: ${options.values.blockSlug}`,
+					`Anchor: ${options.values.anchorBlockName}`,
+					`Position: ${options.values.position}`,
+					`Project directory: ${options.projectDir}`,
+				],
+				title: "✅ Added blockHooks metadata",
+			};
+		case "block":
+		default:
+			return {
+				summaryLines: [
+					`Blocks: ${options.values.blockSlugs}`,
+					`Template family: ${options.values.templateId}`,
+					`Project directory: ${options.projectDir}`,
+				],
+				title: "✅ Added workspace block",
+			};
+	}
+}
+
 function readOptionalStringFlag(
 	flags: Record<string, unknown>,
 	name: string,
@@ -261,10 +412,13 @@ const BOOLEAN_PROMPT_OPTIONS = [
 export async function executeCreateCommand({
 	projectDir,
 	cwd,
+	emitOutput = true,
 	flags,
 	interactive,
+	printLine = console.log as PrintLine,
 	prompt,
-}: CreateExecutionInput): Promise<void> {
+	warnLine = console.warn as PrintLine,
+}: CreateExecutionInput): Promise<AlternateBufferCompletionPayload> {
 	const [
 		{ createReadlinePrompt },
 		{ runScaffoldFlow },
@@ -333,25 +487,14 @@ export async function executeCreateCommand({
 			yes: Boolean(flags.yes),
 		});
 
-		if (flow.result.selectedVariant) {
-			console.log(`Template variant: ${flow.result.selectedVariant}`);
-		}
-		for (const warning of flow.result.warnings) {
-			console.warn(`⚠️ ${warning}`);
-		}
-
-		console.log(`\n✅ Created ${flow.result.variables.title} in ${flow.projectDir}`);
-		console.log("Next steps:");
-		for (const step of flow.nextSteps) {
-			console.log(`  ${step}`);
-		}
-		if (flow.optionalOnboarding.steps.length > 0) {
-			console.log("\nOptional before first commit:");
-			for (const step of flow.optionalOnboarding.steps) {
-				console.log(`  ${step}`);
-			}
-			console.log(`Note: ${flow.optionalOnboarding.note}`);
+		const payload = buildCreateCompletionPayload(flow);
+		if (emitOutput) {
+			printCompletionPayload(payload, {
+				printLine,
+				warnLine,
+			});
 		}
+		return payload;
 	} finally {
 		if (activePrompt && activePrompt !== prompt) {
 			activePrompt.close();
@@ -361,13 +504,15 @@ export async function executeCreateCommand({
 
 export async function executeAddCommand({
 	cwd,
+	emitOutput = true,
 	flags,
 	kind,
 	name,
-}: AddExecutionInput): Promise<void> {
+	printLine = console.log as PrintLine,
+}: AddExecutionInput): Promise<AlternateBufferCompletionPayload | void> {
 	if (!kind) {
 		const { formatAddHelpText } = await loadCliAddRuntime();
-		console.log(formatAddHelpText());
+		printLine(formatAddHelpText());
 		return;
 	}
 
@@ -390,8 +535,18 @@ export async function executeAddCommand({
 			cwd,
 			variationName: name,
 		});
-		console.log(`✅ Added variation ${result.variationSlug} to ${result.blockSlug} in ${result.projectDir}.`);
-		return;
+		const payload = buildAddCompletionPayload({
+			kind: "variation",
+			projectDir: result.projectDir,
+			values: {
+				blockSlug: result.blockSlug,
+				variationSlug: result.variationSlug,
+			},
+		});
+		if (emitOutput) {
+			printCompletionPayload(payload, { printLine });
+		}
+		return payload;
 	}
 
 	if (kind === "pattern") {
@@ -405,8 +560,17 @@ export async function executeAddCommand({
 			cwd,
 			patternName: name,
 		});
-		console.log(`✅ Added pattern ${result.patternSlug} in ${result.projectDir}.`);
-		return;
+		const payload = buildAddCompletionPayload({
+			kind: "pattern",
+			projectDir: result.projectDir,
+			values: {
+				patternSlug: result.patternSlug,
+			},
+		});
+		if (emitOutput) {
+			printCompletionPayload(payload, { printLine });
+		}
+		return payload;
 	}
 
 	if (kind === "binding-source") {
@@ -420,8 +584,17 @@ export async function executeAddCommand({
 			bindingSourceName: name,
 			cwd,
 		});
-		console.log(`✅ Added binding source ${result.bindingSourceSlug} in ${result.projectDir}.`);
-		return;
+		const payload = buildAddCompletionPayload({
+			kind: "binding-source",
+			projectDir: result.projectDir,
+			values: {
+				bindingSourceSlug: result.bindingSourceSlug,
+			},
+		});
+		if (emitOutput) {
+			printCompletionPayload(payload, { printLine });
+		}
+		return payload;
 	}
 
 	if (kind === "hooked-block") {
@@ -449,10 +622,19 @@ export async function executeAddCommand({
 			cwd,
 			position,
 		});
-		console.log(
-			`✅ Added blockHooks metadata for ${result.blockSlug} relative to ${result.anchorBlockName} (${result.position}) in ${result.projectDir}.`,
-		);
-		return;
+		const payload = buildAddCompletionPayload({
+			kind: "hooked-block",
+			projectDir: result.projectDir,
+			values: {
+				anchorBlockName: result.anchorBlockName,
+				blockSlug: result.blockSlug,
+				position: result.position,
+			},
+		});
+		if (emitOutput) {
+			printCompletionPayload(payload, { printLine });
+		}
+		return payload;
 	}
 
 	if (kind !== "block") {
@@ -485,9 +667,18 @@ export async function executeAddCommand({
 			| "compound",
 	});
 
-	console.log(
-		`✅ Added ${result.blockSlugs.join(", ")} to ${result.projectDir} using the ${result.templateId} family.`,
-	);
+	const payload = buildAddCompletionPayload({
+		kind: "block",
+		projectDir: result.projectDir,
+		values: {
+			blockSlugs: result.blockSlugs.join(", "),
+			templateId: result.templateId,
+		},
+	});
+	if (emitOutput) {
+		printCompletionPayload(payload, { printLine });
+	}
+	return payload;
 }
 
 export async function executeTemplatesCommand(
@@ -568,7 +759,7 @@ export async function executeMigrateCommand({
 	flags,
 	prompt,
 	renderLine,
-}: MigrateExecutionInput): Promise<void> {
+}: MigrateExecutionInput): Promise<AlternateBufferCompletionPayload | void> {
 	const { formatMigrationHelpText, parseMigrationArgs, runMigrationCommand } =
 		await loadMigrationsRuntime();
 	if (!command) {
@@ -599,10 +790,31 @@ export async function executeMigrateCommand({
 	pushFlag(argv, "seed", readOptionalLooseStringFlag(flags, "seed"));
 
 	const parsed = parseMigrationArgs(argv);
-	await runMigrationCommand(parsed, cwd, {
+	const lines: string[] | null = renderLine ? [] : null;
+	const captureLine = (line: string) => {
+		lines?.push(line);
+		if (renderLine) {
+			renderLine(line);
+			return;
+		}
+		console.log(line);
+	};
+	const result = await runMigrationCommand(parsed, cwd, {
 		prompt,
-		renderLine,
+		renderLine: captureLine,
 	});
+	if (renderLine) {
+		return result && typeof result === "object" && "cancelled" in result && result.cancelled === true
+				? undefined
+				: buildMigrationCompletionPayload({
+					command: parsed.command ?? "plan",
+					lines: lines ?? [],
+				});
+	}
+
+	if (result && typeof result === "object" && "cancelled" in result && result.cancelled === true) {
+		return;
+	}
 }
 
 export { listTemplates };

package/src/ui/add-flow.tsx

@@ -20,7 +20,8 @@ import {
 	sanitizeAddSubmitValues,
 } from "./add-flow-model";
 import {
-	FirstPartyScrollBox,
+	FirstPartyCompletionViewport,
+	FirstPartyFormViewport,
 	FirstPartySelectField,
 	FirstPartyTextField,
 } from "./first-party-form";
@@ -137,7 +138,7 @@ function AddFlowFields({
 }: {
 	workspaceBlockOptions: WorkspaceBlockOption[];
 }) {
-	const { activeFieldName, values } = useFormContext();
+	const { activeFieldName, isSubmitting, values } = useFormContext();
 	const { height: terminalHeight = 24 } = useTerminalDimensions();
 	const addValues = values as Partial<AddFlowValues>;
 	const kind = addValues.kind ?? "block";
@@ -160,8 +161,14 @@ function AddFlowFields({
 	const variationBlockUsesSelect = kind === "variation" && workspaceBlockOptions.length > 0;
 
 	return createElement(
-		FirstPartyScrollBox,
-		{ scrollTop, viewportHeight },
+		FirstPartyFormViewport,
+		{
+			isSubmitting,
+			scrollTop,
+			submittingDescription: "Applying your workspace changes...",
+			submittingTitle: "Updating workspace...",
+			viewportHeight,
+		},
 		[
 			createElement(FirstPartySelectField, {
 				...getWrappedFieldNeighbors(orderedVisibleFields, "kind"),
@@ -257,9 +264,11 @@ function AddFlowFields({
 }
 
 export function AddFlow({ cwd, initialValues }: AddFlowProps) {
-	const { handleCancel, handleFailure, handleSubmit } = useAlternateBufferLifecycle(
+	const { completion, handleCancel, handleFailure, handleSubmit, status } =
+		useAlternateBufferLifecycle(
 		"wp-typia add failed",
-	);
+		);
+	const { height: terminalHeight = 24 } = useTerminalDimensions();
 	const [workspaceBlockOptions, setWorkspaceBlockOptions] = useState<WorkspaceBlockOption[]>([]);
 
 	useEffect(() => {
@@ -283,6 +292,13 @@ export function AddFlow({ cwd, initialValues }: AddFlowProps) {
 		};
 	}, [cwd, handleFailure]);
 
+	if (status === "completed" && completion) {
+		return createElement(FirstPartyCompletionViewport, {
+			completion,
+			viewportHeight: getAddViewportHeight(terminalHeight),
+		});
+	}
+
 	return (
 		<Form
 			initialValues={initialValues}
@@ -290,8 +306,9 @@ export function AddFlow({ cwd, initialValues }: AddFlowProps) {
 			onSubmit={async (values) =>
 				handleSubmit(async () => {
 					const flags = sanitizeAddSubmitValues(values);
-					await executeAddCommand({
+					return executeAddCommand({
 						cwd,
+						emitOutput: false,
 						flags,
 						kind: values.kind,
 						name: typeof flags.name === "string" ? flags.name : undefined,

package/src/ui/alternate-buffer-lifecycle.ts

@@ -1,13 +1,25 @@
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 
 import { useRuntime } from "@bunli/runtime/app";
 import { useKeyboard } from "@bunli/tui";
 
 type AlternateBufferKeyEvent = {
 	ctrl?: boolean;
+	sequence?: string;
 	name?: string;
 };
 
+export type AlternateBufferCompletionPayload = {
+	title: string;
+	preambleLines?: string[];
+	summaryLines?: string[];
+	nextSteps?: string[];
+	optionalTitle?: string;
+	optionalLines?: string[];
+	optionalNote?: string;
+	warningLines?: string[];
+};
+
 type AlternateBufferFailureOptions = {
 	context: string;
 	error: unknown;
@@ -16,12 +28,16 @@ type AlternateBufferFailureOptions = {
 };
 
 type RunAlternateBufferActionOptions = {
-	action: () => Promise<void>;
+	action: () => Promise<unknown>;
 	context: string;
 	exit: () => void;
+	exitOnSuccess?: boolean;
 	log?: (message: string) => void;
+	onSuccess?: (result: unknown) => void;
 };
 
+type AlternateBufferLifecycleStatus = "editing" | "submitting" | "completed";
+
 export function describeAlternateBufferFailure(context: string, error: unknown): string {
 	const message = error instanceof Error ? error.message : String(error);
 	return `${context}: ${message}`;
@@ -31,6 +47,10 @@ export function isAlternateBufferExitKey(key: AlternateBufferKeyEvent): boolean
 	return key.name === "q" || (key.ctrl === true && key.name === "c");
 }
 
+export function isAlternateBufferCompletionKey(key: AlternateBufferKeyEvent): boolean {
+	return key.name === "enter" || key.sequence === "\r" || key.sequence === "\n";
+}
+
 export function reportAlternateBufferFailure({
 	context,
 	error,
@@ -46,11 +66,16 @@ export async function runAlternateBufferAction({
 	action,
 	context,
 	exit,
+	exitOnSuccess = true,
 	log = console.error,
+	onSuccess,
 }: RunAlternateBufferActionOptions): Promise<void> {
 	try {
-		await action();
-		exit();
+		const result = await action();
+		onSuccess?.(result);
+		if (exitOnSuccess) {
+			exit();
+		}
 	} catch (error) {
 		reportAlternateBufferFailure({ context, error, exit, log });
 	}
@@ -98,32 +123,75 @@ export function useAlternateBufferExitKeys(options: {
 	});
 }
 
+export function useAlternateBufferCompletionKeys(options: {
+	enabled?: boolean;
+	exit?: () => void;
+} = {}): void {
+	const runtime = useRuntime();
+	const exit = options.exit ?? (() => runtime.exit());
+	const enabled = options.enabled ?? false;
+
+	useKeyboard((key: AlternateBufferKeyEvent) => {
+		if (!enabled) {
+			return;
+		}
+
+		if (isAlternateBufferCompletionKey(key) || isAlternateBufferExitKey(key)) {
+			exit();
+		}
+	});
+}
+
+function isAlternateBufferCompletionPayload(
+	value: unknown,
+): value is AlternateBufferCompletionPayload {
+	if (!value || typeof value !== "object" || Array.isArray(value)) {
+		return false;
+	}
+
+	const candidate = value as { title?: unknown };
+	return typeof candidate.title === "string" && candidate.title.trim().length > 0;
+}
+
 export function useAlternateBufferLifecycle(
 	context: string,
 	options: {
 		enableExitKeys?: boolean;
 	} = {},
 ): {
+	completion: AlternateBufferCompletionPayload | null;
 	handleCancel: () => void;
 	handleFailure: (error: unknown) => void;
-	handleSubmit: (action: () => Promise<void>) => Promise<void>;
+	handleSubmit: (action: () => Promise<AlternateBufferCompletionPayload | void>) => Promise<void>;
+	status: AlternateBufferLifecycleStatus;
 } {
 	const runtime = useRuntime();
+	const [completion, setCompletion] = useState<AlternateBufferCompletionPayload | null>(null);
+	const [status, setStatus] = useState<AlternateBufferLifecycleStatus>("editing");
 	const exit = useCallback(() => {
 		runtime.exit();
 	}, [runtime]);
 
 	useAlternateBufferExitKeys({
-		enabled: options.enableExitKeys ?? true,
+		enabled: (options.enableExitKeys ?? true) && status !== "completed",
+		exit,
+	});
+
+	useAlternateBufferCompletionKeys({
+		enabled: status === "completed",
 		exit,
 	});
 
 	const handleCancel = useCallback(() => {
+		setCompletion(null);
+		setStatus("editing");
 		exit();
 	}, [exit]);
 
 	const handleFailure = useCallback(
 		(error: unknown) => {
+			setCompletion(null);
+			setStatus("editing");
 			reportAlternateBufferFailure({
 				context,
 				error,
@@ -134,19 +202,37 @@ export function useAlternateBufferLifecycle(
 	);
 
 	const handleSubmit = useCallback(
-		async (action: () => Promise<void>) => {
-			await runAlternateBufferAction({
-				action,
-				context,
-				exit,
-			});
+		async (action: () => Promise<AlternateBufferCompletionPayload | void>) => {
+			setCompletion(null);
+			setStatus("submitting");
+
+			try {
+				const result = await action();
+				if (isAlternateBufferCompletionPayload(result)) {
+					setCompletion(result);
+					setStatus("completed");
+					return;
+				}
+
+				exit();
+			} catch (error) {
+				setCompletion(null);
+				setStatus("editing");
+				reportAlternateBufferFailure({
+					context,
+					error,
+					exit,
+				});
+			}
 		},
 		[context, exit],
 	);
 
 	return {
+		completion,
 		handleCancel,
 		handleFailure,
 		handleSubmit,
+		status,
 	};
 }

package/src/ui/create-flow.tsx

@@ -21,7 +21,8 @@ import {
 } from "./create-flow-model";
 import {
 	FirstPartyCheckboxField,
-	FirstPartyScrollBox,
+	FirstPartyCompletionViewport,
+	FirstPartyFormViewport,
 	FirstPartySelectField,
 	FirstPartyTextField,
 } from "./first-party-form";
@@ -70,7 +71,7 @@ type CreateSelectFieldName = {
 }[keyof CreateFlowValues];
 
 function CreateFlowFields() {
-	const { activeFieldName, values } = useFormContext();
+	const { activeFieldName, isSubmitting, values } = useFormContext();
 	const { height: terminalHeight = 24 } = useTerminalDimensions();
 	const createValues = values as Partial<CreateFlowValues>;
 	const template = createValues.template;
@@ -88,8 +89,14 @@ function CreateFlowFields() {
 	);
 
 	return createElement(
-		FirstPartyScrollBox,
-		{ scrollTop, viewportHeight },
+		FirstPartyFormViewport,
+		{
+			isSubmitting,
+			scrollTop,
+			submittingDescription: "Preparing your wp-typia project files...",
+			submittingTitle: "Creating project...",
+			viewportHeight,
+		},
 		[
 			createElement(FirstPartyTextField, {
 				...getWrappedFieldNeighbors(visibleFields, "project-dir"),
@@ -161,7 +168,10 @@ function CreateFlowFields() {
 }
 
 export function CreateFlow({ cwd, initialValues }: CreateFlowProps) {
-	const { handleCancel, handleSubmit } = useAlternateBufferLifecycle("wp-typia create failed");
+	const { completion, handleCancel, handleSubmit, status } = useAlternateBufferLifecycle(
+		"wp-typia create failed",
+	);
+	const { height: terminalHeight = 24 } = useTerminalDimensions();
 	const defaultPrompt = {
 		close() {},
 		select<T extends string>(_message: string, options: Array<{ value: T }>, defaultValue = 1) {
@@ -173,6 +183,13 @@ export function CreateFlow({ cwd, initialValues }: CreateFlowProps) {
 		},
 	};
 
+	if (status === "completed" && completion) {
+		return createElement(FirstPartyCompletionViewport, {
+			completion,
+			viewportHeight: getCreateViewportHeight(terminalHeight),
+		});
+	}
+
 	return (
 		<Form
 			initialValues={initialValues}
@@ -180,8 +197,9 @@ export function CreateFlow({ cwd, initialValues }: CreateFlowProps) {
 			onSubmit={async (values) =>
 				handleSubmit(async () => {
 					const flags = sanitizeCreateSubmitValues(values);
-					await executeCreateCommand({
+					return executeCreateCommand({
 						cwd,
+						emitOutput: false,
 						flags,
 						interactive: true,
 						projectDir: values["project-dir"],

package/src/ui/first-party-form.tsx

@@ -10,6 +10,7 @@ import {
 
 import { useScopedKeyboard } from "@bunli/runtime/app";
 import {
+	Spinner,
 	type SelectOption,
 	createKeyMatcher,
 	useFormContext,
@@ -23,6 +24,7 @@ import {
 	FIRST_PARTY_SELECT_FIELD_CONTROL_HEIGHT,
 	FIRST_PARTY_SELECT_FIELD_LABEL_GAP,
 } from "./first-party-form-model";
+import type { AlternateBufferCompletionPayload } from "./alternate-buffer-lifecycle";
 
 const checkboxKeymap = createKeyMatcher({
 	toggle: ["space", "enter"],
@@ -96,6 +98,30 @@ function isCheckboxToggleKey(key: Parameters<typeof checkboxKeymap.match>[1]) {
 	);
 }
 
+function isCompletionLineDownKey(key: Parameters<typeof checkboxKeymap.match>[1]) {
+	return key.name === "down" || key.sequence === "\x1b[B";
+}
+
+function isCompletionLineUpKey(key: Parameters<typeof checkboxKeymap.match>[1]) {
+	return key.name === "up" || key.sequence === "\x1b[A";
+}
+
+function isCompletionPageDownKey(key: Parameters<typeof checkboxKeymap.match>[1]) {
+	return key.name === "pagedown" || key.sequence === "\x1b[6~" || key.sequence === " ";
+}
+
+function isCompletionPageUpKey(key: Parameters<typeof checkboxKeymap.match>[1]) {
+	return key.name === "pageup" || key.sequence === "\x1b[5~";
+}
+
+function isCompletionHomeKey(key: Parameters<typeof checkboxKeymap.match>[1]) {
+	return key.name === "home" || key.sequence === "\x1b[H" || key.sequence === "\x1bOH";
+}
+
+function isCompletionEndKey(key: Parameters<typeof checkboxKeymap.match>[1]) {
+	return key.name === "end" || key.sequence === "\x1b[F" || key.sequence === "\x1bOF";
+}
+
 function useFirstPartyFieldNavigation(options: {
 	focused: boolean;
 	keyboardScopeId: string;
@@ -458,3 +484,237 @@ export function FirstPartyScrollBox({
 		),
 	);
 }
+
+export function FirstPartySubmittingSurface({
+	description = "Please wait while wp-typia finishes this command.",
+	title = "Submitting...",
+	viewportHeight,
+}: {
+	description?: string;
+	title?: string;
+	viewportHeight: number;
+}) {
+	const { tokens } = useTuiTheme();
+
+	return createElement(
+		"box",
+		{
+			border: true,
+			height: viewportHeight,
+			width: "100%",
+			"data-form-surface": "submitting",
+			style: {
+				alignItems: "center",
+				borderColor: tokens.borderMuted,
+				flexDirection: "column",
+				gap: 1,
+				justifyContent: "center",
+			},
+		},
+		createElement(Spinner, {
+			title,
+			variant: "dot",
+		}),
+		createElement("text", {
+			content: description,
+			fg: tokens.textMuted,
+		}),
+	);
+}
+
+export function FirstPartyFormViewport({
+	children,
+	isSubmitting = false,
+	scrollTop,
+	submittingDescription,
+	submittingTitle,
+	viewportHeight,
+}: {
+	children?: ReactNode;
+	isSubmitting?: boolean;
+	scrollTop: number;
+	submittingDescription?: string;
+	submittingTitle?: string;
+	viewportHeight: number;
+}) {
+	if (isSubmitting) {
+		return createElement(FirstPartySubmittingSurface, {
+			description: submittingDescription,
+			title: submittingTitle,
+			viewportHeight,
+		});
+	}
+
+	return createElement(FirstPartyScrollBox, {
+		scrollTop,
+		viewportHeight,
+		children,
+	});
+}
+
+export function FirstPartyCompletionViewport({
+	completion,
+	viewportHeight,
+}: {
+	completion: AlternateBufferCompletionPayload;
+	viewportHeight: number;
+}) {
+	const { tokens } = useTuiTheme();
+	const reactScopeId = useId();
+	const keyboardScopeId = `first-party-completion:${reactScopeId}`;
+	const bodyHeight = Math.max(4, viewportHeight - 3);
+	const bodyRef = useRef<{ scrollTop: number } | null>(null);
+
+	const setCompletionScrollTop = useCallback((nextScrollTop: number) => {
+		if (!bodyRef.current) {
+			return false;
+		}
+
+		bodyRef.current.scrollTop = Math.max(0, nextScrollTop);
+		return true;
+	}, []);
+
+	const adjustCompletionScrollTop = useCallback(
+		(delta: number) => {
+			if (!bodyRef.current) {
+				return false;
+			}
+
+			bodyRef.current.scrollTop = Math.max(0, bodyRef.current.scrollTop + delta);
+			return true;
+		},
+		[],
+	);
+
+	useScopedKeyboard(
+		keyboardScopeId,
+		(key) => {
+			if (isCompletionLineDownKey(key)) {
+				return adjustCompletionScrollTop(1);
+			}
+			if (isCompletionLineUpKey(key)) {
+				return adjustCompletionScrollTop(-1);
+			}
+			if (isCompletionPageDownKey(key)) {
+				return adjustCompletionScrollTop(Math.max(1, bodyHeight - 1));
+			}
+			if (isCompletionPageUpKey(key)) {
+				return adjustCompletionScrollTop(-Math.max(1, bodyHeight - 1));
+			}
+			if (isCompletionHomeKey(key)) {
+				return setCompletionScrollTop(0);
+			}
+			if (isCompletionEndKey(key)) {
+				return setCompletionScrollTop(Number.MAX_SAFE_INTEGER);
+			}
+
+			return false;
+		},
+		{ active: true },
+	);
+
+	return createElement(
+		"box",
+		{
+			border: true,
+			height: viewportHeight,
+			width: "100%",
+			"data-form-surface": "completed",
+			style: {
+				borderColor: tokens.borderMuted,
+				flexDirection: "column",
+			},
+		},
+		createElement(
+			"scrollbox",
+			{
+				ref: bodyRef,
+				height: bodyHeight,
+				scrollY: true,
+				scrollbarOptions: {
+					visible: true,
+					trackOptions: {
+						backgroundColor: tokens.backgroundMuted,
+						foregroundColor: tokens.borderMuted,
+					},
+				},
+				viewportOptions: { width: "100%" },
+				contentOptions: { width: "100%" },
+			},
+			createElement(
+				"box",
+				{
+					width: "100%",
+					style: {
+						flexDirection: "column",
+						gap: 1,
+					},
+				},
+				createElement("text", {
+					content: completion.title,
+					fg: tokens.accent,
+				}),
+				...(completion.preambleLines ?? []).map((line, index) =>
+					createElement("text", {
+						content: line,
+						fg: tokens.textMuted,
+						key: `preamble:${index}`,
+					}),
+				),
+				...(completion.warningLines ?? []).map((line, index) =>
+					createElement("text", {
+						content: `⚠️ ${line}`,
+						fg: tokens.textWarning,
+						key: `warning:${index}`,
+					}),
+				),
+				...(completion.summaryLines ?? []).map((line, index) =>
+					createElement("text", {
+						content: line,
+						fg: tokens.textPrimary,
+						key: `summary:${index}`,
+					}),
+				),
+				(completion.nextSteps?.length ?? 0) > 0
+					? createElement("text", {
+							content: "Next steps:",
+							fg: tokens.textPrimary,
+							key: "next-steps:title",
+						})
+					: null,
+				...(completion.nextSteps ?? []).map((line, index) =>
+					createElement("text", {
+						content: `  ${line}`,
+						fg: tokens.textPrimary,
+						key: `next-step:${index}`,
+					}),
+				),
+				(completion.optionalLines?.length ?? 0) > 0
+					? createElement("text", {
+							content: completion.optionalTitle ?? "Optional:",
+							fg: tokens.textPrimary,
+							key: "optional:title",
+						})
+					: null,
+				...(completion.optionalLines ?? []).map((line, index) =>
+					createElement("text", {
+						content: `  ${line}`,
+						fg: tokens.textMuted,
+						key: `optional:${index}`,
+					}),
+				),
+				completion.optionalNote
+					? createElement("text", {
+							content: `Note: ${completion.optionalNote}`,
+							fg: tokens.textMuted,
+							key: "optional:note",
+						})
+					: null,
+			),
+		),
+		createElement("text", {
+			content: "PgUp/PgDn | ↑/↓ | Home/End | Enter: close | q: exit | Ctrl+C: quit",
+			fg: tokens.textMuted,
+		}),
+	);
+}

package/src/ui/migrate-flow.tsx

@@ -19,7 +19,8 @@ import {
 } from "./migrate-flow-model";
 import {
 	FirstPartyCheckboxField,
-	FirstPartyScrollBox,
+	FirstPartyCompletionViewport,
+	FirstPartyFormViewport,
 	FirstPartySelectField,
 	FirstPartyTextField,
 } from "./first-party-form";
@@ -76,7 +77,7 @@ type MigrateCheckboxFieldName = {
 }[keyof MigrateFlowValues];
 
 function MigrateFlowFields() {
-	const { activeFieldName, values } = useFormContext();
+	const { activeFieldName, isSubmitting, values } = useFormContext();
 	const { height: terminalHeight = 24 } = useTerminalDimensions();
 	const migrateValues = values as Partial<MigrateFlowValues>;
 	const command = migrateValues.command ?? "plan";
@@ -98,8 +99,14 @@ function MigrateFlowFields() {
 	);
 
 	return createElement(
-		FirstPartyScrollBox,
-		{ scrollTop, viewportHeight },
+		FirstPartyFormViewport,
+		{
+			isSubmitting,
+			scrollTop,
+			submittingDescription: "Running the selected migration workflow...",
+			submittingTitle: "Running migration...",
+			viewportHeight,
+		},
 		[
 			createElement(FirstPartySelectField, {
 				...getWrappedFieldNeighbors(orderedVisibleFields, "command"),
@@ -180,7 +187,17 @@ function MigrateFlowFields() {
 }
 
 export function MigrateFlow({ cwd, initialValues }: MigrateFlowProps) {
-	const { handleCancel, handleSubmit } = useAlternateBufferLifecycle("wp-typia migrate failed");
+	const { completion, handleCancel, handleSubmit, status } = useAlternateBufferLifecycle(
+		"wp-typia migrate failed",
+	);
+	const { height: terminalHeight = 24 } = useTerminalDimensions();
+
+	if (status === "completed" && completion) {
+		return createElement(FirstPartyCompletionViewport, {
+			completion,
+			viewportHeight: getMigrateViewportHeight(terminalHeight),
+		});
+	}
 
 	return (
 		<Form
@@ -189,10 +206,11 @@ export function MigrateFlow({ cwd, initialValues }: MigrateFlowProps) {
 			onSubmit={async (values) =>
 				handleSubmit(async () => {
 					const flags = sanitizeMigrateSubmitValues(values);
-					await executeMigrateCommand({
+					return executeMigrateCommand({
 						command: values.command,
 						cwd,
 						flags,
+						renderLine: () => undefined,
 					});
 				})
 			}