#Tool Result

Tool Result presents the primary result, diagnostics, and structured metadata for a completed call in one switchable region. Use it when the output has distinct peer views that people need to compare. A one-line success message stays in the Tool Call summary.

PASS tests/policy.spec.ts
PASS tests/permission-boundary.spec.ts

Test Suites  2 passed (2)
Tests        18 passed (18)

[setup] loading permission fixtures
[runner] executing 18 cases
[cleanup] removed temporary workspace

npm install @a3s-lab/ui@0.4.0

<section class="tool-result tabs" data-state="ready">
<header><strong>Test result</strong><span data-tool-result-status>Passed</span></header>
<div role="tablist" aria-label="Result views">
  <button type="button" role="tab" id="summary-tab" aria-controls="summary-panel" aria-selected="true" tabindex="0">Summary</button>
  <button type="button" role="tab" id="output-tab" aria-controls="output-panel" aria-selected="false" tabindex="-1">Output</button>
</div>
<section role="tabpanel" id="summary-panel" aria-labelledby="summary-tab" tabindex="-1">18 tests passed</section>
<section role="tabpanel" id="output-panel" aria-labelledby="output-tab" tabindex="-1" hidden><pre>PASS tests/runtime.spec.ts\n18 tests passed</pre></section>
</section>
<script type="module">
import "@a3s-lab/ui";
import "@a3s-lab/ui/tabs";
</script>

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

#Information architecture

The first tab is the view most useful for making a decision, not mechanically stdout. Tabs are peer representations of one result, such as summary, output, diff, preview, and metadata. Retry, download, and open-file commands belong in the header action region.

Loading, empty, and error states retain the result identity and status. An error view explains the cause and exposes a recovery action instead of rendering an empty Output tab. Use a dedicated previewer or download link for binary assets, images, and very large files rather than mounting the whole resource in the DOM.

#Controller and states

Tool Result reuses Tabs select(tab, focus) and refresh() methods and emits the same cancelable transition events. Root state is ready, loading, empty, or error. The selected tab is an internal view state and cannot replace whether the result itself is available.

#Accessibility

Each tab and panel pair must have matching aria-controls and aria-labelledby values. Arrow keys, Home, and End move within the tablist. Inactive tabs use tabindex="-1"; inactive panels use native hidden. Header status, result counts, and exit codes have text equivalents and never depend on green or red alone.