#Tool Call

Tool Call turns one external capability execution into an auditable name, input, progress, result, and recovery path. Its collapsed summary answers what is happening, which integration owns it, and its current state; potentially long input and output stay behind the disclosure.

{"query":"permission|policy","path":"src","limit":200}

src/security/policy.ts:42: export function authorize(...)
src/runtime/permission.ts:18: type PermissionDecision = ...
tests/policy.spec.ts:71: expect(decision).toEqual(...)

npm install @a3s-lab/ui@0.4.0

<details class="tool-call" data-state="preparing">
<summary>
  <span data-tool-kind aria-hidden="true"><svg viewBox="0 0 16 16" width="16" height="16"><path d="M3 4h10M3 8h10M3 12h6" /></svg></span>
  <span data-tool-identity><strong>Read repository status</strong><small data-tool-operation>shell · git status --short</small></span>
  <span data-tool-duration>0 ms</span>
  <span data-tool-status>Preparing</span>
  <span data-tool-chevron aria-hidden="true">›</span>
</summary>
<section data-tool-content>
  <pre data-tool-input>{"workdir":"/workspace/ui"}</pre>
  <pre data-tool-output></pre>
  <p data-tool-error hidden></p>
</section>
<footer><button type="button" data-tool-action="copy-output">Copy output</button></footer>
</details>
<script type="module">
import "@a3s-lab/ui";
import "@a3s-lab/ui/tool-call";
const call = document.querySelector(".tool-call");
call.setState("running", { label: "Running" });
call.appendOutput("M src/runtime.ts\\n");
call.setState("succeeded", { label: "Succeeded", duration: "824 ms" });
</script>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Product boundary

Tool Call is not a generic log container. It preserves the information a person needs to decide whether an execution is trustworthy without dumping provider-internal fields into the interface.

• Use an intent-level title such as “Read configuration,” not only shell_command.
• Distinguish preparing, awaiting approval, running, succeeded, denied, failed, timed out, and interrupted.
• Enter awaiting before a risky operation and let the host render explicit approve and deny actions.
• Separate input, output, and error. Long content keeps its own scroll boundary instead of expanding the task timeline indefinitely.
• Retry, stop, copy, and open-file actions emit events; networking, authorization, and auditing remain host responsibilities.

#Controller

Prefer preparing, awaiting, running, succeeded, failed, denied, timed-out, and interrupted. The legacy queued, waiting, success, cancelled, and error states remain compatible.

#Accessibility and security

The action name and state in the summary cannot rely on color or an icon alone. The runtime exposes running state through aria-busy; an approval flow moves focus to real buttons, and completion produces one polite status announcement. Remove tokens, cookies, secrets, and personal data before rendering. Copy only the already-redacted visible output.