mvp / vertical slice

Pattern / overview

A run with a decision in it.

The smallest credible agentic surface: a human request, visible thinking, a successful read, a bounded write proposal, and a question that resumes the work.

MVP recipeJ-F1J-F4no external assets
live-run / release noteswaiting for approval
Human

Prepare release notes from the latest changes, but show me the file before you write it.

Agent

I will inspect the repository first, then prepare a bounded file proposal.

Agent is thinking
Tool call
readsuccess · 0.4s
{"path":"CHANGELOG.md"}

3 headings found. No file changed.

Agent

The draft is ready. I need approval for the exact write action, then one preference to finish the release notes.

Read the repository
Prepare release notes
Enter to send · Shift + Enter for a new line

The composer remains usable without JavaScript.

What this proves

Honest state
Thinking, tool success, waiting, approval, and question states stay local to the object they describe.
Bounded action
The proposed file and action are visible before approval. The host still owns execution.
Resumable flow
The question is a native form. A server-rendered response can continue the same conversation.
No-JS baseline
Messages, tool output, approval controls, and the question remain readable without the runtime.

Source map

This overview composes `chat-message`, `thinking-indicator`, `thinking-steps`, `tool-call`, `approval-gate`, `ask-user-question`, and `chat-input`. Each surface keeps its own CSS contract; the focused recipes isolate the state families.

Choose a focused recipe

Chat streaming · Tool approval · Question resume. Each page keeps the no-JS path visible and includes a state matrix.

Compose before inventing

A judgement pause is approval-gate + ask-user-question. Message copy / regenerate footers are host button slots on chat-message, not new inventory.