agentic

tool call

A single tool invocation with its name, exact arguments, status, and output.

au-tool-call

Installation

tokens.css + tool-call.css

head.html

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/tool-call/tool-call.css">

Basic

{"path":"CHANGELOG.md","offset":0,"limit":30}

3 headings found. No file changed.

{"path":"release-notes.md"}

Permission denied. No file changed.

Code

tool-call.html + tool-call.css

tool-call

<style>
.au-tool-call { background: var(--au-surface); border: 1px solid var(--au-border-color); border-radius: var(--au-radius-lg); color: var(--au-fg); overflow: hidden; }
.au-tool-call__header { align-items: center; display: flex; gap: 8px; justify-content: space-between; padding: 12px 16px; }
.au-tool-call__name { align-items: center; display: inline-flex; font: 600 13px/1.3 var(--au-font-sans); gap: 8px; letter-spacing: -0.01em; }
.au-tool-call__name::before { background: var(--au-fg-muted); border-radius: 50%; content: ""; height: 8px; width: 8px; }
.au-tool-call__status { color: var(--au-fg-subtle); font: 400 12px/1.3 var(--au-font-sans); }
.au-tool-call__args,.au-tool-call__output { border-top: 1px solid var(--au-border-color); color: var(--au-fg-muted); font: 12px/1.55 var(--au-font-mono); margin: 0; padding: 12px 16px; }
.au-tool-call__args { overflow-x: auto; white-space: pre-wrap; }
.au-tool-call__output { background: var(--au-bg); }
.au-tool-call[data-au-state="success"].au-tool-call__name::before { background: var(--au-success); }
.au-tool-call[data-au-state="error"].au-tool-call__name::before { background: var(--au-danger); }
.au-tool-call[data-au-state="waiting"].au-tool-call__name::before { background: var(--au-warning); }
</style>

<div style="display: grid; gap: 12px; width: 100%;"><section class="au-tool-call" data-au-state="success" aria-label="Successful read 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-tool-call" data-au-state="error" aria-label="Failed write tool call"><header class="au-tool-call__header"><span class="au-tool-call__name">write-file</span><span class="au-tool-call__status">error</span></header><pre class="au-tool-call__args">{"path":"release-notes.md"}</pre><p class="au-tool-call__output">Permission denied. No file changed.</p></section></div>

Component contract

Install: tokens.css · tool-call.css
States: running, waiting, success, error, cancelled
Host: invocation, authorization, and audit identity

For agents

tool-call.contract

# agent-ui / tool-call
component: tool-call
selector: .au-tool-call
data_au_component: tool-call
purpose: A single tool invocation with its name, exact arguments, status, and output.

install:
  - tokens.css
  - tool-call.css

states: running, waiting, success, error, cancelled.
css_variables: Uses semantic surface and status tokens.
events: native form, focus, and click only — no custom events or runtime required
no_javascript: Serialized args and output remain visible as text.
host_owns: The host owns invocation, authorization, and audit identity.
accessibility: Label the region; keep args selectable.
security: Escape arguments and output. Never execute tools here.

rules:
  - Host owns execution, authorization, persistence, validation, and state transitions.
  - Components render host-provided state; they never execute tools or imply approval.
  - Escape untrusted model output, tool args, and tool output before insertion.
  - Use only documented data-au-* attributes and data-au-state values.
  - Keep the no-JS path usable. Do not add React, Tailwind, bundlers, or remote assets.
source: components/tool-call/tool-call.{html,css} + README.md + fixture.html