Tool call

Tab

Moves through the group header, each call row, a row's Allow, Deny or Retry buttons, and inside an open row its copy buttons and the show more control.

Enter, Space

On the group header, opens or closes the list. On a call row, opens or closes Input and Output. On Allow, Deny, Retry, copy and show more, activates them.

• The group header and every call row are real buttons with aria-expanded and aria-controls; a row's name reads the tool, the verb phrase and the status, such as "GitHub: Searched issues in arc-ui/web Done, 4 results, 1.2s".
• Status is never color alone: each status has its own icon shape (spinner, check, alert, shield, ban), failed and waiting calls show a reason line, and the row name spells the status out.
• Each call announces its status changes through a polite live region, including that the preview only simulates an action when no handler is passed.
• Allow, Deny and Retry are labelled with the call they act on, such as "Allow: Post a summary to #release".
• The input list is a description list; tables keep table semantics with column headers. Folded rows and lines are hidden from assistive technology until shown.
• Copy buttons confirm success or failure in place and through a live region, without changing width.
• Pointer focus draws no ring; keyboard focus shows Arc's shared ring, inset inside rows so it is never clipped.

• Opening a row, opening the group and showing more lines animate height on the critically damped smooth spring, with a short opacity fade; chevrons turn on the shared CSS spring.
• Opening the group staggers its rows in 20ms apart with a 6px settle. Rows appended by a live run grow in from zero height instead, so nothing below them jumps.
• A row's height follows its content on the same spring when a reason line or wrapped actions appear, so a status change never resizes in one frame.
• Status icons trade places with a snappy scale and fade; the success check draws itself once. The running title uses the text shimmer and settles to solid when the call finishes.
• The mark stack widens on the morph spring as a new tool joins, so the header label glides instead of jumping.
• Reduced motion removes the stagger, spinner rotation, shimmer travel and springs. Panels, rows and statuses change immediately and every label, announcement and focus path stays.

• Rows are container aware: below 440px the meta keeps only the duration, the reason line wraps, and Allow, Deny and Retry move under the reason so the title keeps its width.
• Under 440px the Input and Output panel drops its title indent and uses the full row width; wide JSON and tables scroll inside their own well, never the page.
• Rows are 40px tall and inline actions grow to 32px on touch screens. The whole row is the tap target for opening it.

• Folded outputs use fixed row heights, so folding and unfolding never measures the DOM.
• Input and Output mount only while a row is open; a closed group unmounts its rows.
• Height follows content through one ResizeObserver per row, and width changes from the container cut straight to the new height without animating.
• No dependencies beyond motion and lucide-react; brand marks are inline SVG.

• Use ToolCallGroup for the tool calls of one assistant turn and ToolCall for a single call shown on its own. Render the group between the assistant's intro sentence and its answer.
• Append calls to the array as the agent starts them and change status in place; keep ids stable. Pass active while the agent is still working so the header does not flicker between calls.
• Give each call a past tense title and a present tense titles.running, and for approval calls an imperative titles.approval ("Post a summary to #release") plus a message saying what allowing will do.
• Pick the output type that reads best: list for search results and issues, table for SQL rows, json for structured API responses, text for a sent message or a short log. Use renderOutput for anything richer.
• Approve, deny and retry handlers should update the call's status; the component never changes status itself when a handler is passed. Without handlers it simulates locally, which suits previews only.
• Brand marks are sample content and never imply endorsement. For tools without a built in mark pass { name, mark } with a 16px inline SVG.

The full library index for assistants is at /llms.txt.