Chat with tools starter

<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">
                <p class="au-chat-message__body">Prepare release notes from the latest changes, but show me the file before you write it.</p>
              </article>

              <article class="au-chat-message au-chat-message--assistant">
                <div class="starter-agent-stack">
                  <p class="au-chat-message__body">I will inspect the repository first, then prepare a bounded file proposal.</p>
                  <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-reasoning" 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><input type="hidden" name="actionId" value="write-release-notes-01"><input type="hidden" name="args" value="{&quot;path&quot;:&quot;release-notes.md&quot;}"><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="Send a message..." 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">↑</button></div></form></div>

<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">