feat(ui): support custom answers in preview questions

src/ask-tool.ts

@@ -177,9 +177,7 @@ function formatNonInteractiveMessage(
 		for (const option of question.options) {
 			lines.push(`   - ${option.label} [${option.value}]`);
 		}
-		if (question.type !== "preview") {
-			lines.push("   - Type your own [custom]");
-		}
+		lines.push("   - Type your own [custom]");
 	}
 
 	lines.push(

src/state/selectors.ts

@@ -32,13 +32,11 @@ export function getRenderableOptions(
 	const options: AskDisplayOption[] = question.options.map((option) => ({
 		...option,
 	}));
-	if (question.type !== "preview") {
-		options.push({
-			value: OTHER_OPTION_VALUE,
-			label: OTHER_OPTION_LABEL,
-			isCustomOption: true,
-		});
-	}
+	options.push({
+		value: OTHER_OPTION_VALUE,
+		label: OTHER_OPTION_LABEL,
+		isCustomOption: true,
+	});
 	return options;
 }
 

src/ui/render-helpers.ts

@@ -255,7 +255,11 @@ export function renderBox(
 
 export function renderPreviewPaneContent(
 	selectedOption:
-		| { label: string; description?: string; preview?: string }
+		| {
+				label: string;
+				description?: string;
+				preview?: string;
+		  }
 		| undefined,
 	theme: Theme,
 	width: number
@@ -271,6 +275,7 @@ export function renderPreviewPaneContent(
 		content.push({ text: selectedOption.description, color: "muted" });
 	}
 	content.push({ text: "", color: "dim" });
+
 	for (const previewLine of (selectedOption.preview ?? NO_PREVIEW_TEXT).split(
 		"\n"
 	)) {

src/ui/render-question.ts

@@ -124,7 +124,9 @@ function renderPreviewQuestion(context: QuestionRenderContext) {
 	const selectedOption = options[state.activeOptionIndex];
 	const answer = getAnswer(state, question.id);
 
-	if (width >= UI_DIMENSIONS.previewWideMinWidth && options.length > 0) {
+	if (selectedOption?.isCustomOption) {
+		renderPreviewOptionList(state, options, theme, width, answer).forEach(add);
+	} else if (width >= UI_DIMENSIONS.previewWideMinWidth && options.length > 0) {
 		renderWidePreviewLayout(
 			add,
 			state,
@@ -151,7 +153,8 @@ function renderPreviewQuestion(context: QuestionRenderContext) {
 		questionId: question.id,
 		answer,
 		option: selectedOption,
-		withGap: true,
+		selected: true,
+		withGap: !selectedOption?.isCustomOption,
 	});
 }