MVP / agentic
tool call
A single tool invocation with its name, exact arguments, status, and output.
Specimen
A single tool invocation with its name, exact arguments, status, and output. Copy Preview, Code, or Install from the tabs. The raw file and standalone fixture remain below.
Preview
{"path":"CHANGELOG.md","offset":0,"limit":30}3 headings found. No file changed.
{"path":"release-notes.md"}Permission denied. No file changed.
No runtime required. The host owns state, persistence, and any execution boundary.
Code
tool-call.html
<style>
.au-tool-call { background: var(--au-surface-muted); border: 1px solid var(--au-border-color); border-radius: var(--au-radius-md); color: var(--au-fg); overflow: hidden; }
.au-tool-call__header { align-items: center; display: flex; gap: 10px; justify-content: space-between; padding: 12px 14px; }
.au-tool-call__name { align-items: center; display: inline-flex; font: 600 12px/1.3 var(--au-font-mono); gap: 8px; }
.au-tool-call__name::before { background: var(--au-action); border-radius: 50%; content: ""; height: 6px; width: 6px; }
.au-tool-call__status { color: var(--au-fg-subtle); font: 10px/1.3 var(--au-font-mono); }
.au-tool-call__args { border-top: 1px solid var(--au-border-color); color: var(--au-fg-muted); font: 11px/1.55 var(--au-font-mono); margin: 0; overflow-x: auto; padding: 12px 14px; white-space: pre-wrap; }
.au-tool-call__output { background: var(--au-bg); border-top: 1px solid var(--au-border-color); color: var(--au-fg-muted); font: 11px/1.55 var(--au-font-mono); margin: 0; padding: 12px 14px; }
.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>
<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"}</pre>
<p class="au-tool-call__output">3 headings found. No file changed.</p>
</section>Install
head.html
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/tool-call/tool-call.css">Component contract
- Dependencies
tokens.css,tool-call.css.- States
- `running`, `waiting`, `success`, `error`, and `cancelled` are explicit host states.
- CSS variables
- No component-specific variables. Use the semantic surface, border, foreground, and status tokens.
- Events
- Native form, focus, and click events. No custom event or runtime is required.
- No JavaScript
- Serialized arguments, output, tool name, and status remain visible as text without JavaScript.
- Host boundary
- The host owns invocation, authorization, timeout, retry, cancellation, output sanitization, and audit identity.
Accessibility and security
Keep the state explicit.
Accessibility: Label the region, expose the tool status as text, keep serialized arguments selectable, and never use the status dot as the only signal. Security: Treat arguments and output as untrusted text. Escape before insertion. The core surface never executes tools or interprets output.
Source files
The page is documentation, not a package boundary. Copy the raw files and edit them in your application.