Recipe / complete run
Review today's release notes.
A small, copyable surface for the moment an agent reads evidence, proposes a write, waits for approval, and resumes after one human decision.
Specimen
Preview
Code
chat-tools.html
<div class="starter-thread">
<section class="au-chat-thread" aria-label="Conversation">
<div class="au-chat-thread__messages">
<article class="au-chat-message au-chat-message--user">
<span class="au-chat-message__avatar" aria-hidden="true">you</span>
<div><div class="au-chat-message__meta"><span class="au-chat-message__role">Human</span><time class="au-chat-message__time">09:41</time></div><p class="au-chat-message__body">Prepare release notes from the latest changes, but show me the file before you write it.</p></div>
</article>
<article class="au-chat-message au-chat-message--assistant">
<span class="au-chat-message__avatar" aria-hidden="true">au</span>
<div class="starter-agent-stack">
<div><div class="au-chat-message__meta"><span class="au-chat-message__role">Agent</span><time class="au-chat-message__time">09:41</time></div><p class="au-chat-message__body">I will inspect the repository first, then prepare a bounded file proposal.</p></div>
<div class="au-thinking-indicator" role="status" aria-live="polite"><span class="au-thinking-indicator__dots" aria-hidden="true"><span></span><span></span><span></span></span><span class="au-thinking-indicator__label">Agent is thinking</span></div>
<div class="au-thinking-steps" aria-label="Agent steps"><div class="au-thinking-step" data-au-state="success"><span class="au-thinking-step__dot" aria-hidden="true"></span><span class="au-thinking-step__label">Read the repository</span><time class="au-thinking-step__time">0.4s</time></div><div class="au-thinking-step" data-au-state="success"><span class="au-thinking-step__dot" aria-hidden="true"></span><span class="au-thinking-step__label">Prepare release notes</span><time class="au-thinking-step__time">1.2s</time></div></div>
<section class="au-tool-call" data-au-state="success" aria-label="Tool call"><header class="au-tool-call__header"><span class="au-tool-call__name">read</span><span class="au-tool-call__status">success · 0.4s</span></header><pre class="au-tool-call__args">{"path":"CHANGELOG.md","offset":0,"limit":30}</pre><p class="au-tool-call__output">3 headings found. No file changed.</p></section>
<section class="au-approval-gate" data-au-state="waiting" data-action-id="write-release-notes-01" aria-labelledby="starter-approval-title"><header class="au-approval-gate__header"><div><p class="au-approval-gate__eyebrow">approval required</p><h2 class="au-approval-gate__title" id="starter-approval-title">Write release-notes.md?</h2></div><div class="au-approval-gate__aside"><span class="au-approval-gate__shortcut">⌘↵ Approve</span><span class="status-tag" data-approval-label>waiting</span></div></header><p class="au-approval-gate__action">write-file · release-notes.md · <code>actionId=write-release-notes-01</code> · exact action shown</p><form class="au-approval-gate__footer" method="post" data-approval-form><button class="au-btn au-btn--ghost" type="submit" name="decision" value="reject">Keep editing</button><button class="au-btn au-btn--primary" type="submit" name="decision" value="approve">Approve write</button></form></section>
<form class="au-ask-user-question" method="post" data-question-form><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>
<p class="starter-state" data-host-note aria-live="polite">Approve the write, then choose a channel. Both forms stay usable without JavaScript.</p>
</div>
</article>
</div>
</section>
</div>
<div class="starter-composer"><form class="au-chat-input" method="post" data-composer><label class="sr-only" for="starter-message">Message</label><textarea class="au-chat-input__textarea" id="starter-message" name="message" rows="2" placeholder="Ask the agent to continue..." required></textarea><div class="au-chat-input__footer"><span class="au-chat-input__hint" data-composer-state>Native form, host-owned submit.</span><button class="au-btn au-btn--primary" type="submit">Send</button></div></form></div>Composition only — copy each component stylesheet listed in Install, plus optional
host-chrome.css. Page chrome in this starter is not a library CSS file.Install
head.html
<link rel="stylesheet" href="tokens.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/thinking-indicator/thinking-indicator.css">
<link rel="stylesheet" href="components/thinking-steps/thinking-steps.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">Copy this file with the listed stylesheets. Replace the local paths when you move it into your app. Keep the host responsible for validation and execution.