ToolCallCard
먼저 보고, 그다음 계약을 읽습니다
에이전트 도구 호출 하나를 접이식 카드로 — 이름·상태 배지 + 펼치면 input/output.
Component intent의도와 경계 읽기
LLM/agent 가 호출한 tool 한 건을 표시한다. 헤더에 도구명과 상태(대기/실행 중/완료/오류)를 보여주고, 클릭·Enter·Space 로 펼치면 input(호출 인자)과 output(결과)을 mono 폰트 본문에 드러낸다. 상태는 data-status, 펼침은 data-open 속성으로 노출돼 CSS 가 chevron 회전·테두리를 분기한다. 펼침 상태는 내부 useState(defaultOpen 초기값) — 완전한 controlled 모드는 없다. AgentExecutor 가 메시지별 tools 를 이 카드로 렌더한다.
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
import { ToolCallCard } from "@axe/ui";<ToolCallCard name="search_evidence" status="success" input={JSON.stringify({ query: "2024 매출" }, null, 2)} output={JSON.stringify({ hits: 3 }, null, 2)}/>import { ToolCallCard } from "@axe/ui";<ToolCallCard name="query_trial_balance" status="running" defaultOpen input={`{ "period": "2024-Q4" }`}/><div class="axe-toolcall" data-open="true" data-status="success"> <div class="axe-toolcall__header" role="button" tabindex="0" aria-expanded="true"> <span class="axe-toolcall__name"> <span class="axe-toolcall__chevron" aria-hidden="true">›</span> search_evidence </span> <span class="axe-toolcall__status">완료</span> </div> <div class="axe-toolcall__body">{ "hits": 3 }</div></div>Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
name | string | 필수 | — | 도구명. 헤더에 chevron 과 함께 표시. |
status | "pending" | "running" | "success" | "error" | — | "success" | ToolStatus. 각각 대기/실행 중/완료/오류 라벨로 렌더되고 data-status 속성에도 반영. |
input | React.ReactNode | — | — | 도구 호출 입력(JSON 문자열 등). 펼침 시 'input' 라벨 아래 표시. |
output | React.ReactNode | — | — | 도구 호출 결과. 펼침 시 'output' 라벨 아래 표시. |
defaultOpen | boolean | — | false | 초기 펼침 여부(초기값 전용 — 이후는 내부 상태로 토글). |
...rest | React.HTMLAttributes<HTMLDivElement> | — | — | 나머지는 루트 <div> 로 전파. |
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-toolcall | stable | 루트 <div>. data-open / data-status 속성으로 CSS 가 분기. |
.axe-toolcall__header | stable | 토글 헤더(role="button"). 클릭/Enter/Space 로 펼침. |
.axe-toolcall__name | stable | 도구명 + chevron 을 담는 좌측 그룹(accent 색·semibold). |
.axe-toolcall__status | stable | 우측 상태 라벨 텍스트(대기/실행 중/완료/오류). |
.axe-toolcall__body | stable | 펼침 시 input/output 본문(mono, pre-wrap, overflow-x auto). |
.axe-toolcall__chevron | internal | 펼침 표시 chevron(장식, aria-hidden). [data-open="true"] 에서 90deg 회전. |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
- Enter / Space — 헤더에서 펼침/접힘(preventDefault 로 스크롤 방지)
- Tab — 헤더(tabIndex=0)로 포커스 진입
헤더는 네이티브 <button> 이 아니라 <div role="button" tabIndex={0}> 이며 aria-expanded 로 펼침 상태를 고지하고 Enter/Space 를 수동 처리한다. chevron 은 aria-hidden 장식이고, 상태는 시각(data-status 색)과 텍스트(axe-toolcall__status 라벨) 양쪽으로 전달돼 색에만 의존하지 않는다.
펼침 본문은 open && (input || output) 일 때만 마운트된다 — 둘 다 없으면 헤더만 렌더(펼쳐도 빈 본문이 생기지 않음).