recipe / 03

Specimen

Preview the live recipe, then copy HTML or Install. CSS is composition-only: copy the listed component stylesheets.

Preview

live-run / release noteswaiting / answer required

Plan paused: the agent found two valid release channels and will not choose one silently.

needs your input

Which release channel should the agent target?

Release channel

Without JavaScript, the form posts the selected value to the host. The host validates the answer before resuming work.

Code

question-resume.html
<form class="au-ask-user-question" method="post" data-au-state="waiting">
  <p class="au-ask-user-question__eyebrow">needs your input</p>
  <h2 class="au-ask-user-question__title">Which release channel should the agent target?</h2>
  <fieldset class="au-ask-user-question__options">
    <legend class="sr-only">Release channel</legend>
    <label class="au-ask-user-question__option"><input type="radio" name="channel" value="internal" checked> Internal preview</label>
    <label class="au-ask-user-question__option"><input type="radio" name="channel" value="public"> Public release</label>
  </fieldset>
  <div class="au-ask-user-question__footer">
    <span class="au-ask-user-question__hint">The answer resumes the plan.</span>
    <button class="au-btn au-btn--primary" type="submit">Continue</button>
  </div>
</form>
Composition only — copy component CSS from ask-user-question and button. Do not treat recipes.css as product CSS.

Install

head.html
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/button/button.css">
<link rel="stylesheet" href="components/ask-user-question/ask-user-question.css">
<link rel="stylesheet" href="host-chrome.css">

Static state matrix

native controls stay visible

The question remains legible in every state. The host owns validation, persistence, and the decision to resume the plan.

waiting answer required

needs your input

Choose a release channel.

The plan is paused until you answer.

answered plan resumed

answered

Internal preview selected.

The host accepted the answer and resumed the plan.

error answer needs review

answer needs review

That channel is no longer available.

Keep the answer visible and ask the host for a valid replacement.

cancelled plan remains paused

cancelled

The user stopped the plan.

No answer is treated as approval to continue.

Contract and safety

Install
tokens.css, ask-user-question.css, and button.css for the submit action.
States
waiting, answered, error, and cancelled belong to the question flow.
No JavaScript
The native form posts the selected value. A refresh still shows the question and its labels.
Accessibility
Use a fieldset and legend, label every option, keep the submit action concrete, and announce the resumed state.
Security
Answers are untrusted input. Validate allowed values, authorization, and stale plan versions on the server.
Host boundary
The host decides whether an answer is valid and what work may resume. The component only renders the decision point.

Compose with an approval gate

A judgement pause is approval-gate + this question form — not a separate checkpoint primitive. See compose a judgement pause on the tool approval recipe.

Source map

Use the question after the agent has enough context to ask one bounded question. Avoid turning missing information into a silent guess.