Render Studio Code interview options as small buttons

[sejas]

Related issues

• Fixes STU-1834

How AI was used in this PR

It created the PR and tests.

Proposed Changes

When the agent asks a multiple-choice question in the Studio Code tab, the answer options used to render as blue text links, so users didn't recognize them as choices waiting for a response — they read like hyperlinks rather than something to click. The option a user picked also left no trace in the conversation, so scrolling back you couldn't tell what you'd chosen.

This restyles the options as small buttons — surface background, border, padding, rounded corners, hover/focus feedback, no underline. The option you pick stays marked in the conversation history: an accent border identifies your choice, dimmed once the question is answered so it clearly reads as a finalized, non-clickable selection. The selection persists for the rest of the session and after reopening the app. Styling uses Studio's dark-aware color tokens, so it works in both light and dark mode.

Testing Instructions

• Open the Studio Code tab and start an agent flow that asks the user a question with options (the AskUserQuestion tool).
• Confirm the options render as small buttons (not blue links), respond to hover/focus, and that the selected option stays highlighted after answering.
• Verify in both light and dark color schemes (macOS: System Settings → Appearance).

Before	After Light	After Dark

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[nightnei]

The idea is great.

I encountered only two things to clarify/fix:

1. Confirm ...., and that the selected option stays highlighted after answering. - after answering, I don't see the highlighted selected option. I looked into html and I don't see kinda "selected" classname. I don't think that it's critical thing, but woydl be good to have teh highlight, since it helps to read the history of selection inside the chat:
   
2. Also, I cought a case when it's selected once. It seems it's highlighted as selected only when it's temporary state - when it's necessary to select options from a few list at the same time. But the styles are broken for both Dark and Light theme. Example to reproduce it:
   

[katinthehatsite]

I saw similar issues that @nightnei pointed during his review:

• sometimes the option became not visible; it had some color when you hover over:

• once the option is selected, it would be nice if it stayed highlighted because now you don't know what option to selected after you selected it:

[wpmobilebot]

📊 Performance Test Results

Comparing e00df6c vs trunk

app-size

Metric	trunk	e00df6c	Diff	Change
App Size (Mac)	2357.84 MB	2357.84 MB	+0.00 MB	⚪ 0.0%

site-editor

Metric	trunk	e00df6c	Diff	Change
load	764 ms	1079 ms	+315 ms	🔴 41.2%

site-startup

Metric	trunk	e00df6c	Diff	Change
siteCreation	6539 ms	6513 ms	26 ms	⚪ 0.0%
siteStartup	6990 ms	7027 ms	+37 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

[sejas]

@nightnei , @katinthehatsite thanks for the feedback! I addressed both issues:
Now the selected state in multi-questions is readable and the answer is persisted so the user can see what they chose in the past.

multi-answer-with-selected-state.mp4

[sejas]

I merged the PR, but let me know if you have any other feedback.