From f191323dfb346a0546e04af6dfc095542aa71032 Mon Sep 17 00:00:00 2001 From: Gabriel Giordano Date: Thu, 24 Sep 2026 00:12:58 -0300 Subject: [PATCH] Show Claude option previews in the question card --- .../question-prompt-pagination.spec.ts | 2 ++ packages/app/e2e/support/helpers/questions.ts | 6 +++++ .../question-form-card-core.test.ts | 25 +++++++++++++++++++ .../src/components/question-form-card-core.ts | 2 ++ .../app/src/components/question-form-card.tsx | 13 ++++++++++ .../agent/providers/mock-load-test-agent.ts | 8 +++++- 6 files changed, 55 insertions(+), 1 deletion(-) diff --git a/packages/app/e2e/browser/question-prompt-pagination.spec.ts b/packages/app/e2e/browser/question-prompt-pagination.spec.ts index b014b2d1cd..3a3a8ced5c 100644 --- a/packages/app/e2e/browser/question-prompt-pagination.spec.ts +++ b/packages/app/e2e/browser/question-prompt-pagination.spec.ts @@ -7,6 +7,7 @@ import { expectQuestionDismissEnabled, expectQuestionHidden, expectQuestionNavigationEnabled, + expectQuestionOptionPreview, expectQuestionOptionSelected, expectQuestionPrimaryActionDisabled, expectQuestionPrimaryActionEnabled, @@ -61,6 +62,7 @@ test.describe("Question prompt pagination", () => { await expectQuestionOptionSelected(page, "App"); await openQuestion(page, { index: 2, total: TOTAL_QUESTIONS }); + await expectQuestionOptionPreview(page, 'flags.enabled("new-surface")'); await chooseQuestionOption(page, "Behind feature flag"); await expectCurrentQuestion(page, { index: 3, diff --git a/packages/app/e2e/support/helpers/questions.ts b/packages/app/e2e/support/helpers/questions.ts index ebe13aead5..e7d24b6eea 100644 --- a/packages/app/e2e/support/helpers/questions.ts +++ b/packages/app/e2e/support/helpers/questions.ts @@ -43,6 +43,12 @@ export async function expectQuestionOptionSelected(page: Page, option: string): await expect(questionOption(page, option)).toHaveAttribute("aria-checked", "true"); } +export async function expectQuestionOptionPreview(page: Page, preview: string): Promise { + await expect( + page.getByTestId("question-form-card").first().getByTestId("question-form-option-preview"), + ).toContainText(preview); +} + export async function openQuestion( page: Page, input: { index: number; total: number }, diff --git a/packages/app/src/components/question-form-card-core.test.ts b/packages/app/src/components/question-form-card-core.test.ts index 40692d4acf..293bf24ba8 100644 --- a/packages/app/src/components/question-form-card-core.test.ts +++ b/packages/app/src/components/question-form-card-core.test.ts @@ -147,4 +147,29 @@ describe("question form card core", () => { Response: "custom", }); }); + + test("keeps option previews so options can be compared", () => { + const questions = parseQuestionFormQuestions({ + questions: [ + { + question: "Which layout?", + header: "Layout", + options: [ + { + label: "Tabs", + description: "One tab per section", + preview: "\n \n", + }, + { label: "Single page" }, + ], + multiSelect: false, + }, + ], + }); + + expect(questions?.[0]?.options).toEqual([ + { label: "Tabs", description: "One tab per section", preview: "\n \n" }, + { label: "Single page", description: undefined, preview: undefined }, + ]); + }); }); diff --git a/packages/app/src/components/question-form-card-core.ts b/packages/app/src/components/question-form-card-core.ts index 0dea6c706e..78007dba2e 100644 --- a/packages/app/src/components/question-form-card-core.ts +++ b/packages/app/src/components/question-form-card-core.ts @@ -1,6 +1,7 @@ export interface QuestionOption { label: string; description?: string; + preview?: string; } export interface QuestionFormQuestion { @@ -46,6 +47,7 @@ export function parseQuestionFormQuestions(input: unknown): QuestionFormQuestion options.push({ label: o.label, description: typeof o.description === "string" ? o.description : undefined, + preview: readOptionalString(o, "preview"), }); } questions.push({ diff --git a/packages/app/src/components/question-form-card.tsx b/packages/app/src/components/question-form-card.tsx index 5b3b146f4e..c7d52f8601 100644 --- a/packages/app/src/components/question-form-card.tsx +++ b/packages/app/src/components/question-form-card.tsx @@ -10,6 +10,7 @@ import type { AgentPermissionResponse } from "@getpaseo/protocol/agent-types"; import { isWeb } from "@/constants/platform"; import { EditingTextInput as TextInput } from "@/components/ui/text-input"; import type { EditingTextInputHandle } from "@/components/ui/text-input/types"; +import { ScrollableCodeSurface } from "@/components/ui/scrollable-code-surface"; import { areQuestionsAnswered, buildQuestionFormAnswers, @@ -29,6 +30,7 @@ interface QuestionFormCardProps { } const IS_WEB = isWeb; +const OPTION_PREVIEW_MAX_HEIGHT = 240; function getQuestionInputPlaceholder({ question, @@ -133,6 +135,17 @@ function QuestionOptionRow({ {option.description ? ( {option.description} ) : null} + {option.preview ? ( + // Shown for every option at once so they can be compared before picking. + + {option.preview} + + ) : null} diff --git a/packages/server/src/server/agent/providers/mock-load-test-agent.ts b/packages/server/src/server/agent/providers/mock-load-test-agent.ts index 14733e0601..7aaf40d5f1 100644 --- a/packages/server/src/server/agent/providers/mock-load-test-agent.ts +++ b/packages/server/src/server/agent/providers/mock-load-test-agent.ts @@ -232,6 +232,7 @@ type SteeringReplayShape = "claude" | "codex"; interface MockQuestionOption { label: string; description?: string; + preview?: string; } interface MockQuestionPromptQuestion { @@ -271,6 +272,8 @@ function parseSettledAssistantImageMarkdown(prompt: AgentPromptInput): string | return match?.[1] ?? null; } +const ROLLOUT_FLAG_PREVIEW = 'if (flags.enabled("new-surface")) {\n render();\n}'; + function parseMockQuestionPrompt(prompt: AgentPromptInput): MockQuestionPromptRequest | null { const text = promptToText(prompt); if (!/emit\s+(?:a\s+)?synthetic\s+questions?/i.test(text)) { @@ -309,7 +312,10 @@ function parseMockQuestionPrompt(prompt: AgentPromptInput): MockQuestionPromptRe { question: "Which rollout should we use?", header: "rollout", - options: [{ label: "Immediately" }, { label: "Behind feature flag" }], + options: [ + { label: "Immediately" }, + { label: "Behind feature flag", preview: ROLLOUT_FLAG_PREVIEW }, + ], multiSelect: false, }, {