본문으로 건너뛰기
언어

Tracestandard

에이전트가 한 일(도구 호출, 생각 같은 단계)을 한 줄씩 보여 주고 눌러서 세부 내용을 펼치는 단계 기록(trace)입니다. shadcn base-nova 의 stock 아이템입니다. 펼침은 `collapsible` 아이템이 맡습니다.

설치

pnpm
pnpm dlx shadcn@4.23.0 add @uikit/trace

의존 아이템collapsible

에이전트가 한 일(도구 호출, 생각 같은 단계)을 한 줄씩 보여 주고 눌러서 세부 내용을 펼치는 단계 기록(trace)입니다. shadcn base-nova 의 stock 아이템입니다. 펼침은 collapsible 아이템이 맡습니다.

설치

sh
pnpm dlx shadcn@4.23.0 add @uikit/trace

사용

tsx
import {  Trace,  TraceCollapsible,  TraceCollapsibleContent,  TraceCollapsibleTrigger,  TraceDescription,  TraceLine,  TraceTitle,} from "@/components/ui/trace";
export function ReadFileStep() {  return (    <Trace>      <TraceCollapsible>        <TraceCollapsibleTrigger>          <TraceLine status="running">            <TraceTitle>Read file</TraceTitle>            <TraceDescription>12 ms</TraceDescription>          </TraceLine>        </TraceCollapsibleTrigger>        <TraceCollapsibleContent>src/index.ts, 120 lines</TraceCollapsibleContent>      </TraceCollapsible>    </Trace>  );}

속성

문서: shadcn, upstream 예제

부품뜻주요 속성
Trace단계 묶음 divclassName
TraceLine한 줄status("running" | "error" | "pending")
TraceIcon아이콘 자리(aria-hidden)className
TraceTitle한 줄 제목. 넘치면 말줄임합니다className
TraceDescription오른쪽 보조 글자(시간 등)className
TraceCollapsible펼침 뿌리open, onOpenChange(둘을 함께), defaultOpen, disabled
TraceCollapsibleTrigger펼침 버튼. 오른쪽에 화살표 아이콘을 덧붙입니다render
TraceCollapsibleContent펼쳐지는 내용className(안쪽 div 에 적용)

기본으로 지키는 것

  • status 는 data-status 속성으로만 남습니다. 색과 반짝임은 이 속성을 보는 CSS 가 맡습니다. 알 수 없는 값도 속성으로만 남기고 예외는 없습니다.
  • TraceCollapsible 의 open 을 주면 onOpenChange 도 함께 줘야 하는 타입입니다. 제어하면 부모가 바꾸기 전까지 닫힌 채입니다.
  • 닫혀 있는 동안 내용은 DOM 에 보이지 않습니다.
  • TraceIcon 은 aria-hidden 이라 화면 읽기 프로그램이 건너뜁니다. 상태는 글자로도 알립니다.
  • TraceCollapsibleTrigger·TraceCollapsibleContent 를 TraceCollapsible 밖에서 그리면 예외를 던집니다.
  • 모든 부품에 data-slot="trace-*" 이름이 붙습니다.

접근성

트리거는 button 이고 aria-expanded 가 펼침 상태를 알립니다.

키동작
Enter, Space트리거로 내용을 펼치고 접습니다
Tab다음 트리거로 초점을 옮깁니다

의존

cn, lucide-react. 다른 아이템은 collapsible 입니다.