#Execution Item

Execution Item is a native disclosure for one command, tool call, edit, search, browser action, or MCP invocation. It keeps the integration contract stable while applications supply domain-specific details.

PASS tests/runtime.spec.ts Watching cancellation cleanup…

npm install @a3s-lab/ui@0.4.0

<details class="execution-item" data-state="running">
  <summary>
    <span data-execution-icon aria-hidden="true">...</span>
    <span data-execution-identity
      ><strong>Run tests</strong><small>npm test</small></span
    >
    <span data-execution-status>Running</span>
    <span data-execution-disclosure aria-hidden="true">...</span>
  </summary>
  <section>...</section>
  <footer>...</footer>
</details>

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

#Usage

<details class="execution-item" data-state="running">
  <summary>
    <span data-execution-icon aria-hidden="true">...</span>
    <span data-execution-identity
      ><strong>Run tests</strong><small>npm test</small></span
    >
    <span data-execution-status>Running</span>
    <span data-execution-disclosure aria-hidden="true">...</span>
  </summary>
  <section>...</section>
  <footer>...</footer>
</details>

#Parameters

#States and variants

Map backend-specific states into the six public states and retain detailed wording in data-execution-status. Use waiting for approval or external input. Keep partial output visible after error or cancellation. Nested Execution Items are allowed only when the parent represents a real delegated group; avoid deep disclosure trees.

#Accessibility

Native <details> and <summary> provide disclosure semantics and keyboard behavior. The visible title must identify the action without relying on its icon. Do not put the Summary inside a button. Keep output in ordinary text or <pre> unless records are genuinely live; use Log Viewer for high-volume streams.