fix: Claude question previews render monospace and the chosen one reaches Claude

apps/server/src/orchestration-v2/Adapters/ClaudeAdapterV2.test.ts

@@ -421,23 +421,9 @@ describe("ClaudeAdapterV2 runtime query policy", () => {
 
   it("projects AskUserQuestion input with question text as the answer key", () => {
     const preview = "\n  **Proposed change**\n\n```ts\n\tconst enabled = true;\n```\n  ";
-    assert.deepEqual(
-      ClaudeAdapterV2.claudeUserInputQuestions({
-        questions: [
-          {
-            header: "Approach",
-            question: "Which approach?",
-            options: [
-              { label: "Simple", description: "Use fewer moving parts", preview },
-              { label: "Safe", description: "Keep the current setup" },
-            ],
-            multiSelect: true,
-          },
-        ],
-      }),
-      [
+    const questions = ClaudeAdapterV2.claudeUserInputQuestions({
+      questions: [
         {
-          id: "Which approach?",
           header: "Approach",
           question: "Which approach?",
           options: [
@@ -447,7 +433,19 @@ describe("ClaudeAdapterV2 runtime query policy", () => {
           multiSelect: true,
         },
       ],
-    );
+    });
+    assert.deepEqual(questions, [
+      {
+        id: "Which approach?",
+        header: "Approach",
+        question: "Which approach?",
+        options: [
+          { label: "Simple", description: "Use fewer moving parts", preview },
+          { label: "Safe", description: "Keep the current setup" },
+        ],
+        multiSelect: true,
+      },
+    ]);
     const sdkAnswers: NonNullable<AskUserQuestionInput["answers"]> =
       ClaudeAdapterV2.claudeSdkUserInputAnswers({
         "Which approach?": ["Simple", "Safe"],
@@ -457,6 +455,16 @@ describe("ClaudeAdapterV2 runtime query policy", () => {
       "Which approach?": "Simple, Safe",
       "Deploy now?": "Yes",
     });
+    assert.deepEqual(
+      ClaudeAdapterV2.claudeSdkUserInputAnnotations(questions, { "Which approach?": "Simple" }),
+      { "Which approach?": { preview } },
+    );
+    for (const answer of ["Safe", "Something else entirely"]) {
+      assert.deepEqual(
+        ClaudeAdapterV2.claudeSdkUserInputAnnotations(questions, { "Which approach?": answer }),
+        {},
+      );
+    }
     assert.isTrue(
       ClaudeAdapterV2.ClaudeProviderCapabilitiesV2.planning.supportsStructuredQuestions,
     );

apps/server/src/orchestration-v2/Adapters/ClaudeAdapterV2.ts

@@ -5007,6 +5007,21 @@ export function claudeSdkUserInputAnswers(
   );
 }
 
+// Claude Code echoes the chosen option's preview back to the model as "selected preview:".
+export function claudeSdkUserInputAnnotations(
+  questions: ReadonlyArray<OrchestrationV2UserInputQuestion>,
+  answers: NonNullable<AskUserQuestionInput["answers"]>,
+): NonNullable<AskUserQuestionInput["annotations"]> {
+  return Object.fromEntries(
+    questions.flatMap((question) => {
+      const preview = question.options.find(
+        (option) => option.label === answers[question.id],
+      )?.preview;
+      return preview === undefined ? [] : [[question.id, { preview }]];
+    }),
+  );
+}
+
 function claudeTodoSteps(input: unknown): ReadonlyArray<OrchestrationV2PlanStep> {
   const value =
     typeof input === "object" && input !== null && Reflect.get(input, "type") === "record"
@@ -11493,6 +11508,8 @@ export const makeClaudeAdapterV2 = Effect.fn("makeClaudeAdapterV2")(function* (
               ),
             );
             if (!(yield* Deferred.isDone(answers))) yield* cancelWithdrawnRequest(artifacts);
+            const sdkAnswers = claudeSdkUserInputAnswers(resolvedAnswers);
+            const annotations = claudeSdkUserInputAnnotations(questions, sdkAnswers);
             return callbackOptions.signal.aborted
               ? ({
                   behavior: "deny",
@@ -11502,7 +11519,8 @@ export const makeClaudeAdapterV2 = Effect.fn("makeClaudeAdapterV2")(function* (
                   behavior: "allow",
                   updatedInput: {
                     questions: toolInput.questions,
-                    answers: claudeSdkUserInputAnswers(resolvedAnswers),
+                    answers: sdkAnswers,
+                    ...(Object.keys(annotations).length > 0 ? { annotations } : {}),
                   },
                   toolUseID: callbackOptions.toolUseID,
                 } satisfies PermissionResult);

apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx

@@ -325,13 +325,15 @@ const ComposerPendingUserInputCard = memo(function ComposerPendingUserInputCard(
                       {content}
                     </button>
                     {option.preview ? (
-                      <ChatMarkdown
-                        text={option.preview}
-                        cwd={cwd}
-                        threadRef={threadRef}
-                        lineBreaks
-                        className="ps-9 pe-2 pb-1.5 text-xs text-foreground/70 sm:ps-8"
-                      />
+                      <div className="ps-9 pe-2 pb-1.5 sm:ps-8">
+                        {/* Claude writes previews for a monospace box, so paragraphs keep their spaces and newlines to hold ASCII mockups aligned. */}
+                        <ChatMarkdown
+                          text={option.preview}
+                          cwd={cwd}
+                          threadRef={threadRef}
+                          className="rounded-lg border border-border/70 bg-secondary px-3 py-2 font-mono text-xs leading-snug text-foreground/80 dark:border-transparent dark:bg-input/32 [&_p]:whitespace-pre-wrap"
+                        />
+                      </div>
                     ) : null}
                   </div>
                 );