Question card: previews follow the hovered option, draw like Claude Code's, and every ask state in the gallery

Merged
TE
14d ago
+343-34

Leo's ask, his words: "ask user question tool and its various states need looking at allegedly there's some sort of vibe-coded thing that agents can do to have prettier ask question situations...? idk but we could look into that/research that then support it..."

Leo-ask: ask-question-states

What was wrong

The "prettier ask question" thing is Claude Code's AskUserQuestion preview field: each option can carry an ASCII mockup or code sample, and Claude Code shows the preview of the focused option beside the option list ("rendered as markdown in a monospace box", per its tool prompt). cmux NEXT's question card already drew a preview, but:

  • it only followed the keyboard highlight, never the hovered option, so pointing at an option showed another option's mockup;
  • a preview the agent wrapped in a Markdown fence (common) showed the raw ``` lines;
  • the list and preview split the width evenly, so a wide mockup wrapped or scrolled;
  • the gallery had no state for answered, answered remotely, answered by a session, cancelled/skipped, Codex user input, ACP interactive, the Chief's ask or a refused reply, so none of those were ever captured.

The fix

  • The preview shows the hovered option while the pointer is on it, then the highlighted one again (shownPreview).
  • Fence lines are dropped; every space and line break of the mockup is kept (previewText).
  • Four preview layouts as a gallery experiment, question-preview-layout (Compare arms view): split (the default: a narrower list, the preview filling the card's height beside it, wrapping under the list below ~520 px, Claude Code's shape), even (the card before this PR), below, inline. I picked split: it gives the mockup the most width while the list stays readable. The others stay one cmux.experiments key away for dogfood. No setting default changes; nothing is removed.
  • Gallery states for every ask state (agent-pane.question-card): pending single/multi/Other/4 questions/2 questions, with preview, preview hovered, fenced preview, Codex user input, ACP interactive, the Chief, reply refused, answered, answered remotely, answered by a session, cancelled.

Protocol work (sending the chosen preview and notes back as Claude Code's annotations) is the next PR; the research and audit table go to leo-workspace design/ask-question.md.

Test

src/agent-session/acpmux/question/QuestionCardPreview.test.tsx (jsdom): the preview follows the hovered option and returns to the highlighted one; a fenced preview draws without fence lines; the default layout is split.

  • Red at the test-only commit c4955ca06b5bfdf5fb806410c521695a44c8245a (fleet, run-webviews-tests.sh): pending
  • Green at the head (fleet, same file plus test/agent-question-card.test.ts and model.test.ts): pending
  • cmux-ci compile-check --app at the head: pending

Observed / Not run

In progress: results above get filled in from the fleet runs. Captures come from the gallery (Linux Chromium); no native UI changes.

No capture: webview-only change; gallery stills below.

Gallery: agent-pane.question-card

Changelog

Changed: An agent's question with option previews shows the preview of the option under the pointer, beside a narrower option list, without Markdown fence lines.

Agent session: cosmic-gray

🤖 Generated with Claude Code

View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need.

Summary by cubic

The ask-question card now shows the preview of the hovered option (falling back to the highlighted one), draws previews without Markdown fence lines like Claude Code while keeping inline code spans, and seats the preview beside a narrower option list. Pointing at the Other row shows the highlighted option's preview, not the last hovered one.

  • Preview placement is controlled by the question-preview-layout experiment with four arms (split, even, below, inline); split is the new default.
  • The gallery now covers every ask state: answered, answered remotely, answered by a session, cancelled, Codex input, ACP interactive, the Chief, a refused reply, and fenced or hovered previews.
  • Sending the chosen preview and notes back as Claude Code's annotations will follow in a separate PR.