Agent flow pattern — chat, tools, approval, question

Human09:41

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

Agent09:41

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

Agent is thinking

Tool callread

{"path":"CHANGELOG.md"}

3 headings found. No file changed.

Agent09:42

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

Read the repository0.4s

Prepare release notes1.1s

The composer remains usable without JavaScript.

What this proves

Compose: message · thinking · tool · approval · question · input
Shows: Honest state, bounded action, resumable form
Host: Execution stays outside the UI

For agents

agent-flow.contract

# agent-ui / recipe / agent-flow
recipe: agent-flow
purpose: End-to-end composition proving honest state, bounded approval, and resumable questions.

proves:
  - honest_state: Thinking, tool success, waiting, approval, and question states stay local to the object they describe.
  - bounded_action: Proposed file/action is visible before approval. Host still owns execution.
  - resumable_flow: Question is a native form. Server-rendered response can continue the same conversation.
  - no_js_baseline: Messages, tool output, approval controls, and the question remain readable without runtime.

compose:
  - chat-message
  - loading-state
  - reasoning
  - tool-call
  - approval-gate
  - ask-user-question
  - chat-input

rules:
  - Judgement pause = approval-gate + ask-user-question.
  - Do not invent larger components or undocumented state names.
  - Focused recipes: chat-streaming, tool-approval, question-resume.

Source map

This overview composes `chat-message`, `loading-state`, `reasoning`, `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.

Install

Composition-only: copy the listed component stylesheets plus host chrome. The host owns execution, authorization, and state transitions.

head.html

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="themes.css">
<link rel="stylesheet" href="components/button/button.css">
<link rel="stylesheet" href="components/chat-thread/chat-thread.css">
<link rel="stylesheet" href="components/chat-message/chat-message.css">
<link rel="stylesheet" href="components/chat-input/chat-input.css">
<link rel="stylesheet" href="components/chat-input/chat-input-features.css">
<link rel="stylesheet" href="components/loading-state/loading-state.css">
<link rel="stylesheet" href="components/reasoning/reasoning.css">
<link rel="stylesheet" href="components/tool-call/tool-call.css">
<link rel="stylesheet" href="components/approval-gate/approval-gate.css">
<link rel="stylesheet" href="components/ask-user-question/ask-user-question.css">
<link rel="stylesheet" href="host-chrome.css">