wp-typia 0.16.2 → 0.16.5

package/package.json

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

package/src/commands/add.ts

@@ -5,7 +5,7 @@ import { z } from "zod";
 
 import { getAddBlockDefaults } from "../config";
 import { resolveBundledModuleHref } from "../render-loader";
-import { executeAddCommand, getAddWorkspaceBlockOptions } from "../runtime-bridge";
+import { executeAddCommand } from "../runtime-bridge";
 import type { WpTypiaRenderArgs } from "./render-types";
 import { LazyFlow } from "../ui/lazy-flow";
 
@@ -94,7 +94,6 @@ export const addCommand = defineCommand({
 								template:
 									(args.flags.template as string | undefined) ?? config.template,
 							},
-							workspaceBlockOptions: getAddWorkspaceBlockOptions(args.cwd),
 						},
 					});
 				},

package/src/commands/doctor.ts

@@ -1,6 +1,5 @@
 import { defineCommand } from "@bunli/core";
-
-import { getDoctorChecks, runDoctor } from "@wp-typia/project-tools";
+import { executeDoctorCommand } from "../runtime-bridge";
 
 export const doctorCommand = defineCommand({
 	description: "Run repository and project diagnostics.",
@@ -10,6 +9,7 @@ export const doctorCommand = defineCommand({
 			args.agent ||
 			Boolean(args.context?.store?.isAIAgent);
 		if (prefersStructuredOutput) {
+			const { getDoctorChecks } = await import("@wp-typia/project-tools/cli-doctor");
 			const checks = await getDoctorChecks(args.cwd);
 			args.output({ checks });
 			if (checks.some((check) => check.status === "fail")) {
@@ -17,7 +17,7 @@ export const doctorCommand = defineCommand({
 			}
 			return;
 		}
-		await runDoctor(args.cwd);
+		await executeDoctorCommand(args.cwd);
 	},
 	name: "doctor",
 });

package/src/runtime-bridge.ts

@@ -3,43 +3,35 @@ import fs from "node:fs";
 import path from "node:path";
 
 import {
-	createReadlinePrompt,
-	formatRunScript,
-	formatAddHelpText,
-	formatMigrationHelpText,
 	formatTemplateDetails,
 	formatTemplateFeatures,
 	formatTemplateSummary,
-	getWorkspaceBlockSelectOptions,
 	getTemplateById,
-	getTemplateSelectOptions,
 	listTemplates,
-	parseMigrationArgs,
-	tryResolveWorkspaceProject,
-	runAddBindingSourceCommand,
-	runAddBlockCommand,
-	runAddHookedBlockCommand,
-	runAddPatternCommand,
-	runAddVariationCommand,
-	runDoctor,
-	runMigrationCommand,
-	runScaffoldFlow,
-} from "@wp-typia/project-tools";
-import type { ReadlinePrompt } from "@wp-typia/project-tools";
+} from "@wp-typia/project-tools/cli-templates";
+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 = {
@@ -72,12 +64,164 @@ type SyncProjectContext = {
 	scripts: Partial<Record<"sync" | "sync-rest" | "sync-types", string>>;
 };
 
+const loadCliAddRuntime = () => import("@wp-typia/project-tools/cli-add");
+const loadCliDoctorRuntime = () => import("@wp-typia/project-tools/cli-doctor");
+const loadCliPromptRuntime = () => import("@wp-typia/project-tools/cli-prompt");
+const loadCliScaffoldRuntime = () => import("@wp-typia/project-tools/cli-scaffold");
+const loadCliTemplatesRuntime = () => import("@wp-typia/project-tools/cli-templates");
+const loadMigrationsRuntime = () => import("@wp-typia/project-tools/migrations");
+
 function printBlock(lines: string[], printLine: PrintLine): void {
 	for (const line of lines) {
 		printLine(line);
 	}
 }
 
+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,
@@ -268,10 +412,22 @@ 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 },
+		{ getTemplateSelectOptions },
+	] = await Promise.all([
+		loadCliPromptRuntime(),
+		loadCliScaffoldRuntime(),
+		loadCliTemplatesRuntime(),
+	]);
 	const shouldPrompt =
 		interactive ?? (!Boolean(flags.yes) && Boolean(process.stdin.isTTY) && Boolean(process.stdout.isTTY));
 	const activePrompt = shouldPrompt ? (prompt ?? createReadlinePrompt()) : undefined;
@@ -331,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();
@@ -359,15 +504,20 @@ 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) {
-		console.log(formatAddHelpText());
+		const { formatAddHelpText } = await loadCliAddRuntime();
+		printLine(formatAddHelpText());
 		return;
 	}
 
+	const addRuntime = await loadCliAddRuntime();
+
 	if (kind === "variation") {
 		if (!name) {
 			throw new Error(
@@ -380,13 +530,23 @@ export async function executeAddCommand({
 			throw new Error("`wp-typia add variation` requires --block <block-slug>.");
 		}
 
-		const result = await runAddVariationCommand({
+		const result = await addRuntime.runAddVariationCommand({
 			blockName: blockSlug,
 			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") {
@@ -396,12 +556,21 @@ export async function executeAddCommand({
 			);
 		}
 
-		const result = await runAddPatternCommand({
+		const result = await addRuntime.runAddPatternCommand({
 			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") {
@@ -411,12 +580,21 @@ export async function executeAddCommand({
 			);
 		}
 
-		const result = await runAddBindingSourceCommand({
+		const result = await addRuntime.runAddBindingSourceCommand({
 			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") {
@@ -438,16 +616,25 @@ export async function executeAddCommand({
 			);
 		}
 
-		const result = await runAddHookedBlockCommand({
+		const result = await addRuntime.runAddHookedBlockCommand({
 			anchorBlockName,
 			blockName: name,
 			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") {
@@ -468,7 +655,7 @@ export async function executeAddCommand({
 		);
 	}
 
-	const result = await runAddBlockCommand({
+	const result = await addRuntime.runAddBlockCommand({
 		blockName: name,
 		cwd,
 		dataStorageMode: readOptionalStringFlag(flags, "data-storage"),
@@ -480,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(
@@ -524,9 +720,20 @@ export async function executeTemplatesCommand(
 }
 
 export async function executeDoctorCommand(cwd: string): Promise<void> {
+	const { runDoctor } = await loadCliDoctorRuntime();
 	await runDoctor(cwd);
 }
 
+export async function loadAddWorkspaceBlockOptions(cwd: string) {
+	const workspace = tryResolveWorkspaceProject(cwd);
+	if (!workspace) {
+		return [];
+	}
+
+	const { getWorkspaceBlockSelectOptions } = await loadCliAddRuntime();
+	return getWorkspaceBlockSelectOptions(workspace.projectDir);
+}
+
 export async function executeSyncCommand({
 	check = false,
 	cwd,
@@ -552,7 +759,9 @@ export async function executeMigrateCommand({
 	flags,
 	prompt,
 	renderLine,
-}: MigrateExecutionInput): Promise<void> {
+}: MigrateExecutionInput): Promise<AlternateBufferCompletionPayload | void> {
+	const { formatMigrationHelpText, parseMigrationArgs, runMigrationCommand } =
+		await loadMigrationsRuntime();
 	if (!command) {
 		console.log(formatMigrationHelpText());
 		return;
@@ -581,19 +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,
 	});
-}
-
-export function getAddWorkspaceBlockOptions(cwd: string) {
-	const workspace = tryResolveWorkspaceProject(cwd);
-	if (!workspace) {
-		return [];
+	if (renderLine) {
+		return result && typeof result === "object" && "cancelled" in result && result.cancelled === true
+				? undefined
+				: buildMigrationCompletionPayload({
+					command: parsed.command ?? "plan",
+					lines: lines ?? [],
+				});
 	}
 
-	return getWorkspaceBlockSelectOptions(workspace.projectDir);
+	if (result && typeof result === "object" && "cancelled" in result && result.cancelled === true) {
+		return;
+	}
 }
 
-export { formatAddHelpText, formatMigrationHelpText, listTemplates };
+export { listTemplates };

package/src/ui/add-flow.tsx

@@ -1,4 +1,4 @@
-import { createElement, useMemo } from "react";
+import { createElement, useEffect, useMemo, useState } from "react";
 
 import {
 	Form,
@@ -6,9 +6,9 @@ import {
 	useFormContext,
 	useTerminalDimensions,
 } from "@bunli/tui";
-import { HOOKED_BLOCK_POSITION_IDS } from "@wp-typia/project-tools";
+import { HOOKED_BLOCK_POSITION_IDS } from "@wp-typia/project-tools/hooked-blocks";
 
-import { executeAddCommand } from "../runtime-bridge";
+import { executeAddCommand, loadAddWorkspaceBlockOptions } from "../runtime-bridge";
 import { useAlternateBufferLifecycle } from "./alternate-buffer-lifecycle";
 import {
 	type AddFlowValues,
@@ -20,7 +20,8 @@ import {
 	sanitizeAddSubmitValues,
 } from "./add-flow-model";
 import {
-	FirstPartyScrollBox,
+	FirstPartyCompletionViewport,
+	FirstPartyFormViewport,
 	FirstPartySelectField,
 	FirstPartyTextField,
 } from "./first-party-form";
@@ -104,11 +105,12 @@ const HOOKED_BLOCK_POSITION_DESCRIPTIONS: Record<
 type AddFlowProps = {
 	cwd: string;
 	initialValues: Partial<AddFlowValues>;
-	workspaceBlockOptions: Array<{
-		description: string;
-		name: string;
-		value: string;
-	}>;
+};
+
+type WorkspaceBlockOption = {
+	description: string;
+	name: string;
+	value: string;
 };
 
 type AddSelectFieldName = {
@@ -134,9 +136,9 @@ function getAddNameLabel(kind?: string): string {
 function AddFlowFields({
 	workspaceBlockOptions,
 }: {
-	workspaceBlockOptions: AddFlowProps["workspaceBlockOptions"];
+	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";
@@ -159,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"),
@@ -255,8 +263,41 @@ function AddFlowFields({
 	);
 }
 
-export function AddFlow({ cwd, initialValues, workspaceBlockOptions }: AddFlowProps) {
-	const { handleCancel, handleSubmit } = useAlternateBufferLifecycle("wp-typia add failed");
+export function AddFlow({ cwd, initialValues }: AddFlowProps) {
+	const { completion, handleCancel, handleFailure, handleSubmit, status } =
+		useAlternateBufferLifecycle(
+		"wp-typia add failed",
+		);
+	const { height: terminalHeight = 24 } = useTerminalDimensions();
+	const [workspaceBlockOptions, setWorkspaceBlockOptions] = useState<WorkspaceBlockOption[]>([]);
+
+	useEffect(() => {
+		let disposed = false;
+		setWorkspaceBlockOptions([]);
+
+		void loadAddWorkspaceBlockOptions(cwd)
+			.then((options) => {
+				if (!disposed) {
+					setWorkspaceBlockOptions(options);
+				}
+			})
+			.catch((error) => {
+				if (!disposed) {
+					handleFailure(error);
+				}
+			});
+
+		return () => {
+			disposed = true;
+		};
+	}, [cwd, handleFailure]);
+
+	if (status === "completed" && completion) {
+		return createElement(FirstPartyCompletionViewport, {
+			completion,
+			viewportHeight: getAddViewportHeight(terminalHeight),
+		});
+	}
 
 	return (
 		<Form
@@ -265,8 +306,9 @@ export function AddFlow({ cwd, initialValues, workspaceBlockOptions }: AddFlowPr
 			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,
 					});
 				})
 			}